/* PocketSpace — blue on black.
   Deliberately single-theme: this app is a dark instrument with one signal
   colour, so there is no light palette to fall back to. Everything paints its
   own background explicitly rather than inheriting the host's. */

:root {
  --ts: 1.15;           /* text scale: every font-size is multiplied by this */
  color-scheme: dark;

  --bg:         #000000;
  --surface:    #131316;
  --surface-2:  #1B1B20;
  --surface-3:  #24242C;
  --line:       #2C2C35;
  --line-soft:  #1F1F26;

  --ink:        #F6F6F3;
  --ink-2:      #9C9CA6;
  --ink-3:      #83838C;

  /* The signal colour: the front page's gradient on filled surfaces, its
     violet-blue midpoint wherever a flat colour is needed. The token keeps
     its old name so every rule below (and every theme that overrides it)
     still lines up. Settings → Theme → Night colour swaps these at runtime. */
  --yellow:     #8074FF;
  --yellow-hi:  #ACA5FF;
  --yellow-dim: #4D4699;
  --yellow-ghost: rgba(128, 116, 255, 0.12);
  --yellow-edge:  rgba(128, 116, 255, 0.35);
  --accent-fill: linear-gradient(135deg, #4F8DFF 0%, #B15CFF 45%, #F8515F 100%);
  --accent-ink:  #FFFFFF;
  --night-accent: var(--accent-fill);

  /* Semantic, kept away from the brand hue so "warning" never reads as chrome. */
  --go:    #4ADE80;
  --warn:  #FB923C;
  --stop:  #F87171;
  --info:  #60A5FA;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --tap: 44px;
  --rail: 236px;
  --shell: 1180px;

  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: calc(15px * var(--ts));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Room for Android's status bar and gesture pill. */
body {
  padding-top: env(safe-area-inset-top);
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* The page areas take focus from script after navigation; they are not controls, so no ring. */
#view:focus, #view2:focus, #view:focus-visible, #view2:focus-visible { outline: none; }

.ico { display: block; flex: none; }

/* ============================================================ shell ==== */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
}

/* ---- rail (desktop) ---- */

.rail { display: none; }
.drawer-scrim { display: none; }

/*
 * On phones the rail becomes a drawer: swipe right from the left edge and it
 * follows the finger; let go past halfway (or with a flick) and it opens.
 * app.js wireDrawer() sets the classes and, while dragging, inline transforms.
 */
@media (max-width: 899.98px) {
  .rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 56;
    width: min(84vw, 320px);
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(calc(-100% - 2px));
    visibility: hidden;
    transition: transform 0.26s var(--ease), visibility 0s linear 0.26s, box-shadow 0.26s var(--ease);
  }
  .drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s var(--ease);
  }
  html.drawer-open .rail {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.45);
    transition: transform 0.26s var(--ease), visibility 0s, box-shadow 0.26s var(--ease);
  }
  html.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  html.drawer-dragging .rail { visibility: visible; transition: none; }
  html.drawer-dragging .drawer-scrim { transition: none; }
  html.drawer-open body, html.drawer-dragging body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .drawer-scrim { transition-duration: 0s !important; }
}

@media (min-width: 900px) {
  .shell { grid-template-columns: var(--rail) 1fr; }

  .rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 14px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 22px;
}
/* The name block in the rail is also the way back to the front page. */
.brand-link { color: inherit; text-decoration: none; border-radius: var(--r-md); }
.brand-link:hover .brand-name { color: var(--yellow); }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--yellow);
  color: #0A0A0B;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: calc(17px * var(--ts));
  letter-spacing: -0.03em;
  flex: none;
}

.brand-name {
  font-size: calc(16px * var(--ts));
  font-weight: 650;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--ts));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.rail-link:hover { background: var(--surface-2); color: var(--ink); }

.rail-link[aria-current="page"] {
  background: var(--yellow-ghost);
  border-color: var(--yellow-edge);
  color: var(--yellow);
  font-weight: 600;
}

.rail-badge {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--yellow);
  color: #0A0A0B;
  font-size: calc(11.5px * var(--ts));
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.rail-badge[data-zero="1"] { background: var(--surface-3); color: var(--ink-3); }

.rail-foot {
  margin-top: auto;
  padding: 14px 12px 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--ts));
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ---- top bar (mobile) ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  min-height: 58px;
}

@media (min-width: 900px) {
  .topbar { background: var(--bg); }
}

#topbar-title { min-width: 0; flex: 1; }

.topbar h1 {
  margin: 0;
  font-size: calc(19px * var(--ts));
  font-weight: 650;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .sub {
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--ts));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }

/* ---- content ---- */

main {
  padding: 18px 16px calc(96px + env(safe-area-inset-bottom));
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 900px) {
  main { padding: 26px 32px 60px; }
}

.stack { display: flex; flex-direction: column; gap: 26px; }
.stack-tight { display: flex; flex-direction: column; gap: 12px; }

/* ---- bottom tabs (mobile) ---- */

.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) { .tabs { display: none; } }

.tab {
  background: none;
  border: 0;
  padding: 7px 2px 5px;
  border-radius: var(--r-md);
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: calc(10.5px * var(--ts));
  font-weight: 500;
  cursor: pointer;
  position: relative;
  min-height: var(--tap);
}

.tab[aria-current="page"] { color: var(--yellow); }
.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--yellow);
}

.tab-dot {
  position: absolute;
  top: 5px;
  right: calc(50% - 17px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--yellow);
  color: #0A0A0B;
  font-size: calc(10px * var(--ts));
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

/* ========================================================= elements ==== */

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  font-size: calc(12px * var(--ts));
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-head .rule {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.section-head .act { margin-left: auto; }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  /* A gradient fill covers the border too; otherwise it repeats under the edges as a stripe of the far colour. */
  background-origin: border-box;
  color: var(--ink);
  text-decoration: none;
  font-size: calc(14px * var(--ts));
  font-weight: 550;
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), transform 0.08s var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--line); }
.btn:active { transform: scale(0.975); }

.btn-primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0A0A0B;
  font-weight: 700;
}
.btn-primary:hover { background: var(--yellow-hi); border-color: var(--yellow-hi); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-danger { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 35%, transparent); background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--stop) 12%, transparent); }

.btn-icon {
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: var(--r-md);
}

.btn-sm { min-height: 32px; padding: 0 10px; font-size: calc(13px * var(--ts)); }

.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---- cards ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 16px;
}

.card-flat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); }

/* ---- home tiles ---- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 12px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.1s var(--ease);
}
.tile:hover { border-color: var(--line); background: var(--surface-2); }
.tile:active { transform: scale(0.985); }

.tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--yellow-ghost);
  color: var(--yellow);
  border: 1px solid var(--yellow-edge);
}

.tile-count {
  font-size: calc(30px * var(--ts));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tile-label { font-size: calc(14.5px * var(--ts)); font-weight: 600; }
.tile-detail { font-size: calc(12.5px * var(--ts)); color: var(--ink-2); }

.tile[data-alert="1"] { border-color: var(--yellow-edge); }
.tile[data-alert="1"] .tile-count { color: var(--yellow); }

.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* ---- favourite tool tiles ---- */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 15px 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease), transform 0.1s var(--ease);
}
.tool-tile:hover { background: var(--surface-2); border-color: var(--line); }
.tool-tile:active { transform: scale(0.97); }

.tool-glyph {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--accent-colour, var(--yellow));
  border: 1px solid var(--line);
}

.tool-label {
  font-size: calc(12px * var(--ts));
  font-weight: 550;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tool-add { border-style: dashed; border-color: var(--line); color: var(--ink-3); }
.tool-add .tool-glyph { background: transparent; color: var(--ink-3); }

/* ---- list rows ---- */

.rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }

.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.row-title {
  font-size: calc(14.5px * var(--ts));
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-meta {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.row-snippet {
  font-size: calc(13px * var(--ts));
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row-side { display: flex; align-items: center; gap: 6px; flex: none; }

/* ---- checkbox ---- */

.check {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: transparent;
  transition: all 0.14s var(--ease);
  margin-top: 1px;
}
.check:hover { border-color: var(--yellow-edge); }
.check[aria-checked="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0A0A0B;
}

/* ---- pills ---- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: calc(11px * var(--ts));
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}

.pill-yellow { background: var(--yellow-ghost); border-color: var(--yellow-edge); color: var(--yellow); }
.pill-go     { background: color-mix(in srgb, var(--go) 12%, transparent);   border-color: color-mix(in srgb, var(--go) 32%, transparent);   color: var(--go); }
.pill-warn   { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--warn); }
.pill-stop   { background: color-mix(in srgb, var(--stop) 12%, transparent); border-color: color-mix(in srgb, var(--stop) 32%, transparent); color: var(--stop); }
.pill-info   { background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 32%, transparent); color: var(--info); }

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

/* ---- agenda outliner ---- */

.day {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.day + .day { margin-top: 12px; }

.day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.day-head .date {
  font-size: calc(13.5px * var(--ts));
  font-weight: 650;
  letter-spacing: -0.01em;
}

.day[data-today="1"] .day-head { background: var(--yellow-ghost); }
.day[data-today="1"] .day-head .date { color: var(--yellow); }

.day-body { padding: 8px 6px 10px; display: flex; flex-direction: column; gap: 1px; }

.blk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  position: relative;
}
.blk:hover .blk-grip { opacity: 1; }

.blk-grip {
  opacity: 0;
  color: var(--ink-3);
  cursor: grab;
  margin-top: 2px;
  transition: opacity 0.12s var(--ease);
}

.blk-bullet {
  width: 18px; height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 3px;
  color: var(--ink-3);
}
.blk-bullet::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.blk-text {
  flex: 1;
  min-width: 0;
  font-size: calc(14.5px * var(--ts));
  line-height: 1.55;
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  word-break: break-word;
}
.blk-text[readonly] { cursor: default; }

.blk[data-checked="1"] .blk-text { color: var(--ink-3); text-decoration: line-through; }

.blk[data-type="heading"] .blk-text { font-size: calc(15.5px * var(--ts)); font-weight: 700; letter-spacing: -0.01em; }
.blk[data-type="heading"] .blk-bullet::after { width: 8px; height: 2px; border-radius: 1px; }

.blk[data-type="event"] { background: var(--surface-2); }
.blk[data-type="event"] .blk-text { color: var(--ink-2); }
.blk-event-mark { color: var(--yellow); margin-top: 2px; }

.blk-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s var(--ease); }
.blk:hover .blk-actions, .blk:focus-within .blk-actions { opacity: 1; }

/* ---- greek: timeline ---- */

.timeline { display: flex; flex-direction: column; }

.stage {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 14px;
  position: relative;
  padding-bottom: 18px;
}

.stage::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 30px;
  bottom: -4px;
  width: 1.5px;
  background: var(--line);
}
.stage:last-child::before { display: none; }

.stage-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  color: var(--ink-3);
  z-index: 1;
}
.stage[data-status="done"] .stage-dot { background: color-mix(in srgb, var(--go) 16%, var(--surface)); border-color: var(--go); color: var(--go); }
.stage[data-status="in_progress"] .stage-dot { background: var(--yellow-ghost); border-color: var(--yellow); color: var(--yellow); }
.stage[data-status="waiting"] .stage-dot { border-color: var(--info); color: var(--info); }
.stage[data-status="blocked"] .stage-dot { border-color: var(--stop); color: var(--stop); }

.stage-body {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-title { font-size: calc(14.5px * var(--ts)); font-weight: 600; }

/* ---- stat strip ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

.stat { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat .n { font-size: calc(21px * var(--ts)); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .k {
  font-family: var(--f-mono);
  font-size: calc(10px * var(--ts));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat[data-tone="yellow"] .n { color: var(--yellow); }
.stat[data-tone="stop"] .n { color: var(--stop); }
.stat[data-tone="go"] .n { color: var(--go); }

/* ---- segmented control ---- */

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.segmented button {
  border: 0;
  background: none;
  color: var(--ink-2);
  padding: 6px 13px;
  border-radius: 7px;
  font-size: calc(13px * var(--ts));
  font-weight: 550;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--yellow); color: #0A0A0B; font-weight: 650; }

/* ---- forms ---- */

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--ts));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.input, .select, textarea.input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-height: 42px;
  color: var(--ink);
  width: 100%;
  font-size: calc(15px * var(--ts)); /* 16px-ish keeps Android from zooming on focus */
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--yellow);
  outline: none;
}
.input::placeholder { color: var(--ink-3); }

textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.weekday-picker button {
  width: 40px; height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  cursor: pointer;
}
.weekday-picker button[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: #0A0A0B; }

.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 172px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.icon-picker button {
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-picker button:hover { background: var(--surface-3); color: var(--ink); }
.icon-picker button[aria-pressed="true"] { background: var(--yellow-ghost); border-color: var(--yellow); color: var(--yellow); }

/* ---- sheet / modal ---- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade 0.16s var(--ease);
}

@media (min-width: 700px) { .sheet-backdrop { align-items: center; } }

.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 540px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 0;
  animation: rise 0.22s var(--ease);
}

@media (min-width: 700px) {
  .sheet { border-radius: var(--r-lg); animation: fade 0.16s var(--ease); }
}

.sheet-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
  z-index: 1;
}
.sheet-head h3 { margin: 0; font-size: calc(16.5px * var(--ts)); font-weight: 650; letter-spacing: -0.01em; }

.sheet-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.sheet:focus { outline: none; }
/* The footer stays in view however long the sheet is; an empty one just leaves the bottom padding. */
.sheet-foot { position: sticky; bottom: 0; z-index: 1; background: var(--surface); backdrop-filter: blur(14px); border-top: 1px solid var(--line-soft); padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 10px; }
.sheet-foot:empty { padding: 0 0 calc(18px + env(safe-area-inset-bottom)); border-top: 0; }
.sheet-foot .btn { flex: 1 1 auto; min-height: 44px; }

@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- toast ---- */

.toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}

@media (min-width: 900px) { .toasts { bottom: 28px; } }

.toast {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: calc(13.5px * var(--ts));
  display: flex;
  align-items: center;
  gap: 9px;
  animation: rise 0.18s var(--ease);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  width: 100%;
}
.toast[data-tone="error"] { border-color: color-mix(in srgb, var(--stop) 45%, transparent); color: var(--stop); }
.toast[data-tone="ok"] { border-color: var(--yellow-edge); color: var(--yellow); }

/* ---- empty / loading / error ---- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.empty .ico { color: var(--ink-3); }
.empty h3 { margin: 0; font-size: calc(15px * var(--ts)); font-weight: 600; color: var(--ink-2); }
.empty p { margin: 0; font-size: calc(13.5px * var(--ts)); max-width: 40ch; }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
  font-size: calc(13.5px * var(--ts));
}
.banner[data-tone="offline"] { border-color: var(--line); background: var(--surface-2); color: var(--ink-2); }
.banner strong { color: inherit; }

.hint { font-size: calc(12.5px * var(--ts)); color: var(--ink-3); }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- misc ---- */

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.yellow { color: var(--yellow); }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ============================================================== notes ==== */

.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: 12px;
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 138px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.1s var(--ease);
}
.note-card:hover { background: var(--surface-2); border-color: var(--line); }
.note-card:active { transform: scale(0.985); }

.note-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.note-glyph {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--yellow-ghost);
  color: var(--yellow);
  border: 1px solid var(--yellow-edge);
  flex: none;
}
.note-glyph-lg { width: 42px; height: 42px; border-radius: 11px; }

.note-card-title {
  font-size: calc(15px * var(--ts));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.note-card-snippet {
  font-size: calc(13px * var(--ts));
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(11.5px * var(--ts));
  flex-wrap: wrap;
}

/* ---- breadcrumbs ---- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: calc(12.5px * var(--ts));
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  font-size: calc(12.5px * var(--ts));
}
.crumb:hover { background: var(--surface-2); color: var(--ink); }
.crumb-current { color: var(--ink); font-weight: 600; cursor: default; }
.crumb-current:hover { background: none; }
.crumb-sep { color: var(--ink-3); display: inline-flex; }

/* ---- the page itself ---- */

.note-page {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.note-title-row { display: flex; align-items: center; gap: 12px; }

.note-title {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-size: calc(23px * var(--ts));
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  outline: none;
  border-bottom: 1.5px solid transparent;
}
.note-title:focus { border-bottom-color: var(--yellow); }
/* The title is a textarea so a long one wraps; it looks and sizes like the one-line field it was. */
textarea.note-title { resize: none; overflow: hidden; font-family: inherit; line-height: 1.25; overflow-wrap: anywhere; display: block; }
/* A title that wraps keeps the icon beside its first line, not halfway down. */
.note-title-row:has(textarea.note-title) { align-items: flex-start; }
.note-title-row:has(textarea.note-title) .note-glyph-lg { flex: none; }
.note-title-row textarea.note-title { margin-top: calc((42px - 23px * var(--ts) * 1.25) / 2); }
.note-title-row .note-saved { align-self: center; }

.note-saved { font-size: calc(11px * var(--ts)); flex: none; }
@media (max-width: 560px) {
  /* On a phone "saved · 120 words" goes under the title rather than squeezing it. */
  .note-title-row { flex-wrap: wrap; row-gap: 4px; }
  .note-saved { order: 3; flex-basis: 100%; }
  .note-saved:empty { display: none; }
}

.note-body {
  width: 100%;
  min-height: 320px;
  background: none;
  border: 0;
  outline: none;
  resize: none;
  padding: 0;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: calc(14px * var(--ts));
  line-height: 1.75;
  overflow: hidden;
}
.note-body::placeholder { color: var(--ink-3); }

/* ---- rendered markdown ---- */

.note-render { font-size: calc(15px * var(--ts)); line-height: 1.65; max-width: 72ch; }
.note-render > :first-child { margin-top: 0; }
.note-render > :last-child { margin-bottom: 0; }

.note-render h2 { font-size: calc(20px * var(--ts)); font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 10px; }
.note-render h3 { font-size: calc(17px * var(--ts)); font-weight: 650; margin: 22px 0 8px; }
.note-render h4 { font-size: calc(15px * var(--ts)); font-weight: 650; margin: 18px 0 6px; }
.note-render h5 {
  font-size: calc(11.5px * var(--ts)); font-weight: 650; margin: 16px 0 6px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

.note-render p { margin: 0 0 13px; max-width: none; }
.note-render a { color: var(--yellow); }

.note-render ul, .note-render ol {
  margin: 0 0 13px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.note-render li::marker { color: var(--yellow-dim); }

.note-render ul.task-list { list-style: none; padding-left: 0; }
.note-render li.task { display: flex; align-items: flex-start; gap: 9px; }
.note-render li.task .task-box {
  width: 19px; height: 19px;
  flex: none;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: calc(12px * var(--ts));
  color: transparent;
}
.note-render li.task-done .task-box { background: var(--yellow); border-color: var(--yellow); color: #0A0A0B; }
.note-render li.task-done { color: var(--ink-3); text-decoration: line-through; }

.note-render blockquote {
  margin: 0 0 13px;
  padding: 4px 0 4px 14px;
  border-left: 2.5px solid var(--yellow-edge);
  color: var(--ink-2);
}

.note-render pre {
  margin: 0 0 13px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.note-render pre code { background: none; padding: 0; font-size: calc(13px * var(--ts)); line-height: 1.6; }
.note-render code { font-family: var(--f-mono); font-size: 0.88em; background: var(--surface-3); padding: 1px 5px; border-radius: 3px; }

.note-render hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ================================================== overflow guards ==== */

/* Grid and flex children default to min-width:auto, which lets one wide
   descendant — a long note title, a URL — stretch the entire shell and give
   the whole page a horizontal scrollbar. These four say "you may shrink". */

.shell > * { min-width: 0; }
main { min-width: 0; }

.crumbs { min-width: 0; }
.crumb {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-title-row { min-width: 0; }
.note-title { min-width: 0; }

/* Long unbroken strings in read mode wrap instead of widening the card. */
.note-render { overflow-wrap: anywhere; }
.note-render a { overflow-wrap: anywhere; }

/* =========================================================== calendar ==== */

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cal-month {
  font-size: calc(19px * var(--ts));
  font-weight: 700;
  letter-spacing: -0.02em;
  min-width: 0;
}

.cal-chips { display: flex; gap: 7px; flex-wrap: wrap; }

.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: calc(12.5px * var(--ts));
  font-weight: 550;
  cursor: pointer;
}
.cal-chip[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--chip) 55%, transparent); }
.cal-chip[aria-pressed="false"] { opacity: 0.5; }
.cal-chip[aria-pressed="false"] .cal-swatch { background: var(--ink-3); }
.cal-chip-add { border-style: dashed; color: var(--ink-3); }
.cal-chip-pub { display: inline-flex; color: var(--info); }

.cal-swatch {
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--chip, var(--yellow));
  flex: none;
}
.cal-swatch-lg { width: 11px; height: 11px; border-radius: 4px; margin-top: 5px; }

/* ---- month grid ---- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

.cal-dow {
  background: var(--surface-2);
  padding: 7px 4px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: calc(10px * var(--ts));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cal-cell {
  background: var(--surface);
  border: 0;
  min-height: 78px;
  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
  text-align: left;
  cursor: pointer;
  color: inherit;
  overflow: hidden;
}
.cal-cell:hover { background: var(--surface-2); }
.cal-cell[data-month="0"] { background: var(--bg); }
.cal-cell[data-month="0"] .cal-num { color: var(--ink-3); }

@media (min-width: 700px) { .cal-cell { min-height: 104px; padding: 7px 6px 6px; } }

.cal-num {
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  align-self: flex-start;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.cal-cell[data-today="1"] .cal-num { background: var(--yellow); color: #0A0A0B; font-weight: 700; }

.cal-events { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cal-ev {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: calc(10.5px * var(--ts));
  line-height: 1.35;
  min-width: 0;
  color: var(--ink-2);
}
.cal-ev-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ev); flex: none; }
.cal-ev-bar {
  width: 100%; height: 3px; border-radius: 2px; background: var(--ev); flex: none;
  position: absolute; left: 0; right: 0;
}
.cal-ev-time { font-variant-numeric: tabular-nums; color: var(--ink-3); flex: none; }
.cal-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* An all-day event reads as a band across the day, not a dot at a time. */
.cal-ev:has(.cal-ev-bar) {
  position: relative;
  background: color-mix(in srgb, var(--ev) 20%, transparent);
  border-left: 2.5px solid var(--ev);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--ink);
}
.cal-ev:has(.cal-ev-bar) .cal-ev-bar { display: none; }

.cal-more { font-size: calc(10px * var(--ts)); color: var(--ink-3); padding-left: 9px; }

@media (max-width: 560px) {
  .cal-ev-time { display: none; }
  .cal-cell { min-height: 66px; }
}

/* The hidden attribute must beat display:flex on section heads and banners. */
[hidden] { display: none !important; }

/* Colour swatches carry their own background, so "selected" needs a ring. */
.weekday-picker button[data-colour][aria-pressed="true"],
.weekday-picker button[data-gcolour][aria-pressed="true"] {
  outline: 2.5px solid var(--ink);
  outline-offset: 2px;
}

/* ===================================================== agenda editor ==== */

/* Jumping to a day must not park it under the sticky top bar. */
.day { scroll-margin-top: 76px; }

/* Earlier days fold away behind one button. */
.past-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: calc(12.5px * var(--ts));
  font-weight: 550;
  cursor: pointer;
  align-self: flex-start;
}
.past-toggle:hover { background: var(--surface-2); color: var(--ink); }
.past-days[hidden] { display: none !important; }

/* One gutter for every row so text lines up whether it is an event, a
   bullet, a task or a toggle. The grip sits outside the gutter, on hover. */
.day-body { padding: 8px 8px 10px 8px; }

.blk {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 8px;
  padding: 4px 6px 4px 22px;
  position: relative;
}

.blk-grip {
  position: absolute;
  left: 4px;
  top: 8px;
  opacity: 0;
  color: var(--ink-3);
  cursor: grab;
  touch-action: none;
}
.blk:hover .blk-grip { opacity: 1; }
.blk[data-dragging="1"] { opacity: 0.4; }

.blk-marker {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: var(--ink-3);
  flex: none;
}
.blk-marker.dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.blk-marker.dash::after { content: ""; width: 9px; height: 2px; border-radius: 1px; background: currentColor; }

.blk-marker.check {
  width: 20px; height: 20px;
  margin: 3px 2px 0;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  color: transparent;
  transition: all 0.14s var(--ease);
}
.blk-marker.check[aria-checked="true"] { background: var(--yellow); border-color: var(--yellow); color: #0A0A0B; }

.blk-marker.tog {
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--ink-2);
  transition: transform 0.15s var(--ease);
}
.blk[data-collapsed="1"] .blk-marker.tog { transform: rotate(-90deg); }
.blk-marker.tog:hover { color: var(--ink); }

.blk-text { grid-column: 2; }
.blk-end {
  grid-column: 3;
  font-family: var(--f-mono);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-top: 5px;
  white-space: nowrap;
}

.blk[data-type="event"] { background: var(--surface-2); border-radius: var(--r-sm); }
.blk[data-type="event"] .blk-text { color: var(--ink-2); cursor: default; }
.blk[data-type="event"][data-movable="1"] { cursor: grab; }
.blk[data-type="event"] .blk-marker { color: var(--yellow); }

.blk[data-type="toggle"] .blk-text { font-weight: 600; }
.blk[data-hidden="1"] { display: none; }

.blk-actions { grid-column: 3; display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s var(--ease); }
.blk:hover .blk-actions, .blk:focus-within .blk-actions { opacity: 1; }

/* Drop targets while dragging. */
.day[data-drop="1"] { outline: 2px solid var(--yellow); outline-offset: -2px; }
.cal-cell[data-drop="1"] { background: var(--yellow-ghost); box-shadow: inset 0 0 0 2px var(--yellow); }
.cal-ev[draggable="true"] { cursor: grab; }
.drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--yellow-edge);
  color: var(--ink);
  font-size: calc(13px * var(--ts));
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The :emoji picker, anchored under the block being typed in. */
.emoji-pop {
  position: absolute;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 320px;
  padding: 6px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.emoji-pop button {
  border: 1px solid transparent;
  background: none;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: calc(18px * var(--ts));
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
}
.emoji-pop button small { font-size: calc(11px * var(--ts)); }
.emoji-pop button[aria-selected="true"], .emoji-pop button:hover { background: var(--yellow-ghost); border-color: var(--yellow-edge); color: var(--ink); }

/* ================================================ calendar: continuous ==== */

/* Toolbar and weekday header ride under the top bar while the weeks scroll. */
.cal-sticky {
  position: sticky;
  top: var(--topbar-h, 58px);
  z-index: 25;
  background: var(--bg);
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-dows {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--line-soft);
  overflow: hidden;
}

.cal-flow { border-radius: 0 0 var(--r-md) var(--r-md); }
/* Weeks are prepended as you scroll up; the view adjusts its own scroll
   position, so the browser's scroll anchoring must not do it a second time. */
.cal-page[data-mode="month"] { overflow-anchor: none; }
.cal-cell[data-odd="0"] { background: var(--surface); }
.cal-cell[data-odd="1"] { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.cal-cell[data-first="1"] { border-top: 2px solid var(--yellow-edge); }
.cal-cell[data-first="1"] .cal-num { color: var(--yellow); font-weight: 700; min-width: auto; padding: 0 7px; border-radius: 999px; }
.cal-cell[data-today="1"][data-first="1"] .cal-num { color: #0A0A0B; }
/* "1 Oct" stays on one line; in a phone-narrow cell the month name gives way (the yellow edge still marks the 1st). */
.cal-num { white-space: nowrap; }
.cal-cell[data-first="1"] .cal-num { display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 480px) {
  .cal-cell[data-first="1"] .cal-num { padding: 0 5px; }
  .cal-num-mon { display: none; }
  /* Week: the date range sits between its arrows, shrinking before it pushes one onto its own line. */
  .cal-page[data-mode="week"] .cal-toolbar .cal-month { flex: 1 0 calc(100% - 100px); text-align: center; font-size: calc(17px * var(--ts)); }
}
.cal-more-btn { align-self: center; color: var(--ink-3); }

/* =================================================== calendar: week ==== */

.wk {
  --gutter: 48px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  user-select: none;
}
@media (max-width: 560px) { .wk { --gutter: 40px; } }

.wk-head, .wk-allday {
  display: grid;
  grid-template-columns: var(--gutter) repeat(var(--cols), minmax(0, 1fr));
  border-bottom: 1px solid var(--line-soft);
}
.wk-gutter {
  font-family: var(--f-mono);
  font-size: calc(9.5px * var(--ts));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}
/* "all day" in a 40–48px gutter: two tight lines that stay inside their row. */
.wk-allday .wk-gutter span { line-height: 1.1; text-align: right; letter-spacing: 0; font-size: calc(8.5px * var(--ts)); }
@media (max-width: 560px) { .wk-gutter { padding-right: 4px; } }
.wk-dayhead {
  padding: 8px 4px 6px;
  text-align: center;
  font-size: calc(11px * var(--ts));
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-left: 1px solid var(--line-soft);
}
.wk-dayhead b {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin: 3px auto 0;
  border-radius: 50%;
  font-size: calc(15px * var(--ts));
  color: var(--ink);
}
.wk-dayhead[data-today="1"] b { background: var(--yellow); color: #0A0A0B; }
.wk-dayhead:hover { background: var(--surface-2); }

.wk-allday-col {
  min-height: 26px;
  padding: 3px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line-soft);
}
.wk-allday-col .cal-ev { cursor: grab; }
.wk-allday-col[data-drop="1"] { background: var(--yellow-ghost); box-shadow: inset 0 0 0 2px var(--yellow); }

.wk-body {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  max-height: calc(100dvh - var(--topbar-h, 58px) - 250px);
  min-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
}
.wk-times { position: relative; }
.wk-time {
  height: var(--hh);
  font-family: var(--f-mono);
  font-size: calc(10px * var(--ts));
  color: var(--ink-3);
  text-align: right;
  padding-right: 6px;
  transform: translateY(-6px);
}
.wk-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  height: calc(var(--hh) * 24);
}
.wk-col {
  position: relative;
  border-left: 1px solid var(--line-soft);
  background-image: linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 100% var(--hh);
  cursor: cell;
}
.wk-col[data-today="1"] { background-color: rgba(255, 204, 0, 0.035); }
.wk-col[data-drop="1"] { background-color: var(--yellow-ghost); }

.wk-ev {
  position: absolute;
  box-sizing: border-box;
  padding: 3px 5px;
  border-radius: 5px;
  border-left: 3px solid var(--ev);
  background: color-mix(in srgb, var(--ev) 26%, var(--surface-2));
  color: var(--ink);
  font-size: calc(11.5px * var(--ts));
  line-height: 1.25;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  z-index: 2;
}
.wk-ev:hover { background: color-mix(in srgb, var(--ev) 38%, var(--surface-2)); z-index: 3; }
.wk-ev[data-dragging="1"] { opacity: 0.85; box-shadow: 0 10px 28px rgba(0,0,0,0.55); z-index: 10; cursor: grabbing; }
.wk-ev-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ev-time { display: block; font-family: var(--f-mono); font-size: calc(9.5px * var(--ts)); color: var(--ink-2); margin-top: 1px; }
.wk-ev-resize {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  cursor: ns-resize;
}
.wk-ev-resize::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 22px; height: 3px;
  margin-left: -11px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ev) 70%, transparent);
  opacity: 0;
}
.wk-ev:hover .wk-ev-resize::after { opacity: 1; }

.wk-now {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #F87171;
  z-index: 4;
  pointer-events: none;
}
.wk-now::before {
  content: "";
  position: absolute;
  left: -4px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #F87171;
}

.wk-select {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: 5px;
  background: var(--yellow-ghost);
  border: 1.5px dashed var(--yellow);
  color: var(--yellow);
  font-family: var(--f-mono);
  font-size: calc(10px * var(--ts));
  padding: 3px 5px;
  pointer-events: none;
  z-index: 5;
}

/* Agenda: the tick sits dead centre of its box. */
.blk-marker.check { padding: 0; line-height: 0; display: grid; place-items: center; }
.blk-marker.check svg { display: block; }


/* ============================================================ projects ==== */

.proj-ring {
  --size: 34px;
  width: var(--size); height: var(--size);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--chip) calc(var(--pct) * 1%), var(--surface-3) 0);
  font-family: var(--f-mono);
  font-size: calc(9.5px * var(--ts));
  color: var(--ink-2);
}
.proj-ring span {
  width: calc(var(--size) - 8px); height: calc(var(--size) - 8px);
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
}

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw);
  cursor: pointer;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }

/* Block pages (notes, projects): the editor without a day card around it. */
.blk-list { display: flex; flex-direction: column; gap: 1px; min-height: 120px; padding: 6px 0; }
.blk-placeholder { border: 0; background: none; width: 100%; cursor: text; color: var(--ink-3); }
.blk-placeholder .blk-marker.check { opacity: 0.5; }

/* ===================================================== citizenship plan ==== */

.plan h3, .plan-h3 { margin: 4px 0 0; font-size: calc(14px * var(--ts)); font-weight: 650; }
.plan-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.plan-item { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: calc(14px * var(--ts)); line-height: 1.45; }
.plan-item input { width: 18px; height: 18px; margin-top: 2px; accent-color: #FFCC00; flex: none; }
.plan-item:has(input:checked) span { color: var(--ink-3); text-decoration: line-through; }
.plan-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: calc(14px * var(--ts)); line-height: 1.5; }
.plan-table-wrap { overflow-x: auto; }
.plan-table { border-collapse: collapse; width: 100%; font-size: calc(13.5px * var(--ts)); }
.plan-table th, .plan-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.plan-table th { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.plan-table thead th { font-family: var(--f-mono); font-size: calc(10px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.banner[data-tone="stop"] { border-color: rgba(248, 113, 113, 0.4); }
.banner[data-tone="warn"] { border-color: rgba(251, 191, 36, 0.4); }

.wk-ev[data-readonly="1"] { cursor: pointer; }
.wk-ev[data-readonly="1"] .wk-ev-resize { display: none; }


/* ============================================================ settings ==== */

.tabbar-preview {
  margin-top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  max-width: 420px;
}
.tabbar-preview .tab { cursor: default; }
.tabbar-preview .tab:first-child { color: var(--yellow); }

/* The Menu sheet lists sections as rows; the current one is marked. */
.row[aria-current="page"] .row-title { color: var(--yellow); }

/* The event's time sits right after its name, not out on the far edge. */
.blk-end { display: inline; grid-column: auto; padding: 0; margin-left: 4px; white-space: nowrap; }

/* A thin rule between a day's calendar events and its notes. */
.day-divider { height: 1px; background: var(--line-soft); margin: 5px 6px 5px 22px; }

/* Markers sit on the first line of text: a 22px box against a 22.5px line,
   and the 20px tick box one pixel down, so glyph and box share a centre. */
.blk-marker { height: 22px; margin-top: 0; }
.blk-marker.check { margin: 1px 2px 0; }

/* Where a dragged row will land: a bar above or below the row under it. */
.blk[data-insert="before"] { box-shadow: inset 0 2px 0 var(--yellow); }
.blk[data-insert="after"]  { box-shadow: inset 0 -2px 0 var(--yellow); }
.day[data-drop="0"] { outline: none; }

/* Projects: one page; each project is a toggle heading over its own editor. */
.proj {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--chip, var(--yellow));
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
.proj-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; min-width: 0; }
.proj-head .blk-marker.tog { flex: none; margin: 0; }
.proj[data-open="0"] .proj-head .blk-marker.tog { transform: rotate(-90deg); }
.proj-title {
  border: 0; background: none; color: var(--ink);
  font-size: calc(15px * var(--ts)); font-weight: 650; letter-spacing: -0.01em;
  text-align: left; padding: 4px 2px; cursor: pointer; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-meta { font-size: calc(12px * var(--ts)); white-space: nowrap; }
@media (max-width: 560px) { .proj-meta { display: none; } }
.proj-body { border-top: 1px solid var(--line-soft); padding: 2px 6px 6px; }
.proj-body .blk-list { min-height: 44px; }

/* Buttons used as markers (tick box, toggle chevron): flex, not grid —
   some engines ignore display:grid on a <button>, which floated the chevron
   to the top of its box. Zero padding so the box is exactly the box. */
.blk-marker.tog, .blk-marker.check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
}
.blk-marker svg { display: block; }

/* Page glyphs take the page's own colour when it has one. */
.note-glyph {
  color: var(--glyph, var(--yellow));
  background: color-mix(in srgb, var(--glyph, var(--yellow)) 12%, transparent);
  border-color: color-mix(in srgb, var(--glyph, var(--yellow)) 32%, transparent);
}

/* Month cells: five compact chips before "+N". */
.cal-events { gap: 1px; }
.cal-ev { font-size: calc(10px * var(--ts)); line-height: 1.2; gap: 3px; }
.cal-ev:has(.cal-ev-bar) { padding: 0 3px; border-left-width: 2px; }
.cal-ev-dot { width: 4px; height: 4px; }
.cal-cell { min-height: 96px; padding: 4px 3px 3px; gap: 2px; }
.cal-num { height: 19px; min-width: 19px; font-size: calc(12px * var(--ts)); }
@media (min-width: 700px) { .cal-cell { min-height: 118px; padding: 6px 5px 5px; } }

/* A block page's editor hugs its rows: no minimum height, even padding, so a
   lone new row is not parked at the bottom of a taller box. */
.proj-body { padding: 3px 6px; }
.proj-body .blk-list, .note-page .blk-list { min-height: 0; padding: 2px 0; }

/* The row's action buttons are no taller than a line of text, so a
   single-line row is exactly one line tall and its tick sits in the
   middle of the hover highlight, not above it. */
.blk-actions { align-self: start; height: 22px; }
.blk-actions .btn-icon { width: 26px; height: 22px; min-height: 22px; padding: 0; border-radius: 6px; }


/* Compact rows: one line each, tighter padding. */
.rows-compact .row { padding: 8px 12px; min-height: 0; }
.rows-compact .row .note-glyph { width: 28px; height: 28px; border-radius: 8px; }

/* ============================================================== health ==== */
.hcheck-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hcheck {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  font-size: calc(13px * var(--ts)); font-weight: 550; cursor: pointer;
}
.hcheck .check { width: 18px; height: 18px; margin: 0; border-radius: 5px; }
.hcheck[aria-pressed="true"] { color: var(--ink); border-color: var(--yellow-edge); background: var(--yellow-ghost); }
.hcheck[aria-pressed="true"] .check { background: var(--yellow); border-color: var(--yellow); color: #0A0A0B; }
.hscale { display: flex; gap: 4px; }
/* Mood and Energy side by side only while each keeps room for five 38px buttons; otherwise one above the other. */
.field-row.hscale-row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.hscale button {
  flex: 1; min-width: 0; min-height: 40px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); font-size: calc(16px * var(--ts)); cursor: pointer;
}
.hscale button[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: #0A0A0B; }
.hcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hchart { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.hchart .k { font-family: var(--f-mono); font-size: calc(10px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.hchart svg { width: 100%; height: 56px; display: block; }
.hchart [data-range], .hchart .dim.mono { font-size: calc(10px * var(--ts)); }

/* Compact rows are one line: everything sits on the row's centre line. */
.rows-compact .row { align-items: center; }
.rows-compact .row .row-body { justify-content: center; }
.rows-compact .row .row-side { margin-top: 0; }

/* Back button in the top bar (installed app has no browser back). */
#topbar-title { display: flex; align-items: center; gap: 8px; }
.topbar-text { min-width: 0; flex: 1; }
.topbar-back { flex: none; margin-left: -8px; }

/* "More…" in the rail: a fold holding the hidden sections. */
/* Category headings in the rail: small caps labels that fold their group. */
.rail-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 10px 0 0;
  padding: 6px 12px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: calc(10.5px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  border-radius: var(--r-sm);
}
.rail-cat:hover { color: var(--ink-2); }
@media (max-width: 899.98px) { .rail-cat { min-height: 40px; } }
.rail-cat-chev { margin-left: auto; display: inline-flex; transition: transform 0.15s var(--ease); }
.rail-cat[aria-expanded="false"] .rail-cat-chev { transform: rotate(-90deg); }
.rail-cat-items { display: flex; flex-direction: column; gap: 2px; }
.rail-more { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.rail-more-chevron { margin-left: auto; display: inline-flex; color: var(--ink-3); transition: transform 0.15s var(--ease); }
.rail-more[aria-expanded="true"] .rail-more-chevron { transform: rotate(180deg); }
.rail-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line-soft); margin: 2px 0 2px 18px; }
.rail-sub .rail-link { padding-top: 7px; padding-bottom: 7px; }

/* Agenda: more air between days; the earlier-days fold is a small chip. */
.stack-tight > .day + .day { margin-top: 20px; }
.past-days.stack-tight > .day + .day { margin-top: 20px; }
.past-days { margin-bottom: 20px; }
.past-toggle { padding: 4px 9px; font-size: calc(11.5px * var(--ts)); gap: 5px; }

.past-toggle { white-space: nowrap; width: max-content; }
.tile { min-height: 120px; }

/* Agenda day labels as outlined pills. */
.day-head .day-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  border: 1.5px solid currentColor; font-size: calc(12.5px * var(--ts)); font-weight: 650; line-height: 1.2;
}
.day[data-today="1"] .day-head .day-pill { border-color: var(--yellow); color: var(--yellow); }
.day-head .day-pill-plain { border-color: var(--line); color: var(--ink-2); font-weight: 600; }

/* Favourites on Home: the same list, larger. */
.rows-fav .row { align-items: center; padding: 14px 16px; }
.rows-fav .row .note-glyph { width: 46px; height: 46px; border-radius: 13px; }
.rows-fav .row .row-title { font-size: calc(17px * var(--ts)); font-weight: 650; }
.rows-fav .row .row-body { justify-content: center; }
.rows-fav .row .row-side { margin-top: 0; }

/* The section's icon beside the page title. */
.topbar-glyph { width: 34px; height: 34px; border-radius: 10px; flex: none; }

/* With 15% larger text, month cells need a little more room for five chips. */
.cal-cell { min-height: 106px; }
@media (min-width: 700px) { .cal-cell { min-height: 128px; } }

.topbar-glyph { width: 44px; height: 44px; border-radius: 13px; }

/* Compact lists (Home sections, Notes): a little more breathing room per row. */
.rows-compact .row { padding-top: 11px; padding-bottom: 11px; }

/* ============================================================= routine ==== */
.routine { margin: 2px 0 6px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.routine-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit;
}
.routine-head .blk-marker.tog { margin: 0; flex: none; transition: transform 0.15s var(--ease); }
.routine[data-open="0"] .routine-head .blk-marker.tog { transform: rotate(-90deg); }
.routine-title { font-weight: 650; font-size: calc(13.5px * var(--ts)); letter-spacing: 0.01em; }
.routine-count { font-size: calc(11px * var(--ts)); }
.routine-bar { width: 72px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; flex: none; }
.routine-bar span { display: block; height: 100%; background: var(--yellow); transition: width 0.2s var(--ease); }
.routine-body { padding: 0 4px 6px; border-top: 1px solid var(--line-soft); }
.routine-group { font-family: var(--f-mono); font-size: calc(10px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 6px 2px 22px; }
.routine-row .routine-text { cursor: pointer; }
.routine-row[data-checked="1"] .routine-text { color: var(--ink-3); text-decoration: line-through; }
.routine-row .blk-marker.check { cursor: pointer; }

/* Rows tinted with their own colour (Home sections, Notes). */
.row-tint { background: color-mix(in srgb, var(--glyph, var(--yellow)) 7%, transparent); }
.row-tint:hover { background: color-mix(in srgb, var(--glyph, var(--yellow)) 13%, transparent); }
/* Notes list: taller rows, easier to hit on a phone. */
.rows-notes .row { padding-top: 15px; padding-bottom: 15px; }
/* Top-bar icon matches the height of the title block. */
.topbar-glyph { width: 52px; height: 52px; border-radius: 15px; }
.rows-notes .row { padding-top: 12px; padding-bottom: 12px; }
.rows-notes .row .row-side .btn-icon { width: 30px; height: 30px; min-height: 30px; }
.rows-notes .row-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rows-notes .row-title .pill { margin-left: 0 !important; flex: none; }


/* =========================================================== countdown ==== */
.cd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.cd-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .cd-home { grid-template-columns: 1fr; } }
.cd {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: var(--r-lg); cursor: pointer; color: var(--ink); font: inherit;
  border: 1px solid color-mix(in srgb, var(--glyph, var(--yellow)) 30%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--glyph, var(--yellow)) 16%, var(--surface)), var(--surface) 70%);
  min-width: 0;
}
.cd:hover { border-color: color-mix(in srgb, var(--glyph, var(--yellow)) 55%, transparent); }
.cd-num {
  font-family: var(--f-mono); font-size: calc(30px * var(--ts)); font-weight: 750; letter-spacing: -0.03em; line-height: 1;
  color: var(--glyph, var(--yellow)); min-width: 2.2ch; text-align: center; flex: none;
}
.cd-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-title { font-weight: 650; font-size: calc(14.5px * var(--ts)); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-icon { display: inline-flex; color: var(--glyph, var(--yellow)); flex: none; }
.cd-sub { font-size: calc(11.5px * var(--ts)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd[data-tone="today"] { border-color: var(--yellow); background: var(--yellow-ghost); }
.cd[data-tone="past"] { opacity: 0.6; }
.cd-compact { padding: 12px 14px; }
.cd-compact .cd-num { font-size: calc(26px * var(--ts)); }

/* Household band sits at the foot of today's card. */
.routine { margin: 10px 0 2px; }

/* Countdown page as a list */
.rows-cd .row { padding-top: 12px; padding-bottom: 12px; }
.rows-cd .row[data-tone="past"] { opacity: 0.6; }
.rows-cd .row[data-tone="today"] { background: var(--yellow-ghost); }
.cd-days { display: flex; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1; }
.cd-days-num { font-family: var(--f-mono); font-size: calc(20px * var(--ts)); font-weight: 750; letter-spacing: -0.02em; color: var(--glyph, var(--yellow)); }
.cd-days-lbl { font-size: calc(10.5px * var(--ts)); color: var(--ink-2); margin-top: 2px; }

/* Money stat strips (Budget, Subscriptions, Time tracker, Wealth, Property): a tile never cuts its number;
   when three do not fit side by side on a phone, the widest takes a row of its own. */
.stats.stats-flow { display: flex; flex-wrap: wrap; }
.stats.stats-flow > .stat { flex: 1 1 0; min-width: max-content; }

/* Home: the three soonest countdowns, one tight line each */
.rows-cd-home .row { padding: 6px 12px; gap: 10px; }
.rows-cd-home .row .note-glyph { width: 24px !important; height: 24px !important; border-radius: 7px; }
.rows-cd-home .row .note-glyph svg { width: 14px; height: 14px; }
.rows-cd-home .row-title { font-size: calc(13.5px * var(--ts)); font-weight: 550; }
.rows-cd-home .cd-days { flex-direction: row; align-items: baseline; gap: 4px; }
.rows-cd-home .cd-days-num { font-size: calc(15px * var(--ts)); }
:root[data-theme="clouds"] .cd-days-num, :root[data-theme="ocean"] .cd-days-num, :root[data-theme="paper"] .cd-days-num { color: color-mix(in srgb, var(--glyph, var(--yellow)) 62%, #000); }
.rows-cd-home .cd-days-lbl { margin-top: 0; }


/* ============================================================ sunset ====
 * The yellow-to-orange gradient "colour". Elements that carry it get .grad
 * (surfaces) or .grad-ico (a bare icon), with --glyph set to a mid orange
 * so anything mixing the colour still works.
 */
:root { --sunset: linear-gradient(135deg, #FFCC00 0%, #FF7A1A 100%); }
.note-glyph.grad { background: var(--sunset); color: #1F1400; border-color: transparent; }
.row-tint.grad { background: linear-gradient(135deg, color-mix(in srgb, #FFCC00 9%, transparent), color-mix(in srgb, #FF7A1A 10%, transparent)); }
.row-tint.grad:hover { background: linear-gradient(135deg, color-mix(in srgb, #FFCC00 15%, transparent), color-mix(in srgb, #FF7A1A 17%, transparent)); }
.grad-ico svg *:not([fill="none"]) { fill: url(#sunset-grad); }
.grad-ico svg * { stroke: url(#sunset-grad); }
.grad .cd-days-num, .grad .cd-num { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad .cd-icon { color: #FF9A1A; }
.cd.grad { border-color: color-mix(in srgb, #FF9A1A 35%, transparent); }
.proj.grad { border-left-color: transparent; border-image: var(--sunset) 1; border-image-width: 0 0 0 3px; }
.cal-swatch.grad { background: var(--sunset); }
.swatch.grad { background: var(--sunset); }

/* Thinner top bar: one line, the page's date or summary as a pill on the right. */
.topbar { padding: 6px 14px; min-height: 46px; gap: 10px; }
.topbar h1 { font-size: calc(17px * var(--ts)); }
.topbar-glyph { width: 34px; height: 34px; border-radius: 10px; }
.topbar-glyph svg { width: 20px; height: 20px; }
.topbar-pill {
  margin-left: auto; flex: none; max-width: 46vw;
  font-family: var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: calc(10.5px * var(--ts)); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.6;
}
.topbar-actions { margin-left: 0; }
#topbar-title:has(.topbar-pill) + .topbar-actions { margin-left: 0; }
#topbar-title:not(:has(.topbar-pill)) + .topbar-actions { margin-left: auto; }

/* Home countdowns: separate little cards with a small gap. */
.cd-home-list { display: flex; flex-direction: column; gap: 6px; }
.cd-home-list .row { border: 1px solid var(--line-soft); border-radius: var(--r-md); background-color: var(--surface); }
.cd-home-list .row:last-child { border-bottom: 1px solid var(--line-soft); }

/* Agenda: room above and below the day's notes, between the events and Household. */
.day-divider { margin: 14px 0 12px; }
.routine { margin: 20px 0 2px; }
.day-body { padding-top: 12px; padding-bottom: 14px; }

/* Household is a button in the Agenda top bar; the chores open in a sheet. */
.household-btn { gap: 6px; padding: 0 10px; }
.household-btn .mono { font-size: calc(11.5px * var(--ts)); color: var(--ink-2); }
.household-btn[data-all-done="1"] .mono { color: var(--go); }
.household-btn .mono:empty { display: none; }
.routine-sheet-head { display: flex; align-items: center; gap: 12px; margin: -4px 0 0; }
.routine-sheet-head .routine-bar { flex: 1; width: auto; }
.routine-sheet { display: flex; flex-direction: column; gap: 1px; }
.routine-sheet .routine-group { margin-top: 8px; }
.routine-sheet .routine-group:first-child { margin-top: 0; }

/* The Household button reads as a button: outlined, tinted, labelled. */
.household-btn {
  background: var(--yellow-ghost); border: 1px solid var(--yellow); color: var(--yellow);
  font-weight: 700; min-height: 34px; padding: 0 12px; gap: 6px;
}
.household-btn:hover { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.household-btn .mono { color: var(--ink-2); font-weight: 600; padding-left: 2px; }
.household-btn[data-all-done="1"] { border-color: var(--go); color: var(--go); background: color-mix(in srgb, var(--go) 12%, transparent); }

/* Agenda: earlier-days on the left, House on the right, one row. */
.agenda-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agenda-top .past-toggle { align-self: center; }

/* Settings sits alone at the top of the side menu. */
.rail-sep { height: 1px; background: var(--line-soft); margin: 14px 10px 12px; }

/* House: a chore ticked today stays put, struck through. */
.row[data-checked="1"] .row-title { color: var(--ink-3); text-decoration: line-through; }
.row[data-checked="1"] .row-meta { opacity: 0.7; }

/* Colour swatches: a grid that fits the space, so they never pile up on a phone. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 8px; flex-wrap: unset; }
.swatch { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; }
.swatch[data-colour="#F5F5F4"] { border-color: color-mix(in srgb, var(--line) 80%, transparent); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }

/* Settings → Sections: name and buttons on one line, the colours underneath. */
.sec-row { flex-direction: column; align-items: stretch; gap: 8px; }
.sec-row-top { display: flex; align-items: center; gap: 10px; }
.sec-row-top .row-body { flex: 1; min-width: 0; }
.sec-row .swatches { grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 6px; padding-left: 2px; }
.sec-row .swatch { max-width: 26px; }
@media (min-width: 700px) {
  .sec-row .swatches { grid-template-columns: repeat(17, 24px); }
}

/* Home: up to three shortcut buttons in a row at the top. */
.shortcuts { display: grid; gap: 10px; }
.shortcut {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px 12px; min-height: 84px; border-radius: var(--r-lg); cursor: pointer; font: inherit; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--glyph, var(--yellow)) 35%, transparent);
  background: color-mix(in srgb, var(--glyph, var(--yellow)) 9%, var(--surface));
}
.shortcut:hover { background: color-mix(in srgb, var(--glyph, var(--yellow)) 16%, var(--surface)); }
.shortcut.grad { border-color: color-mix(in srgb, #FF9A1A 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #FFCC00 12%, var(--surface)), color-mix(in srgb, #FF7A1A 12%, var(--surface))); }
.shortcut .note-glyph { width: 40px; height: 40px; border-radius: 12px; }
.shortcut-label { font-weight: 650; font-size: calc(13.5px * var(--ts)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shortcut-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .shortcut-slots { grid-template-columns: 1fr; } }

/* Back and Home sit together at the left of the top bar, compact. */
.topbar-back { width: 34px; min-height: 34px; height: 34px; }
.topbar-back + .topbar-home { margin-left: -10px; }

/* =============================================================== trust ====
 * The investment growth model: inputs in a row, three headline figures, a
 * stacked-area chart, then the year table.
 */
.calc { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 16px; }
.calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: calc(16px * var(--ts)); font-weight: 700; letter-spacing: -0.01em; }
.calc-title svg { color: var(--yellow); }
.calc-sub { margin: 4px 0 0; color: var(--ink-2); font-size: calc(12.5px * var(--ts)); }
.calc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.calc-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 960px) { .calc-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.calc-label { font-family: var(--f-mono); font-size: calc(10.5px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.calc-control {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 46px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.calc-control:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-ghost); }
.calc-control input {
  flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: none; color: var(--ink); font: inherit;
  font-size: calc(17px * var(--ts)); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.calc-control input::-webkit-outer-spin-button, .calc-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-control input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.calc-affix { color: var(--ink-3); font-weight: 600; font-size: calc(13px * var(--ts)); flex: none; }

.calc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.calc-stat-hero { grid-column: span 2; }
@media (max-width: 480px) { .calc-stats { grid-template-columns: 1fr; } .calc-stat-hero { grid-column: auto; } }
.calc-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-soft); min-width: 0;
}
.calc-stat .k { font-family: var(--f-mono); font-size: calc(10.5px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.calc-stat .n { font-size: calc(23px * var(--ts)); font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-stat .s { font-size: calc(12px * var(--ts)); color: var(--ink-2); }
.calc-stat-hero { background: linear-gradient(135deg, color-mix(in srgb, #FFCC00 18%, var(--surface-2)), color-mix(in srgb, #FF7A1A 14%, var(--surface-2))); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.calc-stat-hero .n { font-size: calc(34px * var(--ts)); background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-stat-growth .n { color: var(--yellow); }

.calc-chart { border-radius: var(--r-md); border: 1px solid var(--line-soft); background: var(--surface-2); padding: 6px 4px 0; overflow: hidden; }
.calc-svg { display: block; width: 100%; height: auto; }
.calc-grid { stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 1; }
.calc-tick { fill: var(--ink-3); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; }
.calc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.calc-line-balance { stroke: #FFCC00; }
.calc-line-contrib { stroke: rgba(255,255,255,0.45); stroke-dasharray: 3 4; stroke-width: 1.5; }
.calc-dot { fill: #FFCC00; stroke: var(--surface-2); stroke-width: 2.5; }
.calc-legend text { fill: var(--ink-2); font-size: 11px; font-family: var(--f-mono); letter-spacing: 0.04em; }

.calc-table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px 10px; }
.calc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: calc(13px * var(--ts)); }
.calc-table th { text-align: right; font-family: var(--f-mono); font-weight: 500; font-size: calc(10.5px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; padding-left: 4px; }
.calc-table td { text-align: right; padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent); white-space: nowrap; }
.calc-table tr:last-child td { border-bottom: 0; font-weight: 700; }
.calc-table tbody tr:hover td { background: color-mix(in srgb, var(--yellow) 5%, transparent); }
.calc-growth { color: var(--yellow); }
.calc-balance { font-weight: 650; }
.calc-bar-h { width: 120px; }
.calc-bar-cell { padding-right: 4px !important; }
.calc-bar { display: block; width: 110px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-left: auto; }
.calc-bar span { display: block; height: 100%; background: var(--sunset); border-radius: 3px; }
@media (max-width: 560px) { .calc-bar-h, .calc-bar-cell { display: none; } .calc { padding: 14px 14px 6px; } .calc-table-wrap { margin: 0 -14px; padding: 0 14px 8px; } }

/* Trust: withdrawals and today's-money figures. */
.calc-stat-real .n { color: #22D3EE; }
.calc-stat-out .n { color: var(--ink-2); }
.calc-line-real { stroke: #22D3EE; stroke-width: 1.75; stroke-dasharray: 5 4; }
.calc-dot-real { fill: #22D3EE; }
.calc-real { color: #22D3EE; }
.calc-out { color: var(--ink-2); }
.calc-withdrawals { display: flex; flex-direction: column; gap: 10px; }
.calc-wd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calc-wd {
  display: grid; grid-template-columns: 1.3fr 1.2fr 0.9fr 0.9fr auto auto; gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 55%, transparent); margin-bottom: 8px;
}
.calc-wd .calc-field[hidden] { display: none; }
.calc-wd .calc-control { min-height: 42px; }
.calc-wd .calc-control input { font-size: calc(15px * var(--ts)); }
.calc-select { min-height: 42px; font-weight: 600; }
.calc-wd-flag { display: flex; align-items: center; gap: 8px; min-height: 42px; white-space: nowrap; font-size: calc(12.5px * var(--ts)); color: var(--ink-2); cursor: pointer; }
.calc-wd .btn-icon { min-height: 42px; height: 42px; }
@media (max-width: 860px) {
  .calc-wd { grid-template-columns: 1fr 1fr; }
  .calc-wd-flag { grid-column: 1; }
  .calc-wd .btn-icon { grid-column: 2; justify-self: end; }
}

/* Favourites on Home, about 30% smaller than before. */
.rows-fav .row { padding: 10px 12px; gap: 10px; }
.rows-fav .row .note-glyph { width: 32px; height: 32px; border-radius: 9px; }
.rows-fav .row .note-glyph svg { width: 17px; height: 17px; }
.rows-fav .row .row-title { font-size: calc(14.5px * var(--ts)); }
.rows-fav .row .row-side svg { width: 16px; height: 16px; }

/* Trust chart: taller, with more room for the labels. */
.calc-chart { padding: 8px 6px 2px; }
.calc-tick { font-size: 12px; }
.calc-legend text { font-size: 12px; }
.calc-line-balance { stroke-width: 2.5; }

/* Phones and other touch screens: the block buttons (indent, outdent,
   delete) no longer take a column of their own, so text runs the full
   width. They float over the end of the row while the block is focused. */
@media (hover: none), (max-width: 700px) {
  .blk { grid-template-columns: 24px minmax(0, 1fr) 0; }
  .blk-actions {
    position: absolute; right: 4px; top: 1px; grid-column: auto;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; padding: 1px;
    pointer-events: none;
  }
  .blk:focus-within .blk-actions { pointer-events: auto; }
}

/* Home notepad: a shorter note page, always at least a few lines tall. */
.home-pad { padding: 10px 14px 12px; gap: 0; }
.home-pad .blk-list { min-height: 72px; padding: 2px 0; }

/* Blocks start at the left edge; the drag-grip gutter only exists when grips are on. */
.blk { padding-left: 6px; }
.blk-list .blk-placeholder { padding-left: 6px; }

/* The drag grip (Agenda) sits just outside the block, in the card's padding, so
   the checkbox can start at the edge. It only shows on hover. */
.blk-grip { left: -13px; top: 9px; }
.blk[style*="padding-left:28px"] .blk-grip, .blk[style*="padding-left:50px"] .blk-grip { left: auto; }


/* ============================================================== themes ====
 * Night is the default (the tokens at the top of this file). Clouds is a
 * blue-sky day: translucent white surfaces over an SVG sky that sits fixed
 * behind everything, with a deeper gold so the signal colour still reads
 * on white.
 */
.sky { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-svg { width: 100%; height: 100%; display: block; }

:root[data-theme="clouds"] {
  color-scheme: light;
  --bg:         #BFDFFB;
  --surface:    rgba(255, 255, 255, 0.80);
  --surface-2:  rgba(255, 255, 255, 0.62);
  --surface-3:  rgba(226, 238, 251, 0.95);
  --line:       rgba(31, 78, 134, 0.24);
  --line-soft:  rgba(31, 78, 134, 0.13);
  --ink:        #0F2A47;
  --ink-2:      #3E5C7D;
  --ink-3:      #4F6278;
  --yellow:     #C48700;
  --yellow-hi:  #DDA000;
  --yellow-dim: #8A6000;
  --yellow-ghost: rgba(255, 204, 0, 0.20);
  --yellow-edge:  rgba(196, 135, 0, 0.45);
  --go:    #15803D;
  --warn:  #C2410C;
  --stop:  #DC2626;
  --info:  #1D4ED8;
}
:root[data-theme="clouds"] body { background: transparent; }
.scene { display: none; }
:root[data-theme="clouds"] .sky, :root[data-theme="aurora"] .sky, :root[data-theme="sunset"] .sky, :root[data-theme="forest"] .sky, :root[data-theme="ocean"] .sky { display: block; }
:root[data-theme="clouds"] .scene-clouds, :root[data-theme="aurora"] .scene-aurora, :root[data-theme="sunset"] .scene-sunset, :root[data-theme="forest"] .scene-forest, :root[data-theme="ocean"] .scene-ocean { display: block; }
:root[data-theme="clouds"] .rail { background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(18px); border-right-color: var(--line-soft); }
:root[data-theme="clouds"] .topbar { background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(18px); }
:root[data-theme="clouds"] .tabs { background: rgba(255, 255, 255, 0.78); }
:root[data-theme="clouds"] .card, :root[data-theme="clouds"] .rows, :root[data-theme="clouds"] .note-page, :root[data-theme="clouds"] .day,
:root[data-theme="clouds"] .calc, :root[data-theme="clouds"] .cd, :root[data-theme="clouds"] .shortcut { box-shadow: 0 8px 28px rgba(20, 60, 110, 0.10); }
:root[data-theme="clouds"] .btn-primary { background: #FFCC00; border-color: #E6B800; color: #1A1400; }
:root[data-theme="clouds"] .brand-mark { background: #FFCC00; }
:root[data-theme="clouds"] .note-glyph { background: color-mix(in srgb, var(--glyph, #FFCC00) 22%, white); }
:root[data-theme="clouds"] .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.5) 75%); background-size: 300% 100%; }

/* The clouds drift, slowly, unless the phone asks for less motion. */
.sky-far  { animation: sky-drift 150s ease-in-out infinite alternate; }
.sky-mid  { animation: sky-drift 105s ease-in-out infinite alternate; --sky-drift: -70px; }
.sky-near { animation: sky-drift 75s ease-in-out infinite alternate; --sky-drift: -110px; }
@keyframes sky-drift { from { transform: translateX(0); } to { transform: translateX(var(--sky-drift, -40px)); } }
@media (prefers-reduced-motion: reduce) { .sky-far, .sky-mid, .sky-near { animation: none; } }

/* Theme picker in Settings. */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-card {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left;
  padding: 10px; border-radius: var(--r-lg); border: 2px solid var(--line-soft); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit;
}
.theme-card[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-ghost); }
.theme-swatch { display: block; height: 76px; border-radius: 10px; position: relative; overflow: hidden; }
.theme-swatch-night { background: #000; border: 1px solid #2C2C35; }
.theme-swatch-night::before { content: ''; position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 6px; background: var(--night-accent, #4F8DFF); }
.theme-swatch-night::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 24px; border-radius: 6px; background: #131316; border: 1px solid #2C2C35; }
.theme-swatch-clouds { background: linear-gradient(180deg, #2B78D9 0%, #63ABF2 45%, #B7DCFA 85%, #E3F2FF 100%); }
.theme-swatch-clouds::before {
  content: ''; position: absolute; left: 14px; top: 26px; width: 70px; height: 26px; border-radius: 20px; background: #fff;
  box-shadow: 18px -12px 0 -4px #fff, 36px -6px 0 -2px #fff, 60px 30px 0 -2px rgba(255,255,255,0.9), 84px 24px 0 -6px rgba(255,255,255,0.9);
}
.theme-swatch-clouds::after { content: ''; position: absolute; right: 12px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #FFF6C8; box-shadow: 0 0 14px 6px rgba(255, 240, 180, 0.7); }
.theme-name { font-weight: 650; font-size: calc(14px * var(--ts)); }
.theme-desc { font-size: calc(12px * var(--ts)); color: var(--ink-2); }

/* The Trust chart's "contributed" area is drawn in ink, not white, so it shows on either theme. */
.calc-line-contrib { stroke: color-mix(in srgb, var(--ink) 45%, transparent); }
:root[data-theme="clouds"] .rows-cd .row[data-tone="today"] { background: rgba(255, 238, 170, 0.92); }
:root[data-theme="clouds"] .day[data-today="1"] .day-head { background: rgba(255, 238, 170, 0.7); }

/* Home notepad as plain text. */
.home-pad-text {
  display: block; width: 100%; min-height: 96px; resize: none; border: 0; outline: none; background: none; color: var(--ink);
  font: inherit; font-size: calc(14.5px * var(--ts)); line-height: 1.55; padding: 2px 0 4px; overflow: hidden;
}
.home-pad-text::placeholder { color: var(--ink-3); }

/* Family members: a fold-out box each, with a plain-text notepad inside. */
.fam-member { --chip: var(--yellow); }
.fam-member .proj-body { padding: 4px 12px 10px; }
.fam-text { min-height: 88px; }

/* Notes pages: free text. Plain lines carry no bullet; toggles, tasks and
   headings keep their markers so the structure still reads. */
.blk-list-free .blk[data-type="paragraph"] { grid-template-columns: minmax(0, 1fr) auto; }
.blk-list-free .blk[data-type="paragraph"] .blk-marker { display: none; }
.blk-list-free .blk[data-type="paragraph"] .blk-text { grid-column: 1; }
.blk-list-free .blk[data-type="paragraph"] .blk-actions { grid-column: 2; }
@media (hover: none), (max-width: 700px) {
  .blk-list-free .blk[data-type="paragraph"] { grid-template-columns: minmax(0, 1fr) 0; }
}

/* No highlight on a block when hovered or being edited. */
.blk:hover, .blk:focus-within { background: none; }
.blk[data-type="event"]:hover { background: var(--surface-2); }

/* Redo is the undo arrow, mirrored. */
.ico-flip svg { transform: scaleX(-1); }

/* Family members carry their own colour and icon. */
.fam-member { --chip: var(--glyph, var(--yellow)); background: color-mix(in srgb, var(--glyph, var(--yellow)) 7%, var(--surface)); }
.fam-member.grad { border-left-color: transparent; border-image: var(--sunset) 1; border-image-width: 0 0 0 3px; background: linear-gradient(135deg, color-mix(in srgb, #FFCC00 9%, var(--surface)), color-mix(in srgb, #FF7A1A 10%, var(--surface))); }
.fam-glyph { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.fam-glyph svg { width: 18px; height: 18px; }

/* Today's agenda card on Home. */
.home-today .day { margin: 0; }


/* ---------------------------------------------------- five more themes ----
 * Aurora, Sunset and Forest are dark scenes with translucent dark glass;
 * Ocean is a light scene; Paper is a plain light theme with no scene.
 */
:root[data-theme="aurora"], :root[data-theme="sunset"], :root[data-theme="forest"], :root[data-theme="ocean"], :root[data-theme="paper"] { color-scheme: dark; }
:root[data-theme="aurora"] body, :root[data-theme="sunset"] body, :root[data-theme="forest"] body, :root[data-theme="ocean"] body { background: transparent; }

:root[data-theme="aurora"] {
  --bg: #060B18; --surface: rgba(12, 20, 40, 0.82); --surface-2: rgba(20, 32, 60, 0.82); --surface-3: #1C2A48;
  --line: rgba(120, 170, 230, 0.24); --line-soft: rgba(120, 170, 230, 0.13);
  --ink: #EAF2FF; --ink-2: #9DB3D6; --ink-3: #6B82A8;
  --yellow: #7CF5D0; --yellow-hi: #A8FFE6; --yellow-dim: #3FA58A; --yellow-ghost: rgba(124, 245, 208, 0.12); --yellow-edge: rgba(124, 245, 208, 0.38);
  --info: #7DD3FC;
}
:root[data-theme="sunset"] {
  --bg: #1A0F1F; --surface: rgba(46, 24, 48, 0.82); --surface-2: rgba(64, 34, 64, 0.82); --surface-3: #4A2E4C;
  --line: rgba(255, 190, 150, 0.24); --line-soft: rgba(255, 190, 150, 0.13);
  --ink: #FFF3EA; --ink-2: #E4BFAE; --ink-3: #B08A7B;
  --yellow: #FFB347; --yellow-hi: #FFC96B; --yellow-dim: #B8782A; --yellow-ghost: rgba(255, 179, 71, 0.14); --yellow-edge: rgba(255, 179, 71, 0.4);
}
:root[data-theme="forest"] {
  --bg: #071510; --surface: rgba(12, 34, 24, 0.84); --surface-2: rgba(18, 46, 34, 0.84); --surface-3: #1C4030;
  --line: rgba(140, 220, 170, 0.22); --line-soft: rgba(140, 220, 170, 0.12);
  --ink: #ECFDF3; --ink-2: #A7D5B8; --ink-3: #6FA386;
  --yellow: #F5D061; --yellow-hi: #FFE28A; --yellow-dim: #A88B33; --yellow-ghost: rgba(245, 208, 97, 0.13); --yellow-edge: rgba(245, 208, 97, 0.4);
  --go: #86EFAC;
}
:root[data-theme="ocean"] {
  color-scheme: light;
  --bg: #CFEFF7; --surface: rgba(255, 255, 255, 0.82); --surface-2: rgba(255, 255, 255, 0.64); --surface-3: rgba(222, 243, 248, 0.95);
  --line: rgba(11, 58, 74, 0.22); --line-soft: rgba(11, 58, 74, 0.12);
  --ink: #0B3A4A; --ink-2: #35667A; --ink-3: #506D79;
  --yellow: #0A8BA3; --yellow-hi: #12A6C2; --yellow-dim: #076577; --yellow-ghost: rgba(10, 139, 163, 0.14); --yellow-edge: rgba(10, 139, 163, 0.4);
  --go: #15803D; --warn: #C2410C; --stop: #DC2626; --info: #1D4ED8;
}
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #F3EEE3; --surface: #FFFDF8; --surface-2: #F6F1E7; --surface-3: #EDE5D6;
  --line: #D8CDB9; --line-soft: #E7DFCF;
  --ink: #2B2620; --ink-2: #6B6157; --ink-3: #6D665C;
  --yellow: #C0641E; --yellow-hi: #D9773A; --yellow-dim: #8F4A16; --yellow-ghost: rgba(192, 100, 30, 0.11); --yellow-edge: rgba(192, 100, 30, 0.35);
  --go: #15803D; --warn: #B45309; --stop: #B91C1C; --info: #1D4ED8;
}
:root[data-theme="paper"] body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(43, 38, 32, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

/* Glass bars over the scenes. */
:root[data-theme="aurora"] .rail, :root[data-theme="sunset"] .rail, :root[data-theme="forest"] .rail { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); border-right-color: var(--line-soft); }
:root[data-theme="aurora"] .topbar, :root[data-theme="sunset"] .topbar, :root[data-theme="forest"] .topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(18px); }
:root[data-theme="aurora"] .tabs, :root[data-theme="sunset"] .tabs, :root[data-theme="forest"] .tabs { background: color-mix(in srgb, var(--bg) 82%, transparent); }
:root[data-theme="ocean"] .rail { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(18px); border-right-color: var(--line-soft); }
:root[data-theme="ocean"] .topbar { background: rgba(255, 255, 255, 0.64); backdrop-filter: blur(18px); }
:root[data-theme="ocean"] .tabs { background: rgba(255, 255, 255, 0.8); }
:root[data-theme="ocean"] .card, :root[data-theme="ocean"] .rows, :root[data-theme="ocean"] .note-page, :root[data-theme="ocean"] .day, :root[data-theme="ocean"] .calc, :root[data-theme="ocean"] .shortcut { box-shadow: 0 8px 28px rgba(10, 60, 80, 0.12); }
:root[data-theme="ocean"] .btn-primary, :root[data-theme="paper"] .btn-primary { background: var(--yellow); border-color: var(--yellow); color: #FFFFFF; }
:root[data-theme="ocean"] .brand-mark, :root[data-theme="paper"] .brand-mark { background: var(--yellow); color: #FFFFFF; }
:root[data-theme="ocean"] .note-glyph, :root[data-theme="paper"] .note-glyph { background: color-mix(in srgb, var(--glyph, var(--yellow)) 16%, white); }
:root[data-theme="ocean"] .skeleton, :root[data-theme="paper"] .skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%); background-size: 300% 100%; }

/* Scene motion. */
.au-stars circle { animation: au-twinkle 5s ease-in-out infinite; }
@keyframes au-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.au-r1 { animation: au-drift 26s ease-in-out infinite alternate; }
.au-r2 { animation: au-drift 34s ease-in-out infinite alternate-reverse; }
@keyframes au-drift { from { transform: translate(-40px, 0) } to { transform: translate(40px, -18px) } }
.su-sun { animation: su-breathe 9s ease-in-out infinite alternate; transform-origin: 1040px 600px; }
@keyframes su-breathe { from { transform: scale(1) } to { transform: scale(1.04) } }
.fo-flies .ff { animation: fo-blink 5s ease-in-out infinite; }
@keyframes fo-blink { 0%, 100% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0.6; } }
.oc-w1 { animation: oc-wave 14s linear infinite; }
.oc-w2 { animation: oc-wave 10s linear infinite reverse; }
.oc-w3 { animation: oc-wave 18s linear infinite; }
@keyframes oc-wave { from { transform: translateX(0) } to { transform: translateX(-300px) } }
@media (prefers-reduced-motion: reduce) { .au-stars circle, .au-r1, .au-r2, .su-sun, .fo-flies .ff, .oc-w1, .oc-w2, .oc-w3 { animation: none; } }

/* Theme picker swatches. */
.theme-swatch-aurora { background: linear-gradient(180deg, #03060F, #0E1F3F); }
.theme-swatch-aurora::before { content: ''; position: absolute; left: -10%; right: -10%; top: 26%; height: 22px; border-radius: 50%; background: linear-gradient(90deg, transparent, #34D399, #22D3EE, #A78BFA, transparent); filter: blur(6px); opacity: 0.8; }
.theme-swatch-aurora::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: #03070F; clip-path: polygon(0 60%, 15% 30%, 30% 55%, 50% 20%, 70% 50%, 85% 25%, 100% 45%, 100% 100%, 0 100%); }
.theme-swatch-sunset { background: linear-gradient(180deg, #2A0F4E 0%, #7A2D62 35%, #E8603F 62%, #FFB24A 82%, #FFD27A 100%); }
.theme-swatch-sunset::before { content: ''; position: absolute; left: 58%; top: 46%; width: 22px; height: 22px; border-radius: 50%; background: #FFF0C2; box-shadow: 0 0 18px 8px rgba(255, 178, 74, 0.6); }
.theme-swatch-sunset::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: #22102F; clip-path: polygon(0 70%, 12% 40%, 28% 65%, 45% 30%, 62% 60%, 78% 35%, 100% 55%, 100% 100%, 0 100%); }
.theme-swatch-forest { background: linear-gradient(180deg, #03130C, #0E3A27); }
.theme-swatch-forest::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: #04160E; clip-path: polygon(0 100%, 6% 40%, 12% 100%, 18% 20%, 26% 100%, 32% 45%, 38% 100%, 46% 10%, 54% 100%, 60% 40%, 66% 100%, 74% 25%, 82% 100%, 88% 50%, 94% 100%, 100% 100%); }
.theme-swatch-forest::after { content: ''; position: absolute; left: 30%; top: 30%; width: 4px; height: 4px; border-radius: 50%; background: #F5D061; box-shadow: 0 0 6px 2px rgba(245, 208, 97, 0.8), 40px 10px 0 0 #F5D061, 40px 10px 6px 2px rgba(245, 208, 97, 0.8), 18px 26px 0 0 #F5D061, 18px 26px 6px 2px rgba(245, 208, 97, 0.8); }
.theme-swatch-ocean { background: linear-gradient(180deg, #CFEFF7 0%, #F6FCFD 50%, #8FD9EA 50%, #2E9DBF 100%); }
.theme-swatch-ocean::before { content: ''; position: absolute; right: 14px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #FFF9DC; box-shadow: 0 0 12px 5px rgba(255, 243, 196, 0.8); }
.theme-swatch-ocean::after { content: ''; position: absolute; left: 0; right: 0; top: 48%; height: 10px; background: radial-gradient(circle at 10px 10px, #6FCBE0 8px, transparent 9px) 0 0/20px 10px repeat-x; }
.theme-swatch-paper { background: #F3EEE3; background-image: radial-gradient(rgba(43, 38, 32, 0.14) 1px, transparent 1.2px); background-size: 10px 10px; border: 1px solid #D8CDB9; }
.theme-swatch-paper::before { content: ''; position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 6px; background: #C0641E; }
.theme-swatch-paper::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 24px; border-radius: 6px; background: #FFFDF8; border: 1px solid #D8CDB9; }

/* Today's agenda card on Home folds away behind one line. */
.home-today-fold { display: flex; flex-direction: column; gap: 10px; }
.home-today-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--surface);
}
.home-today-head .blk-marker.tog { margin: 0; transition: transform 0.15s var(--ease); }
.home-today-fold[data-open="0"] .home-today-head .blk-marker.tog { transform: rotate(-90deg); }
.home-today-title { font-weight: 700; font-size: calc(15px * var(--ts)); letter-spacing: -0.01em; }

/* Ocean: headings and hints stay legible over the water. */
:root[data-theme="ocean"] .section-head h2, :root[data-theme="ocean"] .hint, :root[data-theme="ocean"] .dim { color: var(--ink-2); text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85); }
:root[data-theme="ocean"] .section-head .rule { background: rgba(11, 58, 74, 0.25); }

/* Projects: an icon beside the name, and the potential as circles. */
.proj-glyph { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.proj-glyph svg { width: 17px; height: 17px; }
.proj-potential { flex: none; letter-spacing: -2px; font-size: calc(10px * var(--ts)); line-height: 1; }

/* Picking one, in the project sheet. */
.pot-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.pot-picker button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 46px; padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; cursor: pointer;
}
.pot-picker button[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow-ghost); color: var(--ink); }
.pot-dots { letter-spacing: -2px; font-size: calc(11px * var(--ts)); line-height: 1; }
.pot-label { font-size: calc(10.5px * var(--ts)); }

/* Phones: the project head now carries an icon, the potential and two
   arrows, so tighten everything around the title to keep it readable. */
@media (max-width: 700px) {
  .proj-head { gap: 4px; padding-right: 4px; }
  .proj-head .btn-icon { width: 30px; min-width: 30px; height: 36px; min-height: 36px; padding: 0; }
  /* A long title takes a second line instead of shrinking to a few letters. */
  .proj-head .proj-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25; }
  .proj-glyph { width: 24px; height: 24px; border-radius: 7px; }
  .proj-glyph svg { width: 15px; height: 15px; }
  .proj-potential { font-size: calc(8.5px * var(--ts)); letter-spacing: -3px; margin-right: 2px; }
  .proj-head .pill { padding: 2px 6px; }
}

/* Projects: finished ones fold away under their space. */
.proj-done-toggle { margin: 2px 0 8px; }
.proj-done[hidden] { display: none !important; }

/* The whole head row folds the card, so it reads as clickable — but the
   title keeps its own cursor and the buttons in the row keep theirs. */
.proj-head { cursor: pointer; }
.proj-head .btn { cursor: pointer; }

/* Family: the relationship tag, shown whether the card is open or shut. */
.fam-relation {
  flex: none; padding: 2px 8px; border-radius: 999px;
  font-size: calc(11px * var(--ts)); font-weight: 600; white-space: nowrap;
  color: var(--glyph, var(--yellow));
  background: color-mix(in srgb, var(--glyph, var(--yellow)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glyph, var(--yellow)) 34%, transparent);
}
@media (max-width: 700px) {
  .fam-relation { padding: 1px 6px; font-size: calc(10px * var(--ts)); }
}
/* Name and relationship share the space left by the buttons: side by side on
   a wide screen, the tag under the name on a phone, so neither shrinks to a letter. */
.fam-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.fam-name .proj-title { min-width: 0; max-width: 100%; }
.fam-member .fam-relation { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fam-member .proj-head .btn-icon { flex: none; }
@media (max-width: 700px) {
  .fam-name { flex-direction: column; align-items: flex-start; gap: 1px; }
  .fam-member .proj-head .blk-marker.tog { width: 30px; height: 36px; }
}

/* Icon picker: a search box above the grid. */
.icon-field { display: flex; flex-direction: column; gap: 8px; }
.icon-search { min-height: 38px; font-size: calc(13px * var(--ts)); }
.icon-search::-webkit-search-cancel-button { filter: invert(0.6); }
.icon-picker button[hidden] { display: none !important; }
.icon-none { margin: 0; }

/* A tiered project: a second thin trim inside the space's own, in the tier
   colour, and the icon takes that colour too. */
.proj { position: relative; }
.proj[data-tier]::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tier); z-index: 1;
}
.proj[data-tier] > .proj-head, .proj[data-tier] > .proj-body { position: relative; z-index: 2; }
.pot-picker .tier-dot {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tier); margin: 1px auto 0;
}

/* Space headings carry their own move arrows. */
.section-head .space-move { width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; }

/* Projects shows every board at once, each under its own name. */
.board-group { display: flex; flex-direction: column; }
.board-group + .board-group { margin-top: 30px; }
.board-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.board-group-name {
  font-family: var(--f-mono); font-size: calc(11px * var(--ts)); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); flex: none;
}
.space-board {
  font-family: var(--f-mono); font-size: calc(9.5px * var(--ts)); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); flex: none; margin-left: -2px;
}

/* The board-group heading uses the same divider rule as a section heading. */
.board-group-head .rule { flex: 1; height: 1px; background: var(--line-soft); }
:root[data-theme="ocean"] .board-group-head .rule { background: rgba(11, 58, 74, 0.25); }

/* Spaces need room to read as separate things. Inside a board group they had
   none at all. A divider now sits between one category and the next, with
   the same space either side of it. */
.board-group { gap: 26px; }


/* A whole board folds away on the combined page. */
.board-group-head { cursor: pointer; }
.board-group-head .blk-marker.tog { margin: 0; flex: none; color: var(--yellow); transition: transform 0.15s var(--ease); }
.board-group[data-open="0"] .board-group-head .blk-marker.tog { transform: rotate(-90deg); }
.board-group[data-open="0"] .board-group-head { margin-bottom: 0; }
.board-body[hidden] { display: none !important; }
.board-body { display: flex; flex-direction: column; gap: 17px; }

/* The board name on Projects is the page's top-level heading; give it size. */
.board-group-name { font-size: calc(15px * var(--ts)); letter-spacing: 0.14em; }
.board-group-head .blk-marker.tog { width: 28px; height: 28px; }
.board-group-head .blk-marker.tog svg { width: 18px; height: 18px; }

/* A board heading sits close to its first space: the two rows' own padding
   is all that separates them. Room between spaces and boards is unchanged. */
.board-group { gap: 0; }
.board-group-head { margin-bottom: 0; }

/* Food: a day strip, four meal boxes, and the week before folded under them. */
.food-strip { display: flex; align-items: center; gap: 4px; min-width: 0; }
.food-date {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 128px;
  padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  cursor: pointer; transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.food-date:hover { background: var(--surface-2); }
.food-date.is-today { border-color: var(--yellow-edge); background: var(--yellow-ghost); cursor: default; }
.food-date-rel { font-weight: 700; font-size: calc(13.5px * var(--ts)); line-height: 1.15; letter-spacing: 0.01em; }
.food-date.is-today .food-date-rel { color: var(--yellow); }
.food-date-abs { font-size: calc(11px * var(--ts)); color: var(--ink-2); line-height: 1.15; }
.food-saved { font-size: calc(11px * var(--ts)); flex: none; }

.meals { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .meals { grid-template-columns: 1fr 1fr; } }
.meal {
  --chip: var(--yellow);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px 14px 12px 16px; border: 1px solid var(--line-soft); border-left: 3px solid var(--chip); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--chip) 6%, var(--surface));
}
.meal-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.meal-glyph { font-size: calc(19px * var(--ts)); line-height: 1; flex: none; }
.meal-name { margin: 0; font-size: calc(13px * var(--ts)); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip); }
.meal-again { flex: none; color: var(--ink-2); font-size: calc(12px * var(--ts)); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-text { min-height: 64px; font-size: calc(15.5px * var(--ts)); line-height: 1.5; padding: 0 0 2px; }

.food-week summary {
  list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--ink-2); padding: 4px 2px;
}
.food-week summary::-webkit-details-marker { display: none; }
.food-week summary .ico { transition: transform 0.15s var(--ease); }
.food-week[open] summary .ico { transform: rotate(180deg); }
.food-week .rows { margin-top: 8px; }
.food-past { align-items: center; gap: 12px; padding: 11px 13px 11px 15px; }
.food-past-day { flex: none; width: 92px; font-weight: 700; font-size: calc(13px * var(--ts)); }
.food-past-meals { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.food-past-meal { display: flex; gap: 7px; min-width: 0; font-size: calc(13px * var(--ts)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-past-glyph { flex: none; }
@media (max-width: 480px) {
  .food-past { flex-wrap: wrap; }
  .food-past-day { width: auto; }
  .food-past-meals { flex-basis: 100%; }
  .meal-again { max-width: 48%; }
}

/* Closed categories sit closer together: the stack gap alone, no extra margin. */
.board-group[data-open="0"] + .board-group { margin-top: 0; }


/* A space heading never widens the page: the name gives way (ellipsis) before the buttons do. */
.board-body .section-head { min-width: 0; }
.board-body .section-head h2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-body .section-head .spacer { flex: 1 1 0; min-width: 0; }
.board-body .section-head .btn { flex: none; }
#view { overflow-x: clip; }
@media (max-width: 480px) {
  /* On a phone the space's "+ Project" button is its icon alone, so the name keeps its room. */
  .board-body .section-head [data-add-project] { font-size: 0; gap: 0; padding-left: 8px; padding-right: 8px; }
}

/* The Emails refresh button turns while the inbox is being sorted. */
.btn.is-spinning .ico { animation: spin 0.9s linear infinite; }

/* House: a chore ticked today shrinks to a thin line, so what is left has the room. */
.row[data-chore][data-checked="1"] { padding: 5px 15px; align-items: center; }
.row[data-chore][data-checked="1"] .row-title { font-size: calc(13px * var(--ts)); }
.row[data-chore][data-checked="1"] .row-meta { display: none; }
.row[data-chore][data-checked="1"] .check { width: 20px; height: 20px; min-width: 20px; min-height: 20px; }
/* The tick box is small to look at but a thumb-sized target: 44px of invisible hit area around it. */
.row[data-chore] .check { position: relative; }
.row[data-chore] .check::before { content: ""; position: absolute; inset: -11px; }
.row[data-chore][data-checked="1"] .row-side .btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }

/* Notes and People: each row is its own pill, with air between, rather than one joined list. */
.rows-notes, .rows-pills { display: flex; flex-direction: column; gap: 10px; border: 0; border-radius: 0; background: none; overflow: visible; }
.rows-notes .row, .rows-pills .row { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.rows-notes .row:last-child, .rows-pills .row:last-child { border-bottom: 1px solid var(--line-soft); }

/* Bullet blocks: a plain round dot, the kind a "- " at the start of a line makes. */
.blk-marker.bullet { color: var(--ink-2); }
.blk-marker.bullet::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Food as standing lists: four cards, each a block editor. */
.meal .blk-list { min-height: 48px; padding: 2px 0; }
.meal-head { margin-bottom: 2px; }
/* Home: favourites and sections are pills too, with only a sliver between. */
.rows-pills-tight { gap: 5px; }

/* 3D: floating blocks behind, and a face with real depth — cards sit up off
   the page on a thick lower edge, buttons press down when tapped. */
:root[data-theme="3d"] {
  --bg: #0B0C22; --surface: #1B1D3E; --surface-2: #24274F; --surface-3: #2E3262;
  --line: rgba(155, 148, 255, 0.28); --line-soft: rgba(155, 148, 255, 0.14);
  --ink: #F2F3FF; --ink-2: #B4B6E0; --ink-3: #7B7EAE;
  --yellow: #4EE1FF; --yellow-hi: #8AEEFF; --yellow-dim: #2AA6C0; --yellow-ghost: rgba(78, 225, 255, 0.12); --yellow-edge: rgba(78, 225, 255, 0.4);
  --info: #7C6CFF; --go: #5CF0A8; --warn: #FFB26B; --stop: #FF6B8B;
  --td-edge: #08091C; --td-edge-2: #3E3A8C;
}
:root[data-theme="3d"] body { background: transparent; }
:root[data-theme="3d"] .sky, :root[data-theme="3d"] .scene-3d { display: block; }
:root[data-theme="3d"] .rail { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(18px); border-right-color: var(--line-soft); }
:root[data-theme="3d"] .topbar { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px); }
:root[data-theme="3d"] .tabs { background: color-mix(in srgb, var(--bg) 84%, transparent); box-shadow: 0 -1px 0 var(--line-soft); }

/* Raised blocks: a bright top edge, a thick dark base, a soft drop. */
:root[data-theme="3d"] .card, :root[data-theme="3d"] .note-page, :root[data-theme="3d"] .day, :root[data-theme="3d"] .meal,
:root[data-theme="3d"] .proj, :root[data-theme="3d"] .cd, :root[data-theme="3d"] .shortcut, :root[data-theme="3d"] .stat,
:root[data-theme="3d"] .calc, :root[data-theme="3d"] .rows-pills .row, :root[data-theme="3d"] .rows:not(.rows-pills):not(.rows-notes),
:root[data-theme="3d"] .fam-member, :root[data-theme="3d"] .theme-card, :root[data-theme="3d"] .food-date {
  border-color: var(--td-edge-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 0 var(--td-edge), 0 14px 26px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
:root[data-theme="3d"] .rows-pills .row { background: var(--surface); }
:root[data-theme="3d"] .rows-pills-tight { gap: 11px; }
:root[data-theme="3d"] .rows-pills, :root[data-theme="3d"] .rows-notes { gap: 14px; }
:root[data-theme="3d"] .stack { gap: 32px; }

/* Buttons are keys: up at rest, down when pressed. */
:root[data-theme="3d"] .btn:not(.btn-ghost):not(.blk-marker) {
  border-color: var(--td-edge-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 0 var(--td-edge), 0 8px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
  transition: transform 0.08s var(--ease), box-shadow 0.08s var(--ease);
}
:root[data-theme="3d"] .btn:not(.btn-ghost):not(.blk-marker):active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 var(--td-edge), 0 2px 6px rgba(0, 0, 0, 0.4); }
:root[data-theme="3d"] .btn-primary { background: linear-gradient(180deg, #8AEEFF, #2FC6E8); border-color: #1D8FAA; color: #04222B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 0 #0F5A6E, 0 8px 14px rgba(0, 0, 0, 0.4); }
:root[data-theme="3d"] .btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 #0F5A6E, 0 2px 6px rgba(0, 0, 0, 0.4); }
:root[data-theme="3d"] .brand-mark { background: linear-gradient(180deg, #8AEEFF, #2FC6E8); color: #04222B; box-shadow: 0 3px 0 #0F5A6E; }
:root[data-theme="3d"] .note-glyph { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.45); }
:root[data-theme="3d"] .check { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 var(--td-edge); }
:root[data-theme="3d"] .pill { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
:root[data-theme="3d"] .input, :root[data-theme="3d"] .select { box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06); border-color: var(--td-edge-2); }
:root[data-theme="3d"] .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%); background-size: 300% 100%; }
:root[data-theme="3d"] h1, :root[data-theme="3d"] .board-group-name, :root[data-theme="3d"] .meal-name { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }

/* The blocks drift, each on its own beat; the stars breathe. */
.td-cube { transform-box: fill-box; transform-origin: center; }
.td-c1 { animation: td-bob 7s ease-in-out infinite alternate; }
.td-c2 { animation: td-bob 9s ease-in-out infinite alternate-reverse; }
.td-c3 { animation: td-bob 6s ease-in-out infinite alternate; }
.td-c4 { animation: td-bob 8s ease-in-out infinite alternate-reverse; }
.td-c5 { animation: td-bob 10s ease-in-out infinite alternate; }
.td-c6 { animation: td-bob 7.5s ease-in-out infinite alternate-reverse; }
@keyframes td-bob { from { translate: 0 0; } to { translate: 0 -18px; } }
.td-stars circle { animation: au-twinkle 6s ease-in-out infinite; }
.td-grid { animation: td-slide 4s linear infinite; }
@keyframes td-slide { from { opacity: 0.55; } to { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .td-cube, .td-stars circle, .td-grid { animation: none; } }

.theme-swatch-3d { background: linear-gradient(180deg, #07081A 0%, #11133A 55%, #1B1E52 100%); }
.theme-swatch-3d::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: repeating-linear-gradient(90deg, rgba(78,225,255,0.5) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(124,108,255,0.1), rgba(78,225,255,0.45)); border-top: 1px solid #4EE1FF; }
.theme-swatch-3d::after { content: ''; position: absolute; left: 44%; top: 22%; width: 22px; height: 22px; background: linear-gradient(135deg, #B9B3FF, #5A50E0 55%, #3A31A8); transform: rotate(45deg); box-shadow: 0 6px 0 #08091C; }

/* Project links in blocks: the [[ picker, and the chips a [[Project]] makes. */
.proj-pop { flex-direction: column; flex-wrap: nowrap; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); gap: 2px; }
.proj-pop button { font-size: calc(13.5px * var(--ts)); font-weight: 600; width: 100%; justify-content: space-between; text-align: left; }
.proj-pop button small { font-weight: 400; color: var(--ink-3); flex: none; }
.proj-pop-note { padding: 6px 8px; font-size: calc(12px * var(--ts)); color: var(--ink-3); }

/* Markers sit on the centre of the block's first line, whatever the text scale. */
.blk-marker { margin-top: calc((14.5px * var(--ts) * 1.55 - 24px) / 2); }
.blk-marker.check { margin-top: calc((14.5px * var(--ts) * 1.55 - 20px) / 2); }
.blk-marker.tog { margin-top: calc((14.5px * var(--ts) * 1.55 - 24px) / 2 + 1px); }

/* A note embedded at the top of a board. */
.note-embed { padding: 14px 16px 12px; gap: 6px; }
.note-embed-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.note-embed-saved { font-size: calc(11px * var(--ts)); flex: none; }
.note-embed .blk-list { min-height: 44px; }
.note-embed .link { background: none; border: 0; padding: 0; color: var(--yellow); font: inherit; cursor: pointer; text-decoration: underline; }

/* The page refresh button sits with Back and Home at the left of the top bar. */
.topbar-home + .topbar-refresh, .topbar-back + .topbar-refresh { margin-left: -10px; }
.topbar-refresh { color: var(--ink-2); }
.topbar-refresh + .topbar-text { margin-left: 8px; }

/* [[Project]] drawn in place: a pill layer over the textarea, same text, same metrics. */
.blk-text { grid-row: 1; }
.blk-mirror {
  grid-column: 2; grid-row: 1; pointer-events: none; min-width: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  font-family: inherit; font-size: calc(14.5px * var(--ts)); line-height: 1.55; padding: 0; color: var(--ink);
}
.blk-list-free .blk[data-type="paragraph"] .blk-mirror { grid-column: 1; }
.blk[data-type="heading"] .blk-mirror { font-size: calc(15.5px * var(--ts)); font-weight: 700; letter-spacing: -0.01em; }
.blk[data-checked="1"] .blk-mirror { color: var(--ink-3); text-decoration: line-through; }
.blk.blk-has-links .blk-text { color: transparent; caret-color: var(--ink); }
.blk-has-links .blk-text::selection { background: color-mix(in srgb, var(--yellow) 30%, transparent); }
.blk-ref {
  position: relative; pointer-events: auto; cursor: pointer; color: var(--ref, var(--yellow));
  background: color-mix(in srgb, var(--ref, var(--yellow)) 14%, transparent); border-radius: 6px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ref, var(--yellow)) 32%, transparent);
}
.blk-ref:hover { background: color-mix(in srgb, var(--ref, var(--yellow)) 24%, transparent); }
.blk-ref-br { color: transparent; }
/* The pill grows outward (negative margin, matching padding) so the text
   underneath keeps its exact width; the icon sits in the grown space plus
   the hidden "[[". */
.blk-ref { margin-left: -8px; padding-left: 8px; margin-right: -4px; padding-right: 4px; }
/* Inside the pill the title slides 5px right (a visual shift only, the
   text's width is untouched) so the icon has the hidden "[[" plus that
   5px plus the lead-in to sit in, with air on both sides. */
.blk-ref-open { position: relative; }
.blk-ref-txt { position: relative; left: 6px; }
.blk-ref-ico { position: absolute; left: -8px; right: -6px; top: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ref, var(--yellow)); }
.blk-ref-ico .ico { width: 12px; height: 12px; }
.proj-pop button { gap: 8px; }
.proj-pop-ico { display: inline-flex; flex: none; }
.proj-pop-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A project scrolled to by link stops clear of the sticky top bar. */
.proj { scroll-margin-top: 76px; }
/* A project in a narrow column (the split pane on a wide screen) sizes by its own
   width, not the window's: the counts and "1m ago" go, the title may take two lines. */
.proj { container-type: inline-size; }
@container (max-width: 600px) {
  .proj-head .proj-meta { display: none; }
  .proj-head .proj-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25; }
}

/* A board as a plain list: the project cards alone, a little closer together. */
.proj-simple { gap: 8px; }

/* Food boxes: the same free-text note box as elsewhere, with the meal's colour down the side. */
.note-page.meal { padding: 14px 16px 12px 18px; gap: 6px; }
.note-page.meal .blk-list { min-height: 84px; }

/* On the agenda, a project link at the end of a line is followed by the project's next task. */
.blk-ref-next { color: var(--ink-2); }
.blk[data-checked="1"] .blk-ref-next { color: var(--ink-3); }

/* A pill that starts its line has no space to grow into: it keeps to the text column. */
.blk-mirror > .blk-ref:first-child { margin-left: -3px; padding-left: 3px; }
.blk-mirror > .blk-ref:first-child .blk-ref-ico { left: -3px; right: -6px; }

/* On a phone the pickers are a bar above the keyboard, wide as the screen. */
.emoji-pop.pop-bar { width: calc(100vw - 16px); max-width: none; max-height: 42vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5); }
.proj-pop.pop-bar button { min-height: 40px; }

/* Phone header, one line: icon and title on the left; Home and Refresh as
   small outlined buttons on the right, then the page's own buttons. Back is
   left to the phone's own back gesture. */
@media (max-width: 700px) {
  .topbar { column-gap: 8px; padding: 8px 14px; }
  #topbar-title { display: contents; }
  #topbar-title .topbar-glyph { order: 0; }
  #topbar-title .topbar-text { order: 1; flex: 1 1 auto; min-width: 0; padding-right: 4px; }
  #topbar-title .topbar-back:not(.topbar-home):not(.topbar-refresh) { display: none; }
  #topbar-title .topbar-home { order: 2; }
  #topbar-title .topbar-refresh { order: 3; }
  .topbar-actions { order: 4; flex: none; margin-left: 0 !important; }
  .topbar-actions:empty { display: none; }
  #topbar-title .topbar-home, #topbar-title .topbar-refresh {
    margin: 0 !important; width: 36px; height: 36px; min-height: 36px; flex: none;
    border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--ink-2);
  }
  #topbar-title .topbar-home svg, #topbar-title .topbar-refresh svg { width: 16px; height: 16px; }
}

/* Calendar events on the agenda can be ticked off: a box at the right of the pill. */
.blk[data-type="event"] .blk-side { grid-column: 3; display: flex; align-items: center; padding-right: 2px; }
.blk[data-type="event"] .evt-check { width: 20px; height: 20px; border-radius: 6px; }
/* The box stays small; the finger gets a 40px target around it. */
.blk[data-type="event"] .evt-check { position: relative; }
.blk[data-type="event"] .evt-check::after { content: ""; position: absolute; inset: -10px; }
.blk[data-type="event"][data-checked="1"] .blk-text { color: var(--ink-3); text-decoration: line-through; }
.blk[data-type="event"][data-checked="1"] .blk-marker { opacity: 0.55; }
@media (max-width: 700px) {
  /* The title never shrinks past a few letters; the Hide-headings button is its icon alone. */
  #topbar-title .topbar-text { min-width: 88px; }
  .topbar-actions [data-simple] { font-size: 0; gap: 0; padding-left: 8px; padding-right: 8px; }
}

/* The embedded note folds: chevron and title open it; shut until opened. */
.note-embed-tog { flex: none; margin: 0; color: var(--ink-2); transition: transform 0.15s var(--ease); }
.note-embed[data-open="0"] .note-embed-tog { transform: rotate(-90deg); }
.note-embed-title { background: none; border: 0; padding: 0; font: inherit; font-size: calc(12px * var(--ts)); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-embed[data-open="0"] { padding-bottom: 10px; }
.note-embed-body { padding-top: 4px; }

/* Event pills keep a real third column for their tick box on every screen. */
.blk[data-type="event"] { grid-template-columns: 24px minmax(0, 1fr) auto !important; padding-right: 8px; }
.blk[data-type="event"] .blk-side { padding-left: 6px; }

/* Split screen (desktop): two pages side by side. */
.panes { display: block; }
.pane2 { display: none; }
.rail-split { display: none; }
/* Split screen needs room for two real pages: from 1100px (app.js splitAvailable agrees). */
@media (min-width: 1100px) {
  .panes.is-split { display: flex; align-items: stretch; }
  .panes.is-split > #view { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
  .pane2 {
    display: flex; flex-direction: column; flex: 0 0 var(--split-w, 50%); min-width: 0;
    border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 30%, transparent);
    position: sticky; top: 0; max-height: 100dvh; overflow-y: auto;
  }
  .pane2[hidden] { display: none; }
  .pane2-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px 8px; position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
  .pane2-head .topbar-glyph { width: 30px; height: 30px; border-radius: 9px; }
  .pane2-title { margin: 0; font-size: calc(16px * var(--ts)); font-weight: 650; letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pane2-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 18px 0; }
  .pane2-actions:empty { display: none; }
  .pane2-view { padding: 16px 20px 60px; max-width: none; width: 100%; margin: 0; }
  .rail-link { position: relative; }
  .rail-split {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 24px; height: 24px; flex: none;
    border: 1px solid transparent; border-radius: 7px; background: none; color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity 0.12s var(--ease);
  }
  .rail-link:hover .rail-split, .rail-split:focus-visible, .rail-split[aria-pressed="true"] { opacity: 1; }
  .rail-split:hover { border-color: var(--line); color: var(--ink); background: var(--surface-3); }
  .rail-split[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow-edge); background: var(--yellow-ghost); }
}

/* Back · Home · Refresh sit right after the page title, on every screen. */
#topbar-title .topbar-glyph { order: 0; }
#topbar-title .topbar-text { order: 1; flex: 0 1 auto; min-width: 0; }
#topbar-title .topbar-back, #topbar-title .topbar-home, #topbar-title .topbar-refresh { order: 2; }
#topbar-title .topbar-text + .topbar-back, #topbar-title .topbar-text + .topbar-home, #topbar-title .topbar-text + .topbar-refresh { margin-left: 6px; }
@media (max-width: 700px) {
  #topbar-title .topbar-text { flex: 0 1 auto; }
  .topbar-actions { margin-left: auto !important; }
}
.people-move { display: flex; gap: 2px; margin-top: 0; align-self: center; }

/* ============================================================ tasks ==== */

.tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tk-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft);
  text-align: left; color: inherit; cursor: pointer; font: inherit;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.tk-card:hover { background: var(--surface-2); border-color: var(--line); }
.tk-card-top { display: flex; align-items: center; justify-content: space-between; }
.tk-card-icon, .tk-list-dot {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--c, var(--yellow)); color: #FFFFFF;
}
.tk-card-count { font-size: calc(24px * var(--ts)); font-weight: 700; line-height: 1; }
.tk-card-label { font-size: calc(14px * var(--ts)); font-weight: 600; color: var(--ink-2); }
.tk-list-head { display: flex; align-items: center; gap: 12px; }
.tk-list-head { min-width: 0; }
/* The list's colour mixed toward the ink: still its colour, but readable on a bright sky or paper too. */
.tk-list-head h2 { margin: 0; font-size: calc(22px * var(--ts)); color: color-mix(in srgb, var(--c, var(--ink)) 60%, var(--ink)); min-width: 0; overflow-wrap: anywhere; }
.tk-check { border-radius: 50%; position: relative; }
/* The round tick is small; its touch area reaches past its edge. */
.tk-check::after { content: ''; position: absolute; inset: -10px; }
/* An icon and its words ("↻ Every 3 days") stay on one line together. */
.tk-row .row-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.tk-row[data-checked="1"] .row-title { text-decoration: line-through; color: var(--ink-3); }
.tk-row .row-body { cursor: pointer; }
.tk-over { color: var(--stop); font-weight: 600; }
.tk-add { display: flex; align-items: center; gap: 12px; padding: 11px 15px; color: var(--ink-3); }
.tk-add-plus { width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; }
.tk-add input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--ink); font: inherit; font-size: calc(14.5px * var(--ts)); padding: 2px 0;
}
.tk-add input:focus { color: var(--ink); }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.tk-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; }
.tk-switch input { width: 20px; height: 20px; accent-color: var(--yellow); }
.tk-switch span { display: inline-flex; align-items: center; gap: 6px; }


/* ------------------------------------------------------------ sign in ----
 * The sign-in screen takes the whole page: no rail, no bars, one card.
 */
body.is-public .rail, body.is-public .tabs, body.is-public .topbar, body.is-public .pane2 { display: none !important; }
body.is-public .shell { display: block; }
body.is-public main#view { max-width: none; padding: 0; }
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; }
.auth-back { width: 100%; max-width: 420px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.auth-back:hover { color: var(--ink); }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-name { font-size: calc(20px * var(--ts)); font-weight: 700; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.auth-tabs button { border: 0; background: transparent; color: var(--ink-2); padding: 9px 10px; border-radius: calc(var(--r-md) - 4px); font: inherit; font-weight: 600; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line-soft); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .field > span { font-size: calc(12.5px * var(--ts)); color: var(--ink-2); }
.auth-submit { min-height: 44px; justify-content: center; }
.auth-error { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--stop) 14%, transparent); color: var(--stop); font-size: calc(13.5px * var(--ts)); }
.auth-foot { margin: 0; text-align: center; }
.link { border: 0; background: none; padding: 0; color: var(--yellow); font: inherit; cursor: pointer; text-decoration: underline; }
.rail-signout { margin-top: 6px; justify-content: flex-start; padding-left: 0; }
/* The guest's way to keep their space: a proper button, not the footer's small mono text. */
.rail-save { margin-top: 8px; width: 100%; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-family: var(--f-sans); font-size: calc(14px * var(--ts)); letter-spacing: 0; font-weight: 650; }


/* ---------------------------------------------------------- front page ----
 * Dusk over water. The scene is an SVG fixed behind the page; the content
 * floats over it on translucent glass. Headings and the main buttons carry
 * the blue-to-red gradient, diagonally.
 */
.landing { --ld-grad: linear-gradient(135deg, #4F8DFF 0%, #B15CFF 45%, #F8515F 100%); position: relative; max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; }
.landing-page { position: relative; min-height: 100vh; }
.landing-bg { position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: -1; background-size: cover; background-position: center top; background-repeat: no-repeat; }
/* A phone is tall and narrow: the scene is stretched further down so the horizon falls below the hero's buttons. */
@media (max-width: 700px) { .landing-bg { height: 165vh; } }
body.is-public { background: #05060F; }
.landing h1, .landing h2 { background: var(--ld-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing .btn-primary { background: var(--ld-grad); border: 0; color: #FFFFFF; font-weight: 700; box-shadow: 0 8px 24px rgba(248, 81, 95, 0.28), 0 2px 8px rgba(79, 141, 255, 0.35); }
.landing .btn-primary:hover { filter: brightness(1.08); }
.landing .btn:not(.btn-primary):not(.btn-ghost) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.landing .btn-ghost { color: #FFFFFF; }
.landing .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.landing-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.landing-brand { display: flex; align-items: center; gap: 10px; }
.landing-brand .brand-mark { background: var(--ld-grad); border: 0; color: #FFFFFF; }
.landing-brand .brand-name { font-size: calc(18px * var(--ts)); font-weight: 700; color: #FFFFFF; }
/* ---- loading screen (index.html #splash; app.js hideSplash) ---- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  background:
    radial-gradient(55% 45% at 28% 30%, rgba(79, 141, 255, 0.22), transparent 70%),
    radial-gradient(50% 42% at 76% 72%, rgba(248, 81, 95, 0.18), transparent 70%),
    radial-gradient(38% 38% at 50% 50%, rgba(177, 92, 255, 0.20), transparent 72%),
    #05060F;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.splash.splash-out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.splash-stars::before, .splash-stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  animation: splash-twinkle 3.6s ease-in-out infinite;
}
.splash-stars::before {
  top: 0; left: 0;
  box-shadow: 12vw 18vh rgba(255,255,255,.7), 26vw 72vh rgba(255,255,255,.5), 41vw 12vh rgba(255,255,255,.6), 63vw 26vh rgba(255,255,255,.8), 78vw 64vh rgba(255,255,255,.5), 88vw 14vh rgba(255,255,255,.6), 8vw 86vh rgba(255,255,255,.4), 54vw 88vh rgba(255,255,255,.6), 93vw 44vh rgba(255,255,255,.5), 34vw 40vh rgba(255,255,255,.35);
}
.splash-stars::after {
  top: 0; left: 0;
  animation-delay: 1.8s;
  box-shadow: 18vw 34vh rgba(255,255,255,.5), 47vw 62vh rgba(255,255,255,.6), 71vw 8vh rgba(255,255,255,.5), 84vw 82vh rgba(255,255,255,.7), 5vw 52vh rgba(255,255,255,.5), 58vw 46vh rgba(255,255,255,.35), 30vw 92vh rgba(255,255,255,.5), 96vw 70vh rgba(255,255,255,.4), 22vw 6vh rgba(255,255,255,.6), 66vw 94vh rgba(255,255,255,.45);
}
.splash-core { position: relative; display: flex; flex-direction: column; align-items: center; }
.splash-mark {
  position: relative;
  width: 108px;
  height: 108px;
  animation: splash-float 3.4s ease-in-out infinite;
}
.splash-planet {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 42px rgba(177, 92, 255, 0.45));
}
.splash-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 196px;
  height: 196px;
  margin: -98px 0 0 -98px;
  animation: splash-spin 5.5s linear infinite;
}
.splash-word {
  margin-top: 54px;
  font-family: var(--f-sans, system-ui, sans-serif);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.splash-bar {
  width: 150px;
  height: 3px;
  margin-top: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.splash-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4F8DFF, #B15CFF, #F8515F);
  animation: splash-slide 1.25s ease-in-out infinite;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes splash-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(250%); } }
@keyframes splash-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-orbit, .splash-bar span, .splash-stars::before, .splash-stars::after { animation: none; }
}

/* "Space" in the wordmark carries the site gradient across its letters. */
.brand-space {
  background: linear-gradient(135deg, #4F8DFF 0%, #B15CFF 45%, #F8515F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.02em;
}
.landing-nav { display: flex; gap: 8px; flex: none; }
.landing-nav .btn { white-space: nowrap; }
/* On a phone the header buttons shorten to "Sign in" and "Create", one line each. */
@media (max-width: 700px) {
  .landing-nav-long { display: none; }
  .landing-nav .btn { padding: 0 12px; }
  .landing-brand .brand-name { font-size: calc(16px * var(--ts)); }
}
.landing-hero { text-align: center; padding: 64px 0 48px; }
/* Gradient text paints only its box, so descenders need a little padding or the "y" loses its tail. */
.landing-hero h1 { margin: 0 0 10px; padding: 0.04em 0 0.14em; font-size: clamp(46px, 11vw, 66px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
/* The second line of the headline sits smaller under "Your Own Space". */
.landing-hero h1 .landing-hero-sub { font-size: 0.74em; letter-spacing: -0.02em; }
.landing-lede { margin: 0 auto; max-width: 620px; font-size: calc(17px * var(--ts)); color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.landing-cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.landing-big { min-height: 48px; padding: 0 22px; font-size: calc(15.5px * var(--ts)); }
.landing-fine { margin: 16px 0 0; color: rgba(255, 255, 255, 0.7); }
.landing-section { padding: 36px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.landing-head { max-width: 640px; margin-bottom: 22px; }
.landing-head h2 { margin: 0 0 6px; font-size: calc(26px * var(--ts)); letter-spacing: -0.02em; display: inline-block; }
.landing-head p { margin: 0; color: rgba(255, 255, 255, 0.78); }
/* The catalogue as chips: an icon and a name each, the description on hover. */
.landing-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px 24px; }
.landing-cat-name { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: calc(12px * var(--ts)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.landing-cat-name svg { color: #F8A15F; }
.landing-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-tile { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(8, 10, 26, 0.74); border: 1px solid rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: calc(14px * var(--ts)); cursor: default; }
.landing-tile strong { font-weight: 600; }
.landing-tile .landing-glyph { width: 28px; height: 28px; border-radius: 8px; }
.landing-promise { display: flex; gap: 12px; align-items: flex-start; background: rgba(8, 10, 26, 0.74); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-lg); padding: 14px; }
.landing-glyph { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #FFFFFF; background: var(--ld-grad); box-shadow: 0 6px 18px rgba(248, 81, 95, 0.25); }
.landing-glyph-sm { width: 38px; height: 38px; border-radius: 11px; }
.landing-tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.landing-tile-body strong { font-size: calc(15px * var(--ts)); color: #FFFFFF; }
.landing-tile-body span { font-size: calc(13px * var(--ts)); color: rgba(255, 255, 255, 0.72); line-height: 1.4; }
.landing-promises { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.landing-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.landing-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(8, 10, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.14); font-size: calc(13.5px * var(--ts)); color: #FFFFFF; }
.landing-chip svg { color: #8AB4FF; }
/* "Ready when you are.": one big card, the words and buttons beside the art. */
.landing-door { padding: 44px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.landing-door-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; padding: 46px 48px; border-radius: 28px; background: linear-gradient(155deg, rgba(34, 26, 78, 0.9) 0%, rgba(12, 13, 34, 0.94) 60%, rgba(40, 14, 38, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); }
/* A thin gradient edge, drawn as a masked border so the card itself stays dark. */
.landing-door-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ld-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6; pointer-events: none; }
.landing-door-copy { position: relative; text-align: left; }
/* Its own line, so the heading can never land beside it. */
.landing-door-copy .landing-eyebrow { display: flex; width: fit-content; }
.landing-door h2 { margin: 16px 0 10px; padding-bottom: 0.08em; font-size: clamp(34px, 5vw, 50px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; display: inline-block; }
.landing-door-lede { margin: 0 0 20px; max-width: 470px; color: rgba(255, 255, 255, 0.8); font-size: calc(17px * var(--ts)); line-height: 1.55; }
.landing-door-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.landing-door-points li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.9); font-size: calc(15px * var(--ts)); }
.landing-door-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #FFFFFF; background: var(--ld-grad); box-shadow: 0 6px 16px rgba(177, 92, 255, 0.28); }
.landing-door .landing-cta { justify-content: flex-start; margin-top: 0; }
.landing-door .landing-cta .btn { gap: 8px; }
.landing-door-art { position: relative; }
.landing-door-art svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
@media (max-width: 860px) {
  .landing-door-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 30px 22px 32px; }
  .landing-door-copy { text-align: center; }
  .landing-door-copy .landing-eyebrow { margin-inline: auto; }
  .landing-door-lede { margin-left: auto; margin-right: auto; }
  .landing-door-points { width: fit-content; margin-inline: auto; text-align: left; }
  .landing-door .landing-cta { justify-content: center; }
  .landing-door-art { order: -1; }
  .landing-door-art svg { max-width: 320px; }
}
/* Common Questions: native details/summary, so it opens without script and reads well to screen readers. */
/* A centred column: the FAQ pill sits above the heading, never beside it. */
.landing-faq-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; margin: 0 auto 26px; }
.landing-faq-head h2 { margin: 12px 0 6px; font-size: calc(30px * var(--ts)); letter-spacing: -0.02em; display: inline-block; }
.landing-faq-head p { margin: 0; color: rgba(255, 255, 255, 0.78); }
.landing-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.88); font-size: calc(12px * var(--ts)); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.landing-faq-list { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) { .landing-faq-list { grid-template-columns: minmax(0, 1fr); } }
.landing-faq-item { background: rgba(8, 10, 26, 0.74); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.landing-faq-item:hover { border-color: rgba(255, 255, 255, 0.26); }
.landing-faq-item[open] { background: rgba(14, 16, 38, 0.88); border-color: rgba(177, 92, 255, 0.5); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.landing-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 14px 16px; border-radius: 16px; color: #FFFFFF; font-weight: 600; font-size: calc(15.5px * var(--ts)); }
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary:focus-visible { outline: 2px solid #B15CFF; outline-offset: 2px; }
.landing-faq-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #FFFFFF; background: var(--ld-grad); box-shadow: 0 6px 18px rgba(177, 92, 255, 0.28); }
.landing-faq-q { flex: 1; min-width: 0; line-height: 1.35; }
.landing-faq-chev { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78); transition: transform 0.2s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease); }
.landing-faq-item[open] .landing-faq-chev { transform: rotate(180deg); background: rgba(177, 92, 255, 0.28); color: #FFFFFF; }
.landing-faq-item p { margin: 0; padding: 0 20px 18px 68px; color: rgba(255, 255, 255, 0.8); font-size: calc(14.5px * var(--ts)); line-height: 1.6; }
@media (max-width: 480px) { .landing-faq-item p { padding-left: 20px; } }
.landing-faq-contact { max-width: 980px; margin: 14px auto 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.22); color: #FFFFFF; text-decoration: none; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.landing-faq-contact:hover { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.04); }
.landing-faq-contact:hover .landing-faq-chev { background: rgba(177, 92, 255, 0.28); color: #FFFFFF; }
.landing-faq-contact-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.landing-faq-contact-text strong { font-weight: 650; font-size: calc(15.5px * var(--ts)); }
.landing-faq-contact-text span { color: rgba(255, 255, 255, 0.72); font-size: calc(14px * var(--ts)); overflow-wrap: anywhere; }
.landing-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); font-size: calc(12.5px * var(--ts)); }
.landing-foot nav { display: flex; gap: 14px; }
.landing-foot a { color: rgba(255, 255, 255, 0.75); text-decoration: none; display: inline-block; padding: 10px 0; }
.landing-foot a:hover { color: #FFFFFF; }

/* --------------------------------------------------------- legal pages ---- */
.legal { max-width: 760px; margin: 0 auto; padding: 20px 20px 60px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 0 20px; font-size: calc(13.5px * var(--ts)); }
.legal-nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.legal-nav a[aria-current="page"], .legal-nav a:hover { color: var(--ink); }
.legal-body h1 { margin: 0 0 4px; font-size: calc(30px * var(--ts)); letter-spacing: -0.02em; }
.legal-meta { margin: 0 0 22px; color: var(--ink-2); font-size: calc(13px * var(--ts)); }
.legal-body h2 { margin: 28px 0 8px; font-size: calc(18px * var(--ts)); }
.legal-body h3 { margin: 16px 0 6px; font-size: calc(15px * var(--ts)); color: var(--ink-2); }
.legal-body p, .legal-body li { font-size: calc(15px * var(--ts)); line-height: 1.6; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 22px; }
.legal-body a { color: var(--yellow); }
body:not(.is-public) .legal { padding-top: 0; }
body:not(.is-public) .legal-nav { display: none; }

/* ---- the Jupiter mark, the Night colour, the welcome tour, rail extras ---- */
.brand-mark.brand-mark-planet { background: none !important; box-shadow: none !important; padding: 0; overflow: hidden; }
.brand-mark-planet .jupiter { width: 100%; height: 100%; display: block; }
:root[data-theme="night"] .btn-primary { background: var(--accent-fill); border-color: transparent; color: var(--accent-ink); }
:root[data-theme="night"] .btn-primary:hover { background: var(--accent-fill); border-color: transparent; filter: brightness(1.1); }
.accent-card { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.accent-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.accent-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.accent-dot-space { background: linear-gradient(135deg, #4F8DFF 0%, #B15CFF 45%, #F8515F 100%); }
.accent-dot[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-ghost); }
.accent-custom { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13px * var(--ts)); color: var(--ink-2); cursor: pointer; }
.accent-custom input { width: 34px; height: 34px; border: 1px dashed var(--line); border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.accent-custom input::-webkit-color-swatch-wrapper { padding: 3px; }
.accent-custom input::-webkit-color-swatch { border: 0; border-radius: 50%; }

/* Settings → Your app → Your address: a name in front of the fixed domain, checked as it is typed. */
.addr-card { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.addr-current { font-family: var(--f-mono); font-size: calc(13px * var(--ts)); color: var(--yellow); overflow-wrap: anywhere; }
.addr-note { margin: 4px 0 0; }
.addr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.addr-input { flex: 1 1 160px; min-width: 0; max-width: 280px; font-family: var(--f-mono); }
.addr-suffix { font-family: var(--f-mono); font-size: calc(14px * var(--ts)); color: var(--ink-2); overflow-wrap: anywhere; }
.addr-status { margin: 0; min-height: 1.4em; font-size: calc(13px * var(--ts)); color: var(--ink-3); }
.addr-status[data-tone="ok"] { color: var(--go); }
.addr-status[data-tone="warn"] { color: var(--warn); }
.addr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) { .addr-input { max-width: none; flex-basis: 100%; } }
.welcome-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.welcome-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.welcome-glyph { width: 36px; height: 36px; border-radius: 10px; background: var(--yellow-ghost); color: var(--yellow); display: grid; place-items: center; }
.welcome-list strong { display: block; margin-bottom: 2px; }
.welcome-list p { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--ts)); }

/* ---- welcome tour (welcome.js): steps with animated diagrams drawn from shapes ---- */
.wt { display: flex; flex-direction: column; gap: 14px; }
.wt-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  color: var(--ink-2);
  background:
    radial-gradient(80% 90% at 20% 0%, color-mix(in srgb, #4F8DFF 16%, transparent), transparent 70%),
    radial-gradient(70% 80% at 100% 100%, color-mix(in srgb, #F8515F 12%, transparent), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--line-soft);
  animation: wt-in 0.32s var(--ease) both;
}
.wt-stage[data-dir="back"] { animation-name: wt-in-back; }
.wt-stage svg { display: block; width: 100%; height: 100%; }
.wt-copy { display: flex; flex-direction: column; gap: 4px; min-height: 104px; }
.wt-count { font-family: var(--f-mono); font-size: calc(10.5px * var(--ts)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.wt-copy h3 { margin: 0; font-size: calc(19px * var(--ts)); letter-spacing: -0.015em; }
.wt-copy p { margin: 0; color: var(--ink-2); font-size: calc(14.5px * var(--ts)); line-height: 1.5; }
.wt-copy b { color: var(--ink); font-weight: 650; }
.wt-dots { display: flex; justify-content: center; gap: 2px; }
.wt-dot { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.wt-dot::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width 0.2s var(--ease), background 0.2s var(--ease); }
.wt-dot[aria-current="step"]::before { width: 20px; background: var(--accent-fill, var(--yellow)); }
.wt-skip { margin-right: auto; flex: 0 0 auto !important; }
@keyframes wt-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes wt-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Shapes. currentColor is the stage's ink; the accent is the theme's signal colour. */
.wt-stage .wt-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-stage .wt-faint { opacity: 0.35; }
.wt-stage .wt-dash { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 7; opacity: 0.45; }
.wt-stage .wt-dashed { stroke-dasharray: 2.5 2.5; }
.wt-stage .wt-accent-line { fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-linejoin: round; }
.wt-stage .wt-accent-ink { fill: none; stroke: #FFFFFF; stroke-linecap: round; stroke-linejoin: round; }
.wt-stage .wt-accent { fill: var(--yellow); }
.wt-stage .wt-bar { fill: currentColor; opacity: 0.28; }
.wt-stage .wt-bar-strong { fill: currentColor; opacity: 0.6; }
.wt-stage .wt-row { fill: currentColor; opacity: 0.1; }
.wt-stage .wt-frame { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.35; stroke-width: 2; }
.wt-stage .wt-screen { fill: var(--bg); opacity: 0.6; }
.wt-stage .wt-panel { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.2; }
.wt-stage .wt-card { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.2; stroke-width: 1.2; }
.wt-stage .wt-faint-card { opacity: 0.7; }
.wt-stage .wt-tile { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1.2; }
.wt-stage .wt-pill { fill: none; stroke: var(--yellow); stroke-width: 1.4; }
.wt-stage .wt-hl { fill: var(--yellow-ghost); stroke: var(--yellow-edge); }
.wt-stage .wt-t { fill: currentColor; font-family: var(--f-sans); font-size: 10.5px; font-weight: 550; }
.wt-stage .wt-t-strong { fill: var(--ink); font-weight: 700; }
.wt-stage .wt-muted { opacity: 0.55; }
.wt-stage .wt-finger { fill: color-mix(in srgb, var(--ink) 22%, transparent); stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.5; }
.wt-stage .wt-cursor { fill: var(--ink); stroke: var(--surface); stroke-width: 1.2; stroke-linejoin: round; }
.wt-stage .wt-shine { fill: #FFFFFF; opacity: 0.2; }
.wt-stage .wt-dot-a { fill: #F87171; } .wt-stage .wt-dot-b { fill: #FBBF24; } .wt-stage .wt-dot-c { fill: #4ADE80; }
.wt-stage .wt-ico-a { fill: #60A5FA; } .wt-stage .wt-ico-b { fill: #F472B6; } .wt-stage .wt-ico-c { fill: #4ADE80; } .wt-stage .wt-ico-d { fill: #FB923C; }
.wt-stage .wt-slot { fill: none; stroke: currentColor; stroke-opacity: 0.35; stroke-dasharray: 3 3; }
.wt-stage .wt-lifted { fill: var(--surface); stroke: var(--yellow); stroke-width: 1.4; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28)); }
.wt-stage .wt-struck { opacity: 0.16; }
.wt-stage .wt-done-box { stroke: var(--yellow); }
.wt-stage .wt-add { fill: none; stroke: currentColor; stroke-opacity: 0.4; }
.wt-stage .wt-add-plus { stroke-width: 1.6; }
.wt-stage .wt-added, .wt-stage .wt-added-label { opacity: 0; }
.wt-stage .wt-split-btn { fill: var(--yellow); }
.wt-stage .wt-pane-bg { fill: var(--surface); }
.wt-stage .wt-ring { fill: none; stroke: var(--yellow); stroke-width: 2.5; }
.wt-stage .wt-swatch { stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; }
.wt-stage .wt-theme-bg { fill: #0B0B14; stroke: currentColor; stroke-opacity: 0.25; }
.wt-stage .wt-theme-card { fill: #1B1B2A; }
.wt-stage .wt-theme-ink { fill: #E6E6F0; }
.wt-stage .wt-theme-accent { fill: #8074FF; }
.wt-stage .wt-ripple { fill: none; stroke: var(--yellow); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Motion. Each diagram loops; its resting (no-motion) pose is the finished action. */
.wt-stage .wt-spin-dash { animation: wt-dash 14s linear infinite; }
.wt-stage .wt-dash-flow { stroke-dasharray: 5 5; animation: wt-dash 1.6s linear infinite; }
@keyframes wt-dash { to { stroke-dashoffset: -60; } }
.wt-stage .wt-float { animation: wt-float 3.6s ease-in-out infinite; }
@keyframes wt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.wt-stage .wt-breathe { transform-box: fill-box; transform-origin: center; animation: wt-breathe 4.2s ease-in-out infinite; }
@keyframes wt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.wt-stage .wt-drawer { animation: wt-drawer 3.6s var(--ease) infinite; }
@keyframes wt-drawer { 0%, 12% { transform: translateX(-62px); } 45%, 80% { transform: translateX(0); } 95%, 100% { transform: translateX(-62px); } }
.wt-stage .wt-swipe { animation: wt-swipe 3.6s var(--ease) infinite; }
@keyframes wt-swipe { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; transform: translateX(0); } 45% { opacity: 1; transform: translateX(46px); } 58%, 100% { opacity: 0; transform: translateX(46px); } }

.wt-stage .wt-walk { animation: wt-walk 4.8s var(--ease) infinite; }
@keyframes wt-walk { 0%, 25% { transform: translateY(0); } 33%, 58% { transform: translateY(42px); } 66%, 92% { transform: translateY(84px); } 100% { transform: translateY(0); } }
.wt-stage .wt-walk-cursor { animation: wt-walk-cursor 4.8s var(--ease) infinite; }
@keyframes wt-walk-cursor { 0%, 25% { transform: translate(82px, 70px); } 33%, 58% { transform: translate(82px, 112px); } 66%, 92% { transform: translate(82px, 154px); } 100% { transform: translate(82px, 70px); } }

.wt-stage .wt-tap { animation: wt-tap 4.4s ease-in-out infinite; }
@keyframes wt-tap { 0% { opacity: 0; transform: translate(14px, 12px); } 10% { opacity: 1; transform: translate(0, 0); } 18% { transform: scale(0.92); } 24% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
.wt-stage .wt-ripple { animation: wt-ripple 4.4s ease-out infinite; }
@keyframes wt-ripple { 0%, 16% { opacity: 0; transform: scale(0.4); } 20% { opacity: 0.9; } 38%, 100% { opacity: 0; transform: scale(1.5); } }
.wt-stage .wt-newrow { animation: wt-newrow 4.4s ease-out infinite; }
@keyframes wt-newrow { 0%, 22% { opacity: 0; transform: translateY(6px); } 32%, 100% { opacity: 1; transform: none; } }
.wt-stage .wt-type { animation: wt-type 4.4s steps(16) infinite; clip-path: inset(0 0 0 0); }
@keyframes wt-type { 0%, 26% { clip-path: inset(0 100% 0 0); } 52%, 100% { clip-path: inset(0 0 0 0); } }
.wt-stage .wt-tick { stroke-dasharray: 14; stroke-dashoffset: 0; animation: wt-tick 4.4s ease-out infinite; }
@keyframes wt-tick { 0%, 62% { stroke-dashoffset: 14; } 74%, 100% { stroke-dashoffset: 0; } }
.wt-stage .wt-new-box { animation: wt-box 4.4s ease-out infinite; }
@keyframes wt-box { 0%, 62% { stroke: currentColor; } 70%, 100% { stroke: var(--yellow); } }

.wt-stage .wt-drag { animation: wt-drag 4s var(--ease) infinite; }
@keyframes wt-drag { 0%, 14% { transform: translate(0, 0); } 58%, 84% { transform: translate(150px, 0); } 100% { transform: translate(0, 0); } }

.wt-stage .wt-add-pulse { animation: wt-add 3.8s ease-in-out infinite; }
@keyframes wt-add { 0%, 30% { fill: transparent; stroke: currentColor; } 40%, 88% { fill: var(--yellow); stroke: var(--yellow); } 100% { fill: transparent; stroke: currentColor; } }
.wt-stage .wt-add-plus-pulse, .wt-stage .wt-add-label-pulse { animation: wt-fade-out 3.8s ease-in-out infinite; }
@keyframes wt-fade-out { 0%, 30% { opacity: 1; } 38%, 90% { opacity: 0; } 100% { opacity: 1; } }
.wt-stage .wt-added { animation: wt-fade-in 3.8s ease-in-out infinite; }
@keyframes wt-fade-in { 0%, 34% { opacity: 0; } 42%, 88% { opacity: 1; } 100% { opacity: 0; } }
.wt-stage .wt-tap-late { animation: wt-tap-late 3.8s ease-in-out infinite; }
@keyframes wt-tap-late { 0%, 8% { opacity: 0; transform: translate(12px, 14px); } 24% { opacity: 1; transform: none; } 32% { transform: scale(0.9); } 40% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }

.wt-stage .wt-theme-bg { animation: wt-theme-bg 8s steps(1) infinite; }
@keyframes wt-theme-bg { 0% { fill: #0B0B14; } 25% { fill: #8CC3F2; } 50% { fill: #2A1630; } 75% { fill: #EFE8DA; } }
.wt-stage .wt-theme-card { animation: wt-theme-card 8s steps(1) infinite; }
@keyframes wt-theme-card { 0% { fill: #1B1B2A; } 25% { fill: #FFFFFF; } 50% { fill: #41223F; } 75% { fill: #FFFDF8; } }
.wt-stage .wt-theme-ink { animation: wt-theme-ink 8s steps(1) infinite; }
@keyframes wt-theme-ink { 0% { fill: #E6E6F0; } 25% { fill: #0B2E4F; } 50% { fill: #FFE3D2; } 75% { fill: #2B2620; } }
.wt-stage .wt-theme-accent { animation: wt-theme-accent 8s steps(1) infinite; }
@keyframes wt-theme-accent { 0% { fill: #8074FF; } 25% { fill: #0D5EAF; } 50% { fill: #FF8A3D; } 75% { fill: #C0641E; } }
.wt-stage .wt-ring { animation: wt-ring 8s var(--ease) infinite; }
@keyframes wt-ring { 0%, 22% { transform: translateX(0); } 25%, 47% { transform: translateX(30px); } 50%, 72% { transform: translateX(60px); } 75%, 97% { transform: translateX(90px); } 100% { transform: translateX(0); } }

.wt-stage .wt-split-btn { transform-box: fill-box; transform-origin: center; animation: wt-pulse 3.6s ease-in-out infinite; }
@keyframes wt-pulse { 0%, 20% { transform: scale(1); } 28% { transform: scale(1.35); } 36%, 100% { transform: scale(1); } }
.wt-stage .wt-pane { animation: wt-pane 3.6s var(--ease) infinite; }
@keyframes wt-pane { 0%, 30% { transform: translateX(110px); opacity: 0; } 50%, 88% { transform: none; opacity: 1; } 100% { transform: translateX(110px); opacity: 0; } }

.wt-stage .wt-sheet-up { animation: wt-sheet-up 4.4s var(--ease) infinite; }
@keyframes wt-sheet-up { 0%, 10% { transform: translateY(64px); opacity: 0; } 28%, 90% { transform: none; opacity: 1; } 100% { transform: translateY(64px); opacity: 0; } }
.wt-stage .wt-hl-pulse { animation: wt-hl 4.4s ease-in-out infinite; }
@keyframes wt-hl { 0%, 34% { opacity: 0.4; } 44%, 90% { opacity: 1; } 100% { opacity: 0.4; } }
.wt-stage .wt-pop { transform-box: fill-box; transform-origin: center; animation: wt-pop 4.4s var(--ease) infinite; }
@keyframes wt-pop { 0%, 52% { transform: scale(0); } 64% { transform: scale(1.18); } 72%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

.wt-stage .wt-rise { animation: wt-rise 0.6s var(--ease) both; }
@keyframes wt-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wt-stage, .wt-stage * { animation: none !important; }
  .wt-stage .wt-finger, .wt-stage .wt-ripple { opacity: 0; }
  .wt-stage .wt-drag { transform: translate(150px, 0); }
  .wt-stage .wt-added { opacity: 1; }
  .wt-stage .wt-add-pulse { fill: var(--yellow); stroke: var(--yellow); }
  .wt-stage .wt-add-plus-pulse, .wt-stage .wt-add-label-pulse { opacity: 0; }
}

/* ---- page tips (tips.js): a card at the top of a page, and the "how it works" sheet ---- */
.tip-card {
  position: relative;
  container-type: inline-size;
  margin: 0 0 16px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  animation: wt-in 0.32s var(--ease) both;
}
.tip-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #4F8DFF, #B15CFF, #F8515F); }
.tip-inner { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 16px; align-items: center; }
.tip-art.wt-stage { aspect-ratio: 16 / 10; border-radius: 12px; animation: none; }
.tip-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-right: 30px; }
.tip-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: calc(10.5px * var(--ts)); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.tip-eyebrow svg { color: var(--yellow); }
.tip-title { margin: 0; font-size: calc(17px * var(--ts)); letter-spacing: -0.01em; }
.tip-summary { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--ts)); line-height: 1.45; }
.tip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-actions .btn { min-height: 40px; }
/* Wide card: the diagram spans both rows, the words and then the buttons sit beside it. */
.tip-inner { row-gap: 10px; }
.tip-inner > .tip-art { grid-row: span 2; align-self: center; }
.tip-inner > .tip-body { align-self: end; }
.tip-inner > .tip-actions { grid-column: 2; align-self: start; }
.tip-inner:not(:has(.tip-art)) > .tip-actions { grid-column: 1 / -1; }
.tip-x { position: absolute; top: 8px; right: 8px; }
/* Narrow (a phone, or the split pane): a small diagram beside the words. */
@container (max-width: 540px) {
  .tip-inner { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; }
  .tip-art.wt-stage { aspect-ratio: 16 / 12; border-radius: 10px; }
  .tip-title { font-size: calc(15.5px * var(--ts)); }
  .tip-summary { font-size: calc(13.5px * var(--ts)); }
  .tip-inner > .tip-art { grid-row: auto; align-self: start; }
  .tip-inner > .tip-body { align-self: start; }
  .tip-inner > .tip-actions { grid-column: 1 / -1; }
  .tip-actions .btn { flex: 1 1 auto; }
}
/* Only a very narrow card (a tiny split pane) drops the diagram; a phone keeps the small one. */
@container (max-width: 250px) {
  .tip-inner { grid-template-columns: minmax(0, 1fr); }
  .tip-art.wt-stage { display: none; }
}
#topbar-title .topbar-text { display: flex; align-items: center; gap: 2px; }
#topbar-title .topbar-text h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-help { flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 999px; color: var(--ink-3); }
.topbar-help:hover { color: var(--yellow); }
.tip-sheet { display: flex; flex-direction: column; gap: 12px; }
.tip-sheet-stage { aspect-ratio: 16 / 10; }
.tip-sheet-summary { margin: 0; color: var(--ink-2); line-height: 1.5; }
.tip-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tip-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.tip-step-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow-ghost); color: var(--yellow); font-weight: 700; font-size: calc(13px * var(--ts)); }
.tip-step-text { padding-top: 7px; line-height: 1.45; color: var(--ink-2); }
.tip-step-text b { color: var(--ink); font-weight: 650; }

/* Split screen only exists from 1100px (app.js splitAvailable), so its settings hide below that. */
@media (max-width: 1099.98px) { .split-settings { display: none; } }
.install-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
/* The demo: the front page frames the app; a strip across the top says so. */
.landing-try .landing-fine a, .landing-try .landing-fine .link { color: rgba(255, 255, 255, 0.9); }
.landing-try .landing-fine { margin-top: 18px; }
/* The door to the demo: one card, the whole thing a button. */
.landing-demo-card { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 640px; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 10, 26, 0.74); color: #FFFFFF; text-align: left; cursor: pointer; font: inherit; transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); }
.landing-demo-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.34); }
.landing-demo-mark { flex: none; display: inline-flex; }
.landing-demo-mark .saturn { border-radius: 14px; }
.landing-demo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.landing-demo-title { font-size: calc(19px * var(--ts)); font-weight: 700; }
.landing-demo-sub { color: rgba(255, 255, 255, 0.72); font-size: calc(14px * var(--ts)); }
.landing-demo-go { flex: none; display: inline-flex; color: rgba(255, 255, 255, 0.7); }
/* The demo overlay: most of the screen, a bar on top with the close button. */
.demo-modal { position: fixed; inset: 0; z-index: 90; background: rgba(4, 6, 20, 0.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.demo-modal-box { width: 100%; height: 100%; max-width: 1400px; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); }
.demo-modal-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: #0B0D1F; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; }
.demo-modal-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-modal-title .saturn { border-radius: 7px; flex: none; }
.demo-modal-bar .btn-ghost { color: rgba(255, 255, 255, 0.85); }
.demo-modal-close { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border-color: transparent; color: #FFFFFF; }
.demo-modal-close:hover { background: rgba(255, 255, 255, 0.2); }
.demo-modal-box iframe { flex: 1; width: 100%; border: 0; background: #000; }
@media (max-width: 700px) {
  .demo-modal { padding: 0; }
  .demo-modal-box { border-radius: 0; border: 0; }
  .demo-modal-title .dim { display: none; }
}
.demo-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: var(--accent-fill); color: #FFFFFF; font-size: calc(13.5px * var(--ts)); text-align: center; }
@media (max-width: 520px) { .demo-bar { gap: 0 8px; padding: 5px 12px; line-height: 1.35; font-size: calc(12.5px * var(--ts)); } }
/* Desktop demo: the strip stays put and the rail, top bar and split fit beneath it. */
@media (min-width: 900px) {
  body.is-demo .demo-bar { position: sticky; top: 0; z-index: 50; height: 39px; flex-wrap: nowrap; white-space: nowrap; }
  body.is-demo .rail { top: 39px; height: calc(100dvh - 39px); }
  body.is-demo .topbar { top: 39px; }
  body.is-demo .pane2 { top: 39px; max-height: calc(100dvh - 39px); }
}
.demo-bar-ico { display: inline-flex; }
.demo-bar a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.is-demo .rail-signout { justify-content: center; padding-left: 14px; }
.demo-theme-fab, .save-fab { position: fixed; right: 14px; bottom: 74px; z-index: 45; border-radius: 999px; min-height: 46px; padding: 0 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
@media (min-width: 900px) { .demo-theme-fab, .save-fab { bottom: 20px; } }
/* Keep the floating button's lane clear: toasts sit above it and a page's last row scrolls past it. */
@media (max-width: 899.98px) {
  body.is-demo .toasts, body:has(.save-fab) .toasts { bottom: calc(132px + env(safe-area-inset-bottom)); }
  body.is-demo main, body:has(.save-fab) main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) { body.is-demo main, body:has(.save-fab) main { padding-bottom: 96px; } }
.auth-keep { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--yellow-ghost); border: 1px solid var(--yellow-edge); display: flex; gap: 8px; align-items: flex-start; font-size: calc(14px * var(--ts)); }
.auth-code { font-family: var(--f-mono); font-size: calc(26px * var(--ts)); letter-spacing: 0.3em; text-align: center; }
.page-cat { display: flex; align-items: center; gap: 6px; margin: 16px 0 6px; font-size: calc(11.5px * var(--ts)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); }
.page-cat:first-of-type { margin-top: 4px; }
.page-cat svg { color: var(--yellow); }
.page-pick { cursor: pointer; align-items: center; gap: 12px; }
.page-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--yellow); flex: none; }
.page-pick-ico { color: var(--yellow); display: inline-flex; flex: none; }
.rail-install { color: var(--yellow); }
/* Room between the page title and the arrow / house / refresh buttons that follow it. */
#topbar-title .topbar-text { margin-right: 12px; }

/* ---- email to the Inbox (public/js/views/inbox.js) ---- */
.mail-card { padding: 0; overflow: hidden; }
.mail-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 15px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mail-head:hover { background: var(--surface-2); }
.mail-head-ico { display: inline-flex; flex: none; color: var(--yellow); }
.mail-head-title { font-size: calc(14.5px * var(--ts)); font-weight: 600; white-space: nowrap; }
.mail-head-status { min-width: 0; font-size: calc(13px * var(--ts)); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-head-status[data-tone="warn"] { color: var(--yellow); font-weight: 600; }
.mail-head-chev { display: inline-flex; flex: none; margin-left: auto; color: var(--ink-3); transition: transform 0.16s var(--ease); }
.mail-card[data-open="1"] .mail-head-chev { transform: rotate(180deg); }
.mail-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 15px 16px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.mail-body p { margin: 0; }
.mail-address { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.mail-address-text { flex: 1; min-width: 0; font-size: calc(14px * var(--ts)); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.mail-address .btn { flex: none; }
.mail-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.mail-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: calc(13.5px * var(--ts)); color: var(--ink-2); }
.mail-steps b { color: var(--ink); font-weight: 600; }
.mail-howto h4 { margin: 0 0 8px; font-size: calc(13px * var(--ts)); font-weight: 600; }
.mail-howto .hint { margin: 8px 0 0; }
.mail-row { cursor: default; }
.mail-row:hover { background: none; }
.mail-row .row-title { white-space: normal; overflow-wrap: anywhere; }
.mail-held-subject { font-size: calc(13.5px * var(--ts)); color: var(--ink); overflow-wrap: anywhere; }
.mail-held-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.mail-sender-addr { font-size: calc(13.5px * var(--ts)); overflow-wrap: anywhere; }
.mail-item-from { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.mail-item-from .ico, .mail-item-from svg { flex: none; color: var(--ink-3); }

/* ---- PocketSpace Premium: the badge, the panel on a locked page, Settings, pricing ---- */
.prem-pill { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: calc(10.5px * var(--ts)); font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; vertical-align: middle; white-space: nowrap; flex: none; color: var(--yellow); background: var(--yellow-ghost); border: 1px solid var(--yellow-edge); }
.prem-pill-sm { margin-left: 6px; padding: 0 6px; font-size: calc(9.5px * var(--ts)); }
.prem-pill[data-locked="1"] { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.prem-pill svg { flex: none; }
.rail-label { display: inline-flex; align-items: center; min-width: 0; }
.prem-panel { position: relative; overflow: hidden; max-width: 580px; width: 100%; margin: 6px auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.prem-panel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #4F8DFF, #B15CFF, #F8515F); }
.prem-panel-head { display: flex; align-items: center; gap: 14px; }
.prem-panel-titles { min-width: 0; }
.prem-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 14px; color: #FFFFFF; background: linear-gradient(135deg, #4F8DFF 0%, #B15CFF 45%, #F8515F 100%); }
.prem-badge-sm { width: 30px; height: 30px; border-radius: 9px; }
.prem-eyebrow { display: block; font-size: calc(11px * var(--ts)); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.prem-panel h2 { margin: 2px 0 0; font-size: calc(20px * var(--ts)); line-height: 1.25; letter-spacing: -0.01em; }
.prem-panel p, .prem-card p { margin: 0; }
.prem-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prem-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-soft); }
.prem-features li[data-current="1"] { background: var(--yellow-ghost); border-color: var(--yellow-edge); }
.prem-feature-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--yellow); background: var(--yellow-ghost); }
.prem-feature-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prem-feature-body strong { font-size: calc(14px * var(--ts)); }
.prem-feature-body span { font-size: calc(13px * var(--ts)); color: var(--ink-2); line-height: 1.4; }
.prem-features-compact { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.prem-features-compact li { align-items: center; gap: 8px; padding: 5px 11px 5px 5px; }
.prem-features-compact .prem-feature-ico { width: 26px; height: 26px; }
.prem-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.prem-price strong { font-size: calc(26px * var(--ts)); letter-spacing: -0.02em; }
.prem-price span { color: var(--ink-2); }
.prem-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prem-safe { display: flex; align-items: center; gap: 6px; }
.prem-card { display: flex; flex-direction: column; gap: 12px; }
.prem-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.prem-status strong { font-size: calc(16px * var(--ts)); }
.prem-status:has(.prem-status-text) { flex-wrap: nowrap; }
.prem-status-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.prem-warn { padding: 10px 12px; border-radius: var(--r-md); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); }
.prem-finishing { display: flex; align-items: center; gap: 14px; }
.prem-spinner { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--yellow); animation: prem-spin 0.8s linear infinite; }
@keyframes prem-spin { to { transform: rotate(360deg); } }

.landing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.landing-plan { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: rgba(8, 10, 26, 0.74); border: 1px solid rgba(255, 255, 255, 0.12); }
.landing-plan-premium { background: linear-gradient(155deg, rgba(34, 26, 78, 0.92) 0%, rgba(12, 13, 34, 0.94) 60%, rgba(40, 14, 38, 0.9) 100%); border-color: rgba(177, 92, 255, 0.45); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.landing-plan-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.landing-plan-name { font-size: calc(18px * var(--ts)); font-weight: 700; color: #FFFFFF; }
.landing-plan-price { font-size: calc(13.5px * var(--ts)); color: rgba(255, 255, 255, 0.72); }
.landing-plan-price strong { margin-right: 6px; font-size: calc(26px * var(--ts)); letter-spacing: -0.02em; color: #FFFFFF; }
.landing-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.landing-plan li { display: flex; align-items: center; gap: 10px; font-size: calc(14px * var(--ts)); color: rgba(255, 255, 255, 0.88); }
.landing-plan li svg { flex: none; color: #8AB4FF; }
.landing-plan-premium li svg { color: #E7C6FF; }
.landing-plan-note { margin: auto 0 0; font-size: calc(12.5px * var(--ts)); color: rgba(255, 255, 255, 0.6); }
.landing-pricing .landing-fine a { color: #FFFFFF; }
.landing-tile .prem-pill { color: #E7C6FF; background: rgba(177, 92, 255, 0.16); border-color: rgba(177, 92, 255, 0.42); }

.legal-body .legal-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 18px 0; }
.legal-body .legal-plan { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.legal-body .legal-plan-premium { border-color: var(--yellow-edge); box-shadow: 0 0 0 1px var(--yellow-ghost) inset; }
.legal-body .legal-plan h2 { margin: 0; }
.legal-body .legal-plan-price { margin: 0; color: var(--ink-2); }
.legal-body .legal-plan-price strong { margin-right: 4px; font-size: calc(28px * var(--ts)); color: var(--ink); }
.legal-body .legal-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legal-body .legal-plan li { display: flex; align-items: flex-start; gap: 10px; }
.legal-body .legal-plan li svg { flex: none; margin-top: 3px; color: var(--yellow); }
.legal-body .legal-plan .btn { margin-top: auto; align-self: flex-start; text-decoration: none; }
@media (max-width: 520px) {
  .mail-head { padding: 12px; }
  .mail-body { padding-left: 12px; padding-right: 12px; }
  .mail-held-actions .btn { flex: 1 1 auto; }
}