/* Newstand control panel — "wire room console"
   Type thesis: humanist sans = what a human decides. Mono = what the machine resolves.
   Color thesis: brass = signal/live, steel = incoming, moss = healthy, rust = needs you. */

:root {
  --paper:    #E6E7E1;
  --panel:    #F4F4F0;
  --panel-hi: #FBFBF8;
  --ink:      #161A16;
  --ink-2:    #3D443C;
  --muted:    #737A70;
  --rule:     #C9CBC2;
  --rule-2:   #DEDFD8;

  --brass:      #A8792A;
  --brass-deep: #7A5618;
  --brass-wash: #F0E5CC;
  --steel:      #3A5F8A;
  --steel-wash: #DDE5EF;
  --moss:       #4A7C59;
  --moss-wash:  #DCE8DE;
  --rust:       #A63D2F;
  --rust-wash:  #F2DED9;

  --r: 3px;
  --gut: 20px;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --disp: "Archivo", var(--sans);

  --shadow: 0 1px 0 #FFFFFF inset, 0 1px 2px rgba(22, 26, 22, .07);
}

* { box-sizing: border-box; }

/* must beat .pills{display:flex} and friends */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  /* faint horizontal ruling — the paper under an instrument panel */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 47px, rgba(22, 26, 22, .028) 47px 48px
  );
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── primitives ───────────────────────────────────────────────────────── */

.shell { max-width: 1120px; margin: 0 auto; padding: 0 var(--gut); }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.wire {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  word-break: break-all;
}

.btn {
  font: 600 13px/1 var(--sans);
  letter-spacing: .01em;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--panel-hi);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: #fff; border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: #FDF8EC;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(22,26,22,.18);
}
.btn--primary:hover { background: #6A4A13; border-color: #6A4A13; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn--ghost:hover { background: rgba(22,26,22,.05); border-color: transparent; }
.btn--sm { padding: 6px 10px; font-size: 12px; }
.btn--danger { color: var(--muted); }
.btn--danger:hover { color: var(--rust); background: var(--rust-wash); }

/* ─── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #F2F2EE, #E9EAE4);
  position: sticky; top: 0; z-index: 40;
}
.masthead__in {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--gut);
  height: 58px; display: flex; align-items: center; gap: 18px;
}
.wordmark {
  font-family: var(--disp);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: 19px; letter-spacing: -.005em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--brass); }

.tenant {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel-hi); box-shadow: var(--shadow);
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.tenant__badge {
  width: 20px; height: 20px; border-radius: 2px;
  background: var(--steel); color: #fff;
  font: 700 10px/20px var(--mono); text-align: center;
}
.tenant__caret { color: var(--muted); font-size: 10px; }

.masthead__spacer { flex: 1; }

/* account menu */
.tenant__name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.tenant[aria-expanded="true"] { border-color: var(--brass); background: var(--brass-wash); }

.menu {
  position: fixed; z-index: 60; min-width: 216px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel-hi);
  box-shadow: 0 1px 0 #fff inset, 0 6px 20px rgba(22, 26, 22, .14);
  padding: 5px;
}
.menu__head { padding: 8px 9px 9px; border-bottom: 1px solid var(--rule-2); margin-bottom: 5px; }
.menu__k {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.menu__v { display: block; font-family: var(--mono); font-size: 12px; margin-top: 3px; word-break: break-all; }
.menu__item {
  display: block; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; border-radius: 2px;
  background: none; font: 13px var(--sans); color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.menu__item:hover { background: rgba(22, 26, 22, .06); }
.menu__item--danger { color: var(--rust); }
.menu__item--danger:hover { background: var(--rust-wash); }
.menu__sep { height: 1px; background: var(--rule-2); margin: 5px 0; }

.masthead__nav { display: flex; gap: 2px; }
.masthead__nav a {
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  padding: 6px 10px; border-radius: var(--r);
}
.masthead__nav a:hover { background: rgba(22,26,22,.05); }
.masthead__nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: rgba(22,26,22,.06); }

/* ─── page head ────────────────────────────────────────────────────────── */

.pagehead { padding: 34px 0 22px; }
.pagehead__row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pagehead h1 {
  font-family: var(--disp);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: 34px; line-height: 1.05; margin: 6px 0 0; letter-spacing: -.015em;
}
.pagehead__spacer { flex: 1; }

.tally {
  display: flex; gap: 0; margin-top: 18px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel-hi); box-shadow: var(--shadow); overflow: hidden;
}
.tally__cell { padding: 10px 16px; border-right: 1px solid var(--rule-2); flex: 1; min-width: 0; }
.tally__cell:last-child { border-right: 0; }
.tally__n { font-family: var(--mono); font-size: 19px; font-weight: 600; display: block; line-height: 1.2; }
.tally__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ─── flow rail (signature) ────────────────────────────────────────────── */

.rail { display: flex; align-items: stretch; }

.rail__node {
  flex: 1; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel-hi); box-shadow: var(--shadow);
  padding: 10px 12px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; text-decoration: none;
  transition: border-color .14s ease, background .14s ease;
}
.rail__node:hover { border-color: var(--brass); }
.rail__node[aria-current="true"] { border-color: var(--brass); background: var(--brass-wash); }
.rail__k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); display: block;
}
.rail__v {
  font-size: 13px; font-weight: 600; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.rail__v--off { color: var(--muted); font-weight: 400; font-style: italic; }

.rail__link {
  width: 38px; flex: 0 0 38px; position: relative; align-self: center; height: 2px;
  background: var(--rule); overflow: visible;
}
.rail__link::after {              /* the travelling signal */
  content: ""; position: absolute; top: -2px; left: 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
  animation: travel 3.4s cubic-bezier(.6,0,.4,1) infinite;
  opacity: 0;
}
@keyframes travel {
  0%, 8%   { left: -3px; opacity: 0; }
  14%      { opacity: 1; }
  38%      { left: 34px; opacity: 1; }
  46%, 100% { left: 34px; opacity: 0; }
}

/* ─── sites list ───────────────────────────────────────────────────────── */

.sites { display: grid; gap: 12px; padding-bottom: 60px; }

.site-row {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); box-shadow: var(--shadow);
  padding: 16px 18px;
  display: grid; grid-template-columns: minmax(200px, 290px) 1fr; gap: 22px; align-items: center;
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.site-row:hover { border-color: var(--brass); background: var(--panel-hi); }

.site-row__name {
  font-family: var(--disp);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 19px; letter-spacing: -.01em; margin: 0 0 2px;
}
.site-row__url { font-family: var(--mono); font-size: 11.5px; color: var(--steel); }
.site-row__meta {
  font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--live { color: var(--moss); }
.status--warn { color: var(--rust); }
.status--off  { color: var(--muted); }

/* ─── editor layout ────────────────────────────────────────────────────── */

.railbar {
  position: sticky; top: 58px; z-index: 30;
  background: var(--paper);
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 30px;
}

.sections { display: grid; gap: 14px; padding-bottom: 100px; }

.card {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); box-shadow: var(--shadow);
  scroll-margin-top: 150px;
}
.card__head {
  padding: 15px 20px 13px;
  border-bottom: 1px solid var(--rule-2);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.card__head h2 {
  font-family: var(--disp);
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: 16px; margin: 0; letter-spacing: -.005em;
}
.card__note { font-size: 12.5px; color: var(--muted); margin: 0; }
.card__spacer { flex: 1; }
.card__body { padding: 18px 20px; }

/* query builder */
.qb {
  border-top: 1px dashed var(--rule-2);
  background: rgba(58, 95, 138, .04);
  padding: 14px;
}
.qb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qb__f > .field__label { font-size: 12px; }
.qb__hint { font-size: 11.5px; color: var(--muted); margin: 3px 0 0; }
.qb__warn {
  font-size: 12px; color: #7E2C21; background: var(--rust-wash);
  border: 1px solid #E2C6C0; border-radius: 2px; padding: 7px 9px; margin: 0 0 12px;
}
.qb__warn code { font-family: var(--mono); font-size: 11px; }
.qb__foot { display: flex; align-items: center; gap: 14px; margin-top: 13px; flex-wrap: wrap; }

/* operator cheat sheet */
.cheat { margin-top: 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-hi); }
.cheat > summary {
  cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 600;
  list-style: none;
}
.cheat > summary::-webkit-details-marker { display: none; }
.cheat > summary::before { content: "▸ "; color: var(--muted); }
.cheat[open] > summary::before { content: "▾ "; }
.cheat__body { padding: 0 14px 12px; }
.cheat table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cheat td { padding: 5px 0; border-top: 1px solid var(--rule-2); vertical-align: top; }
.cheat td:first-child { width: 190px; padding-right: 14px; }
.cheat code { font-family: var(--mono); font-size: 11.5px; color: var(--steel); }

/* the resolved machine value for a section */
.readout {
  border-top: 1px dashed var(--rule);
  padding: 11px 20px;
  background: rgba(58, 95, 138, .045);
  display: flex; gap: 10px; align-items: baseline;
  border-radius: 0 0 var(--r) var(--r);
}
.readout__k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--steel); flex: 0 0 auto; padding-top: 1px;
}
.readout__v { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); word-break: break-all; margin: 0; }
.readout__v em { font-style: normal; color: var(--brass-deep); font-weight: 600; }

/* ─── form parts ───────────────────────────────────────────────────────── */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field__label {
  display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px;
}
.field__hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.input, .select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel-hi); color: var(--ink);
  font: 14px/1.4 var(--sans);
}
.input--mono { font-family: var(--mono); font-size: 12.5px; }

/* compact controls that sit in a source row header */
.input--inline {
  width: auto; min-width: 150px; flex: 0 1 auto;
  padding: 5px 8px; font-weight: 600; font-size: 13.5px;
  background: transparent; border-color: transparent;
}
.input--inline:hover { border-color: var(--rule); background: var(--panel-hi); }

.mini-select {
  font-family: var(--mono); font-size: 11.5px;
  padding: 4px 22px 4px 8px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--panel-hi) no-repeat right 6px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path d='M0 0l4 5 4-5z' fill='%23737A70'/></svg>");
  color: var(--ink-2); cursor: pointer; appearance: none; -webkit-appearance: none;
}
.mini-select:hover { border-color: var(--muted); }
.mini-select:focus { outline: 2px solid var(--brass); outline-offset: -1px; }
.input:focus, .select:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: var(--brass); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 9px; border-radius: 2px;
  border: 1px solid var(--rule); background: var(--panel-hi);
  font-family: var(--mono); font-size: 11.5px;
}
.chip--in  { border-color: #BFD0BF; background: var(--moss-wash); color: #2F5A3C; }
.chip--out { border-color: #E2C6C0; background: var(--rust-wash); color: #7E2C21; }
.chip__x {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: inherit; opacity: .55; font-size: 13px; line-height: 1;
}
.chip__x:hover { opacity: 1; }
.chip-add {
  border: 1px dashed var(--rule); background: transparent; border-radius: 2px;
  padding: 4px 9px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); cursor: pointer;
}
.chip-add:hover { border-color: var(--brass); color: var(--brass-deep); }

/* toggle pills (languages) */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 6px 12px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--panel-hi);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-2);
}
.pill[aria-pressed="true"] {
  background: var(--steel); border-color: var(--steel); color: #fff;
}

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.seg button {
  padding: 7px 14px; border: 0; border-right: 1px solid var(--rule);
  background: var(--panel-hi); font: 600 12.5px var(--sans); color: var(--ink-2); cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel-hi); }

/* option cards (images, delivery, source type) */
.opts { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.opt {
  text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel-hi); padding: 13px 14px;
  font: inherit; color: inherit;
  display: block; position: relative;
  transition: border-color .14s ease, background .14s ease;
}
.opt:hover:not(.opt--soon) { border-color: var(--brass); }
.opt[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-wash); box-shadow: 0 0 0 1px var(--brass) inset; }
.opt__t { font-size: 13.5px; font-weight: 600; display: block; }
.opt__d { font-size: 12px; color: var(--muted); margin-top: 3px; display: block; line-height: 1.4; }
.opt--soon { opacity: .55; cursor: not-allowed; }

.soon {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px; padding: 2px 5px;
  color: var(--muted); background: var(--paper); vertical-align: 2px; margin-left: 7px;
}

/* source + delivery rows */
.rows { display: grid; gap: 10px; }
.row-item {
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-hi);
}
.row-item__head {
  padding: 11px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.row-item__t { font-size: 13.5px; font-weight: 600; }
.row-item__spacer { flex: 1; }
.row-item__body { padding: 14px; border-top: 1px solid var(--rule-2); }
.row-item__body--tight { padding: 10px 14px; }
.row-item__wire {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  padding: 8px 14px; border-top: 1px dashed var(--rule-2); word-break: break-all;
}

.secret { display: flex; gap: 6px; align-items: stretch; }
.secret .input { flex: 1; min-width: 0; }
.secret .btn { display: inline-flex; align-items: center; gap: 5px; }
.secret .btn[aria-pressed="true"] { background: var(--brass-wash); border-color: var(--brass); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; }
.switch__track {
  width: 34px; height: 19px; border-radius: 10px; background: var(--rule);
  border: 1px solid var(--rule); position: relative; transition: background .15s ease;
}
.switch__track::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch[aria-pressed="true"] .switch__track { background: var(--moss); border-color: var(--moss); }
.switch[aria-pressed="true"] .switch__track::after { transform: translateX(15px); }
.switch { border: 0; background: none; padding: 0; font-family: var(--sans); color: var(--ink-2); }

/* preview */
.preview { display: grid; gap: 8px; }
.preview__item {
  display: grid; grid-template-columns: auto 16px 1fr auto; gap: 11px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule-2); font-size: 13.5px;
}
.preview__item:last-child { border-bottom: 0; }
.preview__fav { width: 16px; height: 16px; border-radius: 2px; align-self: center; }
.preview__thumb {
  width: 44px; height: 30px; border-radius: 2px; align-self: center;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(58,95,138,.14) 4px 5px),
    var(--steel-wash);
}
.preview__src { font-family: var(--mono); font-size: 10.5px; color: var(--muted); display: block; margin-top: 2px; }
.preview__item--out { opacity: .5; }
.preview__item--out > span:nth-child(3) { text-decoration: line-through; text-decoration-color: var(--rule); }

/* fetch log */
.log__row { border-bottom: 1px solid var(--rule-2); }
.log__row:last-child { border-bottom: 0; }
.log__row--open { background: rgba(58, 95, 138, .035); }
.log__hd {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.log__hd:hover { background: rgba(22, 26, 22, .04); }
.log__caret { color: var(--muted); font-size: 10px; width: 10px; flex: 0 0 10px; }
.log__hd .status { flex: 0 0 auto; }
.log__hd .status::before { width: 7px; height: 7px; }
.log__label {
  font-size: 13.5px; font-weight: 600; flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.log__meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); flex: 1; }
.log__n { color: var(--moss); font-weight: 600; }
.log__err { color: var(--rust); font-weight: 600; }
.log__when {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  flex: 0 0 auto; cursor: help;
}
.log__body { padding: 2px 4px 14px 24px; }
.log__wire {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px dashed var(--rule-2); margin-bottom: 4px;
}
.log__item {
  /* three columns, unlike .preview__item's four — reusing that grid put the
     title in the 16px favicon column and wrapped it one word per line */
  display: grid; grid-template-columns: 16px 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--rule-2); font-size: 13.5px;
}
.log__item:last-child { border-bottom: 0; }
.log__item--out { opacity: .55; }
.log__item--out > span:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--rule); }
.log__item .preview__fav { align-self: center; }

.log__body a { color: inherit; text-decoration: none; }
.log__body a:hover { text-decoration: underline; text-decoration-color: var(--brass); }

@media (max-width: 720px) {
  .log__meta { flex: 0 0 100%; order: 3; padding-left: 20px; }
  .log__label { max-width: none; }
}

/* test fetch */
.test__tally { font-size: 13px; margin: 0 0 14px; color: var(--ink-2); }
.test__grp { margin-bottom: 18px; }
.test__grp:last-child { margin-bottom: 0; }
.test__hd {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600;
  padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}

/* save bar */
.savebar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  background: linear-gradient(180deg, rgba(230,231,225,0), var(--paper) 22%);
  padding: 22px 0 16px;
}
.savebar__in {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 12px;
}
.savebar__note { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: 1; }

@media (max-width: 680px) {
  .masthead__nav { display: none; }   /* a real build puts these behind a menu */
  .tally { flex-wrap: wrap; }
  .tally__cell { flex: 1 0 50%; }
}

@media (max-width: 860px) {
  .grid2, .opts--3 { grid-template-columns: 1fr; }
  .site-row { grid-template-columns: 1fr; gap: 14px; }
  .rail { flex-direction: column; gap: 6px; }
  .rail__link { display: none; }
  .railbar { position: static; }
  .pagehead h1 { font-size: 27px; }
}

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