/* ═══════════════════════════════════════════════════════════════════════════
   Synoptic — ai.ikako.pw

   The world is a standardised observation sheet: instruments read in a fixed
   margin, observations accumulate in a dated column, foreign media is tipped in
   as bordered plates. Nothing here is rounded; the sheet is printed.

   PHONE FIRST. The base stylesheet IS the phone sheet. On a phone the margin
   becomes an always-visible instrument rail directly under the head rule, so
   the allowance is never more than a glance away. Desktop is the enhancement
   that unfolds that rail back into a true left margin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── chart stock, under desk light ─────────────────────────────────────────*/
:root {
  --ground: #e7eae5;
  --sheet: #f4f6f2;
  --ink: #14181a;
  --ink-soft: #4a5450;
  --rule: #a8b0ac;
  --rule-faint: #c9cfc9;
  --isobar: #1d4e6b;
  --front-warm: #b3243b;
  --front-cold: #2c5fa8;
  --admitted: #1f6b4a;
  --caution: #a86a12;

  --face-form: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --face-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-figure:
    "Azeret Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --u: 4px;
  --measure: 68ch;
  --margin-w: 17rem;
  --head-h: 3.25rem;
  --tap: 44px; /* never smaller, anywhere */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── the backlit chart table ───────────────────────────────────────────────*/
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ground: #0f1518;
    --sheet: #161e22;
    --ink: #dce4e0;
    --ink-soft: #93a29e;
    --rule: #33403f;
    --rule-faint: #222d30;
    --isobar: #6fa8c7;
    --front-warm: #e4576f;
    --front-cold: #6e9fe0;
    --admitted: #4fb183;
    --caution: #d19a3c;
  }
}
:root[data-theme="dark"] {
  --ground: #0f1518;
  --sheet: #161e22;
  --ink: #dce4e0;
  --ink-soft: #93a29e;
  --rule: #33403f;
  --rule-faint: #222d30;
  --isobar: #6fa8c7;
  --front-warm: #e4576f;
  --front-cold: #6e9fe0;
  --admitted: #4fb183;
  --caution: #d19a3c;
}

/* ═══════════════════════════════════════════════════════════ foundations ══*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: 16px; /* 16px floor stops iOS zooming on focus */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--isobar);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fig {
  font-family: var(--face-figure);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.label {
  font-family: var(--face-form);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label--inline {
  margin-right: calc(var(--u) * 2);
}

.stamp {
  display: inline-block;
  font-family: var(--face-form);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--isobar);
  border: 1px solid var(--isobar);
  padding: 2px calc(var(--u) * 1.5);
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}
.rule--double {
  height: 3px;
  background: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ═════════════════════════════════════════════════════════════ buttons ════*/

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  padding: 0 calc(var(--u) * 3);
  font-family: var(--face-form);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    color 0.18s var(--ease-out);
}
.btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sheet);
}
.btn--primary:active:not(:disabled) {
  background: var(--isobar);
  border-color: var(--isobar);
}
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) {
    background: var(--isobar);
    border-color: var(--isobar);
    color: #fff;
  }
}

.btn--ghost {
  border-color: transparent;
  color: var(--ink-soft);
}
@media (hover: hover) {
  .btn--ghost:hover:not(:disabled) {
    border-color: var(--rule);
    color: var(--ink);
    background: transparent;
  }
}

.btn--stop {
  border-color: var(--front-warm);
  color: var(--front-warm);
}
@media (hover: hover) {
  .btn--stop:hover:not(:disabled) {
    background: var(--front-warm);
    color: var(--sheet);
    border-color: var(--front-warm);
  }
}

.btn--tick {
  min-height: var(--tap);
  padding: 0 calc(var(--u) * 3);
  font-size: 0.72rem;
  border-color: var(--rule-faint);
  color: var(--ink-soft);
  flex: 1 1 0;
}
.btn--tick.is-on {
  border-color: var(--isobar);
  color: var(--isobar);
}
.btn--tick:disabled {
  text-decoration: line-through;
}
@media (hover: hover) {
  .btn--tick:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--rule);
  }
}

/* ════════════════════════════════════════════════════════════════ boot ═══*/

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ground);
  z-index: 40;
}
.boot__text {
  font-family: var(--face-form);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.boot[hidden] {
  display: none;
}

/* ════════════════════════════════════════════════════════════════ gate ═══*/

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 4 + var(--safe-b));
  /*  Ruled stock, not a graticule. A blank observation form is ruled on one
      axis; the two-axis grid belongs on a chart, and this is a form.        */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    var(--rule-faint) 27px 28px
  );
}
.gate[hidden] {
  display: none;
}

.gate__sheet {
  width: min(26rem, 100%);
  background: var(--sheet);
  border: 1px solid var(--ink);
  padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 5);
  box-shadow: 5px 6px 0 -2px color-mix(in srgb, var(--ink) 10%, transparent);
}

.gate__head {
  display: grid;
  gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 4);
}
.gate__title {
  margin: 0;
  font-family: var(--face-form);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gate__sub {
  margin: 0;
  font-family: var(--face-figure);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.field {
  display: grid;
  gap: calc(var(--u) * 1.5);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 3);
}

.input {
  width: 100%;
  min-height: var(--tap);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: calc(var(--u) * 2) 0;
  font-family: var(--face-figure);
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.input:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--isobar);
}

.gate__note {
  margin: 0 0 calc(var(--u) * 3);
  min-height: 1.4em;
  font-size: 0.86rem;
  color: var(--front-warm);
}
.gate__note--ok {
  color: var(--admitted);
}

.gate__foot {
  margin: calc(var(--u) * 4) 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
#loginBtn {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════ shell ═══*/

/* dvh so the mobile URL bar collapsing does not clip the composer */
.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app[hidden] {
  display: none;
}

.headrule {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  height: var(--head-h);
  padding: 0 calc(var(--u) * 3);
  padding-left: calc(var(--u) * 3 + var(--safe-l));
  padding-right: calc(var(--u) * 3 + var(--safe-r));
  background: var(--ground);
  border-bottom: 1px solid var(--ink);
}

.headrule__id {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex: none;
}
.headrule__name {
  display: none; /* the mark alone identifies on phone */
  font-family: var(--face-form);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}
.mark {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(to right, var(--ink) 50%, transparent 50%);
  flex: none;
}

.headrule__guide {
  display: none;
} /* guide words are a desktop device */
.guide {
  font-family: var(--face-figure);
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.guide__dash {
  width: calc(var(--u) * 6);
  height: 1px;
  background: var(--rule);
  flex: none;
}

.headrule__controls {
  display: flex;
  align-items: center;
  gap: var(--u);
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.picker {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.picker .label {
  display: none;
}

.select {
  appearance: none;
  width: 100%;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 2);
  font-family: var(--face-figure);
  font-size: 0.74rem;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 14px center,
    right 9px center;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

/* icon-only ghost buttons on phone keep the head rule from crowding */
.headrule .btn--ghost {
  flex: none;
  min-width: var(--tap);
  padding: 0 calc(var(--u) * 2);
  font-size: 0.68rem;
}
#themeBtn,
#logoutBtn {
  display: none;
}

.frame {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ══════════════════════════════════════════════════ instrument margin ════*/

/*  PHONE: an always-visible rail. Three gauges abreast, no tap required —
    the allowance is the second thing on the screen, by design.
    Expanding it reveals the full readout beneath.                          */
.margin {
  flex: none;
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  max-height: 62dvh; /* a ceiling, never a transition target */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.margin__scroll {
  padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 3);
  padding-left: calc(var(--u) * 3 + var(--safe-l));
  padding-right: calc(var(--u) * 3 + var(--safe-r));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
  align-content: start;
}

/*  The fold animates grid-template-rows rather than max-height: the row track
    resolves once and the subtree is never re-measured mid-transition, which is
    what keeps this smooth on a phone.                                        */
.margin__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out);
}
.margin.is-open .margin__more {
  grid-template-rows: 1fr;
}
.margin__more-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 calc(var(--u) * 3);
  padding-left: calc(var(--u) * 3 + var(--safe-l));
  padding-right: calc(var(--u) * 3 + var(--safe-r));
}
.margin.is-open .margin__more-inner {
  padding-bottom: calc(var(--u) * 4);
}

/* the three gauges ride the rail; the readout waits inside the fold */
.instr {
  display: grid;
  gap: calc(var(--u) * 1);
  align-content: start;
}
.instr--table {
  display: grid;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2);
}
.margin__more .rule {
  margin-top: calc(var(--u) * 3);
}

/* session controls live in the fold on phone; the head rule owns them above 900px */
.instr__actions {
  display: flex;
  gap: calc(var(--u) * 2);
}
.instr__actions .btn {
  flex: 1 1 0;
}

.instr__name {
  margin: 0;
  font-family: var(--face-form);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.gauge__scale {
  position: relative;
  height: 14px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-faint) 0 1px,
    transparent 1px 10%
  );
}
.gauge__needle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 2px;
  background: var(--isobar);
  transition: left 0.5s var(--ease-out);
}
.gauge--caution .gauge__needle {
  background: var(--caution);
}
.gauge--over .gauge__needle {
  background: var(--front-warm);
}
.gauge--unknown .gauge__scale {
  opacity: 0.4;
}
.gauge--unknown .gauge__needle {
  display: none;
}

.instr__read {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  flex-wrap: wrap;
}
.instr__read .fig {
  font-size: 0.9rem;
  font-weight: 500;
}
.instr__of,
.instr__unit {
  font-family: var(--face-form);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.instr__foot {
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.instr__foot--warn {
  color: var(--caution);
}
.margin:not(.is-open) .instr__foot {
  display: none;
}
.margin:not(.is-open) .instr__unit {
  display: none;
}

.readout {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 1.25) calc(var(--u) * 3);
  align-items: baseline;
}
.readout dt {
  font-family: var(--face-form);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.readout dd {
  margin: 0;
  font-size: 0.82rem;
  text-align: right;
}

#refreshLimits {
  justify-self: start;
  margin-top: var(--u);
}

/* ══════════════════════════════════════════════ observation column ═══════*/

.column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.sheet {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 3);
  padding-left: calc(var(--u) * 4 + var(--safe-l));
  padding-right: calc(var(--u) * 4 + var(--safe-r));
  scroll-behavior: smooth;
}

/* ── empty state ── */
.empty {
  max-width: 46ch;
  margin: calc(var(--u) * 5) auto;
  display: grid;
  gap: calc(var(--u) * 3);
  justify-items: start;
}
.empty__plot {
  width: 64px;
  opacity: 0.55;
}
.plot--large {
  width: 64px;
  height: 64px;
}
.plot__ring {
  stroke: var(--ink);
  stroke-width: 2;
  fill: none;
}
.plot__barb {
  stroke: var(--ink);
  stroke-width: 2;
}
.empty__title {
  margin: 0;
  font-family: var(--face-form);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.empty__body {
  margin: 0;
  color: var(--ink-soft);
  max-width: 52ch;
  font-size: 0.94rem;
}
.empty__hints {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
}
.hint {
  font-family: var(--face-figure);
  font-size: 0.68rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule-faint);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
}

/* ── one observation ── */
/*  On a phone the station plot moves ABOVE the text as a single ruled line,
    so the reading measure keeps the full width of the screen.              */
.obs {
  max-width: var(--measure);
  margin: 0 auto calc(var(--u) * 7);
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 2);
  animation: pass-onto-sheet 0.42s var(--ease-out) both;
}
@keyframes pass-onto-sheet {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.obs__gutter {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding-bottom: calc(var(--u) * 1.5);
  border-bottom: 1px solid var(--rule-faint);
}
.obs__gutter .plot {
  width: 34px;
  height: 34px;
  flex: none;
}
.obs__time {
  font-family: var(--face-figure);
  font-size: 0.66rem;
  color: var(--ink-soft);
}

.plot {
  display: block;
}
.plot__fig {
  font-family: var(--face-figure);
  font-size: 11px;
  fill: var(--ink-soft);
}
.plot__centre-user {
  fill: var(--ink);
}
.plot__centre-model {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

/* on phone the compass figures live beside the plot as a readable strip */
.obs__strip {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  font-family: var(--face-figure);
  font-size: 0.64rem;
  color: var(--ink-soft);
  margin-left: auto;
}
.obs__strip span {
  white-space: nowrap;
}

.obs__body {
  min-width: 0;
}

.obs__who {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--face-form);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
}
.obs--user .obs__who {
  color: var(--isobar);
}
.obs__model {
  font-family: var(--face-figure);
  font-size: 0.64rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink-soft);
}

.obs__text > *:first-child {
  margin-top: 0;
}
.obs__text > *:last-child {
  margin-bottom: 0;
}
.obs__text p {
  margin: 0 0 1em;
}
.obs__text h1,
.obs__text h2,
.obs__text h3 {
  font-family: var(--face-form);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.7em 0 0.5em;
}
.obs__text h1 {
  font-size: 1.35rem;
}
.obs__text h2 {
  font-size: 1.15rem;
}
.obs__text h3 {
  font-size: 1rem;
}
.obs__text ul,
.obs__text ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}
.obs__text li {
  margin: 0.3em 0;
}
.obs__text a {
  color: var(--isobar);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.obs__text blockquote {
  margin: 0 0 1em;
  padding-left: calc(var(--u) * 3);
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
}
.obs__text hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.6em 0;
}
.obs__text code {
  font-family: var(--face-figure);
  font-size: 0.86em;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  padding: 1px 4px;
  overflow-wrap: anywhere;
}
.obs__text pre {
  margin: 0 0 1em;
  padding: calc(var(--u) * 2.5);
  border: 1px solid var(--rule);
  background: var(--sheet);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.obs__text pre code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-wrap: normal;
}

/* tables scroll inside their own frame rather than widening the sheet */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1em;
}
.obs__text table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}
.obs__text th,
.obs__text td {
  border: 1px solid var(--rule);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  text-align: left;
}
.obs__text th {
  font-family: var(--face-form);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: var(--isobar);
  vertical-align: -0.16em;
  margin-left: 2px;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.reason {
  margin: 0 0 calc(var(--u) * 3);
  border: 1px solid var(--rule-faint);
}
.reason__tk {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  color: var(--isobar);
}
.reason > summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 3);
  font-family: var(--face-form);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.reason__body {
  padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 3);
  font-size: 0.86rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
  border-top: 1px solid var(--rule-faint);
}

/* ── plates ── */
.plates {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
}
.obs__plates {
  margin: 0 0 calc(var(--u) * 3);
}

.plate {
  border: 1px solid var(--ink);
  background: var(--sheet);
  padding: calc(var(--u) * 1.5);
  width: calc(50% - var(--u) * 1);
  max-width: 15rem;
  display: grid;
  gap: calc(var(--u) * 1.5);
  align-content: start;
  animation: draw-plate 0.3s var(--ease-out) both;
}
@keyframes draw-plate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.plate--refused {
  border-color: var(--front-warm);
}
.plate__media {
  display: block;
  width: 100%;
  height: 6.5rem;
  object-fit: cover;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid var(--rule-faint);
}
.plate__glyph {
  display: grid;
  place-items: center;
  height: 6.5rem;
  border: 1px solid var(--rule-faint);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    color-mix(in srgb, var(--ink) 5%, transparent) 6px 12px
  );
}
.plate__glyph span {
  font-family: var(--face-form);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.plate__caption {
  font-family: var(--face-figure);
  font-size: 0.6rem;
  color: var(--ink-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.plate--refused .plate__caption {
  color: var(--front-warm);
  text-decoration: line-through;
}
.plate--refused .plate__reason {
  display: block;
  text-decoration: none;
  margin-top: 3px;
}
.plate__drop {
  justify-self: stretch;
  min-height: 32px;
  border: 1px solid var(--rule-faint);
  background: none;
  cursor: pointer;
  font-family: var(--face-form);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--front-warm);
}
.plate__drop:active {
  background: color-mix(in srgb, var(--front-warm) 12%, transparent);
}

/* ── the time fan ── */
.fan {
  margin-top: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  border-top: 1px solid var(--rule-faint);
  padding-top: calc(var(--u) * 1);
  flex-wrap: wrap;
}
.fan__step {
  border: 1px solid var(--rule-faint);
  background: none;
  cursor: pointer;
  min-width: 38px;
  min-height: 38px;
  color: var(--ink-soft);
}
.fan__step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) {
  .fan__step:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
  }
}
.fan__count {
  font-family: var(--face-figure);
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.fan__spacer {
  flex: 1 1 auto;
}
.fan__act {
  min-height: 38px;
  border: 0;
  background: none;
  padding: 0 calc(var(--u) * 2);
  cursor: pointer;
  font-family: var(--face-form);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.fan__act:active {
  color: var(--isobar);
}

/* ── a failure, printed rather than hidden ── */
.fault {
  max-width: var(--measure);
  margin: 0 auto calc(var(--u) * 6);
  border: 1px solid var(--front-warm);
  padding: calc(var(--u) * 3);
  display: grid;
  gap: calc(var(--u) * 1.5);
}
.fault__head {
  font-family: var(--face-form);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--front-warm);
}
.fault__body {
  margin: 0;
  font-size: 0.9rem;
}
.fault__act {
  justify-self: start;
  margin-top: var(--u);
}

/* ═══════════════════════════════════════════════════════════ composer ════*/

.composer {
  flex: none;
  border-top: 1px solid var(--ink);
  background: var(--ground);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 2 + var(--safe-b));
  padding-left: calc(var(--u) * 3 + var(--safe-l));
  padding-right: calc(var(--u) * 3 + var(--safe-r));
}
.composer > .plates {
  max-width: var(--measure);
  margin: 0 auto calc(var(--u) * 2);
}

.composer__body {
  max-width: var(--measure);
  margin: 0 auto;
  border: 1px solid var(--rule);
  background: var(--sheet);
}
.composer__body:focus-within {
  border-color: var(--isobar);
}

.composer__input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  padding: calc(var(--u) * 2.5);
  font-size: 16px; /* keep at 16px: iOS zooms below it */
  line-height: 1.5;
  max-height: 30dvh;
  overflow-y: auto;
}
.composer__input:focus {
  outline: none;
}
.composer__input::placeholder {
  color: var(--ink-soft);
  opacity: 0.85;
}

/* phone: attachments on their own full-width row, send row beneath */
.composer__bar {
  display: grid;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5);
  border-top: 1px solid var(--rule-faint);
}
.composer__attach {
  display: flex;
  gap: var(--u);
}
.composer__send {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
}
.composer__send .btn--primary,
.composer__send .btn--stop {
  flex: 1 1 auto;
}
.composer__count {
  font-size: 0.66rem;
  color: var(--ink-soft);
  flex: none;
}

.select--sm {
  flex: none;
  width: auto;
  min-height: 38px;
  font-size: 0.68rem;
  padding-right: calc(var(--u) * 5);
  color: var(--ink-soft);
}

.composer__note {
  max-width: var(--measure);
  margin: calc(var(--u) * 1.5) auto 0;
  min-height: 1.2em;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.composer__note--warn {
  color: var(--front-warm);
}

/* ── drop veil (pointer devices only) ── */
.dropveil {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  border: 3px solid var(--isobar);
  pointer-events: none;
}
.dropveil[hidden] {
  display: none;
}
.dropveil p {
  font-family: var(--face-form);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  border: 1px solid var(--isobar);
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--sheet);
  color: var(--isobar);
}

/* ═════════════════════════════════════════ tablet: the sheet gets room ═══*/

@media (min-width: 600px) {
  .plate {
    width: auto;
  }
  .composer__bar {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .composer__attach {
    flex: 0 1 auto;
  }
  .btn--tick {
    flex: 0 0 auto;
  }
  .composer__send {
    justify-content: flex-end;
  }
  .composer__send .btn--primary,
  .composer__send .btn--stop {
    flex: 0 0 auto;
    min-width: 6rem;
  }
  .empty {
    margin: calc(var(--u) * 8) auto;
  }
  .empty__title {
    font-size: 1.5rem;
  }
}

/* ═══════════════ desktop: the rail unfolds into a true left margin ═══════*/

@media (min-width: 901px) {
  :root {
    --head-h: 3.5rem;
  }

  .headrule {
    padding: 0 calc(var(--u) * 4);
    gap: calc(var(--u) * 4);
  }
  .headrule__name {
    display: block;
  }
  .headrule__guide {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  .headrule__controls {
    flex: none;
    gap: calc(var(--u) * 2);
  }
  .picker {
    flex: none;
  }
  .picker .label {
    display: block;
  }
  .select {
    width: auto;
    max-width: 15rem;
  }
  #themeBtn,
  #logoutBtn {
    display: inline-flex;
  }
  #marginBtn {
    display: none;
  }

  .frame {
    flex-direction: row;
  }

  .margin {
    width: var(--margin-w);
    flex: none;
    max-height: none;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
    overflow-y: auto;
  }
  .margin__scroll {
    grid-template-columns: 1fr;
    gap: calc(var(--u) * 5);
    padding: calc(var(--u) * 5) calc(var(--u) * 4) 0;
  }

  /* the fold is always open in a real margin; there is room for all of it */
  .margin__more {
    grid-template-rows: 1fr;
    transition: none;
  }
  .margin__more-inner {
    padding: 0 calc(var(--u) * 4) calc(var(--u) * 8);
  }
  .margin.is-open .margin__more-inner {
    padding-bottom: calc(var(--u) * 8);
  }
  .instr {
    gap: calc(var(--u) * 2);
  }
  .instr--session {
    display: none; /* the head rule carries these on desktop */
  }
  .instr__name {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }
  .gauge__scale {
    height: 22px;
  }
  .instr__read .fig {
    font-size: 1.02rem;
  }
  .instr__of,
  .instr__unit {
    font-size: 0.68rem;
    display: inline;
  }
  .margin:not(.is-open) .instr__foot {
    display: block;
  }

  .sheet {
    padding: calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 4);
  }

  /* the station plot returns to the gutter, at full compass scale */
  .obs {
    grid-template-columns: 4.5rem 1fr;
    gap: calc(var(--u) * 4);
    margin-bottom: calc(var(--u) * 9);
  }
  .obs__gutter {
    display: grid;
    gap: calc(var(--u) * 2);
    justify-items: center;
    align-content: start;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .obs__gutter .plot {
    width: 100%;
    height: auto;
  }
  .obs__strip {
    display: none;
  }

  .composer {
    padding: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 4);
  }
  .composer__input {
    padding: calc(var(--u) * 3);
    font-size: 0.98rem;
    max-height: 40vh;
  }
  .empty__plot,
  .plot--large {
    width: 84px;
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}