/* Shared shell: tokens, header, footer, skip link, focus ring (SPEC 4.3-4.5, 5.1). */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%;
  font-display: swap; src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2");
}
:root {
  --night: #0b191e;
  --deck: #102329;
  --deck-2: #16303a;
  --rule: #27444e;
  --rule-2: #1b343c;
  --chalk: #ece7da;
  --fog: #9db0b5;
  --fog-2: #7a9198;
  --high: #ff6a4d;
  --elev: #f2b544;
  --proof: #7cc4f0;
  --proof-dim: #2a5670;
  --tg: #4d8fb5;
  --ot: #d9d4c6;
  --shell-h: 100px;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-prose: "Source Serif 4", Georgia, serif;
}
body { font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { :root { --shell-h: 68px; } }

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 1000;
  background: var(--chalk); color: var(--night); padding: 12px 16px; min-height: 44px;
  font: 600 15px/1.2 var(--font-ui); border-radius: 4px; text-decoration: none;
}
.skip:focus { top: 8px; }

[data-shell-header] a:focus-visible, [data-shell-header] summary:focus-visible,
[data-shell-footer] a:focus-visible, .skip:focus-visible {
  outline: 2px solid var(--proof); outline-offset: 3px;
}

.im-head {
  position: relative; box-sizing: border-box; height: var(--shell-h);
  background: var(--night); color: var(--chalk); border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  display: grid; grid-template-columns: 1fr; grid-template-rows: 56px 44px; align-items: center;
  padding: 0 12px;
}
.im-head a { color: inherit; text-decoration: none; }
.im-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; grid-row: 1; grid-column: 1; justify-self: start; }
.im-brand svg { width: 30px; height: 30px; flex: none; }
.im-brand-name { font-weight: 800; font-size: 22px; line-height: 1; }
.im-brand-line { display: none; font-size: 12.5px; color: var(--fog); }

.im-chip {
  grid-row: 1; grid-column: 1; justify-self: end; margin-right: 84px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.im-lamp { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--fog-2); }
.im-lamp-high { background: var(--high); }
.im-lamp-elev { background: var(--elev); }
.im-lamp-none { background: transparent; border: 2px solid var(--fog-2); box-sizing: border-box; }
.im-chip-w, .im-chip-t { display: none; }
.im-chip-t { color: var(--fog); font-weight: 400; }

[data-shell-header] nav { grid-row: 2; grid-column: 1; align-self: stretch; }
.im-tabs { list-style: none; margin: 0; padding: 0; display: flex; height: 44px; }
.im-tabs li { flex: 1 1 0; }
.im-tabs a, .im-more-list a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%;
  font-size: 15px; font-weight: 600; color: var(--fog); box-sizing: border-box;
}
.im-tabs a[aria-current="page"], .im-more-list a[aria-current="page"] {
  color: var(--chalk); box-shadow: inset 0 -2px 0 var(--proof);
}
.im-tabs a:hover, .im-more-list a:hover { color: var(--chalk); }

.im-more summary {
  position: absolute; top: 6px; right: 12px; height: 44px; min-width: 72px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 0 12px; cursor: pointer;
  list-style: none; font-size: 15px; font-weight: 600; border: 1px solid var(--rule); border-radius: 4px;
}
.im-more summary::-webkit-details-marker { display: none; }
.im-more-list {
  list-style: none; margin: 0; padding: 4px 0; position: absolute; top: 56px; left: 0; right: 0; z-index: 900;
  background: var(--deck); border-bottom: 1px solid var(--rule);
}
.im-more-list a { justify-content: flex-start; padding: 0 16px; min-height: 48px; }

@media (min-width: 480px) { .im-chip-w { display: inline; } }

/* 700 to 1199 px: still two rows (brand and chip, then the tabs; More stays a button),
   so a full set of live items can never run past the viewport. */
@media (min-width: 700px) {
  .im-head { padding: 0 20px; }
  .im-brand-line { display: inline; }
  .im-chip { font-size: 14px; margin-right: 96px; }
  .im-chip-t { display: inline; }
  .im-more summary { right: 20px; }
  .im-more-list { left: auto; right: 20px; min-width: 220px; }
}

/* 1200 px and up: one row, the More items inline. */
@media (min-width: 1200px) {
  .im-head { grid-template-columns: auto 1fr auto; grid-template-rows: 68px; column-gap: 24px; }
  .im-brand { grid-row: 1; grid-column: 1; flex-wrap: nowrap; }
  [data-shell-header] nav { grid-row: 1; grid-column: 2; display: flex; justify-content: flex-end; align-items: center; }
  .im-tabs { height: 44px; }
  .im-tabs li { flex: none; }
  .im-tabs a, .im-more-list a { padding: 10px 14px; }
  .im-chip { grid-row: 1; grid-column: 3; margin-right: 0; }
  .im-more { position: static; }
  .im-more summary { display: none; }
  .im-more::details-content { content-visibility: visible; }
  .im-more-list { position: static; display: flex; background: none; border: 0; padding: 0; min-width: 0; }
  .im-more-list a { justify-content: center; min-height: 44px; padding: 10px 14px; }
}

/* Open-question strip (I20): one line above the footer, a paragraph and no landmark. */
.im-strip {
  margin: 0; box-sizing: border-box; background: var(--deck); color: var(--chalk);
  border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  padding: 12px max(20px, calc((100% - 1200px) / 2));
}
.im-strip a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.im-strip a:focus-visible { outline: 2px solid var(--proof); outline-offset: 3px; }
.im-strip span { color: var(--fog); font-size: 13px; margin-left: 8px; white-space: nowrap; }

.im-foot {
  background: var(--night); color: var(--fog); border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  padding: 32px 20px 24px;
}
.im-foot a { color: var(--chalk); text-decoration: none; }
.im-foot a:hover { text-decoration: underline; }
.im-foot-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 700px) { .im-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.im-foot-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--fog); }
.im-foot-col p { margin: 0; max-width: 58ch; }
.im-foot-col ul { list-style: none; margin: 0; padding: 0; }
.im-foot-col li a { display: inline-flex; align-items: center; min-height: 44px; }
.im-foot-fine { max-width: 1200px; margin: 24px auto 0; padding-top: 16px; border-top: 1px solid var(--rule-2); font-size: 12.5px; color: var(--fog); }

@media (prefers-reduced-motion: reduce) {
  [data-shell-header] *, [data-shell-footer] *, .skip { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}