/* MERIDIAN — the Prawn Group holdco, as a standing field of light.
 *
 * This is not a dashboard and it deliberately owns none of a dashboard's furniture: there
 * is no rail of tabs, no top bar, no grid of bordered drop-shadow cards, no ticker. The
 * cockpit is **one surface you descend**, in seven regions, and the only navigation is a
 * spine of seven hairlines at the edge telling you where you are.
 *
 * Four rules the whole sheet obeys:
 *
 * 1. **Light, not boxes.** A region is a wash that fades to nothing and a hairline that
 *    fades at both ends — never a rectangle with a border and a shadow. Depth comes from
 *    luminance and from things sitting in front of or behind other things. The only
 *    shadow in the file belongs to the editor panel, because it genuinely floats.
 * 2. **The brand orange is the voice, never a status.** It marks where you are, what is
 *    nearest in time, the focus ring and the one control that commits. A date's urgency
 *    has its own five hues, and every one of them is a colour *and* a word, so the page
 *    survives colourblindness, sunlight and a greyscale print.
 * 3. **Proximity is drawn, not tabulated.** In THE APPROACH, how near a date is sets its
 *    size, its brightness and how far left it sits. 14 days is big, bright and at the
 *    margin; 182 days is small, dim and set back. Overdue crosses above the datum line.
 *    You read the shape before you read a word of it.
 * 4. **Motion is physical and optional.** One ease (`--ease`, a critically-damped
 *    ease-out), entry animations that only ever *add* to a correct static state, and a
 *    single slow pulse on the single nearest thing. `prefers-reduced-motion` turns all of
 *    it off and loses nothing.
 *
 * Type: Fraunces for the voice (the steward speaking), Schibsted Grotesk for the page,
 * DM Mono for every date, number and micro-label. Self-hosted — the CSP is
 * `default-src 'self'` — and the page is laid out so a font that never arrives changes
 * nothing but the letterforms.
 *
 * Mobile-first. Every media query adds.
 */

@font-face {
  font-family: "Voice"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/font-display.woff2) format("woff2-variations"),
       url(/static/font-display.woff2) format("woff2");
}
@font-face {
  font-family: "Page"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/static/font-ui.woff2) format("woff2-variations"),
       url(/static/font-ui.woff2) format("woff2");
}
@font-face {
  font-family: "Data"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/font-mono.woff2) format("woff2");
}
@font-face {
  font-family: "Data"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/font-mono-500.woff2) format("woff2");
}

/* ── night ────────────────────────────────────────────────────────────────────
 * `--ink` is the light this mode is made of — paper at night, graphite by day — so one
 * rgba(var(--ink),.08) is a lift in the dark and a shade in the light, with no second
 * rule anywhere in the file.
 */
:root {
  color-scheme: dark;
  --ink: 246,242,234;

  --ground:  #0B0A09;
  --deep:    #070605;
  --text:    #F6F2EA;
  --text-2:  #A9A299;
  --text-3:  #7B746B;
  --text-4:  #585249;

  --edge:      rgba(var(--ink),.10);   /* a hairline */
  --edge-firm: rgba(var(--ink),.19);
  --wash:      rgba(var(--ink),.035);  /* a surface that is only light */
  --wash-2:    rgba(var(--ink),.065);
  --over:      rgba(var(--ink),.055);  /* hover */
  --filament:  rgba(var(--ink),.22);
  --scrim:     rgba(4,3,2,.62);
  --grain:     .035;

  --accent:     #FF6A1F;
  --accent-ink: #FF8A4C;
  --on-accent:  #1A0B02;
  --accent-ln:  rgba(255,106,31,.38);
  --accent-gl:  rgba(255,106,31,.16);

  --overdue: #FF6B5C; --overdue-gl: rgba(255,107,92,.17);
  --due:     #FFA94D; --due-gl:     rgba(255,169,77,.16);
  --soon:    #F2D15B; --soon-gl:    rgba(242,209,91,.15);
  --clear:   #5ED39B; --clear-gl:   rgba(94,211,155,.14);
  --dormant: #8A857C; --dormant-gl: rgba(138,133,124,.13);

  --voice: "Voice", "Iowan Old Style", Charter, Georgia, ui-serif, serif;
  --page: "Page", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --data: "Data", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --pad: 22px;
  --spine: 0px;
  --lift: 0 2px 10px rgba(0,0,0,.4), 0 40px 90px -40px rgba(0,0,0,.95);
}

/* ── day: the same room with the lights on ───────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --ink: 18,17,14;

  --ground:  #F4F1EA;
  --deep:    #EAE6DC;
  --text:    #14130F;
  --text-2:  #55514A;
  --text-3:  #6E6962;
  --text-4:  #8C867D;

  --edge:      rgba(var(--ink),.13);
  --edge-firm: rgba(var(--ink),.24);
  --wash:      rgba(var(--ink),.032);
  --wash-2:    rgba(var(--ink),.055);
  --over:      rgba(var(--ink),.05);
  --filament:  rgba(var(--ink),.26);
  --scrim:     rgba(20,19,15,.34);
  --grain:     .024;

  --accent:     #C2410C;
  --accent-ink: #B23A09;
  --on-accent:  #FFF7F2;
  --accent-ln:  rgba(194,65,12,.34);
  --accent-gl:  rgba(194,65,12,.10);

  --overdue: #C62B20; --overdue-gl: rgba(198,43,32,.10);
  --due:     #A85706; --due-gl:     rgba(168,87,6,.10);
  --soon:    #87640A; --soon-gl:    rgba(135,100,10,.10);
  --clear:   #1F7A4D; --clear-gl:   rgba(31,122,77,.10);
  --dormant: #5F6368; --dormant-gl: rgba(95,99,104,.09);

  --lift: 0 2px 10px rgba(20,19,15,.08), 0 40px 80px -40px rgba(20,19,15,.5);
}

/* ── the room ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--ground); color: var(--text);
  font: 15px/1.6 var(--page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-wrap: break-word;
}
h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--accent-ln); }
a:hover { border-bottom-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; display: block; }
/* Two sources: a warm one high and left, a cool one low and right. Together they give the
   flat page a direction for its light, which is what stops every surface reading as a
   sticker. They are never animated — a breathing background is a distraction, not depth. */
.sky .w1 {
  top: -34vh; left: -22vw; width: 86vw; height: 86vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,176,112,.085), transparent 72%);
}
.sky .w2 {
  bottom: -40vh; right: -28vw; width: 92vw; height: 92vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126,160,230,.07), transparent 72%);
}
[data-theme="light"] .sky .w1 {
  background: radial-gradient(closest-side, rgba(255,150,70,.13), transparent 70%);
}
[data-theme="light"] .sky .w2 {
  background: radial-gradient(closest-side, rgba(90,120,190,.10), transparent 70%);
}
.sky .grain {
  inset: 0; opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: fixed; left: 10px; top: -60px; z-index: 90; padding: 10px 14px;
  background: var(--ground); border: 1px solid var(--edge-firm); border-radius: 3px;
}
.skip:focus { top: 10px; }

.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* ── the spine ────────────────────────────────────────────────────────────────
 * Seven hairlines. On a phone it is a strip along the bottom edge — each tap target is
 * full height and a seventh of the width, while what you *see* is a 2px dash. On a wide
 * screen it stands on the left and the current region names itself.
 */
.spine {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; gap: 0;
  padding: 0 10px calc(env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ground) 56%, transparent);
  backdrop-filter: blur(6px);
}
.sp {
  flex: 1; height: 42px; position: relative; display: grid; place-items: center;
  color: var(--text-4);
}
.sp::before {
  content: ""; width: 60%; max-width: 30px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .5;
  transition: width .5s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.sp.on { color: var(--accent-ink); }
.sp.on::before { opacity: 1; width: 92%; box-shadow: 0 0 10px var(--accent-gl); }
.sp .sp-dot {
  position: absolute; top: 8px; left: 50%; margin-left: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--overdue);
}
.sp .sp-name { display: none; }
.spine-here {
  display: none; font-family: var(--data); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
}

@media (min-width: 1000px) {
  :root { --spine: 168px; }
  .spine {
    left: 0; right: auto; top: 0; bottom: 0; width: var(--spine);
    flex-direction: column; justify-content: center; gap: 2px;
    padding: 0 0 0 26px; background: none; backdrop-filter: none;
  }
  .sp {
    flex: 0 0 auto; height: 26px; width: 100%; display: flex; align-items: center;
    justify-content: flex-start; gap: 10px;
  }
  .sp::before { width: 14px; max-width: none; flex: 0 0 auto; }
  .sp.on::before { width: 30px; }
  .sp:hover::before { width: 24px; opacity: .9; }
  .sp .sp-name {
    display: block; font-family: var(--data); font-size: 9.5px; letter-spacing: .17em;
    text-transform: uppercase; opacity: 0; transform: translateX(-4px);
    transition: opacity .35s var(--ease), transform .35s var(--ease); white-space: nowrap;
  }
  .sp.on .sp-name, .sp:hover .sp-name { opacity: 1; transform: none; }
  .sp .sp-dot { top: 4px; left: 8px; margin-left: 0; }
}

/* ── the surface ──────────────────────────────────────────────────────────── */
main {
  position: relative; z-index: 1;
  padding: 0 var(--pad) calc(96px + env(safe-area-inset-bottom));
  max-width: calc(1060px + var(--spine)); margin: 0;
}
@media (min-width: 1000px) {
  main { padding: 0 48px 120px var(--spine); }
}

.region { padding: 0 0 clamp(54px, 9vh, 96px); scroll-margin-top: 26px; }
#standing { padding-top: clamp(30px, 7vh, 72px); }

/* A region announces itself in two registers at once: the name it has, and the job it
   does. Both are always on screen — the voice never costs you the functional word. */
.r-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.r-head h2 {
  font-family: var(--data); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-2);
}
.r-head .r-job { font-size: 12.5px; color: var(--text-4); font-style: italic; }
.r-head .r-act { margin-left: auto; display: flex; gap: 14px; align-items: baseline; }
.r-rule {
  height: 1px; margin: 0 0 20px;
  background: linear-gradient(to right, var(--edge-firm), var(--edge) 32%, transparent 86%);
}

/* ── the standing: what the cockpit says before you ask it anything ───────── */
.crown {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--data); font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: clamp(26px, 6vh, 56px);
}
.crown .mk { width: 15px; height: auto; display: block; opacity: .85; }
.crown .sep { color: var(--text-4); opacity: .45; }
.crown .push { display: none; }
@media (min-width: 760px) { .crown .push { display: block; margin-left: auto; } }
.crown button { font: inherit; letter-spacing: inherit; color: var(--text-4); }
.crown button:hover { color: var(--accent-ink); }
.crown .watchdot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--clear);
  box-shadow: 0 0 0 3px var(--clear-gl); display: inline-block;
}
.crown .watchdot.cold { background: var(--dormant); box-shadow: 0 0 0 3px var(--dormant-gl); }

.say {
  font-family: var(--voice); font-weight: 300;
  font-variation-settings: "SOFT" 28, "WONK" 0, "opsz" 120;
  font-size: clamp(31px, 7.4vw, 60px); line-height: 1.08; letter-spacing: -.021em;
  margin: 0 0 18px; max-width: 19ch;
}
@media (min-width: 760px) { .say { max-width: 24ch; } }
.say .q { color: var(--text-3); }
.say .hot { color: var(--overdue); }
.say-next {
  font-family: var(--voice); font-weight: 300;
  font-variation-settings: "SOFT" 28, "opsz" 48;
  font-size: clamp(18px, 3.4vw, 25px); line-height: 1.35; color: var(--text-2);
  max-width: 34ch; margin: 0 0 22px;
}
.say-next b { color: var(--text); font-weight: 400; }
.say-next .num { font-family: var(--data); font-size: .88em; color: var(--accent-ink); }
.tally {
  display: flex; gap: 10px 22px; flex-wrap: wrap; font-family: var(--data); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 14px 0 0; border-top: 1px solid var(--edge); margin-bottom: 34px;
}
.tally b { color: var(--text); font-weight: 500; }
.tally .z { color: var(--text-4); }

/* Each thing wanting attention is a line of the steward's own speech, not a table row:
   a tone bar at the left, the thing, and when. It grows toward you on hover. */
.att { display: flex; flex-direction: column; }
.att-row {
  display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left;
  padding: 13px 8px 13px 16px; position: relative; color: inherit;
  border-bottom: 1px solid var(--edge);
  transition: background .3s var(--ease), padding-left .35s var(--ease);
}
.att-row:last-child { border-bottom: 0; }
.att-row::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px;
  border-radius: 2px; background: var(--dormant);
  transition: top .35s var(--ease), bottom .35s var(--ease), box-shadow .35s var(--ease);
}
.att-row:hover { background: var(--over); padding-left: 21px; }
.att-row:hover::before { top: 6px; bottom: 6px; }
.att-row .what { flex: 1; min-width: 0; font-size: 15.5px; }
.att-row .who {
  display: block; font-family: var(--data); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-4); margin-top: 3px;
}
/* A dated detail is a number and gets the mono; a sentence ("To open. Software side banks
   at Mercury…") is prose and must not be set as data, or the row reads as a log line. */
.att-row .when {
  font-size: 12.5px; color: var(--text-4); text-align: right; flex: 0 1 auto;
  max-width: 40%; line-height: 1.5;
}
.att-row .when.num {
  font-family: var(--data); font-size: 12px; color: var(--text-3); white-space: nowrap;
}
@media (max-width: 559px) {
  .att-row { flex-wrap: wrap; gap: 2px 14px; }
  .att-row .when { max-width: none; width: 100%; text-align: left; }
}
.a-overdue::before { background: var(--overdue); box-shadow: 0 0 12px var(--overdue-gl); }
.a-overdue .when { color: var(--overdue); }
.a-due::before { background: var(--due); box-shadow: 0 0 12px var(--due-gl); }
.a-due .when { color: var(--due); }
.a-soon::before { background: var(--soon); }
.a-soon .when { color: var(--soon); }
.a-nodate::before { background: var(--dormant); }
.a-flag::before { background: var(--dormant); }
.a-working::before { background: var(--accent); }
.a-working .when { color: var(--accent-ink); }

.allclear {
  font-family: var(--voice); font-weight: 300; font-variation-settings: "SOFT" 28, "opsz" 40;
  font-size: 19px; color: var(--text-3); padding: 6px 0 0;
}

/* ── the structure: the holdco as something that hangs ────────────────────────
 * Anton holds Prawn Group; Prawn Group holds the three. It is drawn as that — a lintel
 * with three things suspended from it on filaments — rather than written as a bullet
 * tree, because the shape *is* the fact. A company that isn't formed yet is drawn as an
 * outline with nothing inside it. You can see which one isn't real.
 */
.chain { padding: 4px 0 0; }
.holder {
  display: flex; align-items: center; gap: 10px; font-family: var(--data); font-size: 11px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--text-2);
}
.holder .ring {
  width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent-ink);
  box-shadow: 0 0 14px var(--accent-gl); flex: 0 0 auto;
}
.drop { width: 1px; margin-left: 4px; background: linear-gradient(var(--filament), var(--filament)); }
.drop.d1 { height: 30px; }

/* The light on a surface has to run out somewhere, or it is a box again. Every wash in
   this file is painted on a layer behind the content and masked away to the right, so
   what you see is a lit edge fading into the field rather than a rectangle. */
.lit { position: relative; }
.lit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--wash-2), transparent 74%);
  -webkit-mask-image: linear-gradient(to right, #000, #000 38%, transparent);
  mask-image: linear-gradient(to right, #000, #000 38%, transparent);
}
.lintel {
  position: relative; padding: 18px 20px 20px;
  border-top: 1px solid var(--edge-firm);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.lintel .nm { font-family: var(--voice); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.lintel .st {
  font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.lintel .role { flex: 1 0 100%; font-size: 13px; color: var(--text-3); }

/* The hanger: one trunk down from the lintel and a short arm out to each sub. On a wide
   screen the trunk becomes a beam across the top of the three and they hang from it. */
.hang { display: flex; flex-direction: column; gap: 0; padding-left: 26px; position: relative; }
.hang::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 42px; width: 1px;
  background: linear-gradient(to bottom, var(--filament), var(--filament) 80%, transparent);
}
.sub { position: relative; padding: 18px 0 18px 24px; }
.sub::before {
  content: ""; position: absolute; left: -26px; top: 40px; width: 24px; height: 1px;
  background: var(--filament);
}
.sub-in {
  position: relative; padding: 15px 16px 18px; text-align: left;
  width: 100%; color: inherit; display: block;
  border-top: 1px solid var(--edge);
  transition: transform .35s var(--ease);
}
.sub-in::after { background: linear-gradient(180deg, var(--wash), transparent 78%); }
.sub-in:hover { transform: translateY(-2px); }
.sub-in:hover::after { background: linear-gradient(180deg, var(--wash-2), transparent 78%); }
.sub-in .nm { font-family: var(--voice); font-weight: 400; font-size: 18px; display: block; }
.sub-in .st {
  font-family: var(--data); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-3); display: block; margin-top: 5px;
}
.sub-in .nx { font-size: 12.5px; color: var(--text-4); display: block; margin-top: 8px; }
.sub-in .nx em { font-style: normal; color: var(--soon); }
.ghost .sub-in { border-top: 1px dashed var(--edge-firm); opacity: .72; }
.ghost .sub-in::after { display: none; }
.ghost::before { background: none; border-top: 1px dashed var(--filament); height: 0; }
.ghost .sub-in .st { color: var(--due); }
.chain-note { font-size: 12.5px; color: var(--text-4); max-width: 62ch; margin: 22px 0 0; }

@media (min-width: 820px) {
  .hang {
    flex-direction: row; gap: 22px; padding-left: 0; padding-top: 34px; margin-top: 4px;
  }
  /* the beam the three hang from */
  .hang::before {
    left: 16%; right: 16%; width: auto; top: 0; bottom: auto; height: 1px;
    background: linear-gradient(to right, transparent, var(--filament) 12%, var(--filament) 88%, transparent);
  }
  .sub { flex: 1; padding: 0; }
  .sub::before { left: 50%; top: -34px; width: 1px; height: 34px; background: var(--filament); }
  .ghost::before { border-left: 1px dashed var(--filament); border-top: 0; width: 0; background: none; }
}

/* ── the approach: time coming toward you ─────────────────────────────────────
 * Vertical position is the calendar; horizontal set-back, size and brightness are how
 * near the date is. Anything overdue has crossed the datum and sits above it, pulled out
 * past the margin. Nothing here is a table and nothing here needs to be counted.
 */
.datum { position: relative; margin: 10px 0 6px; }
.datum .ln {
  height: 1px; background: linear-gradient(to right, var(--accent-ln), var(--edge) 55%, transparent);
}
.datum .lb {
  font-family: var(--data); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink); padding-top: 7px; display: block;
}
.field-t { display: flex; flex-direction: column; }
/* `--ts` (type size), `--st` (set-back) and `--dd` are written per mark by app.js from
   how near the date is. They are scaled down as one on a phone rather than re-derived,
   so near and far keep exactly the same ratio on a 390px screen as on a desk. */
.tmark {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  color: inherit; padding: 9px 0; position: relative;
  font-size: var(--ts); padding-left: var(--st);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.tmark .dd { font-size: var(--dd); }
.tmark:hover { transform: translateX(-4px); }
.tmark .lead {
  flex: 0 0 auto; height: 1px; background: var(--dormant); align-self: center;
  transition: width .4s var(--ease);
}
.tmark .ttl { flex: 1; min-width: 0; letter-spacing: -.012em; }
.tmark .sub2 {
  display: block; font-family: var(--data); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-4); margin-top: 4px;
}
.tmark .dd {
  font-family: var(--data); text-align: right; flex: 0 0 auto; color: var(--text-3);
  white-space: nowrap;
}
.tmark.near .lead { background: var(--accent); box-shadow: 0 0 12px var(--accent-gl); }
.tmark.near .dd { color: var(--accent-ink); }
.tmark.past { color: var(--overdue); }
.tmark.past .lead { background: var(--overdue); box-shadow: 0 0 14px var(--overdue-gl); }
.tmark.past .dd { color: var(--overdue); font-weight: 500; }
@media (max-width: 559px) {
  .tmark {
    flex-wrap: wrap; gap: 4px 12px;
    font-size: calc(var(--ts) * .76); padding-left: calc(var(--st) * .7);
  }
  .tmark .lead { align-self: flex-start; margin-top: .7em; }
  .tmark .dd { width: 100%; text-align: left; padding-left: calc(var(--lead) + 12px); }
}

.unmoored { margin-top: 38px; }
/* The one small heading this page has. Used by every region that needs to name a register
   below its own title — "Not on the calendar", "Held", "Alert log", "Light". */
.u-head {
  font-family: var(--data); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3); padding-bottom: 4px;
}
.u-say { font-size: 13px; color: var(--text-4); margin: 0 0 14px; max-width: 58ch; }
.uwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.umark {
  position: relative; display: inline-flex; align-items: baseline; gap: 9px;
  padding: 9px 14px; color: var(--text-2); font-size: 13.5px; text-align: left;
  border-left: 1px solid var(--edge-firm); max-width: 100%;
  transition: color .3s var(--ease);
}
.umark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, var(--wash-2), transparent);
  transition: opacity .3s var(--ease);
}
.umark:hover { color: var(--text); }
.umark:hover::after { background: linear-gradient(to right, var(--over), transparent); }
.umark .ue {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-4); flex: 0 0 auto;
}
.held { margin-top: 34px; }
.hrow {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  color: var(--text-3); font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--edge);
}
.hrow:last-child { border-bottom: 0; }
.hrow:hover { color: var(--text); }
.hrow .hs {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-4); flex: 0 0 auto; min-width: 74px;
}
.hrow .he { margin-left: auto; font-family: var(--data); font-size: 10px; color: var(--text-4);
  text-align: right; }

/* ── the holdings: each company as an engraved plate ──────────────────────── */
.plate {
  position: relative; padding: 24px 0 22px; border-top: 1px solid var(--edge);
}
.plate:first-of-type { border-top: 0; }
.plate::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 34%; height: 1px;
  background: linear-gradient(to right, var(--clear), transparent);
  opacity: .55;
}
.plate.not-formed::before { background: linear-gradient(to right, var(--due), transparent); }
.plate.dim::before { background: linear-gradient(to right, var(--dormant), transparent); }
.p-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.p-head h3 {
  font-family: var(--voice); font-weight: 400; font-size: clamp(22px, 4.4vw, 29px);
  letter-spacing: -.016em; font-variation-settings: "SOFT" 28, "opsz" 36;
}
.p-head .st {
  font-family: var(--data); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
}
.p-head .st .ok { color: var(--clear); }
.p-head .st .no { color: var(--due); }
.p-role { color: var(--text-3); font-size: 13.5px; margin: 0 0 18px; max-width: 64ch; }
.plate-grid { display: grid; gap: 16px 30px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 620px) { .plate-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .plate-grid { grid-template-columns: 1fr 1fr 1fr; } }
.fct .k {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-4); display: block; margin-bottom: 4px;
}
.fct .v { font-size: 13.5px; color: var(--text); }
.fct .v.mono { font-family: var(--data); font-size: 12.5px; }
.fct .v .q { color: var(--text-4); }
.fct .v .ok { color: var(--clear); }
.fct .v .no { color: var(--due); }
.fct .v em { font-style: normal; color: var(--text-3); }
.p-dates { border-top: 1px solid var(--edge); padding-top: 14px; }
.p-dates .dh {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 6px;
}
.p-acts { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin-top: 16px; }

/* a compact obligation line, used inside a plate */
.irow {
  display: flex; align-items: baseline; gap: 11px; width: 100%; text-align: left;
  color: inherit; padding: 8px 0; border-bottom: 1px solid var(--edge); font-size: 13.5px;
}
.irow:last-child { border-bottom: 0; }
.irow:hover { color: var(--accent-ink); }
.irow .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--dormant); flex: 0 0 5px; }
.irow .it { flex: 1; min-width: 0; }
.irow .ik {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-4);
}
.irow .iw { font-family: var(--data); font-size: 11.5px; color: var(--text-3); flex: 0 0 auto;
  text-align: right; }
.g-overdue .pip { background: var(--overdue); box-shadow: 0 0 0 3px var(--overdue-gl); }
.g-overdue .iw { color: var(--overdue); }
.g-due .pip { background: var(--due); box-shadow: 0 0 0 3px var(--due-gl); }
.g-due .iw { color: var(--due); }
.g-soon .pip { background: var(--soon); box-shadow: 0 0 0 3px var(--soon-gl); }
.g-soon .iw { color: var(--soon); }
.g-later .pip, .g-done .pip { background: var(--clear); }
.g-nodate .pip { background: none; box-shadow: inset 0 0 0 1px var(--text-4); }

/* ── the accounts ─────────────────────────────────────────────────────────── */
.acct {
  display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left;
  color: inherit; padding: 15px 0; border-bottom: 1px solid var(--edge);
}
.acct:last-of-type { border-bottom: 0; }
.acct:hover .an { color: var(--accent-ink); }
.acct .an { flex: 1 1 180px; min-width: 0; font-size: 15px; }
.acct .ad { display: block; font-size: 12.5px; color: var(--text-4); margin-top: 3px; }
.acct .as {
  font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
}
.acct .as::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dormant);
}
.s-active::before, .s-approved::before { background: var(--clear) !important; }
.s-active, .s-approved { color: var(--clear); }
.s-in_review::before { background: var(--soon) !important; }
.s-in_review { color: var(--soon); }
.s-to_open::before { background: var(--due) !important; }
.s-to_open { color: var(--due); }
.s-after_formation { color: var(--text-4); }

/* ── resolutions ──────────────────────────────────────────────────────────── */
.who-head {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3); margin: 26px 0 6px; display: flex; gap: 10px; align-items: baseline;
}
.who-head:first-of-type { margin-top: 0; }
.who-head .n { color: var(--text-4); }
.res { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--edge); }
.res:last-child { border-bottom: 0; }
.tick {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; margin-top: 2px;
  border: 1px solid var(--edge-firm); display: grid; place-items: center; color: transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.tick:hover { border-color: var(--accent-ln); }
.tick svg { width: 11px; height: 11px; }
.tick.on { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.res .rb { flex: 1; min-width: 0; }
.res .rt { font-size: 14.5px; }
.res .rn { font-size: 12.5px; color: var(--text-4); margin-top: 3px; }
.res.done .rt { color: var(--text-4); text-decoration: line-through; }

/* ── the watch ────────────────────────────────────────────────────────────── */
.wgrid { display: grid; gap: 22px 36px; grid-template-columns: 1fr; margin-bottom: 26px; }
@media (min-width: 680px) { .wgrid { grid-template-columns: 1fr 1fr; } }
.wsay { font-size: 13.5px; color: var(--text-3); max-width: 66ch; margin: 0 0 18px; }
.wsay strong { color: var(--text-2); font-weight: 500; }
.logline {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--edge); font-size: 12.5px; color: var(--text-3);
}
.logline:last-child { border-bottom: 0; }
.logline .lok {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clear); flex: 0 0 56px;
}
.logline .lbad { color: var(--overdue); }
.logline .lt { font-family: var(--data); flex: 0 0 auto; color: var(--text-4); }

/* Controls. There is one button shape in this app: a word with a rule under it. The one
   control that commits a change is the one that carries the brand. */
.act {
  font-family: var(--data); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-2); padding-bottom: 3px; border-bottom: 1px solid var(--edge-firm);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.act:hover { color: var(--text); border-color: var(--text-3); }
.act.go { color: var(--accent-ink); border-color: var(--accent-ln); }
.act.go:hover { border-color: var(--accent); }
.act.danger { color: var(--overdue); border-color: transparent; }
.act.danger:hover { border-color: var(--overdue); }
.act[disabled] { opacity: .45; cursor: default; }
.seg { display: inline-flex; gap: 0; border: 1px solid var(--edge); border-radius: 2px; }
.seg button {
  font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 13px; color: var(--text-3);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.seg button + button { border-left: 1px solid var(--edge); }
.seg button:hover { color: var(--text); }
.seg button.on { color: var(--accent-ink); background: var(--accent-gl); }

.quiet { color: var(--text-4); font-size: 13px; }
.foot-note {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--edge);
  font-size: 11.5px; line-height: 1.65; color: var(--text-4); max-width: 74ch;
}
.foot-note strong { color: var(--text-3); font-weight: 500; }

/* ── the editor: a panel of light, not a card ─────────────────────────────── */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end;
  justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(7px); }
.sheet {
  position: relative; width: 100%; max-width: 620px; max-height: 92dvh; overflow-y: auto;
  background: var(--ground); box-shadow: var(--lift);
  border-top: 1px solid var(--accent-ln);
  padding: 22px var(--pad) calc(26px + env(safe-area-inset-bottom));
  animation: rise .45s var(--ease) both;
}
@keyframes rise { from { transform: translateY(26px); opacity: 0; } }
@media (min-width: 760px) {
  .sheet-wrap { align-items: stretch; justify-content: flex-end; }
  .sheet {
    max-width: 540px; max-height: none; height: 100%; border-top: 0;
    border-left: 1px solid var(--accent-ln); padding: 34px 34px 44px;
    animation-name: slide;
  }
  @keyframes slide { from { transform: translateX(36px); opacity: 0; } }
}
.sheet-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.sheet-head h3 {
  font-family: var(--voice); font-weight: 400; font-size: 24px; letter-spacing: -.015em;
  flex: 1; min-width: 0; font-variation-settings: "SOFT" 28, "opsz" 32;
}
.sheet .note {
  font-family: var(--data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-4); margin: 0 0 24px;
}
.field { margin-bottom: 18px; }
.field > label {
  display: block; font-family: var(--data); font-size: 9.5px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 5px;
}
/* Underlines, not boxes. A field is a place to write on, which is what a ruled line has
   always meant, and it removes every rounded-rectangle from the editor in one rule. */
.field input, .field select, .field textarea {
  width: 100%; padding: 7px 0; background: none; color: var(--text); font-size: 15px;
  border: 0; border-bottom: 1px solid var(--edge-firm); border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 10px) 16px, calc(100% - 5px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field textarea { min-height: 72px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field .tip { color: var(--text-4); font-size: 11.5px; margin-top: 6px; }
.field.two { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field.two > div { min-width: 0; }
.sheet-actions {
  display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; align-items: baseline;
  padding-top: 20px; border-top: 1px solid var(--edge);
}
.sheet-actions .spacer { margin-left: auto; }
.err-box { color: var(--overdue); font-size: 13px; margin-top: 14px; }

/* ── toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 80;
  padding: 11px 20px; background: var(--ground); border: 1px solid var(--edge-firm);
  border-radius: 2px; box-shadow: var(--lift); font-size: 13.5px; max-width: 90vw;
  text-align: center; animation: rise .4s var(--ease) both;
}
.toast.bad { border-color: var(--overdue); color: var(--overdue); }
@media (min-width: 1000px) { .toast { bottom: 30px; } }

/* ── sign in ──────────────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 26px;
  position: relative; z-index: 1; }
.auth { width: 100%; max-width: 420px; text-align: left; }
.auth .mark { width: 30px; height: auto; display: block; margin: 0 0 30px; }
.auth h1 {
  font-family: var(--voice); font-weight: 300; font-variation-settings: "SOFT" 28, "opsz" 72;
  font-size: clamp(34px, 9vw, 46px); line-height: 1.06; letter-spacing: -.022em;
  margin-bottom: 12px;
}
.auth p { color: var(--text-3); font-size: 14px; margin: 0 0 30px; max-width: 34ch; }
.primary {
  font-family: var(--data); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); padding: 0 0 5px; border-bottom: 1px solid var(--accent-ln);
  transition: border-color .3s var(--ease);
}
.primary:hover { border-bottom-color: var(--accent); }
.primary:disabled { opacity: .5; cursor: default; }
.msg { margin-top: 20px; font-size: 13px; color: var(--text-3); min-height: 20px; }
.msg.err { color: var(--overdue); }
.msg.ok { color: var(--clear); }
.hidden { display: none !important; }

/* ── entry: the page settles in once, and only once ──────────────────────────
 * Every one of these animates *from* a displaced state *to* the state the element already
 * has in CSS. Kill the animation and nothing is missing — which is exactly what happens
 * under prefers-reduced-motion, and what happens on every re-render after a save
 * (body.settled), so saving an entity doesn't replay the whole opening.
 */
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes widen { from { opacity: 0; transform: scaleX(0); } }
@keyframes grow { from { transform: scaleY(0); } }
body:not(.settled) .say { animation: settle .72s var(--ease) both; }
body:not(.settled) .say-next { animation: settle .72s .09s var(--ease) both; }
body:not(.settled) .tally { animation: settle .6s .18s var(--ease) both; }
body:not(.settled) .att-row { animation: settle .6s var(--ease) both;
  animation-delay: calc(.22s + var(--i, 0) * .045s); }
body:not(.settled) .crown { animation: settle .6s var(--ease) both; }
body:not(.settled) .drop, body:not(.settled) .hang::before, body:not(.settled) .sub::before {
  transform-origin: top; animation: grow .7s .1s var(--ease) both;
}
body:not(.settled) .r-rule { transform-origin: left; animation: widen .8s var(--ease) both; }

/* One thing pulses, ever: whatever is nearest in time. If everything glows, nothing does. */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.tmark.near .lead { animation: breathe 5.5s ease-in-out infinite; }
.crown .watchdot { animation: breathe 4s ease-in-out infinite; }

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