/*
 * Shared styles for the grid direction samples: page shell and the small
 * controls every option uses (buttons, selects, search, badges, menus,
 * dialogs, messages). MOBILE FIRST: base rules are the phone layout and
 * `@media (min-width: 760px)` adds the desktop layout.
 * Every colour, space and radius comes from tokens.css.
 */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ross-bg);
  color: var(--ross-text);
  font-family: var(--ross-font);
  font-size: var(--ross-text-md);
  line-height: 1.45;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ross-accent); color: var(--ross-on-accent);
  padding: calc(var(--ross-space-2) - var(--ross-focus-width)) calc(var(--ross-space-3) - var(--ross-focus-width));
  border: var(--ross-focus-width) solid transparent; border-radius: var(--ross-radius-sm);
}
.skip-link:focus { left: var(--ross-space-3); top: var(--ross-space-3); z-index: 100; }

/* Focus is ONE line (Dev Rule #46): a focused control's OWN border turns --ross-focus-line and thickens to
   --ross-focus-width. No outline, no ring, no halo. A control drawn without a border carries a transparent
   one, so focus only recolours it. A 1px border taking the 2px focus width gives the pixel back from the
   padding, so nothing moves. An invalid control keeps its red border (the error is what the person is
   fixing); focus thickens it. Text that takes focus but has no box (a heading moved to, a link in a
   sentence) gets the one line as an outline: there is no border for it to double. */
:focus-visible { outline: none; }
/* a page's main region, moved to by the skip link or by script, has no box of its own: one line just inside its edge */
main[tabindex="-1"]:focus-visible { outline: var(--ross-focus-width) solid var(--ross-focus-line); outline-offset: calc(-1 * var(--ross-focus-width)); }
:where(a, h1, h2, h3, h4, summary):focus-visible { outline: var(--ross-focus-width) solid var(--ross-focus-line); outline-offset: 2px; border-radius: var(--ross-radius-sm); }
:is(.btn, .select, .search):focus-visible { outline: none; border-color: var(--ross-focus-line); border-width: var(--ross-focus-width); }
.btn:focus-visible { padding-inline: calc(var(--ross-btn-pad-x) + 1px - var(--ross-focus-width)); }
.btn-icon:focus-visible { padding: 0; }
.btn-primary:focus-visible { border-color: var(--ross-focus-on-accent); box-shadow: inset 0 0 0 1px var(--ross-focus-on-accent-edge); }
.select:focus-visible { padding-inline: calc(0.6rem + 1px - var(--ross-focus-width)); }
.search:focus-visible { padding-right: calc(0.6rem + 1px - var(--ross-focus-width)); padding-left: calc(2rem + 1px - var(--ross-focus-width)); background-position: calc(0.6rem + 1px - var(--ross-focus-width)) center; }
.skip-link:focus-visible { outline: none; border-color: var(--ross-focus-on-accent); box-shadow: inset 0 0 0 1px var(--ross-focus-on-accent-edge); }
.menu button:focus-visible { border-color: var(--ross-focus-line); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Sample shell (not part of the grid) ---------- */
.shell-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--ross-space-2); align-items: center;
  padding: var(--ross-space-2) var(--ross-space-3);
  background: var(--ross-surface); border-bottom: 1px solid var(--ross-border);
}
.shell-title { font-weight: 600; font-size: var(--ross-text-sm); color: var(--ross-text-muted); margin-right: auto; }
.shell-tabs { display: flex; gap: var(--ross-space-1); overflow-x: auto; }
.shell-tab {
  font: inherit; font-size: var(--ross-text-sm); white-space: nowrap;
  background: transparent; color: var(--ross-text-muted);
  border: 1px solid var(--ross-border); border-radius: 999px;
  padding: 0.3rem 0.75rem; cursor: pointer;
}
.shell-tab[aria-selected="true"] { background: var(--ross-accent-bg); color: var(--ross-accent-strong); border-color: var(--ross-accent); }
.shell-tab[aria-selected="true"]:focus-visible { border-color: var(--ross-focus-on-accent); box-shadow: inset 0 0 0 1px var(--ross-focus-on-accent-edge); }
.shell-tab:focus-visible { border-color: var(--ross-focus-line); border-width: var(--ross-focus-width); padding: calc(0.3rem + 1px - var(--ross-focus-width)) calc(0.75rem + 1px - var(--ross-focus-width)); }

.page { padding: var(--ross-space-3); max-width: 1320px; margin: 0 auto; }
.option-intro {
  font-size: var(--ross-text-sm); color: var(--ross-text-muted);
  margin: 0 0 var(--ross-space-3); max-width: 70ch;
}
.option-intro strong { color: var(--ross-text); }

@media (min-width: 760px) {
  .shell-bar { padding: var(--ross-space-3) var(--ross-space-5); }
  .page { padding: var(--ross-space-5); }
}

/* ---------- Admin card that holds a grid ---------- */
.panel {
  background: var(--ross-surface);
  border: 1px solid var(--ross-border);
  border-radius: var(--ross-radius-lg);
  overflow: hidden;
}

.grid-head {
  display: flex; flex-wrap: wrap; gap: var(--ross-space-2); align-items: center;
  padding: var(--ross-space-3);
  border-bottom: 1px solid var(--ross-border);
}
.grid-title { margin: 0; font-family: var(--ross-font-heading); font-size: var(--ross-text-lg); font-weight: 650; margin-right: auto; }
.grid-count { font-size: var(--ross-text-sm); color: var(--ross-text-faint); font-weight: 500; }

.grid-tools {
  display: flex; flex-wrap: wrap; gap: var(--ross-space-2); align-items: center;
  padding: var(--ross-space-3);
  border-bottom: 1px solid var(--ross-border);
  background: var(--ross-surface-2);
}

@media (min-width: 760px) {
  .grid-head, .grid-tools { padding: var(--ross-space-3) var(--ross-space-4); }
}

/* ---------- Controls ---------- */
.btn {
  font: inherit; font-size: var(--ross-btn-font); font-weight: 550;
  display: inline-flex; align-items: center; gap: var(--ross-space-1);
  min-height: var(--ross-btn-h); padding: 0 var(--ross-btn-pad-x);
  border-radius: var(--ross-radius-sm);
  border: 1px solid var(--ross-border-strong);
  background: var(--ross-surface-2); color: var(--ross-text);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--ross-surface-3); }
.btn-primary { background: var(--ross-accent); border-color: var(--ross-accent); color: var(--ross-on-accent); }
.btn-primary:hover { background: var(--ross-accent-strong); }
/* Focused, a hovered primary button keeps its resting fill: the hover fill (--ross-accent-strong) would put the on-accent
   line against a fill it cannot clear 3:1 on in light (black on #1a47a8 is 2.51:1). Only the combined state changes. */
.btn-primary:hover:focus-visible { background: var(--ross-accent); }
/* ONE rule for every attention ring (Dev Rule #46): a ring is a marker of STATE (a tour's spotlight, an open marker, a ringed target), drawn
   data-ring. Whenever ANY element on the page shows a keyboard focus line, every ring steps aside: the keyboard user's focus line is the one
   cue, whether focus is in the callout, has left it for another marker, or is anywhere else. Mouse users have no :focus-visible, so they still
   see the rings. (A first version switched them off only while focus was INSIDE the callout: Tab out of a non-modal tip and they came back.)
   A ring that is a zero-blur shadow keeps the rest of its shadow (a dimming layer) in the component's own rule beside this one. */
/* transition: none and animation: none, so a ring never FADES or PULSES beside the focus line: it drops at once whatever transition or animation its own
   rule declares (Codex v2 r5; a ring's pulse, such as the tour's .tr-ring, is the same hazard). tokens/focus_check.py reads the COMPUTED motion of every
   [data-ring] with transitions switched back on. */
html:has(:focus-visible) [data-ring] { outline: none; --ross-ring: 0 0 #0000; transition: none; animation: none; }
/* A ring drawn as a SHADOW (an inset editor ring, a spotlight's ring, an arrival highlight) is composed from --ross-ring beside any other shadow
   (box-shadow: var(--ross-ring), <dimming or elevation>); the rule above zeroes only that property, so the ring drops and every other shadow stays.
   Every always-on accent or focus ring is marked data-ring: tokens/focus_check.py fails one that is not. */
.btn-ghost { background: transparent; border-color: transparent; color: var(--ross-text-muted); }
.btn-ghost:hover { background: var(--ross-surface-3); color: var(--ross-text); }
.btn-icon { min-width: 36px; padding: 0; justify-content: center; }
.btn-danger { color: var(--ross-bad); }

.field { display: inline-flex; flex-direction: column; gap: 2px; }
.field-label { font-size: var(--ross-text-xs); color: var(--ross-text-faint); }
.select, .search {
  font: inherit; font-size: var(--ross-input-font);
  min-height: var(--ross-input-h); padding: 0 0.6rem;
  border-radius: var(--ross-radius-sm);
  border: 1px solid var(--ross-border-strong);
  background: var(--ross-surface); color: var(--ross-text);
}
.search { min-width: 0; width: 100%; padding-left: 2rem;
  /* Magnifier icon: a mid-grey that reads on both themes, centred at any field height */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a93a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: 0.6rem center; background-repeat: no-repeat; }
.search-wrap { flex: 1 1 100%; }
@media (min-width: 760px) { .search-wrap { flex: 0 1 260px; } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--ross-text-xs); font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--ross-surface-3); color: var(--ross-text-muted);
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ross-ok-bg); color: var(--ross-ok); }
.badge-warn { background: var(--ross-warn-bg); color: var(--ross-warn); }
.badge-bad { background: var(--ross-bad-bg); color: var(--ross-bad); }
.badge-info { background: var(--ross-info-bg); color: var(--ross-info); }
.dot-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--ross-accent); display: inline-block; flex: none; }

/* ---------- Row menu ---------- */
.menu {
  position: absolute; z-index: 40; min-width: 200px;
  background: var(--ross-surface); border: 1px solid var(--ross-border-strong);
  border-radius: var(--ross-radius-md); box-shadow: var(--ross-shadow);
  padding: var(--ross-space-1); margin: 0; list-style: none;
}
.menu button {
  font: inherit; font-size: var(--ross-text-sm); width: 100%; text-align: left;
  background: transparent; color: var(--ross-text); border: var(--ross-focus-width) solid transparent;
  padding: calc(0.5rem - var(--ross-focus-width)) calc(0.65rem - var(--ross-focus-width)); border-radius: var(--ross-radius-sm); cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--ross-surface-3); }

/* ---------- Dialog (confirm) ---------- */
dialog.confirm {
  border: 1px solid var(--ross-border-strong); border-radius: var(--ross-radius-lg);
  background: var(--ross-surface); color: var(--ross-text);
  padding: var(--ross-space-5); max-width: min(440px, calc(100vw - 32px));
  box-shadow: var(--ross-shadow);
}
dialog.confirm::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog.confirm h2 { margin: 0 0 var(--ross-space-2); font-size: var(--ross-text-lg); }
dialog.confirm p { margin: 0 0 var(--ross-space-4); color: var(--ross-text-muted); }
.dialog-actions { display: flex; gap: var(--ross-space-2); justify-content: flex-end; }

/* ---------- Messages: pop-up (8s), informational (stays), action-required (dialog) ---------- */
.toasts {
  position: fixed; z-index: 60; left: var(--ross-space-3); right: var(--ross-space-3); bottom: var(--ross-space-3);
  display: flex; flex-direction: column; gap: var(--ross-space-2); align-items: center; pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: var(--ross-space-3); align-items: center;
  background: var(--ross-surface-3); color: var(--ross-text);
  border: 1px solid var(--ross-border-strong); border-left: 4px solid var(--ross-ok);
  border-radius: var(--ross-radius-md); box-shadow: var(--ross-shadow);
  padding: var(--ross-space-2) var(--ross-space-3); font-size: var(--ross-text-sm);
  max-width: 480px; width: 100%;
}
.toast-info { border-left-color: var(--ross-info); }
/* The Undo toast (K36): Undo is a real button with its shortcut shown (not on a touch screen, which has no keyboard). */
.toast .toast-act { flex: none; font-weight: 700; }
.toast kbd { font: inherit; font-size: var(--ross-text-xs); color: var(--ross-text-muted); margin-left: var(--ross-space-1); padding: 0 4px;
  border: 1px solid var(--ross-border); border-radius: var(--ross-radius-sm); }
@media (pointer: coarse) { .toast kbd { display: none; } }
@media (min-width: 760px) { .toasts { left: auto; right: var(--ross-space-5); bottom: var(--ross-space-5); align-items: flex-end; } }

/* ---------- Declaration viewer ---------- */
.decl { font-size: var(--ross-text-sm); border-collapse: collapse; width: 100%; }
.decl th, .decl td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--ross-border); }
.decl th { color: var(--ross-text-faint); font-weight: 500; width: 36%; }
.decl td { font-family: var(--ross-font-mono); font-size: var(--ross-text-xs); color: var(--ross-text); word-break: break-word; }

.empty { padding: var(--ross-space-6) var(--ross-space-4); text-align: center; color: var(--ross-text-muted); }
.empty strong { display: block; color: var(--ross-text); margin-bottom: var(--ross-space-1); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }