/* ═══════════════════════════════════════════════════════════════════════════
   NORTHSTAR — THE LOOK   ·   DARK, by instruction 2026-09-21

   ⭐ HIS WORDS: "Change NorthStar to have the same appearance as Claude Code,
     for it is much easier to read."  He also switched Windows itself to dark
     the same hour. Readability for the person who uses it every day beats any
     opinion of mine about house style.

   ⚠️ AND A CORRECTION WORTH KEEPING. Robin argued earlier that dark was "the
     abandoned generation". That was wrong: the old dark landing pages were
     retired for their FRAMING - they named the affliction and sold to the
     broken - not for their colour. Colour was never the fault.

   ⭐ SO THIS IS NOT AN INVENTED PALETTE. These are UpWeForge's OWN dark tokens,
     read out of doors/something-to-do.html: gold #e8c07a, ink #f4f6fb, muted
     #9aa6c2, hairline rgba(232,192,122,.22), on #05070d. Already proven on
     shipped pages.

   ⭐ ONE OPEN THING PER SCREEN. His rule, after Joining's Today tab reached
     five blocks of which four were bookkeeping. One <main> card at a time;
     <details> for everything else.

   ⛔ 48px minimum on anything a thumb must hit. He walks the product on a
     Galaxy S24, and every fault he has ever found was found on that phone.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* the house dark tokens */
  --bg:#05070d;
  --bg-2:#0A0E18;
  --card:#0E131F;
  --card-2:#121826;
  --ink:#f4f6fb;
  --ink-soft:#9aa6c2;
  --gold:#e8c07a;
  --gold-soft:#F2D08C;
  --gold-deep:#A87E36;
  --star:#e8c07a;
  --sky:#8FB4CE;
  --line:rgba(232,192,122,.22);
  --edge:rgba(232,192,122,.16);
  --danger:#E0857A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

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

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

body{
  background:
    radial-gradient(1100px 620px at 50% -12%, #14203f 0%, rgba(20,32,63,0) 62%),
    radial-gradient(900px 520px at 85% 108%, #102a3a 0%, rgba(16,42,58,0) 58%),
    var(--bg) fixed;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:0 20px 96px;
}

/* ── the masthead ───────────────────────────────────────────────────────── */
header.mast{
  max-width:620px; margin:0 auto; padding:22px 0 10px;
  display:flex; align-items:center; gap:12px;
}
.mark{ width:34px; height:34px; flex:0 0 34px; }
.mast h1{ font-size:21px; font-weight:normal; letter-spacing:.3px; flex:1; }
.mast h1 b{ color:var(--gold); font-weight:normal; }
.mast .tag{
  display:block; font-size:12.5px; color:var(--ink-soft);
  font-style:italic; letter-spacing:.2px; margin-top:1px;
}

.lang{ display:flex; gap:6px; }
/* ⛔ 48px, NOT 38px. These were the only tap targets in the whole product
   under the minimum - measured at phone size, not guessed - and they sit in
   the top corner where a thumb has to stretch furthest. The language switch is
   also the FIRST thing a Spanish-speaking Pioneer reaches for, so it is the
   worst possible button to make small.
   ⚠️ "All of our solutions must be optimised for mobile devices." - 2026-09-21 */
.lang button{
  font-family:inherit; font-size:13px; letter-spacing:1px;
  padding:0 14px; min-height:48px; min-width:48px;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.lang button[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  border-color:transparent; color:#1a1305;
}

/* ── the one card ───────────────────────────────────────────────────────── */
main{ max-width:620px; margin:0 auto; }

.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--edge); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 22px; margin:14px 0;
}

.eyebrow{
  font-size:11px; letter-spacing:3.4px; text-transform:uppercase;
  color:var(--gold); font-family:system-ui,sans-serif; margin-bottom:12px;
}
h2{
  font-size:clamp(25px,6.2vw,33px); line-height:1.16; font-weight:normal;
  letter-spacing:.2px; margin-bottom:14px; color:#fff;
}
p{ margin-bottom:14px; font-size:17px; }
p.soft{ color:var(--ink-soft); font-size:15.5px; }
p.golden{
  color:var(--gold-soft); font-size:15px; font-style:italic;
  border-left:2px solid var(--gold-deep); padding-left:14px; margin:18px 0;
}

/* ── fields ─────────────────────────────────────────────────────────────── */
label{
  display:block; font-family:system-ui,sans-serif; font-size:13.5px;
  color:var(--ink); margin:18px 0 6px; letter-spacing:.1px;
}
label .opt{ color:var(--ink-soft); font-size:12.5px; font-style:italic; }

/* ⛔ input[type=time] MUST BE LISTED HERE. It was not, so the two most
   important fields in the product - the waking hours - rendered as narrow
   native stubs while every other field was full width and thumb-sized. A
   selector that names types individually forgets the next type you add. */
input[type=text], input[type=time], textarea{
  width:100%; font-family:Georgia,serif; font-size:17px; color:var(--ink);
  background:rgba(5,7,13,.55); border:1px solid var(--edge); border-radius:11px;
  padding:13px 14px; min-height:50px; line-height:1.5;
}
textarea{ resize:vertical; min-height:88px; }
input:focus, textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(5,7,13,.8);
}
::placeholder{ color:#6C7590; font-style:italic; }

/* ⭐ the native time picker draws its own glyphs, and on a dark field they
   arrive black-on-black. invert() is the only way to reach them. */
input[type=time]{ max-width:240px; color-scheme:dark; }
/* ⛔ the clock the Pioneer taps to open the picker was almost invisible on
   dark at .6 — and on a phone it IS the control, not a decoration. Full
   opacity, and padded so the tappable area is thumb-sized rather than a
   14px glyph in the corner of a field. */
input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(1); opacity:1; cursor:pointer;
  padding:10px; margin-right:-4px;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  font-family:system-ui,sans-serif; font-size:15.5px; letter-spacing:.2px;
  min-height:52px; padding:14px 20px; width:100%;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  color:#1a1305; border:none; border-radius:12px;
  cursor:pointer; margin-top:20px;
}
.btn:active{ transform:translateY(1px); }
.btn.ghost{
  background:transparent; color:var(--gold); border:1px solid var(--gold-deep);
}
.btn.quiet{
  background:transparent; color:var(--ink-soft); border:1px solid var(--line);
}
.btn.danger{
  background:transparent; color:var(--danger);
  border:1px solid rgba(224,133,122,.38);
}
.btn[disabled]{ opacity:.45; cursor:default; }
.row{ display:flex; gap:10px; }
.row .btn{ flex:1; }

/* ── the pilot checklist ────────────────────────────────────────────────── */
.check{
  display:flex; align-items:flex-start; gap:12px;
  padding:15px 14px; margin:10px 0; min-height:56px;
  background:rgba(5,7,13,.45); border:1px solid var(--edge); border-radius:12px;
  cursor:pointer; font-size:16.5px;
}
.check input{
  width:24px; height:24px; flex:0 0 24px; margin-top:2px;
  accent-color:var(--gold); color-scheme:dark;
}
.check.on{ border-color:var(--gold-deep); background:rgba(232,192,122,.07); }

/* ── stars ──────────────────────────────────────────────────────────────── */
/* ⛔ FIVE SLOTS ARE ALWAYS DRAWN, and an unearned one is a faint OUTLINE -
   never crossed out, never greyed as "missed". The difference between "not
   yet" and "you failed" is entirely in how this is drawn. */
.stars{ display:flex; gap:8px; align-items:center; margin:6px 0 4px; }
.stars svg{ width:30px; height:30px; }
.stars .on path{ fill:var(--star); stroke:var(--star); }
.stars .off path{ fill:none; stroke:rgba(232,192,122,.32); }
.starline{
  font-family:system-ui,sans-serif; font-size:13px; color:var(--ink-soft);
  letter-spacing:.3px;
}

/* ── the audit, over everything ─────────────────────────────────────────── */
.veil{
  position:fixed; inset:0; z-index:50;
  background:rgba(2,4,10,.72); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:16px; overflow-y:auto;
}
/* ⛔⛔ THIS LINE IS NOT OPTIONAL, AND IT IS WHY THE FIRST WALKTHROUGH FOUND THE
   WHOLE PAGE GREYED OUT AFTER AN AUDIT CLOSED.
   `display:flex` above is a CLASS selector, and a class beats the browser's own
   `[hidden]{display:none}`. So setting `hidden` in JavaScript did exactly
   nothing: the scrim stayed over everything, the DOM reported hidden=true, and
   only LOOKING at the screen showed it. A green check and a broken screen at
   the same time - the whole reason we walk it. */
.veil[hidden]{ display:none; }
.veil .card{ width:100%; max-width:560px; margin:0; max-height:94vh; overflow-y:auto; }
@media (min-width:640px){ .veil{ align-items:center; } }

.q{ margin-top:20px; }
.q:first-of-type{ margin-top:6px; }
.q b{ display:block; font-weight:normal; font-size:18px; margin-bottom:7px; color:#fff; }
.q.third b{ color:var(--gold); }
.q.third{
  background:rgba(232,192,122,.06); border:1px solid var(--gold-deep);
  border-radius:12px; padding:16px 15px; margin-top:22px;
}

/* ── folds: everything that is not the one open thing ───────────────────── */
details{ border-top:1px solid var(--line); margin-top:4px; }
details summary{
  cursor:pointer; list-style:none; padding:17px 2px; min-height:54px;
  font-family:system-ui,sans-serif; font-size:14.5px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
details summary::-webkit-details-marker{ display:none; }
/* ⛔ CHILD COMBINATOR, NOT DESCENDANT. Written as `details summary::after`
   these reach INTO nested folds: an open OUTER fold restyled every day row
   inside it, so closed rows showed the open marker. A selector that crosses
   a nesting boundary is a selector that will surprise you. */
details > summary::after{ content:'+'; color:var(--gold); font-size:19px; }
details[open] > summary::after{ content:'\2212'; }
details .inner{ padding:0 2px 20px; }

/* ── the log ────────────────────────────────────────────────────────────── */
.logrow{
  display:flex; align-items:baseline; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:15.5px;
}
.logrow .d{
  font-family:system-ui,sans-serif; font-size:13px; color:var(--ink-soft);
  flex:0 0 96px;
}
.logrow .s{ color:var(--gold); font-family:system-ui,sans-serif; font-size:13px; }
.logrow .p{ flex:1; color:var(--ink); }

footer.foot{
  max-width:620px; margin:26px auto 0; text-align:center;
  font-family:system-ui,sans-serif; font-size:12px; color:var(--ink-soft);
  letter-spacing:.4px;
}
.saved{
  font-family:system-ui,sans-serif; font-size:14px; color:var(--gold);
  margin-top:14px; min-height:20px;
}
.warn{
  font-family:system-ui,sans-serif; font-size:13px; color:var(--ink-soft);
  margin-top:10px;
}

/* ═══ THE SOUL BAND — the one heading every Pioneer holds in common ═══════
   ⭐ "Place the actual soul of the reason why this system exists right at the
     top, for this is the actual NorthStar for all." It sits ABOVE the
     masthead, so it is the first thing read and the last thing forgotten.
   ⛔ It is not a card. A card would make it one more thing on the page; this
     is the page's reason, so it is open ground with the mark above it. */
.soul{
  max-width:620px; margin:0 auto; padding:34px 4px 6px; text-align:center;
}
/* ⛔⛔ SIZED BY ARITHMETIC, NOT BY EYE. The mark carries its own wordmark and
   the line "The Universe", and that line is 30 units in a 680-wide viewBox.
   So the tagline renders at (30 / 680) x the logo width:
        76px  ->  3.4px   unreadable, which is worse than absent
       240px  -> 10.6px   legible on a phone
       300px  -> 13.2px   comfortable
   ⭐ A logo nobody can read is not a logo, it is noise with a shape. */
.soul .seal{
  width:clamp(240px, 64vw, 300px); height:auto; display:block; margin:0 auto 22px;
  filter:drop-shadow(0 0 34px rgba(232,192,122,.26));
}
.soul .soulTitle{
  font-size:clamp(26px,7vw,34px); line-height:1.12; color:#fff;
  font-weight:normal; letter-spacing:.2px; margin-bottom:12px;
}
.soul .soulBody{
  font-size:16.5px; color:var(--ink-soft); max-width:30rem;
  margin:0 auto; line-height:1.62;
}
/* a hairline, so the soul is clearly ABOVE the product rather than part of it */
.soul::after{
  content:''; display:block; width:64px; height:1px; margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
}

/* the mark again at the foot, quieter */
/* ⭐ SMALLER THAN THE TOP, as he asked - but still big enough to be seen.
   At 200px the tagline is ~8.8px, which is small; that is acceptable HERE and
   only here, because the footer prints the same words in real type directly
   underneath it. The logo signs off; the line below it says so out loud. */
footer.foot .seal{
  width:clamp(170px, 46vw, 200px); height:auto; display:block;
  margin:0 auto 14px; opacity:.72;
}
footer.foot .sign{
  margin-top:6px; font-size:11.5px; letter-spacing:.8px; color:var(--ink-soft);
  opacity:.75;
}

/* ═══ WHAT WE ASK vs WHAT THEY SAID ═══════════════════════════════════════
   ⭐ His rule, 2026-09-21: "The question the system asks and the answers the
     user gives must be of a different colour, in order to give importance to
     the user's answers."
   ⭐ THE HIERARCHY RUNS THEIR WAY. Our question is scaffolding — it did its
     job the moment it was read. Their answer is the only thing on the page
     with any content in it, so it gets the bright ink, the serif and the size.
   ⛔ One pair of classes, used everywhere. Styled per-screen they drift, and a
     Pioneer sees their own words treated as important in one place and as
     filler in another. */
.ask{
  font-family:system-ui,sans-serif; font-size:12.5px; letter-spacing:.4px;
  color:var(--ink-soft); opacity:.8; margin:0 0 4px;
}
/* the third question is the product, so its label is the one in gold */
.ask.key{ color:var(--gold); opacity:1; }

.said{
  font-family:Georgia,"Times New Roman",serif; font-size:17.5px;
  color:#fff; line-height:1.55; margin:0 0 16px;
}
.said:last-child{ margin-bottom:0; }
/* nothing written yet — never styled as loudly as something that was */
.said.empty{ color:var(--ink-soft); font-style:italic; font-size:15.5px; }

/* ═══ THE FOUR ROOMS ══════════════════════════════════════════════════════
   ⭐ His instruction, 2026-09-21: "place at the bottom a tab menu that will
     organize everything neatly." The page was 1,672px closed on a phone and
     4,804px with the log open; each room is now one idea.
   ⭐⭐ FOUR, AND IT STAYS FOUR. Reports and Peer Support are going inside
     More, not onto the bar — "the peer-to-peer support system is optional and
     not guaranteed", and a bar that gave them Today's weight would contradict
     the sentence that defines the product.
   ⛔ z-index 40, UNDER the veil's 50. A tab bar may never become somewhere to
     hide from an audit; the interruption is the product. */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:stretch;
  background:rgba(8,11,20,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--edge);
  /* ⭐ the phone's own home-bar strip, so the last tab is not half a bar */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.tabs[hidden]{ display:none; }          /* class beats [hidden] — bitten 4x */
.tabs button{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 2px 8px; min-height:58px;
  background:transparent; border:0; cursor:pointer;
  font-family:system-ui,sans-serif; font-size:11px; letter-spacing:.2px;
  color:var(--ink-soft); opacity:.72;
  border-top:2px solid transparent; margin-top:-1px;
}
.tabs button span{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabs button svg{ width:22px; height:22px; fill:none;
  stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* ⛔ THE ACTIVE ROOM IS NAMED IN COLOUR, NOT IN A BADGE. Nothing here counts
   anything, so nothing here can render an absence. */
.tabs button[aria-current="true"]{
  color:var(--gold); opacity:1; border-top-color:var(--gold);
}
/* the bar sits over the page, so the page ends above it */
body.hasTabs{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ═══ THE SOUL, SIZED TO THE ROOM ═════════════════════════════════════════
   ⭐ "We do not need to have it on top of every room, only the main room. The
     other rooms we can have a smaller logo on the top and on the bottom and a
     much smaller concise soul of the message."
   ⛔ The main room keeps the mark at the size he approved — 240–300px, where
     the mark's own tagline is legible. This is the SECOND size, not a retreat
     to the 76px one he rejected: at 110px the built-in tagline is 4.9px, so
     the small mark is paired with soulShort in real type instead. */
.soul.small{ padding:20px 4px 2px; }
.soul.small .seal{
  /* ⭐ small, but NOTICEABLY the larger of the two - it was inverted (101 under 120) */
  width:clamp(140px, 38vw, 160px); margin:0 auto 12px;
  filter:drop-shadow(0 0 20px rgba(232,192,122,.18));
}
.soul.small .soulShort{
  font-family:system-ui,sans-serif; font-size:13px; line-height:1.5;
  color:var(--ink-soft); max-width:26rem; margin:0 auto; opacity:.9;
}
.soul.small::after{ margin-top:18px; width:44px; }
/* and the foot mark quieter still in the other rooms */
body.roomAway footer.foot .seal{ width:clamp(84px, 24vw, 96px); opacity:.6; }

/* ═══ A ROOM'S OWN HEADING ════════════════════════════════════════════════ */
.roomHead{
  max-width:620px; margin:0 auto 4px; padding:2px 2px 0;
  font-family:system-ui,sans-serif; font-size:12px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--gold-deep);
}

/* ═══ THE AUDIT ON A SMALL PHONE ══════════════════════════════════════════
   ⭐ "Once again make sure the system is optimized for mobile devices — this
     is where our biggest market is at."
   The audit card was 809px tall on a 320x568 phone with 532px to put it in,
   so the two buttons a Pioneer scores themselves with were below the fold.
   ⛔ Everything here is REMOVED spacing, not new rules: desktop padding that
     was never re-thought for a phone. Tap targets stay >= 44px and inputs stay
     at 17px — below 16px iOS Safari zooms the page on focus, which trades one
     mobile fault for a worse one. */
@media (max-height: 760px) {
  .veil .card{ padding:18px 16px; }
  .veil .q{ margin-top:12px; }
  .veil .q b{ font-size:16.5px; margin-bottom:5px; }
  .veil .q.third{ margin-top:12px; padding:12px 12px; }
  .veil textarea{ min-height:72px; }
  .veil label{ margin-top:12px !important; }
}
/* ⛔ AND THIS ONE AT EVERY SIZE: a reply slot that reserves 34px for a
   sentence nobody has written yet. It pushed the scoring buttons down on
   every screen in the product, not only the small ones. */
.saved:empty{ display:none; }

/* ═══ WHERE YOU ARE IN THE AUDIT ══════════════════════════════════════════
   ⭐ Three dots, no words. The eyebrow already says "AUDIT · 2 of 5" (which
     audit of the day); a second "1 of 3" in type beside it would read as a
     contradiction. The dots carry their meaning to a screen reader through
     aria-label instead — pingStepOf, in both languages.
   ⛔ Nothing here counts anything that could be an absence. */
.dots{ display:flex; gap:7px; margin:4px 0 16px; }
.dots i{
  width:7px; height:7px; border-radius:50%;
  background:var(--edge); transition:background .18s;
}
.dots i.on{ background:var(--gold); }

/* ═══ THE AUDIT ON A PHONE HELD SIDEWAYS ══════════════════════════════════
   ⭐ Landscape is the case that matters most: a phone is turned sideways for
     video and scrolling, which is exactly when the Medusa has someone and
     exactly when an audit is worth most.
   ⛔ When there is no room, the STEP DOTS yield first - they are an
     orientation aid. The question, the field and the way out never yield.
   ⛔ Nothing here drops a tap target below 44px or an input below 16px. */
@media (max-height: 420px) {
  /* ⛔⛔ AND THE MARK YIELDS TOO, SIDEWAYS. At clamp(240px,64vw,300px) the soul
     band filled a 360px-tall landscape screen almost completely - the main room
     was one logo and nothing else. He asked for it BIG, and it stays big in
     portrait where he approved it; sideways there is no room to be big in. */
  .soul{ padding:14px 4px 2px; }
  .soul .seal{ width:clamp(110px, 20vw, 140px); margin:0 auto 10px; }
  .soul .soulTitle{ font-size:clamp(19px,4vw,23px); margin-bottom:6px; }
  .soul .soulBody{ font-size:14px; }
  .soul::after{ margin-top:12px; }
  footer.foot .seal{ width:clamp(76px, 12vw, 88px); }
  .veil .dots{ display:none; }
  .veil .card{ padding:12px 14px; }
  /* 52px, not less: still a comfortable tap target, and the browser keeps the
     cursor in view while a Pioneer types past it. */
  .veil textarea{ min-height:52px; }
  .veil .q{ margin-top:8px; }
  .veil .q.third{ margin-top:8px; padding:8px 10px; }
}

/* ═══ MORE THAN ONE THING IN A DAY ════════════════════════════════════════
   ⭐ "Give the user the freedom that if he wants to have more than one thing
     to work on he is able to." Both point at the same NorthStar, so nothing
     here ranks them, numbers them, or scores them apart. */
.planRow{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.planRow input{ flex:1; min-width:0; }
.planRow .x{
  flex:0 0 50px; width:50px; min-height:50px;
  background:transparent; border:1px solid var(--edge); border-radius:11px;
  color:var(--ink-soft); font-size:22px; line-height:1; cursor:pointer;
}
.planRow .x:hover{ border-color:var(--danger); color:var(--danger); }
/* one thing on the list has nothing to remove — the button would be a door
   to nowhere, so it is not drawn at all */
.planList.single .x{ display:none; }

/* the day's things, on the deck */
.planLines{ margin:2px 0 0; padding-left:1.1em; }
.planLines li{ margin:3px 0; }

/* ⭐ WHICH ONE IS THIS — on the audit's FIRST step, never a step of its own.
   ⛔ One tap, never required. Not drawn at all for a single-thing day. */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px; }
.chips button{
  min-height:44px; padding:0 15px; border-radius:22px;
  border:1px solid var(--edge); background:transparent; color:var(--ink-soft);
  font-family:system-ui,sans-serif; font-size:14px; cursor:pointer;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chips button[aria-pressed="true"]{
  border-color:var(--gold); color:var(--gold); background:rgba(232,192,122,.09);
}

/* ═══ A WINDOW FOR EACH THING ═════════════════════════════════════════════
   ⭐ His design, 2026-09-21: "open a window for him to enter ONE thing… once
     he enters it that window may close… he may expand it if he wants to see
     it once again… he may also modify them at any time while he is working on
     them. Once the day is finished and everything is logged he may not modify
     it any more."
   ⛔ A closed thing still shows WHAT it is. Hiding the text behind a fold
     would mean a Pioneer had to open two windows to remember their own day. */
.thing{ border:1px solid var(--edge); border-radius:12px; margin:8px 0;
        background:rgba(5,7,13,.35); }
.thing > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:14px 14px; min-height:52px; font-size:17px; color:#fff;
}
.thing > summary::-webkit-details-marker{ display:none; }
.thing > summary::after{
  content:'▸'; margin-left:auto; color:var(--gold); font-size:15px;
  transition:transform .15s; flex:0 0 auto;
}
.thing[open] > summary::after{ transform:rotate(90deg); }
.thing > summary .txt{ flex:1; min-width:0; }
.thing > summary .txt:empty::before{
  content:attr(data-empty); color:var(--ink-soft); font-style:italic;
}
.thing .inner{ padding:0 14px 14px; }
.thing textarea{ min-height:76px; }
/* ⛔ the frozen day: readable, never editable, and it says why */
.thing.locked > summary{ cursor:pointer; }
.thing.locked > summary::after{ content:'▸'; opacity:.45; }

/* ═══ THE DAY, SPLIT BY THING ═════════════════════════════════════════════
   ⭐ "If the person chooses to work on more than one thing, the system should
     show their log for the same day but separate, depending on the thing they
     did."
   ⛔ A group is only ever drawn when it has audits under it. A heading with
     nothing beneath it is a count of absence wearing a label. */
.groupHead{
  font-family:system-ui,sans-serif; font-size:12px; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--gold-deep);
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--edge);
}
.groupHead.first{ margin-top:4px; padding-top:0; border-top:0; }

/* ═══ THE THINGS NO AUDIT LANDED ON ═══════════════════════════════════════
   ⭐ His rule, 2026-09-21. ⛔ And the REASON travels with the list: the audits
     are random, so a thing they missed is chance, not a verdict. Without that
     line this section is a count of absence; with it, it is a fact about the
     mechanic. */
.groupHead.missed{ color:var(--ink-soft); }
.missedWhy{
  font-family:system-ui,sans-serif; font-size:12.5px; color:var(--ink-soft);
  opacity:.85; margin:4px 0 0;
}
.missedList{ margin:6px 0 0; padding-left:1.1em; }
.missedList li{ margin:3px 0; color:#fff; font-size:16px; }

/* ═══ A DAY IN THE LOG IS A ROW YOU CAN OPEN ══════════════════════════════
   ⛔ THE FAULT THIS FIXES. The day rows were <details>, so they inherited the
     generic "+" marker - which landed jammed against the star count as a bare
     "1/2 stars—", with no spacing and no hint that it was a control at all.
     He said it plainly: "people have no way of knowing that they can expand
     the 1/2 to take a look at their log for that day."
   ⭐ So: a real chevron that TURNS when it opens, given room of its own, and
     the newest day already open so the pattern needs no explaining. */
.logday{ border-top:1px solid var(--line); }
/* ⭐ A CARD, NOT A TABLE ROW. display:block overrides the generic flex
   summary; the chevron is pinned top-right instead of being a flex item. */
.logday > summary{
  display:block; position:relative;
  padding:14px 28px 14px 2px; min-height:56px;
  font-family:system-ui,sans-serif;
}
.logday .row1{ display:flex; align-items:baseline; gap:10px; }
.logday .row1 .s{ margin-left:auto; color:var(--ink-soft); font-size:13.5px; }
.logday .p{ margin-top:6px; font-size:16px; color:#fff; }
.logday .things{ margin:6px 0 0; padding-left:1.1em; font-size:16px; color:#fff; }
.logday .things li{ margin:3px 0; }
.logday > summary::after{
  content:'▸';                     /* ▸ a chevron, not a plus */
  color:var(--gold); font-size:15px; opacity:.9;
  position:absolute; right:4px; top:15px;
  transition:transform .15s ease;
}
/* ⛔⛔ THIS MUST RESTATE content, NOT JUST THE TRANSFORM. The generic rule
   `details[open] summary::after{content:'−'}` scores (0,1,2) - an attribute
   plus two elements - while `.logday > summary::after` scores only (0,1,1).
   So the generic minus WON, and the chevron rendered as a bare "−" jammed
   against the star count. Adding [open] here makes it (0,2,1), which wins.
   ⚠️ THIRD TIME CSS SPECIFICITY HAS BITTEN IN THIS BUILD: .veil[hidden] did
     nothing because a class beat [hidden]; input[type=time] was missing from a
     width rule; and now this. When a style does not apply, count the selector
     before doubting the value. */
.logday[open] > summary::after{
  content:'▸';
  transform:rotate(90deg);
}
.logday > summary .d{ flex:0 0 auto; }
.logday > summary .s{ flex:0 0 auto; white-space:nowrap; }
.logday[open] .row1 .s{ color:var(--gold); }
.logday[open] > summary{ color:var(--gold); }
.logday .inner{ padding:2px 2px 18px; }