/* ============================================================
   AWAKE a11y craft layer (stage — exclusive surface)
   SaturnDesign direction (handoff compose 2026-08-07):
     Mercury × Membership Club grammar × Data brutalism —
     cockpit operator surface, money > logo, monochrome
     stamp chrome. Accessibility is craft, not compliance
     beige. Mint is LIVE/risk only — focus rails stay INK.
   Never: purple SaaS, soft glass, pill soup, fake invite.
   Loaded AFTER awake.css so these rails win.
   ============================================================ */

.sai-strip {
  position: relative;
  z-index: 50;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  min-height: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  background: var(--paper, #ece7db);
  color: var(--ink, #141312);
  border-bottom: 1px solid var(--ink, #141312);
}
.sai-strip a {
  color: inherit;
  text-underline-offset: 2px;
}

/* Skip = first focusable stamp — Tab lands here before chrome.
   Parked off-canvas; on focus it prints as an ink coupon. */
.skip-to-desk {
  position: absolute;
  left: var(--space-100, 8px);
  top: var(--space-100, 8px);
  z-index: 400;
  transform: translateY(-160%);
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(20, 19, 18, 0.35);
  text-decoration: none;
  outline: none;
}
.skip-to-desk:focus,
.skip-to-desk:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  color: var(--paper);
}

/* Mouse click should not leave a ring; keyboard always does.
   Dual offset so the ring separates from dense 1px grid chrome. */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Primary money actions: ink stamp focus, never mint décor */
.place-btn:focus-visible,
.side-btn:focus-visible,
.gate-btn:focus-visible,
.ronly-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--paper), 4px 4px 0 rgba(20, 19, 18, 0.25);
}

/* Palette search is the keyboard nerve — kill outline:none residue */
.palette input:focus,
.palette input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 0;
}

/* Desk tabs + chips as keyboard landings */
.desk-tab:focus-visible,
.chip-btn:focus-visible,
.type-btn:focus-visible,
.ema-btn:focus-visible,
.tf-btn:focus-visible,
.size-chip:focus-visible,
.pair-tab:focus-visible,
.gate-link:focus-visible,
.mast-brand:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Screen-reader-only utility (no visual marketing chrome) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Landmark: main is a scroll/anchor target without shifting layout */
#main.cockpit:focus {
  outline: none;
}
#main.cockpit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}

/* Second skip — market rail (movers / news / receipts) */
.skip-to-rail {
  left: auto;
  right: var(--space-100, 8px);
}
#receiptRail:focus {
  outline: none;
}
#receiptRail:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}

/* Rail tabs as keyboard landings — coarse target floor */
.rail-tab:focus-visible,
.mv-mode:focus-visible,
.nw-row:focus-visible,
#newsRefresh:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* Fine-pointer floor (WCAG 2.5.8 applies to mice too): chips measure 23px
   and mv-modes 20px under a desktop cursor. Scoped to pointer:fine so the
   phone masthead's fought-for vertical budget is untouched — coarse devices
   get the larger grid below instead. */
@media (pointer: fine) {
  .chip-btn,
  .mv-mode {
    min-height: 24px;
  }
}

@media (pointer: coarse) {
  .rail-tab {
    min-height: 44px;
    padding: 10px 12px;
  }
  .mv-mode {
    /* 44 floor both AXES — "UP" is 33px wide at 40 tall; min() of the box
       is what a thumb gets */
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
  }
  /* SIMPLE/PRO desk switch (v39): painted growth — the ticket head is
     mid-page, not inside the masthead's fought-for vertical budget */
  .tmode-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
  }
  /* ticket + gate text fields: a 37px-tall input is a miss-prone thumb
     target; growing the box also grows the tap-to-focus area */
  .ticket-field input {
    min-height: 44px;
  }
  /* the corner IZZY.LA exit link: 26px painted in a row that cannot grow —
     hit box via abspos pseudo (resolves against the padding box; measured
     clearance below is 9px+ of non-interactive price text) */
  .mast-brand {
    position: relative;
  }
  .mast-brand::after {
    content: "";
    position: absolute;
    /* resolves against the PADDING box — the 1px border eats a px per side,
       so -10 is what actually lands 44 (measured 42 at -9) */
    inset: -10px -5px;
  }
  .nw-row,
  .mv-row {
    min-height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* wire refresh is a chip with an icon glyph — give it a real thumb */
  #newsRefresh {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Gate dialog: when open, the sheet is the only readable worktop */
.gate:not([hidden]) .gate-card:focus-within {
  /* the card re-pins --ink to paper-ink, which vanishes on the dark veil —
     the rail must contrast the VEIL, so it is themed explicitly */
  outline: 2px solid #141312;
  outline-offset: 4px;
}
html[data-theme="ink"] .gate:not([hidden]) .gate-card:focus-within {
  outline-color: #e9e3d2;
}

/* Reduced motion — expand terminal chrome beyond base awake.css block.
   Keep static prints; drop continuous pulses and plate theater only. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .plate--specks .plate-canvas,
  .plate--saturn .plate-canvas {
    animation: none !important;
  }
  .conn-dot,
  .book-dot,
  .replay-dot {
    animation: none !important;
  }
  .sweep::after {
    transition: none !important;
  }
  .skip-to-desk {
    transition: none;
  }
  /* free-scroll equity spark / ticks aren't CSS; CSS transitions quiet */
  .mast-mark,
  .chip-btn,
  .place-btn,
  .side-btn {
    transition: none !important;
  }
}