/* Direction: Flourish — buttercream paper, terracotta actions, cocoa ink, sage for good news */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f7eed9;
  --surface: #fffcf5;
  --surface-2: #ece3ce;
  --border: #e4d5b8;
  --border-strong: #b4aa9a;
  --ink: #3b2a20;
  --muted: #6f5a4b;
  --accent: #ae482a;
  --accent-hover: #943d24;
  --accent-ink: #ffffff;
  --accent-text: #98401f;
  --accent-strong: #a04227;
  --accent-soft: #f3dcc9;
  --accent-border: #d6a38a;
  --success: #46684a;
  --success-ink: #ffffff;
  --success-soft: #e2dec8;
  --success-strong: #46684a;
  --warning: #8a5a0b;
  --warning-ink: #ffffff;
  --warning-soft: #eadcc0;
  --warning-strong: #7f530a;
  --danger: #a8352a;
  --danger-ink: #ffffff;
  --danger-soft: #eed8c4;
  --danger-strong: #a8352a;
  --chart-1: #ae482a;
  --chart-2: #9b861d;
  --chart-3: #11663e;
  --chart-4: #1d8fa8;
  --chart-5: #42469f;
  --chart-6: #b75fa2;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgba(59, 42, 32, 0.05), 0 6px 18px rgba(59, 42, 32, 0.05);
  --x-band: #3b2a20;
  --x-on-photo: #fff6e6;
  --x-c1: #ae482a;
  --x-c2: #7d9a7a;
  --x-c3: #c9a46a;
  --x-c4: #6b4a35;
  --x-c5: #d98b6a;
  --x-c6: #8a8f4a;
  --x-c7: #8e5b6e;
  --x-c8: #5f7f8c;
  --x-c9: #b8a58a;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #140905;
  --surface: #2c221e;
  --surface-2: #201512;
  --border: #352b28;
  --border-strong: #5b5350;
  --ink: #f7eed9;
  --muted: #9c9284;
  --accent: #ae482a;
  --accent-hover: #ba634a;
  --accent-ink: #ffffff;
  --accent-text: #c57b66;
  --accent-strong: #c57b66;
  --accent-soft: #36170d;
  --accent-border: #592516;
  --success: #46684a;
  --success-ink: #ffffff;
  --success-soft: #1f1e14;
  --success-strong: #7b927c;
  --warning: #8a5a0b;
  --warning-ink: #ffffff;
  --warning-soft: #2e1b06;
  --warning-strong: #ab8850;
  --danger: #a8352a;
  --danger-ink: #ffffff;
  --danger-soft: #35130d;
  --danger-strong: #c06f66;
  --chart-1: #b54e30;
  --chart-2: #a38c0b;
  --chart-3: #09985d;
  --chart-4: #0796b2;
  --chart-5: #6c75d3;
  --chart-6: #be65a9;
}

.tbl { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.tbl th { padding: 0.75rem 1rem; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; font-weight: 600; }
.tbl td { padding: 0.75rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .nw { white-space: nowrap; }
.tone-ok { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.tone-warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.tone-bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.tone-mute { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.row-warn { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.row-bad { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.alert.tone-ok, .alert.tone-bad { border: 1px solid var(--border); }
.donut { border-radius: 9999px; position: relative; width: 11rem; height: 11rem; flex-shrink: 0; }
.donut::after { content: ""; position: absolute; inset: 1.9rem; border-radius: 9999px; background: var(--surface); }
.donut-c { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
.dot { width: 0.65rem; height: 0.65rem; border-radius: 9999px; display: inline-block; flex-shrink: 0; }
.meter { height: 0.5rem; border-radius: 9999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 9999px; }
dialog.modal form { min-width: min(30rem, 88vw); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }