/* The phone's bottom bar (./dock.js). Phones only: above 640px it is not
   drawn and the page shows its own strip.

   ITS GROUND IS THE NAV BAR'S. The bar at the top and this one at the bottom
   are the same kind of floating surface - 78% `--bg` over a 14px blur, the
   owner's reference for every translucent bar (features/nav/nav.css) - so a
   skin that restyles one restyles both (`:is(.nav, .dock)` in Classical and
   Mystic). The hairline is on the top edge, facing the page.

   THE LIVE SLOT is the accent, with the product's travelling line under it
   (ui/underline reads `aria-current`; the bar carries `data-underline="x"`).
   The others are muted ink, full ink under a pointer that can hover.

   Tokens only; no skin named. */

@layer components {
  :root {
    /* The bar's own height, without the home indicator's inset. A page that
       mounts a dock leaves `--dock-height` plus that inset free at its foot. */
    --dock-height: 3.75rem;
  }

  .dock { display: none; }

  @media (width < 640px), (orientation: landscape) and (pointer: coarse) and (hover: none) and (height <= 500px), (device-posture: folded), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
    .dock {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      /* One under the popover tier: the nav's menu sheet and every popover
         open OVER the bar, never under it. */
      z-index: calc(var(--z-popover) - 1);
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      block-size: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
      padding-block-end: env(safe-area-inset-bottom, 0px);
      padding-inline: max(var(--space-1), env(safe-area-inset-left, 0px)) max(var(--space-1), env(safe-area-inset-right, 0px));
      background: color-mix(in oklab, var(--bg) 78%, transparent);
      backdrop-filter: blur(14px);
      border-block-start: 1px solid var(--border);
    }

    /* The on-screen keyboard is up: the bar steps aside (./dock.js). So does
       focus mode, which is the page and nothing else. */
    .dock[data-keyboard],
    body[data-focus-mode] .dock { display: none; }
  }

  .dock__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-inline-size: 0;
    min-block-size: 44px;
    padding: var(--space-1) 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2) var(--ease-out);
  }

  .dock__item[aria-current="true"] { color: var(--accent); }

  @media (hover: hover) {
    .dock__item:not([aria-current="true"]):hover { color: var(--text); }
  }

  .dock__item:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -4px;
  }

  .dock__icon { vertical-align: 0; }

  /* One word, in the label face, never wrapped or cut. The longest is the
     journal's "Achievements" in a quarter of the screen: at 360 that is 86px,
     so below about 390px the size follows the screen's width (3.1vw is 11px
     at 360) rather than the type scale's 12px, with a little less tracking. */
  .dock__label {
    font-family: var(--font-mono);
    font-size: min(var(--text-xs), 3.1vw);
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ── THE SITE'S BAR AND THE ROOM IT TAKES (owner, 2026-11-07) ──────────
     The bar features/nav mounts on every page carries `data-site-dock`.
     While it is showing on a phone, `--dock-offset` on the root is its height
     plus the home indicator's inset; 0 otherwise (no bar on the admin site,
     the keyboard up, focus mode). The route outlet pads by it, so a page's
     last line scrolls clear of the bar; anything fixed to the foot adds it;
     a layout sized to the screen subtracts it. Here, not in the nav's lazy
     sheet, because index.html loads this one before the first paint. */
  @media (width < 640px), (orientation: landscape) and (pointer: coarse) and (hover: none) and (height <= 500px), (device-posture: folded), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
    :root:has(body:not([data-focus-mode]) .dock[data-site-dock]:not([data-keyboard])) {
      --dock-offset: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
    }
    .route-outlet { padding-block-end: var(--dock-offset, 0px); }
  }

  /* ── A PHONE TURNED SIDEWAYS (owner, 2026-11-09) ────────────────────────
     "i want the menus to stay in positon on hrizontal rotation just change so
     the icons are rotated in the correct readable position (horizontal top and
     bottom menues become verticlay running right and left menus)", each bar
     following the phone's edges (the owner's answer). On a sideways phone
     (core/phone.js: a touch screen, landscape, at most 500px tall) the nav
     bar becomes a rail down the side the phone's TOP is on and this bar a
     rail down the other side. `data-sideways` on the root says which side is
     up ("left" until it says otherwise). Each rail keeps its controls where
     they sit on the phone: turned to the left, the phone's left end is at the
     bottom of the screen, so both rails run bottom to top (column-reverse);
     turned to the right, top to bottom. Icons and words stay upright.

     THE ROOM THE RAILS TAKE, for every page: `--rail-left` and
     `--rail-right` (0 otherwise). The route outlet pads by them; anything
     fixed to a side edge adds them. Nothing is at the foot (`--dock-offset`
     is 0) or at the top (`--nav-height` is 0). Here rather than in the nav's
     sheet because this file loads before the first paint. */
  :root {
    --rail-size: 4.75rem;
    --rail-left: 0px;
    --rail-right: 0px;
  }

  @media (orientation: landscape) and (pointer: coarse) and (hover: none) and (height <= 500px) {
    :root:has(#app .nav) { --rail-nav: var(--rail-size); }
    :root:has(body:not([data-focus-mode]) .dock[data-site-dock]:not([data-keyboard])) {
      --dock-offset: 0px;
      --rail-dock: var(--rail-size);
    }
    :root {
      --nav-height: 0px;
      --rail-left: calc(var(--rail-nav, 0px) + env(safe-area-inset-left, 0px));
      --rail-right: calc(var(--rail-dock, 0px) + env(safe-area-inset-right, 0px));
    }
    :root[data-sideways="right"] {
      --rail-left: calc(var(--rail-dock, 0px) + env(safe-area-inset-left, 0px));
      --rail-right: calc(var(--rail-nav, 0px) + env(safe-area-inset-right, 0px));
    }
    .route-outlet {
      padding-inline: var(--rail-left) var(--rail-right);
      padding-block-end: 0;
    }

    /* This bar, as the rail on the side the phone's bottom is on. */
    .dock {
      inset-block: 0;
      inset-inline: auto 0;
      block-size: auto;
      inline-size: var(--rail-right);
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      padding-block: max(var(--space-2), env(safe-area-inset-top, 0px)) max(var(--space-2), env(safe-area-inset-bottom, 0px));
      padding-inline: 0 env(safe-area-inset-right, 0px);
      border-block-start: 0;
      border-inline-start: 1px solid var(--border);
    }
    :root[data-sideways="right"] .dock {
      inset-inline: 0 auto;
      inline-size: var(--rail-left);
      flex-direction: column;
      padding-inline: env(safe-area-inset-left, 0px) 0;
      border-inline-start: 0;
      border-inline-end: 1px solid var(--border);
    }
    .dock__item {
      flex: 1 1 0;
      max-block-size: 5rem;
      padding-inline: var(--space-1);
    }
    /* A rail is narrower than a fifth of a phone held upright, so a long
       word ("Contact Us") takes two lines rather than running out. */
    .dock__label {
      font-size: var(--text-xs);
      white-space: normal;
      text-align: center;
      line-height: 1.15;
    }
  }
}