/* Life events, Insights, Settings, Compare and sign-in (§6) — owned by the "other" builder. Ported from prototype v2.
   The suggestion card and life-event sheet rules moved to components.css. */

/* ==== ported from the prototype: views/events.css (list) ==== */
/* Life events (spec §6.3) — builder E. Container queries on #view only. */

/* ---- To confirm: suggestion cards (raised paper, blue top rule, hard shadow: Mike acts on them) */
.events-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@container view (min-width:760px){.events-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container view (min-width:1180px){.events-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

.events-sg-foot{margin:2px 0 0}

/* ---- Events by year ------------------------------------------------------------- */
.events-list-sec .v-section-actions{margin-left:auto}
@container view (max-width:579px){.events-list-sec .v-section-actions{margin-left:0;flex-basis:100%}}
.events-year{display:grid;grid-template-columns:minmax(0,1fr);margin:4px 0 8px}
.events-yearlabel{display:flex;align-items:baseline;gap:10px;margin:14px 0 0;padding:0 0 6px;border-bottom:1px solid var(--desk-ink);font:700 20px/1.1 var(--desk-display);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.events-yearcount{font:400 11px/1.5 var(--desk-mono);letter-spacing:0;color:var(--desk-muted)}
.events-rows{display:flex;flex-direction:column;min-width:0}
@container view (min-width:760px){
  .events-year{grid-template-columns:112px minmax(0,1fr);column-gap:24px;margin:0}
  .events-yearlabel{position:sticky;top:0;align-self:start;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:12px 0 18px;border-bottom:0;border-top:1px solid var(--desk-ink)}
  .events-rows{border-top:1px solid var(--desk-ink)}
}

a.events-row{color:var(--desk-ink)}
.events-row{display:grid;grid-template-columns:30px minmax(0,1fr) 20px;align-items:center;gap:0 12px;min-height:56px;padding:8px 2px 8px 0;border-bottom:1px solid var(--desk-rule);color:var(--desk-ink);text-decoration:none}
a.events-row:hover{background:var(--hover)}
a.events-row:focus-visible{outline-offset:-2px}
.events-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--desk-ink);border-radius:2px;background:var(--desk-paper);color:var(--desk-ink)}
.events-ic svg{width:16px;height:16px}
.events-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.events-title{font:400 15px/1.35 var(--desk-font);overflow-wrap:anywhere}
.events-title b{font-weight:700}
.events-meta{display:block;font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
.events-meta .events-when:not(:last-child)::after{content:"\00a0\00b7\0020"}
.events-meta .events-src{white-space:nowrap}
.events-note{font:italic 400 12.5px/1.45 var(--desk-font);color:var(--desk-muted)}
.events-go{display:inline-flex;justify-content:center;color:var(--desk-muted)}
.events-go svg{width:14px;height:14px}
a.events-row:hover .events-go{color:var(--desk-blue)}
.events-row.is-fresh{box-shadow:inset 4px 0 var(--v-mark);padding-left:10px}
@container view (min-width:1000px){
  .events-main{display:grid;grid-template-columns:minmax(0,1fr) 236px 150px;column-gap:16px;align-items:baseline}
  .events-meta{display:contents}
  .events-meta .events-when:not(:last-child)::after{content:none}
  .events-when,.events-src{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
  .events-note{grid-column:1}
}
.events-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid var(--desk-rule)}
.events-empty p{margin:0;font:400 15px/1.5 var(--desk-font)}
@media (max-width:900px){.events-add{width:100%}}

/* Section-title tiers (INTERFACES §5): the year header stays below the 24px section title. */
a.events-inline{color:var(--desk-blue);text-decoration:underline;text-underline-offset:2px}


/* ==== ported from the prototype: views/insights.css ==== */
/* Insights (spec §6.1) — builder E. */

/* ---- Filters: a row of links (aria-current), scrolls sideways on narrow containers */
.insights-filters{display:flex;gap:0;margin:0 0 20px;border-bottom:1px solid var(--desk-ink);overflow-x:auto;scrollbar-width:none}
.insights-filters::-webkit-scrollbar{display:none}
a.insights-filter{display:inline-flex;align-items:center;flex:none;min-height:36px;padding:6px 12px;margin-bottom:-1px;border:1px solid transparent;border-bottom:0;border-radius:2px 2px 0 0;color:var(--desk-ink);font:600 13px/1.3 var(--desk-font);text-decoration:none;white-space:nowrap}
a.insights-filter:hover{background:var(--hover)}
a.insights-filter.is-on{background:var(--desk-paper);border-color:var(--desk-ink);border-bottom:1px solid var(--desk-paper);box-shadow:inset 0 3px var(--desk-blue);color:var(--desk-ink)}
@media (max-width:900px),(pointer:coarse){a.insights-filter{min-height:44px;min-width:44px;justify-content:center}}

/* ---- List rows: one link each; text left, two-strip evidence mini chart right ---- */
.insights-sec{min-width:0}
.insights-rows{display:flex;flex-direction:column}
a.insights-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0 20px;border-bottom:1px solid var(--desk-rule);color:var(--desk-ink);text-decoration:none}
a.insights-row:hover{background:var(--hover)}
a.insights-row:focus-visible{outline-offset:-2px}
.insights-row-text{display:flex;flex-direction:column;gap:4px;min-width:0}
/* Value first (D46): the finding's figure is the hero; title, finding and kicker step down under it. */
.insights-fig-line{margin-bottom:4px}
.insights-fig-line .fig-value{font-size:30px;letter-spacing:-1px}
.insights-fig-line .fig-unit{font-size:14px}
@media (max-width:900px){.insights-fig-line .fig-value{font-size:28px}}
a.insights-row:hover .fig-value{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.insights-kicker{margin-top:4px;font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.insights-title{font:600 15px/1.35 var(--desk-font);color:var(--desk-ink)}
.insights-finding{font:400 13.5px/1.5 var(--desk-font);color:var(--desk-muted);max-width:64ch}
.insights-row-chart{display:flex;align-items:center}
@container view (min-width:580px){
  a.insights-row{grid-template-columns:minmax(0,1fr) 164px;gap:20px;align-items:center}
  .insights-row-chart{justify-content:flex-end;padding-right:4px}
}
.insights-mini{display:block;overflow:visible}
.insights-br{stroke-width:3;stroke-linecap:butt}
.insights-br.a{stroke:var(--v-series)}
.insights-br.b{stroke:var(--v-ref);stroke-width:1.5;stroke-dasharray:4 3}
.insights-brt{stroke-width:1.25}
.insights-brt.a{stroke:var(--v-series)}
.insights-brt.b{stroke:var(--v-ref)}
.insights-step{fill:none;stroke:var(--v-ink);stroke-width:2;stroke-linejoin:miter}
.insights-marker{stroke:var(--v-ink);stroke-width:1;stroke-dasharray:3 3}
.insights-med{stroke:var(--v-ink);stroke-width:2}
.insights-gap{stroke:var(--v-ink);stroke-width:1.5}
.insights-iqr{stroke:var(--v-ink);opacity:.6}
.insights-zero{stroke:var(--v-ref);stroke-width:1;stroke-dasharray:3 3}
.insights-empty{margin:0;padding:12px 0;font:400 14px/1.5 var(--desk-font);color:var(--desk-muted);border-bottom:1px solid var(--desk-rule)}
.insights-foot{margin:18px 0 0}

/* ---- Brain approvals: cards (Mike acts on them) ----------------------------------- */
.insights-aps{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@container view (min-width:760px){.insights-aps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.insights-ap .v-card-body{display:flex;flex-direction:column;gap:8px}
.insights-target{margin:0;font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
.insights-target b{font-weight:500;color:var(--desk-ink)}
.insights-quote{margin:0;padding:2px 0 2px 12px;border-left:3px solid var(--desk-ink);font:400 15px/1.5 var(--desk-font)}
.insights-from{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.insights-src{font-size:13px}
.insights-ap-status{margin:0;font:400 12px/1.55 var(--desk-mono);color:var(--desk-muted)}
.insights-ap-status .v-link{font-size:12px;min-height:0;position:relative}
/* inline in a sentence: a 44px hit area on touch rather than a 44px line */
@media (max-width:900px),(pointer:coarse){.insights-ap-status .v-link::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}}
.insights-ap-status.is-done{color:var(--desk-ink)}
.insights-ap.is-written{border-top-color:var(--desk-rule);box-shadow:none;background:var(--desk-paper)}
.insights-ap:focus{outline:none}
.insights-ap:focus-visible{outline:2px solid var(--desk-blue);outline-offset:3px}

/* ---- Detail ------------------------------------------------------------------------ */
.insights-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 32px;align-items:start}
@container view (min-width:1000px){.insights-detail{grid-template-columns:minmax(0,1fr) 340px}.insights-rail{position:sticky;top:12px}}
@container view (min-width:1400px){.insights-detail{grid-template-columns:minmax(0,1fr) 400px}}
.insights-main,.insights-rail{display:flex;flex-direction:column;gap:8px;min-width:0}
.insights-hero{margin:4px 0 14px}
.insights-lede{margin:0 0 24px;max-width:52ch;font:400 18px/1.5 var(--desk-font);letter-spacing:-.1px}
.insights-lede p,.insights-lede ul{margin:0 0 10px}
.insights-lede>:last-child{margin-bottom:0}
.insights-lede h3,.insights-lede h4,.insights-lede h5{margin:14px 0 6px;font:700 16px/1.3 var(--desk-font)}
.insights-quote .insights-md p,.insights-quote .insights-md ul{margin:0}
.insights-quote .insights-md ul{padding-left:18px}
.insights-md a{color:var(--desk-blue)}
@media (max-width:900px){.insights-lede{font-size:17px}}
.insights-fig figcaption{min-height:0}
.insights-readout{min-height:1.5em}
.insights-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.insights-ctx{flex-basis:100%}
.insights-decision{margin:0 0 18px}
.insights-decision:focus{outline:none}
.insights-decision:focus-visible{outline:2px solid var(--desk-blue);outline-offset:3px}
.insights-status{margin:0;font:400 13px/1.5 var(--desk-font)}
.insights-panel{display:flex;flex-direction:column;gap:6px;padding:10px 0 0;border-top:1px solid var(--desk-rule)}
.insights-panel .v-small{margin:0}
.insights-panel textarea{width:100%;resize:vertical}
.insights-panel-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.insights-err{margin:0;font:600 13px/1.4 var(--desk-font);color:var(--desk-ink);padding-left:10px;border-left:3px solid var(--desk-ink)}
.insights-err:empty{display:none}
.insights-log,.insights-comments{list-style:none;margin:0;padding:0}
.insights-log li{display:grid;grid-template-columns:auto auto;justify-content:start;gap:2px 8px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--desk-rule)}
.insights-log-when{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.insights-log li .v-chip{justify-self:start}
.insights-log-text{grid-column:1/-1;font:400 13px/1.5 var(--desk-font)}
.insights-comments li{padding:8px 0;border-bottom:1px solid var(--desk-rule)}
.insights-comments p{margin:2px 0 0;font:400 13px/1.5 var(--desk-font)}
.insights-comment-form{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.insights-comment-form textarea{width:100%;resize:vertical}
/* Narrow containers: filters wrap as chips instead of scrolling out of sight. */
@container view (max-width:579px){
  .insights-filters{flex-wrap:wrap;gap:6px;overflow:visible;border-bottom:0;margin-bottom:16px}
  a.insights-filter{margin:0;border:1px solid var(--desk-rule);border-radius:2px;padding:6px 10px}
  a.insights-filter.is-on{background:var(--desk-ink);border-color:var(--desk-ink);color:var(--desk-paper);box-shadow:none}
}

/* ---- To decide: cards, then brain approvals under one section (fix pass) ---------------- */
.insights-subhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:18px 0 10px;padding-top:10px;border-top:1px solid var(--desk-ink)}
.insights-subtitle{margin:0;font:700 15px/1.3 var(--desk-font)}
.insights-subtitle:focus{outline:none}
.insights-submeta{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}

/* ---- Round 2: the ⓘ beside the list's date line; quiet status headings (D46) ---------- */
.insights-daterow{display:flex;align-items:center;gap:2px;margin:5px 0 0}
.insights-daterow .view-date{margin:0}
.insights-sec.is-quiet{margin-top:8px}


/* ==== ported from the prototype: views/settings.css ==== */
/* Settings (spec §6.4) — builder E. Also the shared switch (.settings-switch) used by Life events and Insights. */

/* ---- Switch: a square Desk toggle (role=switch). Never colour alone: knob position + label. */
.settings-switch{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:4px 0;border:0;background:transparent;color:var(--desk-ink);font:600 13px/1.35 var(--desk-font);text-align:left;cursor:pointer}
.settings-switch-track{position:relative;flex:none;width:36px;height:20px;border:1px solid var(--desk-ink);border-radius:2px;background:var(--desk-paper);box-shadow:0 2px 0 var(--desk-shadow)}
.settings-switch-knob{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:1px;background:var(--desk-ink);transition:left .12s ease}
.settings-switch[aria-checked="true"] .settings-switch-track{background:var(--desk-blue);border-color:var(--desk-blue)}
.settings-switch[aria-checked="true"] .settings-switch-knob{left:19px;background:var(--desk-paper)}
.settings-switch:disabled{cursor:not-allowed;color:var(--desk-muted)}
.settings-switch:disabled .settings-switch-track{border-color:var(--desk-rule);box-shadow:none;background:transparent}
.settings-switch:disabled .settings-switch-knob{background:var(--desk-rule)}
.settings-switch:hover:not(:disabled) .settings-switch-track{background:var(--hover)}
.settings-switch[aria-checked="true"]:hover:not(:disabled) .settings-switch-track{background:var(--desk-ink);border-color:var(--desk-ink)}
@media (max-width:900px),(pointer:coarse){.settings-switch{min-height:44px}}
.v-section-actions .settings-switch{font-size:12px}

/* ---- Common pieces --------------------------------------------------------------- */
.settings-sec{min-width:0}
.settings-line{margin:0;font:400 13px/1.5 var(--desk-font)}
.settings-line.mono{font:400 12px/1.6 var(--desk-mono)}
.settings-line.muted{color:var(--desk-muted)}
.settings-clay{color:var(--v-clay-text)}
p.settings-line.settings-clay,.settings-v.settings-clay{padding-left:10px;border-left:3px solid var(--desk-clay)}
.settings-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.settings-mini li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:6px 0;border-bottom:1px solid var(--desk-rule);font:400 13px/1.45 var(--desk-font)}
.settings-mini li b{font-weight:600}
.settings-mini-state{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
.settings-mini-state.settings-clay{color:var(--v-clay-text)}
.settings-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.settings-err{margin:0;font:600 13px/1.4 var(--desk-font);color:var(--desk-ink);padding-left:10px;border-left:3px solid var(--desk-ink)}
.settings-err:empty{display:none}
.settings-pre{margin:0;padding:10px 12px;max-width:100%;overflow-x:auto;border:1px solid var(--desk-rule);border-left:3px solid var(--desk-ink);border-radius:2px;background:var(--desk-raised);font:400 11.5px/1.6 var(--desk-mono);color:var(--desk-ink);white-space:pre}
.settings-later{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--desk-rule);border-bottom:1px solid var(--desk-rule)}
.settings-later .v-small{margin:0}
.settings-h4{margin:8px 0 0;font:700 14px/1.3 var(--desk-font)}
.settings-form{display:flex;flex-direction:column;gap:10px;padding:12px 0}
.settings-form-row{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.settings-field{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1 1 150px}
.settings-field-wide{flex-basis:100%}
.settings-field .input{width:100%}

/* ---- #/settings: compact sections, 2 columns from 760 ---------------------------- */
.settings-main{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 32px;align-items:start}
@container view (min-width:760px){
  .settings-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-main .settings-about{grid-column:1/-1}
}
.settings-about .settings-pre{max-width:860px}

/* ---- #/settings/data -------------------------------------------------------------- */
.settings-data{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 32px;align-items:start}
@container view (min-width:1000px){
  .settings-data{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"sync imports" "callout imports" "cov cov" "adv adv" "takeout takeout";column-gap:48px}
  .settings-a-sync{grid-area:sync}.settings-a-imports{grid-area:imports}.settings-a-cov{grid-area:cov}.settings-a-callout{grid-area:callout}
  .settings-a-adv{grid-area:adv}.settings-a-takeout{grid-area:takeout}
}
/* Sync, value first (D46): the times are the figures; their names are quiet labels under them. */
.settings-syncfigs{display:flex;flex-wrap:wrap;gap:18px 40px;padding:6px 0 16px}
.settings-fig-clay .fig-value{color:var(--desk-clay)}
.settings-status{margin:0 0 6px;padding:10px 0;border-top:1px solid var(--desk-rule);border-bottom:1px solid var(--desk-rule);font:400 13px/1.55 var(--desk-font);color:var(--desk-muted)}
.settings-status.settings-clay{color:var(--v-clay-text);padding-left:10px;border-left:3px solid var(--desk-clay)}
.settings-latest{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 18px;padding:4px 0 2px}
.settings-latest .fig{gap:3px}
.settings-latest .fig-label{font-size:12px}
.settings-callout-fig{padding:4px 0 10px}
.settings-kv{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 0;border-bottom:1px solid var(--desk-rule)}
.settings-kv:last-child{border-bottom:0}
.settings-k{font:600 11px/1.5 var(--desk-font);color:var(--desk-muted)}
.settings-v{margin:0;font:400 13px/1.55 var(--desk-font);overflow-wrap:anywhere}
.settings-v.mono{font:400 12px/1.6 var(--desk-mono)}
@container view (min-width:580px){.settings-kv{grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:baseline}}

.settings-imports{list-style:none;margin:0;padding:0}
.settings-imp{border-bottom:1px solid var(--desk-rule)}
.settings-imp{display:grid;grid-template-columns:44px 16px minmax(0,1fr) auto;gap:0 8px;align-items:baseline;min-height:36px;padding:7px 0;font:400 12.5px/1.45 var(--desk-font)}
.settings-imp-at{font:400 12px/1.45 var(--desk-mono);color:var(--desk-muted)}
.settings-imp-glyph{font:500 12px/1.45 var(--desk-mono);color:var(--desk-ink)}
.settings-imp-glyph.settings-clay,.settings-imp-text.settings-clay{color:var(--v-clay-text)}

.settings-year{display:inline-flex;align-items:center;gap:6px}
.settings-year-label{min-width:44px;text-align:center;font:700 18px/1 var(--desk-display);font-variant-numeric:tabular-nums}
.settings-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-ink)}
.settings-legend li{display:inline-flex;align-items:center;gap:6px}
.settings-legend-sw{flex:none;overflow:visible}
.settings-cals{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.settings-cov{display:flex;flex-direction:column;gap:4px;min-width:0}
.settings-cov-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.settings-cov-title{margin:0;font:700 15px/1.3 var(--desk-font)}
.settings-cov-sum{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.settings-cov-ok{fill:color-mix(in srgb,var(--v-series) 62%,var(--v-paper))}
.settings-cov-nw{fill:var(--v-paper);stroke:var(--v-ink);stroke-width:1}
.settings-cov-ni{stroke:var(--v-ink);stroke-width:1}
.settings-cov-miss{fill:var(--v-ref)}
.settings-cov-hit{fill:transparent}
.settings-cov-future{fill:none;stroke:var(--v-grid);stroke-width:1}
.settings-cov-today{fill:none;stroke:var(--v-ink);stroke-width:1.5}

.settings-callout{display:flex;align-items:baseline;gap:10px;margin:0;font:400 14px/1.4 var(--desk-font)}
.settings-callout-n{font:800 var(--desk-figure-size)/1 var(--desk-display);letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.settings-rules{display:flex;flex-direction:column;gap:8px;padding:6px 0 4px}
.settings-rules .v-small{margin:0}
.settings-rules .v-dl dt{font:600 12px/1.6 var(--desk-font);color:var(--desk-ink)}

.settings-rows{display:flex;flex-direction:column}
a.settings-row{color:var(--desk-ink)}
.settings-row{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:4px 10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--desk-rule);color:var(--desk-ink);text-decoration:none}
.settings-row:hover{background:var(--hover)}
.settings-row-main{display:flex;flex-direction:column;min-width:0}
.settings-row-title{font:600 14px/1.35 var(--desk-font)}
.settings-row-sub{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted);overflow-wrap:anywhere}
.settings-row-go{display:inline-flex;color:var(--desk-muted)}
.settings-row-go svg{width:14px;height:14px}
@media (max-width:900px){.settings-row .v-chip{white-space:normal}}
@container view (max-width:579px){.settings-row{grid-template-columns:minmax(0,1fr) 16px}.settings-row>.v-chip{grid-row:2;grid-column:1;justify-self:start}}

.settings-adv{display:flex;flex-direction:column;gap:10px;padding:8px 0 4px}
.settings-adv .v-small{margin:0}
.settings-dict{min-width:560px}
.settings-takeout{padding:10px 0;border-top:2px solid var(--desk-ink)}
.settings-takeout p{margin:0;font:400 13px/1.5 var(--desk-font)}
.settings-takeout code{font:400 12px/1.5 var(--desk-mono);background:var(--desk-soft);padding:1px 5px;border-radius:2px}

/* ---- #/settings/sharing ----------------------------------------------------------- */
/* Domains column + a right rail (Audit, what switching does) from container 1000. */
.settings-sharing{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px;align-items:start}
@container view (min-width:1000px){.settings-sharing{grid-template-columns:minmax(0,760px) minmax(260px,360px);justify-content:start}}
.settings-sharing-rail{display:flex;flex-direction:column;min-width:0}
.settings-sharing-rail .v-small{margin:0}
.settings-sharing-rail .v-dl{margin:0}
.settings-domains{display:flex;flex-direction:column;max-width:760px}
.settings-domain{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:1px solid var(--desk-rule)}
.settings-domain:first-child{padding-top:4px}
.settings-domain-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-domain-switch{flex:none;flex-direction:row-reverse;gap:8px}
.settings-domain-switch .settings-switch-label{min-width:2.2em;text-align:right;font:500 12px/1.3 var(--desk-mono)}
.settings-sharing-rail .v-dl dt{font:600 12px/1.6 var(--desk-font);color:var(--desk-ink)}
.settings-domain-del{align-self:flex-start}
.settings-domain .settings-actions{margin-top:2px}
.settings-domain-title{margin:0;font:700 17px/1.3 var(--desk-display);letter-spacing:-.2px}
.settings-domain-copy{margin:0;font:400 14px/1.5 var(--desk-font)}
.settings-domain-status{margin:0;font:400 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.settings-domain-status.settings-clay{color:var(--v-clay-text)}
.settings-domain.is-disabled .settings-domain-title,.settings-domain.is-disabled .settings-domain-copy{color:var(--desk-muted)}
.settings-sub{display:flex;flex-direction:column;gap:2px;margin:4px 0 2px;padding:4px 0 4px 14px;border-left:2px solid var(--desk-rule)}
.settings-sub-copy{margin:0;font:400 12.5px/1.5 var(--desk-font);color:var(--desk-muted)}
.settings-confirm{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--desk-ink);border-radius:2px;background:var(--desk-raised);box-shadow:var(--shadow)}
.settings-confirm p{margin:0;font:600 13.5px/1.45 var(--desk-font)}
.settings-audit{margin:0;padding:0;list-style:none;font:400 12.5px/1.6 var(--desk-font)}
.settings-audit li{padding:4px 0;border-bottom:1px solid var(--desk-rule)}

/* ---- #/settings/time --------------------------------------------------------------- */
.settings-zone{display:flex;flex-direction:column;min-width:0}
.settings-zone small{font:400 10.5px/1.4 var(--desk-mono);color:var(--desk-muted)}
.settings-tz{max-width:900px}
.settings-tz td{vertical-align:top}
.settings-tzform{max-width:620px;margin-top:4px}
.settings-zones{list-style:none;margin:0;padding:0;max-width:620px;counter-reset:z}
.settings-zone-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:4px 0;border-bottom:1px solid var(--desk-rule)}
.settings-zone-n{font:700 18px/1 var(--desk-display);color:var(--desk-muted)}
.settings-zone-row .settings-zone{font:600 14px/1.35 var(--desk-font)}
.settings-hz-add{max-width:620px;padding-top:10px}
.settings-hz-add select{flex:1 1 220px;min-width:0}
@container view (max-width:579px){.settings-zone-row{grid-template-columns:24px minmax(0,1fr)}.settings-zone-row .settings-actions{grid-column:2}}


/* ==== ported from the prototype: views/compare.css ==== */
/* Compare two periods (spec §6.2) — builder E. */
.compare-sec{min-width:0}

/* ---- Presets: one row from 760, a stacked list below (each option ≥44px on phone) */
.v-seg.compare-presets{display:flex;flex-direction:column;width:100%}
.v-seg.compare-presets button{flex:none;text-align:left;justify-content:flex-start;min-height:40px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--desk-rule);white-space:normal}
.v-seg.compare-presets button:last-child{border-bottom:0}
@container view (min-width:760px){
  .v-seg.compare-presets{display:inline-flex;flex-direction:row;width:auto}
  .v-seg.compare-presets button{flex:0 1 auto;text-align:center;min-height:36px;border-bottom:0;border-right:1px solid var(--desk-rule);white-space:nowrap}
  .v-seg.compare-presets button:last-child{border-right:0}
}
@media (max-width:900px),(pointer:coarse){.v-seg.compare-presets button{min-height:44px}}

/* ---- Periods ------------------------------------------------------------------------- */
.compare-periods{display:flex;flex-direction:column;gap:6px;padding:6px 0 2px}
.compare-period{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:400 14px/1.4 var(--desk-font)}
.compare-period b{font:700 14px/1.4 var(--desk-mono);min-width:12px}
.compare-period-range{font-weight:600}
.compare-period-n{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
.compare-legend-dot{align-self:center;flex:none;overflow:visible}
.compare-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:8px 0 0}
.compare-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.compare-field-wide{flex:1 1 280px;max-width:460px}
.compare-field-wide select{width:100%}
.compare-note{margin:2px 0 0}
.compare-custom{align-items:center}
.compare-fs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;border:0;min-width:0}
.compare-fs legend{float:left;width:18px;margin:0;padding:0;font:700 13px/1 var(--desk-mono);color:var(--desk-ink)}
.compare-fs .input{width:150px}
.compare-err{flex-basis:100%;margin:0;font:600 13px/1.4 var(--desk-font);padding-left:10px;border-left:3px solid var(--desk-ink)}
.compare-err:empty{display:none}

/* ---- Metric chips ---------------------------------------------------------------- */
.compare-metrics{margin-top:6px;border-top:1px solid var(--desk-rule);padding-top:4px}
.compare-metrics>summary{gap:10px;flex-wrap:wrap}
.compare-chosen{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
.compare-chooser{display:flex;flex-direction:column;gap:6px;padding:4px 0 6px}
.compare-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.compare-group{flex:0 0 100%;font:600 11px/1.5 var(--desk-font);color:var(--desk-muted)}
@container view (min-width:760px){.compare-group{flex:0 0 190px}}
.compare-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px 3px 6px;border:1px solid var(--desk-rule);border-radius:2px;background:var(--desk-paper);color:var(--desk-ink);font:600 12px/1.2 var(--desk-font);cursor:pointer}
.compare-chip:hover:not(:disabled){background:var(--hover)}
.compare-chip-box{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid var(--desk-ink);border-radius:2px;font:500 10px/1 var(--desk-mono)}
.compare-chip.is-on{background:var(--desk-ink);border-color:var(--desk-ink);color:var(--desk-paper)}
.compare-chip.is-on .compare-chip-box{border-color:var(--desk-paper)}
.compare-chip:disabled{cursor:not-allowed;color:var(--desk-muted);border-style:dashed;text-decoration:line-through}
.compare-chip:disabled .compare-chip-box{border-color:var(--desk-rule)}
@media (max-width:900px),(pointer:coarse){.compare-chip{min-height:44px}}
a.compare-off{font:400 11.5px/1.4 var(--desk-mono);color:var(--desk-blue)}
@media (max-width:900px),(pointer:coarse){a.compare-off{display:inline-flex;align-items:center;min-height:44px}}

/* ---- Context notes (text, never colour alone; quiet) --------------------------------- */
.compare-warnings{margin:4px 0 20px;padding:2px 0 2px 14px;border-left:2px solid var(--desk-rule)}
.compare-warn-h{margin:0 0 2px;font:600 12px/1.4 var(--desk-font);letter-spacing:.06em;text-transform:uppercase;color:var(--desk-muted)}
.compare-warnings ul{margin:0;padding:0;list-style:none;font:400 13.5px/1.6 var(--desk-font)}

/* ---- Rows: value first (D46) ------------------------------------------------------- */
.compare-side .v-section-body{display:flex;flex-direction:column}
.compare-row{display:flex;flex-direction:column;gap:12px;padding:22px 0 16px;border-bottom:1px solid var(--desk-rule);min-width:0}
.compare-row:first-child{padding-top:8px}
.compare-row-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.compare-figs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.compare-side-a,.compare-side-b{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.compare-ab{font:500 11px/1 var(--desk-mono);color:var(--desk-muted)}
.compare-fig-b .fig-value{color:var(--desk-muted)}
/* A side below the minimum isn't compared: its figures step back. */
.compare-figs.is-short .fig-value{color:var(--desk-muted)}
.compare-vs{font:500 13px/1 var(--desk-font);color:var(--desk-muted)}
.compare-row-title{margin:0;font:500 13.5px/1.45 var(--desk-font);color:var(--desk-muted)}
.compare-row-title a{color:var(--desk-muted);text-decoration:none;border-bottom:1px solid var(--desk-rule)}
.compare-row-title a:hover{color:var(--desk-ink);border-bottom-color:var(--desk-ink)}
/* a 44px hit area on touch without changing the row's layout */
@media (max-width:900px),(pointer:coarse){.compare-row-title a{position:relative}.compare-row-title a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}}
.compare-diff{color:var(--desk-ink);font-weight:600}
.compare-tail{margin:0;max-width:46ch;font:400 13px/1.5 var(--desk-font);color:var(--desk-muted)}
.compare-tail.is-big{color:var(--desk-ink)}
.compare-row-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;min-height:1.5em}
.compare-measured{font:400 11.5px/1.5 var(--desk-mono);color:var(--desk-muted)}
.compare-readout{flex:1 1 220px;text-align:right}
@container view (max-width:579px){.compare-readout{text-align:left}}
.compare-br{stroke-width:3;stroke-linecap:butt}
.compare-br.a{stroke:var(--v-series)}
.compare-br.b{stroke:var(--v-ref);stroke-width:1.5;stroke-dasharray:4 3}
.compare-brt{stroke-width:1.25}
.compare-brt.a{stroke:var(--v-series)}
.compare-brt.b{stroke:var(--v-ref)}
.compare-med{stroke:var(--v-ink);stroke-width:2.5}
@container view (min-width:900px){
  .compare-row{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.6fr);grid-template-areas:"text chart" "foot foot";column-gap:36px;row-gap:6px;align-items:start}
  .compare-row-text{grid-area:text;padding-top:2px}.compare-row .v-chart{grid-area:chart}.compare-row-foot{grid-area:foot}
}

/* ---- Fix pass: last-full-month note, skipped ids ------------------------------------ */
a.compare-inline{position:relative;color:var(--desk-blue);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
@media (max-width:900px),(pointer:coarse){a.compare-inline::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}}
.compare-skipped{margin:8px 0 0;padding-left:10px;border-left:3px solid var(--desk-ink)}


/* ==== ported from the prototype: views/system.css ==== */
/* Sign-in and system states (spec §3.9, §9) — builder E. */

/* ---- Shared sign-in card (base.css has .login-wrap/.login-card/.masthead) ------------ */
.system-login-form{display:flex;flex-direction:column;gap:14px}
.login-field{display:flex;flex-direction:column;gap:4px}
.login-field label{font:600 12px/1.5 var(--desk-font);color:var(--desk-muted)}
.login-field .input{width:100%}
.login-field .input:disabled{background:transparent;border-style:dashed;color:var(--desk-muted);cursor:not-allowed}
.system-login-msg{margin:0;padding:10px 12px;border-left:4px solid var(--desk-blue);background:var(--desk-soft);font:600 14px/1.45 var(--desk-font)}
.system-login-err{margin:0;font:600 13px/1.4 var(--desk-font);color:var(--desk-ink)}
.system-login-err:empty{display:none}
.system-login-submit{width:100%;min-height:40px}
@media (max-width:900px),(pointer:coarse){.system-login-submit{min-height:44px}}
.system-login-proto{margin:0;font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}

/* ---- .desk-message pages (offline cold start, 401 explainer) ------------------------ */
.system-message{margin:24px auto}
.system-msg-title:focus{outline:none}
.system-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.system-quote{margin:0 0 16px;padding:8px 12px;border-left:3px solid var(--desk-ink);background:var(--desk-raised);font:600 14px/1.5 var(--desk-font)}

/* ---- Loading and error demos: Today's own sections (V.todayView.build), so nothing moves (D41, D43) ---- */
/* Loading: each figure keeps its final box; its text sits behind a quiet skeleton block of the same size. */
.system-skel .fig{pointer-events:none}
.system-skel .fig-value,.system-skel .fig-unit,.system-skel .fig-extra,.system-skel .fig-label,.system-skel .v-usual,
.system-skel .fig-ex,.system-skel .today-callout>span{color:transparent !important;background:var(--hover);border-radius:2px;box-shadow:none;text-shadow:none}
.system-skel .fig-value{box-shadow:inset 0 0 0 1px var(--desk-rule)}
.system-skel .v-glyph,.system-skel .v-info,.system-skel .today-dot{visibility:hidden}
.system-skel .fig-value.v-mark{background:var(--hover)}
.system-skel .today-callout{box-shadow:inset 3px 0 var(--desk-rule)}
.system-skel>.v-section-head{position:relative}
.system-skel-hide{visibility:hidden}
/* what loads, laid over the head's right-hand slot: out of the flow, so no head grows or shrinks */
.system-skel-meta{position:absolute;right:0;bottom:0;margin:0;line-height:16px}
.system-skel-meta .v-skel-label{display:block;line-height:16px} /* never taller than the head's title, so no rule moves */

#view.is-today>.v-notice{margin:44px 0 0;max-width:80ch}

/* ---- Panel error, in place at its final size: Today so far's figures stay in the layout, hidden under it ---- */
.system-slot{position:relative}
.system-under{visibility:hidden}
.system-panel-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;margin:0;padding:8px 14px;box-sizing:border-box;border:1px dashed var(--desk-ink);border-radius:2px;background:repeating-linear-gradient(135deg,transparent 0 7px,var(--hover) 7px 8px);grid-column:1/-1}
.system-panel-err p{margin:0}
.system-err-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font:600 14px/1.4 var(--desk-font)}
.system-panel-err .system-err-sub{font:400 12px/1.4 var(--desk-font);color:var(--desk-muted)}
.system-err-glyph{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--desk-ink);border-radius:50%;font:700 11px/1 var(--desk-mono)}

/* Prototype note under the actions: set apart by space and a hairline (fix pass). */
.desk-message.system-message footer{margin:20px 0 0;padding-top:12px;border-top:1px solid var(--desk-rule)}