/* Direction: OffBoardly — deep plum, muted rose, soft ivory. Enterprise HR, calm and sophisticated. */
/* 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: #fbf7f2;
  --surface: #fffdfa;
  --surface-2: #f5ede6;
  --border: #e8dcd5;
  --border-strong: #b7b0ae;
  --ink: #2e1631;
  --muted: #6c566d;
  --accent: #a24c68;
  --accent-hover: #8a4158;
  --accent-ink: #ffffff;
  --accent-text: #8c3a55;
  --accent-strong: #954660;
  --accent-soft: #f4e2e8;
  --accent-border: #d3aab4;
  --success: #3d7a56;
  --success-ink: #ffffff;
  --success-soft: #e4e8df;
  --success-strong: #38704f;
  --warning: #a2640e;
  --warning-ink: #ffffff;
  --warning-soft: #f0e5d7;
  --warning-strong: #89550c;
  --danger: #b3413d;
  --danger-ink: #ffffff;
  --danger-soft: #f2e1dc;
  --danger-strong: #a53c38;
  --chart-1: #a24c68;
  --chart-2: #be7223;
  --chart-3: #4e5e0f;
  --chart-4: #1f9485;
  --chart-5: #065986;
  --chart-6: #926fc5;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgba(58, 26, 64, 0.06), 0 8px 24px rgba(58, 26, 64, 0.05);
  --x-on-photo: #ffffff;
  --x-plum: #3a1a40;
  --x-plum-2: #5a2c61;
  --x-rose: #c07a92;
  --x-rose-strong: #9a4a64;
  --x-mauve: #a58aa7;
  --x-green: #62a37d;
  --x-amber: #dc9d3c;
  --x-red: #d05d58;
  --x-sidebar-ink: #f6eaf0;
  --x-sidebar-muted: #cdb4cd;
  --x-green-bg: #dcefe3;
  --x-green-fg: #1f5a3a;
  --x-amber-bg: #fbebcc;
  --x-amber-fg: #7a4a07;
  --x-red-bg: #f8dcda;
  --x-red-fg: #8f2b27;
  --x-mauve-bg: #eadfeb;
  --x-mauve-fg: #5b3f5e;
  --x-rose-bg: #f5dde4;
  --x-rose-fg: #8a3550;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #170b0f;
  --surface: #2e2327;
  --surface-2: #23171b;
  --border: #372d31;
  --border-strong: #5d5457;
  --ink: #fbf7f2;
  --muted: #a09997;
  --accent: #a24c68;
  --accent-hover: #b0677f;
  --accent-ink: #ffffff;
  --accent-text: #bc7e92;
  --accent-strong: #bc7e92;
  --accent-soft: #361923;
  --accent-border: #562837;
  --success: #3d7a56;
  --success-ink: #ffffff;
  --success-soft: #1f231f;
  --success-strong: #68987b;
  --warning: #a2640e;
  --warning-ink: #ffffff;
  --warning-soft: #361f0f;
  --warning-strong: #b68643;
  --danger: #b3413d;
  --danger-ink: #ffffff;
  --danger-soft: #391719;
  --danger-strong: #c97774;
  --chart-1: #af5874;
  --chart-2: #cc7e33;
  --chart-3: #758b22;
  --chart-4: #1ea291;
  --chart-5: #1e88c6;
  --chart-6: #9e7cd2;
}

.sidebar { background: var(--x-plum); color: var(--x-sidebar-ink); }
.brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--x-rose-strong); color: var(--x-on-photo); }
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .85rem; border-radius: 10px; color: var(--x-sidebar-muted); font-weight: 500; font-size: .9rem; transition: background .15s, color .15s; }
.nav-link:hover { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); }
.nav-link:focus-visible { outline: 2px solid var(--x-rose); outline-offset: 2px; }
.nav-link.active { background: var(--x-rose-strong); color: var(--x-on-photo); }
.nav-link .icon { width: 1.1rem; height: 1.1rem; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40; }
@media (max-width: 1023px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; transform: translateX(-100%); transition: transform .25s ease; z-index: 50; overflow-y: auto; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; }
}
@media (min-width: 1024px) { .sidebar { position: sticky; top: 0; height: 100vh; } }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .75rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 600; }
.tbl td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; opacity: .7; }
.t-green { background: var(--x-green-bg); color: var(--x-green-fg); }
.t-amber { background: var(--x-amber-bg); color: var(--x-amber-fg); }
.t-red { background: var(--x-red-bg); color: var(--x-red-fg); }
.t-mauve { background: var(--x-mauve-bg); color: var(--x-mauve-fg); }
.t-rose { background: var(--x-rose-bg); color: var(--x-rose-fg); }
.sample-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .4rem; border-radius: 6px; background: var(--x-mauve-bg); color: var(--x-mauve-fg); font-weight: 700; }

.bar { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--x-rose-strong); transition: width .6s ease; }
.bar.done > span { background: var(--x-green); }

.donut { position: relative; width: 9rem; height: 9rem; border-radius: 999px; flex: none; }
.donut::after { content: ""; position: absolute; inset: 1.6rem; border-radius: 999px; background: var(--surface); }
.donut > span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; flex: none; }
.dot-green { background: var(--x-green); } .dot-amber { background: var(--x-amber); } .dot-red { background: var(--x-red); }
.dot-mauve { background: var(--x-mauve); } .dot-rose { background: var(--x-rose); } .dot-plum { background: var(--x-plum-2); }
.col-bar { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--x-rose), var(--x-rose-strong)); min-height: 4px; }

.flash { padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 500; margin-bottom: 1.25rem; display: flex; gap: .6rem; align-items: center; }
.flash-ok { background: var(--x-green-bg); color: var(--x-green-fg); }
.flash-err { background: var(--x-red-bg); color: var(--x-red-fg); }

.stat-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; }
.auth-panel { background: linear-gradient(160deg, var(--x-plum), var(--x-plum-2)); color: var(--x-sidebar-ink); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.profile-menu { box-shadow: var(--shadow-card); }