/* Client-side companion to the staff Light / Dark / Auto theme. */
:root {
  color-scheme: light;
  --client-page:#f5f8fa; --client-card:#fff; --client-ink:#10202b;
  --client-soft:#5b7183; --client-line:#e0e8ed; --client-sunk:#f0f4f7;
  --client-ok-soft:#e7f8ef; --client-ok-line:#a9dec0;
  --client-warn-soft:#fff1dc; --client-warn-line:#efc27f;
  --client-info-soft:#e8f2ff; --client-info-line:#a9cbee;
  --client-rail:#075a88; --client-rail-fg:#eaf4fa; --client-rail-dim:#b9d3e4;
  --client-canvas:radial-gradient(circle at 7% 6%,rgba(5,76,124,.09),transparent 31%),radial-gradient(circle at 96% 96%,rgba(246,118,21,.08),transparent 32%),var(--client-page);
  --client-entry:radial-gradient(circle at 12% 10%,rgba(60,148,207,.34),transparent 38%),radial-gradient(circle at 92% 92%,rgba(246,118,21,.22),transparent 40%),#075a88;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --client-page:#0a0e12; --client-card:#151d24; --client-ink:#e6eef4;
    --client-soft:#93a7b6; --client-line:#22303b; --client-sunk:#131c23;
    --client-ok-soft:#10271d; --client-ok-line:#285c3f;
    --client-warn-soft:#2b2115; --client-warn-line:#6c4b25;
    --client-info-soft:#10243a; --client-info-line:#28527a;
    --client-rail:#0c1218; --client-rail-fg:#e6eef4; --client-rail-dim:#8ba1b3;
    --client-canvas:radial-gradient(circle at 8% 8%,rgba(20,91,143,.18),transparent 34%),radial-gradient(circle at 96% 96%,rgba(246,118,21,.17),transparent 34%),var(--client-page);
    --client-entry:radial-gradient(circle at 12% 10%,rgba(13,110,177,.30),transparent 40%),radial-gradient(circle at 92% 92%,rgba(246,118,21,.20),transparent 42%),#0a0e12;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --client-page:#0a0e12; --client-card:#151d24; --client-ink:#e6eef4;
  --client-soft:#93a7b6; --client-line:#22303b; --client-sunk:#131c23;
  --client-ok-soft:#10271d; --client-ok-line:#285c3f;
  --client-warn-soft:#2b2115; --client-warn-line:#6c4b25;
  --client-info-soft:#10243a; --client-info-line:#28527a;
  --client-rail:#0c1218; --client-rail-fg:#e6eef4; --client-rail-dim:#8ba1b3;
  --client-canvas:radial-gradient(circle at 8% 8%,rgba(20,91,143,.18),transparent 34%),radial-gradient(circle at 96% 96%,rgba(246,118,21,.17),transparent 34%),var(--client-page);
  --client-entry:radial-gradient(circle at 12% 10%,rgba(13,110,177,.30),transparent 40%),radial-gradient(circle at 92% 92%,rgba(246,118,21,.20),transparent 42%),#0a0e12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){--blue:#58a6ff;--blue-dark:#79b8ff;--ok:#3ec97a;--warn:#f0a44b;--info:#79b8ff}
}
:root[data-theme="dark"]{--blue:#58a6ff;--blue-dark:#79b8ff;--ok:#3ec97a;--warn:#f0a44b;--info:#79b8ff}

:root {
  --ground:var(--client-page); --surface:var(--client-card);
  --surface-2:var(--client-sunk); --ink:var(--client-ink);
  --ink-2:var(--client-soft); --ink-3:var(--client-soft);
  --line:var(--client-line); --line-strong:var(--client-line);
  --blue-soft:var(--client-sunk); --blue-line:var(--client-line);
  --ok-soft:var(--client-ok-soft); --ok-line:var(--client-ok-line);
  --warn-soft:var(--client-warn-soft); --warn-line:var(--client-warn-line);
  --info-soft:var(--client-info-soft); --info-line:var(--client-info-line);
  --shadow:none; --shadow-lift:none;
}

html,body{max-width:100%;overflow-x:hidden}
body{background:var(--client-page);color:var(--client-ink);padding:0}
body:has(> .account-shell),body:has(> .shell){background:var(--client-rail);padding:14px}
.account-shell,.shell{background:var(--client-canvas);border:1px solid var(--client-line);border-radius:16px;overflow:hidden;min-height:calc(100vh - 28px)}
.account-main,.main{background:var(--client-canvas)}
/* Page-specific font previews must not change the shared heading system. */
.account-main h1,.account-main h2,.account-main h3,.main h1,.main h2,.main h3{font-family:var(--sans);font-weight:700}
.account-main>header h1,.topbar .crumb h1{font-family:var(--sans);font-size:23px;font-weight:700;line-height:1.3}
.account-main>header,.account-welcome,.account-panel,.quick-grid a,.account-card,.onboarding-steps{background:var(--client-card);border-color:var(--client-line);color:var(--client-ink)}
.account-side,.side.account-review-side,.side.client-portal-side{background:var(--client-rail)!important}
.account-brand img,.account-review-logo,.token-review-logo{display:block;width:180px;max-width:100%;height:auto;background:transparent!important;padding:0!important}
[data-drawer-open-icon][hidden],[data-drawer-close-icon][hidden]{display:none!important}
.account-company,.account-side nav a,.account-review-side .nav a,.client-portal-side .nav a{color:var(--client-rail-fg)}
.account-company span,.account-side nav small,.account-review-side .nav-label,.client-portal-side .nav-label,.client-portal-side .foot{color:var(--client-rail-dim)}
.account-card p,.quick-grid span,.account-welcome p,.account-panel p{color:var(--client-soft)}
.onboarding-heading>span{background:var(--client-info-soft);color:var(--blue)}
.onboarding-steps li{background:var(--client-card);border-color:var(--client-line);color:var(--client-ink)}
.onboarding-steps li.complete{background:var(--client-ok-soft);border-color:var(--client-ok-line)}
.onboarding-steps p,.onboarding-steps .eyebrow{color:var(--client-soft)}
.onboarding-steps li.complete .step-number{background:var(--ok)}
.onboarding-steps li.complete em{color:var(--ok)}
.account-card input{background:var(--client-sunk);border-color:var(--client-line);color:var(--client-ink)}
.account-links a,.action-panel strong{color:#ff8a35}
.account-flash,.test-badge{background:var(--client-sunk);border:1px solid var(--client-line);color:var(--client-ink)}
.account-menu{background:var(--client-card)!important;border-color:var(--client-line)!important;color:var(--client-ink)}
.client-side-footer{margin-top:auto;padding-top:18px}
.client-side-footer .foot{margin-top:10px}
.account-side .nav,.account-review-side .nav,.client-portal-side .nav{gap:2px}
.account-side .nav-label,.account-review-side .nav-label,.client-portal-side .nav-label{margin:12px 0 4px;padding:0;font-size:11px;letter-spacing:.04em;line-height:1.35}
.account-side .nav a,.account-review-side .nav a,.client-portal-side .nav a{min-height:36px;padding:8px 10px;font-size:14px;line-height:1.35}
.account-side .nav a:hover,.account-review-side .nav a:hover,.client-portal-side .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.account-side .nav a.on,.account-review-side .nav a.on,.client-portal-side .nav a.on{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 3px 0 var(--client-accent)}
.account-main>header,.topbar{border-color:var(--client-line)}
.account-person b{color:#fff}
.pcard,.cl-day,.approvalgroup,.panel,.card,.submit-card,.choice{background:var(--client-card);border-color:var(--client-line)}
.pc-head,table.board-grid th,table.cal th{background:var(--client-sunk)}
.ag-row:hover,table.grid tbody tr:hover{background:var(--client-sunk)}
.btn,.tool,.cellbtn,.asklink,.cl-change,.monthpick select,
textarea,input[type="text"],input[type="date"],input[type="password"],select,
.qz input[type="text"],.qz textarea,.qz select,.qz-picklist,.qz-card,.qz-drop,#qz-pad{
  background-color:var(--client-card);border-color:var(--client-line);color:var(--client-ink)
}
.btn.quiet{background:transparent}
.flash.error,.confirm,.tag-month,.ag-asked{background:var(--client-sunk);border-color:var(--client-line);color:#ff9b8f}
.flash.ok,.flash.info,.lockbar,.life.waiting,.life.published,.life.making{background:var(--client-sunk);border-color:var(--client-line)}
table.cal td.out,table.cal td.past{background:var(--client-sunk)}
.tool:hover,.choice:hover,.qz-picklist-row:hover{background:var(--client-sunk)}
.tag-fmt{color:var(--ok)}
.qz-term{border-color:var(--client-line)}
.qz-sign-hint,.qz-hint,.qz-term-body,.qz-card em{color:var(--client-soft)}
dialog{background:var(--client-card);color:var(--client-ink);border-color:var(--client-line)}
dialog .dfoot{background:var(--client-card)}

.theme{display:flex;gap:2px;margin:10px 0 12px;background:rgba(255,255,255,.10);border-radius:8px;padding:2px}
.theme button{flex:1 1 0;background:transparent;border:0;color:var(--client-rail-dim);font:inherit;font-size:11.5px;font-weight:600;padding:6px 4px;border-radius:6px;cursor:pointer}
.theme button:hover{color:var(--client-rail-fg)}
:root[data-theme-choice="light"] .theme button[data-theme-set="light"],
:root[data-theme-choice="dark"] .theme button[data-theme-set="dark"],
:root[data-theme-choice="system"] .theme button[data-theme-set="system"],
:root:not([data-theme-choice]) .theme button[data-theme-set="system"]{background:#f67615;color:#fff}
.theme button:focus-visible{outline:2px solid #f67615;outline-offset:1px}
.theme button[aria-pressed="true"]{background:#b94700!important;color:#fff!important}
.account-button{background:#b94700}
.request-kind,.attachment-list a{color:#b94700}
.profile-editor input{border-color:var(--line);background:var(--surface);color:var(--ink)}
.profile-editor input:focus{outline-color:#b94700}
.account-wrap>.account-card>.theme{display:flex;width:fit-content;background:var(--client-sunk);margin:20px auto 0;padding:2px;gap:2px}
.account-wrap>.account-card>.theme button{color:var(--client-soft);width:auto;min-width:68px;margin:0;padding:5px 10px}

/* Login and one-off forms stay centered rather than becoming an app frame. */
body:has(.account-wrap){padding:0;background:var(--client-entry)}
@media(max-width:900px){
  body:has(> .account-shell),body:has(> .shell){padding:0;background:var(--client-page)}
  .account-shell,.shell{border:0;border-radius:0;min-height:100vh}
  .account-side,.side.account-review-side{width:min(286px,86vw);padding:20px}
}
.nav-icon{width:18px;text-align:center;font-size:15px;line-height:1;flex:0 0 18px}.view-icon{width:16px;text-align:center;font-size:14px;line-height:1}.ring>.fa-solid{font-size:24px}

/* Keep the rounded desktop app frame visible. Long pages scroll inside the
   main pane instead of pushing the shell's bottom edge below the viewport. */
@media(min-width:901px){
  html:has(body > .account-shell),html:has(body > .shell){height:100%;overflow:hidden;overscroll-behavior:none}
  body:has(> .account-shell),body:has(> .shell){height:100vh;overflow:hidden;overscroll-behavior:none}
  .account-shell,.shell{height:calc(100vh - 28px);min-height:0}
  .account-side,.side.account-review-side,.side.client-portal-side{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden}
  .account-main,.main{min-height:0;overflow-y:auto;overscroll-behavior:contain}
}