/* ---------- Shell ---------- */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Signed in, the menu runs down the left and everything else sits beside it.
   `flex-start` so the sticky menu has a line to stick to. */
.shell.has-sidebar {
  flex-direction: row;
  align-items: flex-start;
}

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

/* Signed out: the brand and the theme switch, nothing to navigate to. */
.topbar {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-7);
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  margin-left: auto;
}

@media (max-width: 640px) {
  .topbar {
    padding: var(--space-3) var(--space-4);
  }
}

/* ================= Sidebar =================
   Four groups and the settings beneath, every item always visible. On a
   desktop it narrows to an icon strip; below 900px it is a drawer behind the
   menu button in a slim bar. Every link keeps its icon at the same x in both
   widths, so narrowing the menu moves nothing sideways (K-16). */

.sidebar {
  position: sticky;
  top: 0;
  flex: none;
  width: 232px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: width 0.18s var(--ease);
}

.sidebar[hidden] { display: none; }

.side-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
}

.side-brand { white-space: nowrap; }
/* In the menu the mark, the name and its star share 232px with the menu
   button: a smaller mark and gap so the star sits inside the edge, not
   clipped by it, and the name on the mark's middle. */
.side-head .side-brand { gap: var(--space-2); min-width: 0; font-size: 15px; line-height: 1; }
.side-head .side-brand .brand-mark { width: 58px; }
/* `.icon-action` sets display later in the file; this has to outrank it. */
.side-head .side-close { display: none; margin-left: auto; }

/* "Go to": find a screen by name. */
.side-find { position: relative; }
.side-find-input {
  width: 100%;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.side-find-input::placeholder { color: var(--text-faint); }
.side-find-input:focus-visible { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1-soft); }
.side-find-key {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 600 10.5px/16px var(--font);
  color: var(--text-faint);
  pointer-events: none;
}
.side-find-input:focus ~ .side-find-key, .side-find-input:not(:placeholder-shown) ~ .side-find-key { display: none; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Each group has a hue of its own: the dot of its heading, the icon of the
   current page, and the wash behind it. Turned from the accent where the
   browser can, three theme hues where it cannot. */
.side-group { --g: var(--text-faint); display: flex; flex-direction: column; }
.side-hue-1 { --g: var(--accent-3); }
.side-hue-2 { --g: var(--accent-1); }
.side-hue-3 { --g: var(--accent-2); }
.side-hue-4 { --g: var(--accent-1); }
.side-hue-5 { --g: var(--accent-2); }
@supports (color: oklch(from white l c h)) {
  .side-hue-4 { --g: oklch(from var(--accent-1) l c calc(h + 52)); }
  .side-hue-5 { --g: oklch(from var(--accent-2) l c calc(h - 48)); }
}
.side-group[hidden] { display: none; }

.side-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px var(--space-3) 5px 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  white-space: nowrap;
}
button.side-group-label { cursor: pointer; }
button.side-group-label:hover { color: var(--text); background: var(--surface-2); }
button.side-group-label:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-1-soft), inset 0 0 0 1px var(--accent-1); }
.side-group-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent); }
.side-group-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-group-count { font-weight: 600; letter-spacing: 0; opacity: 0; transition: opacity 0.15s var(--ease); }
.side-group-chevron { font-size: 14px; line-height: 1; letter-spacing: 0; transform: rotate(90deg); transition: transform 0.18s var(--ease); }
.side-group.is-folded .side-group-chevron { transform: none; }
.side-group.is-folded .side-group-count, button.side-group-label:hover .side-group-count { opacity: 1; }
/* Folded with the current page inside: the heading carries the mark. */
.side-group.is-folded.has-active .side-group-name { color: var(--text); }
.side-group.is-folded.has-active .side-group-dot { background: var(--accent-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 22%, transparent); }

/* The items hang on a thin thread that runs down from the dot. */
.side-items { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; }
.side-items::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 8px; width: 1px; background: linear-gradient(var(--border-strong), var(--border) 60%, transparent); }
.side-group.is-folded .side-items { display: none; }
.sidebar.is-finding .side-group.is-folded .side-items { display: flex; }
.side-foot .side-items::before { display: none; }

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px var(--space-3) 6px 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.side-link[hidden] { display: none; }
.side-foot .side-link { padding-left: var(--space-3); }

.side-link .action-icon { width: 18px; height: 18px; flex: none; transition: color 0.15s var(--ease); }

/* A node on the thread for each screen. */
.side-link::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.side-foot .side-link::before { display: none; }

.side-link:hover {
  color: var(--text);
  background: var(--surface-2);
}
.side-link:hover::before { background: var(--g); border-color: var(--g); }
.side-link:hover .action-icon { color: var(--g); }

/* The current page: the gold star on the thread, the hue of its group on
   its icon, and a wash that fades to the right. */
.side-link.active {
  color: var(--text);
  font-weight: 600;
  background: linear-gradient(90deg, color-mix(in srgb, var(--g) 20%, transparent), color-mix(in srgb, var(--g) 4%, transparent) 70%, transparent);
}
.side-link.active .action-icon { color: var(--g); }
.side-link.active::before {
  content: "\2726";
  left: 10px;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-3);
  font-size: 11px;
  line-height: 13px;
  text-align: center;
}
.side-foot .side-link.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent-1); }

/* Moving to another screen: a gold glow runs along the thread from the page
   that was left to the page that was opened, and the star lights when it
   arrives (sidebar.js travel). */
.side-nav { position: relative; }
.side-comet {
  position: absolute;
  left: 16px;
  width: 3px;
  height: 26px;
  margin: -22px 0 0 -1px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent-3));
  box-shadow: 0 6px 12px 1px color-mix(in srgb, var(--accent-3) 55%, transparent);
  pointer-events: none;
  z-index: 2;
  transition: top 0.4s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
/* Going up, the bright end leads. */
.side-comet.side-comet-up { margin-top: -4px; background: linear-gradient(to top, transparent, var(--accent-3)); box-shadow: 0 -6px 12px 1px color-mix(in srgb, var(--accent-3) 55%, transparent); }
.side-comet.is-landed { opacity: 0; transform: scaleY(0.2); }
/* The star waits for the glow, then lights. */
.side-link.active.is-arriving::before { opacity: 0; }
.side-link.active::before { transition: opacity 0.2s var(--ease); }
.side-link.active:not(.is-arriving)::before { animation: side-star-land 0.5s var(--ease); }
@keyframes side-star-land {
  0% { transform: scale(0.4); text-shadow: 0 0 0 transparent; }
  45% { transform: scale(1.5); text-shadow: 0 0 10px var(--accent-3); }
  100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .side-comet { display: none; }
  .side-link.active:not(.is-arriving)::before { animation: none; }
}

.side-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-1-soft), inset 0 0 0 1px var(--accent-1);
}

.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.side-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.side-actions .icon-action { width: 34px; height: 34px; }

.mobile-bar { display: none; }

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

  /* A scrollbar in a 64px strip crowds the icons; on a short screen the
     strip still scrolls with the wheel or a swipe. */
  .sidebar.is-collapsed { width: 64px; scrollbar-width: none; }
  .sidebar.is-collapsed::-webkit-scrollbar { display: none; }

  /* Hidden from sight, not from a screen reader: the link keeps its name. */
  .sidebar.is-collapsed .side-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* In the strip a heading is only its dot, and every icon is shown whether
     or not its group is folded: there is no heading to unfold it with. */
  .sidebar.is-collapsed .side-group-label { pointer-events: none; padding-left: 20px; }
  .sidebar.is-collapsed .side-group-name,
  .sidebar.is-collapsed .side-group-count,
  .sidebar.is-collapsed .side-group-chevron,
  .sidebar.is-collapsed .side-find { display: none; }
  .sidebar.is-collapsed .side-group.is-folded .side-items { display: flex; }
  .sidebar.is-collapsed .side-items::before { display: none; }
  .sidebar.is-collapsed .side-link { padding-left: 14px; }
  .sidebar.is-collapsed .side-link::before { display: none; }
  .sidebar.is-collapsed .side-link.active { box-shadow: inset 2px 0 0 var(--accent-3); }

  .sidebar.is-collapsed .side-brand { display: none; }

  /* Theme and log out stand on end in the strip. */
  .sidebar.is-collapsed .side-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 899px) {
  .shell.has-sidebar {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  /* Off-screen and out of the tab order until opened; `visibility` waits for
     the slide to finish before hiding it. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(288px, 86vw);
    height: 100dvh;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }

  .sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.2s var(--ease), visibility 0s;
  }

  /* The slim bar's menu button opens the drawer; the drawer's own toggle
     would only collapse a menu that cannot collapse here. */
  .side-head .side-toggle { display: none; }
  .side-head .side-close { display: inline-flex; }

  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease);
  }

  .sidebar-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar.is-open,
  .sidebar-scrim { transition: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* A row of tabs, as opposed to the topbar's links: it wraps to a second line
   on a narrow screen rather than squeezing the topbar's own layout. */
.nav-links.tab-row {
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* Full-bleed sub-header strip: the tabs sit in the page gutter, but the
   dividing hairline beneath them runs edge to edge -- the second tier in the
   header / sub-header / filters stack. */
.tabbar {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.tabbar-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* Tabs read as underlined labels rather than filled pills; the active one
   carries an accent underline that sits on the sub-header's own hairline. */
.tab-row .nav-link {
  border-radius: 0;
  padding: var(--space-3) 2px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  background: none;
}

.tab-row .nav-link:hover,
.tab-row .nav-link.active {
  background: none;
  color: var(--text);
}

.tab-row .nav-link.active {
  border-bottom-color: var(--accent-1);
}

/* A screen's own filter controls (Active/Archived, List/By Frequency, ...).
   No rule beneath, as on Home: the section's label row below does the
   separating. */
.filterbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
}

.filterbar .nav-links {
  margin: 0 !important;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  /* Wrap the row, never a label -- a multi-word tab breaking mid-phrase reads
     as three stacked tabs on a narrow screen. */
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.nav-link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav-link.active {
  color: var(--text);
  background: var(--surface-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}

/* The star after the name: small, raised, lit like the logo's. In a
   gradient-clipped wordmark (footer, splash) it takes the gradient; on plain
   text it wears the accent. */
.brand-name { white-space: nowrap; }
.brand-star {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.62em;
  vertical-align: 0.55em;
  line-height: 1;
}
.brand .brand-star {
  color: var(--accent-2);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
/* The supplied transparent mark (2026-10-07) keeps its blue facets in
   either theme. Its wide canvas is preserved, without a background tile. */
.brand-mark {
  width: 72px;
  height: auto;
  flex: none;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.main.top-aligned {
  align-items: flex-start;
  padding-top: var(--space-7);
}

/* ---------- Card ---------- */

.card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-md);
  /* Centred, not stretched: a form stays a readable width inside the wide
     page shell rather than sprawling across the whole screen. */
  margin-inline: auto;
}

.card.wide {
  max-width: 560px;
}

.card-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 var(--space-2);
}

.card-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

/* A panel titled the way Home titles "Small wins". */
.card-label { margin: 0 0 var(--space-2); }

.card-subtitle {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}

/* ---------- Form elements ---------- */

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.field input,
.field select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field input::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-1-soft);
}

.field-hint {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: var(--space-2);
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: transform 0.1s var(--ease), box-shadow 0.15s var(--ease), opacity 0.15s var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-gradient);
  color: var(--on-accent);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface-hover);
}

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}

.btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 8px 10px;
  width: auto;
}

.btn-ghost:hover {
  color: var(--text);
}

.btn-row {
  display: flex;
  gap: var(--space-3);
}

.form-footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.link {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: inherit;
  padding: 0;
}

.link:hover {
  text-decoration: underline;
}

/* ---------- Alerts ---------- */

.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}

.alert-danger {
  background: var(--danger-soft);
  border-color: rgba(248, 113, 113, 0.3);
  color: #ff9c9c;
}

/* ---------- Welcome screen ---------- */

.hero {
  max-width: 560px;
  text-align: center;
}

.hero-mark {
  display: block;
  width: min(100%, 460px);
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  margin: 0 auto var(--space-5);
}

.hero h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}

.hero p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 var(--space-7);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 300px;
  margin: 0 auto;
}

/* ---------- Progress steps ---------- */

.progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.progress-step {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.progress-step .fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  transition: width 0.3s var(--ease);
}

.progress-step.done .fill {
  width: 100%;
}

.progress-step.active .fill {
  width: 55%;
}

.progress-label {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Likert scale ---------- */

.question-block {
  margin-bottom: var(--space-6);
}

.question-index {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.question-text {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.likert {
  display: flex;
  gap: 6px;
}

.likert-option {
  flex: 1;
  text-align: center;
}

.likert-option input {
  display: none;
}

.likert-option .dot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s var(--ease);
}

.likert-option input:checked + .dot {
  background: var(--accent-gradient);
  color: var(--on-accent);
  border-color: transparent;
}

.likert-option .dot:hover {
  border-color: var(--accent-1);
}

.likert-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: var(--space-2);
}

/* ---------- Trait results ---------- */

.trait-row {
  margin-bottom: var(--space-5);
}

.trait-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.trait-name {
  font-weight: 700;
  font-size: 15px;
}

.trait-score-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.trait-score {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.trait-delta {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.trait-delta-up {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.trait-delta-down {
  color: var(--accent-1);
  background: color-mix(in srgb, var(--accent-1) 14%, transparent);
}

.trait-delta-same {
  color: var(--text-faint);
  background: var(--surface-2);
}

.trait-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.trait-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  width: 0%;
  transition: width 0.6s var(--ease);
}

.trait-desc {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* ---------- History ---------- */

.history-block {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.history-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.history-row:last-child {
  border-bottom: none;
}

.history-label {
  font-weight: 700;
  min-width: 96px;
  flex: none;
}

.history-date {
  color: var(--text-faint);
  min-width: 88px;
  flex: none;
}

.history-scores {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  white-space: nowrap;
}

/* The label and date columns are fixed, so on a phone they left about 50px for
   the scores -- the one part of the row worth reading scrolled out of sight.
   The scores take a line of their own instead. */
@media (max-width: 640px) {
  .history-row {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .history-scores {
    flex-basis: 100%;
  }
}

/* ---------- Misc ---------- */

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--on-accent) 25%, transparent);
  border-top-color: var(--on-accent);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.center-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Page shell (goals list/detail use this instead of the centered .main) ---------- */

.page {
  width: 100%;
  /* Wide, data-dense layout: content spreads across most of the screen with
     comfortable gutters instead of sitting in a single narrow column, the way
     a markets dashboard does. The cap only reins it in on ultra-wide monitors
     where full-bleed line lengths would stop being readable. */
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-7) var(--space-8);
}

/* A sidebar page's heading (page.js): the screen beneath brings its own top
   padding, so this one adds none below. */
.page.page-intro { padding-bottom: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  margin-bottom: var(--space-4);
}

.back-link:hover {
  color: var(--text);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-priority-low {
  background: var(--surface-2);
  color: var(--text-faint);
}
.badge-priority-medium {
  background: var(--accent-1-soft);
  color: var(--accent-1);
}
.badge-priority-high {
  background: rgba(251, 191, 36, 0.14);
  color: var(--warning);
}
.badge-priority-critical {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-status-active {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--accent-2);
}
.badge-status-completed {
  background: rgba(52, 211, 153, 0.14);
  color: var(--success);
}
.badge-status-abandoned {
  background: var(--surface-2);
  color: var(--text-faint);
}

.badge-neutral {
  background: var(--surface-2);
  color: var(--text-muted);
  text-transform: none;
  font-weight: 600;
}

/* ---------- Goal list ---------- */

.goal-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.goal-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s var(--ease), transform 0.1s var(--ease);
}

.goal-card:hover {
  border-color: var(--border-strong);
}

.goal-card:active {
  transform: scale(0.995);
}

.goal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.goal-card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
}

.goal-card-badges {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

.goal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 13px;
  color: var(--text-muted);
}

.goal-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---------- Goals by frequency ---------- */

.freq-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.freq-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  background: color-mix(in srgb, var(--tile-accent) 22%, var(--surface));
  border-left: 4px solid var(--tile-accent);
}

.freq-section-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.freq-section-count {
  font-size: 12px;
  color: var(--text-muted);
}

.freq-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.freq-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: color-mix(in srgb, var(--tile-accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tile-accent) 45%, var(--border));
  border-top: 3px solid var(--tile-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Colour, not movement -- a tile that lifts out from under the pointer at its
   own edge ends its hover, drops back, and flickers. */
.freq-tile:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.freq-tile-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tile-accent);
}

.freq-tile-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.freq-tile-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

.empty-state h2 {
  color: var(--text);
  font-size: 18px;
  margin: 0 0 var(--space-2);
}

.empty-state p {
  font-size: 14px;
  margin: 0 0 var(--space-5);
}

/* ---------- Goal detail ---------- */

.goal-detail-head {
  margin-bottom: var(--space-6);
}

.goal-detail-badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.goal-detail-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.goal-detail-desc {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}

.goal-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 13.5px;
  color: var(--text-muted);
}

.section-block {
  margin-top: var(--space-7);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

/* Collapsible master-data table on Admin -> View All. Four full tables stacked
   on one page is a wall of rows, so each starts closed and you open the one you
   came for. The add form is a sibling of the collapsed body, not part of it --
   adding an entry is the common errand and shouldn't cost an expand first. */
.section-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.section-toggle:hover .section-chevron {
  border-left-color: var(--accent-1);
}

/* A CSS triangle rather than an icon: it inherits the theme's text colours
   with no extra markup, and rotating it is the whole open/closed state. */
.section-chevron {
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-faint);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform 0.15s var(--ease), border-left-color 0.15s var(--ease);
}

.section-toggle.is-open .section-chevron {
  transform: rotate(90deg);
}

/* Says how much is behind a closed section, so collapsed doesn't mean opaque. */
.section-count {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.task-toggle {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s var(--ease);
  font-size: 13px;
  font-weight: 900;
}

.task-toggle:hover {
  border-color: var(--accent-1);
}

.task-toggle.done {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--on-accent);
}

.task-row-body {
  flex: 1;
  min-width: 0;
}

.task-row-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.task-row-title.archived {
  color: var(--text-faint);
  text-decoration: line-through;
}

.task-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
}

.streak-badge {
  color: var(--accent-2);
  font-weight: 700;
}

.task-row-actions {
  flex: none;
  display: flex;
  gap: var(--space-1);
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}

.icon-btn.danger:hover {
  color: var(--danger);
}

.inline-add-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.inline-add-form input[type="text"],
.inline-add-form input {
  flex: 1;
  min-width: 160px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font);
}

.inline-add-form select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font);
}

.achievement-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.achievement-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.achievement-title {
  font-weight: 700;
  font-size: 14.5px;
}

.achievement-date {
  font-size: 12.5px;
  color: var(--text-faint);
  flex: none;
}

.achievement-remarks {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- Achievements timeline ---------- */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.timeline-month-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--space-3);
}

.timeline-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: 22px;
}

.timeline-track::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--accent-1), var(--accent-2));
  opacity: 0.35;
}

.timeline-entry {
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -22px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 3px var(--accent-1-soft);
}

.timeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.timeline-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: 6px;
}

.timeline-goal-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-2);
  font-size: 12.5px;
  cursor: pointer;
  margin-top: 2px;
}

.timeline-goal-link:hover {
  text-decoration: underline;
}

/* ---------- Goal creation wizard ---------- */

.wizard-task-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.wizard-task-row input {
  flex: 1;
}

.wizard-task-row select {
  flex: none;
  width: 130px;
}

.add-task-row-btn {
  margin-top: var(--space-1);
}

textarea.field-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font);
  resize: vertical;
  min-height: 80px;
}

textarea.field-textarea:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-1-soft);
}

@media (max-width: 480px) {
  .card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
  }

  .hero h1 {
    font-size: 30px;
  }

  .goal-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .day-timeline,
  .day-timeline-hours {
    height: 520px;
  }
}

/* ---------- Routines ---------- */

.routine-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s var(--ease);
}

.routine-card:hover {
  border-color: var(--border-strong);
}

.routine-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.routine-card-title {
  font-size: 16.5px;
  font-weight: 700;
}

.routine-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
}

.day-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.day-pill {
  width: 40px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.12s var(--ease);
}

.day-pill:hover {
  border-color: var(--accent-1);
}

.day-pill.selected {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--on-accent);
}

.day-pill-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
}

.block-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.block-row-grid {
  display: grid;
  grid-template-columns: 110px 110px 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.block-row-grid input,
.block-row-grid select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
  font-family: var(--font);
}

.block-row-footer {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.block-row-footer select {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
}

.quick-add-task {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.quick-add-task select,
.quick-add-task input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  width: 100%;
}

/* ---------- Today view ---------- */

.today-block {
  display: flex;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.today-block.is-done {
  border-color: rgba(52, 211, 153, 0.35);
}

.today-block-time {
  flex: none;
  width: 78px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-2);
  padding-top: 2px;
}

.today-block-body {
  flex: 1;
  min-width: 0;
}

.today-block-title {
  font-size: 15px;
  font-weight: 700;
}

.today-block-routine {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.today-block-notes {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.today-block-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
}

/* ---------- Log recorder ---------- */

.log-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.log-tab {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}

.log-tab.active {
  background: var(--accent-gradient);
  color: var(--on-accent);
  border-color: transparent;
}

.record-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.record-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent-gradient);
  cursor: pointer;
  flex: none;
  position: relative;
}

.record-btn::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 4px;
  background: var(--bg);
}

.record-btn.recording {
  animation: record-pulse 1.2s ease-in-out infinite;
}

.record-btn.recording::before {
  border-radius: 50%;
}

@keyframes record-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(248, 113, 113, 0);
  }
}

.record-status {
  font-size: 13px;
  color: var(--text-muted);
}

.log-entry {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-entry-body {
  flex: 1;
  min-width: 0;
}

.log-entry-text {
  font-size: 13.5px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.log-entry-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 4px;
}

.log-entry audio,
.log-entry video {
  max-width: 100%;
  margin-top: var(--space-2);
}

/* E-10: what came of a recording. */
.log-entry-waiting { font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.log-words-edit { display: flex; flex-direction: column; gap: var(--space-2); }
.log-proposed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.log-follow-ups { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: var(--space-2); }
.log-follow-ups-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.log-follow-up { padding: 0; border: 0; background: none; color: var(--accent-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.log-follow-up:hover { text-decoration: underline; }
.log-notice { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent-1); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--text); }

/* ---------- Day timeline: full-bleed "sky ribbon" with floating glass tiles ---------- */

.ribbon-wrap {
  width: 100%;
  margin-top: var(--space-2);
  margin-bottom: var(--space-7);
}

.ribbon {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Left = 00:00, right = 24:00. A muted, editorial sky palette (not neon) --
     deep indigo night, dusty terracotta dawn/dusk, a soft warm-cream peak at
     solar noon -- so it reads as atmosphere behind the tiles, not a chart. */
  background: linear-gradient(
    90deg,
    #0a0e1a 0%,
    #0a0e1a 14%,
    #171d33 20%,
    #2b2f52 25%,
    #c17a5a 31%,
    #e8b878 37%,
    #cfe0e8 43%,
    #f5f1e6 50%,
    #cfe0e8 57%,
    #e8b878 63%,
    #c17a5a 69%,
    #2b2f52 75%,
    #171d33 80%,
    #0a0e1a 86%,
    #0a0e1a 100%
  );
}

.ribbon-sun-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 32% 70% at 50% 55%, rgba(255, 255, 255, 0.32), transparent 70%);
  pointer-events: none;
}

.ribbon-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ribbon-tick {
  position: absolute;
  top: 0;
  bottom: 0;
}

.ribbon-tick-line {
  position: absolute;
  top: 0;
  bottom: 26px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.ribbon-tick-label {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.ribbon-now {
  position: absolute;
  top: 0;
  bottom: 26px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  z-index: 6;
}

.ribbon-now-label {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: var(--text);
  color: var(--bg);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Glass tiles: translucent + blurred so the ribbon's atmosphere still shows
   through, with a solid accent color carrying each tile's identity -- flat,
   no drop shadow, distinct from the backdrop rather than opaque over it. */
.ribbon-tile {
  position: absolute;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tile-color) 55%, rgba(20, 22, 34, 0.55));
  border: 1px solid color-mix(in srgb, var(--tile-color) 70%, white 10%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 10px;
  transition: transform 0.12s var(--ease), border-color 0.12s var(--ease);
}

.ribbon-tile:hover {
  border-color: color-mix(in srgb, var(--tile-color) 90%, white 10%);
}

.ribbon-tile-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ribbon-tile-time {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.ribbon-tile.is-done {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}

.ribbon-tile.is-done::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.ribbon-untimed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
}

.day-timeline-untimed-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .ribbon-tile-title {
    font-size: 11px;
  }

  .ribbon-tile-time {
    display: none;
  }
}

/* ---------- Routine ribbon: the sky ribbon rotated 90deg into a vertical
   spine that IS the block list (used only on Routine detail) ---------- */

.rr-page-layout {
  display: flex;
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  align-items: flex-start;
}

.rr-main {
  flex: 1;
  min-width: 0;
}

.rr-wrap {
  flex: none;
}

.rr-row {
  display: flex;
  gap: var(--space-2);
}

.rr-hours {
  position: relative;
  flex: none;
  width: 30px;
  height: 780px;
}

.rr-hour-label {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
}

.rr-ribbon {
  position: relative;
  flex: none;
  width: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  /* Top = 00:00, bottom = 24:00 -- the horizontal ribbon's palette rotated
     90deg clockwise: its left edge (midnight) swings up to become the top. */
  background: linear-gradient(
    180deg,
    #0a0e1a 0%,
    #0a0e1a 14%,
    #171d33 20%,
    #2b2f52 25%,
    #c17a5a 31%,
    #e8b878 37%,
    #cfe0e8 43%,
    #f5f1e6 50%,
    #cfe0e8 57%,
    #e8b878 63%,
    #c17a5a 69%,
    #2b2f52 75%,
    #171d33 80%,
    #0a0e1a 86%,
    #0a0e1a 100%
  );
}

.rr-sun-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 14% at 50% 50%, rgba(255, 255, 255, 0.32), transparent 70%);
  pointer-events: none;
}

.rr-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rr-tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.rr-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  z-index: 6;
}

.rr-now-label {
  position: absolute;
  top: -2px;
  left: 6px;
  transform: translateY(-100%);
  background: var(--text);
  color: var(--bg);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Every tile's top/height is a % of the ribbon set purely from its own
   start/duration -- there is no per-tile fixed size anywhere here. */
.rr-tile {
  position: absolute;
  box-sizing: border-box;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tile-color) 55%, rgba(20, 22, 34, 0.55));
  border: 1px solid color-mix(in srgb, var(--tile-color) 70%, white 10%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 2px 8px;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.rr-tile:hover {
  border-color: color-mix(in srgb, var(--tile-color) 90%, white 10%);
}

.rr-tile.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, 0.5);
  z-index: 4;
}

/* font-size is set inline per tile (proportional to that tile's own
   rendered height) -- this rule supplies everything else about the label. */
.rr-tile-title {
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.rr-tile-time {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  flex: none;
}

.rr-untimed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.day-timeline-untimed-chip.is-selected {
  background: var(--accent-1-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}

@media (max-width: 720px) {
  .rr-page-layout {
    flex-direction: column;
  }

  .rr-wrap {
    width: 100%;
  }

  .rr-row {
    width: 100%;
  }

  .rr-hours {
    height: 480px;
  }

  .rr-ribbon {
    flex: 1;
    height: 480px !important;
  }
}

/* ---------- End of day wrap-up ---------- */

.wrapup-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.wrapup-pip {
  width: 26px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.wrapup-pip:disabled {
  cursor: default;
}

.wrapup-pip.saved {
  background: var(--success);
}

.wrapup-pip.current {
  background: var(--accent-1);
  transform: scaleY(1.6);
}

.wrapup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.wrapup-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.wrapup-card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.wrapup-card-meta {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--text-muted);
}

.wrapup-prompts {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  list-style: none;
  border-left: 2px solid var(--accent-1);
  background: var(--accent-1-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.wrapup-prompts li {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.wrapup-prompts li + li {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 14px;
}

.wrapup-mic-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-4);
}

.wrapup-mic {
  flex: none;
}

.wrapup-mic-status {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.wrapup-mic-hint {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.wrapup-transcript {
  width: 100%;
}

.wrapup-interim {
  min-height: 18px;
  margin-top: var(--space-2);
  font-size: 14px;
  font-style: italic;
  color: var(--text-faint);
}

.wrapup-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.wrapup-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--text-muted);
}

/* Same treatment as `.field input`, which only styles inputs inside a `.field`
   wrapper -- these sit in a compact inline row instead. `color-scheme` is what
   makes the native time picker render dark rather than white-on-dark. */
.wrapup-field input,
.wrapup-field select {
  width: auto;
  min-width: 140px;
  color-scheme: light dark;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.wrapup-field input:focus,
.wrapup-field select:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-1-soft);
}

.wrapup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ---------- Quote of the day ---------- */

.quote-page { display: flex; flex-direction: column; gap: var(--space-6); }

/* Today's line: a large serif pull quote beside an outsized quotation mark in
   the accent gradient, with why it was chosen underneath. */
.quote-feature {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-7) var(--space-7) var(--space-6) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-1-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.quote-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-gradient);
}
.quote-feature-mark {
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 0.8;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.quote-feature-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.quote-feature-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.quote-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.quote-feature-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
  text-wrap: balance;
  max-width: 34ch;
}
.quote-feature-by { font-size: 15px; color: var(--text-muted); font-style: italic; }
.quote-feature-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.quote-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: 13.5px; color: var(--text-muted); }
.quote-why-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.quote-copy { width: auto; padding: 6px 14px; font-size: 13px; }

/* ---------- the archive ---------- */

.quote-archive { display: flex; flex-direction: column; gap: var(--space-5); }
.quote-archive-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.quote-archive-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.quote-archive-span { font-size: 13px; color: var(--text-muted); }
.quote-archive-empty { color: var(--text-faint); font-size: 14px; }

.quote-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quote-filter {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.quote-filter:hover { background: var(--surface-hover); color: var(--text); }
.quote-filter.is-on { background: var(--accent-1-soft); border-color: var(--accent-1); color: var(--text); }

.quote-month { display: flex; flex-direction: column; gap: var(--space-3); }
.quote-month-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.quote-month-count {
  font-size: 11px;
  letter-spacing: 0;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
}
.quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.quote-card:hover { border-color: color-mix(in srgb, var(--accent-1) 45%, var(--border)); }
.quote-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.quote-card-date { display: flex; align-items: baseline; gap: 6px; }
.quote-card-day { font-size: 1.35rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.quote-card-weekday { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.quote-card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}
.quote-card-by { margin-top: auto; font-size: 13px; font-style: italic; color: var(--text-muted); }

@media (max-width: 700px) {
  .quote-feature { grid-template-columns: 1fr; gap: 0; padding: var(--space-5); }
  .quote-feature-mark { font-size: 4.5rem; height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-card { transition: none; }
}

/* ---------- Home: the day's quote, heading the clock band ----------
   The band's first row, on the same time-of-day sky as the map beneath it, in
   the band's own ink tokens -- so it follows the theme and the hour exactly as
   the clock does, and reads as the top of one card rather than a second one. */

.clock-quote {
  position: relative;
  z-index: 2;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--clock-line);
  animation: clock-quote-in 0.6s var(--ease) both;
}
.clock-quote-mark {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 0.6;
  padding-top: 0.35em;
  align-self: start;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.clock-quote-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.clock-quote-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clock-ink-faint);
}
.clock-quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  line-height: 1.35;
  color: var(--clock-ink);
  text-wrap: balance;
}
.clock-quote-by { font-size: 13px; font-style: italic; color: var(--clock-ink-dim); }
.clock-quote-link {
  width: auto;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--clock-ink);
  background: color-mix(in srgb, var(--clock-ink) 8%, transparent);
  border: 1px solid var(--clock-line);
  border-radius: var(--radius-pill);
}
.clock-quote-link:hover { border-color: var(--clock-line-strong); }
.clock-quote-controls { display: flex; align-items: center; gap: var(--space-2); align-self: start; }
.clock-quote-step {
  width: 32px;
  height: 32px;
  padding: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--clock-ink);
  background: color-mix(in srgb, var(--clock-ink) 8%, transparent);
  border: 1px solid var(--clock-line);
  border-radius: 50%;
}
.clock-quote-step:hover:not(:disabled) { border-color: var(--clock-line-strong); }
.clock-quote-step:disabled { opacity: 0.4; cursor: default; }
.clock-quote-step:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.clock-quote-credit { color: var(--clock-ink-dim); text-decoration: underline; text-underline-offset: 2px; }
.clock-quote-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@keyframes clock-quote-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .clock-quote { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  /* Above the quote, not under it: a longer quote then never moves them (K-16). */
  .clock-quote-controls { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-quote { animation: none; }
}

/* ---------- the quote on the map itself (home.js placeQuote) ----------
   Where the band has room, the quote leaves its row and sits on the map, in
   the open space beside the watch and above the digital time. No box: a soft
   haze of the page colour dims the map only behind the words, so the world
   stays whole and the words stay readable. The controls head the block, so a
   longer or shorter quote never moves them (K-16). */
.clock-quote.is-inmap {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  width: var(--quote-w, 420px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  padding: 0;
  border-bottom: 0;
  text-align: right;
}
.clock-quote.is-inmap.is-left { right: auto; left: var(--space-5); align-items: flex-start; text-align: left; }
.clock-quote.is-inmap::before {
  content: "";
  position: absolute;
  inset: -28px -40px -36px -56px;
  z-index: -1;
  background: radial-gradient(ellipse at 62% 45%,
    color-mix(in srgb, var(--bg) 66%, transparent) 0%,
    color-mix(in srgb, var(--bg) 46%, transparent) 42%,
    transparent 72%);
  pointer-events: none;
}
.clock-quote.is-inmap.is-left::before { inset: -28px -56px -36px -40px; background-position: 38% 45%; }
.clock-quote.is-inmap .clock-quote-mark,
.clock-quote.is-inmap .clock-quote-label { display: none; }
.clock-quote.is-inmap .clock-quote-body { gap: var(--space-2); }
.clock-quote.is-inmap .clock-quote-text {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.4;
  text-shadow: 0 1px 14px var(--bg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--quote-lines, 6);
  line-clamp: var(--quote-lines, 6);
  overflow: hidden;
}
.clock-quote.is-inmap .clock-quote-text::before { content: "\201C"; margin-right: 1px; color: var(--accent-3); }
.clock-quote.is-inmap .clock-quote-by { font-size: 12.5px; text-shadow: 0 1px 10px var(--bg); }
/* The controls: first in the block, small, and quiet until the quote is
   pointed at or tabbed into. */
.clock-quote.is-inmap .clock-quote-controls { order: -1; align-self: auto; gap: 6px; opacity: 0.7; transition: opacity 0.2s var(--ease); }
.clock-quote.is-inmap:hover .clock-quote-controls,
.clock-quote.is-inmap:focus-within .clock-quote-controls { opacity: 1; }
.clock-quote.is-inmap .clock-quote-step { width: 26px; height: 26px; font-size: 15px; }
.clock-quote.is-inmap .clock-quote-link { padding: 4px 11px; font-size: 12px; }

/* ---------- performance state badges ---------- */

.quote-state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}

.quote-state-strong_streak,
.quote-state-consistent,
.quote-state-milestone {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.quote-state-comeback,
.quote-state-steady {
  background: var(--accent-1-soft);
  color: var(--accent-1);
}

/* slipping, broken_streak and dormant keep the neutral chip above on purpose:
   a quiet week is a reading, not an alert (INV-12). */


/* ================= Home dashboard ================= */

.home-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- clock band ---------- */

.clock-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  isolation: isolate;
}

/* The frame sets the band's height; the map shows a window of the world in
   the frame's own shape (worldMap.mapView), so it is cropped, never stretched.
   Anchoring the clock by percentage works because it lives in this frame. */
.clock-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 24 / 10;
  /* Short enough to leave the first screen to the day's cards and circles,
     tall enough for the quote above the digital time. */
  max-height: 320px;
}

.world-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Filled countries with a fine border, so continents read as shapes rather
   than as a flat wash, and countries as places. The viewer's own country takes
   the accent, quietly: it says where you are without competing with the clock. */
.world-land path {
  fill: var(--map-land);
  stroke: var(--map-coast);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.world-land path.is-home {
  fill: color-mix(in srgb, var(--accent-2) 30%, var(--map-land));
  stroke: color-mix(in srgb, var(--accent-2) 70%, transparent);
  stroke-width: 1;
}

/* The ping marks the viewer's true coordinate. */
.clock-ping {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 25%, transparent);
  animation: clock-ping 2.6s var(--ease) infinite;
}

@keyframes clock-ping {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 25%, transparent); }
  50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent-2) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .clock-ping { animation: none; }
}

/* The watch owns the left of the band now that it's this large, so the readout
   takes the right. Right-aligned so the two blocks frame the map between them
   rather than crowding one corner. */
.clock-readout {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  max-width: 55%;
  text-align: right;
  z-index: 2;
  pointer-events: none;
}

.clock-place {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--clock-ink-dim);
}

.clock-offset {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-2) 20%, transparent);
  color: var(--clock-ink);
  font-variant-numeric: tabular-nums;
}

/* Time-of-day wash. Deliberately low-contrast: this sits behind a clock all
   day, so it has to read as atmosphere rather than as a chart.

   Both the wash and the ink on top of it are tokens, because a fixed night sky
   under a light theme stops reading as sky and starts reading as an unstyled
   grey slab. */
.clock-band {
  --clock-ink: #ffffff;
  --clock-ink-dim: rgba(255, 255, 255, 0.78);
  --clock-ink-faint: rgba(255, 255, 255, 0.62);
  --clock-line: rgba(255, 255, 255, 0.3);
  --clock-line-strong: rgba(255, 255, 255, 0.6);
  --clock-rim-fill: rgba(255, 255, 255, 0.04);
  --clock-rim-stroke: rgba(255, 255, 255, 0.22);
  --clock-dial: rgba(10, 13, 20, 0.72);
  --map-land: rgba(255, 255, 255, 0.13);
  --map-coast: rgba(255, 255, 255, 0.34);
  --sky-opacity: 0.5;
}

.clock-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--sky-opacity);
  background: var(--sky, linear-gradient(120deg, #1b2133, #232c44));
}

.clock-band.sky-night { --sky: linear-gradient(120deg, #0d1220 0%, #1b2038 60%, #262c4a 100%); }
.clock-band.sky-dawn { --sky: linear-gradient(120deg, #26243a 0%, #4a3a4a 55%, #7c5a52 100%); }
.clock-band.sky-day { --sky: linear-gradient(120deg, #1d2b40 0%, #2b4460 55%, #3c6076 100%); }
.clock-band.sky-dusk { --sky: linear-gradient(120deg, #2a2440 0%, #4d3550 55%, #7a4a4a 100%); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .clock-band {
    --clock-ink: var(--text);
    --clock-ink-dim: var(--text-muted);
    --clock-ink-faint: var(--text-faint);
    --clock-line: rgba(23, 26, 33, 0.25);
    --clock-line-strong: rgba(23, 26, 33, 0.55);
    --clock-rim-fill: rgba(255, 255, 255, 0.5);
    --clock-rim-stroke: rgba(23, 26, 33, 0.18);
    --clock-dial: rgba(255, 255, 255, 0.82);
    --map-land: rgba(23, 26, 33, 0.14);
    --map-coast: rgba(23, 26, 33, 0.32);
    --sky-opacity: 0.75;
  }

  :root:not([data-theme="dark"]) .clock-band.sky-night { --sky: linear-gradient(120deg, #dfe3f2 0%, #ccd3ea 60%, #c2c8e4 100%); }
  :root:not([data-theme="dark"]) .clock-band.sky-dawn { --sky: linear-gradient(120deg, #fbe8dd 0%, #f6d9cd 55%, #f0c7b8 100%); }
  :root:not([data-theme="dark"]) .clock-band.sky-day { --sky: linear-gradient(120deg, #dcecf7 0%, #c8e2f2 55%, #b6d8ee 100%); }
  :root:not([data-theme="dark"]) .clock-band.sky-dusk { --sky: linear-gradient(120deg, #ece0f0 0%, #e6d2e0 55%, #eecdc9 100%); }
}

:root[data-theme="light"] .clock-band {
  --clock-ink: var(--text);
  --clock-ink-dim: var(--text-muted);
  --clock-ink-faint: var(--text-faint);
  --clock-line: rgba(23, 26, 33, 0.25);
  --clock-line-strong: rgba(23, 26, 33, 0.55);
  --clock-rim-fill: rgba(255, 255, 255, 0.5);
  --clock-rim-stroke: rgba(23, 26, 33, 0.18);
  --clock-dial: rgba(255, 255, 255, 0.82);
  --map-land: rgba(23, 26, 33, 0.14);
  --map-coast: rgba(23, 26, 33, 0.32);
  --sky-opacity: 0.75;
}

:root[data-theme="light"] .clock-band.sky-night { --sky: linear-gradient(120deg, #dfe3f2 0%, #ccd3ea 60%, #c2c8e4 100%); }
:root[data-theme="light"] .clock-band.sky-dawn { --sky: linear-gradient(120deg, #fbe8dd 0%, #f6d9cd 55%, #f0c7b8 100%); }
:root[data-theme="light"] .clock-band.sky-day { --sky: linear-gradient(120deg, #dcecf7 0%, #c8e2f2 55%, #b6d8ee 100%); }
:root[data-theme="light"] .clock-band.sky-dusk { --sky: linear-gradient(120deg, #ece0f0 0%, #e6d2e0 55%, #eecdc9 100%); }

.clock-analog {
  position: absolute;
  width: clamp(128px, 23vw, 208px);
  /* Sits well left of its own centre, so the face hangs beside the location
     ping rather than covering it. The JS clamps below are derived from this
     offset and this width -- change one and the other two need revisiting. */
  transform: translate(-82%, -50%);
  /* No `filter` here on purpose: a filter on an ancestor changes what counts
     as "behind" for the child's backdrop-filter, and the frosting below stops
     working. The shadow lives on the glass disc instead. */
}

/* The dial is frosted glass, not clear glass.
   A fully transparent face was tried and rejected, and it deserved to be:
   coastlines ran sharply behind the numerals and hands and the whole thing
   read as clutter. Blurring what is behind keeps the map present as texture --
   you can see there is a world under there, and roughly which part -- without
   it competing with anything you need to read. */
.clock-analog::before {
  content: "";
  position: absolute;
  /* Matches the dial circle in the SVG (r=48 of a 100 viewBox). */
  inset: 2%;
  border-radius: 50%;
  background: var(--dial-veil);
  /* contrast() is doing real work here, not decoration: the map's land is
     drawn at 13-14% ink so it sits quietly behind the readout, and under a
     veil it would vanish entirely. contrast() rather than brightness() because
     the map is light-on-dark in the dark theme and dark-on-light in the light
     one -- pushing values away from mid-grey separates land from sea either
     way round, where a brightness lift would only work in one of them. */
  backdrop-filter: blur(2px) contrast(1.9) saturate(0.85);
  -webkit-backdrop-filter: blur(2px) contrast(1.9) saturate(0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* Where backdrop-filter is unavailable the veil alone has to carry the
   contrast, so it stops being translucent at all -- a legible opaque dial
   beats an unreadable transparent one. */
@supports not (backdrop-filter: blur(2px)) {
  .clock-analog::before { background: var(--dial); }
}

.clock-face { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

/* ---------- Flieger dial ----------

   The dial's own palette is set by real daylight, not by the app theme: a
   pilot watch reads dark-on-light by day and light-on-dark at night, and that
   is a fact about the time rather than a colour preference. Both states are
   defined here so neither depends on a media query. */
/* Defined on the wrapper rather than the <svg>, because the glass disc is the
   wrapper's own ::before -- properties set on the svg would not reach it. */
.clock-analog {
  --dial: #14161d;
  /* The veil is what the map is read through: enough to guarantee contrast for
     the markings, little enough to leave the continents visible. */
  --dial-veil: rgba(20, 22, 29, 0.52);
  --dial-edge: rgba(244, 246, 250, 0.5);
  --dial-ink: #f4f6fa;
  --dial-ink-dim: rgba(244, 246, 250, 0.62);
  --dial-accent: #ff8a3d;
  /* Numerals and hands are outlined in the veil's own colour so a coastline
     passing behind them can't break their edges. */
  --dial-outline: rgba(20, 22, 29, 0.85);
}

/* Selected from the face's own class rather than a second class on the
   wrapper, so the daylight switch stays one line of JS setting one element. */
.clock-analog:has(> .clock-face.is-day) {
  --dial: #ece7da;
  --dial-veil: rgba(240, 235, 222, 0.5);
  --dial-edge: rgba(25, 26, 23, 0.45);
  --dial-ink: #191a17;
  --dial-ink-dim: rgba(25, 26, 23, 0.66);
  --dial-accent: #c2450f;
  --dial-outline: rgba(240, 235, 222, 0.9);
}

.clock-face { font-family: var(--font); }

:root[data-theme="light"] .clock-analog { --dial-veil: rgba(20, 22, 29, 0.68); }
:root[data-theme="light"] .clock-analog:has(> .clock-face.is-day) { --dial-veil: rgba(240, 235, 222, 0.62); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .clock-analog { --dial-veil: rgba(20, 22, 29, 0.68); }
  :root:not([data-theme="dark"]) .clock-analog:has(> .clock-face.is-day) { --dial-veil: rgba(240, 235, 222, 0.62); }
}

.clock-dial { fill: none; stroke: var(--dial-edge); stroke-width: 1.6; }
.clock-dial-ring { fill: none; stroke: var(--dial-ink-dim); stroke-width: 0.4; opacity: 0.5; }

.clock-min-tick { stroke: var(--dial-ink-dim); stroke-width: 0.6; }
.clock-min-tick.major { stroke: var(--dial-ink); stroke-width: 1.5; }

.clock-minute-numeral,
.clock-hour-numeral {
  paint-order: stroke fill;
  stroke: var(--dial-outline);
  /* Wide enough to survive a coastline behind it, narrow enough not to close
     up the counters of a 7px numeral. */
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.clock-minute-numeral {
  fill: var(--dial-ink);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.clock-hour-numeral {
  fill: var(--dial-ink);
  font-size: 8.5px;
  font-weight: 700;
}

.clock-triangle { fill: var(--dial-accent); }
.clock-triangle-dot { fill: var(--dial-accent); }

/* Filled sword hands outlined in the dial colour: that outline is what keeps a
   hand readable where it crosses a numeral. */
.clock-hand {
  fill: var(--dial-ink);
  stroke: var(--dial-outline);
  /* Thin on purpose: the outline only has to survive a coastline passing
     behind it. Any wider and it eats the hand it is protecting. */
  stroke-width: 0.7;
  stroke-linejoin: round;
}

.clock-hand.second {
  fill: none;
  stroke: var(--dial-accent);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.clock-counterweight { fill: var(--dial-accent); }
.clock-pin { fill: var(--dial-ink); stroke: var(--dial-outline); stroke-width: 1; }

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

.clock-phase {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clock-ink-faint);
}

.clock-digital {
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--clock-ink);
  font-variant-numeric: tabular-nums;
}

.clock-date { font-size: 15px; color: var(--clock-ink-dim); }

.clock-note {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--clock-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- donuts ---------- */

.donut-row {
  display: grid;
  /* Three equal cells: the day's sun dial first, the two donuts beside it. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-4);
}

/* ---------- the day: a sun dial ----------

   The first of the donut row's three cells, the size of a donut: a 24-hour
   ring with solar noon at the top, its daylight stretch glowing amber and the
   night cool, around a window onto the sky -- day above a horizon, night below
   -- with the sun riding the ring. Colours are the theme's (INV-7). */

.dayline { min-width: 0; }
.dayline-dial { display: block; width: min(100%, 220px); aspect-ratio: 1; overflow: visible; }

.dayline-sky-low { stop-color: color-mix(in srgb, var(--warning) 75%, var(--accent-3)); stop-opacity: 0.95; }
.dayline-sky-high { stop-color: color-mix(in srgb, var(--accent-2) 50%, var(--bg)); stop-opacity: 0.95; }
.dayline-night-high { stop-color: color-mix(in srgb, var(--accent-2) 22%, var(--surface-2)); }
.dayline-night-low { stop-color: color-mix(in srgb, var(--accent-1) 18%, var(--bg)); }
.dayline-horizon { stroke: color-mix(in srgb, var(--warning) 55%, var(--danger)); stroke-width: 1.6; stroke-linecap: round; }

.dayline-track { fill: none; stroke: color-mix(in srgb, var(--accent-2) 30%, var(--surface-2)); }
.dayline-daylight {
  fill: none;
  stroke: var(--warning);
  stroke-linecap: round;
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--warning) 70%, transparent));
}
.dayline-ticks line { stroke: var(--text-faint); stroke-width: 1.2; stroke-linecap: round; }
/* The clock's hours on the ring itself, haloed so they read over daylight and night. */
.dayline-labels text {
  font-size: 5.2px;
  font-weight: 700;
  fill: var(--text);
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 75%, transparent);
  stroke-width: 1.6px;
  stroke-linejoin: round;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* The countdown, haloed in the page's own colour so it reads over sky,
   horizon and night alike. */
.dayline-value,
.dayline-sub {
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--bg) 70%, transparent);
  stroke-linejoin: round;
  fill: var(--text);
}
.dayline-value { font-size: 14px; font-weight: 700; stroke-width: 3px; font-variant-numeric: tabular-nums; }
.dayline-sub { font-size: 7px; font-weight: 600; stroke-width: 2px; fill: var(--text-muted); letter-spacing: 0.04em; }

.dayline-glow-core { stop-color: var(--text); stop-opacity: 1; }
.dayline-glow-mid { stop-color: var(--warning); stop-opacity: 0.75; }
.dayline-glow-edge { stop-color: var(--warning); stop-opacity: 0; }
.dayline-sun-core { fill: var(--text); stroke: var(--warning); stroke-width: 1.4; }
/* After dark the sun is a pale mark on the night side of the ring. */
.dayline-dial.is-night .dayline-sun-glow { opacity: 0.2; }
.dayline-dial.is-night .dayline-sun-core { fill: var(--text-muted); stroke: none; }

.dayline-caption { text-align: center; }
.dayline-locate {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.donut-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

/* Each circle is a button that opens what its number is made of. */
.donut-button {
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.donut-button:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.donut-button:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.donut-button .donut,
.donut-button .dayline-dial { transition: transform 0.2s var(--ease), filter 0.2s var(--ease); }
.donut-button:hover .donut,
.donut-button:hover .dayline-dial { transform: scale(1.03); filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent-1) 25%, transparent)); }

/* Two colours only: the consumed sweep, and the track it hasn't reached yet.
   The track has to sit clearly above the page background or a small sweep
   reads as a stray shape floating next to nothing. */
.donut {
  /* As big as the cell allows, up to a size that still reads as a gauge. */
  width: min(100%, 220px);
  aspect-ratio: 1;
  container-type: inline-size;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--donut-accent) calc(var(--donut-fraction) * 360deg),
    var(--donut-track) 0
  );
}

.donut-cell { --donut-track: color-mix(in srgb, var(--text-faint) 32%, transparent); }

.donut-hole {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.donut-value {
  /* In proportion to the circle, whatever size it is. */
  font-size: 15cqi;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.donut-label { font-size: 15px; font-weight: 600; color: var(--text); }
.donut-caption { font-size: 12.5px; color: var(--text-faint); line-height: 1.35; }

/* ---------- a circle's details ---------- */

.circle-detail { display: flex; flex-direction: column; gap: var(--space-4); }
/* A few facts and a short list: the full-width panel left them adrift. */
.modal-panel:has(.circle-detail) { max-width: 520px; }
.circle-detail-title { margin: 0; font-size: 20px; }
.circle-detail-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: 14px;
}
.circle-detail-facts dt { color: var(--text-muted); }
.circle-detail-facts dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.circle-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.circle-detail-list li,
.circle-detail-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  grid-template-areas: "time name" "time meta";
  gap: 2px var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.circle-detail-list li:has(.circle-detail-row) { display: block; padding: 0; }
.circle-detail-row {
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.circle-detail-row:hover .circle-detail-name { color: var(--accent-1); }
.circle-detail-time { grid-area: time; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.circle-detail-name { grid-area: name; font-size: 14px; font-weight: 600; color: var(--text); }
.circle-detail-meta { grid-area: meta; font-size: 12px; color: var(--text-faint); }
.circle-detail-list .is-done .circle-detail-meta { color: var(--success); }
.circle-detail-list .is-in-progress .circle-detail-meta { color: var(--accent-1); }
.circle-detail-list .is-finished .circle-detail-name { color: var(--text-muted); }
.circle-detail-note { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* ---------- bar chart ---------- */

/* Home's section: a label row over its panel. `.panel-*` is the same
   pattern on the other screens, sharing the rule so they cannot drift. */
.bars-section,
.panel-section { display: flex; flex-direction: column; gap: var(--space-3); }

/* R-7: the label left, the fresh-start control (or its note and undo) right. */
.bars-head,
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.fresh-start-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* An archived day is set aside, not empty: a dashed outline with no fill. */
.bar-col.is-archived .bar-track {
  background: none;
  border: 1px dashed var(--border);
}
.bar-col.is-archived .bar-label { color: var(--text-muted); opacity: 0.6; }

.bars {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.bars-plot {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 180px;
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  min-width: 0;
}

.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }

.bar-fill {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--accent-1);
  opacity: 0.65;
  transition: height 0.3s var(--ease);
}

.bar-col.is-today .bar-fill { background: var(--accent-gradient); opacity: 1; }

.bar-count { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bar-label { font-size: 11px; color: var(--text-faint); }
.bar-col.is-today .bar-label { color: var(--text); font-weight: 700; }

/* ---------- the corridor: Home's blocks ----------

   After CRED's hall of glass slabs: earlier blocks on the left wall, later ones
   on the right, each turned to face the middle; the block in progress faces
   you, lit along its edge. corridor.js sets --turn, --push, --scale and --depth
   on each slab from the scroll position; everything here is drawn from those
   and the theme's tokens (INV-7). */

.corridor-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

/* Home's second row: the day's cards, and the day's circles beside them in a
   panel -- the sun dial across the top, Scheduled and Tasks beneath -- so the
   map, the cards and the circles all show on the first screen. Below 1250px
   the cards need the width: the circles go back to a row of three beneath. */
.home-page { gap: var(--space-5); }
.today-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.today-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (min-width: 1250px) {
  .today-row { grid-template-columns: minmax(0, 1fr) 330px; }
  .today-row .donut-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    /* Level with the Now strip, under the "Today" label's line. */
    margin-top: calc(16px + var(--space-3));
    padding: var(--space-4) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .today-row .donut-row > :first-child { grid-column: 1 / -1; }
  .today-row .donut-row .dayline-dial { width: min(100%, 190px); margin-inline: auto; }
  .today-row .donut-row .donut { width: min(100%, 128px); }
  .today-row .donut-row .donut-label { font-size: 13.5px; }
  .today-row .donut-row .donut-caption { font-size: 12px; }
}
.corridor-legend { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--text-faint); }

.corridor {
  /* Starting size only: corridor.js sizes the slabs to the corridor's width
     and to how many there are (sizeSlabs). */
  --slab-w: 220px;
  --slab-h: 300px;
  position: relative;
  /* The slabs stack up to z-index 1000 among themselves (corridor.js): kept
     inside the hall, so they never stand in front of a dialog or a menu. */
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* The far end of the hall is lit; the floor falls away into shadow. */
  background:
    radial-gradient(ellipse 42% 70% at 50% 58%, color-mix(in srgb, var(--accent-1) 18%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, var(--surface)), var(--bg) 78%);
}

/* A slab wears its goal type's colour. Where the browser can derive colours,
   a type's place in the vocabulary turns the theme accent's hue round the
   wheel (--type-turn, set per slab), keeping the accent's lightness and
   strength, so every type differs and all of them belong to the theme
   (INV-7). Elsewhere it takes one of five theme hues; never the danger red --
   a block is not an alarm (INV-12). A block with no task has no type: grey. */
/* `.goal-hue` gives anything else -- the Calendar's events -- the same colours. */
.corridor-slab, .goal-hue { --slab-hue: color-mix(in srgb, var(--text-muted) 70%, var(--surface-2)); }
.corridor-slab.hue-1, .goal-hue.hue-1 { --slab-hue: var(--accent-1); }
.corridor-slab.hue-2, .goal-hue.hue-2 { --slab-hue: var(--accent-2); }
.corridor-slab.hue-3, .goal-hue.hue-3 { --slab-hue: var(--accent-3); }
.corridor-slab.hue-4, .goal-hue.hue-4 { --slab-hue: var(--success); }
.corridor-slab.hue-5, .goal-hue.hue-5 { --slab-hue: var(--warning); }
@supports (color: oklch(from red l c h)) {
  /* In relative colour syntax `h` is a bare number of degrees, so the turn is
     unitless: `h + 137.5deg` would void the colour and the slab would vanish. */
  .corridor-slab.has-type, .goal-hue.has-type { --slab-hue: oklch(from var(--accent-1) l c calc(h + var(--type-turn, 0))); }
}

.corridor-track {
  /* The slabs' offsetParent, so corridor.js measures them against the track. */
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  /* No scroll-snap: corridor.js settles on the nearest slab once scrolling
     stops, where mandatory snapping fought every small movement. */
  cursor: grab;
  user-select: none;
  /* Room for the first and last slab to reach the middle. */
  /* Below: the floor the slabs are mirrored in. */
  padding: 24px calc(50% - var(--slab-w) / 2) 50px;
  scrollbar-width: none;
}
.corridor-track::-webkit-scrollbar { display: none; }
.corridor-track.is-dragging { cursor: grabbing; }
.corridor-track.is-dragging .corridor-slab { pointer-events: none; }

.corridor-slab {
  flex: none;
  position: relative;
  width: var(--slab-w);
  height: var(--slab-h);
  /* Shelved like album sleeves: each slab covers most of the next
     (corridor.js STEP = 1 - 2 x this). The one in the middle is pushed clear
     of both shelves (--push). */
  margin-inline: calc(var(--slab-w) * -0.35);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Solid, not see-through: on a packed shelf a translucent slab would show
     the ones behind it. The further ones are dimmed on the face instead. */
  will-change: transform;
  transform: perspective(900px) translateX(var(--push, 0%)) rotateY(var(--turn, 0deg)) scale(var(--scale, 1));
}

.corridor-slab:focus-visible { outline: none; }
.corridor-slab:focus-visible .corridor-face { outline: 2px solid var(--accent-1); outline-offset: 3px; }

/* Glass with a tint of the accent in it, a lit top edge and a deep shadow, so a
   slab reads as an object standing in the hall rather than as a card. */
.corridor-face {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--slab-w) * 0.03);
  padding: calc(var(--slab-w) * 0.08) calc(var(--slab-w) * 0.075);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--slab-hue) 60%, transparent);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    /* A sheen across the top corner, as on polished glass. */
    linear-gradient(118deg, color-mix(in srgb, var(--text) 13%, transparent) 0%, color-mix(in srgb, var(--text) 3%, transparent) 26%, transparent 42%),
    radial-gradient(130% 75% at 0% 0%, color-mix(in srgb, var(--slab-hue) 80%, transparent), transparent 64%),
    radial-gradient(100% 70% at 100% 100%, color-mix(in srgb, var(--slab-hue) 45%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in srgb, var(--slab-hue) 50%, var(--surface-2)), color-mix(in srgb, var(--slab-hue) 18%, var(--surface)) 78%);
  /* Mirrored in the floor, as the albums were. Chrome and Safari; elsewhere
     the slabs simply stand on it. */
  -webkit-box-reflect: below 6px linear-gradient(transparent 62%, color-mix(in srgb, var(--bg) 30%, transparent));
  box-shadow:
    /* Further along the shelf, dimmer: the page colour laid over the face. */
    inset 0 0 0 999px color-mix(in srgb, var(--bg) calc(var(--depth, 0) * 8%), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 26%, transparent),
    /* A hairline inside the edge, and a shadow thrown onto the slab behind. */
    inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent),
    0 24px 50px -18px color-mix(in srgb, var(--slab-hue) 62%, transparent),
    0 0 26px -6px var(--scrim),
    var(--shadow-md);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), translate 0.2s var(--ease);
}

/* The goal type's outline (goalTypeIcons.js), large and faint in the lower
   corner, behind the text: z-index -1 inside the face's own stacking context
   puts it over the glass and under everything written on it. Out of the flow
   and out of the pointer's way, so it changes nothing else about the slab. */
.corridor-face { isolation: isolate; }
.slab-watermark {
  position: absolute;
  right: -9%;
  bottom: 7%;
  z-index: -1;
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: color-mix(in srgb, var(--slab-hue) 55%, var(--text));
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.2;
  pointer-events: none;
}
.corridor-slab.is-facing .slab-watermark,
.corridor-slab.is-selected .slab-watermark { opacity: 0.3; }

/* A lit bar along the top, in the goal type's colour. */
.corridor-slab:not(.is-gap) .corridor-face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--slab-hue);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--slab-hue) 70%, transparent);
}

.corridor-slab:hover .corridor-face { translate: 0 -6px; }
.corridor-slab:hover .corridor-face,
.corridor-slab.is-facing .corridor-face { border-color: var(--slab-hue); }

.corridor-slab.is-selected .corridor-face {
  border: 2px solid var(--slab-hue);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent),
    0 0 26px color-mix(in srgb, var(--slab-hue) 55%, transparent),
    var(--shadow-md);
}

.slab-time {
  font-size: clamp(11px, calc(var(--slab-w) * 0.05), 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--slab-hue) 70%, var(--text));
  font-variant-numeric: tabular-nums;
}

.slab-title {
  font-size: clamp(15px, calc(var(--slab-w) * 0.08), 22px);
  font-weight: 650;
  line-height: 1.22;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slab-sub { font-size: clamp(12px, calc(var(--slab-w) * 0.055), 14px); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What the task is and what it serves: its description, then goal type, goal
   and the goal's achievements, each on a line of its own. */
.slab-desc {
  font-size: clamp(11.5px, calc(var(--slab-w) * 0.05), 13px);
  line-height: 1.35;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slab-facts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--slab-hue) 35%, transparent);
  font-size: clamp(11px, calc(var(--slab-w) * 0.048), 12.5px);
  color: var(--text);
}
.slab-fact { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.slab-fact-icon { flex: none; width: 1em; text-align: center; color: var(--slab-hue); }
.slab-fact-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slab-fact-faint { color: var(--text-faint); }
.slab-type { font-weight: 600; color: color-mix(in srgb, var(--slab-hue) 65%, var(--text)); }
.slab-dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--slab-hue); box-shadow: 0 0 6px var(--slab-hue); }

.slab-foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); min-height: 22px; }
.slab-mark.is-done { font-size: 18px; font-weight: 700; color: var(--success); }
.slab-mark.is-skipped { font-size: 11px; color: var(--text-muted); }

/* The block in progress: CRED's lit slab. Its border is a ring of the accent
   colours turning slowly, with the glow spilling into the hall around it. */
@property --slab-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.corridor-slab.is-now .corridor-face {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent),
    0 0 26px color-mix(in srgb, var(--accent-2) 45%, transparent),
    0 0 70px color-mix(in srgb, var(--accent-1) 28%, transparent);
  animation: slab-glow 3.2s var(--ease) infinite;
}
.corridor-slab.is-now .corridor-face::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--slab-glow-angle), var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1));
  /* Only the 2px ring shows: the content box is cut out of the gradient. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: slab-ring 4s linear infinite;
}

@keyframes slab-ring {
  to { --slab-glow-angle: 360deg; }
}
@keyframes slab-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

/* Done work keeps its place on the wall, quieter; a skip is settled, not a
   problem (INV-12); a must-do still open keeps its edge. */
.corridor-slab.is-done .slab-title { color: var(--text-muted); }
.corridor-slab.is-past:not(.is-done) .corridor-face { opacity: 0.78; }
.corridor-slab.is-skipped .corridor-face { border-style: dashed; }
.corridor-slab.is-mandatory .corridor-face { border-left: 3px solid var(--accent-1); }
/* A block with no task behind it is still part of the day: fainter glass and a
   dashed edge, but always visible -- some days are mostly these. */
.corridor-slab.is-unlinked .corridor-face {
  background:
    radial-gradient(130% 75% at 0% 0%, color-mix(in srgb, var(--slab-hue) 55%, transparent), transparent 64%),
    color-mix(in srgb, var(--slab-hue) 22%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--slab-hue) 55%, transparent);
  box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--slab-hue) 45%, transparent), var(--shadow-sm);
}

/* Nothing in progress: the middle of the hall is open, marked by a line of light. */
/* Full width like a slab: the track's end padding is sized for one, so a
   narrower last entry could never quite reach the middle. */
.corridor-slab.is-gap { cursor: default; }
.corridor-slab.is-gap .slab-sub { white-space: normal; }
.corridor-slab.is-gap .corridor-face {
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
}
.corridor-slab.is-gap .corridor-face::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 32%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--accent-gradient);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.corridor-slab.is-gap .slab-time { color: var(--accent-1); }

.corridor-arrow {
  position: absolute;
  top: 50%;
  z-index: 2000; /* above every slab (corridor.js stacks them up to 1000) */
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.corridor-arrow:hover { border-color: var(--accent-1); }
.corridor-arrow.is-prev { left: var(--space-3); }
.corridor-arrow.is-next { right: var(--space-3); }

/* The hall's scroll bar: a gold thumb on a quiet rail, as wide as the share
   of the walk in view (corridor.js). It keeps its place when idle so nothing
   beneath it moves (K-16). */
.corridor-bar {
  position: relative;
  z-index: 2000;
  width: min(560px, 72%);
  height: 18px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  touch-action: none;
}
.corridor-bar::before {
  content: "";
  position: absolute;
  inset: 7px 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
}
.corridor-bar.is-idle { visibility: hidden; }
.corridor-bar:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.corridor-thumb {
  position: absolute;
  top: 6px;
  left: 0;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-3) 45%, transparent);
  cursor: grab;
  transition: height 0.15s var(--ease), top 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.corridor-bar:hover .corridor-thumb,
.corridor-bar.is-dragging .corridor-thumb {
  top: 4px;
  height: 10px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-3) 70%, transparent);
}
.corridor-bar.is-dragging, .corridor-bar.is-dragging .corridor-thumb { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .corridor-thumb { transition: none; } }

/* The chosen block's actions, under the hall. */
.slab-panel {
  --work-scale: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.slab-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.slab-actions { flex-wrap: wrap; margin-top: var(--space-3); }
.slab-done-pill { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }

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

.work-title {
  margin: 0;
  font-size: calc(0.9rem + (0.75rem * var(--work-scale)));
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.work-time {
  font-size: calc(10px + (3px * var(--work-scale)));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.work-duration { font-size: 11px; color: var(--text-faint); }

.work-sub { font-size: calc(11px + (2px * var(--work-scale))); color: var(--text-muted); }

.work-now-pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: var(--on-accent);
}

.work-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.work-log-btn { width: auto; padding: 7px 12px; font-size: 13px; }

.work-log-host { margin-top: var(--space-4); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  /* A task's actions take their own line on a phone, so its title keeps the
     width to read as a title. */
  .task-row { flex-wrap: wrap; }
  .task-row-actions { flex-basis: 100%; justify-content: flex-end; }

  .clock-map-frame { aspect-ratio: 16 / 10; }
  .clock-readout { right: var(--space-4); bottom: var(--space-4); max-width: 62%; }
  .clock-analog { width: 64px; }
  .clock-date, .clock-place { display: none; }

  /* The bar chart is asked to hold roughly a third of a phone screen. */
  .bars-plot { height: 33vh; min-height: 150px; }

  .donut-row { gap: var(--space-2); }
  .donut-caption { display: none; }

  .corridor-arrow { display: none; }
  .slab-panel { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
  .corridor-slab.is-now .corridor-face,
  .corridor-slab.is-now .corridor-face::after { animation: none; }
  .corridor-face { transition: none; }
}

/* ================= Footer ================= */

/* The shell is a column with the app in the middle; this keeps the footer at
   the bottom of short pages without pinning it over the content. */
.footer-slot { margin-top: auto; }

.footer {
  position: relative;
  background: var(--surface);
  padding: 0 var(--space-6);
}
/* A gold horizon instead of a rule. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-3) 55%, transparent) 18%, var(--border) 55%, transparent);
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--space-5);
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-faint);
}

.foot-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.foot-logo { width: 48px; height: auto; flex: none; }
.foot-wordmark { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.foot-tagline { color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-4); }
.foot-link {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.foot-link:hover { color: var(--accent-3); }
.foot-link:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; border-radius: 3px; }
.foot-status { font-size: 11px; color: var(--text-faint); }
.foot-status:empty { display: none; }

.foot-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: nowrap; }
.foot-dot { opacity: 0.5; }

@media (max-width: 900px) {
  .footer { padding: 0 var(--space-4); }
  .foot-tagline { display: none; }
  .footer-inner { justify-content: center; text-align: center; }
}
@media print { .footer { display: none; } }

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

.pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex: none;
}

/* Must-dos are marked in the brand accent, not the warning colour: they stay
   prominent without reading as an alarm about the person (INV-12). */
.pill-mandatory {
  background: var(--accent-1-soft);
  color: var(--accent-1);
}

.icon-btn.is-on {
  color: var(--accent-1);
  border-color: color-mix(in srgb, var(--accent-1) 45%, transparent);
}

/* C-11: a skip is a choice, so it reads as settled rather than as done (no
   strike-through) and never as a problem (no alarm colour, INV-12). */
.pill-skipped {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.work-skip-reason {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

.modal-panel:has(.skip-dialog) { max-width: 480px; }

.skip-dialog h2 { font-size: 17px; margin: 0 0 var(--space-2); }

.must-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent-1) 30%, var(--border));
  background: color-mix(in srgb, var(--accent-1) 7%, transparent);
}

.must-strip.is-clear {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, transparent);
}

.must-strip.is-clear .pill-mandatory {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}

.must-strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.must-strip-count { font-size: 13px; font-weight: 600; color: var(--text); }

.must-strip-items { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.must-chip {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.quick-add-must {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
}

.quick-add-must input { width: auto; margin: 0; accent-color: var(--accent-1); }

/* D-11: what a block overlaps. A fact to know, not a problem (INV-12). */
.block-overlaps { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--text-muted); }
.block-overlaps li::before { content: "\2194\00a0"; color: var(--text-faint); }

/* ================= Starter packs ================= */

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.pack-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.pack-card.is-installed { border-color: color-mix(in srgb, var(--success) 45%, transparent); }

.pack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.pack-name { margin: 0; font-size: 18px; font-weight: 700; }
.pack-summary { margin: var(--space-1) 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.pack-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: 11.5px;
  color: var(--text-faint);
}

.pack-tasks {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pack-task {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
}

.pack-task-title { color: var(--text); flex: 1 1 auto; min-width: 0; }
.pack-task-meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

.pack-outcome { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* A pack's overlaps with the person's routines, one choice per item. Neutral
   colours throughout: an overlap is a fact to decide on, not an error. */
/* Pinned to the top, so a choice that opens a question below it grows the
   panel downwards instead of re-centring it under the pointer (K-16). */
.modal-panel:has(.clash-dialog) { max-width: 600px; margin: 0 auto auto; }
.clash-dialog { display: flex; flex-direction: column; gap: var(--space-3); }
.clash-dialog h2 { font-size: 17px; margin: 0; }
.clash-lead { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.clash-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.clash-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.clash-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.clash-meta { font-size: 12px; color: var(--text-faint); }
.clash-overlaps { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.clash-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.clash-block-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: 13px; }
.clash-block-title { color: var(--text); }
.clash-elsewhere {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.clash-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.clash-choice {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.clash-choice:hover { color: var(--text); }
.clash-choice.is-on {
  color: var(--accent-1);
  border-color: color-mix(in srgb, var(--accent-1) 55%, transparent);
  background: color-mix(in srgb, var(--accent-1) 10%, transparent);
}
.clash-hint { margin: 0; font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.clash-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.clash-summary { font-size: 12.5px; color: var(--text-muted); }
.clash-actions { display: flex; gap: var(--space-2); }

/* ================= Icon actions (theme, power) ================= */

.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.icon-action:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

.icon-action:focus-visible {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-1-soft);
}

.action-icon { width: 19px; height: 19px; display: block; }

/* Logging out is the one destructive control up here, so it leans danger on
   hover rather than sharing the neutral treatment. */
.icon-action-power:hover {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

/* ================= Bar chart axis ================= */

.bars-frame {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

/* Ticks are spread by space-between and nudged up by half a line, so each
   label sits on its gridline rather than above it. */
.bars-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  /* Leave room for the count and weekday rows under the plot. */
  padding-bottom: 34px;
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 1.5em;
}

.bars-tick { line-height: 1; height: 0; display: flex; align-items: center; justify-content: flex-end; }

.bars-plot { position: relative; flex: 1; min-width: 0; }

.bars-grid {
  position: absolute;
  inset: 0 0 34px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.bars-gridline {
  height: 1px;
  background: var(--border);
  opacity: 0.55;
}

.bars-gridline:last-child { opacity: 1; }

.bar-col { position: relative; z-index: 1; }

/* ================= "For you" proposal ================= */

.foryou-host:empty { display: none; }

/* The offer beside what it would look like; a compass goal's placement
   across the foot. One accent edge rather than a tinted panel: this is an
   offer sitting among the day's own content, not an alert. */
.foryou {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent-1) 28%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent-1) 6%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.foryou.has-aside { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); }

.foryou::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent-gradient);
}

.foryou-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.foryou-wide { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.foryou-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.foryou-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.foryou-star { font-size: 12px; letter-spacing: 0; color: var(--accent-3); }

.foryou-kind {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  color: var(--text-muted);
}

.foryou-source { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }

.foryou-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

.foryou-summary { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; max-width: 60ch; }

/* The reason is the point of the card, so it gets weight rather than being
   tucked underneath as fine print. */
.foryou-rationale {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--accent-1) 45%, var(--border));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.55;
  max-width: 64ch;
}

/* UI-2: the effort figure. Capacity, not a verdict: the accent, never an alarm colour (INV-12). */
.foryou-effort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.foryou-effort-figure {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-1-soft);
  color: var(--accent-1);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.foryou-effort-detail { font-size: 13px; color: var(--text-muted); }
/* UI-1: the difficulty score and its load band, a quiet chip before the effort. */
.foryou-difficulty {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-muted);
}
.foryou-difficulty-score { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* The right-hand panel: what accepting would look like. */
.foryou-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  align-self: start;
}

.foryou-aside-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.foryou-aside-fact { margin: 0; font-size: 13px; color: var(--text-muted); }

/* The week as seven marks. */
.foryou-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.foryou-day {
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  text-align: center;
  color: var(--text-faint);
}
.foryou-day.is-on { border-color: color-mix(in srgb, var(--accent-1) 40%, var(--border)); background: var(--accent-1-soft); color: var(--accent-1); font-weight: 700; }

/* A day of it: a thread down the times, a dot at each block. */
.foryou-blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Each row draws its own piece of the thread in the dot's column, so the
   line runs through the dots whatever the row's height; the first and last
   stop at their dot. */
.foryou-block::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  margin: -6px 0;
  background: linear-gradient(var(--border-strong), var(--border-strong)) center / 1px 100% no-repeat;
}
.foryou-block:first-child::before { background-size: 1px 50%; background-position: center bottom; }
.foryou-block:last-child::before { background-size: 1px 50%; background-position: center top; }
.foryou-block:only-child::before { background: none; }

.foryou-block {
  display: grid;
  grid-template-columns: 7.5em 11px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: 13.5px;
  position: relative;
}

.foryou-block::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--accent-1);
  background: var(--surface-2);
  justify-self: center;
  z-index: 1;
}

.foryou-block-when {
  grid-column: 1;
  grid-row: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.foryou-block-title { grid-column: 3; grid-row: 1; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.foryou-block .pill { grid-column: 4; grid-row: 1; }

.foryou-more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--accent-2);
  cursor: pointer;
}

.foryou-more:hover { text-decoration: underline; }

/* A change as its two values. */
.foryou-change { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.foryou-change-from, .foryou-change-to {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
}
.foryou-change-from { border: 1px solid var(--border-strong); color: var(--text-muted); }
.foryou-change-to { background: var(--accent-1-soft); color: var(--accent-1); }
.foryou-change-arrow { color: var(--text-faint); }

/* Two lengths as two bars. */
.foryou-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.foryou-bar-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 4.5em; align-items: center; gap: var(--space-2); font-size: 12.5px; }
.foryou-bar-label { color: var(--text-muted); }
.foryou-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.foryou-bar-track { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
.foryou-bar { display: block; height: 100%; border-radius: inherit; }
.foryou-bar.is-now { background: var(--border-strong); }
.foryou-bar.is-next { background: var(--accent-1); }

/* A goal's facts, and what accepting adds. */
.foryou-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-3); font-size: 13.5px; }
.foryou-facts dt { color: var(--text-faint); }
.foryou-facts dd { margin: 0; color: var(--text); }

.foryou-adds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: adds; }
.foryou-adds li { display: flex; flex-direction: column; gap: 2px; padding-left: 28px; position: relative; font-size: 13.5px; color: var(--text); counter-increment: adds; }
.foryou-adds li::before {
  content: counter(adds);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-1-soft);
  color: var(--accent-1);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.foryou-adds-key { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

.foryou-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.foryou-wide .foryou-actions { justify-content: flex-end; }

.foryou-note { margin: 0; font-size: 11.5px; color: var(--text-faint); }
.foryou-wide .foryou-note { text-align: right; }

/* Where an accepted compass practice goes (G-05): the routine, then its day. */
.foryou-place {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 13.5px;
}
.foryou-place-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.foryou-place-label { color: var(--text); font-weight: 600; }
.foryou-place select { width: auto; min-width: 12em; max-width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; }
.foryou-place-hint { font-size: 12px; color: var(--text-faint); }
.foryou-place-why { margin: 0; font-size: 12px; color: var(--text-faint); }

@media (max-width: 860px) {
  .foryou.has-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .foryou { padding: var(--space-5); }
  .foryou-title { font-size: 21px; }
  .foryou-source { margin-left: 0; flex-basis: 100%; }
  .foryou-actions { justify-content: stretch; }
  .foryou-actions .btn { flex: 1; }
  .foryou-wide .foryou-note { text-align: left; }
  .foryou-block { grid-template-columns: 6.6em 11px minmax(0, 1fr) auto; }
}

/* ---- the time picker (timeRange.js): a routine's day, the chosen time on it ---- */

.trp { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.trp-strip { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }

.trp-track {
  position: relative;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: crosshair;
  overflow: hidden;
}

/* The waking hours, a faint wash; outside them, plain. */
.trp-waking { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent-1) 5%, transparent); }

.trp-busy {
  position: absolute;
  top: 7px;
  bottom: 7px;
  border-radius: var(--radius-sm);
  /* A plain tint: hatching is kept for fixed obligations (B-7). */
  background: color-mix(in srgb, var(--text-faint) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-faint) 35%, transparent);
}

.trp-slot {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--accent-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-1) 25%, transparent);
  transition: left 180ms var(--ease), width 180ms var(--ease);
}

.trp-ticks { position: relative; height: 12px; }
.trp-tick { position: absolute; top: 0; width: 0; }
.trp-tick > span {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trp-tick:first-child > span { transform: none; }
.trp-tick:last-child > span { transform: translateX(-100%); }

.trp-free { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.trp-free-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.trp-chip {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.trp-chip:hover { border-color: var(--accent-1); }
.trp-chip:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.trp-chip[aria-pressed="true"] { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); font-weight: 600; }
.trp-none { margin: 0; font-size: 12.5px; color: var(--text-faint); }

.trp-boxes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.trp-box { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.trp-box input {
  width: 8.5em;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color-scheme: light dark;
}
.trp-box input:focus { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.trp-dash { padding-bottom: 9px; color: var(--text-faint); }
.trp-say { font-size: 12.5px; color: var(--text-muted); }
/* B-7: a fixed obligation on the routine's days, kept time across the strip's full height. */
.trp-kept { position: absolute; top: 2px; bottom: 2px; border-radius: var(--radius-sm); background: var(--obligation-fill); border: 1px solid var(--obligation); box-sizing: border-box; pointer-events: none; }
.trp-say.is-kept { color: var(--obligation); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .trp-slot { transition: none; } }
/* On a phone every other hour is named, so the labels never run together. */
@media (max-width: 520px) {
  .trp-tick:nth-child(even) > span { display: none; }
  .trp-boxes { flex-wrap: nowrap; }
  .trp-box { flex: 1 1 0; min-width: 0; }
  .trp-box input { width: 100%; min-width: 0; padding: 8px 6px; font-size: 13.5px; }
}

/* ---- Home: habits with no place yet, each with its own press ---- */

.unplaced-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.unplaced-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.unplaced-list li:first-child { border-top: 0; }
.unplaced-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--border-strong); }
.unplaced-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.unplaced-title { font-size: 14px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.unplaced-meta { font-size: 12.5px; color: var(--text-muted); }
.unplaced-said { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent-1); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--text); }
.prac-home-host > .unplaced-said { margin: 0 0 var(--space-5); }

@media (max-width: 460px) {
  .unplaced-list li { flex-wrap: wrap; }
  .unplaced-list li .btn { margin-left: calc(10px + var(--space-3)); }
}

/* ================= Deep assessment ================= */

.assess-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}

/* Progress runs against the answer floor, not the cap — an adaptive attempt
   usually stops well before the maximum, so filling toward the cap would
   understate how far along you are. */
.assess-progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--surface-2);
}

.assess-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  transition: width 0.3s var(--ease);
}

.assess-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.assess-tag {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-1-soft);
  color: var(--accent-1);
  letter-spacing: 0.06em;
}

.assess-stem { margin: 0; font-size: 14px; color: var(--text-muted); }

.assess-text {
  margin: 0;
  font-size: clamp(1.2rem, 3.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  max-width: 32ch;
}

.assess-scale { display: flex; flex-direction: column; gap: var(--space-2); }

.assess-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.1s var(--ease);
}

.assess-option:hover:not(:disabled) {
  border-color: var(--accent-1);
  background: var(--surface-hover);
}

.assess-option:active:not(:disabled) { transform: scale(0.995); }
.assess-option:disabled { opacity: 0.55; cursor: not-allowed; }
/* The answer already given, when looking back at a question. */
.assess-option.is-chosen {
  border-color: var(--accent-1);
  box-shadow: inset 0 0 0 1px var(--accent-1);
}

.assess-option-n {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.assess-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.assess-note { margin: 0; font-size: 12.5px; color: var(--text-faint); max-width: 60ch; }

/* ---------- results ---------- */

.assess-result {
  margin-top: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.assess-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.assess-result-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.assess-result-when { font-size: 12.5px; color: var(--text-faint); }

.score-group { display: flex; flex-direction: column; gap: var(--space-3); }

.score-row { display: flex; flex-direction: column; gap: 5px; }

.score-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.score-name { font-size: 14px; font-weight: 600; color: var(--text); }
.score-value { font-size: 14px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.score-track {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
}

.score-meta { font-size: 11.5px; color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  .assess-progress-fill, .assess-option { transition: none; }
}

/* ================= Calendar sync ================= */

.feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.feed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.feed-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.feed-stat { font-size: 11.5px; color: var(--text-faint); }

.feed-url-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Monospace and wide: this gets read character by character when a paste goes
   wrong, and it wraps to its own line rather than scrolling out of sight. */
.feed-url {
  flex: 1 1 22rem;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
}

.feed-url:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-1-soft);
}

.feed-warning {
  margin: 0;
  font-size: 12.5px;
  color: var(--warning);
  max-width: 62ch;
}

.feed-rotate { align-self: flex-start; font-size: 12.5px; }

.feed-confirm {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feed-confirm p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 62ch; }
.feed-confirm .btn-row { justify-content: flex-end; }

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.provider-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.provider-name { margin: 0; font-size: 15px; font-weight: 600; }
.provider-how { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* The caveat is the honest half -- how slowly each one refreshes, and that
   Samsung has no API of its own. Set apart so it can't be skimmed past. */
.provider-caveat {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.45;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}

.feed-footnote {
  margin: var(--space-4) 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
  max-width: 68ch;
}

.feed-card + .section-label { margin-top: var(--space-5); }


/* On a phone the wide gutters would waste most of the screen; pull them in and
   keep the full-bleed hairlines aligned to the same edge. */
@media (max-width: 640px) {
  .page {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .topbar {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .tabbar-inner {
    padding: 0 var(--space-4);
  }
}

/* ---------- Modal ----------

   Goal details open over the list rather than replacing it, so the list keeps
   its scroll position, its tab and its filters while you look at one goal. The
   route still exists and still renders the full page, so a deep link or a
   refresh lands somewhere sensible. */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  /* Long content scrolls the overlay, not the panel: a panel with its own
     scrollbar hides the fact that there is more below the fold. */
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  background: var(--scrim);
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  /* `auto` on both axes centres a short panel and still lets a tall one start
     at the top instead of overflowing off-screen. */
  margin: auto;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.modal-panel:focus {
  outline: none;
}

.modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* The hosted screen draws its own `.page` shell. Inside the panel that shell
   would add a second set of gutters and re-apply the wide cap, so it is
   flattened -- the panel is the container now. */
.modal-panel .page {
  max-width: none;
  padding: 0;
}

/* "Back to goals" is what the close button is for. */
.modal-panel .back-link {
  display: none;
}

/* The page behind must not scroll under the overlay. */
body.modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .modal-overlay {
    padding: var(--space-3);
  }
  .modal-panel {
    padding: var(--space-5) var(--space-4);
  }
}


/* ---------- Screen toolbar ----------

   What an embedded screen shows instead of a second heading: its filters and
   its primary action on one row, filters left and action right. The hub above
   already named the section, so this row carries only what you can *do*. */

.screen-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.screen-toolbar > :last-child {
  margin-left: auto;
}

/* ---------- Skeletons ----------

   Sized to the rows they stand in for, so the page does not collapse to a
   single line and snap back when the data arrives. */

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-row {
  height: 62px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-hover) 40%,
    var(--surface) 80%
  );
  background-size: 300% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

.skeleton-row.tall {
  height: 108px;
}

/* Same height as .cst-frame, so the constellation does not jump when the
   canvas replaces its placeholder. */
.skeleton-row.frame {
  height: clamp(540px, 72vh, 820px);
  border-radius: var(--radius-lg);
}

/* Stagger so the rows read as one surface loading rather than several. */
.skeleton-row:nth-child(2) { animation-delay: 0.08s; }
.skeleton-row:nth-child(3) { animation-delay: 0.16s; }
.skeleton-row:nth-child(4) { animation-delay: 0.24s; }
.skeleton-row:nth-child(5) { animation-delay: 0.32s; }
.skeleton-row:nth-child(6) { animation-delay: 0.4s; }

@keyframes skeleton-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-row { animation: none; }
}

/* ---------- Constellation ----------

   A star map of everything in the account, with the viewer's pulsar at the
   centre and columns growing to the right as a thread is followed. The canvas
   keeps its own dark sky in every theme, the way the watch dial keeps its own
   daylight: the node colours encode *what kind of thing a node is*, and the
   core is artwork with a black field dropped out by `screen` blending -- both
   need a dark ground to read at all. Only this panel is fixed; the page around
   it still follows the theme.

   The frame is three layers. `.cst-viewport` scrolls in both directions,
   `.cst-stage` is sized to the graph and moves under it, and `.cst-chrome`
   sits outside the scroller entirely -- which is what keeps the legend, the
   breadcrumb and the detail card pinned however far the map is dragged. */

.cst-frame {
  position: relative;
  height: clamp(540px, 72vh, 820px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 12% 50%, rgba(50, 90, 130, 0.35), transparent 60%),
    radial-gradient(90% 80% at 80% 20%, rgba(80, 60, 160, 0.28), transparent 65%),
    linear-gradient(140deg, #070b14 0%, #0a1020 55%, #070a12 100%);

  --sky-ink: #f4f7ff;
  --sky-ink-dim: rgba(244, 247, 255, 0.62);
  --sky-card: rgba(14, 20, 32, 0.82);
  --sky-card-edge: rgba(244, 247, 255, 0.12);
  color: var(--sky-ink);
}

.cst-viewport {
  position: absolute;
  inset: 0;
  overflow: auto;
  scrollbar-color: rgba(244, 247, 255, 0.25) transparent;
}

.cst-viewport::-webkit-scrollbar { width: 10px; height: 10px; }
.cst-viewport::-webkit-scrollbar-track { background: transparent; }
.cst-viewport::-webkit-scrollbar-thumb {
  background: rgba(244, 247, 255, 0.18);
  border-radius: var(--radius-pill);
}
.cst-viewport::-webkit-scrollbar-thumb:hover { background: rgba(244, 247, 255, 0.3); }

.cst-stage {
  position: relative;
}

/* Pinned: not a child of the scroller, so scrolling never moves it. */
.cst-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cst-chrome > * {
  position: absolute;
  pointer-events: auto;
}

.cst-links {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cst-link {
  fill: none;
  stroke-width: 1;
  opacity: 0.2;
}

/* The fan is many lines converging on one point; each has to stay faint or the
   bundle turns into a solid block of colour. */
.cst-link.is-leaf {
  opacity: 0.34;
}

.cst-link.is-active {
  opacity: 0.9;
  stroke-width: 1.7;
}

.cst-nodes {
  position: absolute;
  inset: 0;
}

.cst-nodes > * {
  position: absolute;
}

/* ---- the pulsar itself ---- */

.cst-core {
  width: var(--core-size, 128px);
  height: var(--core-size, 128px);
  display: grid;
  place-items: center;
  /* Deliberately NOT centred with `transform`. A transform makes this element
     a stacking context, which isolates the blending below it -- the artwork
     would then screen against only the halo instead of the sky, and its black
     field would stay a visible dark block. The JS offsets left/top instead. */
}

.cst-core > * {
  grid-area: 1 / 1;
}

.cst-core-img {
  width: 100%;
  height: 100%;
  /* The artwork has a black field baked in. `screen` drops it against the sky
     and leaves only the glow, which is why this needs a dark canvas -- and why
     nothing between here and the frame may create a stacking context.
     The mask is the belt to that braces: it fades the frame's corners out, so
     even where blending is unavailable there is no square edge. It starts at
     68% so it trims the black field, not the orbits. */
  mix-blend-mode: screen;
  mask: radial-gradient(circle, #000 68%, transparent 88%);
  -webkit-mask: radial-gradient(circle, #000 68%, transparent 88%);
  /* The new mark (2026-10-06) is a band seen at an angle, not a round ring:
     turned in place it would stand on its side, so it breathes instead. */
  animation: cst-breathe 7s ease-in-out infinite;
}

/* The core is drawn separately and does not rotate. Spinning the whole picture
   reads as a turning image; holding the centre still is what makes the orbit
   pipes read as revolving *around* something. */
.cst-core-star {
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffe9c9 26%, rgba(255, 190, 120, 0.55) 48%, transparent 72%);
  animation: cst-throb 3.2s ease-in-out infinite;
  pointer-events: none;
}

.cst-core-halo {
  width: 220%;
  height: 220%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-1) 40%, transparent) 0%, color-mix(in srgb, var(--accent-2) 14%, transparent) 42%, transparent 68%);
  animation: cst-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* A pulsar is a lighthouse -- beams sweeping past as it turns. */
.cst-core-beam {
  width: 300%;
  height: 300%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent-1) 22%, transparent) 12deg,
    transparent 34deg,
    transparent 180deg,
    color-mix(in srgb, var(--accent-2) 18%, transparent) 192deg,
    transparent 214deg,
    transparent 360deg
  );
  mask: radial-gradient(circle, transparent 26%, #000 34%, #000 62%, transparent 76%);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 34%, #000 62%, transparent 76%);
  animation: cst-spin 9s linear infinite;
  pointer-events: none;
}

.cst-core-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-1) 45%, transparent);
  animation: cst-pulse 3.6s ease-out infinite;
  pointer-events: none;
}

.cst-core-ring.r2 { animation-delay: 1.2s; }
.cst-core-ring.r3 { animation-delay: 2.4s; }

.cst-core-label {
  position: absolute;
  top: 100%;
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
}

.cst-core-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cst-core-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-ink-dim);
  /* "Software development & architecture" is a real answer to the profession
     field, and unbounded it runs off both sides of the canvas. */
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes cst-spin {
  to { transform: rotate(360deg); }
}

@keyframes cst-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes cst-throb {
  0%, 100% { opacity: 0.85; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes cst-pulse {
  0% { transform: scale(0.75); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ---- nodes ---- */

.cst-node {
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  text-align: left;
  background: var(--sky-card);
  border: 1px solid var(--sky-card-edge);
  border-left: 2px solid var(--node-color);
  border-radius: var(--radius-sm);
  color: var(--sky-ink);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

/* Hover changes colour, never position. Nudging the node sideways means a
   cursor resting near its left edge falls outside it, which ends the hover,
   snaps it back, and flickers. */
.cst-node:hover {
  border-color: var(--node-color);
  background: rgba(24, 32, 48, 0.92);
}

.cst-node.is-open,
.cst-node.is-selected {
  border-color: var(--node-color);
  box-shadow: 0 0 0 1px var(--node-color), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.cst-node.is-category {
  border-radius: var(--radius-md);
  padding: 8px var(--space-3);
}

.cst-node-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--node-color);
  box-shadow: 0 0 8px var(--node-color);
}

.cst-node-count {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

.cst-node-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cst-node.is-category .cst-node-title {
  font-size: 12.5px;
  color: var(--sky-ink-dim);
}

.cst-node-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cst-node-tag {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--node-color);
}

.cst-node-sub {
  font-size: 10.5px;
  color: var(--sky-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Says "there is another column behind this one" before you click it. */
.cst-node-chevron {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: var(--sky-ink-dim);
}

.cst-node.is-open .cst-node-chevron {
  color: var(--node-color);
}

.cst-pending {
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--sky-ink-dim);
  white-space: nowrap;
}

/* ---- pinned chrome ---- */

.cst-breadcrumb {
  left: var(--space-4);
  top: var(--space-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 320px);
  padding: 5px var(--space-3);
  background: var(--sky-card);
  border: 1px solid var(--sky-card-edge);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cst-crumb {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sky-ink-dim);
  cursor: pointer;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cst-crumb:hover { color: var(--sky-ink); }
.cst-crumb.current { color: var(--node-color, var(--sky-ink)); }
.cst-crumb-sep { font-size: 11px; color: var(--sky-ink-dim); opacity: 0.6; }

.cst-legend {
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2);
  background: var(--sky-card);
  border: 1px solid var(--sky-card-edge);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cst-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 6px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--sky-ink-dim);
  font-family: var(--font);
  font-size: 11.5px;
  cursor: pointer;
}

.cst-legend-row:hover,
.cst-legend-row.active {
  background: rgba(244, 247, 255, 0.08);
  color: var(--sky-ink);
}

.cst-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.cst-legend-label {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.cst-detail {
  right: var(--space-4);
  top: var(--space-4);
  width: 268px;
  padding: var(--space-4);
  background: rgba(10, 15, 26, 0.94);
  border: 1px solid var(--sky-card-edge);
  border-top: 2px solid var(--node-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cst-detail-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--sky-ink-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font);
}

.cst-detail-close:hover { color: var(--sky-ink); }

.cst-detail-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--node-color);
}

.cst-detail-title {
  margin: 2px 0 var(--space-3);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.cst-detail-rows {
  margin: 0 0 var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px var(--space-3);
  font-size: 11.5px;
}

.cst-detail-rows dt {
  color: var(--sky-ink-dim);
  white-space: nowrap;
}

.cst-detail-rows dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Phone width. The pinned chrome was laid out for a frame with a spare 268px
   column to give away on the right, which a 320px screen does not have: the
   legend sat on top of the map and the detail card was hidden outright, so
   tapping a node appeared to do nothing at all. The card becomes a sheet along
   the bottom edge instead, and the legend goes -- the first breadcrumb already
   leads back to the categories, which was the legend's real job. */
@media (max-width: 640px) {
  .cst-frame { height: clamp(420px, 68vh, 620px); }

  .cst-breadcrumb {
    right: var(--space-4);
    max-width: none;
  }

  .cst-legend { display: none; }

  .cst-detail {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    top: auto;
    width: auto;
    max-height: 55%;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-core-img,
  .cst-core-beam,
  .cst-core-halo,
  .cst-core-ring,
  .cst-core-star {
    animation: none;
  }
}

/* A live status line inside a screen: progress that changes as you work, which
   is why it is not the page subtitle. */
.screen-status {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* ---- social sign-in ---------------------------------------------------- */

/* Two fields on one line where they belong together -- first and last name
   read as one thing, and stacking them makes the signup form look twice as
   long as it is. Collapses below 460px, where side-by-side inputs stop being
   comfortably tappable. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 460px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.social-block {
  margin-top: var(--space-5);
}

/* A rule with the word centred in a gap in it, rather than a line and a label
   sitting under it. The gap is real -- the background shows through -- so it
   works on any surface colour and in every theme. */
.social-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--text-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.social-divider::before,
.social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Quieter than the primary action on purpose. On the login screen the
   password form is still the main path; these are alternatives, and giving
   them the accent gradient would make the screen argue with itself. */
.btn-social {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  justify-content: center;
  gap: var(--space-3);
  font-weight: 500;
}

.btn-social:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--text-faint);
}

.social-mark {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Apple's and GitHub's marks are single-colour and take `currentColor`, so
   they follow the theme. Google's four-colour mark does not, and must not --
   a recoloured Google G reads as a different button. */
.btn-social-apple .social-mark,
.btn-social-github .social-mark {
  color: var(--text);
}

/* ---- account screen ---------------------------------------------------- */

.account-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.account-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.account-email {
  font-size: 13px;
  color: var(--text-muted);
}

/* One row per way into the account. A rule between rows rather than a boxed
   card each, so a list of five reads as one list instead of five things. */
.method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}

.method-row:last-child {
  padding-bottom: 0;
}

.method-id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.method-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.method-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* The connected address can be long and must not push the button off the row. */
.method-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.method-key {
  width: 17px;
  flex: none;
  text-align: center;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.method-action {
  width: auto;
  flex: none;
  padding: 7px 14px;
  font-size: 13px;
}

/* Success's counterpart to `alertBanner`. Same shape, opposite colour, so a
   result reads the same way whichever way it went. */
.notice-banner {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
  font-size: 13px;
  margin-bottom: var(--space-4);
}

@media (max-width: 460px) {
  .method-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Stacked, the text has the row to itself: it keeps to the row's width and
     wraps, where one long unbroken line made the whole page scroll sideways. */
  .method-id { width: 100%; }
  .method-sub { white-space: normal; overflow-wrap: anywhere; }

  .method-action {
    width: 100%;
  }
}

/* Settings read as a column, not a dashboard: one narrow measure holding the
   heading and the cards on the same left edge, rather than a full-bleed page
   head above a 420px card floating in the middle of it. */
.account-page {
  max-width: 1600px;
}

/* Who you are on the left, how you get in and what is kept on the right; one
   column below 980px. Each column spaces its own cards. */
.account-grid {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.account-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.account-page .account-col > .card + .card { margin-top: 0; }

@media (max-width: 980px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); }
}

.account-page .card {
  max-width: none;
  margin-inline: 0;
}

.account-page .card + .card {
  margin-top: var(--space-5);
}

/* ---- email verification ------------------------------------------------- */

/* The one card on the account screen that asks for something, so it carries
   the accent rail rather than looking like the informational cards below. */
.verify-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-left: 3px solid var(--warning);
}

.verify-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.verify-card .method-sub {
  white-space: normal;
}

/* "Forgot password?" sits right-aligned under the password field. */
.form-aside {
  display: flex;
  justify-content: flex-end;
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  font-size: 13px;
}

@media (max-width: 460px) {
  .verify-card {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ================= Recovery Mode (R-4) =================
   A lighter week reads as a recalibrated plan: the brand accent, never the
   warning colour, and no statement about the week that led to it (INV-12). */

.recovery-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent-1) 30%, var(--border));
  background: color-mix(in srgb, var(--accent-1) 6%, transparent);
  font-size: 13px;
  color: var(--text-muted);
}

.recovery-note-text strong { color: var(--text); font-weight: 600; }
.recovery-note-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.pill-recalibrated {
  background: var(--accent-1-soft);
  color: var(--accent-1);
}

/* ================= Insights (J-1, J-3) =================
   Readings about the plan, drawn in neutral and accent only: nothing here is
   a grade, and nothing uses the warning or alarm colours (INV-12). */

.insights-page { display: flex; flex-direction: column; gap: var(--space-5); }

/* The Compass page's rose: an engraved watermark filling the screen area
   beside the sidebar and centred in it, held there while the page scrolls.
   The layer spans the whole main column (the page heading included); inside
   it a viewport-tall sticky box holds the rose, which scales to the box's
   shorter side. Never under the pointer. The panels on this page are a shade
   translucent so it reads through them; text stays on near-solid surface. */
.main-col:has(.compass-page) { position: relative; isolation: isolate; }
.compass-rose-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
.compass-rose {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: var(--space-4);
  box-sizing: border-box;
  opacity: 0.2;
}
.compass-page .insight-panel { background: color-mix(in srgb, var(--surface) 72%, transparent); }
.compass-rose .rose-gold { color: var(--royal-gold); }
.compass-rose .rose-blue { color: var(--accent-1); }
.compass-rose circle,
.compass-rose line,
.compass-rose polygon { fill: none; stroke: currentColor; stroke-linejoin: round; }
.compass-rose .rose-ring { stroke-width: 3; }
.compass-rose .rose-ring-fine,
.compass-rose .rose-tick { stroke-width: 1.2; }
.compass-rose .rose-tick-major { stroke-width: 2.4; }
.compass-rose .rose-ring-dotted { stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.compass-rose .rose-line { stroke-width: 1.6; }
.compass-rose .rose-fill { fill: currentColor; fill-opacity: 0.55; stroke-width: 1.6; }
.compass-rose .rose-hub { fill: var(--bg); }
.compass-rose text { font-family: var(--font-display); letter-spacing: 0.06em; }
.compass-rose .rose-letter { fill: var(--royal-gold); }
.compass-rose .rose-letter-minor { fill: var(--accent-1); }

.insight-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.insight-grid { display: flex; flex-direction: column; }

.insight-grid-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) 0.6fr 0.7fr 0.7fr 2.2fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.insight-grid-head {
  border-top: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insight-name { font-weight: 600; color: var(--text); }
.insight-reading, .insight-empty { color: var(--text-muted); }
.insight-empty { margin: 0; font-size: 13.5px; }
.insight-sentence { margin: 0; font-size: 14.5px; line-height: 1.5; }

.weekday-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }

.weekday-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.weekday-cell.is-peak { background: var(--accent-1-soft); color: var(--accent-1); }
.weekday-count { font-size: 14px; font-weight: 700; min-height: 1.2em; }
.weekday-name { font-size: 11.5px; color: var(--text-muted); }

/* At phone width a calibration row becomes a small stacked card: the name,
   the three figures on one line with their labels, then the reading. */
@media (max-width: 640px) {
  .insight-grid-head { display: none; }
  .insight-grid-row { grid-template-columns: repeat(3, 1fr); }
  .insight-name, .insight-reading { grid-column: 1 / -1; }
  .insight-grid-row [data-label]::before {
    content: attr(data-label) " ";
    color: var(--text-muted);
    font-size: 11.5px;
  }
}

/* ================= Micro-Wins (R-8 to R-10) ================= */

.micro-wins {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.micro-wins-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.micro-wins-count { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.micro-wins-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* Top-aligned, so the acknowledgement appearing below the text never moves
   the button that was just pressed (K-16: nothing moves under the pointer). */
.micro-win { display: flex; align-items: flex-start; gap: var(--space-3); }
.micro-win-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.micro-win-text { font-size: 14px; color: var(--text); }
.micro-win.is-done .micro-win-text { color: var(--text-muted); }
/* Q-13: set a small win aside, or bring it back. */
.micro-win-body { flex: 1; }
.micro-win-hide { font-size: 12px; padding: 2px var(--space-2); color: var(--text-muted); white-space: nowrap; }
.micro-wins-hidden { font-size: 12.5px; color: var(--text-muted); }
.micro-wins-hidden summary { cursor: pointer; }
.micro-win-hidden-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }

/* The acknowledgement arrives with the tick, in the accent -- warm, brief,
   and gone on the next visit rather than piling up. */
.micro-win-ack {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-1);
  animation: micro-win-ack 240ms ease-out;
}

@keyframes micro-win-ack {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .micro-win-ack { animation: none; }
}

/* ================= Life context (B-6, B-7) ================= */

/* Full width like the other pages: the week's shape and the fixed
   obligations side by side, stacking below tablet width. */
.life-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
}
.life-panel { max-width: none; margin: 0; }
/* B-14: origins and nature, across both columns beneath them. */
.life-origins { grid-column: 1 / -1; }
.life-origins-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.life-origins-cols .section-label { margin-bottom: var(--space-2); }
@media (max-width: 900px) { .life-origins-cols { grid-template-columns: 1fr; gap: var(--space-4); } }
.chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: 4px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.chip-input:focus-within { border-color: var(--accent-1); }
.chip-input input { flex: 1; min-width: 8rem; border: 0; background: transparent; padding: 4px; box-shadow: none; }
.chip-input input:focus { outline: none; box-shadow: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--accent-1-soft);
  border-radius: var(--radius-pill);
}
.chip-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 50%; }
.chip-x:hover { color: var(--text); }
.value-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.value-chip {
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.value-chip:hover:not(:disabled) { border-color: var(--accent-1); }
.value-chip.selected { background: var(--accent-gradient); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.value-chip:disabled { opacity: 0.45; cursor: default; }
.value-chip:focus-visible, .chip-x:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.life-panel .card-title { margin-top: 0; }
@media (max-width: 900px) {
  .life-layout { grid-template-columns: 1fr; }
}

.life-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

.life-context-card input[type="time"],
.life-context-card input[type="text"],
.life-context-card select {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.life-sensitive {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
}

.scale-field input[type="range"] { width: 100%; accent-color: var(--accent-1); }

.scale-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}

.scale-reading { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.obligation-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }

.obligation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.obligation-when { color: var(--text-muted); }
.obligation-add { display: flex; flex-direction: column; gap: var(--space-3); }
.obligation-times { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.obligation-times input[type="time"] { width: auto; }
/* 2026-10-18: the life area an obligation's hours count toward on the Compass. */
.obligation-area { width: auto; max-width: 100%; min-width: 0; }
.obligation-row .obligation-area { flex: 0 1 220px; }

/* Home's one-line nudge until the shape of the week is known. */
.life-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .life-grid { grid-template-columns: 1fr; }
}

/* ================= Compass (Phase 1) =================
   Six segments in a ramp between the two brand accents: the areas differ by
   share, not by meaning, so no area gets a colour that reads as good or bad. */

.compass-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.compass-meta { font-size: 12px; color: var(--text-muted); }

.compass-bar { display: flex; height: 28px; border-radius: var(--radius-md); overflow: hidden; gap: 2px; }
.compass-seg { display: flex; align-items: center; justify-content: center; min-width: 4px; font-size: 12px; font-weight: 600; color: var(--on-series); background: var(--dom-colour); }

/* Each of the compass's six areas has a colour of its own, the same wherever
   it is drawn (the bar, the list, the council, the cards) and whatever its
   rank: one hue each from the chart series (2026-10-20; they were six shades
   between two accents, so neighbours looked alike). */
.dom-micro_tribe { --dom-colour: var(--series-5); }
.dom-economic_engine { --dom-colour: var(--series-4); }
.dom-somatic_base { --dom-colour: var(--series-3); }
.dom-inner_citadel { --dom-colour: var(--series-6); }
.dom-macro_tribe { --dom-colour: var(--series-1); }
.dom-the_echo { --dom-colour: var(--series-2); }

.compass-domains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.compass-domains li { display: flex; gap: var(--space-2); align-items: flex-start; }
.compass-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--dom-colour); }
.compass-domain-name { font-size: 14px; }
.compass-domain-name span { color: var(--text-muted); }
.compass-domain-question { font-size: 12.5px; color: var(--text-muted); }

/* Proposed against recorded (Phase 3): two neutral accents, never a colour
   that reads as ahead or behind (INV-12). */
.compass-actual-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 12.5px; color: var(--text-muted); margin-bottom: var(--space-2); }
.compass-actual-legend span { display: inline-flex; align-items: center; gap: 6px; }
.compass-actual-legend i { width: 10px; height: 10px; border-radius: 2px; }
.compass-actual { list-style: none; margin: 0; padding: 0; }
.compass-actual li { padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.compass-actual li:first-child { border-top: none; }
.compass-actual-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 14px; }
.compass-actual-hours { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.compass-actual-bars { display: grid; gap: 3px; margin-top: 6px; }
.compass-actual-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.compass-actual-fill { height: 100%; border-radius: var(--radius-pill); }
.is-plan { background: var(--accent-1); }
.is-recorded { background: var(--accent-2); }
.compass-actual-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.compass-holding { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.compass-counted { margin-top: var(--space-3); font-size: 12.5px; color: var(--text-muted); }
.compass-counted summary { cursor: pointer; }
.compass-counted ul { margin: var(--space-2) 0; padding-left: 1.2em; line-height: 1.5; }
.compass-counted p { margin: 0; }

/* Suggested goals as tiles that always fill the panel: each at least 320px,
   and a row that isn't full stretches its tiles to the edge, so there is never
   a hole whatever the count or the width. The keystone is a banner across
   the top, its facts in one line once there is room.
   Tiles in a row share a height; inside, the facts go two-up once the tile
   itself is wide enough (a container query, not the viewport). */
.compass-goal-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.compass-goal {
  flex: 1 1 320px;
  min-width: min(100%, 320px);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--slab-hue) 12%, transparent), transparent 55%),
    var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--slab-hue) 28%, var(--border));
  border-top: 3px solid var(--slab-hue);
  border-radius: var(--radius-md);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.compass-goal:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--slab-hue) 55%, var(--border));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--slab-hue) 60%, transparent);
}
.compass-goal.is-keystone {
  flex: 1 1 100%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--slab-hue) 45%, transparent), 0 12px 32px -18px color-mix(in srgb, var(--slab-hue) 70%, transparent);
}
.compass-keystone { background: color-mix(in srgb, var(--slab-hue) 22%, transparent); color: var(--text); }
.compass-goal-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 12.5px; color: var(--text-muted); }
.compass-goal-type { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.compass-goal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slab-hue); flex: none; }
.compass-also { font-style: italic; font-weight: 400; }
.compass-goal-title { margin: var(--space-1) 0 0; font-size: 16px; line-height: 1.35; }
.compass-goal.is-keystone .compass-goal-title { font-size: 18px; }
.compass-goal-why { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); flex: 1; }
.compass-goal-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--slab-hue) 20%, var(--border));
  font-size: 13.5px;
}
.compass-fact dt { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.compass-fact dd { margin: 2px 0 0; color: var(--text); }
@container (min-width: 380px) { .compass-goal-facts { grid-template-columns: 1fr 1fr; } }
@container (min-width: 820px) { .compass-goal-facts { grid-template-columns: repeat(4, 1fr); } }

.compass-notes { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 640px) {
  .compass-domains { grid-template-columns: 1fr; }
}

/* ================= Goal steps (one-off checklist) ================= */

.step-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.step-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.step-title { flex: 1; font-size: 14px; }
.step-row.is-done .step-title { text-decoration: line-through; color: var(--text-muted); }
.step-add { display: flex; gap: var(--space-2); }

/* P-4: milestones. The star is the accent, the offer a quiet panel -- flagging
   work invites an achievement, it doesn't demand one (INV-12). */
.milestone-star { color: var(--accent-2); font-size: 15px; line-height: 1; }
.milestone-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14px;
}
.milestone-offer > span { flex: 1 1 16rem; }
.step-add input { flex: 1; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 14px; }

/* G-07: the calendar is the only reminder PULSAR can offer yet. A quiet panel,
   not a banner -- it's an offer, not an alert (INV-12). */
.calendar-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.calendar-nudge-text {
  flex: 1 1 280px;
}

.calendar-nudge-text p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.calendar-nudge .btn-row {
  margin: 0;
}

/* ================= Calendar ================= */

/* The routine over real days, dressed like Outlook: a plain toolbar, a mini
   month on the left, a white (or dark) hour grid with thin rules, events as
   tinted cards with a coloured left edge, today in Outlook's blue and "now" a
   red line. Event colours are goal types (goalColours.js), shared with Home. */

.cal-page { max-width: none; display: flex; flex-direction: column; gap: var(--space-3); }

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cal-toolbar-left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.cal-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.cal-btn:hover { background: var(--surface-hover); }
.cal-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cal-icon-btn:hover { background: var(--surface-hover); }

.cal-title-wrap { position: relative; min-width: 0; }
.cal-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cal-title:hover { background: var(--surface-hover); }
.cal-title-caret { font-size: 12px; color: var(--text-muted); }
.cal-date-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cal-views { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; }
.cal-view {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cal-view:last-child { border-right: 0; }
.cal-view:hover { background: var(--surface-hover); }
.cal-view.is-on {
  background: color-mix(in srgb, var(--cal-accent) 16%, var(--surface));
  color: var(--cal-accent);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--cal-accent);
}

.cal-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.cal-side { display: flex; flex-direction: column; gap: var(--space-4); }
.cal-main { min-width: 0; transition: opacity 0.15s var(--ease); }
.cal-main.is-loading { opacity: 0.6; }

/* --- the mini month --- */
.cal-mini {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cal-mini-head { display: flex; align-items: center; gap: 4px; margin-bottom: var(--space-2); }
.cal-mini-step { width: 26px; height: 26px; font-size: 17px; }
.cal-select {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-mini-dow { font-size: 11px; font-weight: 600; color: var(--text-faint); padding: 2px 0; }
.cal-mini-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cal-mini-day:hover { background: var(--surface-hover); }
.cal-mini-day.is-other { color: var(--text-faint); }
.cal-mini-day.is-in-range { background: color-mix(in srgb, var(--cal-accent) 14%, transparent); border-radius: 4px; }
.cal-mini-day.is-anchor { box-shadow: inset 0 0 0 1.5px var(--cal-accent); }
.cal-mini-day.is-today { background: var(--cal-accent); color: var(--on-accent); font-weight: 700; border-radius: 50%; }

/* --- legend --- */
.cal-legend { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--space-2); }
.cal-legend-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.cal-legend-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--slab-hue); }

/* --- the hour grid (Day, Work week, Week) --- */
.cal-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.cal-grid-head,
.cal-allday,
.cal-grid-inner {
  display: grid;
  /* On the rows, which carry --cal-days: set on the grid, the template would
     be worked out before the day count exists, and fail. */
  grid-template-columns: 56px repeat(var(--cal-days), minmax(72px, 1fr));
}
.cal-grid-head { border-bottom: 1px solid var(--border); }
.cal-day-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 8px 10px 6px;
  border: 0;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cal-day-head:hover { background: var(--surface-hover); }
.cal-day-num { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-day-name { font-size: 12px; }
.cal-day-head.is-today { box-shadow: inset 0 3px 0 var(--cal-accent); }
.cal-day-head.is-today .cal-day-num,
.cal-day-head.is-today .cal-day-name { color: var(--cal-accent); }

.cal-allday { border-bottom: 1px solid var(--border); min-height: 30px; }
.cal-allday-label { font-size: 11px; color: var(--text-faint); padding: 8px 6px 0 0; text-align: right; }
.cal-allday-cell { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-left: 1px solid var(--border); min-width: 0; }

/* Its height is set to reach the bottom of the window (calendar.js fit). */
.cal-grid-body { height: calc(100vh - 240px); min-height: 360px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.cal-grid-sticky { position: sticky; top: 0; z-index: 6; background: var(--surface); }
/* The time column stays put when the days scroll sideways, as Outlook's does. */
.cal-hours { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.cal-grid-sticky .cal-gutter { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.cal-grid-inner { position: relative; }
.cal-hours { display: flex; flex-direction: column; }
.cal-hour-label {
  height: var(--hour);
  padding-right: 8px;
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  transform: translateY(-7px);
  white-space: nowrap;
}
.cal-col {
  position: relative;
  border-left: 1px solid var(--border);
  /* An hour rule, and a fainter half-hour one, as Outlook draws them. */
  background:
    repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--hour)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) / 2),
      color-mix(in srgb, var(--border) 45%, transparent) calc(var(--hour) / 2) calc(var(--hour) / 2 + 1px),
      transparent calc(var(--hour) / 2 + 1px) var(--hour));
}
.cal-col.is-today { background-color: color-mix(in srgb, var(--cal-accent) 5%, transparent); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--cal-now); z-index: 3; pointer-events: none; }
.cal-now::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cal-now);
}

/* --- events --- */
.cal-event {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 3px 6px;
  border: 0;
  border-left: 4px solid var(--slab-hue);
  border-radius: 4px;
  background: color-mix(in srgb, var(--slab-hue) 22%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.cal-event:hover { background: color-mix(in srgb, var(--slab-hue) 34%, var(--surface)); box-shadow: var(--shadow-sm); z-index: 4; }
.cal-event:focus-visible { outline: 2px solid var(--cal-accent); outline-offset: 1px; z-index: 4; }
.cal-col .cal-event { position: absolute; z-index: 2; }
.cal-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cal-event-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.is-short { flex-direction: row; align-items: center; padding-top: 1px; padding-bottom: 1px; }

/* How it stands: done is solid; to come, lighter; not marked, faded; a skip,
   hatched like Outlook's tentative -- a choice, not a failure (INV-12). A
   session no block claimed has a thin outline. */
.cal-event.is-planned { background: color-mix(in srgb, var(--slab-hue) 13%, var(--surface)); }
.cal-event.is-open { opacity: 0.62; }
.cal-event.is-skipped {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--slab-hue) 16%, var(--surface)) 0 6px, var(--surface) 6px 12px);
  color: var(--text-muted);
}
.cal-event.is-session { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--slab-hue) 60%, transparent); }
/* A one-off task from the Planner: the gold edge the Planner gives a task's badge. */
.cal-event.is-oneoff { border-left-color: var(--accent-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-3) 45%, transparent); }
.cal-glyph { font-weight: 700; margin-right: 2px; }
.cal-glyph.is-done { color: var(--success); }
.cal-glyph.is-star { color: var(--warning); }
.cal-glyph.is-logs { font-weight: 600; color: var(--text-muted); }

/* --- the month --- */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.cal-month-dow {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cal-month-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 108px;
  min-width: 0;
  padding: 4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cal-month-cell:nth-child(7n) { border-right: 0; }
.cal-month-cell.is-other { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cal-month-cell.is-other .cal-month-num { color: var(--text-faint); }
.cal-month-num {
  align-self: flex-start;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 13px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cal-month-num:hover { background: var(--surface-hover); }
.cal-month-cell.is-today .cal-month-num { background: var(--cal-accent); color: var(--on-accent); }
.cal-event.is-line {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 1px 4px;
  border-left: 0;
  background: none;
}
.cal-event.is-line:hover { background: color-mix(in srgb, var(--slab-hue) 18%, transparent); }
.cal-event.is-line.is-done { background: color-mix(in srgb, var(--slab-hue) 14%, transparent); }
.cal-line-time { flex: none; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-more {
  align-self: flex-start;
  padding: 1px 4px;
  border: 0;
  background: none;
  color: var(--cal-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* --- an event's details --- */
.cal-detail { gap: var(--space-3); }
.cal-detail-bar { height: 6px; margin-right: 36px; border-radius: 3px; background: var(--slab-hue); } /* clear of the close button */
.cal-detail-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-muted); }
.cal-status {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-muted);
}
.cal-status.is-done { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.cal-status.is-planned,
.cal-status.is-today { background: color-mix(in srgb, var(--cal-accent) 14%, transparent); color: var(--cal-accent); }
.cal-detail-notes p { margin: 0; white-space: pre-wrap; font-size: 14px; color: var(--text); }
.modal-panel:has(.cal-detail) { max-width: 620px; }

@media (max-width: 900px) {
  .cal-body { grid-template-columns: 1fr; }
  .cal-side { display: none; }
}
@media (max-width: 600px) {
  .cal-toolbar { padding: var(--space-2); }
  .cal-title { font-size: 15px; }
  .cal-view { padding: 0 8px; font-size: 12px; }
  .cal-month-cell { min-height: 72px; }
  .cal-line-time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-event, .cal-main { transition: none; }
}

/* P-3: progression tier. A quiet pill on the task, and a panel under the row
   to move it and read how it got there -- a step, not a score (INV-12). */
.pill-tier { background: var(--surface-2); color: var(--text-muted); }
.tier-panel {
  margin: calc(-1 * var(--space-1)) 0 var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.tier-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.tier-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.tier-field input { padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 14px; }
.tier-field input[type="number"] { width: 5.5em; }
.tier-grow { flex: 1 1 180px; }
.tier-history { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text); }
.tier-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tier-when { color: var(--text-muted); min-width: 7em; }
.tier-reason { color: var(--text-muted); font-style: italic; }
@media (max-width: 600px) { .tier-panel { margin-left: 0; } }

/* C-13: Tasks. Every task under its goal, a toolbar for status and search,
   edit in place. The cards run the page's width, like Goals. */
.tasks-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.tasks-toolbar .nav-links { margin: 0; }
.tasks-search {
  flex: 1 1 240px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.tasks-card { max-width: none; margin: 0 0 var(--space-5); padding: var(--space-5) var(--space-6); }
.tasks-groups { display: flex; flex-direction: column; }
.tasks-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.tasks-goal { font-size: 16px; font-weight: 700; }
.tasks-count { font-size: 12.5px; color: var(--text-muted); }
.tasks-list { list-style: none; margin: 0; padding: 0; }
.tasks-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.tasks-row.is-editing { display: block; }
.tasks-row-body { flex: 1; min-width: 0; }
.tasks-row-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.tasks-row.is-archived .tasks-row-title { color: var(--text-muted); }
.tasks-row-desc { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.tasks-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: 6px; font-size: 12.5px; color: var(--text-faint); }
.tasks-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.tasks-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.tasks-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.tasks-wide { grid-column: 1 / -1; }
.tasks-field input,
.tasks-field select,
.tasks-field textarea {
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.tasks-field textarea { resize: vertical; }
.tasks-check { display: flex; align-items: center; gap: var(--space-2); font-size: 13.5px; color: var(--text); grid-column: 1 / -1; }
.tasks-form-actions { display: flex; gap: var(--space-2); grid-column: 1 / -1; }
@media (max-width: 700px) {
  .tasks-row { flex-direction: column; align-items: stretch; }
  .tasks-row-actions { justify-content: flex-start; }
  .tasks-form { grid-template-columns: 1fr; }
}

/* FR-RL: the routine library. Templates as cards; steps as cards beside the
   facets that choose them. A blank in a step is a gap to fill; a stated time
   wears the planner's badge; a source is one press away. */
.lib-templates { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.lib-template-card { display: flex; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.lib-template-card:hover { border-color: var(--border-strong); }
.lib-template-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-lg); }
.lib-template-body:focus-visible, .lib-chip:focus-visible, .lib-source-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.lib-template-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.lib-template-number { font-family: var(--font-display); font-size: 22px; color: var(--accent-3); }
.lib-template-title { margin: 0; font-family: var(--font-display); font-size: 19px; color: var(--text); }
.lib-template-summary { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.lib-template-facts { font-size: 12.5px; color: var(--text-faint); }
.lib-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
@media (min-width: 1000px) {
  .lib-layout { grid-template-columns: 320px minmax(0, 1fr); }
  .lib-filters { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
}
.lib-filters { max-width: none; margin: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.lib-filters .tasks-group-head { margin: 0; }
.lib-filters .card-title { margin: 0; }
.lib-facet { display: flex; flex-direction: column; gap: 6px; }
.lib-facet .field-hint { margin: 0; }
.lib-facet-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.lib-chip small { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.lib-chip:hover { border-color: var(--border-strong); }
.lib-chip.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); }
.lib-chip:disabled { opacity: 0.4; cursor: default; }
.lib-more summary, .lib-about summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.lib-more[open] summary { margin-bottom: var(--space-3); }
.lib-more[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.lib-count { margin: 0 0 var(--space-3); font-size: 13.5px; color: var(--text-muted); }
.lib-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.lib-steps.is-list { grid-template-columns: minmax(0, 1fr); }
.lib-step { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.lib-step.is-fill_in { border-left-color: var(--accent-3); }
.lib-step.is-checklist { border-left-color: var(--accent-2); }
.lib-step-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lib-step-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); overflow-wrap: anywhere; }
.lib-step-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.lib-blank { display: inline-block; min-width: 64px; padding: 0 6px; border-bottom: 2px solid var(--accent-3); font-size: 12.5px; font-style: italic; color: var(--text-faint); }
.lib-blank.is-filled { font-size: inherit; font-style: normal; font-weight: 600; color: var(--accent-3); }
.lib-step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: 12px; color: var(--text-muted); }
.lib-untimed { color: var(--text-faint); }
.lib-source-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding: var(--space-2) 0 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text-muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.lib-source-btn:hover { color: var(--text); }
.lib-info { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; font-style: italic; font-family: var(--font-display); }
.lib-secondhand { padding: 1px 7px; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); font-size: 11px; color: var(--text-faint); }
.lib-citations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lib-citations li { display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-3); border-left: 3px solid var(--accent-3); }
.lib-citations b { font-size: 15px; color: var(--text); }
.lib-citations span { font-size: 13px; color: var(--text-muted); }
.lib-source-kind.is-secondhand { color: var(--accent-2); }
.lib-template-scroll { display: flex; flex-direction: column; gap: var(--space-5); max-height: min(62vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.lib-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.lib-section-head h3 { margin: 0; font-size: 15px; color: var(--text); }
.lib-about { margin-top: var(--space-4); font-size: 13px; color: var(--text-muted); }
.lib-about ul { margin: var(--space-2) 0 0; padding-left: 18px; line-height: 1.6; }
.modal-panel:has(.lib-template) { max-width: 760px; }
.modal-panel:has(.lib-sources) { max-width: 560px; }

/* RL-8: the person's routines from the library. */
.lib-routines { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lib-routine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-5); border: 1px solid var(--border); border-left: 3px solid var(--accent-1); border-radius: var(--radius-lg); background: var(--surface); }
.lib-routine.is-paused { border-left-color: var(--border-strong); }
.lib-routine-main { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-routine-main .field-hint { margin: 0; }
.lib-routine-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lib-routine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* RL-10: the template wizard. One step a screen, shown as it will read. */
.lib-wizard { max-width: 720px; }
.lib-wizard-card { max-width: none; margin: 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.lib-wizard-card .card-title, .lib-wizard-card .lib-template-facts { margin: 0; }
.lib-wizard-dots { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.lib-wizard-dots span { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--border); }
.lib-wizard-dots span.is-done { background: var(--accent-3); }
.lib-wizard-dots span.is-on { background: var(--accent-1); }
.lib-preview { padding: var(--space-4); border: 1px solid var(--border); border-left: 3px solid var(--accent-3); border-radius: var(--radius-md); background: var(--surface-2); font-size: 16px; }
.lib-review { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.lib-review li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.lib-review li:last-child { border-bottom: 0; padding-bottom: 0; }

/* RL-11, RL-12: the studio. The stack, the facets and the steps: one column
   on a phone, the stack beside the library where there is room. */
.lib-studio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
@media (min-width: 1000px) {
  .lib-studio { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "stack stack" "filters results"; }
  .lib-studio > .lib-stack-card { grid-area: stack; }
  .lib-studio > .lib-filters { grid-area: filters; }
  .lib-studio > .lib-results { grid-area: results; }
}
@media (min-width: 1500px) {
  .lib-studio { grid-template-columns: 280px minmax(0, 1fr) 440px; grid-template-areas: "filters results stack"; }
  .lib-studio > .lib-stack-card { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
}
.lib-stack-card { max-width: none; margin: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.lib-stack-card .tasks-group-head, .lib-stack-card .card-title, .lib-stack-card .field-hint { margin: 0; }
.lib-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lib-stack-place { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.lib-stack-item .lib-step-head { flex-wrap: wrap; }
.lib-stack-moves { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.lib-stack-moves .icon-btn { min-width: 36px; min-height: 36px; }
.lib-stack-blanks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.lib-stack-blanks .field { margin: 0; }
.lib-summary { margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--space-2); }
.lib-summary-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); font-size: 13px; }
.lib-summary dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding-top: 2px; }
.lib-summary dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.lib-add { align-self: flex-start; padding: 6px 14px; font-size: 13px; }
.lib-added { align-self: flex-start; padding: 4px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); font-size: 12px; color: var(--text-faint); }

/* RL-13, RL-14: the practice feed. A place a card; a step a row with its
   tick, or a quiet mark where it is only read. */
.prac-page { display: flex; flex-direction: column; gap: var(--space-5); }
/* The page's full width, as every other: places side by side where they fit,
   the setup (read once in a while) across the foot. */
/* 2026-10-18: one place under another at the page's width, as every other
   page's panels are; a place's steps flow into columns inside it, so a wide
   screen is used across rather than as two tall, narrow columns. */
.prac-places { display: flex; flex-direction: column; gap: var(--space-5); }
.prac-places .prac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); column-gap: var(--space-6); align-items: start; }
.prac-places .prac-item:first-child { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.prac-place { max-width: none; margin: 0; padding: var(--space-5); min-width: 0; }
.prac-place .tasks-group-head, .prac-place .card-title { margin: 0; }
.prac-place > .field-hint { margin: 2px 0 var(--space-4); }
.prac-place > summary { cursor: pointer; font-family: var(--font-display); font-size: 18px; color: var(--text); }
.prac-place[open] > summary { margin-bottom: var(--space-2); }
.prac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prac-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.prac-item:first-child { border-top: 0; padding-top: 0; }
.prac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.prac-body .lib-step-head { flex-wrap: wrap; }
.prac-body .lib-source-btn { border-top: 0; padding-top: 0; }
.prac-routine { font-size: 12px; color: var(--text-faint); }
.prac-tick { flex: none; width: 28px; height: 28px; margin-top: 1px; border: 2px solid var(--border-strong); border-radius: 50%; background: none; color: var(--surface); font-size: 15px; line-height: 1; cursor: pointer; }
.prac-tick:hover { border-color: var(--accent-1); }
.prac-tick:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.prac-tick[aria-pressed="true"] { border-color: var(--accent-1); background: var(--accent-1); }
.prac-read { flex: none; width: 28px; height: 28px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.prac-read::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.prac-item.is-done .lib-step-text { color: var(--text-muted); }
.prac-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.prac-notice { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-left: 3px solid var(--accent-1); border-radius: var(--radius-md); background: var(--surface); font-size: 13.5px; color: var(--text); }
/* RL-16: a prompt's answer, written under it. */
.prac-answer { display: flex; flex-direction: column; gap: var(--space-2); }
.prac-answer .field { margin: 0; }
.prac-answer textarea { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.prac-answer textarea:focus { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.prac-saved { font-size: 12.5px; color: var(--text-muted); }
/* 2026-10-18: Practices compact, in the panels of the other pages (Focus,
   the Week planner): section titles at their size, a step in three lines
   (what, the words, where from and Count as a habit), three columns where
   they fit. Scoped to the page: Home's practices card is unchanged. */
.prac-page { gap: var(--space-4); }
.prac-page .tasks-toolbar { margin-bottom: 0; }
.prac-page .prac-places { gap: var(--space-4); }
.prac-page .prac-place { padding: var(--space-4) var(--space-5); }
.prac-page .prac-place .card-title, .prac-page .prac-place > summary { font-family: inherit; font-size: 16px; font-weight: 700; }
.prac-page .prac-place > .field-hint { margin: 2px 0 var(--space-3); font-size: 12.5px; }
.prac-page .prac-places .prac-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: var(--space-5); }
.prac-page .prac-item { gap: var(--space-2); padding: var(--space-2) 0; }
.prac-page .prac-places .prac-item:first-child { padding-top: var(--space-2); }
.prac-page .prac-tick, .prac-page .prac-read { width: 22px; height: 22px; font-size: 12px; margin-top: 0; }
.prac-page .prac-body { gap: 3px; }
.prac-page .lib-step-label { font-size: 11px; }
.prac-page .prac-body .lib-step-text { font-size: 13.5px; line-height: 1.45; }
.prac-page .prac-foot { flex-wrap: nowrap; gap: var(--space-3); }
.prac-page .prac-foot .lib-source-btn { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; margin-top: 0; font-size: 12px; }
.prac-page .prac-foot .icon-btn { padding: 2px 6px; }
.prac-page .prac-foot .lib-source-btn > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prac-page .prac-foot .lib-secondhand, .prac-page .prac-foot .icon-btn { flex: none; white-space: nowrap; }
.prac-page .prac-answer textarea { min-height: 44px; font-size: 13.5px; }
.prac-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.prac-history-list li { padding-left: var(--space-3); border-left: 3px solid var(--accent-3); }
.prac-habit-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.prac-habit-fields .field, .prac-habit-fields .field-hint { margin: 0; }
.prac-habit-fields select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; }
/* Q-35: today's practices on Home. */
.prac-home-host:empty, .lib-pointers-host:empty { display: none; }
.prac-home { max-width: none; margin: 0 0 var(--space-5); padding: var(--space-5); }
.prac-home .tasks-group-head { margin: 0 0 var(--space-3); }
.prac-home .card-title { margin: 0; }
.prac-home .prac-item { align-items: center; padding: var(--space-2) 0; }
.prac-home .planner-dialog-actions { margin-top: var(--space-3); }
/* Q-41: the compass pointing at a template. */
.lib-pointers { max-width: none; margin: 0 0 var(--space-5); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.insight-panel.lib-pointers { padding: var(--space-4) var(--space-5); }
.lib-pointers .field-hint { margin: 0; }
.lib-pointer-template small { font-size: 11.5px; color: var(--text-faint); }
/* RL-18: a step the library now words differently. */
.lib-changed-note { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.lib-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-height: min(60vh, 600px); overflow-y: auto; overscroll-behavior: contain; }
.lib-changes li { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); align-items: flex-start; }
.lib-changes li:last-child { border-bottom: 0; padding-bottom: 0; }
.lib-changes .field { margin: 0; align-self: stretch; }

/* K-25: the data grid, how a person's goals, tasks and routines are listed.
   A table read down its columns: one row a record, one column a fact. Dense
   on purpose; the row's first cell wears its goal type's colour. On a narrow
   screen a row becomes a block with its facts labelled. */
.dg { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dg-search { flex: 1 1 260px; max-width: 420px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.dg-search:focus { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.dg-count-wrap { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dg-scroll { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow-x: auto; }
.dg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dg-table th, .dg-table td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.dg-table thead th { position: sticky; top: 0; z-index: 1; padding-top: 8px; padding-bottom: 8px; background: var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; }
.dg-table th.is-end, .dg-table td.is-end { text-align: right; }
.dg-table th.is-grow { width: 34%; }
.dg-table tbody tr:last-child > * { border-bottom: 0; }
.dg-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dg-sort:hover, .dg-sort.is-on { color: var(--text); }
.dg-sort:focus-visible, .dg-open:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; border-radius: var(--radius-sm); }
.dg-arrow { font-size: 11px; opacity: 0.45; }
.dg-sort.is-on .dg-arrow { opacity: 1; color: var(--accent-3); }
.dg-row.is-openable { cursor: pointer; }
.dg-row.is-openable:hover > td { background: var(--surface-hover); }
.dg-row.is-muted > td { opacity: 0.62; }
.dg-row td.is-primary { box-shadow: inset 3px 0 0 var(--slab-hue, var(--border-strong)); }
.dg-open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dg-title { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.dg-sub { display: block; font-size: 12px; color: var(--text-faint); }
.dg-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dg-figure { display: block; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.dg-none { color: var(--text-faint); }
.dg-chips, .dg-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dg-actions { justify-content: flex-end; flex-wrap: nowrap; }
.dg-meter { display: inline-flex; flex-direction: column; gap: 4px; min-width: 110px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-meter-bar { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.dg-meter-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-2); }
.dg-group > th { padding: 10px 12px 7px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.dg-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.dg-row.is-replaced > td { padding: var(--space-4); background: var(--surface-2); }
.dg-empty { margin: 0; padding: var(--space-5); text-align: center; font-size: 13.5px; color: var(--text-muted); }
.dg-table .day-pills { flex-wrap: nowrap; gap: 3px; }
.dg-table .day-pill-static { width: 22px; height: 20px; font-size: 11px; }
/* Tasks: a tile a goal, folded to start with. Its heading says what is
   inside; opened, it holds that goal's table with headings of its own. */
.tasks-tiles { display: flex; flex-direction: column; gap: var(--space-3); }
.tasks-tile { border: 1px solid var(--border); border-left: 3px solid var(--slab-hue, var(--border-strong)); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.tasks-tile-head { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); }
.tasks-tile-toggle { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); padding: 11px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-md); }
.tasks-tile-toggle:hover .tasks-tile-title { color: var(--accent-1); }
.tasks-tile-toggle:focus-visible { outline: 2px solid var(--accent-1); outline-offset: -2px; }
.tasks-tile-chevron { flex: none; width: 14px; font-size: 12px; color: var(--text-muted); }
.tasks-tile-title { font-weight: 600; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.tasks-tile-facts { font-size: 12.5px; color: var(--text-faint); }
.tasks-tile-body { padding: 0 var(--space-3) var(--space-3); }
.tasks-tile-body[hidden] { display: none; }
.tasks-fold { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.tasks-fold .btn { padding: 7px 12px; font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .dg-scroll { border: 0; background: none; overflow: visible; }
  .dg-table, .dg-table tbody, .dg-table tr, .dg-table td, .dg-table th { display: block; }
  .dg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dg-table .dg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: var(--space-3); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .dg-table .dg-row > td { padding: 0; border: 0; text-align: left; min-width: 0; }
  .dg-row > td.is-primary, .dg-row > td.is-end, .dg-row.is-replaced > td { grid-column: 1 / -1; }
  .dg-row > td.is-primary { padding-left: 10px; }
  .dg-row > td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
  .dg-actions { justify-content: flex-start; flex-wrap: wrap; }
  .dg-table .dg-row > td:empty { display: none; }
  .dg-group > th { margin: var(--space-4) 0 var(--space-2); padding: 0 2px; border: 0; background: none; }
  .dg-table tbody tr.dg-group:first-child > th { margin-top: 0; }
}

/* K-24: slide capture, the one way something new is entered. A dialog whose
   fields come a slide at a time; each field wears the colour of the level it
   writes to, with the level's name, so a slide spanning levels is read at a
   glance. Level colours are tokens (INV-7). */
.modal-panel:has(.cap-dialog) { max-width: 640px; }
.cap-dialog { display: flex; flex-direction: column; gap: var(--space-4); }
.cap-dialog [data-level="vocabulary"] { --cap: var(--royal-gold); }
.cap-dialog [data-level="type"] { --cap: var(--series-4); }
.cap-dialog [data-level="goal"] { --cap: var(--accent-1); }
.cap-dialog [data-level="task"] { --cap: var(--accent-2); }
.cap-dialog [data-level="routine"] { --cap: var(--series-3); }
.cap-dialog [data-level="block"] { --cap: var(--accent-3); }
.cap-dialog [data-level="record"] { --cap: var(--series-5); }
.cap-dialog [data-level="answer"] { --cap: var(--series-2); }
.cap-head { display: flex; flex-direction: column; gap: 6px; }
.cap-head .card-title { margin: 0; }
.cap-head .lib-wizard-dots { margin: var(--space-2) 0 0; }
.cap-step { font-size: 13px; color: var(--text-muted); }
.cap-key, .cap-context { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 9px; border: 1px solid var(--cap, var(--border-strong)); border-left-width: 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cap, var(--border-strong)) 10%, transparent); font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.cap-chip b { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.cap-slide { display: flex; flex-direction: column; gap: var(--space-3); max-height: min(58vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; }
.cap-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 10px 9px 12px; border-left: 4px solid var(--cap, var(--border-strong)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cap, var(--border-strong)) 7%, transparent); }
.cap-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.cap-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
.cap-field input:not([type="checkbox"]), .cap-field select, .cap-field textarea { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14.5px; }
.cap-field textarea { resize: vertical; line-height: 1.5; }
.cap-field input:focus, .cap-field select:focus, .cap-field textarea:focus { outline: 2px solid var(--cap, var(--accent-1)); outline-offset: 1px; }
.cap-check { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; }
.cap-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.cap-trio { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(96px, 1fr) minmax(0, 3fr); gap: var(--space-2); }
@media (max-width: 560px) { .cap-trio { grid-template-columns: 1fr 1fr; } .cap-trio > :last-child { grid-column: 1 / -1; } }
.cap-group { margin: 0; padding: var(--space-3); border: 1px dashed var(--cap, var(--border-strong)); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cap-group > legend { padding: 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.cap-block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cap-block-head { display: flex; align-items: center; justify-content: space-between; }
/* A routine drafted for a later day (D-12): the day in rows, the person's
   blocks to change and their fixed obligations among them, locked. */
.dr-rows { display: grid; gap: 6px; }
.dr-row { display: grid; grid-template-columns: 122px 122px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dr-row input, .dr-row select { min-width: 0; width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; color-scheme: inherit; }
.dr-row input:focus, .dr-row select:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1-soft); }
.dr-fixed { grid-template-columns: 240px minmax(0, 1fr) auto auto; padding: 9px 12px; border: 1px solid var(--obligation); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--obligation-fill), var(--surface-2); font-size: 13px; color: var(--text-muted); }
.dr-fixed .dr-time { font-variant-numeric: tabular-nums; }
.dr-fixed .dr-what { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-fixed .dr-days { font-size: 12px; color: var(--text-faint); }
.dr-lock { padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.badge-draft { background: var(--accent-2-soft, var(--surface-2)); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); }
.draft-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--space-2); font-size: 13px; color: var(--text-muted); }
.draft-line input { width: auto; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; color-scheme: inherit; }
/* D-8: a routine about to start or running today, said once, with its way out. */
.routine-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-left: 3px solid var(--accent-1); border-radius: var(--radius-md); background: var(--surface-2); }
.routine-lock p { margin: 0; flex: 1 1 320px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.routine-lock strong { color: var(--text); }
@media (max-width: 640px) {
  .dr-row { grid-template-columns: 1fr 1fr; }
  .dr-row > :nth-child(n + 3) { grid-column: 1 / -1; }
  .dr-fixed { grid-template-columns: 1fr auto; }
  .dr-fixed .dr-days { grid-column: 1 / -1; }
}
.cap-block-place { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.cap-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-choice { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.cap-choice:hover { border-color: var(--border-strong); }
.cap-choice.is-on { border-color: var(--cap, var(--accent-1)); background: color-mix(in srgb, var(--cap, var(--accent-1)) 22%, transparent); font-weight: 600; }
.cap-choice:focus-visible { outline: 2px solid var(--cap, var(--accent-1)); outline-offset: 2px; }
.cap-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cap-review { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cap-review > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); padding: 7px 10px; border-left: 4px solid var(--cap, var(--border-strong)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cap, var(--border-strong)) 7%, transparent); font-size: 13.5px; }
.cap-review dt { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cap-review dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text); overflow-wrap: anywhere; }
.cap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cap-spacer { flex: 1; }
.cap-discard { color: var(--text-muted); }

/* TP-3: the Task Planner. Top to bottom: capture and the week's figures, the
   week, the inbox beside the goals, the rules. The week is seven columns, or
   one day as a grid of equal cards. A task wears its goal type's hue on its
   edge; whatever takes time leads with a badge of how long. */
.planner-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "week" "inbox" "goals" "rules"; }
.planner-card { max-width: none; margin: 0; padding: var(--space-5); min-width: 0; }
.planner-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.planner-inbox { grid-area: inbox; }
.planner-week { grid-area: week; }
.planner-goals { grid-area: goals; }
.planner-rules { grid-area: rules; }
/* TP-7: habits no routine holds, between the plan and the rules. */
.planner-habits { grid-area: habits; display: flex; flex-direction: column; gap: var(--space-2); }
.planner-habits .field-hint { margin: 0; }
.planner-layout.has-habits { grid-template-areas: "top" "week" "inbox" "goals" "habits" "rules"; }
@media (min-width: 901px) {
  .planner-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "top top" "week week" "inbox goals" "rules rules"; align-items: start; }
  .planner-layout.has-habits { grid-template-areas: "top top" "week week" "inbox goals" "habits habits" "rules rules"; }
}
.planner-habit-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; }
.planner-habit-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: 9px 0; border-top: 1px solid var(--border); }
.planner-habit-list li:first-child { border-top: 0; }
.planner-habit-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planner-habit-title { font-weight: 600; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.planner-habit-meta { font-size: 12.5px; color: var(--text-faint); }
.planner-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-3); }
.planner-quick { flex: 2 1 320px; display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.planner-quick .tasks-search { flex: 1 1 180px; min-width: 0; padding: 10px 14px; font-size: 15px; }
/* TP-AI-1: the microphone beside the inbox's box. The same button as in a
   box you write in (.mic-box-btn), standing in the row, not over a corner. */
.planner-quick .planner-quick-mic { position: static; flex: none; align-self: center; }
.planner-stats { flex: 1 1 280px; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.planner-stat { display: flex; flex-direction: column; min-width: 0; }
.planner-stat b { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.planner-stat span { font-size: 12px; color: var(--text-muted); }
.planner-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.planner-list, .planner-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.planner-row,
.planner-goal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--slab-hue, var(--border-strong));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.planner-row.is-planned { background: color-mix(in srgb, var(--slab-hue, var(--accent-1)) 14%, var(--surface)); }
.planner-row.is-done .planner-row-title { color: var(--text-muted); text-decoration: line-through; }
.planner-goal.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); }
.planner-row-body,
.planner-goal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.planner-row-body:focus-visible,
.planner-goal-body:focus-visible,
.planner-day-head:focus-visible,
.planner-cell-body:focus-visible,
.planner-tick:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.planner-row-title { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.planner-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px var(--space-3); font-size: 12px; color: var(--text-muted); }
/* How long, at a glance: the same badge on a row and on a card. */
.planner-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-3) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent-3) 45%, transparent);
  color: var(--accent-3);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.planner-badge.is-unknown { background: none; border-style: dashed; border-color: var(--border-strong); color: var(--text-faint); }
.planner-tick {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.planner-tick:hover { border-color: var(--success); }
.planner-tick.is-done { border-color: var(--success); background: var(--success); }
.planner-place {
  flex: none;
  max-width: 108px;
  padding: 5px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
}
.planner-week-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.planner-week-head .card-title { margin: 2px 0 0; font-size: 22px; }
.planner-week-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.planner-week-nav .cal-btn.is-on { border-color: var(--accent-3); color: var(--accent-3); }
.planner-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.planner-day { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 150px; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.planner-day.is-today { border-color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 6%, var(--surface-2)); }
.planner-day-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 var(--space-2); padding: 0 0 var(--space-2); border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.planner-day-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.planner-day-num { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); justify-self: end; }
.planner-day.is-today .planner-day-num { color: var(--accent-3); }
.planner-day-total { grid-column: 1 / -1; font-size: 12px; color: var(--text-faint); }
.planner-day-list { gap: 4px; }
.planner-day .planner-row { padding: 5px 6px; background: color-mix(in srgb, var(--slab-hue, var(--accent-1)) 14%, var(--surface)); }
.planner-day .planner-row-title { font-size: 13px; }
.planner-day .planner-badge { min-width: 0; padding: 1px 7px; font-size: 11.5px; }
.planner-held { margin-top: auto; padding-top: var(--space-2); border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text-faint); }
.planner-add { align-self: flex-start; }
/* The day in view. Hidden beside seven columns on a wide screen, where the
   columns are the picker; always shown above the grid. */
.planner-day-picker { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--space-4); }
.planner-week.is-grid .planner-day-picker { display: grid; }
.planner-day-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.planner-day-chip b { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.planner-day-chip small { font-size: 11px; color: var(--text-faint); }
.planner-day-chip.is-today b { color: var(--accent-3); }
.planner-day-chip.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); }
/* One day as a grid. Every card is the same size; the head (how long, when)
   stays put and the body scrolls inside the card, so a long note never moves
   the grid. */
.planner-grid-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.planner-grid-head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--text); }
.planner-grid-head span { font-size: 12.5px; color: var(--text-muted); }
.planner-grid-head .planner-add { margin-left: auto; }
.planner-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 172px; gap: var(--space-3); }
.planner-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.planner-cell.is-task { border-top-color: var(--slab-hue, var(--accent-1)); background: color-mix(in srgb, var(--slab-hue, var(--accent-1)) 10%, var(--surface)); }
.planner-cell.is-obligation { border-top-color: var(--obligation); background: var(--obligation-fill), var(--surface); }
.planner-cell.is-obligation .planner-cell-kind { color: var(--obligation); }
.planner-cell.is-obligation .planner-cell-head { background: var(--surface); }
.planner-cell-head { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); }
.planner-cell-head .planner-badge { min-width: 58px; padding: 5px 11px; font-size: 15px; }
.planner-cell-when { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.planner-cell-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.planner-cell-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.planner-cell-title { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.planner-cell.is-done .planner-cell-title { color: var(--text-muted); text-decoration: line-through; }
.planner-cell-fact { display: flex; gap: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.planner-cell-fact span { flex: none; min-width: 52px; color: var(--text-faint); }
.planner-cell-fact b { min-width: 0; font-weight: 500; color: var(--text-muted); overflow-wrap: anywhere; }
.planner-cell-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.planner-cell-open { align-self: flex-start; margin-top: auto; padding-left: 0; }
@media (max-width: 900px) {
  .planner-day-picker { display: grid; }
  .planner-days { grid-template-columns: minmax(0, 1fr); }
  .planner-day { display: none; }
  .planner-day.is-picked { display: flex; }
  .planner-day-chip small { display: none; }
}

/* TP-5, TP-R6: a suggested slot. */
.planner-suggest { flex: none; color: var(--accent-3); }
.planner-suggested { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--accent-3) 45%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-3) 8%, var(--surface)); }
.planner-suggested .planner-badge { min-width: 64px; padding: 6px 12px; font-size: 16px; }
.planner-suggested > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planner-suggested b { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.planner-suggested span { font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.planner-suggestion-reason { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.planner-anyway { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.planner-anyway .field-hint { margin: 0; }
.planner-anyway .btn { text-align: left; white-space: normal; }

/* TP-6: Plan my week. The list scrolls inside the dialog; the buttons stay. */
.planner-plan-btn { flex: none; }
.planner-plan-scroll { display: flex; flex-direction: column; gap: var(--space-3); max-height: min(58vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.planner-plan-scroll > p { margin: 0; }
.planner-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.planner-plan-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.planner-plan-item input, .planner-plan-gap { flex: none; width: 18px; height: 18px; margin-top: 4px; }
.planner-plan-item.is-unplaced { border-style: dashed; background: none; }
.planner-plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.planner-plan-body b { font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.planner-plan-when { font-size: 13.5px; color: var(--accent-3); font-variant-numeric: tabular-nums; }
.planner-plan-why { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.planner-plan-note { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent-2); font-size: 13px; color: var(--text-muted); }
.modal-panel:has(.planner-plan) { max-width: 680px; }
.rules-starter { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--accent-3) 45%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-3) 7%, var(--surface)); }
.rules-starter b { font-size: 14px; color: var(--text); }
.rules-starter ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text); }
.rules-starter .field-hint { margin: 0; }
.rules-offer-evidence { margin: 0; font-size: 13.5px; color: var(--text-muted); }
/* TP-AI-5: the person's own words a suggested rule answers. */
.rules-offer-quote { margin: 0; padding: 6px 0 6px 12px; border-left: 2px solid var(--border-strong); font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.rules-offer-quote-when { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); }

/* TP-G1: one goal's plan. */
.planner-focus { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.planner-focus .field-hint { margin: 0; }
.planner-weekly { width: 210px; max-width: 100%; padding: 8px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 14px; }
.planner-goal-tasks { max-height: min(40vh, 380px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.planner-goal-tasks .icon-btn:disabled { opacity: 0.35; cursor: default; }
.planner-goal-done { font-size: 13px; color: var(--text-muted); }
.planner-goal-done summary { cursor: pointer; }
.planner-goal-done ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.modal-panel:has(.planner-goalplan) { max-width: 680px; }

/* TP-9, TP-G2: an estimate from the record, and Will it fit? */
.planner-record { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 12.5px; color: var(--text-muted); }
.planner-record .icon-btn { padding-left: 0; }
.planner-fit { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent-3); background: color-mix(in srgb, var(--accent-3) 6%, var(--surface)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.planner-fit p { margin: 0; }

/* TP-R7: rules that together leave no room: said, in the notice colour, never an alarm. */
.rules-conflicts { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--accent-2) 8%, var(--surface)); }
.rules-conflicts b { font-size: 13.5px; color: var(--text); }
.rules-conflicts ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.rules-conflicts .field-hint { margin: 0; }

/* TP-R1: the rules panel and its dialog. */
.rules-add { max-width: none; margin-bottom: var(--space-3); color: var(--text); }
.rules-group { margin-top: var(--space-3); }
.rules-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); margin-bottom: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.rules-group-head b { font-size: 13px; color: var(--text); }
.rules-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.rules-row.is-off .planner-row-title { color: var(--text-muted); }
.rules-row-body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rules-row-actions { display: flex; flex-wrap: wrap; gap: 2px; }
.rules-row-actions .icon-btn:disabled { opacity: 0.35; cursor: default; }
.rules-days { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rules-days legend { padding: 0 4px; font-size: 12.5px; color: var(--text-muted); }
.rules-day { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); }
.planner-dialog { display: flex; flex-direction: column; gap: var(--space-4); }
.planner-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.modal-panel:has(.planner-dialog) { max-width: 620px; }

/* K-22, K-23: read-only reference pages (Goal types, Life traits). One card
   per entry, as many across as fit. */
.reference-note { margin: 0 0 var(--space-4); }
.reference-section + .reference-section { margin-top: var(--space-7); }
.reference-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.reference-card { max-width: none; margin: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.reference-head { display: flex; align-items: center; gap: var(--space-2); }
.reference-name { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); }
.reference-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); flex: 1; }
.reference-foot { font-size: 12.5px; color: var(--text-faint); text-align: left; }
.reference-foot.timeline-goal-link { color: var(--accent-1); }
.reference-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--slab-hue); flex: none; }

/* B-12, L-19: Personality and the Deep assessment share one shape -- the
   latest result across the page, then earlier versions in a folding grid,
   each opening the answers it came from (resultHistory.js). */
.result-latest {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.assess-card + .result-latest { margin-top: var(--space-5); }
.result-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.result-title { margin: 0; font-size: 20px; font-weight: 700; }
.result-sub { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }
.result-version { font-weight: 700; color: var(--accent-1); }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.result-body { display: flex; flex-direction: column; gap: var(--space-4); }
.result-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-7); }
.result-columns .trait-row { margin-bottom: var(--space-3); }
.result-earlier { margin-top: var(--space-6); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.result-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.result-card-when { font-size: 12.5px; color: var(--text-muted); }
.result-card-detail { font-size: 12px; color: var(--text-faint); }
.result-card-bars { display: flex; flex-direction: column; gap: 5px; margin-top: var(--space-1); }
.result-card-link { align-self: flex-start; margin-top: var(--space-1); font-size: 13px; }
.mini-bar { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 2.2rem; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-muted); }
.mini-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-bar-track { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mini-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent-1); }
.mini-bar-value { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.modal-panel:has(.answers-detail) { max-width: 640px; }
.answers-list { list-style: none; margin: 0; padding: 0; }
.answers-list li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.answers-n { color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.answers-stem { font-size: 12px; color: var(--text-faint); }
.answers-text { font-size: 14px; color: var(--text); }
.answers-answer { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent-1); }
.answers-answer.is-skipped { color: var(--text-faint); font-weight: 400; font-style: italic; }
@media (max-width: 800px) { .result-columns { grid-template-columns: 1fr; } }

/* J-5: trait drift against behaviour drift. Two lanes on one set of week
   columns; thin marks, recessive grid, text in text tokens, identity by the
   series tokens beside direct labels. */
.drift { margin-top: var(--space-5); }
.drift-plot { position: relative; overflow-x: auto; }
.drift-svg { display: block; overflow: visible; }
.drift-grid { stroke: var(--border); stroke-width: 1; }
.drift-tick { font-size: 11px; fill: var(--text-faint); font-variant-numeric: tabular-nums; }
.drift-lane { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--text-muted); }
.drift-label { font-size: 12.5px; fill: var(--text); }
.drift-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.drift-dot { stroke: var(--surface); stroke-width: 2; }
.drift-bar { fill: color-mix(in srgb, var(--text-muted) 70%, var(--surface)); }
.drift-bar.is-partial { fill: color-mix(in srgb, var(--text-muted) 35%, var(--surface)); }
.drift-retake { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 4; }
.drift-cross { fill: color-mix(in srgb, var(--text) 7%, transparent); pointer-events: none; }
.drift-hit { fill: transparent; }
.drift-tip {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  min-width: 190px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  color: var(--text);
  pointer-events: none;
  z-index: 2;
}
.drift-tip-head { font-weight: 700; margin-bottom: 2px; }
.drift-tip-note { color: var(--text-muted); }
.drift-tip ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.drift-tip li { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.drift-tip li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* The table of every version is wider than a phone: it scrolls inside itself (N-6). */
.drift-table { margin-top: var(--space-3); font-size: 13px; color: var(--text-muted); overflow-x: auto; }
.drift-table summary { cursor: pointer; }
.drift-table table { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.drift-table th, .drift-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text); }
.drift-table th { color: var(--text-muted); font-weight: 600; }

/* B-8: one ambition question on Home, and the answers on Life context. */
.ambition-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ambition-question { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.45; }
.ambition-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ambition-refresh { width: auto; flex-shrink: 0; min-height: 36px; padding: 6px 12px; }
.registration-assessment-choice { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); cursor: pointer; }
.registration-assessment-choice input { width: auto; flex-shrink: 0; margin-top: 4px; }
.registration-assessment-choice .field-hint, .profile-completion-step .field-hint { display: block; margin-top: 4px; }
.profile-completion-badge { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.profile-completion-head, .profile-completion-step { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.profile-completion-track { height: 8px; background: var(--surface-2); border-radius: 8px; overflow: hidden; margin: var(--space-3) 0; }
.profile-completion-fill { height: 100%; background: var(--accent-1); border-radius: inherit; }
.profile-completion-step { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.profile-completion-step:last-child { border-bottom: 0; }
.profile-completion-step button { flex-shrink: 0; }
.profile-completion-check { color: var(--accent-1); font-weight: 600; }
.profile-avatar { --profile-progress: 0%; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 68px; height: 68px; flex: 0 0 68px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--accent-1) var(--profile-progress), var(--border) 0); margin-bottom: 12px; }
.profile-avatar-face { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); border-radius: 50%; overflow: hidden; font-weight: 600; font-size: 22px; }
.profile-avatar-face img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-percent { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--accent-1); padding: 2px 7px; font-size: 11px; line-height: 16px; white-space: nowrap; }
.profile-avatar-compact { width: 28px; height: 28px; flex-basis: 28px; margin-bottom: 8px; padding: 2px; }
.profile-avatar-compact .profile-avatar-face { font-size: 10px; }
.profile-avatar-compact .profile-avatar-percent { font-size: 9px; padding: 0 3px; bottom: -9px; line-height: 12px; }
.side-link:has(.profile-avatar) { min-height: 46px; }
.profile-photo-picker { margin: var(--space-4) 0; }
.profile-photo-preview { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; margin-bottom: var(--space-2); }
.registration-progress, .registration-assessment { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); margin-bottom: var(--space-4); }
.mobile-profile-link { margin-left: auto; display: flex; align-items: center; color: var(--text); text-decoration: none; }
.registration-milestones { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--text-muted); font-size: 11px; }
.registration-context-link { display: inline-block; margin-top: var(--space-3); color: var(--accent-1); font-weight: 600; font-size: 13px; }
.life-explicit-choice { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.life-explicit-choice input { width: auto; flex: none; margin-top: 2px; }
.ambition-card textarea,
.ambition-answers textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.ambition-card .btn-row { margin: 0; }
.ambition-section { margin-top: var(--space-5); }
.ambition-section .ambition-card { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-2); }
.ambition-done { margin: 0; font-size: 13px; color: var(--text-muted); }
.ambition-answers { list-style: none; margin: 0; padding: 0; }
.ambition-answers li { display: flex; gap: var(--space-3); justify-content: space-between; align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.ambition-answer-q { font-size: 12.5px; color: var(--text-muted); }
.ambition-answer-a { margin-top: 4px; font-size: 14px; color: var(--text); white-space: pre-wrap; }
.ambition-answer-when { margin-top: 4px; font-size: 12px; color: var(--text-faint); }

/* K-22 goal types, with the person's own entries: tiles for the types in
   use (their goals and tasks), compact chips for the rest. The type's colour
   is --slab-hue, from .goal-hue. */
.gt-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); font-size: 14px; color: var(--text-muted); }
.gt-summary b { font-size: 20px; color: var(--text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.gt-summary-note { font-size: 12.5px; color: var(--text-faint); margin-left: auto; }
.gt-section + .gt-section { margin-top: var(--space-7); }
.gt-section > .section-label { margin-bottom: var(--space-3); }
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); align-items: start; }
.gt-tile {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--slab-hue) 13%, transparent), transparent 45%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--slab-hue) 26%, var(--border));
  border-top: 3px solid var(--slab-hue);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gt-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); }
.gt-name { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.gt-desc { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.gt-count {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--slab-hue) 20%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gt-goals { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); }
.gt-goal { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.gt-goal.is-archived { opacity: 0.6; }
.gt-goal-title {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.gt-goal-title:hover { color: var(--slab-hue); }
.gt-goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }
.gt-tasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.gt-task {
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-task.is-more { background: none; color: var(--text-faint); }
.gt-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-2) var(--space-3); }
.gt-chip { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); }
.gt-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--slab-hue); flex: none; }
.gt-chip-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.gt-chip-desc { margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 700px) { .gt-summary-note { margin-left: 0; flex-basis: 100%; } }

/* ---------- Counted tasks (C-14): water, supplements ---------- */
.pill-count { background: var(--surface-2); color: var(--text-muted); text-transform: none; letter-spacing: 0; }

.count-rule {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.count-rule legend { font-size: 12.5px; color: var(--text-muted); padding: 0 var(--space-1); }
.count-rule select,
.count-rule input[type="number"],
.count-rule input[type="time"] {
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.count-rule-detail { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.count-rule-detail[hidden], .count-rule-detail [hidden] { display: none; }
.count-rule-input { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.count-rule-input input[type="number"] { width: 7.5em; }
.count-rule-toggle { display: flex; align-items: center; gap: var(--space-2); font-size: 13.5px; color: var(--text); padding-bottom: 8px; }
.count-rule-preview { font-size: 13.5px; font-weight: 600; color: var(--text); padding-bottom: 8px; }
.count-rule .field-hint { margin: 0; }

.tap-counter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tap-dots { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 12rem; }
.tap-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--slab-hue, var(--accent-1));
  background: transparent;
}
.tap-dot.is-on { background: var(--slab-hue, var(--accent-1)); }
.tap-count { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.tap-count.is-done { color: var(--success); }
.tap-btn { width: auto; min-width: 2.75rem; padding: 6px 12px; }
.tap-error { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); }

.quick-tasks { display: flex; flex-direction: column; gap: var(--space-3); }
.quick-tasks-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.quick-tasks-note { font-size: 12.5px; color: var(--text-muted); }
.quick-tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.quick-task {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--slab-hue);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.quick-task-body { min-width: 0; flex: 1 1 12rem; }
.quick-task-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--text); }
.quick-task-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Your own goal types (P-2) ---------- */
.gt-own-pill { margin-left: var(--space-2); vertical-align: middle; background: var(--accent-1-soft); color: var(--accent-1); }
.gt-own { display: flex; flex-direction: column; gap: var(--space-3); }
.gt-own-note { margin: 0 0 var(--space-2); font-size: 13px; color: var(--text-muted); }
.gt-own-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gt-own-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.gt-own-row.is-editing { justify-content: flex-start; }
.gt-own-body { min-width: 0; flex: 1 1 14rem; }
.gt-own-name { font-weight: 600; color: var(--text); }
.gt-own-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.gt-own-actions { display: flex; gap: var(--space-2); }
.gt-own-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gt-own-form input, .gt-own-row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.gt-own-btn { width: auto; padding: 8px 16px; }

/* ---------- Compass: the council and what each area asks (from the engine) ---------- */
.council-scroll { overflow-x: auto; }
.council-grid { display: flex; flex-direction: column; min-width: 640px; }
.council-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.6fr) 8.5rem repeat(5, minmax(3.5rem, 1fr)) 5.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text);
}
.council-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.council-detail > summary { list-style: none; cursor: pointer; }
.council-detail > summary::-webkit-details-marker { display: none; }
.council-detail > summary .council-row, .council-grid > .council-row:not(.council-head) { background: var(--surface-2); margin-top: 6px; }
.council-detail > summary:hover .council-row { background: var(--surface-hover); }
.council-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; min-width: 0; }
.council-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.council-lens, .council-vote { text-align: center; }
.council-vote { font-size: 13px; color: var(--text-faint); }
.council-vote.is-up { color: var(--accent-1); }
.council-vote.is-down { color: var(--text-muted); }
.council-agree, .council-agree-head { text-align: left; }
.council-agree { font-size: 12.5px; color: var(--text-muted); }
.council-reasons { margin: 6px 0 4px; padding-left: calc(var(--space-3) + 1.1rem); display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.council-reasons strong { color: var(--text); }
.council-members { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.council-members summary { cursor: pointer; color: var(--text-muted); }
.council-members ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 4px; }
.council-members strong { color: var(--text); }

.asking-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.asking-toggle { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-muted); cursor: pointer; }
.asking-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-left: 4px solid var(--seg-colour, var(--accent-1));
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.asking-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.asking-doctrine { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.asking-name { margin: 4px 0 2px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--text); }
.asking-question { margin: 0; font-style: italic; color: var(--text-muted); }
.asking-share { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.asking-value { font-size: 1.9rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.asking-status { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.asking-label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-1); }
.asking-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.asking-neglect { margin: 0; color: var(--text-muted); }
@media (max-width: 700px) {
  .asking-head { flex-direction: column; }
  .asking-share { flex-direction: row; align-items: baseline; gap: var(--space-2); }
}
/* The area's own colour on the card's edge only. */
.asking-card[class*="dom-"] { --seg-colour: var(--dom-colour); background: var(--surface); }
.council-name .compass-dot { margin-top: 0; }

/* ---------- Inspiration: the day's line staged six ways (after Inspiration) ---------- */
.insp-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.insp-view { min-width: 0; }
.insp-rail { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.insp-mode {
  writing-mode: vertical-rl;
  padding: 14px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.insp-mode:hover { color: var(--text); border-color: var(--text-muted); }
.insp-mode[aria-current="true"] { background: var(--accent-1); border-color: transparent; color: var(--surface); }

.insp-stage-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.insp-stage {
  position: relative;
  min-height: min(62vh, 560px);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}
.insp-aurora {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(45% 45% at 18% 22%, color-mix(in srgb, var(--accent-1) 38%, transparent), transparent 70%),
    radial-gradient(42% 42% at 82% 30%, color-mix(in srgb, var(--accent-3) 32%, transparent), transparent 70%),
    radial-gradient(55% 55% at 50% 92%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%);
  filter: blur(30px) saturate(130%);
  animation: insp-drift 26s ease-in-out infinite alternate;
}
.mode-typewriter .insp-aurora { opacity: 0.25; }
.mode-constellation .insp-aurora { opacity: 0.45; }
@keyframes insp-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.15) translate3d(-3%, -2%, 0); }
}

.stage-quote { width: 100%; max-width: 60rem; color: var(--text); }
.stage-line { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4.4vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.stage-word { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(2deg); animation: insp-rise 0.78s var(--ease) forwards; }
@keyframes insp-rise { to { opacity: 1; transform: none; } }
.stage-byline { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(1.25rem, 3vh, 2.25rem); opacity: 0; animation: insp-rise 0.9s var(--ease) forwards; animation-delay: 0.55s; }
.stage-rule { width: clamp(2rem, 6vw, 4.5rem); height: 1px; background: currentColor; opacity: 0.5; }
.stage-author { font-size: clamp(0.8rem, 1.4vw, 1rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }

.is-aurora { text-align: center; }
.is-aurora .stage-line { font-weight: 300; font-size: clamp(1.9rem, 5vw, 4.2rem); }
.is-aurora .stage-line em {
  font-style: normal;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.is-aurora .stage-byline { justify-content: center; }

.is-kinetic .stage-line { font-family: var(--font); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 5.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.03em; }
.is-kinetic .stage-word { transform: translateY(0.9em) scale(0.86) rotate(-3deg); animation-duration: 0.62s; }
.is-kinetic .stage-word:nth-child(3n) { color: var(--accent-1); }
.is-kinetic .stage-word:nth-child(4n + 1) { color: transparent; -webkit-text-stroke: 1.5px var(--text); }

.tw { width: min(56rem, 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg, var(--surface)) 82%, transparent); box-shadow: var(--shadow-sm); overflow: hidden; }
.tw-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--border); font: 700 0.68rem/1 ui-monospace, Consolas, "Cascadia Mono", monospace; letter-spacing: 0.12em; color: var(--text-faint); }
.tw-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--border); }
.tw-path { margin-left: 0.6rem; }
.tw-body { padding: clamp(1.25rem, 4vw, 2.4rem); font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-size: clamp(0.95rem, 1.8vw, 1.35rem); line-height: 1.65; min-height: 10rem; color: var(--text); }
.tw-prompt { color: var(--accent-1); }
.tw-typed { white-space: pre-wrap; }
.tw-attrib { display: block; margin-top: 1.25rem; color: var(--accent-3); }
.tw-caret { display: inline-block; width: 0.58ch; translate: 0 0.12em; background: currentColor; animation: insp-blink 1.05s steps(1) infinite; }
@keyframes insp-blink { 50% { opacity: 0; } }

.is-constellation svg { width: 100%; height: auto; overflow: visible; }
.cn-word { font-family: var(--font-display); fill: var(--text); opacity: 0; animation: insp-rise 0.8s var(--ease) forwards; }
.cn-word.is-key { font-weight: 800; fill: var(--accent-1); }
.cn-link { stroke: var(--accent-1); stroke-width: 1; opacity: 0.35; stroke-dasharray: 4 5; animation: insp-draw 1.6s var(--ease) forwards; }
.cn-star { fill: var(--accent-3); }
.is-constellation .stage-byline { justify-content: center; }
@keyframes insp-draw { from { stroke-dashoffset: 260; opacity: 0; } to { stroke-dashoffset: 0; opacity: 0.35; } }

.insp-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.insp-when { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.insp-step { width: auto; padding: 6px 14px; font-size: 13px; }
.insp-why { justify-content: center; margin: 0; }

.insp-wall { columns: 3 17rem; column-gap: var(--space-3); }
.insp-wall-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  break-inside: avoid;
  margin: 0 0 var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transform: translateY(1rem);
  animation: insp-rise 0.7s var(--ease) forwards;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.insp-wall-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-1) 55%, var(--border)); }
.insp-wall-text { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.38; }
.insp-wall-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-1); }

@media (max-width: 700px) {
  .insp-layout { grid-template-columns: 1fr; }
  .insp-rail { order: -1; position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .insp-rail::-webkit-scrollbar { display: none; }
  .insp-mode { writing-mode: horizontal-tb; padding: 7px 12px; flex: none; }
  .insp-wall { columns: 1; }
  .insp-stage { min-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) {
  .insp-aurora, .tw-caret { animation: none; }
  .stage-word, .stage-byline, .cn-word, .insp-wall-card { animation: none; opacity: 1; transform: none; }
  .cn-link { animation: none; }
}

/* B-10: a strength and one thing worth working on, under each trait. Quiet
   ink, no alarm colour: a reading, not a verdict (INV-12). */
.trait-insight { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--border); }
.trait-insight-line { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-2); margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.trait-insight-label { padding-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 700px) {
  .trait-insight-line { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- G-10: the weather over the clock band's time-of-day sky ----------
   A quiet second layer in the band's own ink tokens, so it holds in both themes;
   nothing here is an alarm colour. Without weather the layer is simply absent. */
.clock-weather {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clock-ink-dim);
  min-height: 1em;
}
.clock-weather:empty { display: none; }

.clock-band[class*=" wx-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.clock-band.wx-partly::after {
  background:
    radial-gradient(28% 40% at 78% 22%, color-mix(in srgb, var(--clock-ink) 10%, transparent), transparent 70%),
    radial-gradient(22% 30% at 62% 30%, color-mix(in srgb, var(--clock-ink) 7%, transparent), transparent 70%);
}
.clock-band.wx-cloudy::after,
.clock-band.wx-drizzle::after,
.clock-band.wx-rain::after,
.clock-band.wx-storm::after,
.clock-band.wx-snow::after {
  background:
    radial-gradient(40% 55% at 20% 15%, color-mix(in srgb, var(--clock-ink) 12%, transparent), transparent 70%),
    radial-gradient(45% 55% at 70% 10%, color-mix(in srgb, var(--clock-ink) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--clock-ink) 6%, transparent), transparent 60%);
}
.clock-band.wx-fog::after {
  background:
    linear-gradient(180deg, transparent 10%, color-mix(in srgb, var(--clock-ink) 16%, transparent) 55%, color-mix(in srgb, var(--clock-ink) 8%, transparent));
  backdrop-filter: blur(1.5px);
}
.clock-band.wx-drizzle::after,
.clock-band.wx-rain::after,
.clock-band.wx-storm::after {
  background:
    repeating-linear-gradient(105deg, transparent 0 14px, color-mix(in srgb, var(--clock-ink) var(--rain-ink, 14%), transparent) 14px 15px),
    radial-gradient(45% 55% at 70% 10%, color-mix(in srgb, var(--clock-ink) 14%, transparent), transparent 70%);
  background-size: 60px 60px, auto;
  animation: clock-rain 0.9s linear infinite;
}
.clock-band.wx-drizzle { --rain-ink: 8%; }
.clock-band.wx-storm { --rain-ink: 22%; }
.clock-band.wx-storm::before { filter: brightness(0.8); }
.clock-band.wx-snow::after {
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--clock-ink) 55%, transparent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--clock-ink) 45%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, color-mix(in srgb, var(--clock-ink) 40%, transparent) 0 1.2px, transparent 1.8px);
  background-size: 48px 48px, 36px 36px, 60px 60px;
  animation: clock-snow 6s linear infinite;
}
@keyframes clock-rain { to { background-position: -16px 60px, 0 0; } }
@keyframes clock-snow { to { background-position: 12px 48px, -8px 36px, 6px 60px; } }
@media (prefers-reduced-motion: reduce) {
  .clock-band[class*=" wx-"]::after { animation: none; }
}

/* ---------- J-8: the activity timer strip ----------
   One row, one height, whatever it shows (K-16). Running reads as calm focus,
   never as urgency (INV-12): the accent, not a warning colour. */
.timer-strip {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.timer-strip.is-running {
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 7%, var(--surface));
}
.timer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
  min-width: 0;
}
.timer-label {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.timer-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}
.timer-title.is-quiet { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.timer-when { flex: none; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.timer-clock {
  flex: none;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}
.timer-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: timer-dot 1.6s var(--ease) infinite;
}
@keyframes timer-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .timer-dot { animation: none; }
}
.timer-actions { flex: none; display: flex; gap: var(--space-2); }
.timer-btn { width: auto; padding: 6px 14px; font-size: 13px; }
.timer-error { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--text-muted); }

/* ---------- P-12: moved up a tier this week ---------- */
.raise-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent-1) 30%, var(--border));
  background: color-mix(in srgb, var(--accent-1) 6%, transparent);
  font-size: 13px;
  color: var(--text-muted);
}
.raise-note-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.raise-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.raise-text strong { color: var(--text); font-weight: 600; }
.raise-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.raise-form input {
  min-width: 0;
  flex: 1 1 14rem;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* ---------- J-2: the levers, from answers and from behaviour ---------- */
.levers {
  /* A panel across the page like the snapshot above it, not `.card`'s
     420px form column (it was squeezed into the middle of the page). */
  max-width: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-5) var(--space-6);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.levers-table { display: flex; flex-direction: column; }
.lever-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) 1fr 1fr; gap: var(--space-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text); }
.lever-head { border-top: none; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.lever-name { font-weight: 600; }
.lever-value { display: flex; align-items: center; gap: var(--space-2); }
.lever-track { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.lever-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.lever-answers .lever-fill { background: var(--accent-1); }
.lever-behaviour .lever-fill { background: var(--accent-3); }
.lever-number { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.lever-none { color: var(--text-faint); }
@media (max-width: 560px) {
  .lever-row { grid-template-columns: 1fr 1fr; }
  .lever-name { grid-column: 1 / -1; }
  .lever-head span:first-child { display: none; }
}

/* ================= Life traits (K-23): the chain, the spectrums, the levers, the wheel =================
   A reading, not a grade (INV-12): no alarm colour, both ends of a spectrum
   drawn alike. Colours from tokens (INV-7). */
.lt-page { display: flex; flex-direction: column; gap: var(--space-6); }
.lt-hero,
.lt-change {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.lt-thesis { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.25; color: var(--text); }
.lt-lede { margin: var(--space-2) 0 var(--space-4); max-width: 70ch; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.lt-chain { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin: 0; padding: 0; list-style: none; }
.lt-chain li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-6); }
.lt-chain li:first-child { padding-left: 0; }
.lt-chain li + li::before { content: "→"; position: absolute; left: -0.5em; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--accent-3); }
.lt-chain strong { font-size: 15px; color: var(--text); }
.lt-chain span { font-size: 12.5px; color: var(--text-muted); }

.lt-section { display: flex; flex-direction: column; gap: var(--space-3); }
.lt-section .section-head { margin-bottom: 0; }

.lt-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.lt-tab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.lt-tab:hover { border-color: var(--border-strong); }
.lt-tab.selected { border-color: var(--accent-1); background: var(--accent-1-soft); }
.lt-tab:focus-visible, .lt-area:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.lt-tab-name { font-size: 14px; font-weight: 700; }
.lt-tab-desc { font-size: 12px; line-height: 1.4; color: var(--text-muted); }

.lt-trait-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.lt-spectrum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 0.8fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.lt-spectrum-bar { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-2), var(--accent-1)); }
.lt-pole strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--text); }
.lt-pole p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.lt-pole-end { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.lt-pole-high { text-align: right; }
.lt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.lt-facts p { margin: var(--space-2) 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }

.lt-levers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.lt-lever {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.lt-lever-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.lt-lever h3 { margin: 0; font-size: 15px; font-weight: 700; }
.lt-lever-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-3); }
.lt-lever-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.lt-lever-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.lt-lever-track span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent-1); }
.lt-lever-you { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.lt-lever-you span { font-weight: 700; color: var(--accent-3); }
.lt-lever-fed { margin: auto 0 0; padding-top: var(--space-2); font-size: 12px; color: var(--text-faint); }

.lt-areas {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.lt-wheel { display: block; width: 100%; height: auto; }
.lt-wheel-seg { fill: var(--accent-1); opacity: 0.28; cursor: pointer; transition: opacity 0.15s var(--ease); }
.lt-wheel-seg:nth-child(even) { fill: var(--accent-2); }
.lt-wheel-seg:hover { opacity: 0.55; }
.lt-wheel-seg.selected { fill: var(--accent-3); opacity: 1; }
.lt-wheel-centre { font-size: 15px; font-weight: 700; fill: var(--text); }
.lt-area-side { display: flex; flex-direction: column; gap: var(--space-4); }
.lt-area-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lt-area {
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.lt-area:hover { border-color: var(--border-strong); }
.lt-area.selected { background: var(--accent-gradient); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.lt-area-panel { min-height: 9.5rem; }
.lt-area-panel h3 { margin: 0; font-size: 17px; }
.lt-area-panel p { margin: var(--space-1) 0 0; font-size: 13.5px; color: var(--text-muted); }
.lt-area-question { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--accent-3); font-family: var(--font-display); font-size: 19px; line-height: 1.35; color: var(--text); }

.lt-change p { margin: var(--space-2) 0 0; max-width: 80ch; font-size: 14px; line-height: 1.6; color: var(--text); }
.lt-change .lt-sources { font-size: 12px; color: var(--text-faint); }

@media (max-width: 1000px) {
  .lt-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-levers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-facts { grid-template-columns: 1fr; gap: var(--space-3); }
}
@media (max-width: 640px) {
  .lt-tabs, .lt-levers { grid-template-columns: 1fr; }
  .lt-spectrum { grid-template-columns: 1fr; }
  .lt-pole-high { text-align: left; }
  .lt-areas { grid-template-columns: 1fr; }
  .lt-wheel { max-width: 220px; margin: 0 auto; }
  .lt-chain li { padding: 0 var(--space-3); }
  .lt-chain li + li::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .lt-wheel-seg { transition: none; } }

/* Home's clock band, redrawn (2026-10-04). Every part is where it was and
   does what it did: the map, the ping, the watch, the quote and its controls,
   the weather, the time. What changes is depth: a sky with a horizon instead
   of a flat wash, a map that reads as a chart (a graticule behind it, edges
   that fall away, land in the accent), and type with a hierarchy. Dark theme
   only: the light theme's own rules are more specific and stand. */
.clock-band {
  border-color: color-mix(in srgb, var(--accent-3) 24%, var(--border));
  box-shadow: var(--shadow-md);
  --sky-opacity: 1;
  --map-land: color-mix(in srgb, var(--accent-1) 22%, transparent);
  --map-coast: color-mix(in srgb, var(--accent-1) 52%, transparent);
  --band-stars:
    radial-gradient(1.2px 1.2px at 8% 18%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 19% 9%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 31% 24%, rgba(255, 255, 255, 0.5) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 44% 7%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 57% 16%, rgba(255, 255, 255, 0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 66% 5%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 74% 27%, rgba(255, 255, 255, 0.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 86% 12%, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 93% 31%, rgba(255, 255, 255, 0.45) 50%, transparent 52%);
}
.clock-band.sky-night { --sky: var(--band-stars), radial-gradient(130% 160% at 78% -20%, #22346e 0%, #101a3a 46%, #070b18 100%); }
.clock-band.sky-dawn { --sky: linear-gradient(180deg, #101936 0%, #2c3466 44%, #8b5f4c 86%, #c79057 100%); }
.clock-band.sky-day { --sky: radial-gradient(130% 160% at 78% -20%, #3a7fb8 0%, #1f4a7c 48%, #10274a 100%); }
.clock-band.sky-dusk { --sky: var(--band-stars), linear-gradient(180deg, #0e1632 0%, #2a2b5c 44%, #7c4c50 84%, #bd7d43 100%); }

/* A graticule behind the land: twelve meridians and six parallels, faint. */
.clock-map-frame {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--clock-ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--clock-ink) 7%, transparent) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% calc(100% / 6);
}
/* The world falls away at the band's edges instead of being cut by them. */
.world-map {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.world-land path { stroke-width: 0.5; }
.world-land path.is-home {
  fill: color-mix(in srgb, var(--accent-2) 46%, var(--map-land));
  stroke: var(--accent-2);
  stroke-width: 1.1;
}
/* A deeper foot, so the time reads against any part of the map. It sits over
   the map and under the ping, the watch and the readout. */
.clock-map-frame::after {
  content: "";
  position: absolute;
  inset: 45% 0 0 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 62%, transparent) 0%, transparent 100%);
}
.clock-ping, .clock-analog { z-index: 1; }
/* Sunlight over the map (sunCurve.js): the sun's height along the viewer's
   latitude, in the gold the band already uses for the sun. Over the land,
   under the watch and the readout. */
.sun-curve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.sun-curve-top { stop-color: color-mix(in srgb, var(--accent-3) 34%, transparent); }
.sun-curve-foot { stop-color: color-mix(in srgb, var(--accent-3) 0%, transparent); }
.sun-curve-area { fill: url(#sun-curve-fill); }
.sun-curve-line { fill: none; stroke: var(--accent-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-3) 70%, transparent)); }
/* Night: the same wave under the horizon, cool and dim, with no glow. */
.sun-curve-line.sun-curve-night { stroke: color-mix(in srgb, var(--accent-1) 80%, transparent); stroke-width: 1.4; filter: none; }
.sun-curve-shade { fill: color-mix(in srgb, var(--bg) 62%, transparent); }
.sun-curve-horizon { stroke: color-mix(in srgb, var(--text) 34%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.sun-curve-drop { stroke: color-mix(in srgb, var(--accent-3) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.sun-curve-halo { fill: color-mix(in srgb, var(--accent-3) 26%, transparent); }
.sun-curve-sun { fill: color-mix(in srgb, var(--accent-3) 70%, #fff); }
.sun-curve-label { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: color-mix(in srgb, var(--accent-3) 80%, #fff); }
.clock-ping { background: var(--accent-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-3) 28%, transparent); }
@keyframes clock-ping {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-3) 28%, transparent); }
  50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-3) 0%, transparent); }
}

/* The readout: the phase in gold over a hairline, the hour and minute large,
   the seconds and the half of the day set back. */
.clock-phase { color: var(--accent-3); letter-spacing: 0.2em; }
.clock-phase::after { content: ""; display: block; width: 44px; height: 1px; margin: 7px 0 6px auto; background: color-mix(in srgb, var(--accent-3) 70%, transparent); }
.clock-digital { font-weight: 600; letter-spacing: -0.03em; text-shadow: 0 2px 20px color-mix(in srgb, var(--bg) 75%, transparent); }
.clock-seconds { margin-left: 0.14em; font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--clock-ink-dim); }
.clock-seconds::before { content: ":"; opacity: 0.6; }
.clock-period { margin-left: 0.3em; font-size: 0.36em; font-weight: 700; letter-spacing: 0.1em; color: var(--accent-3); }
.clock-date { font-size: 14px; letter-spacing: 0.02em; }
.clock-offset { background: color-mix(in srgb, var(--accent-3) 22%, transparent); }

/* The quote on the map: larger, its opening mark in gold. */
.clock-quote.is-inmap .clock-quote-text { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; }
.clock-quote.is-inmap .clock-quote-text::before { font-size: 1.25em; line-height: 0; vertical-align: -0.12em; }

/* Home's watch, a grand complication (grandWatch.js, 2026-10-04). Larger:
   sized from the band's height, so the frame is a little taller too. An
   enamel dial in a gold case: opaque now, since four subdials over a map
   seen through glass could not be read. The dial still follows real
   daylight -- ivory by day, deep blue at night -- and the hands are blued. */
.clock-map-frame { max-height: 380px; }
@media (max-width: 700px) { .clock-map-frame { aspect-ratio: 16 / 11; } }
.clock-analog { width: auto; height: 88%; aspect-ratio: 1; }
/* On a phone the time sits beside the watch, so the watch gives it room. */
@media (max-width: 700px) { .clock-analog { height: 70%; } }
.clock-analog::before {
  inset: 1.5%;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.clock-face { width: 100%; height: 100%; }
/* White enamel at every hour, as the watch it is drawn after: the owner asked
   for the dial white (2026-10-04), so day and night share one palette and
   only the weather's window tells them apart. */
.clock-analog,
.clock-analog:has(> .clock-face.is-day) {
  --dial: #ffffff;
  --dial-ink: #111216;
  --dial-ink-dim: rgba(17, 18, 22, 0.6);
  --gw-sub: #ffffff;
  --gw-blue: #17338a;
  --gw-red: #b3261e;
  /* The numerals of that watch are a fat Didone: thick stems, hairline
     serifs. These are the faces that have it, most likely first. */
  --gw-numeral: "Bodoni MT Black", "Bodoni 72", "Elephant", Didot, "Playfair Display", "Modern No. 20", Georgia, serif;
  --gw-text: "Century Schoolbook", "Bell MT", "Baskerville Old Face", Georgia, serif;
}
/* A trial (2026-10-04): the dial as glass, the map seen through it. Remove
   this block and the white enamel above is back. The glass is lightly smoked
   and blurred, since a perfectly clear dial was tried once and the coastlines
   ran through the numerals; the ink and the hands turn light, because the
   sky behind them is dark at every hour but a light theme's day. */
.clock-analog,
.clock-analog:has(> .clock-face.is-day) {
  --dial-ink: #f4f6fa;
  --dial-ink-dim: rgba(244, 246, 250, 0.66);
  --gw-blue: #a9c1ff;
  --gw-red: #ff8f7d;
  --gw-glass: rgba(7, 11, 24, 0.3);
}
:root[data-theme="light"] .clock-analog:has(> .clock-face.is-day) {
  --dial-ink: #111216;
  --dial-ink-dim: rgba(17, 18, 22, 0.66);
  --gw-blue: #17338a;
  --gw-red: #b3261e;
  --gw-glass: rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .clock-analog:has(> .clock-face.is-day) {
    --dial-ink: #111216;
    --dial-ink-dim: rgba(17, 18, 22, 0.66);
    --gw-blue: #17338a;
    --gw-red: #b3261e;
    --gw-glass: rgba(255, 255, 255, 0.3);
  }
}
.clock-analog::before {
  inset: 5%;
  background: var(--gw-glass);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.clock-face .gw-dial, .clock-face .gw-sub-face { fill: transparent; }
/* The case was a gold disc under the dial; under glass it is a ring. */
.clock-face .gw-case { r: 94.5px; fill: none; stroke: url(#gw-gold); stroke-width: 7; }
.clock-face .gw-pin-eye { fill: var(--gw-glass); }
.gw-gold-light { stop-color: color-mix(in srgb, var(--accent-3) 62%, #fff); }
.gw-gold-mid { stop-color: var(--accent-3); }
.gw-gold-deep { stop-color: color-mix(in srgb, var(--accent-3) 62%, #2a1c05); }
.gw-case { fill: url(#gw-gold); }
.gw-case-lip { fill: none; stroke: color-mix(in srgb, var(--accent-3) 45%, #2a1c05); stroke-width: 0.8; }
.gw-dial { fill: var(--dial); stroke: color-mix(in srgb, var(--accent-3) 55%, #2a1c05); stroke-width: 0.9; }
.gw-tick { stroke: var(--dial-ink-dim); stroke-width: 0.5; }
.gw-tick.is-five { stroke: var(--dial-ink); stroke-width: 1; }
.clock-face text { font-family: var(--gw-text); fill: var(--dial-ink); }
.gw-minute { font-size: 4.8px; font-weight: 400; fill: var(--dial-ink); }
.clock-face .gw-hour { font-family: var(--gw-numeral); font-size: 18px; font-weight: 900; font-synthesis: none; letter-spacing: -0.02em; }
.gw-name { font-size: 3.4px; font-weight: 700; letter-spacing: 0.22em; fill: var(--dial-ink-dim); }
.gw-sub-face { fill: var(--gw-sub); stroke: var(--dial-ink-dim); stroke-width: 0.45; }
.gw-sub-ring { fill: none; stroke: var(--dial-ink-dim); stroke-width: 0.35; }
.gw-day { font-size: 3.5px; font-weight: 700; letter-spacing: 0.04em; }
.gw-date { font-size: 3.1px; font-weight: 700; fill: var(--gw-red); }
.gw-word { font-size: 3.3px; font-weight: 700; letter-spacing: 0.14em; fill: var(--dial-ink-dim); }
.clock-face .gw-degrees { font-family: var(--font); font-size: 8.2px; font-weight: 700; letter-spacing: -0.02em; }
.clock-face .gw-count { font-family: var(--font); font-size: 6.6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gw-hand { fill: var(--gw-blue); stroke: color-mix(in srgb, var(--gw-blue) 60%, #000); stroke-width: 0.3; stroke-linejoin: round; }
.gw-hand.is-small { stroke-width: 0.2; }
.gw-second { stroke: var(--gw-blue); stroke-width: 0.6; stroke-linecap: round; }
.gw-chrono { stroke: var(--gw-blue); stroke-width: 0.55; stroke-linecap: round; opacity: 0.55; }
.gw-chrono-eye { fill: none; stroke: var(--gw-blue); stroke-width: 0.55; opacity: 0.55; }
.clock-face.is-running .gw-chrono, .clock-face.is-running .gw-chrono-eye { stroke: var(--gw-red); opacity: 1; }
.gw-date-hand { stroke: var(--gw-red); stroke-width: 0.45; }
.gw-date-eye { fill: none; stroke: var(--gw-red); stroke-width: 0.5; }
.gw-pin { fill: var(--gw-blue); }
.gw-pin.is-centre { stroke: color-mix(in srgb, var(--gw-blue) 60%, #000); stroke-width: 0.4; }
.gw-pin-eye { fill: var(--dial); }
.gw-sweep { fill: none; stroke: var(--accent-3); stroke-width: 2.2; stroke-linecap: round; }
/* The weather's window: a little sky, by day or by night. */
.gw-sky.is-day { fill: #8fc3ee; }
.gw-sky.is-night { fill: #14204a; }
.gw-window-rim { fill: none; stroke: color-mix(in srgb, var(--accent-3) 80%, #2a1c05); stroke-width: 0.7; }
.gw-sun { fill: var(--accent-3); }
.gw-moon { fill: #f4efdf; }
.gw-moon-shade { fill: #14204a; }
.gw-star { fill: var(--accent-3); }
.gw-cloud { fill: #f6f4ee; }
.gw-cloud.is-heavy { fill: #a9afbd; }
.gw-rain { stroke: #2f6fc4; stroke-width: 0.8; stroke-linecap: round; }
.gw-sky.is-night ~ g .gw-rain { stroke: #9cc4ff; }
.gw-snow { fill: #ffffff; }
.gw-fog { stroke: #f6f4ee; stroke-width: 1.3; stroke-linecap: round; opacity: 0.85; }
.gw-bolt { fill: none; stroke: var(--accent-3); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
/* The watch carries the weather now; the readout's line stays for a phone,
   where the subdial is too small to read (a fact once, INV-10). */
@media (min-width: 701px) { .clock-weather { display: none; } }
.clock-note { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--accent-3); }
.clock-note:empty { display: none; }

/* The plan's history (planHistory.js, AUD-1): one change a row, newest first. */
.plan-history { min-width: min(620px, 86vw); }
.ph-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: min(56vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.ph-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 10px 0 10px var(--space-3); border-top: 1px solid var(--border); border-left: 3px solid var(--border); }
.ph-row:first-child { border-top: 0; }
.ph-row.ph-add { border-left-color: var(--accent-2); }
.ph-row.ph-update, .ph-row.ph-reshape { border-left-color: var(--accent-1); }
.ph-row.ph-delete { border-left-color: var(--text-faint); }
.ph-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ph-what { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.ph-lines { margin: 0; padding-left: 1.1em; font-size: 13px; color: var(--text-muted, var(--text-faint)); }
.ph-meta { font-size: 12.5px; color: var(--text-faint); }

/* What the reviewer read (aiReviews.js, AI-7): one text a row, newest first. */
.ai-reviews { min-width: min(620px, 86vw); }
.air-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: min(56vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.air-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 10px var(--space-3); border-top: 1px solid var(--border); border-left: 3px solid var(--text-faint); }
.air-row:first-child { border-top: 0; }
.air-row.is-shown { border-left-color: var(--accent-2); }
.air-what { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.air-scores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.air-scores strong { font-weight: 600; }
.air-scores .is-low { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.air-meta { font-size: 12.5px; color: var(--text-faint); overflow-wrap: anywhere; }

/* What North Star does on its own (autonomyCard.js, AI-CTL). */
.autonomy-options { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.autonomy-option { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); cursor: pointer; }
.autonomy-option.is-chosen { border-color: var(--accent-1); background: var(--accent-1-soft); }
.autonomy-option.is-unavailable { opacity: 0.55; cursor: default; }
.autonomy-option input { margin-top: 3px; accent-color: var(--accent-1); }
.autonomy-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.autonomy-now { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-1); border: 1px solid var(--accent-1); }
.autonomy-does { margin: 6px 0 0; padding-left: 1.1em; font-size: 13px; color: var(--text-faint); }
.autonomy-consequence { margin: 0 0 var(--space-3); font-size: 13.5px; color: var(--text); }
.autonomy-saved { align-self: center; font-size: 13px; color: var(--text-faint); }

/* P-10: a goal the compass wrote into the plan (home.js, autoGoalsNote). */
.auto-goal-row { flex-direction: column; align-items: stretch; gap: 6px; }
.auto-goal-why { margin: 0; font-size: 13px; color: var(--text-faint); }

/* P-10: a goal prepared and awaiting permission (autoGoalCard.js). */
.auto-goal-ready { display: flex; flex-direction: column; gap: var(--space-2); }
.auto-goal-parts { display: flex; flex-direction: column; gap: 8px; margin: var(--space-2) 0 var(--space-3); }
.auto-goal-part { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.auto-goal-part.is-off { opacity: 0.55; cursor: default; }
.auto-goal-part input { margin-top: 3px; accent-color: var(--accent-1); }
.auto-goal-part-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.auto-goal-place { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-left: 26px; }
.auto-goal-place .auto-goal-why { flex-basis: 100%; }
.auto-goal-field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-faint); }
.auto-goal-clashes { margin-left: 26px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent-3); border-radius: var(--radius-md, 10px); display: flex; flex-direction: column; gap: 8px; }
.auto-goal-clash-head { font-size: 13.5px; font-weight: 600; color: var(--text); }
.auto-goal-clash { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--text); }
.auto-goal-choices { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); }
.auto-goal-choice { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.auto-goal-choice.is-off { opacity: 0.5; cursor: default; }

/* M-10: outside calendars on the Calendar sync page, and their appointments on the Calendar. */
.outside-calendars { margin-top: var(--space-5); }
.outside-calendar-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-2); }
.outside-calendar-form input { min-width: 0; }
.outside-calendar-url { flex: 1 1 280px; }
.outside-calendar-url input { width: 100%; }
.outside-calendar-trouble { color: var(--text); }
/* Read only and not the person's own plan: hatched, with a dashed edge, so it is never taken for a block. */
.cal-event.is-external { border-style: dashed; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text-faint) 14%, transparent) 6px 7px); }
.cal-status.is-external { color: var(--text-faint); }

/* M-11: provider calendars on the Calendar sync page. */
.provider-calendars { margin-top: var(--space-5); }
.provider-calendars .auto-goal-clashes { margin: var(--space-3) 0; }

/* C-15: a goal's other types, one toggle a type (goalTypesPicker.js). */
.type-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.type-toggle { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-faint); font: inherit; font-size: 13px; cursor: pointer; }
.type-toggle:hover:not(:disabled) { color: var(--text); border-color: var(--text-faint); }
.type-toggle.is-on { color: var(--text); border-color: var(--accent-1); background: var(--accent-1-soft); }
.type-toggle:disabled { opacity: 0.45; cursor: default; }
.type-toggle:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }

/* The Calendar's event dialog: what happened on a day that has come (BR-19). */
.cal-record { display: grid; gap: 8px; }
.cal-record-skip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cal-record-reason { flex: 1 1 200px; min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; }
.cal-record-reason:focus-visible { outline: 2px solid var(--cal-accent, var(--accent-1)); outline-offset: 2px; }

/* Account: what is kept and what it is for (BR-26). */
.data-use-tag { margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; color: var(--text-faint); }
.data-use-second { margin-top: 18px; }

/* End of day: what happened comes first (BR-23). */
.wrapup-happened { display: grid; gap: 8px; margin: 12px 0; }
.wrapup-reason { display: grid; gap: 4px; margin-bottom: 6px; }
.wrapup-reason input { width: 100%; }

/* Account: the delete dialog's "erase now instead" (BR-21). */
.check-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 13.5px; color: var(--text-muted, var(--text)); }
.check-row input { margin-top: 3px; }

/* ---------- Routine analysis (FR-RA) ----------
   Severity is a word and a weight of ink, never an alarm colour: the page is
   about the plan (INV-12). High is the gold, medium the starlight blue, low
   is quiet. Every colour is a token (INV-7). */
.ra-page { display: grid; gap: 16px; }
/* A dashboard, not a form: its cards take the page's width (K-10). */
.ra-page .card { max-width: none; margin-inline: 0; padding: 18px 20px; min-width: 0; }
.ra-two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1180px) { .ra-two { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.ra-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ra-section-head .card-title { margin: 0; }
.ra-count { font-size: 12.5px; color: var(--text-faint); }
.ra-headline { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); }
.ra-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.ra-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; }
.ra-filter-gap { flex: 0 0 10px; }
.ra-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.ra-chip:hover { border-color: var(--border-strong); color: var(--text); }
.ra-chip.is-on { border-color: var(--accent-1); color: var(--text); background: var(--accent-1-soft); }
.ra-chip:focus-visible, .ra-finding-head:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.ra-chip-count { font-size: 11.5px; color: var(--text-faint); }

.ra-finding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ra-finding { border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--surface-2); overflow: hidden; }
.ra-finding.ra-sev-high { border-left: 3px solid var(--accent-3); }
.ra-finding.ra-sev-medium { border-left: 3px solid var(--accent-1); }
.ra-finding.ra-sev-low { border-left: 3px solid var(--border-strong); }
.ra-finding-head { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: start; width: 100%; padding: 12px 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ra-finding-head:hover { background: var(--surface-hover); }
.ra-sev { min-width: 62px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; text-align: center; border: 1px solid var(--border-strong); color: var(--text-muted); }
.ra-sev.ra-sev-high { background: var(--accent-3); border-color: var(--accent-3); color: var(--on-accent); }
.ra-sev.ra-sev-medium { border-color: var(--accent-1); color: var(--text); }
.ra-finding-text { display: grid; gap: 3px; min-width: 0; }
.ra-finding-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ra-finding-suggestion { font-size: 13px; color: var(--text-muted); }
.ra-scope { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; padding-top: 2px; }
.ra-caret { width: 16px; text-align: center; color: var(--text-faint); font-size: 16px; line-height: 1.2; }
.ra-detail { padding: 2px 14px 14px 14px; display: grid; gap: 10px; }
.ra-facts { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 13.5px; }
.ra-facts dt { color: var(--text-faint); }
.ra-facts dd { margin: 0; color: var(--text); }
.ra-more { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.ra-empty .card-subtitle { margin-bottom: 12px; }
.ra-gaps summary { cursor: pointer; font-size: 13.5px; color: var(--text-muted); }
.ra-gaps ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--text); }

.ra-nav { display: flex; gap: 6px; }
/* The week scrolls in a pane of its own, sized from the window (INV-9), with the days' names held at its top. */
.ra-grid-scroll { overflow: auto; max-height: clamp(420px, 72vh, 760px); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding-right: 6px; }
.ra-grid-scroll:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.ra-grid { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 760px; }
.ra-axis { position: relative; height: var(--ra-h, 340px); }
.ra-axis span { position: absolute; right: 4px; transform: translateY(-50%); font-size: 10.5px; color: var(--text-faint); }
.ra-day-head { position: sticky; top: 0; z-index: 2; height: 44px; padding-bottom: 6px; display: grid; align-content: center; text-align: center; background: var(--surface); }
.ra-day-name { font-size: 12px; font-weight: 600; color: var(--text); }
.ra-day-load { font-size: 11px; color: var(--text-faint); }
.ra-day.is-today .ra-day-name { color: var(--accent-1); }
/* An hour is a fixed height, so the day is as tall as its hours and a short block is still a thing to see; a rule marks each hour. */
.ra-day-body { position: relative; height: var(--ra-h, 340px); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface) repeating-linear-gradient(to bottom, color-mix(in srgb, var(--border) 55%, transparent) 0 1px, transparent 1px var(--ra-hour, 46px)); overflow: hidden; }
.ra-day.is-today .ra-day-body { border-color: var(--accent-1); }
.ra-slot { position: absolute; padding: 1px 6px; border-radius: 4px; overflow: hidden; font-size: 11.5px; line-height: 1.3; color: var(--on-accent); box-shadow: 0 0 0 1px var(--surface); }
.ra-slot.ra-thin { padding: 0; }
.ra-slot { display: flex; flex-direction: column; justify-content: flex-start; }
.ra-slot span { flex: none; line-height: 14px; }
.ra-slot.ra-tall span:first-child { white-space: normal; font-weight: 600; }
.ra-slot-time { font-size: 10.5px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.ra-slot span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-slot.ra-kind-block { background: var(--accent-1); }
.ra-slot.ra-kind-one_off { background: var(--accent-3); }
.ra-slot.ra-kind-own { background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-muted); box-shadow: none; }
.ra-slot.ra-kind-obligation { left: 0; right: 0; border-radius: 0; background: var(--obligation-fill); color: var(--obligation); box-shadow: none; text-align: right; font-style: italic; }
.ra-slot.ra-kind-external { background: var(--accent-2); }
.ra-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--text-muted); align-items: center; }
.ra-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ra-legend-note { margin-left: auto; color: var(--text-faint); }
.ra-swatch { width: 12px; height: 12px; border-radius: 3px; }
.ra-swatch.ra-kind-block, .ra-swatch.ra-part-planned { background: var(--accent-1); }
.ra-swatch.ra-kind-one_off, .ra-swatch.ra-part-one_off { background: var(--accent-3); }
.ra-swatch.ra-kind-external, .ra-swatch.ra-part-appointment { background: var(--accent-2); }
.ra-swatch.ra-part-recorded { background: var(--text-muted); }
.ra-swatch.ra-kind-own { border: 1px dashed var(--border-strong); }
.ra-swatch.ra-kind-obligation { background: var(--obligation-fill); border-color: var(--obligation); }

.ra-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 190px; padding-top: 4px; }
.ra-bar-col { display: grid; grid-template-rows: 16px 1fr 16px; gap: 4px; height: 100%; min-width: 0; text-align: center; }
.ra-bar-col.ra-col-plan { border-left: 1px dashed var(--border-strong); border-right: 1px dashed var(--border-strong); padding: 0 4px; }
.ra-bar-value { font-size: 11px; color: var(--text-muted); }
.ra-bar-stack { display: flex; flex-direction: column-reverse; gap: 2px; justify-content: flex-start; min-height: 0; }
.ra-bar { width: 100%; max-width: 34px; margin: 0 auto; border-radius: 4px 4px 0 0; min-height: 2px; }
.ra-bar.ra-part-recorded { background: var(--text-muted); }
.ra-bar.ra-part-planned { background: var(--accent-1); }
.ra-bar.ra-part-one_off { background: var(--accent-3); }
.ra-bar.ra-part-appointment { background: var(--accent-2); }
.ra-bar-col:hover .ra-bar { filter: brightness(1.15); }
.ra-bar-label { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-areas { margin-top: 18px; display: grid; gap: 6px; }
.ra-area { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.ra-area-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-area-track { height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.ra-area-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent-1); }
.ra-area-value { color: var(--text-muted); min-width: 52px; text-align: right; }

@media (max-width: 640px) {
  .ra-finding-head { grid-template-columns: auto 1fr auto; }
  .ra-scope { display: none; }
  .ra-facts { grid-template-columns: 1fr; gap: 2px; }
  .ra-facts dd { margin-bottom: 8px; }
  .ra-legend-note { margin-left: 0; flex-basis: 100%; }
  .ra-bar-label { font-size: 9px; }
  .ra-area { grid-template-columns: 1fr auto; }
  .ra-area-track { grid-column: 1 / -1; order: 3; }
}

.ra-rest { margin-top: 10px; }

/* Insights: what the product is still waiting for (BR-10). */
.waiting-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.waiting-list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; font-size: 13.5px; }
.waiting-when { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.waiting-list li.is-ready .waiting-when { color: var(--accent-1); font-weight: 600; }
.waiting-what { color: var(--text); display: grid; gap: 2px; }
.waiting-note { font-size: 12px; color: var(--text-faint); }

/* The terms (BR-29): what is said before the tick box, the health line, and the two public pages. */
.terms-block { display: grid; gap: 8px; margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.terms-points { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
.terms-block .check-row { margin: 4px 0 0; color: var(--text); }
.terms-block a, .legal-card a { color: var(--accent-1); }
.health-line { margin: 6px 0 0; font-size: 12.5px; color: var(--text-faint); }
.legal-card { max-width: 760px; }
.legal-section { margin-top: 20px; display: grid; gap: 8px; }
.legal-section h2 { margin: 0; font-size: 15px; color: var(--text); }
.legal-section p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.legal-draft { margin: 8px 0 0; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); }
.legal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legal-list li { display: grid; gap: 2px; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.legal-list strong { color: var(--text); font-weight: 600; }

/* ---------- My journey (H-9 to H-11) ----------
   Two views of one record. The whole picture has more figures, never an
   alarm: kept is the starlight blue, skipped on purpose the aqua, not marked
   is quiet ink. Tokens only (INV-7); modifiers prefixed. A life area's slice
   turns the accent's hue, as a goal type's colour does elsewhere. */
.rec-page { display: grid; gap: 16px; --rec-a: var(--accent-1); --rec-b: var(--accent-3); --rec-c: var(--accent-2); --rec-d: var(--text-muted); --rec-e: var(--border-strong); --rec-kept: var(--accent-1); --rec-skipped: var(--accent-2); --rec-open: var(--border-strong); --rec-gap: var(--surface); }
@supports (color: oklch(from white l c h)) {
  .rec-page { --rec-b: oklch(from var(--accent-1) l c calc(h + 137.5)); --rec-c: oklch(from var(--accent-1) l c calc(h + 275)); --rec-d: oklch(from var(--accent-1) l c calc(h + 52.5)); --rec-e: oklch(from var(--accent-1) l c calc(h + 190)); }
}
.rec-page .card { max-width: none; margin-inline: 0; padding: 20px 22px; min-width: 0; }
.rec-two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1000px) { .rec-two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.rec-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.rec-title { margin: 0; font-size: 19px; font-weight: 600; color: var(--text); }
.rec-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); max-width: 62ch; }
.rec-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; background: var(--surface-2); }
.rec-switch-btn { padding: 7px 16px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.rec-switch-btn.rec-on { background: var(--accent-1-soft); color: var(--text); font-weight: 600; }
.rec-switch-btn:focus-visible, .rec-stretch-head:focus-visible, .rec-log-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.rec-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rec-total { display: grid; gap: 2px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); border-left: 3px solid var(--accent-1); }
.rec-total b { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.rec-total span { font-size: 12.5px; color: var(--text-muted); }
.rec-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rec-section-head .card-title { margin: 0; }
.rec-days-head { margin: 12px 0 0; align-items: center; }
.rec-count { font-size: 12px; color: var(--text-faint); white-space: nowrap; }

/* The bars: a plot with quiet lines behind it, values on the bars. */
.rec-plot { padding-left: 30px; }
.rec-plot-area { position: relative; height: 210px; margin-top: 18px; }
.rec-grid-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--border); }
.rec-grid-line:first-child { border-top: 1px solid var(--border-strong); }
.rec-grid-line span { position: absolute; right: 100%; top: -7px; margin-right: 8px; font-size: 10.5px; line-height: 14px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rec-bars { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.rec-bar-col { display: flex; align-items: flex-end; justify-content: center; height: 100%; border-radius: 6px 6px 0 0; }
.rec-bar-col:hover { background: var(--surface-2); }
.rec-bar-stack { position: relative; display: flex; flex-direction: column; gap: 2px; width: 62%; max-width: 46px; min-height: 0; }
.rec-bar { flex: 1 1 0; min-height: 3px; border-radius: 2px; }
.rec-bar-stack .rec-bar:nth-child(2) { border-radius: 6px 6px 2px 2px; }
.rec-bar-col.rec-now .rec-bar { opacity: 0.55; }
.rec-bar-value { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-bar-labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; text-align: center; font-size: 11px; color: var(--text-faint); }
.rec-bar-labels span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-bar-labels .rec-now { color: var(--text); font-weight: 600; }
.rec-tone-a { background: var(--rec-a); } .rec-tone-b { background: var(--rec-b); } .rec-tone-c { background: var(--rec-c); }
.rec-tone-d { background: var(--rec-d); } .rec-tone-e { background: var(--rec-e); }
.rec-tone-kept { background: var(--rec-kept); } .rec-tone-skipped { background: var(--rec-skipped); } .rec-tone-open { background: var(--rec-open); }

/* The rings. */
.rec-ring-wrap { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center; }
.rec-ring { position: relative; width: 172px; height: 172px; border-radius: 50%; flex: none; }
.rec-ring-hole { position: absolute; inset: 21%; border-radius: 50%; background: var(--rec-gap); display: grid; place-content: center; text-align: center; gap: 2px; }
.rec-ring-hole b { font-size: 26px; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.rec-ring-hole span { font-size: 11px; color: var(--text-faint); }
.rec-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; font-size: 13px; }
.rec-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; }
.rec-legend li:hover { background: var(--surface-2); }
.rec-legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.rec-legend-row li { display: inline-flex; padding: 0; }
.rec-legend-row li:hover { background: none; }
.rec-swatch { width: 10px; height: 10px; border-radius: 3px; }
.rec-legend-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-legend-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-legend-share { color: var(--text-faint); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* Where you stand, and each habit. */
.rec-track { position: relative; height: 10px; margin: 26px 8px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); }
.rec-track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent-1-soft); }
.rec-mark { position: absolute; top: -8px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); }
.rec-mark-now { background: var(--accent-3); } .rec-mark-avg { background: var(--accent-1); } .rec-mark-best { background: var(--accent-2); }
.rec-track-scale { display: flex; justify-content: space-between; margin: 0 8px; font-size: 10.5px; color: var(--text-faint); }
.rec-stand { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.rec-stand li { display: grid; grid-template-columns: 10px 1fr auto; gap: 2px 8px; align-items: center; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; }
.rec-stand-name { color: var(--text); } .rec-stand-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-stand-note { grid-column: 2 / -1; font-size: 11.5px; color: var(--text-faint); }
.rec-habits { display: grid; gap: 10px; }
.rec-habit { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(96px, auto); gap: 12px; align-items: center; font-size: 13px; }
.rec-habit-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-habit-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rec-habit-fill { display: block; height: 100%; border-radius: 4px; background: var(--rec-kept); }
.rec-habit-value { color: var(--text-muted); font-size: 12px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* Day by day: four stretches, each a grid of days. */
.rec-page .rec-stretch { padding: 0; overflow: hidden; }
.rec-stretch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: 100%; padding: 16px 22px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rec-stretch-head:hover:not(:disabled) { background: var(--surface-hover); }
.rec-stretch-head:disabled { cursor: default; opacity: 0.6; }
.rec-stretch-name { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.rec-stretch-title { font-size: 15px; font-weight: 600; color: var(--text); }
.rec-stretch-held { font-size: 13px; color: var(--text-muted); }
.rec-chevron { width: 26px; height: 26px; display: grid; place-content: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 15px; line-height: 1; }
.rec-stretch.rec-open .rec-stretch-head { border-bottom: 1px solid var(--border); }
.rec-stretch-body { padding: 18px 22px 22px; display: grid; gap: 16px; }
.rec-day-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.rec-day { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); min-width: 0; }
.rec-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rec-day-date { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.rec-entries { list-style: none; margin: 0; padding: 0; display: grid; }
/* A day with many entries is not one long column beside an empty page: it
   takes the full row, and its entries run in columns across it. */
.rec-day-wide { grid-column: 1 / -1; }
.rec-day-wide .rec-entries { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 22px; }
.rec-more { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent-1); font: inherit; font-size: 13px; cursor: pointer; }
.rec-more:hover { text-decoration: underline; }
.rec-more:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.rec-entry { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--border); justify-items: start; min-width: 0; }
.rec-entry-head { display: grid; gap: 1px; min-width: 0; }
.rec-entry-title { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
.rec-entry-title:hover { color: var(--accent-1); }
.rec-entry-title:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.rec-entry-meta { font-size: 11.5px; color: var(--text-faint); }
.rec-entry-notes { margin: 0; font-size: 13px; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.rec-log-btn { padding: 0; border: 0; background: none; color: var(--accent-1); font: inherit; font-size: 12px; cursor: pointer; }
.rec-log-btn:hover { text-decoration: underline; }
.rec-answer { padding: 10px 12px; border-left: 2px solid var(--accent-3); border-radius: 0 6px 6px 0; background: var(--surface); display: grid; gap: 4px; }
.rec-answer-label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.rec-answer-q { font-size: 13px; font-weight: 600; color: var(--text); }
.rec-gap { margin: 0; padding-top: 9px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.rec-gap strong { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .rec-page .card { padding: 16px; }
  .rec-totals { gap: 8px; }
  .rec-total { padding: 12px; }
  .rec-total b { font-size: 22px; }
  .rec-habit { grid-template-columns: 1fr auto; }
  .rec-habit-track { grid-column: 1 / -1; order: 3; }
  .rec-bar-labels { font-size: 9px; }
  .rec-stretch-head { padding: 14px 16px; }
  .rec-stretch-body { padding: 14px 16px 16px; }
  .rec-day-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- How long it took (E-12): one press, then five minutes either way ---------- */
.tt { display: grid; gap: 10px; justify-items: start; }
.tt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.tt-said strong { color: var(--text); font-weight: 600; }
.tt-nudge { min-width: 44px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.tt-nudge:hover:not(:disabled) { border-color: var(--border-strong); }
.tt-nudge:disabled { opacity: 0.45; cursor: default; }
.tt-link { padding: 0; border: 0; background: none; color: var(--accent-1); font: inherit; font-size: 12.5px; cursor: pointer; }
.tt-link:hover { text-decoration: underline; }
.tt-nudge:focus-visible, .tt-link:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.tt-exact { display: flex; flex-wrap: wrap; gap: 12px; }
.tt-box { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.tt-box input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; color-scheme: light dark; }
.wrapup-field-wide { flex: 1 1 100%; }

/* ---------- Log something, from any screen (E-13) ---------- */
.log-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px 12px 16px; border: 0; border-radius: var(--radius-pill); background: var(--accent-gradient); color: var(--on-accent, var(--bg)); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.log-fab[hidden] { display: none; }
.log-fab:hover { filter: brightness(1.06); }
.log-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.log-fab-plus { font-size: 20px; line-height: 1; font-weight: 500; }
.logp { display: grid; gap: 14px; min-width: min(480px, 82vw); }
.logp-title { margin: 0; font-size: 19px; font-weight: 600; color: var(--text); }
.logp-search { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; }
.logp-search:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.logp-lists { max-height: min(52vh, 460px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.logp-head { margin: 12px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.logp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.logp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.logp-row:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.logp-row:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.logp-row-text { display: grid; gap: 1px; min-width: 0; }
.logp-row-title { font-size: 14px; font-weight: 600; color: var(--text); }
.logp-row-sub { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logp-state { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) { .log-fab { right: 14px; bottom: 14px; padding: 12px 16px 12px 14px; } }
@media print { .log-fab { display: none; } }

/* ---------- Sorting out two blocks that share time (RA-14) ---------- */
.ofx { display: grid; gap: 14px; min-width: min(620px, 84vw); }
.ofx-title { margin: 0; font-size: 19px; font-weight: 600; color: var(--text); }
.ofx-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ofx-card, .ofx-confirm { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.ofx-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.ofx-when { margin: 0; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.ofx-meta { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.ofx-actions { display: grid; gap: 8px; justify-items: start; margin-top: 10px; }
.ofx-foot { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.ofx-error { margin: 0; font-size: 13px; color: var(--text); padding: 8px 12px; border-left: 2px solid var(--border-strong); background: var(--surface-2); }
.ra-said { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent-1); border-radius: var(--radius-md); background: var(--surface); font-size: 13.5px; color: var(--text); }

/* ---------- Date of birth: the year, then an optional month and day (B-2) ---------- */
.dob-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.dob-row input, .dob-row select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; color-scheme: light dark; }
.dob-row input:focus-visible, .dob-row select:focus-visible { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1-soft); }
.dob-row select:disabled { opacity: 0.5; }
@media (max-width: 480px) { .dob-row { grid-template-columns: 1fr; } }

/* ---------- Reports (H-12): a question asked of the record ----------
   One sentence to build, one table to read. A bar is the starlight blue in
   every report: these are counts, never a verdict, so nothing is an alarm. */
.rep-page { display: grid; gap: 16px; }
.rep-page .card { max-width: none; margin-inline: 0; padding: 20px 22px; min-width: 0; }
.rep-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.rep-section-head .card-title { margin: 0; }
.rep-count { font-size: 12px; color: var(--text-faint); }
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.rep-chip:hover { border-color: var(--border-strong); }
.rep-chip.rep-on { border-color: var(--accent-1); background: var(--accent-1-soft); font-weight: 600; }
.rep-chip.rep-locked { color: var(--text-muted); }
.rep-chip:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.rep-lock { padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-faint); white-space: nowrap; }
.rep-sentence, .rep-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.rep-dates { margin-top: 12px; }
.rep-pick { display: grid; gap: 4px; min-width: 0; }
.rep-pick-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.rep-pick select, .rep-pick input { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; color-scheme: light dark; max-width: 100%; }
.rep-pick select:focus-visible, .rep-pick input:focus-visible { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1-soft); }
.rep-result.rep-busy { opacity: 0.6; }
.rep-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.rep-total b { font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.rep-total span { font-size: 13px; color: var(--text-muted); }
.rep-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rep-table th, .rep-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.rep-table thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.rep-table tbody tr:hover { background: var(--surface-2); }
.rep-name { font-weight: 600; color: var(--text); max-width: 320px; overflow-wrap: anywhere; }
.rep-bar-head, .rep-bar-cell { width: 45%; }
.rep-bar { display: block; height: 10px; border-radius: 0 5px 5px 0; background: var(--accent-1); min-width: 2px; }
.rep-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-value { font-weight: 600; color: var(--text); }
.rep-records { color: var(--text-faint); }
.rep-basis { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); max-width: 80ch; }
.rep-basis strong { color: var(--text); font-weight: 600; }
.rep-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-faint); max-width: 80ch; }
.rep-result .btn-row { margin-top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .rep-page .card { padding: 16px; }
  .rep-bar-head, .rep-bar-cell, .rep-records, .rep-table thead th:last-child { display: none; }
  .rep-pick { flex: 1 1 100%; }
}

/* ---------- Home, the last seven days by life domain (G-13) ---------- */
.bar-cluster { justify-content: center; gap: 2px; }
.bar-stack { flex: 1 1 0; max-width: 16px; min-width: 3px; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 3px 3px 0 0; overflow: hidden; transition: height 0.3s var(--ease); }
.bar-seg { flex: 1 1 0; min-height: 2px; background: var(--slab-hue, var(--accent-1)); }
.bar-seg.bar-seg-alt { opacity: 0.62; }
.bar-stack:hover .bar-seg { filter: brightness(1.2); }
.bars-avg { position: absolute; inset: 0 0 34px 0; width: 100%; height: calc(100% - 34px); z-index: 2; pointer-events: none; overflow: visible; }
.bars-avg path { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 0; opacity: 0.85; }
.bars-avg-dots { position: absolute; inset: 0 0 34px 0; z-index: 3; pointer-events: none; }
.bars-avg-dot { position: absolute; width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px; border-radius: 50%; background: var(--surface); border: 1.6px solid var(--text); pointer-events: auto; }
.bars-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-muted); }
.bars-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bars-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--slab-hue, var(--accent-1)); }
.bars-swatch-line { width: 16px; height: 0; border-top: 2px solid var(--text); border-radius: 1px; }
.bars-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-faint); }

/* ---------- Life domain: "+N more" opens (C-16) ---------- */
button.gt-task.is-more { border: 1px dashed var(--border-strong); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: var(--text-muted); }
button.gt-task.is-more:hover { color: var(--text); border-color: var(--accent-1); }
button.gt-task.is-more:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }

/* ---------- Calendar: a tick box on quick things; the whole text on hover (M-13) ---------- */
.cal-tick { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; flex: none; border: 1.5px solid color-mix(in srgb, var(--slab-hue, var(--text-muted)) 80%, var(--text)); border-radius: 4px; background: var(--surface); color: var(--bg); font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer; }
.cal-tick:hover { border-color: var(--text); }
.cal-tick.is-on { background: var(--slab-hue, var(--accent-1)); border-color: var(--slab-hue, var(--accent-1)); }
.cal-tick:focus-visible { outline: 2px solid var(--cal-accent, var(--accent-1)); outline-offset: 1px; }
/* An entry too narrow for its words opens sideways under the pointer or the
   keyboard, so all of it is read on one line. */
@media (hover: hover) {
  .cal-col .cal-event:hover, .cal-col .cal-event:focus-visible { min-width: max-content; max-width: 360px; z-index: 6; box-shadow: var(--shadow-md); }
  .cal-col .cal-event:hover .cal-event-title, .cal-col .cal-event:hover .cal-event-sub,
  .cal-col .cal-event:focus-visible .cal-event-title, .cal-col .cal-event:focus-visible .cal-event-sub { overflow: visible; text-overflow: clip; }
}

/* ---------- Calendar: an entry's words laid across, never cut from the top (M-14) ---------- */
.cal-col .cal-event { display: block; padding: 2px 6px; }
.cal-event-in { display: flex; flex-flow: row wrap; align-content: flex-start; align-items: baseline; gap: 0 10px; height: 100%; min-width: 0; overflow: hidden; }
.cal-event-in > * { min-width: 0; max-width: 100%; }
.cal-event-in .cal-event-title { flex: 0 1 auto; }
.cal-event-in .cal-event-time, .cal-event-in .cal-event-sub { flex: 0 100 auto; }
.cal-event.is-short { padding-top: 0; padding-bottom: 0; }
.cal-event.is-short .cal-event-in { flex-wrap: nowrap; align-items: center; line-height: 1.2; }
.cal-event.is-short .cal-tick { width: 12px; height: 12px; font-size: 9px; vertical-align: -1px; }
@media (hover: hover) {
  .cal-col .cal-event:hover .cal-event-in, .cal-col .cal-event:focus-visible .cal-event-in { flex-wrap: nowrap; overflow: visible; }
}

/* ---------- The entry dialog, quieter (K-24 amended 2026-10-06) ----------
   It wore a colour for every level: a wash behind each field, a thick edge,
   a row of coloured chips. Read together that was loud. Now the surface is
   one neutral, a level is a small dot beside its label, and the one accent is
   the starlight blue on what is chosen. The gold stays on the button that
   moves forward. */
.cap-dialog { gap: var(--space-5); }
.cap-dialog .planner-eyebrow { color: var(--text-faint); }
.cap-about { margin: 0; font-size: 13px; color: var(--text-muted); }
.cap-key, .cap-context { gap: 4px 16px; }
.cap-chip { padding: 0; border: 0; border-radius: 0; background: none; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.cap-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--cap, var(--border-strong)); opacity: 0.75; }
.cap-chip b { font-weight: 600; color: var(--text-faint); }
.cap-slide { gap: var(--space-5); }
.cap-field { padding: 0; border-left: 0; border-radius: 0; background: none; gap: 8px; }
.cap-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; color: var(--text-faint); }
.cap-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--cap, var(--border-strong)); opacity: 0.7; }
.cap-field input:not([type="checkbox"]), .cap-field select, .cap-field textarea { background: var(--surface); border-color: var(--border); }
.cap-field input:focus, .cap-field select:focus, .cap-field textarea:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1-soft); }
.cap-group { border-style: solid; border-color: var(--border); }
.cap-choice { padding: 9px 16px; background: var(--surface); color: var(--text-muted); transition: background 0.12s var(--ease), border-color 0.12s var(--ease), color 0.12s var(--ease); }
.cap-choice:hover { border-color: var(--border-strong); color: var(--text); }
.cap-choice.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--text); font-weight: 600; }
.cap-choice:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.cap-review > div { border-left: 2px solid var(--border-strong); border-radius: 0; background: none; padding: 5px 0 5px 12px; }

/* Say it instead of typing it (E-15). */
/* A box to write in, with its own microphone (E-16). The button stands in
   the box's corner; what it is doing is said under it. */
.mic-box { display: grid; gap: 4px; min-width: 0; }
.mic-box-field { position: relative; display: grid; }
.mic-box-text { width: 100%; padding-right: 48px !important; resize: vertical; }
.mic-box-btn { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); color: var(--text-muted); cursor: pointer; }
.mic-box-btn:hover { border-color: var(--accent-1); color: var(--accent-1); }
.mic-box-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.mic-box-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mic-box-btn.mic-box-on { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); animation: cap-mic-pulse 1.6s ease-in-out infinite; }
.mic-box-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-height: 17px; font-size: 12.5px; line-height: 1.35; color: var(--text-faint); }
.mic-box-said { flex: 1 1 200px; min-width: 0; }
.mic-box-remove { padding: 0; border: 0; background: none; color: var(--accent-1); font: inherit; cursor: pointer; }
.mic-box-remove:hover { text-decoration: underline; }
.mic-box-remove[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mic-box-btn.mic-box-on { animation: none; } }
.cap-voice { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cap-mic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; transition: background 0.12s var(--ease), border-color 0.12s var(--ease); }
.cap-mic:hover { border-color: var(--accent-1); }
.cap-mic:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.cap-mic-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cap-mic.cap-mic-on { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); animation: cap-mic-pulse 1.4s ease-in-out infinite; }
@keyframes cap-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-1-soft); } 50% { box-shadow: 0 0 0 7px var(--accent-1-soft); } }
.cap-voice-text { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.cap-voice-status { font-size: 13.5px; font-weight: 600; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .cap-mic.cap-mic-on { animation: none; } }

/* ---------- Constellation, around the North Star (V-row amended 2026-10-06) ----------
   The star in the middle, the kinds of thing on the first orbit, the chosen
   kind's records on the second, on its side. The sky and its inks are the
   frame's own (.cst-frame); what a thing is keeps its fixed hue (--node-color). */
.orb-page { display: grid; gap: 16px; }
.cst-frame.orb-frame { height: auto; }
.orb-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(244, 247, 255, 0.25) transparent; }
.orb-holder { margin: 0 auto; }
.orb-stage { position: relative; transform-origin: 0 0; }
.orb-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orb-ring { fill: none; stroke: rgba(244, 247, 255, 0.14); stroke-width: 1; stroke-dasharray: 2 7; }
.orb-ring-far { stroke: rgba(244, 247, 255, 0.06); }
/* A sky behind the map: three sizes of faint star, each on its own grid so no pattern shows. */
.orb-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-image: radial-gradient(1px 1px at 20% 30%, rgba(244, 247, 255, 0.7) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 70% 60%, rgba(244, 247, 255, 0.55) 50%, transparent 51%), radial-gradient(1px 1px at 45% 85%, rgba(200, 220, 255, 0.6) 50%, transparent 51%); background-size: 173px 149px, 257px 211px, 131px 187px; }
.orb-link { fill: none; stroke-width: 1; opacity: 0.28; }
.orb-link.orb-link-on { opacity: 0.95; stroke-width: 1.8; }
.orb-nodes { position: absolute; inset: 0; }
.orb-nodes > * { position: absolute; }

.orb-cat { transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: 2px; width: var(--kind, 96px); height: var(--kind, 96px); padding: 0 8px; border: 1px solid color-mix(in srgb, var(--node-color) 55%, transparent); border-radius: 50%; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--node-color) 26%, var(--sky-card)), var(--sky-card) 72%); color: var(--sky-ink); font: inherit; cursor: pointer; box-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 16%, transparent); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.orb-cat:hover { border-color: var(--node-color); transform: translate(-50%, -50%) scale(1.05); }
.orb-cat.orb-on { border-color: var(--node-color); background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--node-color) 46%, var(--sky-card)), color-mix(in srgb, var(--node-color) 14%, var(--sky-card)) 75%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-color) 20%, transparent), 0 0 34px color-mix(in srgb, var(--node-color) 45%, transparent); }
.orb-cat-count { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--node-color); font-variant-numeric: tabular-nums; }
.orb-cat-name { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; line-height: 1.2; text-transform: uppercase; text-align: center; color: var(--sky-ink-dim); }
.orb-cat.orb-on .orb-cat-name { color: var(--sky-ink); }

.orb-rec { transform: translate(-5px, -50%); display: inline-flex; align-items: center; gap: 8px; max-width: var(--room, 232px); padding: 5px 12px 5px 0; border: 0; border-radius: 999px; background: none; color: var(--sky-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.orb-rec.orb-left { transform: translate(calc(-100% + 5px), -50%); flex-direction: row-reverse; padding: 5px 0 5px 12px; text-align: right; }
.orb-rec:hover, .orb-rec.orb-on { background: color-mix(in srgb, var(--node-color) 16%, transparent); }
.orb-rec.orb-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--node-color) 65%, transparent); }
.orb-rec-title { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.orb-rec-tag { flex: none; font-size: 11px; color: var(--sky-ink-dim); }
/* On the map a record is its name; what kind and when are in its tooltip and underneath. */
.orb-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--node-color, var(--text-muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-color, var(--text-muted)) 22%, transparent); }
.orb-dot-lg { width: 12px; height: 12px; }
.orb-note { transform: translate(8px, -50%); font-size: 13px; color: var(--sky-ink-dim); white-space: nowrap; }
.orb-note.orb-left { transform: translate(calc(-100% - 8px), -50%); }
.orb-cat:focus-visible, .orb-rec:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }

/* What a record is, as a card on the map itself: on the side its kind's
   records leave free, and under the map's lower edge on a phone. */
.cst-frame.orb-frame { position: relative; }
/* The Constellation as a tree (V-12): the star in the middle, branches to
   both sides, opened a level at a time. Laid out by the browser, so a branch
   of any length and a leaf of any height find their own place; the lines
   are drawn from each node's own box. The left side is the right side
   mirrored: it is written once, in logical directions. */
.tr-frame { min-height: 520px; display: grid; }
.tr-scroll { overflow-x: auto; overflow-y: hidden; display: flex; padding: 56px 28px 40px; scrollbar-width: thin; scrollbar-color: rgba(244, 247, 255, 0.25) transparent; }
.tr-root { position: relative; margin: auto; display: flex; align-items: center; min-width: max-content; }
.tr-root::before { content: ""; position: absolute; inset: -40px; pointer-events: none; opacity: 0.5; background-image: radial-gradient(1px 1px at 20% 30%, rgba(244, 247, 255, 0.7) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 70% 60%, rgba(244, 247, 255, 0.55) 50%, transparent 51%), radial-gradient(1px 1px at 45% 85%, rgba(200, 220, 255, 0.6) 50%, transparent 51%); background-size: 173px 149px, 257px 211px, 131px 187px; }
.tr-core { position: relative; flex: none; width: 132px; height: 132px; margin: 0 6px 26px; }
.tr-core .cst-core { position: absolute; inset: 0; }
.tr-side { display: flex; align-items: center; }
.tr-side-left { direction: rtl; }
.tr-node { position: relative; display: flex; align-items: center; }
.tr-kids { --gap: 8px; --reach: 20px; position: relative; display: flex; flex-direction: column; gap: var(--gap); margin-inline-start: calc(var(--reach) * 2); }
.tr-kids.tr-top { --gap: 18px; --reach: 26px; }
/* From the parent to the spine; the spine down the children; from the spine to each child. */
.tr-kids::before { content: ""; position: absolute; inset-inline-start: calc(var(--reach) * -2); top: 50%; width: var(--reach); border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tr-kids > .tr-node::before { content: ""; position: absolute; inset-inline-start: calc(var(--reach) * -1); top: 50%; width: var(--reach); border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tr-kids > .tr-node::after { content: ""; position: absolute; inset-inline-start: calc(var(--reach) * -1); top: calc(var(--gap) / -2); bottom: calc(var(--gap) / -2); border-inline-start: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tr-kids > .tr-node:first-child::after { top: 50%; }
.tr-kids > .tr-node:last-child::after { bottom: 50%; }
.tr-kids > .tr-node:only-child::after { display: none; }
.orb-cat.tr-kind { position: relative; transform: none; flex: none; direction: ltr; }
.orb-cat.tr-kind:hover { transform: scale(1.05); }
.tr-pill { flex: none; direction: ltr; display: inline-flex; align-items: center; gap: 8px; max-width: 250px; padding: 6px 10px 6px 8px; border: 1px solid color-mix(in srgb, var(--node-color) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--node-color) 8%, var(--sky-card)); color: var(--sky-ink); font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tr-pill:hover { border-color: var(--node-color); }
.tr-pill.tr-on { border-color: var(--node-color); background: color-mix(in srgb, var(--node-color) 24%, var(--sky-card)); box-shadow: 0 0 16px color-mix(in srgb, var(--node-color) 30%, transparent); }
.tr-title { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tr-caret { flex: none; width: 16px; height: 16px; display: grid; place-content: center; border-radius: 50%; background: color-mix(in srgb, var(--node-color) 30%, transparent); font-size: 12px; line-height: 1; color: var(--sky-ink); }
.tr-pill:focus-visible, .tr-go:focus-visible, .tr-tool:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }
.tr-note { direction: ltr; font-size: 12.5px; color: var(--sky-ink-dim); }
/* A leaf, opened: what it is. */
.tr-leaf { direction: ltr; width: 240px; display: grid; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--node-color) 45%, transparent); border-inline-start: 3px solid var(--node-color); border-radius: 10px; background: color-mix(in srgb, var(--sky-card) 94%, transparent); color: var(--sky-ink); }
.tr-leaf-tag { margin: 0; font-size: 12px; color: var(--sky-ink-dim); overflow-wrap: anywhere; }
.tr-facts { margin: 0; display: grid; gap: 1px; font-size: 13px; }
.tr-facts dt { margin-top: 5px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky-ink-dim); }
.tr-facts dt:first-child { margin-top: 0; }
.tr-facts dd { margin: 0; overflow-wrap: anywhere; }
.tr-go { justify-self: start; padding: 5px 12px; border: 1px solid var(--node-color); border-radius: 999px; background: color-mix(in srgb, var(--node-color) 16%, transparent); color: var(--sky-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.tr-go:hover { background: color-mix(in srgb, var(--node-color) 30%, transparent); }
.tr-tools { position: absolute; top: 14px; right: 16px; z-index: 2; font-size: 12.5px; color: var(--sky-ink-dim); }
.tr-tool { padding: 5px 12px; border: 1px solid rgba(244, 247, 255, 0.2); border-radius: 999px; background: rgba(244, 247, 255, 0.06); color: var(--sky-ink); font: inherit; cursor: pointer; }
.tr-tool:hover { background: rgba(244, 247, 255, 0.14); }
@media (max-width: 640px) {
  .tr-scroll { padding: 52px 14px 28px; }
  .tr-pill { max-width: 190px; }
  .tr-leaf { width: 200px; }
}
.orb-panel-host { position: absolute; top: 16px; bottom: 16px; width: 252px; display: flex; align-items: flex-start; pointer-events: none; }
.orb-panel-host.orb-panel-left { left: 16px; }
.orb-panel-host.orb-panel-right { right: 16px; }
.orb-panel { position: relative; pointer-events: auto; width: 100%; max-height: 100%; overflow: auto; display: grid; gap: 10px; padding: 16px; border: 1px solid color-mix(in srgb, var(--node-color) 50%, transparent); border-top: 3px solid var(--node-color); border-radius: 14px; background: color-mix(in srgb, var(--sky-card) 92%, transparent); backdrop-filter: blur(8px); color: var(--sky-ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); scrollbar-width: thin; }
.orb-panel-title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--sky-ink); overflow-wrap: anywhere; }
.orb-panel-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--sky-ink-dim); font-size: 18px; line-height: 1; cursor: pointer; }
.orb-panel-close:hover { background: rgba(244, 247, 255, 0.1); color: var(--sky-ink); }
.orb-panel-go { justify-self: start; padding: 7px 14px; border: 1px solid var(--node-color); border-radius: 999px; background: color-mix(in srgb, var(--node-color) 16%, transparent); color: var(--sky-ink); font: inherit; font-size: 13px; cursor: pointer; }
.orb-panel-go:hover { background: color-mix(in srgb, var(--node-color) 30%, transparent); }
.orb-panel-close:focus-visible, .orb-panel-go:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }
.orb-panel .orb-trail { padding-right: 26px; }
.orb-panel .orb-crumb { color: var(--sky-ink-dim); }
.orb-panel .orb-crumb-here { color: var(--sky-ink); }
.orb-panel .orb-crumb-sep, .orb-panel .orb-facts dt, .orb-panel .orb-related-label { color: var(--sky-ink-dim); }
.orb-panel .orb-facts { grid-template-columns: minmax(0, 1fr); gap: 1px 0; font-size: 13px; }
.orb-panel .orb-facts dt { margin-top: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.orb-panel .orb-facts dd { color: var(--sky-ink); }
.orb-panel .orb-chip { border-color: rgba(244, 247, 255, 0.16); background: rgba(244, 247, 255, 0.05); color: var(--sky-ink); font-size: 12.5px; padding: 5px 10px; text-align: left; }
.orb-panel .orb-detail-head { flex-wrap: nowrap; align-items: flex-start; padding-right: 20px; }
.orb-panel .orb-detail-head .orb-dot { margin-top: 5px; }
@media (max-width: 820px) {
  .orb-panel-host, .orb-panel-host.orb-panel-left, .orb-panel-host.orb-panel-right { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 55%; align-items: flex-end; }
}
.orb-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; }
.orb-crumb { padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
button.orb-crumb:hover { color: var(--accent-1); text-decoration: underline; }
.orb-crumb-here { color: var(--text); font-weight: 600; cursor: default; }
.orb-crumb-sep { color: var(--text-faint); }
.orb-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.orb-detail-head .card-title { margin: 0; }
.orb-detail .orb-rec-tag { color: var(--text-faint); font-size: 12px; }
.orb-facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; font-size: 13.5px; }
.orb-facts dt { color: var(--text-faint); }
.orb-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.orb-related-label { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.orb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.orb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.orb-chip:hover { border-color: var(--node-color, var(--border-strong)); }
.orb-chip:focus-visible, button.orb-crumb:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.orb-chip .orb-dot { width: 8px; height: 8px; box-shadow: none; }

/* ---------- Achievements: the Hall of Light (2026-10-14) ----------
   A trophy with slow light behind it, the latest honour on a plaque, a laurel
   count for each area of life, and every earlier achievement as a medal on
   its year's shelf (screens/achievements.js, trophyArt.js). Gold is
   --accent-3; a ribbon or badge takes its area's hue from `.goal-hue`
   (--slab-hue). Quiet on purpose (the owner, 2026-10-14: less flashy):
   nothing moves, the gold is soft, and only the trophy and the plaque wear it. */
.hall { display: flex; flex-direction: column; gap: var(--space-6); }
.hall-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-3); }

.hall-hero {
  position: relative; display: grid; grid-template-columns: minmax(220px, 340px) 1fr; align-items: center;
  gap: var(--space-6); padding: var(--space-6); border: 1px solid color-mix(in srgb, var(--accent-3) 18%, var(--border));
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 50%, color-mix(in srgb, var(--accent-3) 7%, transparent), transparent 60%),
    var(--surface);
}
.hall-trophy { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 200px; }
.hall-trophy .trophy { position: relative; width: min(160px, 55%); height: auto; filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--bg) 60%, transparent)); }
.laurel { position: relative; width: 50px; height: auto; margin: 0 -4px 16px; opacity: 0.75; }
.laurel.is-right { scale: -1 1; }
.laurel path { stroke: color-mix(in srgb, var(--accent-3) 70%, var(--bg)); }
.laurel-leaves { fill: color-mix(in srgb, var(--accent-3) 80%, var(--bg)); }

.trophy-handle { stroke: var(--accent-3); stroke-width: 7; stroke-linecap: round; }
.trophy-shine { fill: var(--text); opacity: 0.12; }
.trophy-star { fill: var(--surface); opacity: 0.85; }
.trophy-plinth { fill: var(--surface-2); stroke: color-mix(in srgb, var(--accent-3) 50%, var(--border)); stroke-width: 1.5; }
.trophy-plate { fill: color-mix(in srgb, var(--accent-3) 22%, var(--surface-2)); }
.trophy-engraving { fill: var(--accent-3); font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
.trophy.is-empty .trophy-metal, .trophy.is-empty .trophy-handle { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 5 4; }
.trophy.is-empty .trophy-star { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.hall-hero.is-empty { grid-template-columns: minmax(160px, 240px) 1fr; }

.hall-summary { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hall-count { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 4vw, 34px); font-weight: 600; line-height: 1.15; color: var(--text); }
.hall-line { margin: 0; color: var(--text-muted); font-size: 15px; max-width: 46ch; }
.hall-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hall-fact { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; }
.hall-fact strong { color: var(--accent-3); }

.hall-plaque { display: flex; justify-content: center; }
.hall-plaque-frame {
  width: min(640px, 100%); padding: var(--space-5) var(--space-6); text-align: center; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent-3) 30%, var(--border));
  background: var(--surface);
}
.hall-plaque-title { margin: var(--space-2) 0; font-family: var(--font-display); font-size: clamp(20px, 3vw, 26px); font-variant: small-caps; letter-spacing: 0.04em; color: var(--text); overflow-wrap: anywhere; }
.hall-plaque-meta { color: var(--text-muted); font-size: 13px; }
.hall-plaque-remarks { margin: var(--space-3) auto 0; max-width: 52ch; font-family: var(--font-display); font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.hall-area { color: var(--slab-hue); font-weight: 600; }

.hall-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.hall-area-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--text);
}
.hall-area-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--slab-hue) 18%, transparent); color: var(--slab-hue); font-weight: 700; font-size: 12px; }

.hall-shelves { display: flex; flex-direction: column; gap: var(--space-6); }
.hall-shelf-head { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.hall-shelf-year { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--text); }
.hall-shelf-count { color: var(--text-muted); font-size: 13px; }
.hall-medals { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.hall-medal { display: flex; flex-direction: column; min-width: 0; }
.hall-medal-face {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: var(--space-3) var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; text-align: center;
  cursor: pointer; transition: border-color 0.2s;
}
.hall-medal-face:hover, .hall-medal.is-open .hall-medal-face { border-color: var(--border-strong); }
.hall-medal-face:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.medal { width: 46px; height: auto; }
.medal-ribbon { fill: color-mix(in srgb, var(--slab-hue) 75%, var(--surface)); }
.medal-ribbon.is-far { fill: color-mix(in srgb, var(--slab-hue) 50%, var(--surface)); }
.medal-ring { stroke: color-mix(in srgb, var(--accent-3) 55%, var(--bg)); stroke-width: 1.5; }
.medal-star { fill: var(--surface); opacity: 0.85; }
.hall-medal-number { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-3); }
.hall-medal-title { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.hall-medal-date { color: var(--text-muted); font-size: 12px; }
.hall-medal-first { margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: transparent; border: 1px solid color-mix(in srgb, var(--slab-hue) 35%, var(--border)); color: var(--text-muted); font-size: 11px; font-weight: 600; }
.hall-medal-more { padding: var(--space-3); margin-top: -6px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface-2); text-align: center; }
.hall-medal-area { color: var(--slab-hue); font-size: 12px; font-weight: 600; }
.hall-medal-more .hall-plaque-remarks { margin-top: var(--space-2); font-size: 14px; }

@media (max-width: 640px) {
  .hall-hero, .hall-hero.is-empty { grid-template-columns: 1fr; text-align: center; padding: var(--space-5) var(--space-4); }
  .hall-summary { align-items: center; }
  .hall-trophy { min-height: 170px; }
  .hall-medals { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* E-17: say it, then polish it (js/writingAssist.js). A row under any box a
   person writes in: what happened on the left, the microphone and Polish on
   the right. Under a box with its own microphone (.mic-box) it sits in that
   box's foot, beside it. */
.write-assist { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 4px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--text-faint); }
.mic-box-foot .write-assist { margin-top: 0; margin-left: auto; }
.write-assist-said { flex: 1 1 160px; min-width: 0; text-align: left; }
.write-assist-said:empty { flex-basis: 0; }
.write-assist-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.write-assist-btn:hover:not(:disabled) { border-color: var(--accent-1); color: var(--accent-1); }
.write-assist-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.write-assist-btn:disabled { opacity: 0.6; cursor: progress; }
.write-assist-mic { width: 28px; padding: 0; }
.write-assist-mic.write-assist-on { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); animation: cap-mic-pulse 1.6s ease-in-out infinite; }
.write-assist-undo { padding: 0; border: 0; background: none; color: var(--accent-1); font: inherit; cursor: pointer; }
.write-assist-undo:hover { text-decoration: underline; }
.write-assist-undo[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .write-assist-mic.write-assist-on { animation: none; } }

/* FO-1 to FO-6: Focus (js/screens/focus.js). The page: start a session,
   today's, and the reading by where the phone was. The running session is a
   quiet screen over everything (.focus-run), with one large button. */
.focus-page { display: flex; flex-direction: column; gap: var(--space-5); }
/* Cards as on Practices: the page's width, not the form card's 420px. */
.focus-panel { max-width: none; margin: 0; padding: var(--space-5); min-width: 0; }
.focus-panel .tasks-group-head { margin: 0; }
.focus-panel > .field-hint { margin: 2px 0 var(--space-4); }
.focus-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
.focus-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.focus-wide { grid-column: 1 / -1; }
@media (max-width: 980px) { .focus-grid { grid-template-columns: minmax(0, 1fr); } }
.focus-note { font-size: 12.5px; color: var(--text-faint); }
.focus-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.focus-actions .focus-note { flex: 1 1 220px; }
.focus-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.focus-place { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.focus-place:hover { border-color: var(--accent-1); }
.focus-place.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); }
.focus-place:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.focus-place-name { font-weight: 600; font-size: 14px; }
.focus-place-about { font-size: 12.5px; color: var(--text-muted); }
.focus-ended-line { margin: 0 0 var(--space-3); font-size: 15px; }
.focus-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-3); }
.focus-stat { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); min-width: 0; }
.focus-stat-figure { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.focus-stat-words { font-size: 12.5px; color: var(--text-muted); }
.focus-list-main { display: grid; gap: 2px; min-width: 0; }
.focus-list-label { font-weight: 600; }
.focus-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.focus-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-1); }
.focus-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); margin: var(--space-3) 0; }
.focus-about-point h3 { margin: 0 0 4px; font-size: 14px; }
.focus-about-point p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.focus-h { margin: 0 0 var(--space-3); font-size: 16px; }
.focus-start { display: grid; gap: var(--space-4); }
.focus-start > .field-hint { margin: 0; }
.focus-row { display: grid; gap: 6px; }
.focus-label { font-size: 13px; color: var(--text-muted); }
.focus-for, .focus-own { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; color: var(--text); font-family: var(--font); }
.focus-for:focus, .focus-own:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-1-soft); }
.focus-for { width: 100%; max-width: 420px; }
.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.focus-chip { padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.focus-chip:hover { border-color: var(--accent-1); color: var(--accent-1); }
.focus-chip.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); font-weight: 600; }
.focus-chip:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.focus-own { width: 84px; }
.focus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.focus-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.focus-list-time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.focus-list-note { font-size: 12.5px; color: var(--text-faint); }
.focus-reading { display: grid; gap: 10px; }
.focus-reading-row { display: grid; grid-template-columns: minmax(120px, 160px) minmax(80px, 1fr) minmax(90px, auto) minmax(0, 1.4fr); gap: 4px 14px; align-items: center; }
.focus-reading-place { font-weight: 600; }
.focus-reading-figure { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .focus-reading-row { grid-template-columns: minmax(0, 1fr) auto; } .focus-bar, .focus-reading-note { grid-column: 1 / -1; } .focus-stats { grid-template-columns: minmax(0, 1fr); } }

.focus-run { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: 24px 16px; background: var(--bg); color: var(--text); text-align: center; }
.focus-run-for { max-width: 90vw; font-size: 18px; color: var(--text-muted); overflow-wrap: anywhere; }
.focus-run-left { font-size: clamp(56px, 16vw, 120px); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.focus-run-phone { font-size: 13px; color: var(--text-faint); }
.focus-run-reach { width: min(320px, 90vw); padding: 22px 20px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; }
.focus-run-reach:hover { border-color: var(--accent-1); }
.focus-run-reach:active { background: var(--accent-1-soft); }
.focus-run-reach:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; }
.focus-run-ack { min-height: 18px; font-size: 13px; color: var(--text-faint); }
.focus-run-end { padding: 6px 12px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* B-7: a fixed obligation's kept time (screens/calendar.js keptBand). A
   hatched slate band across the whole column, behind the events: time that is
   not the person's to book, read at a glance as unavailable. */
.cal-kept { position: absolute; left: 0; right: 0; z-index: 1; display: flex; align-items: flex-start; padding: 3px 6px; background: var(--obligation-fill); border-top: 2px solid var(--obligation); box-sizing: border-box; overflow: hidden; pointer-events: auto; }
.cal-kept-label { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--obligation); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-kept.is-short .cal-kept-label { padding: 0 4px; font-size: 10px; }
.cal-kept-lock { font-size: 9px; }
.cal-kept-swatch { background: var(--obligation-fill); border: 1px solid var(--obligation); }
/* Booked into kept time before 2026-10-18: a slate edge and a hatched corner, so it is seen. */
.cal-event.is-in-kept { box-shadow: inset 0 0 0 2px var(--obligation); }
.cal-event.is-in-kept::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: var(--obligation-fill); border-bottom-left-radius: 4px; }

/* RL-21, 2026-10-18: the Library's shelf on the Compass (js/libraryPointers.js).
   An area's week as a gauge (planned, went there, open), then its templates as
   cards side by side, each with a coloured spine: what a day of it asks, the
   books it is drawn from, its time and Start this. A row scrolls sideways on a
   narrow screen; nothing on the page moves by itself. */
.shelf { gap: var(--space-5); }
.shelf-head { display: grid; gap: 4px; }
.shelf-title { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--text); }
.shelf-lede { margin: 0; max-width: 72ch; font-size: 13.5px; color: var(--text-muted); }
.shelf-area { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.shelf-area-head { display: grid; gap: 6px; }
.shelf-area-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.shelf-area-name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--shelf-hue); flex: none; }
.shelf-area-week { margin: 0; font-size: 13px; color: var(--text-muted); }
.shelf-gauge { display: grid; gap: 4px; max-width: 520px; }
.shelf-gauge-bar { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--shelf-hue) 16%, var(--surface-2)); overflow: hidden; }
.shelf-gauge-done { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--shelf-hue); }
.shelf-gauge-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-faint); }
.shelf-gauge-legend b { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.shelf-gauge-room b { color: var(--shelf-hue); }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 340px); gap: var(--space-4); overflow-x: auto; padding: 2px 2px var(--space-2); scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.shelf-slot { scroll-snap-align: start; min-width: 0; display: flex; }
.shelf-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; min-width: 0; padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 8px); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); box-shadow: 3px 3px 0 -1px var(--surface), 3px 3px 0 0 var(--border); transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); }
.shelf-card:hover, .shelf-card:focus-within { border-color: color-mix(in srgb, var(--shelf-hue) 60%, var(--border)); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .shelf-card { transition: none; } .shelf-card:hover, .shelf-card:focus-within { transform: none; } }
.shelf-spine { position: absolute; inset: 0 auto 0 0; width: 8px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: linear-gradient(to bottom, var(--shelf-hue), color-mix(in srgb, var(--shelf-hue) 55%, var(--surface-2))); }
.shelf-card-head { display: grid; gap: 4px; }
.shelf-card-books { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shelf-hue); }
.shelf-card-title { margin: 0; font-size: 16.5px; line-height: 1.25; color: var(--text); }
.shelf-card-summary { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.shelf-card-day { display: grid; gap: 6px; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); }
.shelf-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.shelf-steps { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--text); }
.shelf-steps li::marker { color: var(--shelf-hue); font-weight: 700; }
.shelf-step-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-step-min { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--shelf-hue) 14%, transparent); color: var(--text-muted); font-size: 11.5px; }
.shelf-more { margin: 0; font-size: 12px; color: var(--text-faint); }
.shelf-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.shelf-fact { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text-muted); }
.shelf-fit { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.shelf-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.shelf-authors { margin: 0; min-width: 0; font-size: 12px; color: var(--text-faint); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-start { width: auto; flex: none; padding: 8px 14px; font-size: 13.5px; }
@media (max-width: 640px) { .shelf-row { grid-auto-columns: minmax(250px, 86%); } }


/* An obligation refused for sharing time with another (2026-10-18), said under the form in the obligations' slate. */
.obligation-error { margin: 0; padding: 8px 12px; border-left: 3px solid var(--obligation); border-radius: var(--radius-sm); background: var(--obligation-soft); color: var(--text); font-size: 13px; }

/* SB-1, SB-8 (2026-10-19): the Success blueprint's page and its capture, in
   the panels of Focus and Practices. A chosen chip carries its place in the
   order the person would try it. Tokens only (INV-7). */
.bp-page { display: flex; flex-direction: column; gap: var(--space-4); }
.bp-panel { max-width: none; margin: 0; padding: var(--space-5); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.bp-panel .btn-row { margin: 0; }
.bp-h { margin: 0; font-size: 16px; }
.bp-lede { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.bp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bp-eyebrow, .bp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.bp-label { display: block; margin: 0 0 var(--space-2); }
.bp-habit { margin: 4px 0 0; font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.bp-updated { font-size: 12.5px; color: var(--text-muted); }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }
.bp-block { min-width: 0; }
.bp-block .field-hint { margin: 0 0 var(--space-3); }
.bp-mechanics { margin: 0; padding: 0 0 0 20px; display: grid; gap: var(--space-2); }
.bp-mechanics li::marker { color: var(--accent-1); font-weight: 700; }
.bp-mech-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.bp-mech-meaning { display: block; font-size: 12.5px; color: var(--text-muted); }
.bp-rule { margin: 0 0 var(--space-3); font-size: 14.5px; color: var(--text); }
.bp-note { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent-3); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.bp-life-link { margin: 0 0 var(--space-3); }
.bp-capture .field { margin: 0; }
.bp-capture input[type="text"] { width: 100%; }
.bp-capture textarea { width: 100%; min-height: 72px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.bp-capture textarea:focus { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.bp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); }
.bp-chip { display: flex; align-items: flex-start; gap: var(--space-2); padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bp-chip:hover { border-color: var(--accent-1); }
.bp-chip.is-on { border-color: var(--accent-1); background: var(--accent-1-soft); }
.bp-chip:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.bp-chip-place { flex: none; width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--surface); }
.bp-chip.is-on .bp-chip-place { border-color: var(--accent-1); background: var(--accent-1); }
.bp-chip-words { display: grid; gap: 2px; min-width: 0; }
.bp-chip-label { font-size: 13.5px; font-weight: 600; }
.bp-chip-meaning { font-size: 12px; color: var(--text-muted); }
/* SB-6: the one question after a habit is made, and the smallest version in a lighter week. */
.bp-offer-question, .bp-offer-said { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.bp-offer .field { margin: 0; }
.bp-offer input[type="text"], .bp-offer select { width: 100%; }
.bp-smallest { margin: var(--space-2) 0 0; }
/* N-9: Admin's Errors tab. */
.error-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.error-message { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.error-id { font-family: var(--font-mono, monospace); font-size: 12px; }
.bp-helped { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 14px; color: var(--text); }
/* SB-3: the Not sticking card's two answers. */
.stall-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: none; }
.bp-read { font-size: 12.5px; color: var(--text-muted); }
.bp-marks { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.bp-marks li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: 14px; color: var(--text); }