/*
 * Page styles for the Morning Bytes documentation.
 *
 * Everything sits on top of mb-shell.css: warm paper, wine headings, SAHI Season for
 * display lines and SAHI Sans for text. Colours are the tokens defined there, plus a
 * few steps from the same approved ramps. Nothing here uses a font other than the two
 * Sahi faces, and no text is set below 0.87em of the reading size (13.9px at the
 * default), so it stays at 11px or more even at the smallest text-size setting (0.8).
 *
 * The reading size is one variable, --z, set by the A- / A+ buttons. The body column
 * is sized in em from it, so text grows and shrinks while pictures and the layout hold.
 */

:root {
  --warm-soft: #EDE5D8;   /* warm 100  */
  --rail-w: 292px;
  --z: 1;
}
input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ frame */
.doc {
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 46px;
  max-width: 1280px; margin: 0 auto; padding: 30px 24px 120px;
}
.rail {
  position: sticky; top: 76px; align-self: start;
  max-height: calc(100vh - 92px); overflow: auto; overscroll-behavior: contain;
  padding-right: 6px; min-width: 0;
}
.search {
  width: 100%; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--rule-firm); background: var(--sheet); font-size: 14px;
}
.search::placeholder { color: var(--muted); }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px;
        background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px; }
.zoom button { border: 0; background: none; border-radius: 999px; min-width: 42px;
               padding: 5px 11px; font-size: 14px; font-weight: 700; color: var(--muted-firm); }
.zoom button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.zoom button:disabled { opacity: .35; cursor: default; }
.zoom output { min-width: 46px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted-firm); }
.count { font-size: 13px; color: var(--muted-firm); }
.jump { display: none; flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; font-size: 14px;
        border: 1px solid var(--rule-firm); background: var(--sheet); }

.toc { display: block; }
.toc p.tg { margin: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: var(--muted); }
.toc p.tg a { color: inherit; text-decoration: none; }
.toc p.tg a:hover { color: var(--wine); }
.toc a.ti { display: flex; gap: 8px; padding: 5px 9px; border-radius: 8px; font-size: 14px; line-height: 1.35;
            text-decoration: none; color: var(--muted-firm); border-left: 2px solid transparent; }
.toc a.ti .n { flex: none; min-width: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a.ti:hover { background: var(--sheet); color: var(--ink); }
.toc a.ti.here { border-left-color: var(--magenta); color: var(--wine); font-weight: 600; background: var(--sheet); }
.toc .none { font-size: 14px; color: var(--muted-firm); padding: 6px 9px; }
.toc [hidden] { display: none !important; }
.toc p.tg a.here { color: var(--wine); }

/* ------------------------------------------------------------- the reading column */
.body { min-width: 0; font-size: calc(16px * var(--z)); line-height: 1.6; }
.body > * { max-width: 100%; }
.body p, .body li { max-width: 72ch; }
.body p { margin-bottom: .75em; }
.body ul, .body ol { padding-left: 1.25em; margin: 0 0 .9em; }
.body li { margin-bottom: .4em; }
.body strong, .body b { font-weight: 700; }
.body em { font-style: normal; font-weight: 600; color: var(--wine); }

/* Front page of the document. */
.cover { padding: 6px 0 26px; }
.cover .display { margin: 8px 0 14px; font-size: clamp(2.1em, 5vw, 3.4em); }
.cover .lead { font-size: 1.12em; max-width: 60ch; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.pill { display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: .9em; font-weight: 600;
        background: var(--pink); border: 1px solid var(--pink-edge); color: var(--wine); }
.stamp { display: inline-block; margin: 10px 0 0; padding: 8px 14px; border-radius: 10px; font-size: .92em;
         font-weight: 600; color: var(--wine); background: var(--sheet); border: 1px solid var(--pink-edge); }
.trust { margin-top: 14px; font-size: .92em; color: var(--muted-firm); max-width: 66ch; }

/* A part of the document (D0 to D6). */
.part { margin: 56px 0 8px; padding-top: 34px; border-top: 3px solid var(--wine); scroll-margin-top: calc(var(--topbar-h, 60px) + var(--rail-h, 0px) + 16px); }
.part .eyebrow { font-size: .87em; }
.part h2 { font-family: var(--serif); font-weight: 500; color: var(--wine); font-size: 2em;
           line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 10px; }
.part .lead { font-size: 1.04em; max-width: 64ch; }

/* One section. */
.sec { scroll-margin-top: calc(var(--topbar-h, 60px) + var(--rail-h, 0px) + 16px); padding: 30px 0 14px; border-bottom: 1px solid var(--rule); }
.sec:target > h3, .sec:target > .mod-h h3 { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.sec > h3, .mod-h h3 {
  font-family: var(--serif); font-weight: 500; color: var(--wine);
  font-size: 1.6em; line-height: 1.15; letter-spacing: -.015em; margin: 4px 0 8px;
}
.kick { margin: 0 0 2px; font-size: .87em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.kick .tag { margin-left: 8px; vertical-align: 1px; letter-spacing: .04em; font-size: 1em; }
.tag { font-size: .87em; }
.sec h4 { font-size: .87em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); margin: 0; }
.sec h5 { font-size: 1em; font-weight: 700; margin: 1.1em 0 .35em; color: var(--ink); }
.sec .lede { font-size: 1.06em; color: var(--muted-firm); max-width: 66ch; }

.q { margin: 6px 0 12px; font-size: 1.08em; font-weight: 600; color: var(--ink); max-width: 66ch; }
.q .lab { display: inline-block; margin-right: 8px; font-size: .82em; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.promise { margin: 0 0 8px; padding: 13px 17px; border-radius: 0 12px 12px 0;
           background: var(--pink); color: var(--wine); font-size: 1em; line-height: 1.55; max-width: 74ch; }
.promise .tag { margin-right: 8px; }
.promise .ptxt { display: inline; }

/* The eleven fields every module answers, in the same order. */
.f { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 4px 26px; padding: 15px 0;
     border-top: 1px solid var(--rule); }
.f:first-of-type { border-top: 0; }
.f > h4 { padding-top: .25em; }
.f > .fc { min-width: 0; grid-column: 2; }
.f > .fc > :last-child { margin-bottom: 0; }
.f > figure, .f > .tbl, .f > .pics { grid-column: 1 / -1; }

.note-box { margin: 12px 0; padding: 12px 16px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule);
 max-width: 72ch; font-size: .97em; }
.note-box.stop { border-left-color: var(--down); background: var(--down-soft); border-color: var(--down-edge); }
.note-box.warn { border-left-color: var(--warn); background: var(--warm-soft); }
.note-box p:last-child { margin-bottom: 0; }

.fld { font-weight: 600; color: var(--wine); background: var(--pink); border-radius: 5px; padding: 0 5px;
       font-size: .95em; overflow-wrap: anywhere; }
.said { color: var(--wine); font-weight: 600; }
.bad { color: var(--down); font-weight: 600; }
.good { color: var(--up); font-weight: 600; }

/* Pictures: fixed files from the real page, each captioned with its figures. */
figure.pic { margin: 12px 0 6px; padding: 0; max-width: 100%; }
figure.pic .frame { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); padding: 6px; }
figure.pic .frame a { display: block; cursor: zoom-in; }
figure.pic img { display: block; height: auto; width: 100%; max-width: 100%; }
figure.pic.natural img { width: auto; max-width: 100%; }
figure.pic figcaption { margin-top: 7px; font-size: .92em; color: var(--muted-firm); line-height: 1.5; max-width: 76ch; }
figure.pic figcaption b { color: var(--ink); }
.pics { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr)); align-items: start; }
.pics figure.pic { margin: 0; }
.pics.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26em), 1fr)); }
.pics.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr)); }

/* Tables scroll inside their own box, so the page never scrolls sideways. */
.tbl { margin: 12px 0 16px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); }
.tbl table { width: 100%; border-collapse: collapse; font-size: .92em; min-width: 38em; }
.tbl.narrow table { min-width: 26em; }
.tbl.wide table { min-width: 50em; }
.tbl.wide .fld { overflow-wrap: break-word; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.tbl th { font-size: 1em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-firm); font-weight: 700; background: var(--paper); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { font-variant-numeric: tabular-nums lining-nums; }
.tbl td b { color: var(--wine); }
.tbl .tag, .note-box .tag { font-size: .95em; }
.eyebrow .tag { font-size: 1em; }
.tbl tr.grp td { background: var(--paper); font-weight: 700; color: var(--wine); letter-spacing: .02em; }
.tbl caption { text-align: left; padding: 9px 12px; font-weight: 700; color: var(--wine); caption-side: top; }
.tbl.glossary table { min-width: 30em; }
.tbl.glossary td:first-child { font-weight: 700; color: var(--wine); width: 14em; }

/* Lists that read as steps. */
ol.steps { list-style: none; padding-left: 0; counter-reset: s; }
ol.steps li { position: relative; padding-left: 2.2em; counter-increment: s; }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: .05em; width: 1.5em; height: 1.5em; border-radius: 50%;
                      background: var(--pink); border: 1px solid var(--pink-edge); color: var(--wine);
                      font-size: .9em; font-weight: 700; text-align: center; line-height: 1.4em; }
ul.tick { list-style: none; padding-left: 0; }
ul.tick li { position: relative; padding-left: 1.4em; }
ul.tick li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .45em; height: .45em; border-radius: 50%; background: var(--magenta); }
ul.tick.stop li::before { background: var(--down); }

/* Two boxes side by side: old page against new, sample against production. */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19em), 1fr)); gap: 14px; margin: 14px 0; }
.pair > div { padding: 15px 18px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); }
.pair > div h5 { margin-top: 0; }
.pair .old { background: var(--down-soft); border-color: var(--down-edge); }
.pair .new { background: var(--up-soft); border-color: var(--up-edge); }
.pair p:last-child, .pair ul:last-child { margin-bottom: 0; }

/* The five-part chain and the three kinds of time. */
.chain { display: grid; gap: 0; margin: 14px 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); overflow: hidden; }
.chain > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 18px; padding: 12px 16px; border-top: 1px solid var(--rule); }
.chain > div:first-child { border-top: 0; }
.chain b { font-size: .87em; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); padding-top: .2em; }
.chain span { min-width: 0; }
.chain small { display: block; color: var(--muted-firm); font-size: .93em; margin-top: 2px; }

.cards { display: grid; gap: 12px; margin: 14px 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr)); }
.cards > div { padding: 14px 16px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); }
.cards > div h5 { margin-top: 0; color: var(--wine); }
.cards > div p:last-child { margin-bottom: 0; }

/* The map: the whole page beside its list of modules. */
.map { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 22px; align-items: start; margin: 14px 0; }
.map figure.pic { margin: 0; }
.map ol { margin: 0; padding-left: 0; list-style: none; counter-reset: m; }
.map li { counter-increment: m; position: relative; padding: 7px 0 7px 2.3em; border-top: 1px solid var(--rule); margin: 0; max-width: none; }
.map li:first-child { border-top: 0; }
.map li::before { content: counter(m); position: absolute; left: 0; top: 8px; width: 1.6em; height: 1.6em; border-radius: 50%;
                  background: var(--wine-fill); color: #FFFFFF; font-size: .87em; font-weight: 700; text-align: center; line-height: 1.7em; }
.map li a { font-weight: 700; }
.map li span { display: block; color: var(--muted-firm); font-size: .95em; }

.end { margin: 40px 0 0; padding: 22px 0 0; border-top: 3px solid var(--wine); }

/* ---------------------------------------------------------------- narrower windows */
@media (max-width: 979px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 90px; }
  /* The rail dissolves: the search box scrolls away with the page, and the menu bar stays put. */
  .rail { display: contents; }
  .search { margin: 14px 0 0; }
  .bar { position: sticky; top: var(--topbar-h, 60px); z-index: 20; flex-wrap: nowrap; gap: 8px;
         margin: 10px -16px 6px; padding: 8px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .count { display: none; }
  .toc { display: none; }
  .jump { display: block; }
}
@media (max-width: 720px) {
  .f { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .f > .fc { grid-column: 1; }
  .chain > div { grid-template-columns: minmax(0, 1fr); }
  .map { grid-template-columns: minmax(0, 1fr); }
  .map figure.pic { max-width: 20em; }
  .part h2 { font-size: 1.6em; }
  .sec > h3, .mod-h h3 { font-size: 1.4em; }
}

/* Engineering notes: collapsed until asked for. */
details.eng { margin: 10px 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); padding: 4px 18px 14px; }
details.eng > summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--wine); }
details.eng h5 { margin-top: 1.1em; }