/* Aion — component layer on the Civic token system. Corporate trust: navy and charcoal.
   Colours, sizes, spaces, radii and shadows come from tokens/*. The only values defined here are
   theme TOKENS (dark theme, plus a few text tints adapted from the system's own hues so text
   clears WCAG AA). */
:root{
  --df-text-muted:#535A66;
  --aion-danger-text:#9A2A12;
  --aion-warn-text:#6B4600;
  --aion-ok-text:#0B5148;
  --aion-hero-overlay:linear-gradient(100deg, rgba(8,22,50,.92) 0%, rgba(10,36,80,.82) 55%, rgba(10,36,80,.55) 100%);
  --aion-badge-ok-bg:var(--df-teal-100);
  --aion-badge-ok-fg:var(--aion-ok-text);
  --aion-badge-warn-bg:var(--df-amber-100);
  --aion-badge-warn-fg:var(--aion-warn-text);
  --aion-badge-bad-bg:var(--df-orange-100);
  --aion-badge-bad-fg:var(--aion-danger-text);
  --aion-badge-info-bg:var(--df-navy-100);
  --aion-badge-info-fg:var(--df-navy-900);
  --aion-sidebar:var(--df-navy-900);
  --aion-chart-a:var(--df-navy-500);
  --aion-chart-b:var(--df-teal-500);
  color-scheme:light;
}
[data-theme="dark"]{
  --df-bg-page:#0D1424;
  --df-bg-header:#0A1120;
  --df-surface-card:#151F33;
  --df-surface-sunken:#101A2C;
  --df-surface-inverse:#0A1120;
  --df-text-heading:#F1F4F9;
  --df-text-body:#E6EBF3;
  --df-text-muted:#A8B3C7;
  --df-text-link:#8DB8FF;
  --df-text-link-hover:#C6DBFF;
  --df-border-subtle:#2B3A57;
  --df-border-strong:#3B4D70;
  --df-action-ghost-hover:#1C2C4D;
  --df-focus-ring:#8DB8FF;
  --aion-danger-text:#FFB4A3;
  --aion-warn-text:#FFD88A;
  --aion-ok-text:#9FF0E2;
  --aion-badge-ok-bg:#0F3B37;
  --aion-badge-ok-fg:#BFF3EA;
  --aion-badge-warn-bg:#3D2E0A;
  --aion-badge-warn-fg:#FFE2A8;
  --aion-badge-bad-bg:#451A12;
  --aion-badge-bad-fg:#FFC9BC;
  --aion-badge-info-bg:#1C2C4D;
  --aion-badge-info-fg:#CFDCF2;
  --aion-sidebar:#0A1120;
  --aion-chart-a:#6F95D6;
  color-scheme:dark;
}
html,body{max-width:100%;overflow-x:hidden}
body{min-height:100vh}
.icon{width:1.25rem;height:1.25rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--df-space-2);top:-100px;background:var(--df-surface-card);color:var(--df-text-body);padding:var(--df-space-2) var(--df-space-4);border-radius:var(--df-radius-sm);z-index:100}
.skip:focus{top:var(--df-space-2)}
.money,.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font:var(--df-type-mono)}
.muted{color:var(--df-text-muted)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--df-gutter-mobile)}
@media(min-width:768px){.wrap{padding:0 var(--df-gutter-wide)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--df-space-2);min-height:var(--df-hit-min);padding:0 var(--df-space-5);border-radius:var(--df-radius-md);border:var(--df-border-width) solid transparent;font:var(--df-type-label);cursor:pointer;text-decoration:none;transition:var(--df-transition-control);background:var(--df-surface-card);color:var(--df-text-body);border-color:var(--df-border-strong)}
.btn:hover{background:var(--df-action-ghost-hover);color:var(--df-text-body)}
.btn:active{transform:scale(var(--df-press-scale))}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--df-action-primary);color:var(--df-on-action-primary);border-color:transparent}
.btn-primary:hover{background:var(--df-teal-300);color:var(--df-on-action-primary)}
.btn-secondary{background:var(--df-action-secondary);color:var(--df-on-action-secondary);border-color:transparent}
.btn-secondary:hover{background:var(--df-action-secondary-hover);color:var(--df-on-action-secondary)}
.btn-danger{background:var(--aion-badge-bad-bg);color:var(--aion-badge-bad-fg);border-color:transparent}
.btn-danger:hover{filter:brightness(.97);color:var(--aion-badge-bad-fg)}
.btn-ghost{background:transparent;border-color:transparent;color:inherit}
.btn-sm{min-height:var(--df-hit-min);padding:0 var(--df-space-3)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--df-space-2)}

/* Forms */
.field{display:grid;gap:var(--df-space-1);margin-bottom:var(--df-space-4)}
.field label{font:var(--df-type-label);color:var(--df-text-heading)}
.field .hint{font:var(--df-type-caption);color:var(--df-text-muted)}
.field .err{font:var(--df-type-caption);color:var(--aion-danger-text);min-height:0}
input,select,textarea{font:var(--df-type-body);color:var(--df-text-body);background:var(--df-surface-card);border:var(--df-border-width) solid var(--df-border-strong);border-radius:var(--df-radius-md);min-height:var(--df-hit-min);padding:var(--df-space-2) var(--df-space-3);width:100%;max-width:100%}
textarea{min-height:6rem;resize:vertical}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--df-orange-600)}
input[type="checkbox"]{width:1.25rem;min-height:1.25rem;height:1.25rem;accent-color:var(--df-navy-700)}
.check{display:flex;align-items:center;gap:var(--df-space-2);min-height:var(--df-hit-min)}
.grid-2{display:grid;gap:var(--df-space-4);grid-template-columns:1fr}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:var(--df-space-4);grid-template-columns:1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.err-summary{background:var(--aion-badge-bad-bg);color:var(--aion-badge-bad-fg);padding:var(--df-space-3) var(--df-space-4);border-radius:var(--df-radius-md);margin-bottom:var(--df-space-4)}

/* Surfaces */
.card{background:var(--df-surface-card);border:var(--df-border-width) solid var(--df-border-subtle);border-radius:var(--df-radius-lg);padding:var(--df-space-5);box-shadow:var(--df-shadow-1);min-width:0}
.card h2,.card h3{margin-bottom:var(--df-space-3)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--df-space-3);margin-bottom:var(--df-space-4)}
.card-head h2,.card-head h3{margin:0}
.stack{display:grid;gap:var(--df-space-4)}
.eyebrow{font:var(--df-type-eyebrow);letter-spacing:var(--df-tracking-eyebrow);text-transform:uppercase;color:var(--df-text-muted)}
.badge{display:inline-flex;align-items:center;gap:var(--df-space-1);padding:var(--df-space-1) var(--df-space-2);border-radius:var(--df-radius-pill);font:var(--df-type-caption);font-weight:var(--df-weight-semibold);white-space:nowrap;background:var(--aion-badge-info-bg);color:var(--aion-badge-info-fg)}
.badge-ok{background:var(--aion-badge-ok-bg);color:var(--aion-badge-ok-fg)}
.badge-warn{background:var(--aion-badge-warn-bg);color:var(--aion-badge-warn-fg)}
.badge-bad{background:var(--aion-badge-bad-bg);color:var(--aion-badge-bad-fg)}
.alert{padding:var(--df-space-3) var(--df-space-4);border-radius:var(--df-radius-md);background:var(--aion-badge-warn-bg);color:var(--aion-badge-warn-fg);display:flex;gap:var(--df-space-2);align-items:flex-start}
.alert-bad{background:var(--aion-badge-bad-bg);color:var(--aion-badge-bad-fg)}
.alert-ok{background:var(--aion-badge-ok-bg);color:var(--aion-badge-ok-fg)}
.kv{display:grid;grid-template-columns:minmax(7rem,40%) 1fr;gap:var(--df-space-2) var(--df-space-4)}
.kv dt{color:var(--df-text-muted);font:var(--df-type-label)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* Meters (savings and limits) */
.meter{display:grid;gap:var(--df-space-1)}
.meter-top{display:flex;justify-content:space-between;gap:var(--df-space-2);flex-wrap:wrap}
.meter-bar{height:var(--df-space-2);border-radius:var(--df-radius-pill);background:var(--df-surface-sunken);overflow:hidden;border:var(--df-border-width) solid var(--df-border-subtle)}
.meter-bar span{display:block;height:100%;background:var(--df-navy-500)}
.meter-bar.low span{background:var(--df-orange-500)}

/* Tables */
.table-tools{display:flex;flex-wrap:wrap;gap:var(--df-space-2);align-items:center;margin-bottom:var(--df-space-3)}
.table-tools input{max-width:20rem}
.table-wrap{overflow-x:auto;border:var(--df-border-width) solid var(--df-border-subtle);border-radius:var(--df-radius-md);max-height:70vh}
table{width:100%;border-collapse:collapse;font:var(--df-type-body)}
th,td{padding:var(--df-space-3);text-align:left;border-bottom:var(--df-border-width) solid var(--df-border-subtle);vertical-align:top}
th{position:sticky;top:0;background:var(--df-surface-sunken);color:var(--df-text-heading);font:var(--df-type-label);z-index:1;white-space:nowrap}
th button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:var(--df-space-1);align-items:center;min-height:var(--df-hit-min);padding:0}
td.r,th.r{text-align:right}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--df-action-ghost-hover)}
.pager{display:flex;gap:var(--df-space-2);align-items:center;justify-content:flex-end;margin-top:var(--df-space-3);flex-wrap:wrap}
.skel{height:1rem;border-radius:var(--df-radius-xs);background:linear-gradient(90deg,var(--df-surface-sunken),var(--df-border-subtle),var(--df-surface-sunken));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}
.empty{padding:var(--df-space-8) var(--df-space-4);text-align:center;display:grid;gap:var(--df-space-3);justify-items:center;color:var(--df-text-muted)}

/* Toasts and dialogs */
.toasts{position:fixed;bottom:var(--df-space-4);right:var(--df-space-4);left:var(--df-space-4);display:grid;gap:var(--df-space-2);justify-items:end;z-index:200;pointer-events:none}
.toast{pointer-events:auto;max-width:28rem;background:var(--df-surface-inverse);color:var(--df-text-on-navy);padding:var(--df-space-3) var(--df-space-4);border-radius:var(--df-radius-md);box-shadow:var(--df-shadow-3);display:flex;gap:var(--df-space-2);align-items:flex-start}
.toast.bad{background:var(--aion-badge-bad-bg);color:var(--aion-badge-bad-fg)}
dialog{border:0;border-radius:var(--df-radius-lg);padding:0;max-width:min(40rem,calc(100vw - 2rem));width:100%;background:var(--df-surface-card);color:var(--df-text-body);box-shadow:var(--df-shadow-3)}
dialog::backdrop{background:var(--df-scrim)}
.dlg-body{padding:var(--df-space-6);max-height:80vh;overflow:auto}
.dlg-foot{display:flex;justify-content:flex-end;gap:var(--df-space-2);padding:var(--df-space-4) var(--df-space-6);border-top:var(--df-border-width) solid var(--df-border-subtle);flex-wrap:wrap}

/* Public site */
.topbar{position:sticky;top:0;z-index:50;background:var(--df-bg-header);color:var(--df-text-on-navy);border-bottom:var(--df-border-width) solid var(--df-border-on-navy)}
.topbar .wrap{display:flex;align-items:center;gap:var(--df-space-4);min-height:4rem}
.brand{display:flex;align-items:center;gap:var(--df-space-2);color:var(--df-text-on-navy);text-decoration:none;font-weight:var(--df-weight-extrabold);letter-spacing:var(--df-tracking-wordmark);font-size:var(--df-size-headline)}
.brand:hover{color:var(--df-text-on-navy)}
.brand img{height:2rem;width:auto}
.nav{display:flex;gap:var(--df-space-1);margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a,.nav button.navlink{color:var(--df-text-on-navy);text-decoration:none;padding:0 var(--df-space-3);min-height:var(--df-hit-min);display:inline-flex;align-items:center;border-radius:var(--df-radius-sm);font:var(--df-type-label);background:none;border:0;cursor:pointer}
.nav a:hover,.nav button.navlink:hover,.nav a[aria-current="page"]{background:rgba(255,255,255,.12);color:var(--df-text-on-navy)}
.nav .hide-sm{display:none}
@media(min-width:820px){.nav .hide-sm{display:inline-flex}}
.theme-btn{color:var(--df-text-on-navy);background:transparent;border:var(--df-border-width) solid var(--df-border-on-navy);border-radius:var(--df-radius-sm);min-height:var(--df-hit-min);min-width:var(--df-hit-min);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.theme-btn:hover{background:rgba(255,255,255,.12)}
.hero{background-color:var(--df-navy-900);background-image:var(--aion-hero-overlay),url('/assets/hero-generated.webp');background-size:cover;background-position:center;color:var(--df-white)}
.hero .wrap{padding-top:var(--df-space-16);padding-bottom:var(--df-space-16);display:grid;gap:var(--df-space-6)}
.hero h1{color:var(--df-white);font-size:clamp(3rem,6vw,4.25rem);line-height:var(--df-leading-tight);letter-spacing:var(--df-tracking-display);max-width:16ch;font-weight:var(--df-weight-extrabold)}
.hero p.lead{font:var(--df-type-body-lg);color:var(--df-text-on-navy-muted);max-width:40rem}
.hero .eyebrow{color:var(--df-teal-300)}
.hero .btn:not(.btn-primary){background:transparent;color:var(--df-white);border-color:rgba(255,255,255,.5)}
.hero .btn:not(.btn-primary):hover{background:rgba(255,255,255,.12)}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--df-space-4);color:var(--df-text-on-navy-muted);font:var(--df-type-label)}
.trust-row span{display:inline-flex;gap:var(--df-space-2);align-items:center}
.section{padding:var(--df-space-16) 0}
.section-head{display:grid;gap:var(--df-space-2);margin-bottom:var(--df-space-8);max-width:44rem}
.section-head h2{font-size:clamp(1.75rem,3.5vw,2.25rem);line-height:var(--df-leading-snug)}
.section.alt{background:var(--df-surface-sunken)}
.features{display:grid;gap:var(--df-space-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.feature .ic{width:2.75rem;height:2.75rem;border-radius:var(--df-radius-md);display:grid;place-items:center;background:var(--aion-badge-info-bg);color:var(--aion-badge-info-fg);margin-bottom:var(--df-space-3)}
.feature p{color:var(--df-text-muted)}
.plans{display:grid;gap:var(--df-space-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:stretch}
.plan{display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--df-space-3);height:100%}
.plan .price{font-size:var(--df-size-title-2);font-weight:var(--df-weight-extrabold);color:var(--df-text-heading)}
.plan ul{margin:0;padding-left:var(--df-space-5);color:var(--df-text-muted);display:grid;gap:var(--df-space-1)}
.steps{display:grid;gap:var(--df-space-4);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));counter-reset:s}
.step{counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--df-radius-pill);background:var(--df-action-secondary);color:var(--df-on-action-secondary);font-weight:var(--df-weight-bold);margin-bottom:var(--df-space-3)}
.footer{background:var(--df-surface-inverse);color:var(--df-text-on-navy-muted);padding:var(--df-space-12) 0 var(--df-space-8)}
.footer a{color:var(--df-text-on-navy)}
.footer h3{color:var(--df-white);font:var(--df-type-label);margin-bottom:var(--df-space-2)}
.footer-grid{display:grid;gap:var(--df-space-6);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.footer small{display:block;margin-top:var(--df-space-8);border-top:var(--df-border-width) solid var(--df-border-on-navy);padding-top:var(--df-space-4)}
.portal{padding:var(--df-space-8) 0 var(--df-space-16)}
.portal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--df-space-3);margin-bottom:var(--df-space-6)}
.signin{max-width:28rem;margin:var(--df-space-12) auto}
.tabs{display:flex;gap:var(--df-space-1);border-bottom:var(--df-border-width) solid var(--df-border-subtle);margin-bottom:var(--df-space-4);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:var(--df-border-width-strong) solid transparent;padding:0 var(--df-space-4);min-height:var(--df-hit-min);font:var(--df-type-label);color:var(--df-text-muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--df-text-heading);border-bottom-color:var(--df-navy-500)}

/* Admin console */
.console{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1024px){.console{grid-template-columns:16rem 1fr}}
.side{background:var(--aion-sidebar);color:var(--df-text-on-navy);padding:var(--df-space-4);display:none;flex-direction:column;gap:var(--df-space-1)}
.side.open{display:flex;position:fixed;inset:0 auto 0 0;width:min(18rem,85vw);z-index:120;overflow:auto}
@media(min-width:1024px){.side{display:flex;position:sticky;top:0;height:100vh;overflow:auto}.side.open{position:sticky;width:auto}}
.side .brand{margin-bottom:var(--df-space-4)}
.side a{color:var(--df-text-on-navy-muted);text-decoration:none;display:flex;gap:var(--df-space-3);align-items:center;min-height:var(--df-hit-min);padding:0 var(--df-space-3);border-radius:var(--df-radius-sm);font:var(--df-type-label)}
.side a:hover{background:rgba(255,255,255,.08);color:var(--df-white)}
.side a[aria-current="page"]{background:rgba(255,255,255,.14);color:var(--df-white)}
.side .grp{font:var(--df-type-eyebrow);letter-spacing:var(--df-tracking-eyebrow);text-transform:uppercase;color:var(--df-text-on-navy-muted);margin:var(--df-space-4) var(--df-space-3) var(--df-space-1)}
.main{min-width:0;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:40;background:var(--df-surface-card);border-bottom:var(--df-border-width) solid var(--df-border-subtle);display:flex;align-items:center;gap:var(--df-space-3);padding:var(--df-space-2) var(--df-space-4);flex-wrap:wrap}
.bar .theme-btn{color:var(--df-text-body);border-color:var(--df-border-strong)}
.bar .theme-btn:hover{background:var(--df-action-ghost-hover)}
.bar select{width:auto;min-width:12rem}
.bar .who{margin-left:auto;display:flex;gap:var(--df-space-2);align-items:center;flex-wrap:wrap}
.menu-btn{display:inline-flex}
@media(min-width:1024px){.menu-btn{display:none}}
.content{padding:var(--df-space-6) var(--df-space-4);display:grid;gap:var(--df-space-6);min-width:0}
@media(min-width:768px){.content{padding:var(--df-space-8)}}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--df-space-3);align-items:flex-end}
.page-head p{color:var(--df-text-muted);max-width:48rem}
.kpis{display:grid;gap:var(--df-space-4);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.kpi .v{font-size:var(--df-size-title-1);font-weight:var(--df-weight-extrabold);color:var(--df-text-heading);line-height:var(--df-leading-snug)}
.split{display:grid;gap:var(--df-space-6);grid-template-columns:1fr}
@media(min-width:1200px){.split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--df-text-muted);font:var(--df-type-caption)}
.legend{display:flex;gap:var(--df-space-4);flex-wrap:wrap;font:var(--df-type-caption);color:var(--df-text-muted)}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:var(--df-radius-xs);margin-right:var(--df-space-1);vertical-align:middle}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--df-space-3)}
.timeline li{border-left:var(--df-border-width-strong) solid var(--df-border-strong);padding-left:var(--df-space-3)}
.scan-img{width:100%;max-height:70vh;object-fit:contain;border-radius:var(--df-radius-md);border:var(--df-border-width) solid var(--df-border-subtle);background:var(--df-surface-sunken)}
.drop{border:var(--df-border-width-strong) dashed var(--df-border-strong);border-radius:var(--df-radius-lg);padding:var(--df-space-8);text-align:center;display:grid;gap:var(--df-space-3);justify-items:center;background:var(--df-surface-sunken)}
.confirm-row{display:grid;grid-template-columns:1fr auto;gap:var(--df-space-2);align-items:end}
.confirm-row .check{margin-bottom:var(--df-space-4)}
.swatch{display:inline-block;width:1.25rem;height:1.25rem;border-radius:var(--df-radius-xs);vertical-align:middle;border:var(--df-border-width) solid var(--df-border-strong)}
@media print{.topbar,.footer,.no-print,.toasts{display:none!important}body{background:#fff;color:#000}}