/* OrbitraSCOUT v0 clickthrough: the shell layer.
   One source of truth for the six item rail and the top bar, shared by the copied
   screens and the blank ones. Every colour here is a token from ../../brand/tokens.css.
   Loaded after each screen's own styles and before the brand token file, so the brand
   token file stays the last stylesheet in the head. */


.chrome, .solo-exit, .fs-btn, .solo-btn, .anno-btn, .anno, .dm-badge,
.ns-nav { display: none !important; }
/* .scout-modal-host stands in for the document body wherever these rules do,
   ADDED 10 September 2026: a dialog page carries the page it opens over as real
   markup inside that wrapper, so its .frame is a child of the wrapper and not of
   the body, and without the wrapper named here the backdrop kept the mockup
   sheet's own page padding, its 1440px cap, its border and its rounded corners.
   Found by looking at the first render of the rebuilt sheet. */
body, .scout-modal-host { padding: 0 !important; }
body > .frame, .scout-modal-host > .frame { max-width: none !important; margin: 0 !important;
  border: none !important; border-radius: 0 !important; min-height: 100vh !important; }
body.solo .o-shell, body > .frame > .o-shell,
.scout-modal-host > .frame > .o-shell { min-height: 100vh; }

/* ---- The rail. Six items, Settings pinned at the foot.
   The rail is one window tall and stays put while the page scrolls, so Settings sits at
   the foot of the rail rather than at the foot of a long document. `overflow: clip`
   replaces the shell's `overflow: hidden`, which would stop the rail sticking. */
.o-shell:has(> .scout-rail) { overflow: clip; }
.o-shell > .scout-rail { display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; align-self: start; }
.scout-rail .rail-brand { padding: var(--sp-8) 10px var(--sp-24); }
.scout-rail .rail-brand a { display: block; line-height: 0; }

.scout-rail .rail-brand img { height: 29.25px; width: auto; display: block; }
.scout-rail__spacer { flex: 1 1 auto; min-height: var(--sp-24); }
a.scout-rail__link { text-decoration: none; }
a.scout-rail__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }


.scout-topbar { gap: var(--sp-16); }
.scout-topbar__left { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; }
.scout-co { font: var(--fw-medium) var(--fs-sm)/var(--lh-sm) var(--font-ui);
  color: var(--text-secondary); white-space: nowrap; }
.scout-chip { font: var(--fw-medium) var(--fs-caption)/1 var(--font-ui);
  color: var(--teal-300); background: var(--teal-900); border: 1px solid var(--teal-700);
  border-radius: var(--r-full); padding: 5px var(--sp-8); white-space: nowrap; }
.scout-topbar__right { display: flex; align-items: center; gap: var(--sp-16); }
.scout-pill { display: inline-flex; align-items: center; gap: var(--sp-8);
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-ui); color: var(--text-secondary);
  background: var(--bg-raised); border: 1px solid var(--border-default);
  border-radius: var(--r-full); padding: 6px var(--sp-12) 6px 10px; text-decoration: none; }
.scout-pill:hover { border-color: var(--border-hover); color: var(--text-primary); }
.scout-pill svg { width: 15px; height: 15px; stroke-width: 1.6; }

.scout-pill b { font-weight: var(--fw-medium); color: var(--text-onFill);
  background: var(--danger-fill); border-radius: var(--r-full);
  min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; }
.scout-who { display: inline-flex; align-items: center; gap: var(--sp-8); }

.o-topbar .profile { display: inline-flex; align-items: center; gap: var(--sp-8); }
.scout-topbar .o-avatar { display: grid; place-items: center; flex: none;
  border: 1px solid var(--border-subtle);
  font: var(--fw-medium) var(--fs-caption)/1 var(--font-ui); color: var(--text-secondary); }
/* THE MENU OPENS ON THE SAME FACE THE BAR CLOSES ON. Added 14 September 2026
   on Shane's instruction: the initials that identify the person on the bar now
   sit to the left of their name and job inside the menu too, so opening it
   carries the same mark rather than dropping it. */
/* THE WHOLE BLOCK IS THE LINK, not the name inside it. Shane, 15 September:
   the face, the name and the job are one target and they should say so on
   hover. It takes the menu's own row treatment, the same inset, radius and
   hover fill the three rows below the rule use, so the menu has one way of
   showing that something can be pressed rather than two. */
.scout-menu__id { display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-8) 10px; margin: 0 -10px;
  border-radius: var(--radius-row); text-decoration: none; }
.scout-menu__id:hover { background: var(--bg-surface); }
.scout-menu__id:focus-visible { outline: 2px solid var(--focus-ring);
  outline-offset: -2px; }
.scout-menu__idt { min-width: 0; }
.scout-menu__idt .scout-menu__who { display: block; }
.scout-menu .o-avatar { flex: none; }
.scout-who__t { display: flex; flex-direction: column; line-height: 1.25; }
.scout-who__n { font: var(--fw-medium) var(--fs-xs)/1.25 var(--font-ui); color: var(--text-primary); }
.scout-who__r { font: var(--fw-regular) var(--fs-caption)/1.25 var(--font-ui); color: var(--text-tertiary); }

/* ---- A blank screen: title, one line saying what the page is for, its calls to
   action. Nothing else is drawn until the screen is designed. */
.scout-page { padding: var(--sp-48) 0 var(--sp-64); max-width: var(--content-max); }
.scout-page__eyebrow { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-ui);
  color: var(--text-tertiary); margin: 0 0 var(--sp-8); }
/* The page heading is one size across the product (Shane, 12 September): the blanks
   were one step below the designed screens. */
.scout-page__h { font: var(--fw-medium) var(--fs-2xl)/var(--lh-2xl) var(--font-display);
  color: var(--text-primary); margin: 0 0 var(--sp-12); }
.scout-page__p { font: var(--fw-regular) var(--fs-md)/var(--lh-md) var(--font-ui);
  color: var(--text-secondary); margin: 0 0 var(--sp-32); max-width: 60ch; }
.scout-acts { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
.scout-act { display: inline-flex; align-items: center; gap: var(--sp-8);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-ui); text-decoration: none;
  border-radius: var(--r-sm); padding: 11px var(--sp-16); border: 1px solid transparent; cursor: pointer; }
.scout-act--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.scout-act--primary:hover { background: var(--action-primary-bgHover); }
.scout-act--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text);
  border-color: var(--border-default); }
.scout-act--secondary:hover { background: var(--action-secondary-bgHover); }
.scout-act--quiet { background: none; color: var(--action-ghost-text); border-color: var(--border-default); }
.scout-act--quiet:hover { background: var(--action-ghost-bgHover); }
.scout-act[disabled], .scout-act.is-locked { background: var(--bg-inset); color: var(--text-disabled);
  border-color: var(--border-subtle); cursor: not-allowed; }
.scout-act:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scout-lock { display: block; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-ui);
  color: var(--text-tertiary); margin-top: var(--sp-8); width: 100%; }
.scout-note { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-ui);
  color: var(--text-tertiary); margin: var(--sp-32) 0 0; }

/* ---- A modal screen: the page it opens over, dimmed, with the dialog on top. */
.scout-dim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.62);
  display: grid; place-items: center; padding: var(--sp-24); }
.scout-modal { width: min(520px, 100%); background: var(--bg-raised);
  border: 1px solid var(--border-default); border-radius: var(--r-lg); padding: var(--sp-32); }
.scout-modal__h { font: var(--fw-medium) var(--fs-lg)/var(--lh-lg) var(--font-display);
  color: var(--text-primary); margin: 0 0 var(--sp-12); }
.scout-modal__p { font: var(--fw-regular) var(--fs-sm)/var(--lh-sm) var(--font-ui);
  color: var(--text-secondary); margin: 0 0 var(--sp-24); }
.scout-modal .scout-acts { justify-content: flex-end; }


.scout-slots { margin: 0 0 var(--sp-24); }
.scout-days { display: flex; gap: var(--sp-20); margin: 0 0 var(--sp-12); }
.scout-day { appearance: none; -webkit-appearance: none; background: none;
  border: 0; border-bottom: 2px solid transparent; padding: 0 0 var(--sp-4);
  font: var(--fw-medium) var(--fs-caption)/1 var(--font-ui);
  color: var(--text-tertiary); cursor: pointer; }
.scout-day:hover { color: var(--text-primary); }
.scout-day.is-on { color: var(--text-primary); border-bottom-color: var(--action-primary-bg); }
.scout-day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.scout-times[hidden] { display: none; }
.scout-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); }
.scout-slot { display: inline-flex; align-items: center; justify-content: center;
  height: 32px; font: var(--fw-regular) var(--fs-sm)/1 var(--font-ui);
  color: var(--text-secondary); background: var(--bg-inset);
  border: 1px solid var(--border-default); border-radius: var(--r-full);
  padding: 0 var(--sp-8); text-align: center; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.scout-slot:hover { border-color: var(--border-hover); color: var(--text-primary); }
.scout-slot.is-on { background: var(--action-primary-bg); border-color: var(--action-primary-bg);
  color: var(--action-primary-text); font-weight: var(--fw-medium); }
.scout-slot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- A modal screen: the page it opens over is shown behind the dim, so the
   dialog is seen where it belongs rather than on an empty ground.

   CHANGED 10 September 2026. This used to hold an iframe pointed at the page
   behind. build/03_blanks.py now builds that page's own markup and styles INTO
   the dialog file at build time, so there is nothing left to load when the file
   is opened and no browser's local-file rules can leave the ground blank.
   ../../brand/components-v2.css section 7 makes it inert: fixed, clipped, no
   pointer events, no selection. The width and height come from the host page's
   own .frame, which is already one window tall. */
.scout-modal-host { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
/* The host page's own way back to the index is dropped when it is inlined, and
   so is its top-of-page anchor target; this catches anything the drop misses. */
.scout-modal-host .scout-home { display: none; }

/* ---- A pre-login blank sits on the same card the built pre-login screens use. */
.scout-card { position: relative; z-index: 1; width: min(520px, 100%);
  margin: 0 auto; padding: var(--sp-40); }
.o-prelogin .wizard { position: relative; z-index: 1; flex: 1; display: flex;
  flex-direction: column; justify-content: center; align-items: center; padding: var(--sp-40); }
.o-prelogin .frame-head { position: relative; z-index: 1; padding: var(--sp-24) var(--sp-40); }
/* Same ruling as the rail's mark above: the platform's own rule (components.css,
   copied unchanged from the source design system) sets this logo at 28px. Same
   selector, same specificity, and this file loads after components.css in every
   screen's head, so this is the height that actually renders: 28 x 1.3 = 36.4px.
   Three screens carry their own local copy of this exact header (same padding,
   same flex row, same 28px logo) under a screen-specific class instead of the
   shared one, because their own source authors named it locally: E6's own
   .wizhead, S4's own .pv-head, and X1's own .ie-pub__head (its local
   reproduction of the public verification page, for its error-state demo). All
   three need the same override, or their mark is left at the old, smaller size
   while every other pre-login screen moves to the new one. */
.o-prelogin .frame-head img, .wizhead img, .pv-head img, .ie-pub__head img {
  height: 36.4px; display: block; max-width: 100%;
}

/* ---- The way back to the clickthrough index, on every screen.
   FIXED 9 September 2026: this used to be var(--bg-inset) (the same value as the
   canvas itself, see the note on --bg-inset above) at 45% opacity, so it was never
   actually solid, and on the desk it read as the page's own text bleeding through
   the link's text rather than a chip sitting over the page. A genuinely raised,
   opaque surface fixes that; the low contrast now comes from colour choice alone
   (a quiet border and a tertiary text colour), not from transparency. */
.scout-home { position: fixed; right: var(--sp-16); bottom: var(--sp-16); z-index: 90;
  font: var(--fw-medium) var(--fs-caption)/1 var(--font-ui); color: var(--text-tertiary);
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--r-full); padding: 6px var(--sp-12); text-decoration: none; }
.scout-home:hover { color: var(--text-primary); border-color: var(--border-default); }