:root {
  --paper: #eef0ec;
  --surface: #fbfbf9;
  --surface-2: #e6e8e2;
  --surface-3: #dcdfd7;
  --ink: #1e2420;
  --ink-soft: #3a4139;
  --muted: #656e64;
  --line: #d3d6cd;
  --accent: #a35a2f;
  --accent-ink: #7c421f;
  --accent-tint: #f1e3d6;
  --up: #3f7245;
  --up-tint: #e2ecdf;
  --down: #ab4a41;
  --down-tint: #f3e3df;
  --input-bg: #ffffff;
  --input-border: #c7cbc1;
  --input-focus: #a35a2f;
  --shadow: 0 1px 2px rgba(30, 36, 32, 0.06), 0 10px 28px -18px rgba(30, 36, 32, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14170f;
    --surface: #1c2018;
    --surface-2: #262b21;
    --surface-3: #313629;
    --ink: #e9ebe3;
    --ink-soft: #cdd1c5;
    --muted: #97a08f;
    --line: #333a2d;
    --accent: #d68a54;
    --accent-ink: #eba876;
    --accent-tint: #2e2318;
    --up: #7bab7b;
    --up-tint: #1e2a1c;
    --down: #d17f76;
    --down-tint: #2c1e1a;
    --input-bg: #20241c;
    --input-border: #3a4132;
    --input-focus: #d68a54;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --paper: #14170f;
  --surface: #1c2018;
  --surface-2: #262b21;
  --surface-3: #313629;
  --ink: #e9ebe3;
  --ink-soft: #cdd1c5;
  --muted: #97a08f;
  --line: #333a2d;
  --accent: #d68a54;
  --accent-ink: #eba876;
  --accent-tint: #2e2318;
  --up: #7bab7b;
  --up-tint: #1e2a1c;
  --down: #d17f76;
  --down-tint: #2c1e1a;
  --input-bg: #20241c;
  --input-border: #3a4132;
  --input-focus: #d68a54;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 20px 100px;
}

@media (max-width: 560px) {
  .shell { padding: 24px 14px 72px; }
}

header.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7188rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.brand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-icon {
  width: 52px;
  height: 52px;
  border-radius: 22%;
  flex: none;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* h1, .brand-subtitle, and .header-nav-btn (About/Property/Preference/Help
   — labeled About/How-to/Settings at the time of the direction quoted
   below, before a later rename) are the app's name and identity, not
   body content — they stay in px, not rem,
   deliberately exempt from the text-size switcher (see "Text size
   switcher" below): the brand and its primary navigation should read
   identically no matter which text size a reader has picked, per direct
   architect direction ("make sure About, How-to, name and descripton of
   the brand do not change when differnt font sizes are picked"). */
h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 36px);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
  gap: 10px;
  margin-left: auto;
}

/* ---- About/How To, relocated here (left of the theme switch) from the
   property tab bar — see "Header" in .claude/specs/ui-navigation-and-
   theme.md. Deliberately *not* .tab-btn: that class's border-bottom
   underline-on-active styling only makes sense sitting on .tabs's own
   shared border; here they're plain header buttons, active state shown
   via color/weight instead of an underline. No role="tab"/aria-selected
   either, for the same reason — they're no longer DOM children of
   #propertyTabBar's role="tablist", so claiming the tab role would be
   invalid ARIA (an orphaned tab outside its tablist); aria-controls
   alone is still valid and sufficient here. Fixed 44px height (not just
   padding) so it lines up exactly with .theme-toggle-btn and
   .text-size-switcher next to it in .top-actions — all four header
   controls share the same 44px height on purpose, per direct architect
   direction to align their sizes. font-size is px, not rem: see the
   comment on h1/.brand-subtitle above — the same "brand and primary nav
   don't move" exemption applies here. ---- */
.header-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 6px;
  cursor: pointer;
  touch-action: manipulation;
}

.header-nav-btn:hover { color: var(--ink-soft); }
.header-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.header-nav-btn.active { color: var(--accent-ink); font-weight: 600; }

/* ---- Profile: an icon-only .header-nav-btn (person glyph) rather than a
   text label — see "Header" in .claude/specs/ui-navigation-and-theme.md.
   Square touch target instead of the text buttons' horizontal padding;
   aria-label/title on the button itself carry the accessible name since
   there's no visible text for it. ---- */
.header-nav-btn--icon { width: 44px; padding: 0; }

/* ---- Theme toggle: a switch, not an icon button, with both the sun and
   moon showing at once — per direct architect direction ("show both
   icons in the light dark toggle"), replacing an earlier version where
   only the current mode's icon rendered (swapped inside the thumb).
   The outer button is a 44px-tall touch target, matching
   .header-nav-btn/.text-size-switcher next to it (see their own comments
   for the alignment rationale); its width follows the track's own
   46px, wider than it is tall since the track's shape drives it here.
   Markup (.theme-switch-track/.theme-switch-icon--sun/--moon/
   .theme-switch-thumb) is built once by js/theme.js; the sun sits fixed
   at the track's left end, the moon fixed at the right end, and only the
   thumb slides between them via transform — .theme-toggle-btn.is-dark
   toggles both the slide and which icon currently reads as "active".
   The icons sit in a higher stacking order than the thumb, so whichever
   one the thumb currently rests under is still visible, drawn in
   --surface (light-on-thumb, the same convention the old single
   thumb-icon used) instead of getting covered up; the other, inactive
   icon reads in --muted against the plain track background. ---- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.theme-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }

.theme-switch-track {
  position: relative;
  width: 46px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--input-border);
  transition: border-color 0.15s ease;
}

.theme-toggle-btn:hover .theme-switch-track { border-color: var(--ink-soft); }

.theme-switch-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  color: var(--muted);
  transition: color 0.18s ease;
}

.theme-switch-icon--sun { left: 4px; }
.theme-switch-icon--moon { right: 4px; }

.theme-toggle-btn:not(.is-dark) .theme-switch-icon--sun,
.theme-toggle-btn.is-dark .theme-switch-icon--moon {
  color: var(--surface);
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  z-index: 1;
  transition: transform 0.18s ease;
}

.theme-toggle-btn.is-dark .theme-switch-thumb { transform: translateX(24px); }

/* ---- Text size switcher: three "A" buttons at increasing font-size,
   sitting right of the theme switch. Changes the *root* font-size
   (js/text-size.js sets [data-text-size] on <html>; the rules at the
   bottom of this block scale html's own font-size), which every other
   font-size in this file inherits proportionally since they're declared
   in rem, not px — text actually grows/shrinks, nothing zooms. Non-text
   dimensions (padding, borders, icon/button box sizes, chart SVG
   viewBoxes) are still in px throughout the stylesheet and stay exactly
   the same size at any text-size setting — see "Text size switcher" in
   .claude/specs/ui-navigation-and-theme.md for the full rationale
   (an earlier version used `zoom` on .shell instead, which scaled
   everything including layout, not just text — corrected on explicit
   architect direction: "i do not want them to zoom in or out. i want
   them to actually increase the font size... keeping the zoom level at
   the same level"). Several exceptions stay in absolute px rather than
   rem, deliberately not scaling: the text-size buttons' own three
   reference sizes just below (`.text-size-btn--md/lg/xl`, so all three
   stay visually distinct at every setting instead of converging toward
   each other), the ≤640px mobile input/select font-size floor (still
   16px — see that rule's own comment — since that value exists
   specifically to stay above iOS Safari's zoom-on-focus threshold), and
   — per direct architect direction — `h1`, `.brand-subtitle`, and
   `.header-nav-btn` (see their own comments above): the brand's name,
   tagline, and primary nav (About/Property/Preference/Help) read the same
   at any text size. Medium (100%, no [data-text-size] rule needed — the browser's
   own default root size) is the smallest of the three now; there is no
   smaller option — see "Text size switcher" in
   .claude/specs/ui-navigation-and-theme.md for why the smallest tier was
   dropped. Large/XLarge scale the root to 150%/200% (bumped from an
   earlier, more conservative 115%/130% on direct architect direction),
   so the jump between tiers reads clearly rather than subtly.
   No border or background fill on the switcher/buttons — an earlier
   version drew a bordered `--surface` pill around the three with an
   `--accent-tint` fill behind whichever was selected; removed per direct
   architect direction ("remove the border and filling for A button
   glyphs"), replaced with a `.tab-btn`-style orange `border-bottom`
   under the selected glyph only (`.text-size-btn[aria-pressed="true"]`),
   the same underline convention the property/About/How-to tabs already
   use for their own active state. ---- */
.text-size-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 3px;
  box-sizing: border-box;
}

.text-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  line-height: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

.text-size-btn--md { font-size: 10px; }
.text-size-btn--lg { font-size: 14px; }
.text-size-btn--xl { font-size: 18px; }

.text-size-btn:hover { color: var(--ink-soft); }
.text-size-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-size-btn[aria-pressed="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }

html[data-text-size="large"] { font-size: 150%; }
html[data-text-size="xlarge"] { font-size: 200%; }

button.reset-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}

button.reset-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
button.reset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Settings tab's two quick-configuration buttons reuse .reset-btn but also
   carry aria-pressed (see js/settings.js) to show which one, if any,
   matches the current configuration exactly — same active-state color
   convention as .text-size-btn[aria-pressed="true"] above. */
button.reset-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.tab-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 13px 10px;
  margin: 0 12px -1px 0;
  cursor: pointer;
  touch-action: manipulation;
}

.tab-btn:hover { color: var(--ink-soft); }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tab-btn.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.tab-panel[hidden] { display: none; }
.property-workspace[hidden] { display: none; }

/* ---- Property tab bar: just the property tabs now — About/How To moved
   to the header, see .header-nav-btn below. ---- */
#propertyTabBar { flex-wrap: wrap; row-gap: 8px; }
.tab-group { display: flex; flex-wrap: wrap; row-gap: 8px; gap: 4px; }

/* ---- Sub-tabs (Dashboard / Conditions / Terms nested under a property) ---- */
.tabs--sub {
  margin-bottom: 18px;
}

.tabs--sub .tab-btn {
  font-size: 0.75rem;
  padding: 11px 8px;
}

/* ---- Add-property control, appended to the property tab bar ---- */
.tab-btn--add {
  border: 1px dashed var(--input-border);
  border-radius: 8px;
  color: var(--muted);
  margin: 0 12px 0 0;
  padding: 11px 12px;
  touch-action: manipulation;
}

.tab-btn--add:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---- Property name row, atop each property's workspace ---- */

/* Kept in the DOM (not deleted) for screen readers — a placeholder or a
   select's first option isn't a substitute accessible name, it disappears
   once a value is entered/chosen. Visually removed per direct architect
   direction ("remove property name, city and neighbourhood lables. put
   them inside of the fields") — the field's placeholder/first-option text
   carries the visual label instead. Standard clip-based off-screen
   pattern, not display:none, so it's still announced. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.property-name-row .property-name-input {
  min-width: 220px;
  flex: 1 1 220px;
}

.property-name-row .property-other-input {
  width: auto;
  min-width: 160px;
}

.property-name-row .remove-property-btn {
  margin-left: auto;
}

/* ---- Compare tab ---- */
.compare-card { overflow-x: auto; }

.compare-table-wrap { overflow-x: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8438rem;
  margin-top: 12px;
}

.compare-table th, .compare-table td {
  text-align: right;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.compare-table th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: normal;
}

.compare-table thead th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7812rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
}

.compare-table thead th:first-child { text-align: left; }

.compare-table td.pos { color: var(--up); }
.compare-table td.neg { color: var(--down); }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.control-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.control-bar label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.control-bar select {
  width: auto;
  min-width: 150px;
}

.control-note {
  font-size: 0.75rem;
  color: var(--muted);
}

.control-bar .reset-btn {
  margin-left: auto;
}

/* ---- Accordion sections ---- */
details.section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}

details.section > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  touch-action: manipulation;
}

details.section > summary::-webkit-details-marker { display: none; }

.summary-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.summary-title .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7188rem;
  color: var(--muted);
}

.summary-title h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.summary-sub {
  font-size: 0.7812rem;
  color: var(--muted);
  font-weight: 400;
}

.chev {
  width: 18px; height: 18px;
  flex: none;
  color: var(--muted);
  transition: transform 0.15s ease;
}

details.section[open] > summary .chev { transform: rotate(90deg); }

.section-body {
  padding: 4px 20px 22px;
  border-top: 1px solid var(--line);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
  margin-top: 16px;
}

.subgroup {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
}

.subgroup-label {
  grid-column: 1 / -1;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

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

.field label {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.field .hint {
  font-size: 0.7188rem;
  color: var(--muted);
  line-height: 1.4;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap .prefix, .input-wrap .suffix {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
  color: var(--muted);
  pointer-events: none;
}

.input-wrap .prefix { left: 11px; }
.input-wrap .suffix { right: 11px; }

input[type="number"], input[type="text"], input[type="email"], select {
  width: 100%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8438rem;
  font-variant-numeric: tabular-nums;
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 9px 11px;
  appearance: none;
}

select {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.8438rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.input-wrap.has-prefix input { padding-left: 22px; }
.input-wrap.has-suffix input { padding-right: 30px; }

input:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 22%, transparent);
}

/* .toggle-row is itself the <label> (the checkbox is its descendant, so
   the whole row — not just the 18px checkbox square — is one click/tap
   target; a plain wrapping <div> with a separate inner <label> used to
   leave the row's own padding/background non-clickable). */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 11px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.toggle-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none;
}

.field.field-inactive { opacity: 0.5; }
.field.field-inactive .hint { color: var(--muted); }

input:disabled, select:disabled {
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--muted);
}

.band-note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: -2px;
}

/* ---- Summary panel ---- */
.summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.summary-card h3 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.kpi { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.kpi:last-child { margin-bottom: 0; }

.kpi .kpi-label { font-size: 0.7812rem; color: var(--muted); }

.kpi .kpi-value {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kpi .kpi-value.pos { color: var(--up); }
.kpi .kpi-value.neg { color: var(--down); }
.kpi .kpi-value.compact { font-size: 1.125rem; }

.kpi .kpi-note { font-size: 0.7188rem; color: var(--muted); margin-top: 1px; }

.divider { border: none; border-top: 1px solid var(--line); margin: 4px 0 14px; }
.divider-lg { margin-top: 20px; }

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-grid .kpi .kpi-value { font-size: 1.125rem; }

/* ---- Portfolio tab: one clickable card per property, each a real
   <button> styled like .summary-card so the whole card — not just a
   nested link — opens that property's own Dashboard (see js/app.js's
   renderPortfolio()/openPropertyDashboard()). .summary-card already
   supplies background/border/radius/shadow/padding; only the
   button-specific resets it doesn't cover are added here. ---- */
.portfolio-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.portfolio-card:hover { border-color: var(--accent); }
.portfolio-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.portfolio-card .summary-sub { margin: 0 0 14px; }

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

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem; padding: 3px 8px; border-radius: 999px; margin-top: 4px; width: fit-content;
}
.pill.ok { color: var(--up); background: var(--up-tint); }
.pill.warn { color: var(--down); background: var(--down-tint); }
.pill.neutral { color: var(--muted); background: var(--surface-2); }

/* ---- Flow card (full width, below the two-column layout) ---- */
.flow-card { margin-top: 16px; }

.sankey-wrap { margin-top: 14px; position: relative; overflow-x: auto; overflow-y: hidden; }

svg#sankey { width: 100%; min-width: 640px; height: auto; display: block; }

.sankey-fallback {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
  padding: 60px 12px;
  margin: 0;
}

.sankey-ribbon { stroke: none; transition: opacity 0.12s ease; }
.sankey-ribbon.sankey-trunk { fill: var(--accent); opacity: 0.28; }
.sankey-ribbon.sankey-leak { fill: var(--down); opacity: 0.22; }
.sankey-ribbon:hover { opacity: 0.5; }

.sankey-node { stroke: none; }
.sankey-node.trunk { fill: var(--accent); }
.sankey-node.leak { fill: var(--down); }
.sankey-node.cfbt-pos { fill: var(--up); }
.sankey-node.cfbt-neg { fill: var(--down); }

.sankey-label {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  fill: var(--ink-soft);
}

.sankey-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  fill: var(--muted);
}

.sankey-warn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6562rem;
  fill: var(--down);
}

/* ---- Waterfall ---- */
.wf-subhead {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6562rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.waterfall { display: flex; flex-direction: column; gap: 3px; }

.wf-row { display: grid; grid-template-columns: 168px 1fr 108px; align-items: center; gap: 10px; padding: 5px 0; }
.wf-row.subtotal { padding-top: 9px; margin-top: 3px; border-top: 1px solid var(--line); font-weight: 600; }

.wf-label { font-size: 0.7812rem; color: var(--ink-soft); }
.wf-row.subtotal .wf-label { color: var(--ink); }

.wf-track { position: relative; height: 15px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.wf-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.wf-fill.revenue { background: var(--ink-soft); }
.wf-fill.deduction { background: var(--down); opacity: 0.72; }
.wf-fill.up { background: var(--up); opacity: 0.72; }
.wf-fill.subtotal-fill { background: var(--accent); }
.wf-fill.cashflow-pos { background: var(--up); }
.wf-fill.cashflow-neg { background: var(--down); }

.wf-value { font-family: "IBM Plex Mono", monospace; font-size: 0.7812rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .wf-row { grid-template-columns: 118px 1fr 84px; }
  .wf-label, .wf-value { font-size: 0.7188rem; }
}

@media (max-width: 420px) {
  .wf-row { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 5px; }
  .wf-label { order: 1; flex: 1 1 auto; }
  .wf-value { order: 2; flex: 0 0 auto; }
  .wf-track { order: 3; flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .summary-card { padding: 16px; }
  details.section > summary { padding: 14px 16px; }
  .section-body { padding: 4px 16px 18px; }
  /* Horizontal padding only, not vertical — this used to shrink the
     button's whole tap target on exactly the narrow/touch screens where
     a bigger one matters most; saving row width should never cost touch
     height. */
  button.reset-btn { padding: 11px 10px; }

  /* iOS Safari auto-zooms the whole page on focusing any input/select
     whose font-size is under 16px — jarring on a form this dense, and
     the #1 mobile-specific bug an input this size can have. 13.5px
     (the desktop density) is comfortably below that threshold, so mobile
     gets its own 16px floor here rather than changing the desktop scale
     documented in brand-guide.md. Padding grows a little too, so the
     bigger text doesn't feel cramped and the field is a properly sized
     touch target. */
  input[type="number"], input[type="text"], input[type="email"], select {
    font-size: 16px;
    padding: 11px 11px;
  }
  .input-wrap.has-prefix input { padding-left: 26px; }
  .input-wrap.has-suffix input, select { padding-right: 34px; }
  .input-wrap .prefix, .input-wrap .suffix { font-size: 15px; }
}

/* ---- Growth card (market value vs. mortgage balance) ---- */
.growth-card { margin-top: 16px; }

.chart-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
}

/* Sits directly below the chart's own <svg>, so it reads as "the x-axis's
   own slider" rather than a separate control — see the `--wide`/`--narrow`
   inset rule below, which lines its *track* up with the plot area (not the
   full card width) so the two visually align. */
.chart-zoom-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.chart-zoom-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7188rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Dual-handle range slider: two overlapping native <input type="range">
   elements, stacked in the same box. Each one's track is invisible and the
   whole input ignores pointer events except its own thumb, so both handles
   stay independently draggable without any drag-tracking JS — a standard,
   dependency-free technique for a min/max slider out of native inputs. */
.range-slider {
  position: relative;
  height: 32px;
}

/* The single visible track line, drawn once on the wrapper rather than by
   either <input>'s own ::-webkit-slider-runnable-track/::-moz-range-track
   (both set fully transparent below). Each input's own track used to paint
   an opaque bar spanning its *entire* width regardless of the thumb's
   position, and since the two inputs stack with no z-index, the later one
   in the DOM painted its full-width track directly over the earlier
   input's thumb — the min-handle circle sitting visibly "behind the line."
   A single non-interactive track, painted before both inputs, fixes that:
   both thumbs (the only opaque parts either input still paints) are always
   on top of it. */
.range-slider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  background: var(--line);
  border-radius: 3px;
  pointer-events: none;
}

/* Insets the slider's *track* to land under the chart's own plot area, not
   the full <svg> width — matching each chart's MARGIN.left/right as a
   percentage of its viewBox (percentage margins resolve against the
   container's width, so this stays aligned as the chart scales). Values
   are computed from js/equity-chart.js / js/capex-chart.js's own MARGIN
   constants; if either changes, these need to change with it. */
/* min-width scales the same plot-area fraction off each chart's own SVG
   min-width (460px / 640px — see svg#equityChart etc. below), so the
   slider still lines up with the x-axis even when a narrow viewport
   forces the chart into its horizontal-scroll mode. */
.range-slider--wide { margin-left: 11%; margin-right: 3.334%; min-width: 394px; }     /* equity/flow charts: viewBox 600×300, MARGIN {left:66, right:20} */
.range-slider--narrow { margin-left: 7.292%; margin-right: 2.084%; min-width: 580px; } /* CapEx chart: viewBox 960×300, MARGIN {left:70, right:20} */

.range-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.range-slider input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 6px;
  background: transparent;
}

.range-slider input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
}

/* 26px — a real touch target (vs. the previous 14px, easy to miss with a
   fingertip) — margin-top centers it on the (now invisible) 6px native
   track: (trackHeight - thumbHeight) / 2 = (6 - 26) / 2 = -10px. */
.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.range-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.range-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

.chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 0.7812rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.chart-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.chart-toggle .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.chart-toggle:has(input:not(:checked)) { color: var(--muted); }
.chart-toggle:has(input:not(:checked)) .swatch { opacity: 0.35; }

.sw-value { background: var(--accent); }
.sw-balance { background: var(--ink-soft); }
.sw-equity { background: var(--ink); }
.sw-revenue-area { background: var(--up); }
.sw-expense-area { background: var(--down); }
.sw-inflow { background: var(--up); }
.sw-outflow { background: var(--down); }
.sw-interest { background: var(--down); }
.sw-principal { background: var(--up); }
/* Shared by any checkbox whose chart series is colored dynamically by
   sign (Net Income/Loss, Net Cash Flow) rather than one fixed hue — a
   neutral ink swatch stands in since the swatch itself can't show both
   colors at once. */
.sw-signed { background: var(--ink); }

.growth-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  margin-top: 14px;
  align-items: start;
}

@media (max-width: 700px) {
  .growth-layout { grid-template-columns: 1fr; }
}

.growth-chart-wrap { position: relative; overflow-x: auto; overflow-y: hidden; }

svg#equityChart, svg#flowChart { width: 100%; min-width: 460px; height: auto; display: block; }

.growth-stats { display: flex; flex-direction: column; gap: 16px; }
.growth-stats-group .kpi { margin-bottom: 10px; }
.growth-stats-group .kpi:last-child { margin-bottom: 0; }

.growth-stats-note {
  font-size: 0.7188rem;
  color: var(--muted);
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.eq-grid { stroke: var(--line); stroke-width: 1; }
.eq-zero-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }

.eq-axis-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6562rem;
  fill: var(--muted);
}

.eq-area { fill: var(--accent-tint); opacity: 0.6; stroke: none; }

.eq-line { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.eq-line-value { stroke: var(--accent); }
.eq-line-balance { stroke: var(--ink-soft); stroke-dasharray: 5 4; }
.eq-line-equity { stroke: var(--ink); stroke-width: 2.5; }
.eq-line-inflow { stroke: var(--up); }
.eq-line-outflow { stroke: var(--down); }
.eq-dot { stroke: var(--surface); stroke-width: 1.5; }
.eq-dot-value { fill: var(--accent); }
.eq-dot-balance { fill: var(--ink-soft); }
.eq-dot-equity { fill: var(--ink); }
.eq-dot-inflow { fill: var(--up); }
.eq-dot-outflow { fill: var(--down); }

/* ---- Revenue & Expenses stacked-area chart ---- */
/* Every layer in a stack now shares one color identity — revenue-family
   green, expense-family red — rather than each of the fourteen layers
   getting its own hue: individual layers are told apart by their checkbox
   label and hover tooltip, not by color, and a reader comparing this
   chart to the KPI cards' pos/neg green-vs-red convention gets the same
   read here for free. Fill uses the *tint* step of the hue (already the
   pale, "soft wash" version of --up/--down used elsewhere for pill
   backgrounds); the boundary stroke uses the saturated base step of the
   *same* hue — fill and line are two tones of one color, not two
   different colors, and the line is thin (1px) so it reads as a crisp
   spacer between segments, not a bold outline. This replaced an earlier
   per-category ordinal ramp (nine expense shades, plus separate hues for
   vacancy/tax-return/interest/tax) and a constant-black separator stroke
   — see .claude/requirements/summary-and-visualization.md's Refinement (19). */
.eq-area-fill { stroke-width: 1; stroke-linejoin: round; }
.eq-area-revenue-fill { fill: var(--up-tint); stroke: var(--up); }
.eq-area-expense-fill { fill: var(--down-tint); stroke: var(--down); }

/* Shared by both charts with a second, independently-scaled bar
   sub-panel below their main one: the Revenue & Expenses chart's Net
   Income/Loss panel and the Cash Flow chart's Net Cash Flow panel. This
   is the panel's section-header caption, sitting just above its own mini
   y-axis — see drawBarSubPanel()'s docstring in js/equity-chart.js for
   why a separate panel instead of sharing the main panel's scale or a
   second axis on the same plot. */
.eq-subpanel-label { font-weight: 600; letter-spacing: 0.05em; }

.eq-bar { opacity: 0.75; }
.eq-bar-netincome-pos { fill: var(--up); opacity: 0.9; }
.eq-bar-netincome-neg { fill: var(--down); opacity: 0.9; }
.eq-bar-flow-pos { fill: var(--up); opacity: 0.9; }
.eq-bar-flow-neg { fill: var(--down); opacity: 0.9; }

/* ---- Mortgage Payment stacked bar chart ---- */
/* Interest is a pure cost (red, like any other expense); principal is the
   equity-building portion of the payment (green, like any other positive
   figure) — reusing --down/--up rather than the chart's own dedicated
   hues, the same "identity via label/position, not a unique color" choice
   already made for the Revenue & Expenses chart's layers. */
.eq-bar-interest { fill: var(--down); }
.eq-bar-principal { fill: var(--up); }

/* ---- CapEx reserve bar chart ---- */
.capex-card { margin-top: 16px; }

.capex-chart-wrap { position: relative; overflow-x: auto; overflow-y: hidden; margin-top: 14px; }

svg#capexChart { width: 100%; min-width: 640px; height: auto; display: block; }

.capex-note {
  font-size: 0.7188rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 10px;
}

.cx-grid { stroke: var(--line); stroke-width: 1; }

.cx-axis-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6562rem;
  fill: var(--muted);
}

.cx-axis-label-spent { fill: var(--down); font-weight: 600; }

.cx-legend-label {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.6875rem;
  fill: var(--ink-soft);
}

.cx-bar { stroke: none; }
.cx-bar-normal { fill: var(--up); opacity: 0.55; }
.cx-bar-spent { fill: var(--down); }

/* ---- Cash Flow Timing chart (weekly bars + running balance sub-panel) ---- */
.cashflow-timing-chart-wrap { position: relative; overflow-x: auto; overflow-y: hidden; margin-top: 14px; }

svg#cashFlowTimingChart { width: 100%; min-width: 640px; height: auto; display: block; }

.cft-grid { stroke: var(--line); stroke-width: 1; }
.cft-zero-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.cft-month-line { stroke: var(--line); stroke-width: 1; opacity: 0.4; }

.cft-axis-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6562rem;
  fill: var(--muted);
}

.cft-subpanel-label { font-weight: 600; letter-spacing: 0.05em; }

.cft-legend-label {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.6875rem;
  fill: var(--ink-soft);
}

.cft-bar { stroke: none; opacity: 0.85; }
.cft-bar-inflow { fill: var(--up); }
.cft-bar-outflow { fill: var(--down); }

.cft-line-balance { stroke: var(--ink); stroke-width: 2; }

/* ---- About / How To tabs ---- */
.about-intro { margin-bottom: 16px; }
.about-intro p { margin: 8px 0 0; color: var(--ink-soft); }
.about-intro p:first-of-type { margin-top: 12px; }

/* ---- About tab: "What you get" value props + "See it in action" gallery.
   Both are plain (non-collapsible) .summary-card containers, deliberately
   not details.section accordions — this is the app's sales pitch, and an
   accordion would hide it by default instead of leading with it. ---- */
.value-props-card, .about-gallery-card { margin-bottom: 16px; }
.value-props-card:last-child, .about-gallery-card:last-child { margin-bottom: 0; }

.value-props-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.value-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.value-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.value-icon svg { width: 20px; height: 20px; }

.value-card h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.value-card h3 .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted);
  flex: none;
}

.value-card p { margin: 0; color: var(--ink-soft); font-size: 0.8438rem; line-height: 1.5; }

.about-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.glossary-group { margin-bottom: 20px; }
.glossary-group:last-child { margin-bottom: 0; }

.glossary-group-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.glossary-list { margin: 0; display: grid; row-gap: 10px; }
.glossary-list dt { font-weight: 600; color: var(--ink); }
.glossary-list dd { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.8438rem; line-height: 1.5; }

.reference-table-wrap { overflow-x: auto; margin-top: 12px; }

.reference-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8438rem;
}

.reference-table th, .reference-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.reference-table thead th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7812rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
}

.flow-steps { margin: 12px 0 0; padding-left: 22px; display: grid; row-gap: 8px; }
.flow-steps li { color: var(--ink-soft); font-size: 0.8438rem; line-height: 1.5; }
.flow-steps li strong { color: var(--ink); }

.howto-item .section-body ol { margin: 0 0 16px; padding-left: 22px; display: grid; row-gap: 8px; }
.howto-item .section-body ol:last-child { margin-bottom: 0; }
.howto-item .section-body li { color: var(--ink-soft); font-size: 0.8438rem; line-height: 1.5; }
.howto-item .section-body li strong { color: var(--ink); }
.howto-item .section-body code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.howto-screenshot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

.howto-screenshot img { display: block; width: 100%; height: auto; }

.howto-screenshot figcaption {
  padding: 8px 14px;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.page-footer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.disclaimer {
  flex: 1 1 320px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 78ch;
}

/* ---- Greeting dialog (js/profile.js): a native <dialog>, themed to match
   the rest of the app rather than the browser's own default dialog
   chrome. showModal() centers and top-layers it automatically — no
   custom positioning needed here, just appearance. ---- */
dialog#greetingModal {
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 26px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

dialog#greetingModal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog#greetingModal h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px;
}

dialog#greetingModal .field-grid { margin-top: 18px; }

.greeting-actions {
  margin-top: 20px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  dialog#greetingModal { padding: 18px 16px; }
}

/* ---- Remove-property confirmation dialog (js/app.js): same themed
   native-<dialog> treatment as #greetingModal above, just narrower —
   a short yes/no prompt rather than a form. Kept as its own selector
   rather than sharing dialog#greetingModal's rule so each dialog's width
   can be tuned independently for its own content. ---- */
dialog#confirmRemoveModal {
  width: min(400px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

dialog#confirmRemoveModal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog#confirmRemoveModal h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 8px;
}

dialog#confirmRemoveModal #confirmRemoveMessage { margin: 0; }

.confirm-modal-actions {
  margin-top: 20px;
  justify-content: flex-end;
}

/* A destructive variant of .reset-btn — reuses the app's existing
   negative/warning tokens (same ones .kpi-value.neg and .pill.warn use)
   rather than introducing a new color, so "this is the dangerous one"
   reads consistently with every other red-toned indicator in the app. */
button.reset-btn--danger {
  border-color: var(--down);
  color: var(--down);
}

button.reset-btn--danger:hover {
  background: var(--down-tint);
  border-color: var(--down);
  color: var(--down);
}

@media (max-width: 640px) {
  dialog#confirmRemoveModal { padding: 18px 16px; }
}