/* skin.css — Strangeland, on the Atlas core.
   Lifted token for token from the Strangeland Hub's own skin
   (patch-adams/hub library/skin-strangeland.css): warm ink ground,
   paper text, gold for the live thing, terra for a message passing
   through, sage for growth. Iowan Old Style and Helvetica Neue.
   Only colours and faces live here; the core keeps every shape. */
:root {
  color-scheme: dark;
  --paper: #211f1d;  --card: #2a2723;  --ink: #f5f3ee;  --muted: #b3ada1;  --line: #3b3731;
  --pine: #171513;   --pine-soft: #24211e;  --pine-lift: #26231f;  --pine-deep: #121110;  --pine-ink: #f5f3ee;
  /* gold is the live thing (the seal, the counts, what's yours); terra is
     a message passing through (a proposal waiting); sage stays rare */
  --leaf: #d9bd4e;   --leaf-soft: #3a3220;
  --amber: #e0836a;  --amber-soft: #3d2c26;
  --clay-soft: #3d2c26;
  --note: #2d2925;   --note-warm: #30291f;  --bench: #2a2723;  --map: #262320;  --paper-ruled: #272320;
  --ground: #121110; --gilt: #d9bd4e;
  --pine-ink-rgb: 245 243 238; --leaf-rgb: 217 189 78; --pine-rgb: 245 243 238; --amber-rgb: 224 131 106; --ink-rgb: 245 243 238; --ground-rgb: 18 17 16;
  --serif: "Iowan Old Style", "Palatino Linotype", "Instrument Serif", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* the calendar's colours: activation gold, gathering sage, immersion terra, deadline paper, optional dim */
  --cat-1: #d9bd4e; --cat-1-soft: #3a3220;
  --cat-2: #8fb098; --cat-2-soft: #28332b;
  --cat-3: #e0836a; --cat-3-soft: #3d2c26;
  --cat-4: #f5f3ee; --cat-4-soft: #3b3731;
  --cat-5: #b3ada1; --cat-5-soft: #2d2925;
}
/* the dusk rules the core applies by choice, applied here by default */
body { background: var(--paper); }
.callout { background: var(--amber-soft); border-color: rgba(224,131,106,0.25); color: var(--ink); }
.msg.theirs { background: var(--card); border-color: var(--line); color: var(--ink); }
.msg.ask { background: var(--amber-soft); border-color: rgba(224,131,106,0.4); color: var(--ink); }
.msg.ask.mark { background: var(--leaf-soft); border-color: rgba(217,189,78,0.4); }
.msg.theirs.room { background: var(--leaf-soft); color: var(--ink); }
.now-strip, .overlap-signals, .me-row-card { background: var(--leaf-soft); border-color: rgba(217,189,78,0.3); }
.now-chip { background: var(--card); color: var(--ink); }
.keeper-strip input, .entry-form input, .entry-form select, .entry-form textarea, .me-row input, .me-row select, .note-form textarea, .receipt-form input, .receipt-form select, .checkin-form input, .checkin-form select { background: var(--pine-soft); color: var(--ink); border-color: var(--line); }
.seal-hint { background: var(--card); color: var(--ink); }
.seal-hint::after { border-top-color: var(--card); }
.gate-card, .tour-card, .modal { background: var(--card); color: var(--ink); }

/* no green glows on Strangeland's ink: the door, the first marks and the hero are flat glass */
.gate { background: var(--ground); }
.onboard-gate { background: rgb(var(--ground-rgb) / .95); }
.hero, #view-week .hero { background: var(--pine); border: 1px solid var(--line); }
.arrival-gate { background: var(--ground); }

/* ---- the brand treatment on the Gathering layout (docs/brand in hub-atlas): the photograph
   under a dark wash, gold for the live thing, terra for a message passing through. The one
   gradient here is the wash. Same rooms, same structure; only the surface changes. ---- */
html { background: #211f1d; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=70&w=1600&auto=format&fit=crop") center 30% / cover no-repeat; opacity: .62; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(33,31,29,.55) 0%, rgba(33,31,29,.76) 50%, rgba(33,31,29,.84) 100%); pointer-events: none; }
.app-shell, .workspace { background: transparent; }
.sidebar, .tab-bar, .mast-band { background: rgba(23,21,19,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.gate, .arrival-gate { background: rgba(18,17,16,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero, #view-week .hero { background: rgba(24,22,20,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ============================================================
   THE FIRST STRANGELAND, on the Gathering structure (Oct 4, evening).
   The look from the start of the project (the usalproject teardown,
   builds/today/public/patch.css in the strangeland repo), token for token:
   bold Helvetica for the one display moment, Helvetica for what you read,
   a mono in small tracked caps for gauges and labels (the live one gold),
   labels carrying a hairline out to the edge, glass plates on the
   photograph, pills whose dot carries meaning (outline idle, filled on).
   Tracked caps are a deliberate exception: uppercase micro type needs it.
   Nothing structural changes.
   ============================================================ */
:root {
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  --dim: rgba(245,243,238,.58);
  --hair: rgba(245,243,238,.12);
  --glass: rgba(24,22,20,.58);
  --glass-line: rgba(245,243,238,.2);
  --radius: 16px; --tile: 14px;
}
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body::before { opacity: .5; background-position: center 18%; }
body::after { background: linear-gradient(to bottom, rgba(33,31,29,.55) 0%, rgba(33,31,29,.82) 46%, rgba(33,31,29,.94) 88%); }

/* ---- the small words: mono, tracked caps, quiet; the label carries a hairline to the edge ---- */
.eyebrow, .story-eyebrow, .section-eyebrow, .nav-section, .side-block-eyebrow, .plan-kind, .plan-cat, .plan-by, .plan-in-label,
.log-chip, .log-meta, .field, .field-opt, .form-status, .signal-label, .wk-sub, .rail-count-sub, .side-count-sub, .side-block-label,
.day-chip span, .onboard-meter, .onboard-field-label, .ledger-index, .ledger-when, .ledger-tag, .me-dial span, .plan-stat span,
.dispatch-strip span, .fill-head span, .gate .eyebrow, .nc-kick, .nc-gauges i, .nc-day span, .mg-dow, .wk-ask-kicker,
.plan-day-head span, .ledger-board-head span, .open-status-item span, .person-fact small, [class*="kicker"] {
  font-family: var(--mono) !important; text-transform: uppercase !important; letter-spacing: .13em !important; font-weight: 400 !important;
}
.eyebrow, .story-eyebrow, .section-eyebrow, .nav-section, .side-block-eyebrow, .nc-kick { font-size: 11px; color: var(--dim); }
.section-eyebrow, .nc-kick, .side-block-eyebrow { display: flex; align-items: center; gap: 12px; }
.section-eyebrow::after, .nc-kick::after, .side-block-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.soft-note, .look-note, .field-note, .seal-hint, small, .checkin-empty, .map-empty p, .ledger-empty, .plan-empty, .workbench-empty p, .nc-none {
  font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--dim);
}

/* ---- display: bold Helvetica, tight, one moment per page ---- */
.chapter-title, .hero-title, h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
.chapter-title { font-size: 40px; line-height: .98; }
.story p, .gate-sub, .modal-body { font-size: 17px; line-height: 1.55; }
.story-eyebrow, .view > .story-eyebrow { display: none !important; }

/* a room's name sits on its own plate, its key beside it */
.chapter-title.has-key, #view-gathering .chapter-title, #view-timeline .chapter-title, #view-expectations .chapter-title,
#view-open .chapter-title, #view-reference .chapter-title, #view-ask .chapter-title, #view-me .chapter-title {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
  padding: 22px 22px 20px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); margin-bottom: 22px;
}

/* ---- the pill: the dot carries meaning. Outline = idle, filled = on. Active goes square. ---- */
.room-key, .nc-act, .plan-join, .fchip, .plan-cat-chip, .who-chip, .signal-status, .help-btn, .crumb, .onboard-back {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1;
  min-height: 36px; padding: 0 14px !important; border-radius: 999px !important;
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--glass-line) !important; box-shadow: none !important;
  transition: border-radius .15s ease-out, border-color .15s ease-out;
}
.room-key::before, .nc-act::before, .plan-join::before, .fchip::before, .plan-cat-chip::before, .who-chip::before, .crumb::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; flex: none;
}
.room-key:active, .nc-act:active, .plan-join:active, .fchip:active, .plan-cat-chip:active { border-radius: 4px !important; transform: none; }
.fchip.is-on, .plan-cat-chip.is-on, .plan-join.is-on, .who-chip { border-color: rgba(245,243,238,.55) !important; }
.fchip.is-on::before, .plan-cat-chip.is-on::before, .plan-join.is-on::before, .who-chip::before { background: currentColor; }
.who-chip { color: var(--leaf) !important; }
.room-key .rk-verb, .nc-act .rk-verb { opacity: .6; margin-right: 2px; font-family: inherit !important; font-size: inherit !important; }
.room-key .rk-obj, .nc-act .rk-obj { font-family: inherit; }
.signal-status { min-height: 30px; padding: 0 12px !important; color: var(--dim) !important; }
.signal-status .signal-label { font-size: 10px; letter-spacing: .12em; }
.help-btn { width: 30px; min-height: 30px; padding: 0 !important; justify-content: center; }
.crumb::before { display: none; }

/* the commit: a gold pill with a dark dot */
.entry-form button[type="submit"], .gate-row button, .checkin-form button, .me-row-acts button, .note-acts button, .onboard-actions button[type="submit"],
.receipt-form button, .btn-solid, #askSend, .bar-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans) !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  border-radius: 999px !important; background: #d9bd4e !important; color: #211f1d !important; border: 0 !important; box-shadow: none !important;
  min-height: 44px; padding-left: 22px !important; padding-right: 22px !important;
}
.entry-form button[type="submit"]::before, .gate-row button::before, .me-row-acts button::before, .note-acts button::before,
.onboard-actions button[type="submit"]::before, .receipt-form button::before, .checkin-form button::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #211f1d; flex: none;
}

/* gold underline on a linked phrase in running text; mono caps doors with an arrow */
.story a, .callout a, .field-note-links a, .soft-note a, .look-note a {
  font-family: inherit !important; color: var(--ink) !important; background: none !important; border: 0 !important;
  text-decoration: underline !important; text-decoration-color: var(--leaf) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 5px;
}
.rail-link, .plan-empty-go, .fix-link, .nc-door, .me-go, .plan-date-btn, .plan-remove, .keep-btn, .who-nevermind, #onboardSkip, .mg-shelf {
  font-family: var(--mono) !important; text-transform: uppercase !important; letter-spacing: .12em !important; font-size: 11px !important;
  color: var(--leaf) !important; text-decoration: none !important; background: none !important; border: 0 !important;
}

/* ---- glass plates: every block on the photograph gets its own darkened ground ---- */
.plan-card, .ledger-row, .prod-item, .pin, .open-item, .me-card, .role-card, .contact, .log-row, .fb-row, .expect-item, .anchor,
.tl-item, .ref-notes, .entry-form, .me-row, .note-form, .receipt-form, .fill-card, .seen-card, .admin-tips, .field-notes {
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; border-radius: var(--tile) !important;
  box-shadow: none !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.callout, .callout--pending { background: rgba(61,44,38,.7) !important; border: 1px solid rgba(224,131,106,.3) !important; border-radius: var(--tile) !important; }
/* stat tiles: a big bold number over a mono caps label */
.dispatch-strip, .plan-status, .workbench-status, .me-tally, .open-status { background: none !important; border: 0 !important; box-shadow: none !important; gap: 10px !important; }
.me-dial, .plan-stat, .open-status-item, .dispatch-strip > div {
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; border-radius: var(--tile) !important; padding: 14px 16px !important;
}
.dispatch-strip strong, .plan-stat strong, .me-dial strong, .fill-head strong, .open-status-item strong, .rail-count, .side-count strong {
  font-family: var(--sans) !important; font-weight: 700 !important; font-size: 30px; letter-spacing: -.02em; line-height: 1;
}
.me-dial span, .plan-stat span, .open-status-item span { font-size: 10px !important; color: var(--dim); }

/* fields */
input, select, textarea { font-family: var(--sans) !important; font-size: 16px !important; border-radius: 8px !important; }
.keeper-strip input, .entry-form input, .entry-form select, .entry-form textarea, .me-row input, .me-row select, .note-form textarea,
.receipt-form input, .receipt-form select, .checkin-form input, .checkin-form select { background: rgba(245,243,238,.045); border-color: var(--glass-line); }

/* the door and the layers */
.gate-card, .tour-card, .modal, .arrival-card { background: rgba(26,24,22,.92) !important; border: 1px solid var(--glass-line); box-shadow: none !important; border-radius: var(--radius) !important; }
.gate-card h1 { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.layer-card { background: rgba(30,28,25,.97); }
.layer-card h2 { font-weight: 700; letter-spacing: -.02em; }

/* ---- the wordmark: ( Strangeland ), bold Helvetica, no tile ---- */
.brand, .mast-brand { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: .01em; }
.brand-mark { display: none !important; }

/* ---- the bar: words, the one you're in bold; the seal a gold disc ---- */
.tab-bar { background: rgba(26,24,22,.94); border-top: 1px solid var(--hair); }
.tab-bar svg { display: none; }
.tab-bar a { opacity: .6; }
.tab-bar a span { font-family: var(--sans) !important; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.tab-bar a.is-current { opacity: 1; }
.tab-bar a.is-current span { font-weight: 700; }
.tab-seal-slot > span { display: none; }
.tab-bar .tab-badge, .tab-bar .nav-count { display: none !important; }
#barSummon.seal { background: #d9bd4e; border: 0; box-shadow: 0 0 0 6px rgba(26,24,22,.94), 0 8px 22px rgba(0,0,0,.45); color: #211f1d; }
#barSummon.seal svg { display: none; }
#barSummon.seal::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #211f1d; display: block; }
#barSummon.seal::after { display: none; }

/* ---- the menu on a desk: words, a dot before each, filled for the one you're in ---- */
.sidebar { background: rgba(24,22,20,.72); }
.side-nav a { font-family: var(--sans); font-size: 15px; opacity: .66; background: none !important; border-radius: 0; box-shadow: none !important; display: flex; align-items: center; gap: 10px; }
.side-nav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.side-nav a.is-current { opacity: 1; font-weight: 700; }
.side-nav a.is-current::before { background: var(--leaf); border-color: var(--leaf); }

/* ---- Now: the greeting plate, the week, what's next, the acts and the doors ---- */
.nc-date { display: none; }
.nc-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
  padding: 24px 22px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nc-greet { margin: 0; font-size: 46px; line-height: .96; font-weight: 700; letter-spacing: -.025em; min-width: 0; }
.nc-gauges { margin: 4px 0 0; display: grid; justify-items: end; gap: 9px; text-align: right; flex: none; }
.nc-gauges i { font-style: normal; font-size: 11px; color: var(--dim); }
.nc-gauges i:first-child { color: var(--leaf); }
.nc-week { border-bottom: 0; padding-bottom: 0; }
.nc-day span { font-size: 10px; color: var(--dim); }
.nc-day b { font-family: var(--sans) !important; font-weight: 700; }
.nc-day.is-today b { background: var(--ink); color: #211f1d; }
.nc-rows { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--tile); padding: 0 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nc-row { font-size: 17px; border-top-color: var(--hair); }
.nc-row b { font-family: var(--mono) !important; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); }
.nc-act { flex: 0 1 auto; }
.nc-doors { border-top: 0; padding-top: 0; gap: 2px 22px; }
.nc-kick { margin: 6px 0 0; }

/* a room opens on the thing, not on a paragraph about the thing */
#view-coming > .story, #view-city > .story, #view-plans > .story, #view-production > .story, #view-plans .plan-status { display: none !important; }
#prodStatus { display: none !important; }
.workbench-empty, .ledger-empty, .plan-empty { background: var(--glass) !important; border: 1px solid var(--glass-line) !important; border-radius: var(--tile) !important; padding: 18px !important; text-align: left !important; box-shadow: none !important; }
.workbench-empty p { margin: 0; }
#view-reference .section-eyebrow:has(+ #linkList:empty), #linkList:empty { display: none; }

/* the month: mono numerals on glass */
.mg-day { background: var(--glass); border-color: var(--hair); }
.mg-day b { font-family: var(--sans) !important; font-weight: 700; }
.mg-day.is-on { color: #211f1d; }
.plan-day-head strong { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }

/* ============ phone ============ */
@media (max-width: 900px) {
  /* one masthead: the wordmark left, the status pills right, in one row */
  .sidebar { background: rgba(24,22,20,.78); padding: 0 16px; min-height: 56px; padding-top: env(safe-area-inset-top, 0px); }
  .brand { font-size: 17px; }
  .workspace { padding-top: 16px; }
  .workspace-head { height: 0; min-height: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: visible; }
  .workspace-head > .eyebrow, .workspace-head > .crumb { display: none !important; }
  .head-tools { position: fixed; z-index: 12; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 12px); display: flex; gap: 6px; }
  .chapter-title { font-size: 36px; }
  .chapter-title.has-key, #view-gathering .chapter-title, #view-timeline .chapter-title, #view-expectations .chapter-title,
  #view-open .chapter-title, #view-reference .chapter-title, #view-ask .chapter-title, #view-me .chapter-title { padding: 18px; margin-bottom: 16px; }
  .nc-greet { font-size: 42px; }
  .nc-hero { padding: 20px 18px; }
  /* the seal and the bar never sit on the last thing: room for both, and some air */
  body.flow-into .workspace { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
}

/* a hidden key stays hidden (the pill rule above sets display) */
.room-key[hidden], .who-chip[hidden], .help-btn[hidden], .crumb[hidden], .signal-status[hidden], .nc-act[hidden] { display: none !important; }
/* the acts wrap rather than run off the edge */
.nc-acts { flex-wrap: wrap !important; }
/* Places, empty: a short map with the one thing to do inside it */
.map-empty-go { margin-top: 12px; border: 0; background: none; padding: 8px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); cursor: pointer; }
.map-empty .map-crosshair { display: none; }
#view-city .pin-list.is-empty { min-height: 200px; background-color: var(--glass); border-color: var(--glass-line); }
@media (max-width: 900px) {
  /* the calendar's colours: one row above the month, scrolled sideways */
  body.flow-into #view-plans .plan-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 0 18px; }
  body.flow-into #view-plans .plan-cats::-webkit-scrollbar { display: none; }
  body.flow-into #view-plans .plan-cat-chip { flex: none; }
  #view-city .pin-list.is-empty { min-height: 170px; }
}

/* the menu reads from the left: dot, word, and a count pushed to the end */
.side-nav a { justify-content: flex-start !important; }
.side-nav a .nav-count { margin-left: auto; font-family: var(--mono); font-weight: 400; background: rgba(224,131,106,.85); }

@media (min-width: 1160px) {
  /* the greeting plate spans the room; the one display moment is big */
  body.flow-into .nc-hero { grid-column: 1 / -1; padding: 34px 36px; }
  .nc-greet { font-size: 88px; }
  .nc-gauges { gap: 12px; margin-top: 10px; }
  .nc-gauges i, .eyebrow, .section-eyebrow, .nc-kick, .nav-section { font-size: 12px; }
  body.flow-into .nc-day { background: var(--glass); border-color: var(--glass-line); }
  .chapter-title { font-size: 52px; }
  .room-key, .nc-act, .plan-join, .fchip, .plan-cat-chip, .who-chip, .signal-status, .crumb { font-size: 12px !important; }
}
@media (max-width: 900px) {
  /* the three acts on one row at 393 */
  .nc-act { font-size: 10px !important; letter-spacing: .06em; padding: 0 9px !important; gap: 6px; }
  .now-compact { gap: 12px; }
}

/* the arrival speaks in the display face too */
.arrival-hello { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.025em; }
.arrival-skip { font-family: var(--mono) !important; letter-spacing: .12em; }
.gate-card .eyebrow { color: var(--leaf); }

/* ============================================================
   Oct 4, night: Mike's second pass.
   ============================================================ */
:root { --cat-6: #9fb4c7; --cat-6-soft: #26303a; }

/* the bottom bar carries icons again: line icons over the word */
.tab-bar svg { display: block !important; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 3px; }
.tab-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tab-bar a span { font-size: 12px !important; }
.tab-bar a.is-current svg { stroke: var(--leaf); }

/* a form inside a plate is not another plate (the doubled border cut through the labels) */
.me-card .me-row, .me-card .note-form, .me-card .receipt-form, .layer-card .entry-form, .layer-card .checkin-form, .layer-card form,
.me-row-card .me-row { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* blur only on the plate that touches the photograph, never nested */
.me-card .me-card, .me-card .plan-card, .layer-card .plan-card, .nc-rows .nc-row { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.me-row .field, .receipt-form .field { gap: 8px; }

/* the tutorial: a gold ring on the thing, the room dimmed around it, the card out of the way */
#tourGate.has-spot { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; align-items: end; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
#tourGate.has-spot.spot-top { align-items: start; padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: 0; }
.tour-ring { position: fixed; z-index: 0; border: 2px solid #d9bd4e; box-shadow: 0 0 0 9999px rgba(14,13,12,.74); pointer-events: none; transition: left .32s ease-out, top .32s ease-out, width .32s ease-out, height .32s ease-out; }
.tour-ring[hidden] { display: none; }
#tourGate .tour-card { position: relative; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
#tourGate .tour-card h1 { font-size: 30px; }
.tour-acts .tour-next { background: #d9bd4e !important; color: #211f1d !important; border-radius: 999px !important; min-height: 44px; font-family: var(--sans) !important; font-weight: 500; }
#tourStep { color: var(--leaf); }

/* the first marks: one card at a time, no crosshair, no rings; swipe left to go on */
.onboard-mark, .arrival-card::after, .arrival-card::before { display: none !important; }
#onboardForm { touch-action: pan-y; }
#onboardForm::after { content: "swipe left to go on"; display: block; margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* the arrival lingers: the photograph, the greeting rising slowly, then the line, then the day */
.arrival-gate { background: rgba(20,18,16,.84) !important; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transition: opacity 1.3s ease-out !important; }
.arrival-gate::before, .arrival-gate::after, .arrival-symbol { display: none !important; }
.arrival-beat { text-align: left; max-width: 900px; width: 100%; padding: 0 28px; }
.arrival-hello { font-size: clamp(56px, 13vw, 128px) !important; line-height: .92; letter-spacing: -.035em !important; transform: translateY(26px); transition: opacity 1.6s ease-out .25s, transform 2.4s var(--ease-out) .25s !important; }
.arrival-line { margin: 22px 0 0 !important; font-family: var(--sans) !important; font-size: clamp(19px, 3vw, 26px) !important; transition: opacity 1.4s ease-out, transform 1.8s ease-out !important; }
.arrival-more { margin: 26px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); opacity: 0; transform: translateY(8px); transition: opacity 1.4s ease-out, transform 1.8s ease-out; }
.arrival-gate.show-more .arrival-more { opacity: 1; transform: none; }
.arrival-gate.is-leaving .arrival-beat { transform: translateY(-14px); transition: transform 1.3s ease-in; }

/* Still Open: every item opens */
.open-item[role="button"] { cursor: pointer; transition: border-color .15s ease-out; }
.open-item[role="button"]:active { border-color: rgba(217,189,78,.6) !important; }
.open-source, .open-item .open-source { margin: 8px 0 0 !important; font-family: var(--mono) !important; font-size: 10px !important; line-height: 1.5 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.open-detail p { font-size: 17px; line-height: 1.55; margin: 0 0 12px; }
.open-talk { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #d9bd4e; color: #211f1d; font: 500 16px var(--sans); cursor: pointer; }
.open-talk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #211f1d; }
#view-open .open-flag, #view-open .open-index { display: none; }
#whoError { margin-top: 10px; }
.onboard-gate::before, .onboard-gate::after, .gate::before, .gate::after { display: none !important; }
.who-or:has(+ .who-grid:empty) { display: none; }

/* ============================================================
   Oct 4, late: the gold button opens three choices; a bigger chat; rooms arrive.
   ============================================================ */
/* the button presses in */
#barSummon.seal { transition: transform .16s ease-out, box-shadow .16s ease-out; }
#barSummon.seal.is-pressed { transform: translateX(-50%) scale(.9); }
#barSummon.seal.is-pressed::before { transform: scale(.6); }
#barSummon.seal::before { transition: transform .16s ease-out; }
@media (min-width: 1160px) { #barSummon.seal.is-pressed { transform: scale(.9); } }

/* the three choices fan up out of it */
.seal-menu { position: fixed; inset: 0; z-index: 290; background: rgba(14,13,12,0); transition: background .2s ease-out; }
.seal-menu[hidden] { display: none; }
.seal-menu.is-open { background: rgba(14,13,12,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.seal-opt { position: absolute; left: var(--sx); top: var(--sy); width: 72px; margin: -36px 0 0 -36px; display: grid; justify-items: center; gap: 7px;
  border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; opacity: 0; transform: translate(0, 0) scale(.4);
  transition: transform .24s var(--ease-out, ease-out), opacity .18s ease-out; }
.seal-opt svg { width: 56px; height: 56px; padding: 15px; box-sizing: border-box; border-radius: 50%; background: rgba(36,33,29,.96); border: 1px solid rgba(245,243,238,.28);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.seal-opt--add svg { background: #d9bd4e; color: #211f1d; border-color: transparent; stroke: #211f1d; }
.seal-opt span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.seal-opt:active svg { transform: scale(.94); }
.seal-menu.is-open .seal-opt { opacity: 1; }
.seal-menu.is-open .seal-opt--add { transform: translate(-104px, -96px); transition-delay: 0s; }
.seal-menu.is-open .seal-opt--record { transform: translate(0, -142px); transition-delay: .03s; }
.seal-menu.is-open .seal-opt--chat { transform: translate(104px, -96px); transition-delay: .06s; }
.seal-menu.is-corner.is-open .seal-opt--add { transform: translate(-130px, -10px); }
.seal-menu.is-corner.is-open .seal-opt--record { transform: translate(-100px, -100px); }
.seal-menu.is-corner.is-open .seal-opt--chat { transform: translate(-10px, -134px); }
body.seal-open #barSummon { z-index: 300; }

/* the add list */
.add-list { display: grid; }
.add-item { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 2px; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); font: 400 18px var(--sans); text-align: left; cursor: pointer; }
.add-item:first-child { border-top: 0; }
.add-item span { color: var(--leaf); font-family: var(--mono); }
.add-item:active { color: var(--leaf); }

/* the chat: a real sheet, not a box */
body.chatting #bar { position: fixed !important; left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
  width: auto !important; max-width: none !important; transform: none !important; opacity: 1 !important; z-index: 280;
  background: rgba(28,26,23,.97) !important; border: 1px solid var(--glass-line) !important; border-radius: 20px !important; padding: 14px 14px 12px !important;
  animation: chatUp .26s var(--ease-out, ease-out); }
body.chatting #stack { flex: 1 1 auto; max-height: none !important; overflow-y: auto; margin-bottom: 10px; }
.bar-title { font-family: var(--mono) !important; }
#stack .msg { font-size: 17px; line-height: 1.5; }
@media (min-width: 1160px) {
  body.chatting #bar { left: auto !important; right: 20px !important; top: 20px !important; bottom: 20px !important; width: 480px !important; }
}
@keyframes chatUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* a room arrives: a short rise, no fade-ins inside it */
.view.is-active { animation: roomIn .22s ease-out; }
@keyframes roomIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .view.is-active, body.chatting #bar { animation: none; }
  .seal-opt { transition: opacity .1s; }
}

/* the old double-tap hint is gone with the menu */
.seal-hint { display: none !important; }

/* ============================================================
   The calendar you can read: titles on the days, a day opens, a thing opens.
   No double-tap zoom anywhere (pinch still works).
   ============================================================ */
html, body, button, a { touch-action: manipulation; }

/* the month: each day carries its things, in their colours */
.mg-day { min-height: 64px; display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; padding: 5px 4px !important; text-align: left; overflow: hidden; }
.mg-day b { font-size: 13px; line-height: 1; padding-left: 2px; }
.mg-day > span { display: grid !important; gap: 2px; width: 100%; min-width: 0; }
.mg-day > span i { display: block !important; width: auto !important; height: auto !important; min-height: 13px; border-radius: 3px !important; padding: 1px 3px; opacity: 1; }
.mg-day > span i em { display: block; font-style: normal; font: 600 9px/1.25 var(--sans); color: #1b1916; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.mg-day > span u { text-decoration: none; font: 500 9px var(--mono); color: var(--dim); padding-left: 2px; }
@media (min-width: 1160px) {
  .mg-day { min-height: 84px; aspect-ratio: auto !important; }
  .mg-day > span i em { font-size: 11px; }
  .mg-day b { font-size: 14px; }
}

/* the day layer */
.day-detail { display: grid; }
.dd-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 2px; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.dd-row:first-child { border-top: 0; }
.dd-row i { width: 10px; height: 10px; border-radius: 3px; }
.dd-row b { display: block; font: 500 18px/1.3 var(--sans); }
.dd-row em { display: block; font-style: normal; font: 400 14px var(--sans); color: var(--dim); margin-top: 2px; }
.dd-row s { text-decoration: none; color: var(--leaf); font-family: var(--mono); }
.dd-none { color: var(--dim); font-size: 16px; margin: 4px 0 8px; }
.dd-add { margin-top: 10px; min-height: 48px; border: 0; background: none; text-align: left; padding: 0 2px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); cursor: pointer; }

/* one thing, all of it */
.plan-detail { display: grid; gap: 10px; }
.pd-kind { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pd-kind::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.pd-when { margin: 0; font: 500 19px/1.35 var(--sans); }
.pd-place { margin: 0; font: 400 17px var(--sans); color: var(--ink); }
.pd-note { margin: 0; font: 400 16px/1.55 var(--sans); color: rgba(245,243,238,.8); }
.pd-who { margin: 0; font: 400 13px var(--sans); color: var(--dim); }
.pd-acts { display: grid; gap: 10px; margin-top: 8px; }
.pd-join { min-height: 48px; border-radius: 999px; border: 0; background: #d9bd4e; color: #211f1d; font: 500 17px var(--sans); cursor: pointer; }
.pd-join.is-on { background: transparent; color: var(--leaf); border: 1px solid rgba(217,189,78,.6); }
.pd-cal { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; border: 1px solid var(--glass-line); color: var(--ink); text-decoration: none; font: 400 15px var(--sans); }
.plan-card.is-openable { cursor: pointer; }

/* nothing scrolls sideways, ever; a sheet scrolls itself and never the page behind it */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
#layer, .layer-card, #layerBody, body.chatting #bar, #stack { overflow-x: hidden; overscroll-behavior: contain; }
.layer-card, #layerBody, #stack { touch-action: pan-y; }
.layer-card input, .layer-card select, .layer-card textarea, .layer-card .field, .layer-card .field-row > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.layer-card input[type="date"], .layer-card input[type="time"] { -webkit-appearance: none; appearance: none; width: 100%; display: block; }
.layer-card .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 420px) { .layer-card .field-row { grid-template-columns: minmax(0, 1fr); } }
/* a sheet is solid; what's behind it is dimmed, not read through */
.layer-card { background: #1f1d1a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.layer-scrim { background: rgba(10,9,8,.72) !important; }
/* a day is as wide as its column, whatever its height */
.mg-day { aspect-ratio: auto !important; width: auto !important; min-width: 0 !important; }

/* four choices away from Now: Add, Record, Chat, Now */
.seal-opt[hidden] { display: none !important; }
.seal-menu.has-now.is-open .seal-opt--add { transform: translate(-126px, -66px); }
.seal-menu.has-now.is-open .seal-opt--record { transform: translate(-46px, -138px); }
.seal-menu.has-now.is-open .seal-opt--chat { transform: translate(46px, -138px); }
.seal-menu.has-now.is-open .seal-opt--now { transform: translate(126px, -66px); transition-delay: .09s; }
.seal-menu.is-corner.has-now.is-open .seal-opt--add { transform: translate(-140px, 0); }
.seal-menu.is-corner.has-now.is-open .seal-opt--record { transform: translate(-124px, -92px); }
.seal-menu.is-corner.has-now.is-open .seal-opt--chat { transform: translate(-58px, -152px); }
.seal-menu.is-corner.has-now.is-open .seal-opt--now { transform: translate(18px, -170px); }

/* plain fields: no hint lines under forms (the receipts line stays: it's a fact) */
.ask-hint:not(#receiptsHint) { display: none !important; }
.onboard-hint:empty, #onboardSub:empty { display: none; }
.gate .eyebrow:empty { display: none; }

/* the first questions: the card scrolls inside its gate, so Continue is always reachable with the keyboard up */
#onboardGate { overflow-y: auto !important; -webkit-overflow-scrolling: touch; align-items: start !important; place-items: start center !important;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 24px) !important; }
#onboardForm { max-height: none !important; overflow: visible !important; height: auto !important; margin: 0 auto !important; }
#onboardForm::after { display: none; }
@media (max-width: 600px) {
  #onboardTitle { font-size: 30px !important; line-height: 1.06 !important; margin-bottom: 8px; }
  #onboardForm { padding: 20px 18px !important; }
}
/* the progress reads at a glance */
#onboardStep { color: var(--leaf) !important; font-size: 12px !important; }
.onboard-track { height: 3px !important; background: rgba(245,243,238,.14) !important; border-radius: 2px; }
#onboardProgress { background: #d9bd4e !important; border-radius: 2px; }

/* the tutorial holds the page still: nothing under it moves */
#tourGate { touch-action: none; overscroll-behavior: none; }