/* The phone's tab bar — §3.8's five tabs, at the foot of every page.
 *
 * Split out of views.css in increment S (views.css stood at 764 of its 800
 * lines and the bar was about to grow): every rule about the bar lives here,
 * its absence on the desk included. Linked straight after views.css, so the
 * cascade is what it was.
 *
 * S (the owner on his Android phone, 2026-10-10; review finding 9): the bar
 * was five words in 45 px. It is now Android's bottom navigation — an icon
 * over its label in a 56 px link, the Pending count a badge on its icon.
 * The icons are inline <svg aria-hidden="true"> in index.html, one 24 px
 * outline set, stroke = currentColor, so a tab's colour is its link's.
 *
 * Tokens only (light and dark are one definition). Standing rule 2 of
 * views.css holds here too: sticky, never fixed, and no transform, filter or
 * contain on the bar's ancestors.
 */

/* `position: sticky`, never `fixed` — same containing-block hazard as the
 * sheet. z-index 1, deliberately under .capture__bar's 2: that bar is a
 * stacking context and the autocomplete popover lives inside it, so a nav at 3
 * would render over the suggestion list on the phone, which is the one screen
 * where the list matters most. */
.tabs {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  margin-top: auto;
  /* A fixed height, so the dock's `bottom: var(--tabs-h)` in capture.css is
   * exactly this bar and the two can never disagree by a pixel. */
  box-sizing: border-box;
  height: var(--tabs-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* A control that takes the focus is scrolled clear of the bar, never under
 * it: the page keeps the bar's height, and a little, out of what it scrolls
 * into view (fidelity review of H1, round 1: at 390 × 844, and at 1280 × 720
 * where PSDiary.exe is driven by keyboard, a tabbed-to Pending row landed at
 * y 800–844 under a bar that starts at 799). Every page but Today, whose
 * dock stands on the bar as well and moves with what is typed. */
:root:has([data-view]:not([data-view="today"]):not([hidden])) {
  scroll-padding-bottom: calc(var(--tabs-h) + var(--space-2));
}

/* A tab: its icon over its label, the whole fifth of the bar its target —
 * 56 px tall and never under 64 px wide on a 320 px phone. `position:
 * relative` is for the count, which is a direct child of the link
 * (planned.js names the link through the badge's parent). */
.tabs__link {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: var(--tabs-link-h);
  padding: var(--space-1) 2px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* The pill under the icon answers a press (below); Android's grey flash
   * over the tab's whole square would say it twice. */
  -webkit-tap-highlight-color: transparent;
}

.tabs__link:active .tabs__icon {
  background: var(--surface-sunken);
}

/* The icon, on a pill that fills in on the tab that is open (below). */
.tabs__icon {
  box-sizing: content-box;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 2px var(--space-3);
  border-radius: 999px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One line, always: at 320 px "Calendar" is the widest at 12 px and fits its
 * 64 px fifth; a longer word in another language would end in an ellipsis
 * rather than wrap the bar taller than its fixed height. */
.tabs__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs__link:hover {
  color: var(--ink);
}

.tabs__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Three cues, not one (WCAG 1.4.1): the open tab is green at weight 700
 * against the others' muted 500 (MOCKUP:96-98, decision §1.25 — the orange
 * top bar went), and its icon stands on a pill of the chosen wash. The
 * label is green on --surface: 6.25:1 in light and 5.1:1 in dark. The icon
 * is green on the wash: 5.65:1 and 3.96:1, where a drawing owes 3:1. */
.tabs__link[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

.tabs__link[aria-current="page"] .tabs__icon {
  background: var(--tint-chosen);
  stroke-width: 2;
}

/* C1's Pending count, a badge on the icon's shoulder. Charcoal on the brand
 * orange — 4.9:1 in light and 5.9:1 in dark; the wireframe's white on
 * #F58634 is only 2.5:1 (§5). 12 px, never smaller (S). The ring of the
 * bar's surface keeps it apart from the icon's stroke under it. */
.tabs__count {
  position: absolute;
  top: 3px;
  left: calc(50% + 0.375rem);
  box-sizing: border-box;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  background: var(--emphasis);
  color: var(--ps-charcoal);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25rem;
  text-align: center;
}

/* S, step 2: from 720px the bar is wider than five tabs want to be — at
 * 1024px each was 198px, an icon adrift in the middle of it. A tab stops
 * growing at 9rem and the five stand together in the bar's middle, as
 * Android's bottom navigation does on a wide screen. Under 720px (and in the
 * 42rem column a phone on its side keeps) five times 9rem is more than the
 * bar, so they share it exactly as before. */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .tabs {
    justify-content: center;
  }

  .tabs__link {
    flex: 0 1 9rem;
  }
}

@media (min-width: 1100px) {
  /* The wireframe draws no tabs on the desk (NEXT-PLAN §5 L): the bar goes,
   * and with it its height — the dock and the toast sit on the window's
   * foot. tokens.css keeps the phone's value; this is the desk's. */
  :root {
    --tabs-h: 0px;
  }

  .tabs {
    display: none;
  }
}