/* components.css — the page-level constructs: callouts, cards, chips,
 * screenshots, diagrams, dialogs, step rails.
 *
 * Roles only. Anything meaningful carries a WORD as well as a colour or a
 * shape, because this site documents a WCAG AA product and should hold itself
 * to the same rule (docs/02-ux-conformance.md, accessibility).
 */

/* ---- callouts ---------------------------------------------------------- */

.note, .warn, .internal, .tip {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
}
.note > :last-child, .warn > :last-child,
.internal > :last-child, .tip > :last-child { margin-bottom: 0; }

.note     { background: var(--soft-primary-bg);  border-left-color: var(--accent); }
.tip      { background: var(--soft-success-bg);  border-left-color: var(--solid-success); }
.warn     { background: var(--soft-warning-bg);  border-left-color: var(--solid-warning); }
.internal { background: var(--soft-error-bg);    border-left-color: var(--solid-error); }

.note .label, .warn .label, .internal .label, .tip .label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
  color: var(--text-secondary);
}

/* The internal band. Static HTML on every /team/ page, so it survives with
 * JavaScript off and prints. */
.internal-band {
  background: var(--solid-error);
  color: var(--on-solid);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--sp-2) var(--sp-5);
  text-align: center;
  letter-spacing: 0.02em;
}
.internal-band a { color: var(--on-solid); }

/* ---- door cards (landing page) ----------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
  margin: 0 0 var(--sp-8);
  padding: 0;
  list-style: none;
}
.door {
  display: block;
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.door:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.door h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body-lg); }
.door p { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.door ol { font-size: var(--fs-sm); color: var(--text-tertiary); margin: 0; padding-left: var(--sp-5); }
.door .go { color: var(--accent-deep); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* ---- hero -------------------------------------------------------------- */

.hero {
  background: var(--grad-hero);
  color: var(--on-hero-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-7);
  margin-bottom: var(--sp-8);
}
.hero h1 { color: var(--on-hero-strong); margin-bottom: var(--sp-3); }
.hero p { color: var(--on-hero-muted); max-width: 54ch; margin-bottom: 0; }

/* ---- chips and badges -------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.15em 0.6em;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border);
  background: var(--bg-well);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
a.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }

.chip--platform    { background: var(--tint-1); color: var(--on-tint); border-color: transparent; }
.chip--tenant      { background: var(--tint-2); color: var(--on-tint); border-color: transparent; }
.chip--consultancy { background: var(--tint-3); color: var(--on-tint); border-color: transparent; }
.chip--operational { background: var(--tint-4); color: var(--on-tint); border-color: transparent; }
.chip--external    { background: var(--tint-5); color: var(--on-tint); border-color: transparent; }

.chip--retired {
  text-decoration: line-through;
  opacity: 0.75;
}
.chip--internal { background: var(--soft-error-bg); color: var(--soft-error-fg); border-color: transparent; }

/* yes / no marks in matrices. The glyph is decoration; the word is the data,
 * kept for screen readers and for anyone who cannot tell the dots apart. */
.mark { font-weight: var(--fw-bold); }
.mark--yes { color: var(--soft-success-fg); }
.mark--no  { color: var(--text-tertiary); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- glossary term links ----------------------------------------------- */

a.term {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
a.term:hover { border-bottom-style: solid; }

/* ---- definition lists (glossary) --------------------------------------- */

.gloss dt {
  font-weight: var(--fw-semibold);
  font-family: var(--font-display);
  margin-top: var(--sp-5);
  scroll-margin-top: 5rem;
}
.gloss dd { margin: var(--sp-1) 0 0; color: var(--text-secondary); }
.gloss dd .src { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: var(--sp-1); }

.azrail {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.azrail a {
  min-width: 1.5rem;
  text-align: center;
  padding: 0.1em 0.3em;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  text-decoration: none;
}
.azrail a:hover { background: var(--soft-primary-bg); color: var(--accent-deep); }
.azrail a[aria-disabled="true"] { color: var(--text-tertiary); opacity: 0.4; pointer-events: none; }

/* ---- screenshots ------------------------------------------------------- */

figure.shot { margin: 0 0 var(--sp-6); }
figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-well);
}
figure.shot figcaption {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
}
figure.shot figcaption .route { font-family: var(--font-mono); }

/* A clipped screenshot says so. A reader who cannot tell a truncated capture
 * from a short screen will think the feature is missing. */
figure.shot--clipped .frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
figure.shot--clipped .frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--bg-app));
  pointer-events: none;
}
.zoom {
  font: inherit;
  font-size: var(--fs-xs);
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-link);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- step rails (diagrams D1, D8) -------------------------------------- */

ol.rail { list-style: none; margin: 0 0 var(--sp-6); padding: 0 0 0 var(--sp-5); border-left: 2px solid var(--border); }
ol.rail > li {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-4);
  margin: 0;
}
ol.rail > li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1 - 6px);
  top: 0.45em;
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--bg-app);
  border: 2px solid var(--accent);
}
ol.rail .step-n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-right: var(--sp-2);
}
ol.rail .step-t { font-weight: var(--fw-semibold); }
ol.rail > li.gate::before { background: var(--solid-warning); border-color: var(--solid-warning); }
ol.rail > li.gate {
  background: var(--soft-warning-bg);
  border-radius: var(--r-md);
  padding-left: var(--sp-4);
  padding-top: var(--sp-2);
}

/* horizontal rail, wrapping — used for the report chain */
ol.chain {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0 0 var(--sp-6);
}
ol.chain > li {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
}
ol.chain > li.optional { border-style: dashed; color: var(--text-secondary); }

/* ---- tier bands (diagram D3) ------------------------------------------- */

.tier {
  border-left: 4px solid var(--accent);
  background: var(--bg-well);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.tier h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.tier p { font-size: var(--fs-xs); color: var(--text-secondary); margin: 0 0 var(--sp-3); }
.tier .roles { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- boundary boxes (diagram D6) --------------------------------------- */

.boundary {
  border: 2px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.boundary > h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-family: var(--font-mono); }
.boundary .inner { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.boundary .inner > div {
  flex: 1 1 10rem;
  background: var(--bg-surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
}
.boundary--other { opacity: 0.6; }

/* ---- inline SVG diagrams ----------------------------------------------- */

figure.diagram { margin: 0 0 var(--sp-6); }
figure.diagram svg { display: block; width: 100%; height: auto; color: var(--text-secondary); }
figure.diagram figcaption { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: var(--sp-2); }

/* ---- dialogs (search, zoom) -------------------------------------------- */

dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  padding: 0;
  max-width: min(42rem, 92vw);
  width: 100%;
}
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }

#search-dialog { max-width: min(42rem, 92vw); }
#search-dialog .sbox { padding: var(--sp-4); border-bottom: 1px solid var(--border); }
#search-dialog input {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body-lg);
  padding: var(--sp-2) var(--sp-3);
  background: var(--field-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
#search-results { list-style: none; margin: 0; padding: var(--sp-2); max-height: 60vh; overflow-y: auto; }
#search-results li { margin: 0; }
#search-results a {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
}
#search-results a:hover, #search-results li[aria-selected="true"] a { background: var(--row-hover); }
#search-results .r-title { font-weight: var(--fw-semibold); }
#search-results .r-crumb { font-size: var(--fs-xs); color: var(--text-tertiary); }
#search-results .r-excerpt { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--sp-1); }
#search-results mark { background: var(--accent-glow); color: inherit; border-radius: 2px; }
#search-dialog .sfoot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

#zoom-dialog { max-width: 96vw; }
#zoom-dialog .ztop {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
#zoom-dialog .ztop .spacer { flex: 1; }
#zoom-dialog .zbody { max-height: 82vh; overflow: auto; background: var(--bg-well); }
#zoom-dialog .zbody img { display: block; width: 100%; }

/* ---- breadcrumb -------------------------------------------------------- */

.crumb {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}
.crumb a { color: var(--text-secondary); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { margin: 0 var(--sp-2); }

/* ---- page meta --------------------------------------------------------- */

.sources {
  margin-top: var(--sp-9);
  font-size: var(--fs-sm);
}
.sources summary { cursor: pointer; color: var(--text-secondary); font-weight: var(--fw-medium); }
.sources ul { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-tertiary); }
.sources code { font-size: 0.75rem; }

.reviewed { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: var(--sp-8); }

/* ---- console mock (diagram D7) ----------------------------------------- */

.mock { border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-4); }
.mock .bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.mock .bar:last-child { border-bottom: 0; }
.mock .bar--2 { background: var(--bg-well); }
.mock .bar--3 { background: var(--bg-app); }
.mock .bar a { color: var(--text-secondary); text-decoration: none; }
.mock .bar a[aria-current="page"] {
  color: var(--accent-deep);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.mock .bar .spacer { flex: 1; }

/* ---- print-only masthead ----------------------------------------------
 * print.css is loaded with media="print", so it cannot hide this on screen.
 * The screen rule has to live here or the masthead shows above every h1.
 */
.print-head { display: none; }

/* route lists on the modules page: dense, monospace, wrapping */
ul.routes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0 0 var(--sp-5);
}
ul.routes li { margin: 0; }
ul.routes code {
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* Some route patterns are genuinely long — a per-staff path with a brace list
 * runs past 300px. Below the tablet breakpoint they wrap instead of pushing
 * the page sideways; §10 requires reflow to 320px with no horizontal scroll. */
@media (max-width: 40rem) {
  ul.routes { display: block; }
  ul.routes li { margin-bottom: var(--sp-2); }
  ul.routes code { white-space: normal; overflow-wrap: anywhere; }
}