/* ============================================================================
   White Rabbit app theme — "Liquid Glass, dark"
   Drop this file into any web app and use the classes below. One source of
   truth for colour, type, spacing, radius, surfaces and controls, so every
   White Rabbit tool looks and feels like wrbt.ai.

   How to use:
     <link rel="stylesheet" href="wrbt-theme.css">
     <body> gets the background, font and colour automatically.
     Wrap page content in <main>. Use the component classes documented in
     WRBT-DESIGN-SYSTEM.md (.btn, .panel, .kpi, .field, .tag, table, …).
   ============================================================================ */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root {
  /* colour */
  --bg: #050507;                       /* page */
  --ink: #FFFFFF;                      /* primary text */
  --muted: #A1A1AA;                    /* secondary text, labels, hints */
  --accent: #E4E4E7;   /* monochrome: light grey for primary actions, links, first chart series */                   /* White Rabbit purple — primary actions, links, bars */
  --accent-ink: #0A0A0A;
  --ok: #4CD08A;                       /* success, "go" buttons, leader highlight */
  --warn: #FF6B6B;                     /* danger, needs-attention */
  --amber: #F5C542;                    /* secondary chart series */

  /* glass surfaces */
  --glass:   rgba(255,255,255,.065);   /* resting panel fill */
  --glass-2: rgba(255,255,255,.10);    /* hover / nested */
  --glass-3: rgba(255,255,255,.15);    /* active / selected */
  --edge:        rgba(255,255,255,.13);/* 1px panel borders */
  --edge-strong: rgba(255,255,255,.22);
  --line: rgba(255,255,255,.10);       /* table rules, dividers */
  --specular: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.25);
  --lift: 0 12px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05);
  --blur: blur(28px) saturate(170%);

  /* shape */
  --radius: 10px;                      /* ONE radius for everything */

  /* spacing scale */
  --pad: 16px;                         /* inside every panel / card / tile */
  --gap: 12px;                         /* between sibling cards, grid cells, buttons */
  --stack: 20px;                       /* between stacked blocks on a page */
  --field: 16px;                       /* between form fields */

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Manrope, "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 760px) { :root { --pad: 14px; --gap: 10px; --stack: 18px; } }
*, *::before, *::after { box-sizing: inherit; }

/* ---------- 2. Base ------------------------------------------------------- */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5;
  letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255,255,255,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 48px; }
@media (max-width: 760px) { main { padding: 20px 16px 32px; } html, body { overflow-x: hidden; } }

h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: var(--stack) 0 var(--gap); }
h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; margin: var(--stack) 0 var(--gap); }
h3:first-child { margin-top: 0; }
.lede { color: var(--muted); max-width: 60ch; margin: 0 0 var(--stack); }
.sub  { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.msg { font-size: 14px; } .msg.ok { color: var(--ok); } .msg.err { color: var(--warn); }

/* ---------- 3. Header + capsule nav --------------------------------------- */
header {
  display: flex; align-items: center; gap: 18px; padding: 14px 24px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: rgba(10,10,14,.55); border-bottom: 1px solid var(--edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
header .home { display: block; }           /* the logo ALWAYS links to the app root */
header .logo { height: 42px; width: auto; display: block; }
header .app-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
nav { display: flex; gap: 2px; margin-left: 8px; padding: 4px; background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--specular); }
nav button { background: none; border: 0; padding: 7px 14px; border-radius: var(--radius); cursor: pointer; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
nav button:hover { background: var(--glass-2); color: var(--ink); }
nav button[aria-current="page"] { background: var(--glass-3); color: var(--ink); box-shadow: var(--specular), 0 2px 8px rgba(0,0,0,.35); }
@media (max-width: 760px) {
  header { flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; } header .logo { height: 34px; } header .app-title { font-size: 15px; }
  nav { margin-left: 0; width: 100%; order: 3; overflow-x: auto; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; }
  nav button { white-space: nowrap; padding: 8px 10px; font-size: 14px; }
}

/* ---------- 4. Glass surfaces --------------------------------------------- */
.panel, .card, .kpi, .tile, .modal-card, .banner {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--specular), var(--lift);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  padding: var(--pad);
}
.panel, .card { margin: 0 0 var(--stack); }
.card { cursor: pointer; transition: transform .15s, background .15s; }
.card:hover { background: var(--glass-2); transform: translateY(-1px); }
.card.selected { border-color: var(--accent); box-shadow: var(--specular), 0 0 0 1px var(--accent), var(--lift); }

/* status variants */
.banner.warn   { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.07); }
.banner.ok     { border-color: rgba(76,208,138,.5);  background: rgba(76,208,138,.08); }
.banner.accent { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.banner { line-height: 1.5; margin: 0 0 var(--stack); }
.banner b { color: var(--ink); }

/* KPI tiles — same height, caption clamps to 2 lines */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 0 0 var(--stack); }
.kpis + .kpis { margin-top: calc(var(--gap) - var(--stack)); }   /* back-to-back grids share the 12px gap */
.kpi { min-height: 96px; display: flex; flex-direction: column; padding: 14px var(--pad); }
.kpi b { display: block; font-size: 26px; line-height: 1.15; margin-bottom: 4px; font-weight: 700; letter-spacing: -0.02em; }
.kpi span, .kpi .sub { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi { min-height: 86px; } .kpi b { font-size: 22px; } }

/* two-up chart boxes */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 0 0 var(--stack); }
.two > div { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--specular), var(--lift); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: var(--pad); min-height: 220px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

/* the one opaque surface: white tiles for printable things (QR, cards) */
.paper {
  position: relative; overflow: hidden; color: #1C2340; color-scheme: light; border-radius: var(--radius); padding: var(--pad);
  background:
    radial-gradient(520px 260px at -10% -20%, rgba(28,35,64,.07), transparent 62%),
    radial-gradient(420px 240px at 110% 115%, rgba(28,35,64,.05), transparent 60%),
    linear-gradient(180deg, #F3F4F9 0%, #E6E8F0 100%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent); pointer-events: none; }
.paper::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(28,35,64,.07) 1px, transparent 1px); background-size: 14px 14px; mask-image: radial-gradient(60% 50% at 50% 42%, transparent 55%, #000 100%); -webkit-mask-image: radial-gradient(60% 50% at 50% 42%, transparent 55%, #000 100%); }
.paper > * { position: relative; z-index: 1; }
.paper .well { background: #fff; padding: 12px; border-radius: var(--radius); box-shadow: 0 1px 0 #fff inset, 0 8px 24px rgba(28,35,64,.10), 0 0 0 1px rgba(28,35,64,.06); }
.paper .sub, .paper .hint { color: #5F6780; }
.paper .btn { background: #F3F5F9; border-color: #D9DEE8; color: #1C2340; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.paper .btn:hover { background: #E8ECF3; }
.paper .btn.primary { background: #111318; border-color: #111318; color: #fff; box-shadow: 0 6px 18px rgba(28,35,64,.18); }
.paper .btn.primary:hover { background: #262A33; }
.paper .btn:disabled { opacity: 1; background: #EEF0F5; border-color: #E0E3EA; color: #8A90A0; box-shadow: none; }
.paper .btn.primary:disabled { background: #D9DCE4; border-color: #D9DCE4; color: #5F6780; }
.paper input, .paper select { background: #fff; border-color: #D9DEE8; box-shadow: none; color: #1C2340; }
.paper .chip { background: rgba(28,35,64,.08); padding: 1px 6px; border-radius: 6px; font-weight: 600; }

/* ---------- 5. Controls --------------------------------------------------- */
.btn {
  border: 1px solid var(--edge); background: var(--glass); color: var(--ink); border-radius: var(--radius);
  padding: 10px 18px; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block;
  box-shadow: var(--specular); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.btn:hover { background: var(--glass-2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary:disabled { opacity: 1; background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); box-shadow: none; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.primary { background: linear-gradient(180deg, #FFFFFF, #D4D4D8); border-color: rgba(255,255,255,.6); color: #0A0A0A; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(255,255,255,.10); }
.btn.primary:hover { background: linear-gradient(180deg, #FFFFFF, #E4E4E7); }
.btn.go { background: linear-gradient(180deg, #5FDB9A, #3FC27E); border-color: rgba(255,255,255,.3); color: #03140A; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px rgba(76,208,138,.28); }
.btn.go:hover { background: linear-gradient(180deg, #6CE3A5, #4CD08A); }
.btn.danger { color: var(--warn); background: rgba(255,107,107,.08); border-color: rgba(255,107,107,.45); }
.btn.danger:hover { background: rgba(255,107,107,.16); }
.btn.invert { background: var(--ink); color: #000; border-color: var(--ink); box-shadow: none; }
td .btn.small { padding: 5px 9px; font-size: 12.5px; }
@media (max-width: 760px) { .btn { min-height: 40px; } }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--field) 0; }

/* segmented choice (one of N) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { border: 1px solid var(--edge); background: var(--glass); border-radius: var(--radius); padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 14px; box-shadow: var(--specular); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.seg button:hover { background: var(--glass-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #000; border-color: var(--ink); box-shadow: none; }

/* tags / chips */
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius); background: var(--glass-2); border: 1px solid var(--edge); font-size: 12px; font-weight: 600; }

/* form fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--field); }
.field label { font-weight: 600; font-size: 14px; }
.field label .hint { font-weight: 400; display: inline; margin: 0; }
.row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.row-3 { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: var(--gap); }
@media (max-width: 760px) { .row, .row-3 { grid-template-columns: 1fr; } }

input[type=text], input[type=date], input[type=url], input[type=number], input[type=tel], input[type=email], input[type=search], input[type=password], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 4px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.06); background: rgba(255,255,255,.08); }
select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=color] { width: 100%; height: 46px; padding: 5px 7px; background: rgba(255,255,255,.06); border: 1px solid var(--edge); border-radius: var(--radius); }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

/* prefixed input ($ 2200) */
.prefix { display: flex; align-items: center; border: 1px solid var(--edge); border-radius: var(--radius); background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.prefix span { padding: 10px 0 10px 12px; color: var(--muted); white-space: nowrap; }
.prefix input { border: 0; border-radius: 0; padding-left: 4px; background: transparent; box-shadow: none; min-height: 44px; }
.prefix:focus-within { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.prefix input:focus { box-shadow: none; }

/* toolbar row above a table */
.toolbar { display: flex; gap: var(--gap); align-items: center; margin-bottom: var(--stack); flex-wrap: wrap; }
.toolbar .spacer { flex: 1 1 auto; }                /* pushes buttons right */
.toolbar input { max-width: 340px; }
@media (max-width: 760px) { .toolbar input { max-width: none; width: 100%; } }

/* ---------- 6. Tables ----------------------------------------------------- */
.scroll { overflow-x: auto; }
.scroll:has(> table) { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--specular), var(--lift); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 4px var(--pad); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 4px; } th:last-child, td:last-child { padding-right: 4px; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; border-bottom-color: var(--edge-strong); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255,255,255,.025); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 40px 0; color: var(--muted); }
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--gap); }
.pager .btn.small { min-width: 34px; }

/* phones: a wide table becomes cards. Give each <td> data-label="Column". */
@media (max-width: 760px) {
  .scroll { overflow-x: hidden; } .scroll:has(> table) { padding: 0 12px; }
  table.cards-mobile, table.cards-mobile tbody { display: block; }
  table.cards-mobile thead { display: none; }
  table.cards-mobile tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  table.cards-mobile tbody tr:hover td { background: none; }
  table.cards-mobile td { display: block; border: 0; padding: 0; text-align: left !important; white-space: normal !important; min-width: 0; }
  table.cards-mobile td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
  table.cards-mobile td:not([data-label])::before { display: none; }
  table.cards-mobile td:first-child, table.cards-mobile td:nth-child(2), table.cards-mobile td[colspan] { grid-column: 1 / -1; }
}

/* ---------- 7. Overlays --------------------------------------------------- */
.modal, .drawer { position: fixed; inset: 0; display: none; z-index: 20; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal.open, .drawer.open { display: flex; }
.modal { align-items: center; justify-content: center; padding: 20px; }
.modal-card { max-width: 520px; width: 100%; }
.modal-card.danger { border-color: rgba(255,107,107,.5); }
.drawer .panel-side { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); overflow-y: auto; margin: 0; border-radius: 0; border-left: 1px solid var(--edge); background: rgba(14,14,18,.78); box-shadow: -16px 0 60px rgba(0,0,0,.55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: var(--pad) var(--pad) calc(40px + env(safe-area-inset-bottom, 0px)); }
.drawer .close { position: absolute; top: 16px; right: 16px; }
.saved-banner { display: none; margin-bottom: var(--gap); padding: var(--gap) var(--pad); border-radius: var(--radius); background: rgba(76,208,138,.12); color: #8FE6B7; border: 1px solid rgba(76,208,138,.4); font-weight: 600; }

/* ---------- 8. Charts (inline SVG) ---------------------------------------- */
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0 20px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
/* colour order for series: accent, ok, amber, warn. Grid lines rgba(255,255,255,.07), axis text var(--muted) 10px. */

/* ---------- 9. Key / legend box (e.g. achievements) ----------------------- */
.key { column-count: 2; column-gap: 28px; border: 1px solid var(--edge); border-radius: var(--radius); padding: var(--pad); margin: var(--stack) 0 0; font-size: 13px; color: var(--muted); background: var(--glass); box-shadow: var(--specular), var(--lift); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.key > span { display: block; break-inside: avoid; margin: 0 0 8px; line-height: 1.45; }
.key > span:last-child { margin-bottom: 0; }
.key b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.key h3 { column-span: all; margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.key .sect { column-span: all; margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
@media (max-width: 760px) { .key { column-count: 1; } }

/* ---------- 10. Footer ---------------------------------------------------- */
.site-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); margin-top: 40px; }

/* ---------- 11. Fallbacks and accessibility ------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header { background: rgba(10,10,14,.96); }
  .panel, .card, .kpi, .tile, .modal-card, .banner, .two > div, .scroll:has(> table), .key { background: rgba(22,22,28,.96); }
  .drawer .panel-side { background: rgba(14,14,18,.98); }
}
@media (prefers-reduced-transparency: reduce) {
  header, nav, .panel, .card, .kpi, .tile, .modal-card, .banner, .two > div, .scroll:has(> table), .key, .btn, .seg button, .drawer .panel-side { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22,22,28,.97); }
}
@media (prefers-reduced-motion: reduce) { .btn, nav button, .card { transition: none; } .btn:active { transform: none; } }
:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }