/* The Storm Studio manual: the approved page look ("Manual — page design", 10 Oct 2026). Built into
   site/guide/manual.css by tools/manual.mjs, with manual/parts/parts.css after it. */
/* IBM Plex, served with the manual (SIL Open Font License: assets/fonts/IBM-Plex-LICENSE.txt), so no page calls
   another site, and the PDF gets the same type wherever it is built */
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
:root {
  --paper:#fbfaf8; --card:#f4f2ee; --rule:#e3e1dd;
  --ink:#16181c; --ink2:#474d55; --ink3:#5f656e;
  --blue:#14459b; --blue-tint:#eef2fb;   /* the friendly half's furniture, and every link */
  --slate:#2b3440;                       /* the technical half's furniture */
  --red:#b32320; --red-tint:#fdf1f0;     /* focused points only */
  --app:#141414;
  color-scheme: light;
}
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15.5px; line-height: 1.68; -webkit-text-size-adjust: 100%; }
a { color: var(--blue); text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* the site's own bar and footer (not in the printed manual) */
.mtop { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 2; }
.mtop .in, .mfoot .in { max-width: 900px; margin: 0 auto; padding: 0 72px; }
.mtop .in { display: flex; align-items: center; gap: 18px; min-height: 52px; }
.mtop .brand { color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; }
.mtop .brand b { font-weight: 600; }
.mtop nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.mtop nav a { font-size: 13.5px; font-weight: 500; text-decoration: none; }
.mtop nav a:hover { text-decoration: underline; }
.mfoot { border-top: 1px solid var(--rule); margin-top: 24px; }
.mfoot .in { padding-top: 20px; padding-bottom: 36px; font-size: 12.5px; color: var(--ink3); }

.page { max-width: 900px; margin: 0 auto; }
.doc { padding: 52px 72px 44px; font-size: 15.5px; line-height: 1.68; }
.doc p { margin: 0 0 16px; max-width: 64ch; }
.doc.technical p { max-width: 66ch; }

/* chapter furniture: blue in the friendly half, slate in the technical half, always in the same places */
.doc { --furn: var(--blue); }
.doc.technical { --furn: var(--slate); }
.chap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.chap .n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; color: #fff; background: var(--furn);
  border-radius: 3px; padding: 2px 7px; letter-spacing: 0.04em; }
.chap .t { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--furn); }

h1 { font-size: 37px; line-height: 1.12; font-weight: 600; letter-spacing: -0.022em; margin: 0 0 14px; text-wrap: balance; }
.doc p.stand { font-size: 18.5px; line-height: 1.58; color: var(--ink2); max-width: 52ch; margin: 0 0 10px; }
.doc.technical p.stand { max-width: 56ch; margin-bottom: 32px; }
.doc p.meta { font-size: 13px; color: var(--ink3); margin: 0 0 32px; font-family: 'IBM Plex Mono', monospace; }
.doc.friendly h2 { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin: 34px 0 18px; }
.doc.friendly .stand + h2, .doc.friendly .meta + h2, .doc.friendly .aside + h2 { margin-top: 0; }
.doc h3.q { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 26px 0 8px; line-height: 1.3; }

/* numbered sections, technical half: the number in slate, so a reader can be told "see 3.4" */
h2.sec { display: flex; align-items: baseline; gap: 12px; font-size: 21px; font-weight: 600; letter-spacing: -0.012em; margin: 34px 0 12px; }
h2.sec .n { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; color: var(--slate); }

/* steps, friendly half */
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 20px; margin-bottom: 34px; }
.step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-tint); border: 1px solid #d3dcf0; color: var(--blue);
  font-size: 15px; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.step h3 { font-size: 20.5px; font-weight: 600; letter-spacing: -0.012em; margin: 0 0 9px; line-height: 1.3; }

/* app parts (drawn) and screenshots */
figure { margin: 0; }
.shot { margin: 18px 0 18px; max-width: 100%; }
.shot .inner { background: var(--app); border: 1px solid #0a0a0a; border-radius: 8px; padding: 14px; display: inline-block;
  max-width: 100%; overflow-x: auto; box-shadow: 0 2px 10px rgba(20,18,16,0.09); }
.shot figcaption, .screen figcaption { font-size: 12px; color: var(--ink3); margin-top: 9px; font-family: 'IBM Plex Mono', monospace; }
.screen { margin: 18px 0 26px; }
.screen img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #0a0a0a; box-shadow: 0 2px 10px rgba(20,18,16,0.09); }
.missing { border: 1px dashed var(--rule); border-radius: 8px; padding: 18px; color: var(--ink3); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; margin: 18px 0; }

kbd { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; background: #fff; border: 1px solid #d5d2cc; border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; color: var(--ink); white-space: nowrap; }
.path { font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--card); border-radius: 4px; padding: 2px 7px; color: var(--ink); white-space: nowrap; }
code { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; }
.imp { color: var(--red); font-weight: 700; }
a.gl { color: var(--blue); }
a.gl b { color: var(--blue); }
.soon { color: var(--ink2); }

/* KEY: red lead-in, then plain ink; a rule as well as colour, so it works without colour */
.key { border-left: 3px solid var(--red); padding: 2px 0 2px 16px; margin: 18px 0; max-width: 60ch; }
.key p { margin: 0; }
.key .lead, .caution .lead { color: var(--red); font-weight: 700; }
/* CAUTION: the same red, filled. Rare on purpose. */
.caution { border-left: 3px solid var(--red); background: var(--red-tint); border-radius: 0 6px 6px 0; padding: 13px 16px; margin: 18px 0; max-width: 60ch; }
.caution p { margin: 0; font-size: 14.5px; }

.aside { background: var(--card); border-radius: 8px; padding: 15px 18px; margin: 0 0 32px; max-width: 60ch; }
.aside p { margin: 0; font-size: 14.5px; color: var(--ink2); }
.aside .h { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink3); margin-bottom: 7px; }

.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; max-width: 62ch; }
.doc li { margin-bottom: 6px; }
.doc .d { color: var(--ink3); }

.next { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 10px; }
.doc .next h2 { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--furn); margin: 0 0 14px; }
.next ul { padding: 0; list-style: none; display: grid; gap: 11px; max-width: 60ch; }
.next li { margin: 0; }
.next a { font-weight: 500; }

/* tables (technical numbers live here) */
.tw { overflow-x: auto; margin: 4px 0 16px; }
table { border-collapse: collapse; width: 100%; max-width: 660px; font-size: 14.5px; }
th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink3);
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--rule); }
td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink2); }
td:first-child { color: var(--ink); font-weight: 500; }

/* the Reference chapter: the ? texts, as the app shows them */
.ref { margin-bottom: 8px; }
.refbody { color: var(--ink2); max-width: 66ch; }
.refbody p { color: var(--ink2); }
.refbody b { color: var(--ink); font-weight: 600; }
.refbody ul { padding-left: 20px; }
.refbody li { margin-bottom: 7px; }

/* the glossary */
.letters { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 28px; }
.letters a { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; text-decoration: none; padding: 2px 7px; border-radius: 3px; background: var(--blue-tint); }
h2.letter { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; color: var(--blue); border-bottom: 1px solid var(--rule);
  padding-bottom: 6px; margin: 34px 0 6px; letter-spacing: 0; text-transform: none; }
h3.term { font-size: 17px; font-weight: 600; margin: 18px 0 3px; }
.doc p.gdef { margin: 0 0 4px; }
.doc p.gmeta { font-size: 13.5px; color: var(--ink3); margin: 0 0 6px; }
.gmeta b { color: var(--ink2); font-weight: 600; }

/* running footer: number, page name */
.foot { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding-top: 13px; border-top: 1px solid var(--rule); }
.foot .pg { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: var(--furn); }
.foot .nm { font-size: 12.5px; color: var(--ink3); }
.foot .br { margin-left: auto; font-size: 12px; color: var(--ink3); letter-spacing: 0.06em; }

/* previous / next, and the contents */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 72px 36px; }
.pn a { display: block; border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; text-decoration: none; font-weight: 500; }
.pn a span { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); font-weight: 600; margin-bottom: 2px; }
.pn a.pn-next { text-align: right; }
.pn a:hover { border-color: var(--blue); }
.dl { margin: 18px 0 30px !important; }
.dl a, .mtop a.pdf { font-weight: 600; }
.toc { list-style: none; padding: 0 !important; margin: 10px 0 0 !important; display: grid; gap: 26px; max-width: none !important; }
.toc > li.technical { --furn: var(--slate); }
.toc > li.friendly { --furn: var(--blue); }
.toc ul { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 6px; }
.toc ul a { display: flex; gap: 14px; text-decoration: none; font-weight: 500; font-size: 16px; }
.toc ul a:hover { text-decoration: underline; }
.toc .sn { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--furn); min-width: 30px; padding-top: 3px; }
.toc .chap { margin-bottom: 8px; }

/* phone width */
@media (max-width: 720px) {
  .mtop .in, .mfoot .in { padding: 0 18px; }
  .doc { padding: 32px 18px 28px; }
  .pn { padding: 0 18px 28px; grid-template-columns: 1fr; }
  h1 { font-size: 30px; }
  .doc p.stand { font-size: 17px; }
  .step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .mtop .in { flex-wrap: wrap; row-gap: 4px; padding-top: 10px; padding-bottom: 10px; }
  .mtop nav { gap: 14px; margin-left: 0; }
}

/* the PDF (printed by tools/manual.mjs) */
@page { size: A4; }
body.print .pg { break-before: page; }
body.print .pg:first-child { break-before: auto; }
body.print .doc { padding: 0 18mm; }
body.print .cover-pg .doc { padding-top: 30mm; }
body.print .cover-pg .logo { height: 40px; width: auto; background: var(--app); padding: 10px 14px; border-radius: 6px; margin-bottom: 26px; }
body.print .step, body.print figure, body.print .key, body.print .caution, body.print .aside, body.print tr, body.print h3.term + p { break-inside: avoid; }
body.print h2, body.print h3 { break-after: avoid; }
body.print .foot { break-before: avoid; break-inside: avoid; }
body.print .next { break-inside: avoid; }
body.print a { text-decoration: none; }

/* The app's parts, drawn for the manual (dark, as in the app). One class family per part; shared tokens on .part. */
.part { --app:#141414; --app1:#1c1c1c; --app2:#242424; --app3:#383838; --app-line:#3a3a3a; --app-ink:#f1f1f1; --app-ink2:#b9b9b9;
  --app-ink3:#8e8e8e; --teal:#1a9fb5; --teal-ink:#3dbbd0; --teal-dim:#1d4a52; --amber:#f5a623;
  color: var(--app-ink); font-size: 12px; line-height: 1.35; }
.part svg { display: block; }
.part .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* home-live-now */
.p-home { width: 560px; }
.p-home .head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--app-ink2); margin: 2px 0 12px; }
.p-home .dot { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.p-home .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p-home .card { background: var(--app2); border-radius: 10px; overflow: hidden; }
.p-home .card.hover { box-shadow: 0 0 0 1px #4a4f66; }
.p-home .thumb { height: 128px; background: #0d1a2b; }
.p-home .info { padding: 9px 11px 11px; }
.p-home .t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.p-home .pill { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; }
.p-home .pill.live { background: rgba(61,187,208,.16); color: var(--teal-ink); }
.p-home .pill.cat { background: #3a2a14; color: var(--amber); }
.p-home .l { color: var(--app-ink3); font-size: 11px; margin-top: 3px; }
.p-home .l b { color: var(--app-ink2); font-weight: 500; }

/* camera-template */
.p-cam { width: 340px; }
.p-cam .h { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--app-ink); margin-bottom: 12px; }
.p-cam .sub { color: var(--app-ink3); font-size: 11px; margin-bottom: 8px; }
.p-cam .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-cam .tile { background: var(--app2); border-radius: 8px; padding: 9px 10px 10px; min-height: 76px; }
.p-cam .tile b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.p-cam .tile span { color: var(--app-ink2); font-size: 11px; }
.p-cam .tile.on { background: #18454d; box-shadow: inset 0 0 0 1px #2a7f8d; }
.p-cam .tile.on span { color: var(--teal-ink); }

/* transport */
.p-tr { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.p-tr .b { width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; color: var(--app-ink2); }
.p-tr .b svg { width: 12px; height: 12px; fill: currentColor; }
.p-tr .play { width: 32px; height: 26px; border-radius: 5px; background: var(--teal); color: #fff; }
.p-tr .time { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--app-ink); margin: 0 8px 0 6px; }
.p-tr .add { background: var(--app3); border-radius: 5px; padding: 4px 9px; color: var(--app-ink); font-weight: 500; }
.p-tr .sep { width: 1px; height: 18px; background: var(--app-line); margin: 0 6px; }
.p-tr .lab { color: var(--app-ink2); }
.p-tr .lab.strong { color: var(--app-ink); font-weight: 600; }
.p-tr .num { background: var(--app3); border-radius: 4px; padding: 3px 7px; min-width: 34px; font-family: 'IBM Plex Mono', monospace; color: var(--app-ink); }
.p-tr .num.hi { box-shadow: 0 0 0 1px var(--teal-ink); }
.p-tr .u { color: var(--app-ink3); }

/* file-menu-export */
.p-menu .menu { background: var(--app2); border: 1px solid #3a3a3a; border-radius: 4px; padding: 3px; width: 236px; }
.p-menu .mi { display: flex; align-items: center; gap: 10px; min-height: 26px; padding: 0 9px; border-radius: 2px; color: var(--app-ink); font-size: 12px; }
.p-menu .mi.on { background: var(--app3); }
.p-menu .mi .k { margin-left: auto; color: var(--app-ink3); font-size: 11px; }
.p-menu .mr { height: 1px; background: #3a3a3a; margin: 3px 6px; }
.p-menu .bar { display: flex; gap: 2px; margin-bottom: 4px; }
.p-menu .bar span { padding: 3px 8px; border-radius: 3px; color: var(--app-ink2); font-size: 12.5px; }
.p-menu .bar span.on { background: var(--app3); color: var(--app-ink); }

/* menu-bar */
.p-bar { display: flex; align-items: center; gap: 2px; width: 580px; white-space: nowrap; }
.p-bar .logo { display: flex; align-items: center; gap: 7px; margin-right: 10px; font-size: 11px; letter-spacing: .08em; }
.p-bar .logo b { font-weight: 700; }
.p-bar .m { padding: 3px 6px; color: var(--app-ink2); font-size: 12.5px; }
.p-bar .vs { width: 1px; height: 18px; background: var(--app-line); margin: 0 8px; }
.p-bar .nm { font-weight: 600; font-size: 12.5px; margin-right: 10px; }
.p-bar .st { color: var(--app-ink3); font-size: 12px; margin-right: 8px; }
.p-bar .ur { color: var(--app-ink3); }
.p-bar .hints { margin-left: auto; display: flex; align-items: center; gap: 7px; background: #1f3a40; border: 1px solid #2a5a63; border-radius: 5px; padding: 4px 10px; font-weight: 600; }
.p-bar .hints i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-ink); }

/* presenter-auto */
.p-pa { display: flex; align-items: center; gap: 22px; }
.p-pa .grp { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.p-pa .btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #4a4a4a; display: grid; place-items: center; color: var(--app-ink2); }
.p-pa .btn svg { width: 16px; height: 16px; }
.p-pa .btn.teal { border-color: var(--teal-ink); color: var(--teal-ink); }
.p-pa .btn.amber { border-color: var(--amber); color: var(--amber); }
.p-pa .cap { font-size: 10.5px; color: var(--app-ink3); }