/* ============================================================================
   AVERON CLIENT PORTAL — component styles
   Depends on portal.css for every token. Load order matters.
   ============================================================================ */

/* ---------- app shell ----------
   Hidden until requireSession() resolves, so the dashboard chrome cannot paint for
   a frame before the redirect to /login lands. The attribute is in the MARKUP, not
   applied by script, so it holds even if the JS is slow. */
#shell[hidden]{display:none}

/* ---------- notice bar ----------
   Sticky and first in the document: it must be readable at every scroll position,
   not only at the top where it can be scrolled past and screenshotted out of
   frame. This is the honesty banner — every figure on the page is invented. */
.notice{
  position:sticky;top:0;z-index:30;
  /* Light is the default theme, so the DEFAULT notice styling is the light one: a
     tinted panel with dark ink. Amber-on-white fails badly as text, which is why
     this is not a solid amber bar here. */
  background:var(--noticebg);color:var(--notice-ink);
  border-bottom:1px solid var(--noticeline);
  padding:9px 20px;font-size:var(--fs-0);font-weight:600;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
/* On DARK the solid amber bar works and reads louder, which is what an honesty
   banner should do. #1b1204 on #fbbf24 measures 11.08:1. */
html[data-theme="dark"] .notice{
  background:var(--notice);color:var(--notice-ink);border-bottom:0;
}
.notice[hidden]{display:none}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  min-height:var(--nav);padding:10px 20px;
  border-bottom:1px solid var(--line);background:var(--bg2);
}
.nav-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  width:100%;max-width:var(--w);margin:0 auto}
.who{margin-left:auto;text-align:right;font-size:var(--fs-0);line-height:1.35}
.who strong{display:block;color:var(--tx);font-weight:590}
.who span{display:block;color:var(--tx3);font-size:var(--fs--1)}
/* Icon-only control: 40x40 is above the 24x24 WCAG 2.2 SC 2.5.8 AA floor. */
.iconbtn{
  width:40px;height:40px;display:grid;place-items:center;flex:none;
  background:transparent;border:1px solid var(--line-ui);border-radius:var(--rs);
  color:var(--tx2);cursor:pointer;
  transition:color var(--t-base),border-color var(--t-base),background var(--t-base);
}
.iconbtn:hover{color:var(--ac-tx);border-color:var(--ac);background:var(--acdim)}
/* Show only the icon for the state you would switch TO — the convention users
   expect from a single-button toggle. Light is the DEFAULT theme, so the default
   icon is the moon ("switch to dark"). */
.ti-sun{display:none}
.ti-moon{display:block}
html[data-theme="dark"] .ti-sun{display:block}
html[data-theme="dark"] .ti-moon{display:none}

/* ---------- layout ---------- */
main{max-width:var(--w);margin:0 auto;padding:30px 20px 72px}
.pagehead{margin-bottom:26px}
h1{font-size:var(--fs-4);font-weight:680;letter-spacing:-.022em;line-height:1.2}
.pagehead p{color:var(--tx2);font-size:var(--fs-1);margin-top:5px}

/* Section label: a short gradient rule + a mono caps label. Lifted from the
   marketing site's section-label idiom so the two surfaces structure alike. */
.slabel{display:flex;align-items:center;gap:10px;margin:38px 0 14px}
.slabel::before{
  content:"";width:22px;height:2px;border-radius:2px;background:var(--grad);flex:none;
}
.slabel h2{
  font-family:var(--fm);font-size:var(--fs--1);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);
}
/* "Sample" tag — advisory, so it uses --notice and not --loss/--gain. */
.tag{
  font-family:var(--fm);font-size:var(--fs--1);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--notice);background:var(--noticebg);
  border:1px solid var(--noticeline);padding:2px 7px;border-radius:5px;
}
.tag[hidden]{display:none}

/* ---------- cards ----------
   --edge-hi is a 1px inner top highlight faking a light source above; it is what
   makes a flat dark panel read as a lifted physical object. Applied at REST. */
.card{
  background:var(--card);border:1px solid var(--line);border-top-color:var(--line-top);
  border-radius:var(--r);box-shadow:var(--elev-sm),var(--edge-hi);
}

/* ---------- metrics ---------- */
.metrics{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.metric{padding:16px 18px;position:relative;overflow:hidden}
/* A 2px accent bar keyed off the section colour, so a grid of cards reads as a
   region rather than four identical tiles. */
.metric::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--sc,var(--ac));opacity:.85;
}
.metric .lbl{font-size:var(--fs-0);color:var(--tx2);font-weight:590}
.metric .val{
  font-size:var(--fs-4);font-weight:700;letter-spacing:-.03em;margin:6px 0 3px;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.metric .dl{font-size:var(--fs--1);font-weight:650;display:flex;align-items:center;gap:5px}
/* loss/gain are the ONLY semantic colours here, and they mean exactly what they
   mean on the marketing site: direction of business outcome, never brand. */
.metric .dl.up{color:var(--gain)}
.metric .dl.down{color:var(--loss)}
.metric .dl.flat{color:var(--tx3)}
.metric .nt{font-size:var(--fs--1);color:var(--tx2);margin-top:8px;line-height:1.45}

/* ---------- panels ---------- */
.panel{padding:18px}
.chart{width:100%;height:160px;display:block;overflow:visible}
.chart .bar{fill:var(--ac);opacity:.8;transition:opacity var(--t-base)}
.chart .bar:hover{opacity:1}
.axis{font-size:10px;fill:var(--tx3);font-family:var(--fm)}

/* ---------- lead sources ---------- */
.stack{display:flex;height:10px;border-radius:6px;overflow:hidden;
  margin-bottom:15px;background:var(--card2)}
.stack i{display:block;height:100%}
.srcs{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.src{display:flex;align-items:center;gap:9px;font-size:var(--fs-0);color:var(--tx2)}
.src .dot{width:9px;height:9px;border-radius:3px;flex:none}
.src .pct{margin-left:auto;color:var(--tx);font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- row lists ---------- */
.rows{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--elev-sm)}
.row{background:var(--card);padding:13px 16px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;transition:background var(--t-base)}
.row:hover{background:var(--card2)}
.row .nm{font-weight:590;font-size:var(--fs-1)}
.row .dt{font-size:var(--fs--1);color:var(--tx3);margin-left:auto}
.chip{font-size:var(--fs--1);font-weight:650;padding:3px 9px;border-radius:var(--rp);
  white-space:nowrap;border:1px solid transparent}
/* "Live" is a state, not a win, so it uses the ACCENT rather than --gain. Reserving
   gain/loss for measured outcomes is what keeps those colours meaningful. */
.chip.live{color:var(--ac-tx);background:var(--acdim);border-color:var(--acline)}
.chip.review{color:var(--notice);background:var(--noticebg);border-color:var(--noticeline)}
.chip.sched{color:var(--ac-blue-tx);background:var(--acblue-dim);border-color:rgba(74,144,226,.3)}

/* ---------- automations ----------
   NOT buttons and NOT hoverable-as-controls. v1 is read-only: a control that looks
   actionable and does nothing is worse than an honest static row — the same reason
   /meet-the-team renders no play triangle on a card with no clip behind it. */
.autos{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.auto{padding:15px 16px}
.auto .top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.auto .ai{width:17px;height:17px;flex:none;color:var(--sc,var(--ac))}
.auto .nm{font-weight:620;font-size:var(--fs-1)}
.auto .desc{font-size:var(--fs-0);color:var(--tx2);line-height:1.5}
.led{width:7px;height:7px;border-radius:50%;flex:none;margin-left:auto}
.led.running{background:var(--gain);box-shadow:0 0 0 3px var(--gainbg)}
.led.paused{background:var(--tx3)}
.auto .st{font-family:var(--fm);font-size:var(--fs--1);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.auto .st.running{color:var(--gain)}
.auto .st.paused{color:var(--tx3)}
.ronote{font-size:var(--fs-0);color:var(--tx2);margin-top:14px;padding-left:12px;
  border-left:2px solid var(--acline);max-width:var(--measure)}

/* ---------- auth pages (login / 404) ---------- */
.authwrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.authcard{width:100%;max-width:410px}
.authbrand{display:flex;justify-content:center;margin-bottom:26px}
.authform{background:var(--card);border:1px solid var(--line);
  border-top-color:var(--line-top);border-radius:var(--r);padding:30px;
  box-shadow:var(--elev-md),var(--edge-hi)}
.authform h1{font-size:var(--fs-3);margin-bottom:6px}
.authform .sub{color:var(--tx2);font-size:var(--fs-0);margin-bottom:24px}
label{display:block;font-size:var(--fs-0);font-weight:590;color:var(--tx2);margin-bottom:6px}
/* 16px minimum on inputs is not cosmetic: iOS Safari zooms the viewport on focus
   for anything smaller, which visibly jerks the layout on a phone. */
input{
  width:100%;padding:12px 13px;font-family:inherit;font-size:max(16px,var(--fs-1));
  background:var(--bg);color:var(--tx);
  border:1px solid var(--line-ui);border-radius:var(--rs);margin-bottom:17px;
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
input:focus-visible{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acdim)}
/* role="alert" is announced only when the node is IN the DOM and becomes
   non-empty, so it is always present and toggled via hidden. */
.err{
  background:var(--lossbg);border:1px solid var(--loss);color:var(--loss);
  padding:10px 12px;border-radius:var(--rs);font-size:var(--fs-0);margin-bottom:17px;
}
.err[hidden]{display:none}
/* Pre-login honesty panel. Dashed, not solid: it is a note about the environment,
   not a component of the form. */
.demonote{
  margin-top:20px;padding:12px 14px;border-radius:var(--rs);
  background:var(--noticebg);border:1px dashed var(--noticeline);
  font-size:var(--fs-0);color:var(--tx2);line-height:1.5;
}
.demonote b{display:block;color:var(--tx);margin-bottom:3px;font-weight:620}
.authfoot{text-align:center;margin-top:22px;font-size:var(--fs-0);color:var(--tx3)}
.authfoot a{color:var(--tx2);display:inline-flex;align-items:center;gap:6px;
  min-height:44px;transition:color var(--t-base)}
.authfoot a:hover{color:var(--ac-tx)}

/* ---------- 404 ---------- */
.nf{text-align:center;max-width:420px}
.nf .logo{justify-content:center;margin-bottom:20px}
.nf h1{font-size:var(--fs-3);margin-bottom:8px}
.nf p{color:var(--tx2);font-size:var(--fs-0);margin-bottom:24px}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .who{order:3;margin-left:0;width:100%;text-align:left}
  .nav-in{gap:12px}
  main{padding:22px 16px 56px}
  .notice{font-size:var(--fs--1);padding:8px 14px;text-align:left}
}