/* Tikrar — the Focus Theatre desk layer (T-300 / D-T55, 03.11.2026).
 *
 * Loaded AFTER bevel.css and every skin layer (web/index.html), so a tie here wins.
 * ONE floor: every rule in this file sits inside @media (min-width: 1024px) — the window
 * decides, there is no setting, no second URL. Below the floor this file paints nothing,
 * so the phone at 390 px is byte-what-it-was (proved: before/after render diff, bbox None).
 *
 * The grammar is the approved D3 theatre, redrawn on the shipped functions (manager proof
 * design/manager-proof.md): the bottom bar's own places become the LEFT ICON RAIL, the session
 * card becomes the centred STAGE, the progress becomes a 2 px HAIRLINE with its lime fill,
 * keyboard accelerators ride beside the visible pointer buttons as CSS ::after chips (no DOM
 * is added — the phone's markup is untouched), and Statistics keeps its two columns with the
 * sections placed as drawn (record + bars left, partition + worth-a-look right).
 * Colours ride the tokens only (--mist/--card/--line/--raised/--muted/--teal), so the light
 * twin dresses the desk with the same rules. The circles and the 14-day bars are the shipped
 * components and are not re-drawn here.
 */

@media (min-width: 1024px) {

  /* No bottom bar at desk widths: its places moved to the rail, so nothing reserves its slot. */
  :root { --tabbar-h: 0px; }

  /* ── the rail ────────────────────────────────────────────────────────────────
   * The SAME bar object (#tabbar, built by app.js), standing up on the left edge:
   * 56 px wide, icons only, 44 × 44 aims. In a session the rail steps down exactly
   * as the phone's bar does (T-031/T-034: the stage owns the screen, Esc is the way
   * out) — the desk changes the rail's PLACE, never the session's flow. */
  body:not(.is-home) { padding-inline-start: 56px; }
  /* theme-common's T-268 glass bar pins its shape with !important; the rail answers the
     same properties in kind — the desk's one sanctioned use, mirroring the shipped rule. */
  .tabbar {
    position: fixed !important; top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: auto !important;
    width: 56px !important; max-width: none !important; height: auto !important;
    margin: 0 !important; padding: 16px 0 !important;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    background: var(--mist) !important; border-radius: 0 !important;
    border: 0 !important; border-inline-end: 1px solid var(--line) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important; z-index: 70;
  }
  .tabbar__item { width: 44px; height: 44px; min-height: 44px; border-radius: 8px; }
  .tabbar__item:hover { background: var(--raised); text-decoration: none; }

  /* ── the website logo above the nav icons (his word 03.11: "same size of the
   * underneath navigation icons") — the same mark the top bar carries, drawn by
   * the rail itself as a 22 × 22 mark in the icons' own 44 × 44 aim: no DOM is
   * added, the phone never sees it, and the 8 px rhythm carries it to the items. */
  .tabbar::before {
    content: "";
    width: 44px; height: 44px; min-height: 44px; border-radius: 8px;
    background: url("/static/icons/icon-192.png") center / 22px 22px no-repeat;
  }
  .tabbar__fab {
    position: static !important; transform: none; right: auto !important;
    width: 44px !important; height: 44px !important; margin-top: 8px !important; border-radius: 12px;
  }

  /* Home keeps its full-bleed ink: the rail overlays the canvas, the content steps aside. */
  body.is-home .d2 > .body { padding-inline-start: 56px; }
  body.is-home .d2 header, body.is-home .d2 main { max-width: 880px; margin-inline: auto; }
  body.is-home #view { padding-inline: 0; }   /* the ink reaches BOTH edges at desk widths */

  /* ── the stage: the session ─────────────────────────────────────────────────── */
  .review-body { display: flex; flex-direction: column; padding: 24px 48px 20px; }
  .review-body .progress { height: 2px; border-radius: 1px; }   /* the hairline; the lime fill stays */
  .review-body .qcard {
    max-width: 820px; width: 100%; box-sizing: border-box;
    margin-inline: auto; margin-block: auto;      /* the centred stage */
    padding: 32px 52px 28px;
  }
  .review-body .qcard__prompt { font-size: 40px; line-height: 1.3; letter-spacing: -.01em; }
  .review-body .reveal__content { font-size: 18px; line-height: 1.55; }
  .review-body .merged__answer { font-size: 22px; }

  /* One label, one size at desk (T-353's rule, the desk's own measure). */
  .review-body .card-marks__kicker, .review-body .reveal__label, .review-body .reveal__hint,
  .review-body .reveal__hide, .review-body .merged__label:not(.merged__label--hook),
  .review-body .card-marks__foot-btn, .review-body .outcome__ask, .review-body .survey__ask,
  .review-body .certainty__ask,
  .review-head__count, .review-head__exit { font-size: 12px; }

  /* The footer's question centres on the stage. */
  .session-footer .outcome, .session-footer .certainty, .session-footer .verdict-row {
    max-width: 640px; margin-inline: auto;
  }

  /* ── keyboard accelerators beside the visible pointer buttons ────────────────
   * CSS ::after chips ONLY — the app adds no markup, so the phone's DOM (and its
   * pixels) are untouched. Every key maps to a button the pointer can press. */
  .review-head__exit::after, .reveal__btn::after, .verdict-next::after,
  .survey__btn::after, .outcome__btn::after {
    content: "";
    display: inline-block; padding: 1px 7px;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--raised); color: var(--muted);
    font: 700 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
    white-space: nowrap;
  }
  .review-head__exit::after { content: "Esc"; margin-inline-start: 8px; }
  .verdict-next::after { content: "\21B5"; margin-inline-start: 8px; }
  .reveal__btn { position: relative; }
  .reveal__btn::after {
    content: "Space"; position: absolute; top: 10px; inset-inline-end: 12px; margin: 0;
  }
  .survey__btn { position: relative; }
  .survey__btn::after, .outcome__btn::after {
    position: absolute; top: 6px; inset-inline-end: 10px; margin: 0;
  }
  .survey__btn:nth-child(1)::after { content: "1"; }
  .survey__btn:nth-child(2)::after { content: "2"; }
  .survey__btn:nth-child(3)::after { content: "3"; }
  .outcome__btn { position: relative; }
  .outcome__btn--no::after { content: "1"; }
  .outcome__btn--close::after { content: "2"; }
  .outcome__btn--yes::after { content: "3"; }

  /* ── Statistics: two columns from the floor, sections placed as drawn ────────
   * The .stats-cols grid itself shipped with T-408; the desk places its sections:
   * the record and the fortnight on the left, the partition and worth-a-look right. */
  .d2.stats main, .d2.stats header { max-width: 1120px; }
  .d2.stats .stats-cols > .ssec:nth-child(1) { grid-row: 1; grid-column: 1; }
  .d2.stats .stats-cols > .ssec:nth-child(2) { grid-row: 2; grid-column: 1; }
  .d2.stats .stats-cols > .ssec:nth-child(3) { grid-row: 1; grid-column: 2; }
  .d2.stats .stats-cols > .ssec:nth-child(4) { grid-row: 2; grid-column: 2; }

  /* -- Account: the sheet's own 600px measure, restored at desk widths (T-368) ---------------
   * account-mock.css draws the approved sheet's 600px column centred from 600px up ("the
   * sheet's 600 px column, centred"), and theme-common.css's @media(min-width:600px)
   * un-measure of .d2.account main/header cancels it at every desk width -- the screen
   * measured main 1076px / rows 1016px at 1280/1440/1920 before this rule. This restores
   * the frozen number at >=1024 only; the phone keeps its shipped pixels. The row values'
   * 150px cap (account-mock.css) stays below 1024; on the desk it relaxes so the email
   * reads whole -- a DECLARED deviation from the mock at desk widths only, where the flex
   * row itself keeps the label clear (.lbl flex:1 min-width:0; worst case the value
   * ellipsizes at the column edge, never overflows). The red Delete switch (D-T28) keeps
   * its approved off-state -- no rule here touches .switch or .arow--danger. */
  body.is-me .d2 header, body.is-me .d2 main { max-width: 600px; margin-inline: auto; }
  .d2.account .arow .val { max-width: none; }
}