/* web/shell.css · the one band and the one footer on every ops page (16 oct 2026)
 *
 * Drawn by web/shell.js into <header class="shell"> and <footer class="shell">.
 * briefs/2026-10-16_consolidation_brief.md, lane A. The operational spec
 * (reference/design_system_operational.md): an ink band, dijon for the
 * wordmark only, mono UPPERCASE for the strip, no 700, every colour a token
 * from /tokens.css. Link it after /tokens.css and before the page's <style>.
 *
 * Every rule here starts header.shell or footer.shell, so a page's own
 * .shell wrap (the kitchen pages' centred column) never reaches the band.
 * The band lines up with the page's column: a page that sets --page
 * (720px, 1120px ...) gets the same gutters; a page that does not runs
 * full width with 16px gutters.
 */

header.shell, footer.shell {
  --shell-gutter: max(16px, calc((100% - var(--page, 100%)) / 2 + 16px));
  display: block;
  position: static;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}
/* the band's height, kept before shell.js draws it: no jump */
header.shell:not([data-drawn]) { min-height: 140px; }
header.shell :focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ── row one: the wordmark · the email · the mark slot ─── */
header.shell .shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 8px var(--shell-gutter) 0;
}
header.shell .shell-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--dijon);
  text-decoration: none;
}
header.shell .shell-who {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}
header.shell .shell-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rule-strong);              /* 8.1:1 on ink; ink-3 is never text (lane H) */
}
header.shell .shell-email:empty { display: none; }
header.shell .shell-mark {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
header.shell .shell-mark:empty { display: none; }
/* A mark on ink: the word in paper for every tier, so it reads (14.9:1).
 * Only the dot takes the tier: watch and urgent in their own colour, ok and
 * neutral in paper (on paper, ok is ink: the inverse). The word carries the
 * state; the dot is the second signal (2.9:1 and 2.6:1 on ink).
 * owed · Nevil's ruling on state colour over ink (refute of lane A, 17 oct). */
header.shell .shell-mark .mk,
header.shell .shell-mark .mk-ok,
header.shell .shell-mark .mk-watch,
header.shell .shell-mark .mk-urgent       { color: var(--paper); }
header.shell .shell-mark .mk-watch .mk-dot  { color: var(--watch); }
header.shell .shell-mark .mk-urgent .mk-dot { color: var(--urgent); }

/* ── row two: the page name · the page's own pieces ────── */
header.shell .shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 0 var(--shell-gutter);
}
header.shell .shell-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--paper);
}
header.shell .shell-page {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}

/* ── row three: the strip ─────────────────────────────── */
header.shell .shell-strip {
  position: relative;
  display: flex;
  gap: 0 20px;
  min-height: 44px;
  padding: 0 var(--shell-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
header.shell .shell-strip::-webkit-scrollbar { display: none; }
header.shell .shell-strip a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rule-strong);              /* 8.1:1 on ink */
  text-decoration: none;
  text-underline-offset: 6px;
  transition: color var(--fast) var(--ease);
}
header.shell .shell-strip a[aria-current="page"] {
  color: var(--paper);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}
header.shell .shell-strip a:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  header.shell .shell-strip a:hover { color: var(--paper); }
}

/* ── the footer ───────────────────────────────────────── */
/* the page's data (lane H, 18 oct 2026): SHELL.footData, mono 11, above the
   line. An adopted foot (data-shell="foot") lays its own spans out the same. */
footer.shell .shell-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px var(--shell-gutter) 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper);
  opacity: 0.6;                           /* paper at 60 percent on ink */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
footer.shell .shell-data:not(:has(> .shell-datum, > [data-shell="foot"]:not([hidden]))) { display: none; }
footer.shell .shell-data > [data-shell="foot"] { display: contents; }
footer.shell .shell-data > [data-shell="foot"][hidden] { display: none; }
footer.shell .shell-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  min-height: 44px;
  padding: 12px var(--shell-gutter) 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--paper);
  opacity: 0.6;                           /* paper at 60 percent on ink */
  font-variant-numeric: tabular-nums;
}
footer.shell .shell-credits {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
footer.shell :focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ── the ops root: the eleven rows (plain links in index.html) */
.shell-list {
  display: flex;
  flex-direction: column;
  max-width: var(--page, 720px);
  margin: 0 auto;
  padding: 8px 16px 48px;
}
.shell-list .shell-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--fast) var(--ease);
}
.shell-list .shell-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shell-list .shell-row:active { background: var(--paper-1); }
@media (hover: hover) and (pointer: fine) {
  .shell-list .shell-row:hover { background: var(--paper-1); }
}
.shell-list .shell-n {
  width: 20px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.shell-list .shell-row-name { flex-grow: 1; min-width: 0; font-size: 17px; font-weight: 500; }
.shell-list .shell-where { flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.shell-list .shell-glyph { width: 16px; flex-shrink: 0; text-align: right; font-size: 15px; color: var(--ink); }
@media (max-width: 359px) {
  .shell-list .shell-where { display: none; }    /* a very narrow phone: the name keeps its room */
}

@media print {
  header.shell .shell-strip, header.shell .shell-who { display: none; }
  footer.shell { margin: 0 !important; padding: 0 !important; }    /* the screen's foot, not the paper's */
}
@media (prefers-reduced-motion: reduce) {
  header.shell .shell-strip a, .shell-list .shell-row { transition: none; }
}