/* Life Org: one dark, earth-toned theme. Every color comes from a token below. */
:root {
  --bg: #1b2129;          /* page background */
  --shell: #12171d;       /* rail, phone header, phone tab bar */
  --card: #232b34;        /* cards */
  --field: #1b2129;       /* input background */
  --line: #2f3944;        /* borders and dividers */
  --line-strong: #3a4550; /* input and ghost button borders */
  --ink: #e9e4da;         /* primary text */
  --muted: #a09c93;       /* secondary text */
  --faint: #7d7a72;       /* placeholders, inactive tab labels */
  --accent: #9ab894;      /* sage: primary buttons, paths, links, active nav */
  --accent-ink: #12171d;  /* text on accent */
  --warn: #d2b077;        /* sand: medium priority, unsorted badge, classes */
  --bad: #d4876a;         /* clay: due and past-due dates, high priority */
  --ok: #9ab894;          /* future start dates */
  --other: #6b7a8a;       /* slate: non-work calendar events */
  --cal-class: #d2b077;   /* month view: class sessions */
  --cal-lifeorg: #9ab894; /* month view: Life Org tasks and its own calendar */
  --cal-icloud: #6b7a8a;  /* month view: events from other iCloud calendars */
  --cal-birthday: #d4876a;/* month view: birthdays */
  --rail-w: 232px;
  --tabbar-h: 60px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.warn-text { color: var(--warn); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------------------------------------------------------------- page frame */
main { max-width: 1100px; margin: 0 auto; padding: 16px 16px 24px; }
footer { text-align: center; color: var(--faint); font-size: 13px; padding: 0 16px 20px; }
body.has-shell footer { padding-bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
footer a { color: var(--muted); }

/* ---------------------------------------------------------------- desktop rail */
.rail { display: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 14px 22px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.brand-mark svg.icon { width: 18px; height: 18px; stroke-width: 2; }
.rail-row { position: relative; display: flex; align-items: center; }
.rail-row .rail-link { flex: 1 1 auto; }
.rail-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; color: var(--muted); font-weight: 500; text-decoration: none; }
.rail-link:hover { color: var(--ink); }
.rail-link.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.rail-badge { position: absolute; right: 12px; font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); text-decoration: none; }
.rail-foot { margin-top: auto; padding: 16px 14px 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--muted); }
.rail-foot form { margin: 0; }
.history { display: flex; gap: 6px; }
.history button { width: 32px; height: 32px; padding: 0; }
.history button svg.icon { width: 16px; height: 16px; stroke-width: 2; }

/* ---------------------------------------------------------------- phone header, tab bar, More sheet */
.phone-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; background: var(--shell); border-bottom: 1px solid var(--line); }
.phone-title { font-weight: 700; font-size: 22px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; padding: 0 6px env(safe-area-inset-bottom); background: var(--shell); border-top: 1px solid var(--line); }
.tab-wrap { position: relative; flex: 1 1 0; display: flex; }
.tab { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: var(--tabbar-h); padding: 9px 0 6px; color: var(--faint); font-size: 11px; font-weight: 500; text-decoration: none; cursor: pointer; list-style: none; }
.tab::-webkit-details-marker { display: none; }
.tab svg.icon { width: 22px; height: 22px; }
.tab.on, details.more[open] > .tab { color: var(--accent); }
.tab-dot { position: absolute; top: 4px; left: calc(50% + 6px); font-size: 10px; font-weight: 700; line-height: 15px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: var(--accent-ink); text-decoration: none; }
.sheet { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 32px color-mix(in srgb, var(--shell) 70%, transparent); }
.sheet form { margin: 0; }
.sheet .history { padding: 6px 12px; gap: 8px; }
.sheet .history button { width: 44px; height: 44px; }
.sheet-link, button.sheet-link { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.sheet-link:hover, button.sheet-link:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); filter: none; }

/* ---------------------------------------------------------------- cards */
section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
section h1, section h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }

/* ---------------------------------------------------------------- buttons: primary and ghost */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 6px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
button:hover, .btn:hover { filter: brightness(1.08); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
button.ghost:hover, .btn.ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); filter: none; }
button.danger { background: var(--bad); border-color: var(--bad); color: var(--accent-ink); }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--muted); font-size: 13px; font-weight: 400; }
button.link:hover { color: var(--ink); filter: none; }

/* ---------------------------------------------------------------- inputs */
input, select, textarea { font: inherit; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); background: var(--field); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; min-height: 34px; min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
input[type=checkbox] { min-height: 0; accent-color: var(--accent); }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.grid-form { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-form .wide { flex: 1 1 260px; }
.stack label { display: block; margin: 10px 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stack label input, .stack label select, .stack label textarea { display: block; width: 100%; margin-top: 4px; }
.stack .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 10px; }
.stack label.check { display: flex; align-items: center; gap: 8px; }
.stack label.check input { display: inline; width: auto; margin: 0; }

/* ---------------------------------------------------------------- lists and item rows */
ul.items, ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
li.item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
li.item:last-child { border-bottom: 0; }
/* An unfinished task reads as an empty box: nothing filled, nothing checked. */
button.check { width: 32px; height: 32px; padding: 0; background: transparent; border: 1.5px solid var(--line-strong);
               border-radius: 8px; color: transparent; transition: background .12s ease, border-color .12s ease, color .12s ease; }
button.check svg.icon { width: 14px; height: 14px; stroke-width: 2; }
button.check:hover, button.check:focus-visible { background: transparent; border-color: var(--accent); color: color-mix(in srgb, var(--accent) 55%, transparent); filter: none; }
button.check.filling { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
li.item.done button.check, li.item.dropped button.check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-top { display: flex; align-items: flex-start; gap: 10px; }
.item-top .title, li.item > .title { flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
li.item.done .title, li.item.dropped .title { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); }
.path { color: var(--accent); }
.path.unsorted { color: var(--warn); }
.due-now { color: var(--bad); font-weight: 600; }
.starts { color: var(--ok); }
.pri { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-top: 2px; }
.pri.high { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.pri.medium { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pri.low { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.badge { font-size: 12px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.badge.wait { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

/* ---------------------------------------------------------------- digest controls */
.digest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 4px 6px 14px; font-size: 13px; color: var(--muted); }
.digest-row .status { flex: 1 1 auto; }
.digest-row .btn, .digest-row button { font-size: 13px; padding: 5px 12px; }

/* ---------------------------------------------------------------- tree */
.node { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line); }
.node.depth-0 { border-left-color: var(--accent); margin-top: 20px; }
.node-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.node-name { font-weight: 700; text-decoration: none; color: var(--ink); }
.depth-0 > .node-head .node-name { font-size: 17px; }
details.add summary { cursor: pointer; color: var(--muted); list-style: none; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; }
details.add summary::-webkit-details-marker { display: none; }
details.add[open] { display: block; width: 100%; }
details.add form { margin: 8px 0; }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }

/* ---------------------------------------------------------------- sign-in */
section.login { max-width: 360px; margin: 12vh auto 0; }
section.login .error { color: var(--bad); margin: 0 0 8px; }
section.login button { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------------- wide screens: rail instead of tab bar */
@media (min-width: 900px) {
  .rail { display: flex; flex-direction: column; gap: 6px; position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); padding: 22px 14px; background: var(--shell); border-right: 1px solid var(--line); overflow-y: auto; }
  .phone-head, .tabbar { display: none; }
  body.has-shell .page { margin-left: var(--rail-w); }
  body.has-shell main { padding: 26px 36px 32px; }
  body.has-shell footer { padding-bottom: 20px; }
  section { padding: 18px 22px; margin-bottom: 22px; }
}

/* ---------------------------------------------------------------- phones: tab bar clearance, 44px hit targets */
@media (max-width: 899px) {
  body.has-shell main { padding-bottom: 24px; }
  button, .btn { min-height: 44px; border-radius: 8px; }
  button.check { width: 44px; height: 44px; }
  button.link { min-height: 0; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  input[type=checkbox] { min-height: 0; }
  .digest-row .btn, .digest-row button { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- Today dashboard */
.page-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.page-head h1 { margin: 0; font-size: 22px; }
.dash { display: flex; flex-direction: column; gap: 14px; }
.dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.spacer { flex: 1 1 auto; }

/* The Task Pool filters: one row on a desktop card, wrapping to two on a phone. Neither
   control is saved, so they are deliberately plain. */
.pool-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.pool-filter select { flex: 0 1 auto; max-width: 48%; }
.pool-filter input { flex: 1 1 120px; min-width: 0; }
.day-label { font-size: 15px; font-weight: 600; text-align: center; }
a.daynav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); text-decoration: none; }
a.daynav svg.icon { width: 14px; height: 14px; stroke-width: 2; }
.ev { display: flex; gap: 12px; align-items: stretch; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev .time { flex: 0 0 76px; font-size: 13px; color: var(--muted); }
.ev .bar { flex: 0 0 3px; border-radius: 2px; background: var(--muted); }
.ev .bar-accent { background: var(--accent); }
.ev .bar-warn { background: var(--warn); }
.ev .bar-other { background: var(--other); }
.ev .bar-task { background: var(--cal-lifeorg); }   /* a task due that day */
.ev .what { display: flex; flex-direction: column; min-width: 0; }
.ev .name { font-weight: 600; }
.ev .kind { font-size: 12px; color: var(--muted); }
.tomorrow { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.section-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.quick-form { display: flex; flex-direction: column; gap: 8px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.quick-form label, .quick-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.quick-form .row { margin-top: 0; }
details.more-fields > summary { cursor: pointer; list-style: none; }
details.more-fields > summary::-webkit-details-marker { display: none; }
.pinned { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.pinned svg.icon { width: 12px; height: 12px; }
button.move { width: 30px; height: 30px; padding: 0; flex: 0 0 auto; }
button.move svg.icon { width: 14px; height: 14px; stroke-width: 2; }
section details > summary { cursor: pointer; list-style: none; }
section details > summary::-webkit-details-marker { display: none; }
section details > summary h2 { display: inline; }

@media (min-width: 900px) {
  .dash { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; align-items: stretch;
          min-height: 720px; height: calc(100vh - 210px); }
  .dash-col { gap: 22px; min-height: 0; }
  .dash-col > section.fit { flex: 0 0 auto; }
  .dash-col > section.grow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .dash-col > section.grow > .tomorrow { flex: 0 0 auto; max-height: 45%; overflow: hidden; }
  .dash-col > section.grow > .scroll { min-height: 140px; }
  .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 16px; scrollbar-width: thin; }
}

@media (max-width: 899px) {
  .tomorrow { display: none; }
  .page-head { display: none; }
  button.move { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------- tree outline */
details.outline { border-bottom: 1px solid var(--line); }
details.outline:last-child { border-bottom: 0; }
.outline-head { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; }
.outline-head::-webkit-details-marker { display: none; }
.outline-head .twisty svg.icon { width: 14px; height: 14px; transition: transform .12s ease; }
details.outline[open] > .outline-head .twisty svg.icon { transform: rotate(90deg); }
.outline-head .node-name { font-weight: 600; }
.outline-head .count { font-size: 12px; color: var(--muted); }
.outline-body { padding-bottom: 10px; }
.node-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.small-btn { font-size: 13px; padding: 4px 10px; min-height: 0; }
details.menu, details.add-item, details.add-child { position: relative; }
details.menu > summary, details.add-item > summary, details.add-child > summary { cursor: pointer; list-style: none; }
details.menu > summary::-webkit-details-marker, details.add-item > summary::-webkit-details-marker,
details.add-child > summary::-webkit-details-marker { display: none; }
.menu-sheet { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px;
              background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; }
.menu-sheet form { margin: 0; }
details.add-item[open] { width: 100%; }
details.add-item > .quick-form, details.add-item form { margin-top: 8px; }

/* ---------------------------------------------------------------- classes */
.course-columns { display: grid; grid-template-columns: 1fr; gap: 14px; }
.course-col { min-width: 0; }
li.session { padding: 8px 0; border-bottom: 1px solid var(--line); }
li.session:last-child { border-bottom: 0; }
li.session.past { opacity: .55; }
li.session.this-week { border-left: 3px solid var(--warn); padding-left: 10px; margin-left: -13px; }
.session-head { display: flex; align-items: baseline; gap: 8px; }
.session-type { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
                background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.session-topic { font-weight: 600; }
details.session-more > summary { cursor: pointer; list-style: none; }
details.session-more > summary::-webkit-details-marker { display: none; }
tr.past td { opacity: .55; }
tr.this-week td { border-left-color: var(--warn); }
tr.this-week td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

@media (min-width: 900px) {
  .course-columns { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: start; }
}

/* ---------------------------------------------------------------- projects */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.project-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.project-card.compact { padding: 10px 14px; }
.project-card h2 { margin: 0; }
.project-card h2 a { color: var(--ink); text-decoration: none; }
.project-card h2 a:hover { color: var(--accent); }
.project-desc { margin: 2px 0 8px; color: var(--muted); }
.progress { display: block; height: 6px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); overflow: hidden; }
.progress .bar-fill { display: block; height: 100%; background: var(--accent); }
.next-step { margin-top: 10px; }
.project-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.project-tag svg.icon { width: 14px; height: 14px; }
.count-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.held-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.held-row:last-child { border-bottom: 0; }
.btn.ghost.on { border-color: var(--accent); color: var(--accent); }

/* A panel that opens over the page on desktop and inline on a phone. */
details.panel-form > summary { list-style: none; cursor: pointer; }
details.panel-form > summary::-webkit-details-marker { display: none; }
.panel-sheet { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.flash { background: color-mix(in srgb, var(--bad) 16%, transparent); border: 1px solid var(--bad); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.tab span { white-space: nowrap; }

@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  details.panel-form[open] > .panel-sheet { position: fixed; z-index: 30; top: 10vh; left: 50%; transform: translateX(-50%);
                                            width: min(560px, 92vw); max-height: 80vh; overflow-y: auto;
                                            box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
}

/* ---------------------------------------------------------------- settings cards */
/* Subpage tabs: one row under the title, scrolling sideways on a phone rather than wrapping. */
.tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line);
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab-link { flex: 0 0 auto; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
            color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tab-link:hover { color: var(--ink); }
.tab-link.on { color: var(--accent); border-bottom-color: var(--accent); }
.type-list { list-style: none; padding: 0; margin: 0; }
.type-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.type-row:last-child { border-bottom: 0; }
.type-fields { display: flex; align-items: flex-end; gap: 12px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.type-fields label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.type-fields .grow-field { flex: 1 1 180px; }
.field-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.type-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- quick add on a phone */
.quick-first { display: flex; align-items: center; gap: 8px; }
.quick-first .wide { flex: 1 1 auto; }
button.chevron { width: 36px; height: 36px; padding: 0; flex: 0 0 auto; display: none; }
button.chevron svg.icon { width: 16px; height: 16px; transition: transform .12s ease; }
button.chevron[aria-expanded="true"] svg.icon { transform: rotate(180deg); }

@media (max-width: 899px) {
  button.chevron { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .quick-form.collapsed [data-quick-rest],
  .quick-form.collapsed [data-headway-note],
  .quick-form.collapsed details.more-fields { display: none; }
  .type-fields { flex-direction: column; align-items: stretch; }
  .type-fields label { width: 100%; }
}

/* ---------------------------------------------------------------- card board */
.card-board { display: flex; flex-direction: column; gap: 16px; }
.board-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
              padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.board-card > .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.board-card h2 { margin: 0; }
.board-card.dragging { opacity: .6; }
.board-card.picked-up { outline: 2px dashed var(--accent); outline-offset: 2px; }
.board-placeholder { border: 1px dashed var(--accent); border-radius: 12px; }
.grip, .grip-corner, .grip-edge { display: none; }
.grip-dots { display: block; width: 10px; height: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--line-strong);
        border-radius: 999px; font-size: 12px; color: var(--accent); text-decoration: none; }
.chip svg.icon { width: 13px; height: 13px; }
.area-group { border-top: 1px solid var(--line); }
.group-head { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; }
.group-head::-webkit-details-marker { display: none; }
.group-head .twisty svg.icon { width: 13px; height: 13px; transition: transform .12s ease; }
details.area-group[open] > .group-head .twisty svg.icon { transform: rotate(90deg); }
.group-body { padding: 0 0 8px 10px; }
.area-add { margin-top: 10px; }
.page-foot { margin-top: 16px; }

/* ---------------------------------------------------------------- month view */
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; font-size: 12px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-class { background: var(--cal-class); }
.dot-lifeorg { background: var(--cal-lifeorg); }
.dot-icloud { background: var(--cal-icloud); }
.dot-birthday { background: var(--cal-birthday); }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month-head { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
              color: var(--muted); text-align: center; padding: 2px 0; }
.month-cell { display: flex; flex-direction: column; gap: 2px; min-height: 76px; padding: 4px 5px;
              border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
              color: var(--ink); text-decoration: none; overflow: hidden; }
.month-cell.outside { opacity: .45; }
.month-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.month-cell.chosen { border-color: var(--accent); }
.day-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.month-cell.is-today .day-num { color: var(--accent); }
.day-chip { font-size: 11px; line-height: 1.3; padding: 1px 4px; border-radius: 4px; border-left: 3px solid var(--line-strong);
            background: color-mix(in srgb, var(--ink) 6%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-chip .chip-when { color: var(--muted); margin-right: 3px; }
.chip-class { border-left-color: var(--cal-class); }
.chip-lifeorg { border-left-color: var(--cal-lifeorg); }
.chip-icloud { border-left-color: var(--cal-icloud); }
.chip-birthday { border-left-color: var(--cal-birthday); }
.day-more { font-size: 11px; color: var(--muted); }
.day-dots { display: none; }
.entry-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.entry-row label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entry-row .grow-field { flex: 1 1 200px; }
.entry-row label.check { flex-direction: row; align-items: center; gap: 6px; }
.phone-collapse > .phone-only { display: none; }   /* desktop shows the form itself */

@media (min-width: 1024px) {
  .card-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .board-card, .board-placeholder { grid-column: span var(--span, 6); height: var(--h, 320px); overflow: hidden; }
  .board-card.pinned { grid-column: span 12; height: auto; }
  .grip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
          border: 0; background: none; color: var(--faint); cursor: grab; }
  .grip:hover, .grip:focus-visible { color: var(--accent); }
  .grip-dots { background-image: radial-gradient(currentColor 1px, transparent 1px);
               background-size: 5px 5px; background-position: 0 0; }
  .board-card:hover { outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
  .grip-corner { display: block; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; padding: 0;
                 border: 0; background: none; cursor: nwse-resize; opacity: 0; }
  .grip-corner::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px;
                        border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
  .board-card:hover .grip-corner, .grip-corner:focus-visible { opacity: 1; }
  .grip-edge { display: block; position: absolute; }
  .grip-edge[data-axis="x"] { top: 0; bottom: 0; right: 0; width: 8px; cursor: ew-resize; }
  .grip-edge[data-axis="y"] { left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
  .board-card.resizing { outline: 1px solid var(--accent); user-select: none; }
}

@media (max-width: 1023px) {
  .board-card { height: auto !important; }
  .month-cell { min-height: 54px; }
  .day-chip { display: none; }
  .day-dots { display: flex; gap: 3px; }
  .day-more { display: none; }
  .phone-collapse > .phone-only { display: inline-flex; }
  .phone-toggle:not(:checked) ~ .entry-row { display: none; }
  .entry-row label, .entry-row .grow-field { width: 100%; flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- project groups on Life Areas */
details.project-group > .group-head .node-name { color: var(--accent); text-decoration: none; }
details.project-group > .group-head svg.icon { width: 14px; height: 14px; }
details.project-group.held { opacity: .62; }
details.project-group.held > .group-head .node-name { color: var(--muted); }
.task-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
details.done-list { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
details.done-list > summary { cursor: pointer; list-style: none; }
details.done-list > summary::-webkit-details-marker { display: none; }
ul.done-items li.item .title { text-decoration: line-through; color: var(--muted); font-weight: 400; }

@media (max-width: 1023px) {
  /* About eight rows, then the list scrolls inside the card instead of pushing the page down. */
  .task-scroll { max-height: 520px; overflow-y: auto; }
}

/* ---------------------------------------------------------------- course schedules card */
.course-table { width: 100%; }
.course-table tr.past td { opacity: .5; }
.course-table tr.is-today td { border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.course-table tr.highlight td { background: color-mix(in srgb, var(--warn) 14%, transparent); font-weight: 600; }
.course-card details > summary { cursor: pointer; list-style: none; }
.course-card details > summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------- a confirm with two outcomes */
details.confirm-sheet > summary { cursor: pointer; list-style: none; }
details.confirm-sheet > summary::-webkit-details-marker { display: none; }
.confirm-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
                margin-top: 8px; padding: 10px 12px; border: 1px solid var(--bad); border-radius: 8px;
                background: color-mix(in srgb, var(--bad) 10%, transparent); }
.confirm-body p { margin: 0; }