/* ============================================================================
 * Beaver Logs — "Warm woods" design system
 * Warm BROWN/sand neutrals (the wood) with GREEN reserved for highlights
 * (accent, selected, titles, chart series). Soft, pastel, calming.
 * Two themes: light (sunlit parchment, default) + dark (walnut cabin).
 * Same variable names across themes so every component/page just works.
 * ==========================================================================*/

:root {
  /* type (theme-independent) */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
  /* radii / sizing */
  --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --topbar-h: 48px; --subbar-h: 44px; --rail-w: 208px; --rail-w-collapsed: 52px;
}

/* ---- LIGHT (default): sunlit woods — soft warm-greige neutrals, green highlights */
:root, [data-theme="light"] {
  /* backgrounds (soft warm greige — muted, gentle, barely-there warmth) */
  --canvas: #ECE7DD;
  --canvas-alt: #E5E0D4;
  --surface: #F8F4EE;
  --raised: #FDFBF6;
  --hover: #E9E3D8;
  --inset: #E4DED0;
  --overlay: rgba(48,42,30,0.36);

  /* borders (soft warm taupe) */
  --bd-subtle: #E4DECF;
  --bd: #D8CFBC;
  --bd-strong: #C2B8A3;
  --bd-focus: #5C8A62;
  --grid: #E3DCCD;
  --grid-axis: #CFC5B2;

  /* text (warm dark brown) */
  --fg: #2F2719;
  --fg-2: #5C5240;
  --fg-muted: #7C715A;
  --fg-faint: #A89C80;
  --on-accent: #F7F2E7;

  /* accent ramp (green — the highlight). lo = soft tints, hi = deep greens */
  --accent-50: #E7EEDF;
  --accent-100: #DAE5CD;
  --accent-200: #C7DAB5;
  --accent-300: #A6C396;
  --accent-400: #79A476;
  --accent: #45724C;        /* links / selected / titles — AA text on canvas */
  --accent-600: #3B6343;
  --accent-700: #325638;
  --accent-bright: #3A5F41;  /* emphasized accent text on light-green chip/nav bg */

  /* status (warm, pastel) */
  --good: #4C8A5C;  --good-dim: #DCEBD6;
  --warn: #8A6E28;  --warn-dim: #EFE6C9;
  --bad:  #B45647;  --bad-dim:  #F1DCD5;
  --info: #4F7596;  --info-dim: #DCE7EF;

  /* deltas (diverging) — regress=worse(warm), improve=better(cool) */
  --regress: #B45647; --regress-bar: #C57767; --regress-bg: #F1DCD5;
  --improve: #4C8A5C; --improve-bar: #74AC7F; --improve-bg: #DEEBD6;
  --zero-axis: #C6B79B;

  /* series — green-led, woodsy/pastel, colorblind-aware default quartet */
  --s1: #5E9568; /* sage (brand)     */
  --s2: #A87E2E; /* honey/amber      */
  --s3: #4F7596; /* dusty blue       */
  --s4: #BE5E78; /* rose             */
  --s5: #3F9389; /* teal             */
  --s6: #B4703F; /* terracotta       */
  --s7: #7A6FB8; /* violet           */
  --s8: #9A5E92; /* mauve            */

  /* compare pair (A/base = warm taupe, B/head = green) */
  --cmp-base: #94886A;
  --cmp-head: #5E9568;
  --cmp-a: #5E9568;
  --cmp-b: #4F7596;

  /* category fills (size composition) */
  --c1: #6B9A6E; --c2: #5C84A8; --c3: #B89236; --c4: #9A6F94;
  --c5: #4E9E94; --c6: #8479B8; --c7: #BC7550; --c8: #978B73;

  --shadow-overlay: 0 10px 30px rgba(60,45,20,0.18);
}

/* ---- DARK: walnut cabin — soft warm brown-black neutrals, green highlights */
[data-theme="dark"] {
  /* backgrounds (softer, less-saturated warm brown — gentler than walnut) */
  --canvas: #1B1813;
  --canvas-alt: #16130E;
  --surface: #241F18;
  --raised: #2D281F;
  --hover: #353026;
  --inset: #17140F;
  --overlay: rgba(10,7,3,0.72);

  /* borders (soft warm brown) */
  --bd-subtle: #342E24;
  --bd: #423B2E;
  --bd-strong: #58503F;
  --bd-focus: #7FB58A;
  --grid: #2C2620;
  --grid-axis: #423B2E;

  /* text (brighter warm cream — more readable) */
  --fg: #F3ECDE;
  --fg-2: #CCC0A9;
  --fg-muted: #A0947B;
  --fg-faint: #6E6452;
  --on-accent: #13200E;

  /* accent ramp (green highlight on warm dark) */
  --accent-50: #1B2614;
  --accent-100: #22311A;
  --accent-200: #2E4324;
  --accent-300: #3F5C33;
  --accent-400: #5C8850;
  --accent: #7FB58A;
  --accent-600: #98C8A1;
  --accent-700: #B0D6B7;
  --accent-bright: #B0D6B7;

  /* status */
  --good: #6FB07F;  --good-dim: #243A28;
  --warn: #CDA552;  --warn-dim: #3A3318;
  --bad:  #CB7A6A;  --bad-dim:  #3A241F;
  --info: #6E9DC0;  --info-dim: #1E2F3A;

  /* deltas */
  --regress: #CB7A6A; --regress-bar: #A85C50; --regress-bg: #2E1E18;
  --improve: #6FB07F; --improve-bar: #4E8159; --improve-bg: #1B2A1A;
  --zero-axis: #564934;

  /* series (brighter for dark) */
  --s1: #7FB58A; --s2: #D8B25A; --s3: #6E9DC0; --s4: #D389A0;
  --s5: #5FB8AC; --s6: #CE8B63; --s7: #9A93D8; --s8: #C28AC4;

  /* compare pair */
  --cmp-base: #94886A;
  --cmp-head: #7FB58A;
  --cmp-a: #7FB58A;
  --cmp-b: #6E9DC0;

  /* category fills */
  --c1: #6FA877; --c2: #6E9DC0; --c3: #CDA552; --c4: #B083C0;
  --c5: #5FB8AC; --c6: #9085D0; --c7: #CE8B63; --c8: #93876B;

  --shadow-overlay: 0 10px 30px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-300); color: var(--fg); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 6px; border: 2px solid var(--canvas); }
*::-webkit-scrollbar-thumb:hover { background: var(--bd-strong); }
*::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--fg-muted); }
.secondary { color: var(--fg-2); }
.faint { color: var(--fg-faint); }
.accent { color: var(--accent); }

.label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--fg-muted);
}
.h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-size: 15px; font-weight: 600; }
.caption { font-size: 12px; color: var(--fg-2); }

/* ---- layout shell ---------------------------------------------------------*/
.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px; background: var(--canvas-alt);
  border-bottom: 1px solid var(--bd);
}
.subbar {
  height: var(--subbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; background: var(--canvas);
  border-bottom: 1px solid var(--bd-subtle);
  overflow-x: auto;
}
.body { flex: 1 1 auto; display: flex; min-height: 0; }
.rail {
  width: var(--rail-w); flex: 0 0 auto;
  background: var(--canvas-alt); border-right: 1px solid var(--bd-subtle);
  padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.main { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 64px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

/* ---- wordmark -------------------------------------------------------------*/
.wordmark { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fg); }
.wordmark .glyph {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--accent-200);
  color: var(--accent-bright); border: 1px solid var(--accent-300);
}

/* ---- rail nav -------------------------------------------------------------*/
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--r);
  color: var(--fg-2); cursor: pointer; font-size: 13px; font-weight: 500;
  border: 1px solid transparent; user-select: none;
}
.nav-item:hover { background: var(--hover); color: var(--fg); }
.nav-item.active { background: var(--accent-100); color: var(--accent-bright); border-color: var(--accent-300); }
.nav-item .ico { width: 16px; height: 16px; flex: 0 0 auto; opacity: .9; }
.nav-sep { height: 1px; background: var(--bd-subtle); margin: 6px 4px; }
.nav-spacer { flex: 1 1 auto; }

/* ---- cards / panels -------------------------------------------------------*/
.card {
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r-lg); padding: 14px;
}
.card.raised { border-color: var(--bd-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.card.tight { padding: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.card-sub { font-size: 11px; color: var(--fg-muted); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 720px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ---- KPI stat -------------------------------------------------------------*/
.kpi { background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: 12px 14px; position: relative; overflow: hidden; }
.kpi .k-label { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
.kpi .k-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; line-height: 1.05; }
.kpi .k-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kpi .k-spark { position: absolute; right: 10px; bottom: 8px; opacity: .9; pointer-events: none; }

/* ---- delta chip / direction ----------------------------------------------*/
.delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-sm); }
.delta .arrow { font-size: 11px; line-height: 1; }
.delta.improve { color: var(--improve); background: var(--improve-bg); }
.delta.regress { color: var(--regress); background: var(--regress-bg); }
.delta.flat { color: var(--fg-muted); background: var(--accent-50); }
.delta.lown { opacity: .55; }   /* dim low-sample-size deltas (honest confidence) */

/* ---- chips / badges -------------------------------------------------------*/
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 9999px; font-size: 12px; font-weight: 500;
  background: var(--raised); border: 1px solid var(--bd); color: var(--fg-2); cursor: pointer; user-select: none;
}
.chip:hover { background: var(--hover); }
.chip.on { background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-bright); }
.chip .dot { width: 8px; height: 8px; border-radius: 9999px; flex: 0 0 auto; }
.chip .x { color: var(--fg-muted); margin-left: 2px; }
.chip .x:hover { color: var(--fg); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; font-family: var(--font-mono); }
.badge.good { color: var(--good); background: var(--good-dim); }
.badge.warn { color: var(--warn); background: var(--warn-dim); }
.badge.bad  { color: var(--bad);  background: var(--bad-dim); }
.badge.info { color: var(--info); background: var(--info-dim); }
.badge.neutral { color: var(--fg-2); background: var(--raised); border: 1px solid var(--bd); }

.health-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.health-dot.good { background: var(--good); box-shadow: 0 0 0 3px var(--good-dim); }
.health-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.health-dot.bad  { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-dim); }

/* ---- buttons / controls ---------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--r); font-size: 13px; font-weight: 500;
  background: var(--raised); border: 1px solid var(--bd); color: var(--fg); cursor: pointer; user-select: none;
}
.btn:hover { background: var(--hover); border-color: var(--bd-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--hover); color: var(--fg); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn .ico { width: 15px; height: 15px; }

.seg { display: inline-flex; background: var(--inset); border: 1px solid var(--bd); border-radius: var(--r); padding: 2px; gap: 2px; }
.seg button { border: none; background: transparent; color: var(--fg-2); padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; }
.seg button.on { background: var(--accent-200); color: var(--accent-bright); }
.seg button:hover:not(.on) { color: var(--fg); background: var(--hover); }

.input, select.input {
  background: var(--inset); border: 1px solid var(--bd); border-radius: var(--r);
  color: var(--fg); padding: 6px 10px; font-size: 13px; font-family: inherit; outline: none;
}
.input:focus { border-color: var(--bd-focus); box-shadow: 0 0 0 1px var(--bd-focus); }
.input::placeholder { color: var(--fg-faint); }

.kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: var(--r-sm); background: var(--inset); border: 1px solid var(--bd); color: var(--fg-2); }

.divider-v { width: 1px; height: 22px; background: var(--bd-subtle); }
.spacer { flex: 1 1 auto; }
.live-dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--good); box-shadow: 0 0 0 3px var(--good-dim); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } * { transition: none !important; } }

/* ---- tables ---------------------------------------------------------------*/
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); padding: 8px 10px; border-bottom: 1px solid var(--bd); white-space: nowrap; cursor: pointer; user-select: none; }
.tbl th.no-sort { cursor: default; }
.tbl th .sort { color: var(--accent); margin-left: 3px; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--bd-subtle); color: var(--fg-2); vertical-align: middle; }
.tbl tr:hover td { background: var(--canvas-alt); }
.tbl tr.selected td { background: var(--accent-50); }
.tbl td.num, .tbl th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--fg); }
.tbl a { color: var(--accent); text-decoration: none; }
.tbl a:hover { text-decoration: underline; }
.tbl .mono { color: var(--fg-2); }

.link { color: var(--accent); text-decoration: none; cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ---- diverging delta bar (scorecard / size delta) -------------------------*/
.dbar { position: relative; height: 16px; background: var(--inset); border-radius: var(--r-sm); overflow: hidden; }
.dbar .zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--zero-axis); }
.dbar .fill { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.dbar .fill.regress { background: var(--regress-bar); }
.dbar .fill.improve { background: var(--improve-bar); }

/* ---- compare scorecard ----------------------------------------------------*/
.scorecard { display: grid; grid-template-columns: 150px 1fr 92px 92px; gap: 0; }
.scorecard .sc-row { display: contents; }
.sc-cell { padding: 9px 12px; border-bottom: 1px solid var(--bd-subtle); display: flex; align-items: center; }
.sc-cell.aspect { color: var(--fg-2); font-weight: 500; }
.sc-cell.val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; justify-content: flex-end; color: var(--fg); }
.sc-head .sc-cell { color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bd); }

/* ---- waterfall ------------------------------------------------------------*/
.wf-row { display: grid; grid-template-columns: 220px 1fr 64px; align-items: center; gap: 10px; padding: 2px 0; }
.wf-label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-track { position: relative; height: 16px; background: var(--inset); border-radius: var(--r-sm); overflow: hidden; }
.wf-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: var(--accent-400); }
.wf-bar.crit { background: var(--accent); }
.wf-bar.regress { background: var(--regress-bar); }
.wf-dur { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); text-align: right; }

/* ---- sparkline / mini svg -------------------------------------------------*/
.spark svg { display: block; }

/* ---- tooltip (charts) -----------------------------------------------------*/
.bl-tip {
  background: var(--raised); border: 1px solid var(--bd-strong); border-radius: var(--r);
  box-shadow: var(--shadow-overlay); padding: 8px 10px; font-size: 12px; color: var(--fg);
  font-family: var(--font-sans); min-width: 140px;
}
.bl-tip .t-day { color: var(--fg-muted); font-size: 11px; margin-bottom: 5px; font-family: var(--font-mono); }
.bl-tip .t-row { display: flex; align-items: center; gap: 7px; justify-content: space-between; padding: 1px 0; }
.bl-tip .t-row .t-name { display: flex; align-items: center; gap: 6px; color: var(--fg-2); }
.bl-tip .t-row .t-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.bl-tip .t-sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

/* ---- legend ---------------------------------------------------------------*/
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.legend .item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); cursor: pointer; user-select: none; }
.legend .item.off { opacity: .4; text-decoration: line-through; }
.legend .sw { width: 10px; height: 3px; border-radius: 2px; }
.legend .item .name { font-family: var(--font-mono); }

/* ---- empty / loading ------------------------------------------------------*/
.empty { border: 1px dashed var(--bd); border-radius: var(--r-lg); padding: 28px; text-align: center; color: var(--fg-muted); background: var(--canvas-alt); }
.empty .ico { color: var(--fg-faint); margin-bottom: 8px; }

/* ---- popover --------------------------------------------------------------*/
.popover { position: absolute; z-index: 60; background: var(--raised); border: 1px solid var(--bd-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); padding: 6px; min-width: 240px; }
.po-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r); cursor: pointer; color: var(--fg-2); }
.po-item:hover { background: var(--hover); color: var(--fg); }

/* ---- heatmap (flakiness) --------------------------------------------------*/
.heat { display: grid; gap: 2px; }
.heat-cell { width: 100%; aspect-ratio: 1; border-radius: 2px; }

/* ---- misc -----------------------------------------------------------------*/
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 12px; }
.section-title .h2 { color: var(--fg); }
.section-title .desc { font-size: 12px; color: var(--fg-muted); }
.hidden { display: none !important; }
.cmp-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--r); background:var(--accent-100); border:1px solid var(--accent-300); color:var(--accent-bright); font-size:12px; }
.avatar { width: 26px; height: 26px; border-radius: 9999px; border: 1px solid var(--bd); object-fit: cover; }
.empty .ico svg { width: 26px; height: 26px; }