/* Direction: FixTrack — warm amber, deep charcoal, soft cream, muted slate */
/* 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: #f6efe1;
  --surface: #fffaf0;
  --surface-2: #efe5d0;
  --border: #ddd0b6;
  --border-strong: #b6ae9f;
  --ink: #22252b;
  --muted: #5a6573;
  --accent: #e8962a;
  --accent-hover: #c58024;
  --accent-ink: #201506;
  --accent-text: #8a4e00;
  --accent-strong: #8d5b1a;
  --accent-soft: #f4e3c7;
  --accent-border: #f0c78f;
  --success: #3b7a55;
  --success-ink: #ffffff;
  --success-soft: #e0e1d0;
  --success-strong: #326748;
  --warning: #b36b00;
  --warning-ink: #ffffff;
  --warning-soft: #eedfc6;
  --warning-strong: #8c5300;
  --danger: #b03a2a;
  --danger-ink: #ffffff;
  --danger-soft: #eed9cb;
  --danger-strong: #a23527;
  --chart-1: #c2790d;
  --chart-2: #6e952d;
  --chart-3: #1c857e;
  --chart-4: #338bd4;
  --chart-5: #8758af;
  --chart-6: #d0657d;

  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --x-band: #23262c;
  --x-on-photo: #f6efe1;
  --x-c0: #e8962a;
  --x-c1: #5f6b7a;
  --x-c2: #2f333a;
  --x-c3: #c4a86a;
  --x-c4: #4f8a64;
  --x-c5: #a8553a;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110b03;
  --surface: #29231c;
  --surface-2: #1d1710;
  --border: #322d26;
  --border-strong: #58544f;
  --ink: #f6efe1;
  --muted: #9a9488;
  --accent: #e8962a;
  --accent-hover: #eba64a;
  --accent-ink: #201506;
  --accent-text: #e8962a;
  --accent-strong: #e8962a;
  --accent-soft: #402a0c;
  --accent-border: #724a15;
  --success: #3b7a55;
  --success-ink: #ffffff;
  --success-soft: #1a2315;
  --success-strong: #66987b;
  --warning: #b36b00;
  --warning-ink: #ffffff;
  --warning-soft: #352002;
  --warning-strong: #bf8227;
  --danger: #b03a2a;
  --danger-ink: #ffffff;
  --danger-soft: #34150c;
  --danger-strong: #c67166;
  --chart-1: #e8962a;
  --chart-2: #a2cf5f;
  --chart-3: #24a79e;
  --chart-4: #8ac4fa;
  --chart-5: #a873d5;
  --chart-6: #fe9db0;
}

/* FixTrack — app styles (tokens only) */

/* dark charcoal sidebar + auth art band */
.app-side, .auth-art { background: var(--x-band); color: var(--x-on-photo); }
.side-muted { color: color-mix(in srgb, var(--x-on-photo) 72%, transparent); }
.side-line { border-color: color-mix(in srgb, var(--x-on-photo) 16%, transparent); }
.auth-art svg.icon { color: var(--accent); flex-shrink: 0; margin-top: 0.3rem; }

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
}

.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.85rem; border-radius: 10px; font-weight: 600;
  color: color-mix(in srgb, var(--x-on-photo) 80%, transparent);
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); }
.nav-link:focus-visible, .side-icon:focus-visible, .bn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  background: color-mix(in srgb, var(--x-on-photo) 16%, transparent); color: var(--x-on-photo);
}
.side-icon {
  display: inline-flex; padding: 0.5rem; border-radius: 8px;
  color: color-mix(in srgb, var(--x-on-photo) 80%, transparent);
}
.side-icon:hover { background: color-mix(in srgb, var(--x-on-photo) 12%, transparent); color: var(--x-on-photo); }

/* mobile bottom nav */
.bottom-nav { background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.bn-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  min-height: 3.5rem; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  border-top: 3px solid transparent;
}
.bn-link[aria-current="page"] { color: var(--accent-text); border-top-color: var(--accent); }

/* summary cards */
.stat-card {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  animation: ft-rise 0.45s ease-out both;
}
a.stat-card:hover { transform: translateY(-2px); border-color: var(--accent); }
a.stat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-label { color: var(--muted); }
.stat-alert { background: var(--accent-soft); border-color: var(--accent); }
.stat-alert .stat-label { color: var(--accent-strong); }
.stat-alert .font-display { color: var(--accent-strong); }
@keyframes ft-rise { from { transform: translateY(10px); } to { transform: none; } }
html.reduced-motion .stat-card { animation: none; transition: none; }

/* IDs & badges */
.code {
  display: inline-block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 6px; letter-spacing: 0.02em; white-space: nowrap;
  background: var(--x-band); color: var(--x-on-photo);
}
a.code:hover { background: var(--accent); color: var(--accent-ink); }
.code-lg { font-size: 0.95rem; padding: 0.25rem 0.65rem; }
.badge { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.st-open { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
.st-progress { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border, var(--accent)); }
.st-done { background: var(--success-soft); color: var(--success-strong); border: 1px solid transparent; }
.pr-low { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.pr-mid { background: var(--surface-2); color: var(--ink); border: 1px solid transparent; }
.pr-high { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); }
.pr-crit { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 700; }
.od { background: var(--danger-soft); color: var(--danger-strong); border: 1px solid transparent; font-weight: 700; }
.flash-ok { background: var(--success-soft); color: var(--success-strong); }
.flash-err { background: var(--danger-soft); color: var(--danger-strong); }

/* charts */
.bar-track { height: 0.6rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--x-c0); min-width: 0.25rem; transition: width 0.4s ease; }
.tone-low { background: var(--x-c3); }
.tone-mid { background: var(--x-c1); }
.tone-high { background: var(--x-c0); }
.tone-crit { background: var(--x-c5); }
.grp-open { background: var(--x-c1); }
.grp-progress { background: var(--x-c0); }
.grp-done { background: var(--x-c4); }
.dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.split-bar { display: flex; height: 1.4rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.split-done { background: var(--x-c4); }
.split-open { background: var(--x-c0); }
.trend-col { width: 100%; max-width: 3rem; border-radius: 8px 8px 3px 3px; background: var(--x-c0); }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th {
  text-align: left; padding: 0.75rem 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); background: var(--surface-2); white-space: nowrap;
}
.tbl td { padding: 0.9rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; transition: background 0.12s; }
.tbl tbody tr:hover { background: var(--accent-soft); }

/* attention rows, timeline, meta */
.attn-row { display: flex; gap: 1rem; align-items: center; padding: 0.9rem 0.5rem; border-radius: 10px; transition: background 0.12s; }
.attn-row:hover { background: var(--accent-soft); }
.attn-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.timeline { position: relative; margin-left: 0.4rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 1.1rem; }
.timeline li { position: relative; padding-left: 1.25rem; }
.timeline li::before {
  content: ""; position: absolute; left: -0.42rem; top: 0.35rem; width: 0.65rem; height: 0.65rem;
  border-radius: 999px; background: var(--accent); border: 2px solid var(--surface);
}
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem 1.5rem; }
.meta-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.25rem; }
.meta-grid dd { font-weight: 600; }