/* Compli components on top of the Practice design system (styles.css tokens). Light and dark themes; every colour,
   size, space, radius and shadow is a token. Dark navy and charcoal for chrome; the vivid green appears only when
   something is settled (compliant, processed, sent). */
:root{
  --app-bg:var(--surface-page-alt);
  --app-card:var(--surface-card);
  --app-sunken:var(--surface-sunken);
  --app-fg:var(--text-body);
  --app-heading:var(--text-heading);
  --app-muted:var(--teal-600);
  --app-border:var(--border-default);
  --app-link:var(--teal-600);
  --chrome-bg:var(--teal-900);
  --chrome-bg-alt:var(--teal-800);
  --chrome-fg:var(--df-white);
  --chrome-muted:var(--teal-100);
  --badge-ok-bg:var(--glow-50);--badge-ok-fg:var(--glow-800);
  --badge-warn-bg:var(--amber-50);--badge-warn-fg:var(--amber-700);
  --badge-bad-bg:var(--rust-50);--badge-bad-fg:var(--rust-700);
  --badge-info-bg:var(--teal-50);--badge-info-fg:var(--teal-700);
  --btn-bg:var(--teal-600);--btn-bg-hover:var(--teal-700);--btn-fg:var(--df-white);
  color-scheme:light;
}
[data-theme="dark"]{
  --app-bg:var(--teal-950);
  --app-card:var(--teal-900);
  --app-sunken:var(--teal-800);
  --app-fg:var(--teal-50);
  --app-heading:var(--df-white);
  --app-muted:var(--teal-200);
  --app-border:var(--teal-700);
  --app-link:var(--glow-300);
  --chrome-bg:var(--df-black);
  --chrome-bg-alt:var(--teal-950);
  --badge-ok-bg:var(--glow-900);--badge-ok-fg:var(--glow-100);
  --badge-warn-bg:var(--amber-700);--badge-warn-fg:var(--amber-50);
  --badge-bad-bg:var(--rust-700);--badge-bad-fg:var(--rust-50);
  --badge-info-bg:var(--teal-700);--badge-info-fg:var(--teal-50);
  --btn-bg:var(--teal-600);--btn-bg-hover:var(--teal-500);--btn-fg:var(--df-white);
  color-scheme:dark;
}
html,body{background:var(--app-bg);color:var(--app-fg)}
body{font:var(--type-body);margin:0;min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4{color:var(--app-heading);margin:0}
h1{font:var(--type-h1);letter-spacing:var(--tracking-tight)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
p{margin:0}
a{color:var(--app-link)}
a:hover{text-decoration:underline}
.icon{width:var(--space-20);height:var(--space-20);flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:var(--border-width-thick) solid var(--border-focus);outline-offset:var(--space-2);box-shadow:var(--ring-focus)}
.muted{color:var(--app-muted)}
.num,.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.stack{display:grid;gap:var(--stack)}
.row{display:flex;gap:var(--inline-gap);align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:var(--inline-gap);align-items:center;justify-content:space-between;flex-wrap:wrap}
.grid-2{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid-3{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--tap-target-min);padding:0 var(--control-pad-x-md);border-radius:var(--radius-control);border:var(--border-width-hairline) solid transparent;font:var(--type-button);cursor:pointer;text-decoration:none;transition:var(--transition-control);background:var(--btn-bg);color:var(--btn-fg)}
.btn:hover{background:var(--btn-bg-hover);text-decoration:none}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.btn.secondary{background:transparent;color:var(--app-heading);border-color:var(--app-border)}
.btn.secondary:hover{background:var(--app-sunken)}
.btn.ghost{background:transparent;color:var(--app-heading)}
.btn.ghost:hover{background:var(--app-sunken)}
.btn.danger{background:var(--rust-700);color:var(--df-white)}
.btn.small{min-height:var(--tap-target-min);padding:0 var(--control-pad-x-sm)}
.btn.on-dark{background:var(--surface-highlight);color:var(--text-on-highlight)}
.btn.on-dark:hover{background:var(--surface-highlight-hover)}
.btn.outline-dark{background:transparent;color:var(--df-white);border-color:var(--teal-200)}
.btn.outline-dark:hover{background:var(--teal-800)}

/* Cards, badges, KPIs */
.card{background:var(--app-card);border:var(--border-width-hairline) solid var(--app-border);border-radius:var(--radius-card);padding:var(--gutter-card);box-shadow:var(--shadow-xs)}
.card.compact{padding:var(--gutter-card-compact)}
.badge{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-8);border-radius:var(--radius-badge);font:var(--type-caption);font-weight:var(--weight-semibold);white-space:nowrap;background:var(--badge-info-bg);color:var(--badge-info-fg)}
.badge.ok{background:var(--badge-ok-bg);color:var(--badge-ok-fg)}
.badge.warn{background:var(--badge-warn-bg);color:var(--badge-warn-fg)}
.badge.bad{background:var(--badge-bad-bg);color:var(--badge-bad-fg)}
.kpis{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.kpi{background:var(--app-card);border:var(--border-width-hairline) solid var(--app-border);border-radius:var(--radius-card);padding:var(--space-16)}
.kpi .label{font:var(--type-label);color:var(--app-muted)}
.kpi .value{font:var(--weight-bold) var(--text-3xl)/1.1 var(--font-core);color:var(--app-heading);font-variant-numeric:tabular-nums;margin-top:var(--space-8)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--app-muted)}

/* Forms */
.field{display:grid;gap:var(--space-6)}
.field label{font:var(--type-label);color:var(--app-heading)}
.field .hint{font:var(--type-caption);color:var(--app-muted)}
.field .err{font:var(--type-caption);color:var(--text-danger);min-height:0}
[data-theme="dark"] .field .err{color:var(--rust-200)}
input,select,textarea{font:var(--type-body);color:var(--app-fg);background:var(--app-card);border:var(--border-width-hairline) solid var(--border-strong);border-radius:var(--radius-input);min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);width:100%;box-sizing:border-box}
textarea{min-height:calc(var(--tap-target-min) * 2.2);resize:vertical}
input[type="checkbox"],input[type="radio"]{width:var(--space-20);height:var(--space-20);min-height:0}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--rust-400);box-shadow:var(--ring-danger)}
.check{display:flex;gap:var(--space-8);align-items:center;min-height:var(--tap-target-min)}
.error-summary{border:var(--border-width-hairline) solid var(--rust-400);background:var(--badge-bad-bg);color:var(--badge-bad-fg);border-radius:var(--radius-card);padding:var(--space-12) var(--space-16)}
.form-grid{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.form-grid .wide{grid-column:1/-1}

/* Tables */
.table-wrap{overflow-x:auto;border:var(--border-width-hairline) solid var(--app-border);border-radius:var(--radius-card);background:var(--app-card);max-height:70vh}
table{border-collapse:collapse;width:100%;font:var(--type-body-sm)}
th,td{text-align:left;padding:var(--space-12) var(--space-12);border-bottom:var(--border-width-hairline) solid var(--app-border);vertical-align:top}
th{position:sticky;top:0;background:var(--app-sunken);color:var(--app-heading);font:var(--type-label);z-index:var(--z-raised);white-space:nowrap}
th button{all:unset;cursor:pointer;display:inline-flex;gap:var(--space-4);align-items:center;min-height:var(--tap-target-min)}
th button:focus-visible{outline:var(--border-width-thick) solid var(--border-focus)}
tbody tr:hover{background:var(--app-sunken)}
td.actions{white-space:nowrap}
.table-tools{display:flex;gap:var(--space-12);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--space-12)}
.table-tools input{max-width:20rem}
.pager{display:flex;gap:var(--space-8);align-items:center;justify-content:flex-end;padding:var(--space-8) 0}

/* States */
.skeleton{height:var(--space-16);border-radius:var(--radius-sm);background:var(--app-sunken);margin:var(--space-12) 0;animation:pulse 1.2s var(--ease-inout) infinite}
@keyframes pulse{50%{opacity:.5}}
.state{padding:var(--space-32) var(--space-16);text-align:center;display:grid;gap:var(--space-12);justify-items:center}
.notice{border-left:var(--border-width-accent) solid var(--amber-400);background:var(--badge-warn-bg);color:var(--badge-warn-fg);padding:var(--space-12) var(--space-16);border-radius:var(--radius-sm)}

/* Toast and dialog */
.toasts{position:fixed;right:var(--space-16);bottom:var(--space-16);display:grid;gap:var(--space-8);z-index:var(--z-toast);max-width:min(26rem,calc(100vw - 2rem))}
.toast{background:var(--teal-900);color:var(--df-white);padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);border-left:var(--border-width-accent) solid var(--glow-400)}
.toast.error{border-left-color:var(--rust-400)}
dialog{border:none;border-radius:var(--radius-dialog);padding:0;background:var(--app-card);color:var(--app-fg);box-shadow:var(--shadow-xl);width:min(42rem,calc(100vw - 2rem));max-height:90vh}
dialog::backdrop{background:var(--overlay-scrim)}
.dialog-body{padding:var(--space-24);display:grid;gap:var(--space-16);overflow:auto;max-height:80vh}
.dialog-foot{display:flex;gap:var(--space-8);justify-content:flex-end;flex-wrap:wrap}

/* Chart */
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--app-fg);font:var(--type-caption)}
.legend{display:flex;gap:var(--space-12);flex-wrap:wrap;font:var(--type-caption)}
.swatch{display:inline-block;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-xs);margin-right:var(--space-4);vertical-align:middle}

/* Public site */
.site-head{position:sticky;top:0;z-index:var(--z-header);background:var(--chrome-bg);color:var(--chrome-fg);border-bottom:var(--border-width-hairline) solid var(--border-inverse)}
.site-head .inner{max-width:var(--container-xl);margin:0 auto;padding:var(--space-8) var(--space-16);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:var(--site-header-h);box-sizing:border-box}
.site-head nav{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.site-head nav a{color:var(--chrome-fg);text-decoration:none;padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);min-height:var(--tap-target-min);display:inline-flex;align-items:center}
.site-head nav a:hover{background:var(--chrome-bg-alt)}
.brand{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--chrome-fg);text-decoration:none}
.brand img{height:var(--space-32);width:auto}
.theme-btn{background:transparent;border:var(--border-width-hairline) solid var(--teal-600);color:var(--chrome-fg);border-radius:var(--radius-control);min-height:var(--tap-target-min);min-width:var(--tap-target-min);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hero{background-image:linear-gradient(100deg,rgba(18,31,33,.94) 0%,rgba(18,31,33,.86) 55%,rgba(18,31,33,.72) 100%),url('/assets/stock-1.webp');background-size:cover;background-position:center;color:var(--df-white)}
.hero .inner{max-width:var(--container-xl);margin:0 auto;padding:var(--space-96) var(--space-16);display:grid;gap:var(--space-24)}
.hero h1{color:var(--df-white);font:var(--weight-bold) clamp(3rem,7vw,var(--text-6xl))/var(--leading-tight) var(--font-core);max-width:18ch;letter-spacing:var(--tracking-tightest)}
.hero p{font:var(--type-body-lg);max-width:var(--measure-narrow);color:var(--teal-50)}
.hero .eyebrow{color:var(--glow-300)}
.section{max-width:var(--container-xl);margin:0 auto;padding:var(--section-y-compact) var(--space-16);display:grid;gap:var(--space-32)}
.section-head{display:grid;gap:var(--space-12);max-width:var(--measure-prose)}
.feature{display:grid;gap:var(--space-8)}
.feature .icon{width:var(--space-32);height:var(--space-32);color:var(--app-link)}
.media{border-radius:var(--radius-media);width:100%;height:100%;min-height:16rem;object-fit:cover}
.plans{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:stretch}
.plan{display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--space-12);height:100%}
.plan .price{font:var(--weight-bold) var(--text-4xl)/1 var(--font-core);color:var(--app-heading);white-space:nowrap;font-variant-numeric:tabular-nums}
.site-foot{background:var(--chrome-bg);color:var(--chrome-muted)}
.site-foot .inner{max-width:var(--container-xl);margin:0 auto;padding:var(--space-48) var(--space-16);display:grid;gap:var(--space-24);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.site-foot h2{font:var(--type-h4);color:var(--df-white)}
.site-foot a{color:var(--teal-100)}
.site-foot p,.site-foot li{color:var(--teal-100);font:var(--type-body-sm)}
.trust{display:flex;gap:var(--space-8);align-items:center}

/* Admin console */
.console{display:grid;grid-template-columns:var(--app-sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--chrome-bg);color:var(--chrome-fg);padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-16);position:sticky;top:0;height:100vh;box-sizing:border-box;overflow:auto}
.sidebar nav{display:grid;gap:var(--space-2)}
.sidebar nav a{display:flex;align-items:center;gap:var(--space-12);color:var(--chrome-muted);text-decoration:none;padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);min-height:var(--tap-target-min)}
.sidebar nav a:hover{background:var(--chrome-bg-alt);color:var(--chrome-fg)}
.sidebar nav a[aria-current="page"]{background:var(--teal-700);color:var(--df-white);box-shadow:inset var(--border-width-accent) 0 0 var(--glow-400)}
.sidebar .who{font:var(--type-caption);color:var(--chrome-muted);margin-top:auto;word-break:break-all}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-8) var(--space-24);background:var(--app-card);border-bottom:var(--border-width-hairline) solid var(--app-border);position:sticky;top:0;z-index:var(--z-sticky);min-height:var(--app-topbar-h);box-sizing:border-box}
.topbar .theme-btn{color:var(--app-heading);border-color:var(--app-border)}
.main{padding:var(--space-24);display:grid;gap:var(--space-24);align-content:start;min-width:0}
.page-head{display:flex;justify-content:space-between;gap:var(--space-16);align-items:flex-end;flex-wrap:wrap}
.page-head p{color:var(--app-muted);max-width:var(--measure-prose);margin-top:var(--space-4)}
.menu-btn{display:none}
.split{display:grid;gap:var(--space-24);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.split.side{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.tree{display:grid;gap:var(--space-2)}
.tree button{all:unset;cursor:pointer;display:flex;gap:var(--space-8);align-items:center;padding:var(--space-8);border-radius:var(--radius-control);min-height:var(--tap-target-min);box-sizing:border-box;width:100%;color:var(--app-fg)}
.tree button[aria-pressed="true"]{background:var(--app-sunken);font-weight:var(--weight-semibold)}
.tree button:focus-visible{outline:var(--border-width-thick) solid var(--border-focus)}
.comment{border-left:var(--border-width-accent) solid var(--app-border);padding:var(--space-8) var(--space-12);background:var(--app-sunken);border-radius:var(--radius-sm)}
.comment.internal{border-left-color:var(--amber-400)}
.qa{display:grid;gap:var(--space-4);padding:var(--space-12) 0;border-bottom:var(--border-width-hairline) solid var(--app-border)}

@media (max-width:56em){
  .console{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(18rem,85vw);transform:translateX(-100%);transition:transform var(--duration-panel) var(--ease-standard);z-index:var(--z-dialog)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-xl)}
  .menu-btn{display:inline-flex}
  .main{padding:var(--space-16)}
  .topbar{padding:var(--space-8) var(--space-12)}
  .split,.split.side{grid-template-columns:1fr}
  .hero .inner{padding:var(--space-64) var(--space-16)}
  .site-head nav .hide-sm{display:none}
}