/* =====================================================================
   weather -- read your own barometer.

   Two modes, as everywhere here. NIGHT is red-on-black because the
   three-hourly observation falls at 0300 as often as at 1500.

   One rule governs the forecast screen, and the CSS has to enforce it
   as much as the code does: NOTHING OF THE APP'S REASONING IS ON THE
   PAGE until the user's own call is committed. Not greyed out, not
   collapsed, not behind a tap -- absent. A guess you can glimpse is a
   guess you have read.
   ===================================================================== */
:root {
  --ground:  #07090b;
  --panel:   #10151a;
  --panel-2: #161c23;
  --line:    #232b34;
  --text:    #e6eaef;
  --dim:     #8995a3;
  --accent:  #6fb3d9;

  --ok:      #2fb35f;      /* an item checked and sound */
  --att:     #e8a33d;      /* needs attention: a defect, open */
  --bad:     #ff4438;      /* short of minimum, overdue */
  --none:    #5a6673;      /* not observed, not observable */
  --carry:   #7a8796;      /* a value carried forward, not a reading */
  --you:     #6fb3d9;      /* the user's own forecast */
  --rules:   #e8a33d;      /* the app's */
  --persist: #8995a3;      /* the honest floor */

  --tap: 56px;
  --radius: 10px;
}

:root[data-mode="night"] {
  --ground:  #060101;
  --panel:   #0e0303;
  --panel-2: #140505;
  --line:    #3a0f0c;
  --text:    #cf2a20;
  --dim:     #8a1d16;
  --accent:  #e23a2c;

  --ok:      #a82218;
  --att:     #e23a2c;
  --bad:     #ff6b5e;
  --none:    #6b1a14;
  --carry:   #8a1d16;
  --you:     #e23a2c;
  --rules:   #a82218;
  --persist: #6b1a14;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ground);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  /* Stops a scroll at the top of the page from chaining to the host and
     dismissing an embedded view.  A watch stander scrolling the log should
     not be able to close the app by accident. */
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------------
   [hidden] FIRST, and with !important.

   `hidden` is only a presentation hint: any `display` rule beats it.
   In an earlier build every step of the camera sight showed its controls
   at once because `.panel { display: grid }` quietly won, and the screen
   was unusable.  This rule has to sit above every component rule in the
   file, which is why it is here and not further down.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- the bar ------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.bar h1 {
  flex: 1 1 auto; min-width: 0;
  margin: 0; font-size: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar button {
  flex: 0 0 auto;
  min-height: 40px; padding: 0 12px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.bar .back { font-size: 24px; line-height: 1; padding: 0 14px; }

main { padding: 12px; max-width: 760px; margin: 0 auto; }

.lede { color: var(--dim); margin: 4px 0 16px; }
.note { color: var(--dim); font-size: 13px; }
.warn { color: var(--bad); }

/* ---- panels -------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.panel > h2 {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim);
}

/* ---- the status banner --------------------------------------------- */
.status { display: flex; align-items: flex-start; gap: 10px; }
.status .who { flex: 1 1 auto; min-width: 0; }
.status .nm { font-size: 18px; font-weight: 600; }
.status .wh { color: var(--dim); font-size: 13px; }
.kindtag {
  display: inline-block; margin-top: 4px;
  padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  border: 1px solid var(--line); color: var(--dim);
}
.kindtag.sub { color: var(--low); border-color: var(--low); }

/* ---- the slot strip ------------------------------------------------ */
.slots { display: flex; align-items: center; gap: 8px; }
.slots .d {
  flex: 1 1 auto; text-align: center;
  font-size: 16px; font-weight: 600;
}
.slots .d small { display: block; color: var(--dim); font-weight: 400; font-size: 12px; }
.slots button {
  flex: 0 0 auto; width: 48px; height: 44px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 20px; line-height: 1;
}

/* ---- forms --------------------------------------------------------- */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 3px; }
.fields .f { min-width: 0; }
input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%; min-height: 44px; padding: 0 10px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px;            /* 16px or iOS zooms the page on focus */
  font-variant-numeric: tabular-nums;
}
input:focus-visible, select:focus-visible, button:focus-visible, .row:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn {
  min-height: var(--tap); padding: 0 16px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 15px; font-weight: 600;
}
.btn.wide { width: 100%; }
.btn.go { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.btnrow .btn { flex: 1 1 auto; }

/* ---- rows ----------------------------------------------------------- */
.row {
  display: block; width: 100%; text-align: left;
  min-height: var(--tap); padding: 10px 12px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 8px;
}
.row b { display: block; font-size: 15px; font-weight: 600; }
.row span { display: block; color: var(--dim); font-size: 13px; }
.row .far { float: right; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- the terminal view --------------------------------------------- */
details.asterm { margin-top: 10px; }
details.asterm summary {
  cursor: pointer; color: var(--dim); font-size: 13px;
  padding: 6px 0; list-style: none;
}
details.asterm summary::-webkit-details-marker { display: none; }
details.asterm summary::before { content: "\25B8\00a0"; }
details.asterm[open] summary::before { content: "\25BE\00a0"; }
details.asterm pre {
  margin: 6px 0 0; padding: 10px;
  background: #000; color: #d8dee4;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.35;
  overflow-x: auto;
}
:root[data-mode="night"] details.asterm pre { color: var(--text); }

/* ---- progress ------------------------------------------------------ */
.bararea { height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.bararea i { display: block; height: 100%; background: var(--accent); width: 0; }

.foot { color: var(--dim); font-size: 13px; margin: 20px 0 8px; }
.foot strong { color: var(--text); }

@media (max-width: 420px) {
  .fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- the entry form -------------------------------------------------
   A field is one row: label, the control, and the two decline buttons.
   `-` and `/` are first-class answers, not an escape hatch, so they are
   always present and always the same size as everything else. A form
   that punishes blanks gets invented numbers -- somebody who did not
   read the barometer writes something plausible rather than leave a gap
   that looks like negligence.
   --------------------------------------------------------------------- */
.field { margin-bottom: 14px; }
.field > .lab {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; margin-bottom: 5px;
}
.field > .lab b { font-weight: 600; color: var(--text); }
.field > .lab .carried {
  margin-left: auto; color: var(--carry); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.field .ctl { display: flex; gap: 8px; align-items: stretch; }
.field .ctl input { flex: 1 1 auto; min-width: 0; }
.declines { display: flex; gap: 6px; flex: 0 0 auto; }
.dbtn {
  width: 46px; min-height: 44px;
  background: var(--panel-2); color: var(--none);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 17px; font-weight: 700; line-height: 1;
}
.dbtn[aria-pressed="true"] { color: var(--ground); background: var(--none); border-color: var(--none); }
:root[data-mode="night"] .dbtn[aria-pressed="true"] { color: var(--ground); }
.field .why { margin-top: 6px; font-size: 13px; color: var(--att); }
.field .why .btnrow { margin-top: 6px; }

/* the coded menus: the VOS 0-9 codes, as a grid of keys */
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.code {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 10px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; text-align: left;
}
.code i {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px;
  background: var(--line); color: var(--text);
  display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: 12px;
}
.code[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.code[aria-pressed="true"] i { background: var(--accent); color: var(--ground); }

/* ---- sections, states and lists -------------------------------------- */
.secnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.secnav button {
  flex: 1 1 auto; min-height: 44px; padding: 0 10px;
  background: var(--panel-2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 600;
}
.secnav button[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.secnav button .tick { color: var(--ok); }

.items { margin: 0; padding: 0; list-style: none; }
.items li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.items li:last-child { border-bottom: 0; }
.items .nm { flex: 1 1 auto; min-width: 0; }
.items .nm b { display: block; font-weight: 600; font-size: 15px; }
.items .nm span { display: block; color: var(--dim); font-size: 13px; }
.items .num { font-variant-numeric: tabular-nums; text-align: right; }
.tag {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  border: 1px solid currentColor;
}
.tag.ok { color: var(--ok); }
.tag.att { color: var(--att); }
.tag.bad { color: var(--bad); }
.tag.none { color: var(--none); }

.statebtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.statebtns button {
  min-height: 44px; background: var(--panel-2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 600;
}
.statebtns button[aria-pressed="true"] { border-color: currentColor; }
.statebtns button.o[aria-pressed="true"] { color: var(--ok); }
.statebtns button.a[aria-pressed="true"] { color: var(--att); }
.statebtns button.n[aria-pressed="true"],
.statebtns button.x[aria-pressed="true"] { color: var(--none); }

.logline {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  word-break: break-all; color: var(--dim);
}
.nag { border-color: var(--att); }
.nag h2 { color: var(--att); }

/* ---- the reasoning ---------------------------------------------------
   Every rule shows its working, so the working needs a form of its own:
   the conclusion reads as a statement, the reasoning under it as an
   aside. Run them together and it becomes a wall of prose nobody reads
   at 0400.
   --------------------------------------------------------------------- */
.reason { margin: 0; }
.reason .say { margin: 0 0 2px; }
.reason .warn { margin: 0 0 2px; color: var(--bad); font-weight: 600; }
.reason .acc { margin: 0 0 2px; color: var(--accent); font-weight: 600; }
.reason .ok { margin: 0 0 2px; color: var(--ok); font-weight: 600; }
.reason .why {
  margin: 0 0 2px 0; padding-left: 14px;
  border-left: 2px solid var(--line);
  color: var(--dim); font-size: 14px;
}
.reason .gap { height: 12px; }

/* ---- the score sheet -------------------------------------------------- */
table.score { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.score th {
  text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}
table.score th:first-child { text-align: left; }
table.score td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; }
table.score td:first-child { text-align: left; font-weight: 600; }
table.score tr:last-child td { border-bottom: 0; }
table.score .you td:first-child { color: var(--you); }
table.score .rules td:first-child { color: var(--rules); }
table.score .persist td:first-child { color: var(--persist); }

/* ---- the lessons ------------------------------------------------------ */
.lesson { font-size: 15px; line-height: 1.55; }
/*  THE SHELL'S LINE BREAKS ARE NO LONGER THE BROWSER'S. drawLines()
    gathers consecutive lines into a paragraph and joins the prose, so
    .ln is an ordinary paragraph now and wraps for itself. It was
    pre-wrap, one paragraph per terminal line, which double-broke 130 of
    the 181 lines across the ten lessons and alternated the left margin
    in and out as each wrapped remainder lost its indent.             */
.lesson .ln { margin: 0 0 11px; }
.lesson .ln:last-child { margin-bottom: 0; }
.lesson .ln-item { margin: 0 0 6px; padding-left: 2.2em; text-indent: -2.2em; }

/*  A FIGURE KEEPS ITS COLUMNS, AND NEEDS A FACE THAT CAN HOLD THEM. The
    H2O/O2 diagram indents "O2  32" to sit under "N2  28"; in the body's
    proportional font it sat under "pushing out" instead, and had since
    the lessons were first rendered. Monospace, exact spacing, and its
    own sideways scroll so a wide figure never pushes the page.       */
.lesson .ln-pre {
  margin: 0 0 11px; white-space: pre; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; color: inherit;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px;
}
.lesson .gap { height: 11px; }
.lesson hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.lesson .acc { color: var(--accent); font-weight: 600; }
.lesson .warn { color: var(--bad); font-weight: 600; }
.lesson .ok { color: var(--ok); font-weight: 600; }
.lesson .dim { color: var(--dim); }
.lesson h3 {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.qbox { margin-top: 14px; padding: 12px; background: var(--panel-2);
        border: 1px solid var(--line); border-radius: 8px; }
.qbox b { display: block; color: var(--accent); font-size: 12px;
          letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }

/*  The demonstration panels' own classes live in ../shared/demo.css,
    which this page loads: the wind panel is on the project's front page
    as well as in here, so one stylesheet serves both and there is no
    second copy to drift. The gun panel uses the same classes and is
    styled by the same file.  */