/*
 * Buttons — components.
 * Depends on the tokens and keyframes in base.css.
 */

/* ================================================================== *
 * Buttons and form controls
 * ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap-min);
  padding: var(--s3) var(--s5);
  border: 2px solid transparent;
  border-radius: var(--r-chip);
  background: var(--paper-sunk);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: pointer;
  user-select: none;
  transition: transform .13s var(--ease-spring), filter .13s ease, background .13s ease;
}

.btn:active { transform: scale(.955); filter: brightness(.94); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: var(--on-color); }
.btn-ghost   { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.btn-danger  { background: transparent; border-color: var(--line-strong); color: var(--danger); }

.btn-big {
  width: 100%;
  min-height: 54px;
  border-radius: var(--r-button);
  font-size: 16px;
}

#load-more {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: 50%;
  background: var(--paper-sunk);
  color: var(--ink);
  cursor: pointer;
  transition: transform .13s var(--ease-spring), filter .13s ease;
}
.icon-btn:active { transform: scale(.92); filter: brightness(.94); }
.icon-btn svg { width: 19px; height: 19px; }

.field { display: flex; flex-direction: column; gap: var(--s1); }

.field-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

.field-hint { font-size: var(--fs-xs); color: var(--faint); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="time"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 16px;   /* 16px stops iOS Safari zooming on focus */
}

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

.check-field {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.check-field input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }

.msg {
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.msg-error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.msg-ok    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }

/* ================================================================== *
 * Auth pages
 * ================================================================== */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s6) var(--s5);
}

.auth-wrap { width: 100%; max-width: 380px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s7);
}
.auth-brand .mark {
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--accent);
}
.auth-brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -.03em;
}

.auth-title { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.04em; line-height: 1; }
.auth-sub   { color: var(--muted); font-size: var(--fs-md); margin: var(--s3) 0 var(--s6); }

.auth-form { display: flex; flex-direction: column; gap: var(--s4); }

.auth-alt {
  text-align: center;
  margin-top: var(--s5);
  font-size: var(--fs-sm);
  color: var(--muted);
}

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

.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: calc(var(--s5) + var(--safe-t)) var(--s5) var(--s3);
  background: var(--paper);
}

.app-header h1 { font-size: var(--fs-2xl); flex-grow: 1; min-width: 0; }
.app-header .eyebrow { font-size: var(--fs-sm); color: var(--muted); }
.app-header .header-actions { display: flex; gap: var(--s2); flex-shrink: 0; }

.app-main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s5);
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--s7));
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  gap: var(--s1);
  padding: var(--s2);
  background: var(--paper);
  border-top: 2px solid var(--line);
}

.bottom-nav a {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3) 0;
  min-height: var(--tap-min);
  border-radius: var(--r-chip);
  color: var(--faint);
  text-decoration: none;
}
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav a.active { background: var(--ink); color: var(--paper); }
.bottom-nav a svg { width: 24px; height: 24px; flex-shrink: 0; }

.bottom-nav .nav-fab {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: 0 var(--s2);
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-color);
  cursor: pointer;
  transition: transform .13s var(--ease-spring), filter .13s ease;
}
.bottom-nav .nav-fab:active { transform: scale(.92); filter: brightness(.94); }
.bottom-nav .nav-fab svg { width: 24px; height: 24px; flex-shrink: 0; }

/* ---- day strip ---- */
.day-strip {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--paper-sunk);
  border-radius: var(--r-chip);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  font-size: var(--fs-md);
}
.day-strip .spacer { flex-grow: 1; }
.day-strip .aside { color: var(--muted); font-size: var(--fs-sm); }

/* ================================================================== *
 * Category cards (home)
 * ================================================================== */

.category-grid { display: flex; flex-direction: column; gap: var(--s3); }

.category-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s4);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  animation: row-in .36s var(--ease-out) both;
}
.category-card:hover { text-decoration: none; }

.category-card .cat-head { display: flex; align-items: center; gap: var(--s3); }

.category-card .cat-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}

.category-card .cat-body { flex-grow: 1; min-width: 0; }

.category-card .cat-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.category-card .cat-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* Every line in the card is its own block element. Nothing here depends on a
   newline character or on how an inline span collapses whitespace. */
.category-card .cat-sub-today,
.category-card .cat-sub-last {
  display: block;
}

/* Today's figure is the headline; the time since the last tap is context. */
.category-card .cat-sub-today { color: var(--ink-soft); font-weight: 500; }
.category-card .cat-sub-last  { color: var(--muted); }

.category-card .cat-chev { color: var(--faint); flex-shrink: 0; }

/* Quick-tap chips: a set of three or fewer buttons is tappable
   straight from the home screen, which is the one-tap path. */
.quick-taps { display: flex; gap: var(--s2); margin-top: var(--s3); }

.quick-tap {
  flex-grow: 1;
  min-height: 46px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-color);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: transform .13s var(--ease-spring), filter .13s ease;
}
.quick-tap:active { transform: scale(.94); filter: brightness(.93); }

/* ================================================================== *
 * Tap grid — the signature screen
 * ================================================================== */

.tap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.tap-grid.one-up { grid-template-columns: minmax(0, 1fr); }

.tap-btn {
  position: relative;
  min-height: var(--btn-h);
  padding: var(--s4) var(--s5);
  border: none;
  border-radius: var(--r-button);
  background: var(--accent);
  color: var(--on-color);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: rise .38s var(--ease-out) both;
  transition: transform .13s var(--ease-spring), filter .13s ease;
}
.tap-btn:active { transform: scale(.945); filter: brightness(.93); }

.tap-btn .tap-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.035em;
}

.tap-btn .tap-sub {
  font-size: var(--fs-sm);
  margin-top: 5px;
  color: var(--on-color-dim);
}

.tap-btn .tap-count {
  position: absolute;
  top: var(--s3);
  right: var(--s4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--on-color-dim);
}

/* Amber is light enough that white text on it fails contrast. */
.tap-btn.on-light,
.quick-tap.on-light { color: var(--on-amber); }
.tap-btn.on-light .tap-sub,
.tap-btn.on-light .tap-count { color: var(--on-amber-dim); }

.secondary-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: 48px;
  margin-top: var(--s4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.secondary-action:active { transform: scale(.98); }

/* ================================================================== *
 * Timeline
 * ================================================================== */

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

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

.timeline-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  animation: row-in .28s var(--ease-out) both;
}

.timeline-row .tl-chip {
  padding: 4px 10px;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: var(--on-color);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.timeline-row .tl-chip.on-light { color: var(--on-amber); }

.timeline-row .tl-time { flex-grow: 1; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.timeline-row .tl-who  { color: var(--faint); font-size: var(--fs-sm); }

/* A tap logged offline and still waiting to sync. */
.timeline-row .tl-pending {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-amber);
  flex-shrink: 0;
}

.queue-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 12px;
  border-radius: var(--r-chip);
  background: var(--c-amber);
  color: var(--on-amber);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ================================================================== *
 * Toast
 * ================================================================== */

.toast {
  position: fixed;
  left: var(--s5);
  right: var(--s5);
  bottom: calc(var(--nav-h) + var(--safe-b) + var(--s4));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: calc(var(--page-max) - var(--s5) * 2);
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--success);
  color: var(--on-color);
  font-size: var(--fs-md);
  animation: slide-up .3s var(--ease-out) both;
}
.toast .toast-text { flex-grow: 1; }
.toast .toast-action {
  border: none;
  background: transparent;
  color: var(--on-color);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  padding: var(--s2);
}
.toast.toast-error { background: var(--danger); }

.update-banner button {
  border: none;
  border-radius: var(--r-chip);
  padding: 6px 14px;
  background: var(--accent);
  color: var(--on-color);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.update-banner {
  position: fixed;
  left: var(--s5); right: var(--s5);
  top: var(--s4);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  animation: row-in .3s var(--ease-out) both;
}

/* ================================================================== *
 * Bottom sheet
 * ================================================================== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.sheet-body {
  width: 100%;
  max-width: var(--page-max);
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--s5) var(--s5) calc(var(--s6) + var(--safe-b));
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--paper);
  animation: slide-up .28s var(--ease-out) both;
}

.sheet-body h2 { margin-bottom: var(--s4); }

.install-steps {
  margin: var(--s4) 0 var(--s5);
  padding-left: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

#install-sheet-body p { margin-bottom: var(--s2); }
#install-sheet .sheet-body { display: flex; flex-direction: column; }
#install-cta, #install-later { margin-top: var(--s3); }

.sheet-grip {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 0 auto var(--s4);
}

/* ================================================================== *
 * Editor: button list
 * ================================================================== */

.button-list { display: flex; flex-direction: column; gap: var(--s2); }

.button-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
}
.button-row .swatch { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.button-row .label  { flex-grow: 1; min-width: 0; font-weight: 500; }
.button-row .parsed { font-size: var(--fs-xs); color: var(--faint); }
.button-row .grip   { color: var(--faint); cursor: grab; touch-action: none; }
.button-row.dragging { opacity: .6; }

.swatch-picker { display: flex; flex-wrap: wrap; gap: var(--s2); }
.swatch-picker button {
  width: 38px; height: 38px;
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.swatch-picker button[aria-pressed="true"] { border-color: var(--ink); }

/* ================================================================== *
 * Summary
 * ================================================================== */

.field-select {
  width: 100%;
  min-height: 50px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 16px;
}

.period-tabs {
  display: flex;
  gap: var(--s1);
  margin-bottom: var(--s4);
}
.period-tabs button {
  flex-grow: 1;
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--faint);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.period-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.stat-card {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--paper-sunk);
}
.stat-card.feature { background: var(--accent); color: var(--on-color); }

.stat-card .stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.035em;
}
.stat-card .stat-label { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
.stat-card.feature .stat-label { color: var(--on-color-dim); }

.chart-card { margin-bottom: var(--s6); }

.chart-card svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s3);
}
.chart-legend .item { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.chart-legend .key  { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.heatmap { display: flex; flex-direction: column; gap: 3px; }
.heatmap .hm-row { display: flex; align-items: center; gap: var(--s2); }
.heatmap .hm-day { width: 22px; font-size: 10px; color: var(--faint); flex-shrink: 0; }
.heatmap .hm-cells {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
}
.heatmap .hm-cell { height: 12px; border-radius: 2px; background: var(--paper-sunk); }
/* Rendered as a SIBLING of .heatmap, not a child — a ".heatmap .hm-axis"
   selector silently never matched, so the labels lost their flex layout and
   ran together as "12a6a12p6p11p". */
.hm-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--faint);
  margin-left: calc(22px + var(--s2));
  margin-top: var(--s1);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.breakdown { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.breakdown th {
  text-align: right;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  padding-bottom: var(--s2);
}
.breakdown th:first-child, .breakdown td:first-child { text-align: left; }
.breakdown td { padding: var(--s3) 0; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.breakdown .name { display: flex; align-items: center; gap: var(--s2); font-weight: 500; }
.breakdown .name .key { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* ================================================================== *
 * Empty states and templates
 * ================================================================== */

.empty-state {
  text-align: center;
  padding: var(--s8) var(--s4);
  color: var(--muted);
}
.empty-state h2 { color: var(--ink); margin-bottom: var(--s2); }
.empty-state p  { margin: 0 0 var(--s5); }

.template-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }

.template-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s4);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.template-card .tpl-name { font-weight: 700; }
.template-card .tpl-sub  { font-size: var(--fs-xs); color: var(--muted); }

/* ================================================================== *
 * Colour utility classes — one per palette hue.
 * Applied by JS from the button's stored colour.
 * ================================================================== */

.bg-flame  { background: var(--c-flame); }
.bg-pine   { background: var(--c-pine); }
.bg-amber  { background: var(--c-amber); }
.bg-indigo { background: var(--c-indigo); }
.bg-teal   { background: var(--c-teal); }
.bg-violet { background: var(--c-violet); }
.bg-rust   { background: var(--c-rust); }
.bg-sunk   { background: var(--paper-sunk); color: var(--ink); }

/* ================================================================== *
 * Utilities
 *
 * These exist so no markup needs a style="" attribute. Inline styles are
 * blocked by the Content-Security-Policy (style-src 'self'), which on the real
 * host silently strips them — that is what shipped the landing page with
 * colourless demo buttons.
 * ================================================================== */

.u-fill       { flex-grow: 1; min-width: 0; }
.u-mt-4       { margin-top: var(--s4); }
.u-mt-6       { margin-top: var(--s6); }
.u-mt-7       { margin-top: var(--s7); }
.u-mb-4       { margin-bottom: var(--s4); }
.u-stack      { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s7); }
.u-uppercase  { text-transform: uppercase; }
.u-pre        { white-space: pre-wrap; margin-top: var(--s5); }
.u-note       { margin: 0; color: var(--on-color-dim); font-size: var(--fs-sm); }
.u-btn-tiny   { min-height: 0; padding: 2px 10px; font-size: var(--fs-xs); }

/* Palette fills, for markup that needs a specific hue. */
.u-bg-flame   { background: var(--c-flame); }
.u-bg-pine    { background: var(--c-pine); }
.u-bg-amber   { background: var(--c-amber); }
.u-bg-indigo  { background: var(--c-indigo); }
.u-bg-teal    { background: var(--c-teal); }
.u-bg-violet  { background: var(--c-violet); }
.u-bg-rust    { background: var(--c-rust); }
.u-on-amber   { color: var(--on-amber); }

/* ================================================================== *
 * Static document pages (privacy, terms)
 * ================================================================== */

.doc {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--s5) var(--s8);
}
.doc h1 { font-size: 34px; letter-spacing: -.04em; margin-bottom: var(--s3); }
.doc h2 { font-size: var(--fs-lg); margin: var(--s7) 0 var(--s3); }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.6; }
.doc p { margin: 0 0 var(--s4); }
.doc ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.doc li { margin-bottom: var(--s2); }
.doc .updated { color: var(--faint); font-size: var(--fs-sm); margin-bottom: var(--s6); }

/* Anything mid-request dims slightly and stops accepting input, so a slow
   connection reads as "working" rather than "broken". */
[aria-busy="true"] { opacity: .6; pointer-events: none; }
button[aria-busy="true"] { opacity: 1; }

/* ================================================================== *
 * Danger zone
 *
 * Archiving and deleting sit next to each other and sound similar, so they are
 * separated visually and each states its own consequence. Delete is the only
 * irreversible action in the app.
 * ================================================================== */

.danger-zone {
  border: 2px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--r-md);
  padding: var(--s4);
}
.danger-zone .section-label { margin-top: 0; color: var(--danger); }

.danger-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) 0;
}
.danger-row + .danger-row { border-top: 1px solid var(--line); }
.danger-row .btn { flex-shrink: 0; }

.danger-title { font-size: var(--fs-md); font-weight: 700; }
.danger-note  { font-size: var(--fs-xs); color: var(--muted); margin: 3px 0 0; line-height: 1.45; }