/* AideaMaker site design baseline (site-design skill, SD-01 to SD-05, SD-15 to SD-17, SD-39).
   Loaded LAST on every shell (public, client portal, agent console, admin console) so it wins over older rules.
   - The page is a light theme tone with a themed background drawn in code (static/img/bg-*.svg, made by the
     skill's make_background.py from the brand navy), never white.
   - Each area and each band of a long public page has its own light background (the section registry below,
     recorded in site-design.json "sections").
   - Tiles, cards and panels are white with a border and a resting shadow (at least 1.20:1 on every background).
   - Dark mode: the same separation inverted, switched only by the floating button (static/js/theme.js).
   Author: Jeremiah Buttler */

/* ---- tokens (light) ------------------------------------------------------------------------------------------ */
:root{
  --page-bg:#D6E3EE;
  --page-img:url("../img/bg-signal.svg");
  --tile-bg:#FFFFFF;
  --tile-border:#AFC2CF;
  --tile-shadow:0 1px 2px rgba(20,50,80,.10),0 6px 18px rgba(20,50,80,.10);
  --tile-gap:1.5rem;
  --text:#0B1B2B;
  --bar-bg:#0B1B2B;          /* the navy top bars (portal, agent console, admin) in both modes */
  /* the section registry: each top-level area and each public band */
  --section-bg-public:#D6E3EE;
  --section-bg-portal:#D2E6E2;
  --section-bg-manage:#DCE5D3;
  --section-bg-admin:#DCDFEE;
  --section-bg-hero:#DFE9F3;
  --section-bg-alt:#CADCE9;
  --section-bg-band:#D0E4EB;
  --section-bg-cta:#D5DCF0;
  --section-img-portal:url("../img/bg-signal-portal.svg");
  --section-img-admin:url("../img/bg-signal-admin.svg");
  /* muted text a step darker so it keeps 4.5:1 on every tinted background */
  --slate:#4A5A6A;
}

/* ---- tokens (dark: the page darker than the tiles, the same separation) ------------------------------------ */
:root[data-theme="dark"]{
  --page-bg:#10171E;
  --page-img:url("../img/bg-signal-dark.svg");
  --tile-bg:#1F2A35;
  --tile-border:#3F4D57;
  --tile-shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.35);
  --text:#E6EDF3;
  --section-bg-public:#10171E;
  --section-bg-portal:#0F1A19;
  --section-bg-manage:#13180F;
  --section-bg-admin:#14151F;
  --section-bg-hero:#0F1820;
  --section-bg-alt:#0D141B;
  --section-bg-band:#0C171A;
  --section-bg-cta:#121725;
  --section-img-portal:url("../img/bg-signal-portal-dark.svg");
  --section-img-admin:url("../img/bg-signal-admin-dark.svg");
  /* the site's own colour tokens, re-pointed for dark */
  --ink:#E6EDF3; --ink-soft:#D5DEE7; --paper:#1F2A35; --mist:#18222C; --line:#3A4652; --slate:#A9B6C3;
  --brand-600:#7CC4F0; --brand-700:#A5D6F5; --ink-70:rgba(230,237,243,.75); --ink-55:rgba(230,237,243,.6);
  --c3-line:rgba(230,237,243,.14); --shadow:0 14px 40px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---- alias block (SD-04): pages from other skills follow the same tokens --------------------------------- */
:root,:root[data-theme="dark"]{
  --surface:var(--tile-bg);
  --am-menu-surface:var(--tile-bg);
}
.analytics,.an-wrap,[data-analytics]{--bg:var(--page-bg);--surface:var(--tile-bg);--surface2:var(--mist);--border:var(--tile-border)}
[data-site="aideamaker"]{--aiu-bg:var(--page-bg);--aiu-surface:var(--tile-bg);--aiu-border:var(--tile-border)}
.gf-home{--gf-paper:var(--tile-bg);--gf-line:var(--tile-border);--gf-slate:var(--slate);--gf-ink:var(--ink)}
:root[data-theme="dark"] .gf-home{--gf-mist:var(--mist);--gf-brand:var(--brand-600)}
/* What's New tile: its own dark block assumed the old inverted tokens; point it at the dark set */
:root[data-theme="dark"]{--wn-surface:var(--tile-bg);--wn-rail:var(--mist);--wn-text:var(--ink);--wn-head:var(--ink);
  --wn-muted:var(--slate);--wn-rule:var(--tile-border);--wn-accent:var(--spark);--wn-num:var(--spark);--wn-link:var(--brand-600)}

/* ---- the page and its sections (SD-01 to SD-03) ----------------------------------------------------------- */
body,body.admin,body.portal{
  background:var(--section-img,var(--page-img)) center bottom / cover no-repeat,var(--section-bg,var(--page-bg));
  color:var(--ink);
}
body[data-section="public"],body:not([data-section]){--section-bg:var(--section-bg-public)}
body[data-section="portal"]{--section-bg:var(--section-bg-portal);--section-img:var(--section-img-portal)}
body[data-section="manage"]{--section-bg:var(--section-bg-manage);--section-img:var(--section-img-portal)}
body[data-section="admin"]{--section-bg:var(--section-bg-admin);--section-img:var(--section-img-admin)}

/* public bands: each band keeps its own tint; text never sits on the art without a tint behind it */
.page-hero,.hero,.gf-hero{background:var(--section-bg-hero)}
.sec.alt,.gf-step.gf-s1,.ind-related-sec,.fit-them{background:var(--section-bg-alt)}
.gf-guard,.gf-step.gf-s3{background:var(--section-bg-band)}
.sec.cta-band,.gf-final{background:var(--section-bg-cta);color:var(--ink)}
.cta-band h2,.cta-band .lede,.cta-band p{color:var(--ink)}
.cta-band .lede{opacity:1}
.cta-band .btn-ghost-light{color:var(--brand-600);border-color:var(--tile-border);background:var(--tile-bg)}
.site-head{background:color-mix(in srgb,var(--tile-bg) 94%,transparent);border-bottom-color:var(--tile-border)}

/* ---- tiles (SD-01): white, an edge and a resting shadow --------------------------------------------------- */
.card,.tile,.panel,.apanel,.acard,.portal-card,.login-card,.cblock,.pending-card,.spark-chat,.amodal-card,
.an-card,.example-card,.ind-pkg-card,.ind-deliv-card,.deliv-frame,.hvac-card,.gf-mr-card,.gf-pain,.tw-panel,.gf-gsc,
.gf-gcard,.gf-chart-wrap,.onb-choice,.nav-drop-menu,.nav-try-menu,.wn,dialog{
  background:var(--tile-bg);
  border:1px solid var(--tile-border);
  box-shadow:var(--tile-shadow);
}
.apanel>h2:first-child::before,.acard::before{background:linear-gradient(180deg,var(--spark),var(--brand-600))}

/* dark: fills that were written as white literals follow the tile token */
:root[data-theme="dark"] :is(.hvac-card,.c3-float-chip,.c3-vs-them,.c3-vs-orb,.c3-pays-stat,.c3-pays-visual,.ind-integ,
  .ind-uh,.gf-flag,.gf-tchip,.gf-rail-dot,.tw-chip,.c3-btn-ghost,.btn-ghost,.est-results,.aset-ctl input,.aset-ctl select,
  .aform input,.aform select,.aform textarea,.filters input,.filters select,.cblock textarea,.cblock input,
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],
  input[type=tel],select,textarea){background:var(--tile-bg);color:var(--ink);border-color:var(--tile-border)}
:root[data-theme="dark"] .atable thead th{background:var(--mist)}
:root[data-theme="dark"] .aset-savebar{background:linear-gradient(180deg,transparent,var(--section-bg) 38%)}
:root[data-theme="dark"] .brand-rest,:root[data-theme="dark"] .brand{color:var(--ink)}
:root[data-theme="dark"] .navburger span{background:var(--ink)}
:root[data-theme="dark"] .gf-home{color:var(--ink)}
/* bars and panels drawn on the brand navy keep the navy in both modes (--ink turns light in dark mode) */
.portal-bar,.adm-bar,.hvac-quote-total,.skip{background:var(--bar-bg)}
:root[data-theme="dark"] :is(.hvac-card-body,.hvac-quote-card){background:var(--tile-bg)}
:root[data-theme="dark"] .hvac-bubble.ada{background:var(--mist);color:var(--ink)}

/* ---- shared pop-up menus (account menu, Admin console door, All pages) ----------------------------------- */
.sd-pop{position:relative}
.sd-pop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;border-radius:8px}
.sd-pop>summary::-webkit-details-marker{display:none}
.sd-pop>summary:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
.sd-menu{position:absolute;top:calc(100% + .4rem);left:0;min-width:220px;z-index:90;background:var(--tile-bg);color:var(--ink);
  border:1px solid var(--tile-border);border-radius:12px;box-shadow:var(--tile-shadow),0 18px 40px -20px rgba(11,27,43,.35);padding:.35rem}
.sd-menu--right{left:auto;right:0}
.sd-menu a,.sd-signout button{display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .7rem;min-height:40px;border-radius:8px;
  color:var(--ink);text-decoration:none;font:inherit;font-size:.92rem;background:none;border:0;cursor:pointer;text-align:left}
.sd-menu a:hover,.sd-menu a:focus-visible,.sd-signout button:hover,.sd-signout button:focus-visible{background:var(--mist);text-decoration:none;outline:none}
.sd-menu-head{padding:.55rem .7rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.3rem;display:flex;flex-direction:column}
.sd-menu-head b{font-family:var(--sans);font-size:.95rem}
.sd-role{display:inline-block;align-self:flex-start;margin-top:.25rem;font-size:.72rem;font-weight:700;padding:.1em .55em;border-radius:99px;
  background:color-mix(in srgb,var(--brand-600) 14%,transparent);color:var(--brand-600)}
.sd-signout{margin:.3rem 0 0;padding-top:.3rem;border-top:1px solid var(--line)}
.sd-signout button{color:var(--danger);font-weight:600}
.sd-signout--inline{display:inline;border:0;margin:0;padding:0}
.sd-signout--inline button{display:inline;width:auto;min-height:0;padding:0;color:var(--brand-600);font-weight:600}
.sd-av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font-size:.72rem;font-weight:700;
  background:var(--spark);color:#0B1B2B;font-family:var(--sans)}

/* ---- signed-in user bar: client portal and agent console (SD-15, SD-16) --------------------------------- */
.um-bar{flex-wrap:nowrap}
.um-dests{flex:1;justify-content:flex-start;margin-left:1.2rem;gap:.3rem}
.um-dests a[aria-current="page"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--spark)}
.um-acct>summary{color:#cdd9e4;padding:.35rem .5rem}
.um-acct>summary:hover{background:rgba(255,255,255,.07);color:#fff}
.um-who{font-size:.88rem;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-row2{width:100%;max-width:1350px;margin-inline:auto;background:var(--tile-bg);border-bottom:1px solid var(--tile-border)}
.um-row2-in{display:flex;gap:.2rem;padding:0 1.4rem;overflow-x:auto}
.um-row2 a{padding:.65rem .8rem;color:var(--slate);font-weight:600;font-size:.9rem;white-space:nowrap;border-bottom:2px solid transparent}
.um-row2 a:hover{color:var(--ink);text-decoration:none}
.um-row2 a[aria-current="page"]{color:var(--brand-600);border-bottom-color:var(--brand-600)}
.um-phonebar{display:none}
@media (max-width:1023px){
  .um-dests{display:none}
  .um-bar{padding:.5rem 1rem}
  .um-phonebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--tile-bg);border-top:1px solid var(--tile-border);
    box-shadow:0 -6px 18px rgba(11,27,43,.10);padding:0 .25rem env(safe-area-inset-bottom)}
  .um-phonebar>a,.um-more>summary{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;font-size:.78rem;font-weight:600;
    color:var(--slate);text-decoration:none;list-style:none;cursor:pointer;text-align:center}
  .um-more{flex:1;display:flex;position:static;min-width:0}
  .um-phonebar>a,.um-more>summary{min-width:0;padding:0 .2rem;line-height:1.2}
  .um-more>summary{width:100%}
  .um-more>summary::-webkit-details-marker{display:none}
  .um-phonebar>a[aria-current="page"]{color:var(--brand-600);box-shadow:inset 0 3px 0 var(--brand-600)}
  .um-sheet{position:fixed;left:.6rem;right:.6rem;bottom:62px;padding:.4rem;display:flex;flex-direction:column;border-radius:14px;
    box-shadow:var(--tile-shadow),0 -10px 40px -12px rgba(11,27,43,.45)}
  .um-more:not([open]) .um-sheet{display:none}
  .um-sheet a,.um-sheet .sd-signout button{display:flex;align-items:center;min-height:44px;padding:.5rem .8rem;color:var(--ink);border-radius:8px;font-size:.95rem}
  .um-sheet .sd-signout{border-top:1px solid var(--line)}
  body.portal{padding-bottom:64px}
  .theme-switch{bottom:76px}
}

/* ---- the floating light/dark switch (standing-rules) ---------------------------------------------------- */
.theme-switch{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:95;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--tile-bg);color:var(--ink);border:1px solid var(--tile-border);box-shadow:var(--tile-shadow)}
.theme-switch:hover{transform:translateY(-1px)}
.theme-switch:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
.theme-switch .ts-sun{display:none}
:root[data-theme="dark"] .theme-switch .ts-sun{display:block}
:root[data-theme="dark"] .theme-switch .ts-moon{display:none}
/* the Talk to Ada launcher sits above the switch so the two never overlap */
.ada-launch{bottom:76px}
@media (prefers-reduced-motion:reduce){.theme-switch:hover{transform:none}}

/* ---- print (SD-39): no background art, floating buttons, tooltips or navigation ------------------------- */
@media print{
  body,body.admin,body.portal{background:#fff !important;color:#000}
  .theme-switch,.ada-launch,.site-head,.adm-bar,.adm-tabs,.adm-side,.portal-bar,.um-phonebar,.um-row2,.bugr-foot,
  .tip-btn,.tip-pop,.skip{display:none !important}
  .card,.tile,.panel,.apanel,.acard,.portal-card{box-shadow:none;border-color:#999}
}