/* RateBase — shared design system (base layout & style for ALL pages) */
:root[data-theme="light"]{
  --page:oklch(96% 0.006 150); --bg:oklch(97.5% 0.005 150); --card:oklch(97.5% 0.005 150);
  --border:oklch(88% 0.006 150); --grid:oklch(92% 0.006 150);
  --text:oklch(20% 0.01 150); --muted:oklch(50% 0.01 150); --accent:oklch(38% 0.07 155);
  --search-bg:oklch(99% 0.002 150); --btn-bg:oklch(22% 0.01 150); --btn-text:oklch(97% 0.01 150);
  --placeholder:oklch(55% 0.01 150); --shadow:0 2px 0 oklch(85% 0.006 150);
  --good:oklch(42% 0.09 155); --warn:oklch(52% 0.12 65); --danger:oklch(52% 0.16 25);
  --thead-bg:oklch(30% 0.055 155); --thead-fg:oklch(96% 0.015 150);
}
:root[data-theme="dark"]{
  --page:oklch(15% 0.014 200); --bg:oklch(18% 0.014 200); --card:oklch(22% 0.014 200);
  --border:oklch(30% 0.014 200); --grid:oklch(26% 0.014 200);
  --text:oklch(96% 0.01 150); --muted:oklch(70% 0.01 200); --accent:oklch(72% 0.13 65);
  --search-bg:oklch(22% 0.014 200); --btn-bg:oklch(72% 0.13 65); --btn-text:oklch(15% 0.01 60);
  --placeholder:oklch(60% 0.01 200); --shadow:none;
  --good:oklch(72% 0.13 155); --warn:oklch(75% 0.13 70); --danger:oklch(65% 0.17 25);
  --thead-bg:oklch(72% 0.13 65); --thead-fg:oklch(18% 0.02 60);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--text);font-family:Helvetica,Arial,system-ui,sans-serif;
  transition:background .25s;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',monospace}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--text)}
a{color:var(--accent);text-decoration:none} a:hover{opacity:.82}
.num,td.num,.rate,.mono{font-variant-numeric:tabular-nums}

/* full-bleed blueprint page */
.page{min-height:100vh;background-image:linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px}
.container{max-width:1360px;margin:0 auto;padding:0 40px}

/* header / nav (shared, responsive) */
.nav{border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--page) 88%,transparent);backdrop-filter:blur(8px)}
.nav-in{max-width:1360px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:18px;letter-spacing:.02em;color:var(--text)}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:28px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.03em}
.nav-links a{color:var(--muted)} .nav-links a:hover{color:var(--text);opacity:1}
.nav-links a.active{color:var(--accent)}
.nav-actions{display:flex;gap:12px;align-items:center}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:3px;
  color:var(--text);width:38px;height:34px;cursor:pointer;font-size:16px}
.toggle{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;background:transparent;
  border:1px solid var(--border);color:var(--muted);padding:9px 13px;border-radius:2px;cursor:pointer;white-space:nowrap}

/* page header block */
.phead{padding:44px 0 26px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.phead h1{font-size:clamp(30px,4.5vw,44px);line-height:1.05;margin:0 0 10px}
.phead p{font-size:16px;color:var(--muted);max-width:640px;margin:0}

/* buttons */
.btn{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.02em;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;background:var(--btn-bg);color:var(--btn-text);
  border:1px solid transparent;padding:11px 18px;border-radius:4px;cursor:pointer;white-space:nowrap;transition:.12s}
.btn:hover{opacity:.9} .btn:disabled{opacity:.5;cursor:default}
.btn.accent{background:var(--accent);color:var(--btn-text)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.ghost:hover{background:color-mix(in oklab,var(--text) 6%,transparent);opacity:1}
.btn.sm{padding:8px 12px;font-size:12px}
.spin{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* forms */
input,select{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text);background:var(--search-bg);
  border:1px solid var(--border);border-radius:4px;padding:0 12px;height:38px;outline:none}
input:focus,select:focus{border-color:var(--accent)}
input::placeholder{color:var(--placeholder)}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
.toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
input.rate-in{width:104px;text-align:right;font-weight:600}
input.dirty{border-color:var(--accent)}

/* cards / stat tiles */
.card{background:var(--card);border:1px solid var(--border);border-radius:6px}
.cards{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.tile{flex:1;min-width:150px;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:15px 18px;font-family:'IBM Plex Mono',monospace}
.tile .k{font-size:11px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
.tile .v{font-size:22px;font-weight:600;color:var(--text);margin-top:4px}
.tile .v.good{color:var(--good)} .tile .v.warn{color:var(--warn)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px 18px}

/* tables */
.tablewrap{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:auto}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:var(--thead-bg);font-family:'IBM Plex Mono',monospace;text-align:left;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--thead-fg);padding:12px 16px;
  border-bottom:1px solid var(--thead-bg);white-space:nowrap}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top;font-size:13.5px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in oklab,var(--accent) 5%,transparent)}
td.num,th.num{text-align:right;font-family:'IBM Plex Mono',monospace}
.rate{font-weight:600;color:var(--accent);font-family:'IBM Plex Mono',monospace}
tfoot td{position:sticky;bottom:0;background:var(--card);border-top:2px solid var(--accent);font-weight:600;padding:13px 16px}
.src{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:3px}
.desc-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* tags / pills / badges */
.tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);border:1px solid var(--border);padding:2px 7px;border-radius:2px;white-space:nowrap}
.pill{font-family:'IBM Plex Mono',monospace;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:2px;white-space:nowrap}
.pill svg{width:11px;height:11px}
.pill.matched{color:var(--good);background:color-mix(in oklab,var(--good) 14%,transparent)}
.pill.review{color:var(--warn);background:color-mix(in oklab,var(--warn) 15%,transparent)}
.pill.lump{color:var(--muted);background:color-mix(in oklab,var(--muted) 14%,transparent)}
.confbar{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace}
.confbar .track{width:40px;height:4px;border-radius:2px;background:color-mix(in oklab,var(--text) 12%,transparent);overflow:hidden}
.confbar .fill{height:100%;background:var(--accent)}
.confbar.lo .fill{background:var(--warn)}
.confbar .n{font-size:11px;color:var(--muted)}
.note{color:var(--warn);font-family:'IBM Plex Mono',monospace;font-size:12px;margin-top:4px}

/* popover */
.sug-wrap{position:relative;display:inline-block}
.sug-btn{all:unset;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);margin-top:6px;display:inline-block}
.sug-btn:hover{text-decoration:underline}
.popover{position:absolute;z-index:30;top:100%;left:0;margin-top:6px;width:330px;max-width:82vw;background:var(--card);
  border:1px solid var(--border);border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:none}
.popover.open{display:block}
.popover .opt{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:3px;cursor:pointer}
.popover .opt:hover{background:color-mix(in oklab,var(--accent) 8%,transparent)}
.popover .opt .r{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;color:var(--accent)}
.popover .opt .d{font-size:12px;color:var(--text)} .popover .opt .s{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}

/* states */
.empty{text-align:center;padding:52px 24px;color:var(--muted);font-family:'IBM Plex Mono',monospace}
.empty h3{margin:0 0 6px;color:var(--text)} .empty p{margin:0 auto;max-width:340px;font-size:13px}
.skrow{height:44px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:18px;padding:0 16px}
.sk{height:11px;border-radius:3px;background:color-mix(in oklab,var(--text) 8%,transparent);animation:pulse 1.4s ease infinite}
@keyframes pulse{50%{opacity:.4}}
.foot{margin-top:16px;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:12px}
.var{font-family:'IBM Plex Mono',monospace;font-weight:600}
.muted{color:var(--muted)} .b{font-weight:600}

/* ---- app shell: sidebar layout for Workspace + Catalogue ---- */
.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:18px;
  padding:20px 16px;border-right:1px solid var(--border);
  background:color-mix(in oklab,var(--page) 55%,var(--card))}
/* sidebar chrome uses Space Grotesk (professional/UI) — mono stays for data only */
.side-logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;line-height:1.05;
  letter-spacing:-.02em;color:var(--text);display:block;padding:4px 0 10px}
.side-logo span{color:var(--accent)}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:6px;
  font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:500;color:var(--muted)}
.side-nav a:hover{background:color-mix(in oklab,var(--text) 6%,transparent);color:var(--text);opacity:1}
.side-nav a.active{background:color-mix(in oklab,var(--accent) 13%,transparent);color:var(--accent)}
/* tier 3 only: hidden by default so a paid user never sees an admin link flash */
.side-nav a.admin-only{display:none}
body[data-auth="admin"] .side-nav a.admin-only{display:flex}
.nav-links a.admin-only{display:none}
body[data-auth="admin"] .nav-links a.admin-only{display:block}
.side-sec{display:flex;flex-direction:column;gap:8px}
.side-h{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.side-sec .btn,.side-sec input,.side-sec select{width:100%}
.sidebar .btn{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:0}
.app-topbar .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.01em}
.side-row{display:flex;gap:6px}
.side-row .btn{flex:1}
.side-account{margin-top:auto;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.side-user{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-account .toggle{flex:1;text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:0}
.app-main{min-width:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px}
.app-main-in{max-width:1200px;margin:0 auto;padding:26px 32px 48px}
.app-topbar{display:none;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:30;background:color-mix(in oklab,var(--page) 88%,transparent);backdrop-filter:blur(8px)}
.sidebar-backdrop{display:none}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:264px;transform:translateX(-100%);
    transition:transform .2s ease;z-index:60}
  .sidebar.open{transform:none}
  .sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:55}
  .app-topbar{display:flex}
  .app-main-in{padding:18px 18px 40px}
}

/* ============================================================================
   PERMANENT DESIGN — cards, table header, icon chips (Dashboard-style redesign,
   decided 2026-07-28). Color tokens and typography are untouched by any of this.
   Scoped under `.app` (the sidebar-shell pages: Dashboard/Workspace/Catalogue/
   Approvals/Settings) so the homepage (`.page`/`.nav`) stays exactly as designed.
   ========================================================================= */
.app .tile,.app .panel,.app .card,.app .tablewrap,.app .addform{border-radius:14px}
.app .btn{border-radius:9px}
.app input,.app select{border-radius:9px}
.app .side-nav a{border-radius:10px}
.app .pill,.app .tag{border-radius:6px}
.app .dropzone{border-radius:14px}

.app .tile{padding:20px 22px}
.app .panel{padding:22px 24px}
.app .cards{gap:18px}
.app .side-nav a{padding:11px 14px}
.app .side-nav{gap:5px}
.app thead th,.app tbody td{padding:15px 18px}
.app .app-main-in{padding-top:34px}
.app .phead{padding-bottom:32px}

.app .tile,.app .panel,.app .card,.app .tablewrap{
  border-color:color-mix(in oklab,var(--border) 55%,transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px -16px rgba(0,0,0,.20)
}
html[data-theme="dark"] .app .tile,html[data-theme="dark"] .app .panel,
html[data-theme="dark"] .app .card,html[data-theme="dark"] .app .tablewrap{
  border-color:var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px -16px rgba(0,0,0,.6)
}
.app .side-nav a.active{box-shadow:0 1px 4px -1px color-mix(in oklab,var(--accent) 40%,transparent)}

.app thead th{
  background:var(--card);color:var(--text);border-bottom:2px solid var(--border);
  text-transform:none;font-weight:600;letter-spacing:.01em
}
.app tfoot td{background:var(--card)}

/* icon chips — the <span data-icon> markup is filled by app.js (RB_ICONS) */
.nav-icon,.tile-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav-icon svg,.tile-icon svg{width:100%;height:100%;stroke-width:1.9;fill:none;stroke:currentColor}
.nav-icon{
  width:27px;height:27px;border-radius:7px;margin-right:10px;padding:5px;
  background:color-mix(in oklab,var(--muted) 15%,transparent);color:var(--muted)
}
.side-nav a.active .nav-icon{background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--accent)}
.tile-icon{
  width:36px;height:36px;border-radius:10px;margin-bottom:12px;padding:8px;
  background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent)
}
.tile-icon svg{stroke-width:1.8}
.tile-icon.good{background:color-mix(in oklab,var(--good) 16%,transparent);color:var(--good)}
.tile-icon.warn{background:color-mix(in oklab,var(--warn) 16%,transparent);color:var(--warn)}
.tile-icon.muted{background:color-mix(in oklab,var(--muted) 18%,transparent);color:var(--muted)}

/* ---- responsive ---- */
@media(max-width:860px){
  .container,.nav-in{padding-left:20px;padding-right:20px}
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--card);border-bottom:1px solid var(--border);padding:8px 20px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
  .nav-links a:last-child{border-bottom:0}
  .nav-actions .cta{display:none}
  .toolbar{gap:10px}
  thead th,tbody td{padding:10px 12px}
}
@media(max-width:560px){
  .cards{gap:10px} .tile{min-width:calc(50% - 5px)}
}