/*
 * The shell the three Morning Bytes pages share — presentation, documentation
 * and output.
 *
 * Morning Bytes is its own visual world, deliberately not the app's dark UI: warm
 * paper, wine editorial headings, SAHI Season on the display line and SAHI Sans
 * everywhere a number has to be read. Every colour below is a step from the
 * approved Sahi ramps in scripts/audit-sahi-colours.mjs; scripts/morning-bytes/
 * check-palette.mjs is the gate.
 */

:root {
  /* brand */
  --wine: #66033C;      /* brand 950 — editorial headings, the dark panel */
  --wine-lift: #8A1157; /* brand 900 — the second stop of the wine gradient */
  --magenta: #E61C9A;   /* brand 600 — the accent, used sparingly */
  --pink: #FEF1FA;      /* brand 50  — tinted fills */
  --pink-edge: #FECCF1; /* brand 200 — tinted borders */
  /* wine as a SURFACE (white text on it): kept apart from --wine, which is heading ink and turns light in dark mode */
  --wine-fill: #66033C; --wine-fill-lift: #8A1157; --on-wine: #FEF1FA; --on-wine-edge: #FECCF1;
  /* paper */
  --paper: #F9F6F1;     /* warm 50  */
  --sheet: #FFFFFF;     /* neutral 0 */
  --rule: #EDE5D8;      /* warm 100 */
  --rule-firm: #D9C9AE; /* warm 200 */
  --ink: #301C18;       /* warm 900 */
  --muted: #727272;     /* neutral */
  --muted-firm: #535353;/* neutral */
  /* status */
  --up: #14697A;        /* success 700 */
  --up-soft: #ECFAFC;   /* success 50  */
  --up-edge: #A9E7F0;   /* success 200 */
  --down: #C4342E;      /* error 700 */
  --down-soft: #FDF3F3; /* error 50   */
  --down-edge: #FAD0CE; /* error 200  */
  --warn: #694137;      /* warm 800   */

  --sans: "SAHI Sans", sans-serif;
  --serif: "SAHI Season", "SAHI Sans", sans-serif;
  --measure: 74ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
a { color: var(--wine); text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 22px; min-height: 60px;
  background: #F9F6F1EF; backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.topbar .mark { width: 26px; height: 26px; flex: none; }
.topbar .who { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.topbar .who small {
  display: block; font-weight: 400; font-size: 11px; color: var(--muted);
  letter-spacing: .01em;
}
.topbar .spacer { flex: 1; }

/* One control language across the three pages: a capsule of segments. */
.capsule {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px;
}
.capsule a, .capsule button {
  border: 0; background: none; border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  color: var(--muted-firm); text-decoration: none; white-space: nowrap;
}
.capsule a:hover, .capsule button:hover { background: var(--paper); color: var(--ink); }
.capsule a[aria-current="page"], .capsule button[aria-pressed="true"] {
  background: var(--wine-fill); color: #FFFFFF;
}

/* ------------------------------------------------------------- page frame */
.wrap { max-width: 1120px; margin: 0 auto; padding: 38px 24px 90px; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--magenta);
}
.display {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04;
  letter-spacing: -.025em; color: var(--ink);
}
.display em { font-style: normal; color: var(--wine); }
.lead { font-size: 18px; line-height: 1.5; color: var(--muted-firm); max-width: var(--measure); }

.panel {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 13px; padding: 22px 24px;
}
.panel-wine {
  background: linear-gradient(115deg, var(--wine-fill), var(--wine-fill-lift));
  color: var(--on-wine); border: 0; border-radius: 13px; padding: 24px 26px;
}
.panel-wine h2, .panel-wine h3 { color: #FFFFFF; font-family: var(--serif); font-weight: 500; }
.panel-wine .eyebrow { color: var(--on-wine-edge); }

.note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 30px 0; }

/* Status words carry meaning, so they are never colour alone. */
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--rule-firm); color: var(--muted-firm); background: var(--sheet);
}
.tag.ok    { color: var(--up);   border-color: var(--up-edge);   background: var(--up-soft); }
.tag.stop  { color: var(--down); border-color: var(--down-edge); background: var(--down-soft); }
.tag.draft { color: var(--wine); border-color: var(--pink-edge); background: var(--pink); }
.tag.warn  { color: var(--warn); border-color: var(--rule-firm); background: var(--rule); }

@media (max-width: 760px) {
  .wrap { padding: 26px 16px 70px; }
  .topbar { padding: 10px 16px; gap: 10px; flex-wrap: wrap; row-gap: 9px; }
  .topbar .who small { display: none; }
  .topbar .spacer { display: none; }

  /* Four segments do not fit a phone. The capsule becomes a scrolling strip
     rather than shrinking the labels to nothing — and it stays start-aligned,
     because aligning to the end and overflowing hides the FIRST segment, which
     is the one a reader looks for. */
  .capsule {
    width: 100%; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .capsule::-webkit-scrollbar { display: none; }
  .capsule a, .capsule button { flex: none; padding: 6px 12px; }
}