/* Design options: every rule is switched by a data-* attribute on <html> (see app/lab.js). Loaded on demos and on any system with a saved design.
   Order matters: variables and themes first, then the options that override them, then the screens. */

/* ---- header variables: the top bar, the menu and the rail all read these ---- */

/* ---- themes: a whole look, not just a color ---- */
/* dark pages: the brand color is lightened so buttons and links stay readable; a color typed in the Brand box is adjusted the same way (see lab.js varsCss) */
html[data-mode=dark][data-accent=brand]{--ember:color-mix(in srgb,var(--brand,#086D80) 55%,#fff);--ember-h:color-mix(in srgb,var(--brand,#086D80) 40%,#fff);--ember-ink:color-mix(in srgb,var(--brand,#086D80) 40%,#fff);--on-ember:#0B1A20}

html[data-theme=dark]{--ink:#F1F6F7;--sec:#BAC8D0;--ter:#9BB0BE;--page:#0E171E;--card:#16232C;--line:#334650;--sep:#25363F;--tint:#1D2C37;--hover:#233640;--ring:#587482;--good:#73D6A0;--good-bg:#193E30;--warn:#F3C470;--warn-bg:#44341E;--danger:#F59AA4;--danger-bg:#4C252E;--info:#8CC3FD;--info-bg:#21384B;--briefing:#213743;--briefing-ink:#F1F6F7;--shadow:0 4px 16px rgba(0,0,0,.24);color-scheme:dark}
html[data-theme=paper]{--page:#FFFFFF;--card:#FFFFFF;--line:#D2D2D2;--sep:#E6E6E6;--tint:#F3F3F3;--hover:#FAFAFA;--ink:#111111;--sec:#4F4F4F;--ter:#737373;--r:3px;--hb:#FFFFFF;--hi:#111111;--hs:#4F4F4F;--hl:#D2D2D2;--hf:#F3F3F3;--hh:#EEEEEE;--rb:#FFFFFF}
html[data-theme=paper] .top{border-bottom:1px solid var(--line)}
html[data-theme=paper] .brief{background:var(--tint);color:var(--ink);border:1px solid var(--line)}
html[data-theme=paper] .brief .tag{color:var(--ember-ink)}
html[data-theme=paper] h1,html[data-theme=paper] h2,html[data-theme=paper] .kl-main{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:700}
html[data-theme=blueprint]{--good:#73D6A0;--good-bg:#193E30;--warn:#F3C470;--warn-bg:#44341E;--danger:#F59AA4;--danger-bg:#4C252E;--info:#8CC3FD;--info-bg:#21384B;--ink:#E6F2FF;--sec:#9FC2E4;--ter:#6F98BF;--page:#0A1F33;--card:#0F2B45;--line:#1F4468;--sep:#17385A;--tint:#12304D;--hover:#143556;--ring:#3A6B9A;--hb:#071827;--hi:#E6F2FF;--hs:#9FC2E4;--hl:#1F4468;--hf:#0F2B45;--hh:#12304D;--rb:#071827;color-scheme:dark;--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=blueprint][data-accent=brand]{--ember:#27C3F0;--ember-h:#14A8D6;--ember-ink:#7FD8F5}
html[data-theme=blueprint] h1,html[data-theme=blueprint] h2,html[data-theme=blueprint] .num,html[data-theme=blueprint] .kl-main{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:-.01em}
html[data-theme=blueprint] body{background-image:linear-gradient(rgba(120,180,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,230,.07) 1px,transparent 1px);background-size:26px 26px}
html[data-theme=hivis]{--page:#FFFFFF;--card:#FFFFFF;--line:#111111;--sep:#BDBDBD;--tint:#FFF6B8;--hover:#FFF1A0;--ink:#000000;--sec:#1C1C1C;--ter:#404040;--r:6px;--hb:#111111;--hi:#FFD400;--hs:#E6E6E6;--hl:#444444;--hf:#2A2A2A;--hh:#2A2A2A;--rb:#111111;--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=hivis][data-accent=brand]{--ember:#FFD400;--ember-h:#E6BE00;--ember-ink:#7A6200}
html[data-theme=hivis][data-accent=brand] .btn.act,html[data-theme=hivis][data-accent=brand] .plus,html[data-theme=hivis][data-accent=brand] .bigbtn{color:#000}
html[data-theme=hivis] .sheet,html[data-theme=hivis] .btn,html[data-theme=hivis] .jcard,html[data-theme=hivis] .kpi{border-width:2px}
html[data-theme=slate]{--page:#E8ECF1;--card:#FFFFFF;--line:#C9D1DC;--sep:#DCE2EA;--tint:#E1E6ED;--hover:#F3F5F8;--ink:#1B2430;--sec:#4A596B;--ter:#586575;--hb:#1F2A37;--rb:#26323F;--hi:#F4F6F8;--hs:#C5D0D8;--hl:rgba(255,255,255,.14);--hf:rgba(255,255,255,.1);--hh:rgba(255,255,255,.1);--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=sand]{--page:#EFE6D8;--card:#FBF7EF;--line:#D9CCB4;--sep:#E5DBC7;--tint:#E8DECB;--hover:#F5EFE2;--ink:#2B2118;--sec:#6B5A47;--ter:#6C5F4F;--hb:#3B2F23;--rb:#463829;--hi:#F4F6F8;--hs:#C5D0D8;--hl:rgba(255,255,255,.14);--hf:rgba(255,255,255,.1);--hh:rgba(255,255,255,.1);--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=forest]{--page:#E6EFE8;--card:#FAFCFA;--line:#C4D7C9;--sep:#D8E6DC;--tint:#DBE9DF;--hover:#F1F7F2;--ink:#13261A;--sec:#456050;--ter:#546A5D;--hb:#173824;--rb:#1D452C;--hi:#F4F6F8;--hs:#C5D0D8;--hl:rgba(255,255,255,.14);--hf:rgba(255,255,255,.1);--hh:rgba(255,255,255,.1);--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=forest][data-accent=brand]{--ember:#2E7D4F;--ember-h:#256640;--ember-ink:#256640}
html[data-theme=midnight]{--good:#73D6A0;--good-bg:#193E30;--warn:#F3C470;--warn-bg:#44341E;--danger:#F59AA4;--danger-bg:#4C252E;--info:#8CC3FD;--info-bg:#21384B;--ink:#F4F4F6;--sec:#A7A7B0;--ter:#7E7E88;--page:#000000;--card:#111114;--line:#26262B;--sep:#1C1C21;--tint:#17171B;--hover:#151519;--ring:#4a4a52;--hb:#000000;--hi:#F4F4F6;--hs:#A7A7B0;--hl:#26262B;--hf:#17171B;--hh:#1C1C21;--rb:#08080A;color-scheme:dark;--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=midnight][data-accent=brand]{--ember:#8B6CFF;--ember-h:#7656EE;--ember-ink:#B5A2FF}
html[data-theme=contrast]{--page:#FFFFFF;--card:#FFFFFF;--line:#000000;--sep:#555555;--tint:#EDEDED;--hover:#E2E2E2;--ink:#000000;--sec:#000000;--ter:#1A1A1A;--hb:#000000;--hi:#FFFFFF;--hs:#FFFFFF;--hl:#777777;--hf:#2A2A2A;--hh:#2A2A2A;--rb:#000000;--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-theme=contrast][data-accent=brand]{--ember:#0033CC;--ember-h:#00269A;--ember-ink:#0033CC}
html[data-theme=contrast] .sheet,html[data-theme=contrast] .btn,html[data-theme=contrast] input,html[data-theme=contrast] select,html[data-theme=contrast] textarea,html[data-theme=contrast] .jcard{border-width:2px}

/* ---- accent color: primary buttons, the active tab, links ---- */
html[data-accent=teal]{--ember:#0F6E8C;--ember-h:#0B5870;--ember-ink:#0B5870}
html[data-accent=blue]{--ember:#1F5FD6;--ember-h:#184DB0;--ember-ink:#184DB0}
html[data-accent=green]{--ember:#2E7D4F;--ember-h:#256640;--ember-ink:#256640}
html[data-accent=gold]{--ember:#D6A000;--ember-h:#B88A00;--ember-ink:#8A6500}
html[data-accent=ember]{--ember:#FF5A1F;--ember-h:#F04E14;--ember-ink:#C2410C;--on-ember:#171717}
html[data-accent=violet]{--ember:#6D4AE0;--ember-h:#5A3BC4;--ember-ink:#5A3BC4}
html[data-accent=gold] .btn.act,html[data-accent=gold] .plus,html[data-accent=gold] .bigbtn,html[data-accent=ember] .btn.act,html[data-accent=ember] .plus,html[data-accent=ember] .bigbtn{color:#171717}

/* ---- dark pages (any dark theme) ---- */
html[data-mode=dark] .btn:hover{border-color:#44444A}
html[data-mode=dark] .tabs a{color:#C8C4BC}html[data-mode=dark] .tabs a[aria-current]{color:var(--ink)}
html[data-mode=dark] input,html[data-mode=dark] select,html[data-mode=dark] textarea{background:#262628;border-color:#3A3A3E;color:var(--ink)}
html[data-mode=dark] .bigbtn.alt{background:#262628;color:var(--ink)}
html[data-mode=dark] .crumb a{color:#FF9A70}
html[data-mode=dark] .pill{background:var(--tint);color:var(--sec)}
html[data-mode=dark] .pill.warm{background:color-mix(in srgb,var(--ember) 24%,var(--card));color:var(--ember-ink)}
html[data-mode=dark] .pill.good{background:color-mix(in srgb,var(--good) 28%,var(--card));color:#8FD1A9}
html[data-mode=dark] .pill.mute{background:transparent;color:var(--ter)}
html[data-mode=dark] .rec,html[data-mode=dark] .brief{border:1px solid var(--line)}
html[data-mode=dark] .brief{background:var(--card)}

/* ---- top bar: match the theme, or force dark, light or the accent color ---- */
html[data-header=dark]{--hb:#14242E;--hi:#F4F6F8;--hs:#C5D0D8;--hl:rgba(255,255,255,.14);--hf:rgba(255,255,255,.1);--hh:rgba(255,255,255,.1);--rb:#18303D;--nav-bg:rgba(255,255,255,.12);--nav-ink:var(--hi);--nav-ic:var(--hi)}
html[data-header=light]{--hb:var(--card);--hi:var(--ink);--hs:var(--sec);--hl:var(--line);--hf:var(--tint);--hh:var(--hover);--rb:var(--card);--nav-bg:var(--ember-tint);--nav-ink:var(--ember-ink);--nav-ic:var(--ember)}
html[data-header=accent]{--hb:color-mix(in srgb,var(--ember) 80%,#000);--hi:#fff;--hs:rgba(255,255,255,.84);--hl:rgba(255,255,255,.28);--hf:rgba(255,255,255,.2);--hh:rgba(255,255,255,.2);--rb:color-mix(in srgb,var(--ember) 88%,#000);--nav-bg:rgba(255,255,255,.22);--nav-ink:#fff;--nav-ic:#fff}
html[data-header=accent][data-accent=gold]{--hi:#171717;--hs:rgba(23,23,23,.75);--hl:rgba(23,23,23,.2);--hf:rgba(255,255,255,.4);--hh:rgba(255,255,255,.4)}
.top{background:var(--hb);color:var(--hi)}
html[data-header=light] .top{border-bottom:1px solid var(--line)}
.top .kit-logo .kl-main,.top .wm{color:var(--hi)}
.top .kit-logo .kl-sub,.top .wm2{color:var(--hs)}
.top .search input{background:var(--hf);color:var(--hi)}
.top .search input::placeholder,.top .search .ic{color:var(--hs)}
.top .top-ic{color:var(--hs)}.top .top-ic:hover{background:var(--hh);color:var(--hi)}
.top-row{height:var(--th)}
.tabrow{border-top-color:var(--hl)}
.tabrow a{color:var(--hs)}.tabrow a:hover{color:var(--hi)}
html[data-header=accent] .tabrow a[aria-current]{box-shadow:inset 0 -3px 0 var(--hi)}
html[data-header=accent] .plus{background:var(--hi);color:var(--ember)}
html[data-header=accent][data-accent=gold] .plus{background:#171717;color:#fff}
.top .tagline{display:inline-block;margin-left:10px;color:var(--hs);font-size:13px;font-style:italic;white-space:nowrap}
@media (max-width:860px){.top .tagline{display:none}}

/* ---- typeface, text size, headings ---- */
html[data-font=native]{--f:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif}
html[data-font=inter]{--f:'Inter',system-ui,sans-serif}
html[data-font=classic]{--f:Georgia,'Iowan Old Style','Times New Roman',serif}
html[data-font=mono] h1,html[data-font=mono] h2,html[data-font=mono] .num,html[data-font=mono] .kpi b,html[data-font=mono] .clock-t,html[data-font=mono] .tabrow a{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:-.01em}
html[data-type=large] body{font-size:16px;line-height:1.55}
html[data-type=large] .btn{height:42px;font-size:15px}
html[data-type=large] .tabrow a{font-size:15px}
html[data-type=serif] h1,html[data-type=serif] h2,html[data-type=serif] .wm,html[data-type=serif] .clock-t{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.01em}
html[data-headings=light] .pagehead h1{font-weight:300;font-size:44px;letter-spacing:-.035em}
html[data-headings=light] .cardhead h2{font-weight:500}
html[data-headings=caps] .pagehead h1{font-size:24px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
html[data-headings=caps] .cardhead h2{text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--sec)}
html[data-headings=accent] .pagehead h1::after{content:"";display:block;width:56px;height:4px;background:var(--ember);margin-top:10px;border-radius:2px}
html[data-headings=accent] .cardhead h2{border-bottom:2px solid var(--ember);padding-bottom:6px}

/* ---- icon weight ---- */
html[data-icons=thin] svg{stroke-width:1.1}
html[data-icons=bold] svg{stroke-width:2.7}

/* ---- cards ---- */
html[data-cards=raised] .sheet,html[data-cards=raised] .jcard,html[data-cards=raised] .crewcard,html[data-cards=raised] .kpi,html[data-cards=raised] .tl-card,html[data-cards=raised] .wk-job,html[data-cards=raised] .panel{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.08)}
html[data-cards=flat] .sheet{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding-left:2px;padding-right:2px}
html[data-cards=flat] .sheet.flush{padding-left:0;padding-right:0}
html[data-cards=flat] .jcard,html[data-cards=flat] .crewcard,html[data-cards=flat] .kpi,html[data-cards=flat] .tl-card{border-color:transparent;background:var(--tint);box-shadow:none}
html[data-cards=bold] .sheet,html[data-cards=bold] .jcard,html[data-cards=bold] .crewcard,html[data-cards=bold] .kpi,html[data-cards=bold] .tl-card,html[data-cards=bold] .panel{border:2px solid var(--ink)}

/* ---- page background and width ---- */
html[data-bg=white]{--page:#FFFFFF}
html[data-bg=gray]{--page:#E8E8EC}
html[data-mode=dark][data-bg=white]{--page:#000000}
html[data-mode=dark][data-bg=gray]{--page:#1E1E21}
html[data-bg=tinted] body{background:color-mix(in srgb,var(--ember) 9%,var(--page))}
html[data-bg=grid] body{background-image:linear-gradient(var(--sep) 1px,transparent 1px),linear-gradient(90deg,var(--sep) 1px,transparent 1px);background-size:28px 28px}
html[data-width=narrow] .main{max-width:1000px}
html[data-width=full] .main{max-width:none}
html[data-width=full] .flash{max-width:none;margin-left:32px;margin-right:32px}

/* ---- main buttons ---- */
html[data-buttonstyle=outline] .btn.act,html[data-buttonstyle=outline] .bigbtn:not(.alt){background:transparent;color:var(--ember-ink);border:2px solid var(--ember)}
html[data-buttonstyle=outline] .btn.act:hover{background:color-mix(in srgb,var(--ember) 10%,transparent)}
html[data-buttonstyle=outline] .plus{background:transparent;color:var(--ember);box-shadow:inset 0 0 0 2px var(--ember)}
html[data-buttonstyle=soft] .btn.act,html[data-buttonstyle=soft] .bigbtn:not(.alt){background:color-mix(in srgb,var(--ember) 16%,var(--card));color:var(--ember-ink);border-color:transparent}
html[data-buttonstyle=soft] .btn.act:hover{background:color-mix(in srgb,var(--ember) 26%,var(--card))}
html[data-buttonstyle=soft] .plus{background:color-mix(in srgb,var(--ember) 22%,transparent);color:var(--hi)}

/* ---- corners ---- */
html[data-corners=square]{--r:0px;--rc:0px}
html[data-corners=round]{--r:20px;--rc:14px}
html[data-corners=square] .sheet,html[data-corners=square] .rec,html[data-corners=square] .btn,html[data-corners=square] .bigbtn,html[data-corners=square] input,html[data-corners=square] select,html[data-corners=square] textarea,html[data-corners=square] .flash,html[data-corners=square] .search input,html[data-corners=square] .checkrow,html[data-corners=square] .photogrid img,html[data-corners=square] .pill,html[data-corners=square] .stamp,html[data-corners=square] .clock,html[data-corners=square] .jcard,html[data-corners=square] .jcol,html[data-corners=square] .crewcard,html[data-corners=square] .tl-card,html[data-corners=square] .wk-day,html[data-corners=square] .wk-job,html[data-corners=square] .panel,html[data-corners=square] .kpi,html[data-corners=square] .tabs a{border-radius:3px}
html[data-corners=round] .sheet,html[data-corners=round] .rec,html[data-corners=round] .flash,html[data-corners=round] .clock,html[data-corners=round] .photogrid img,html[data-corners=round] .jcard,html[data-corners=round] .jcol,html[data-corners=round] .crewcard,html[data-corners=round] .wk-day,html[data-corners=round] .panel,html[data-corners=round] .kpi{border-radius:24px}
html[data-corners=round] .btn,html[data-corners=round] input,html[data-corners=round] select,html[data-corners=round] .bigbtn{border-radius:14px}
html[data-corners=round] textarea{border-radius:18px}

/* ---- spacing ---- */
html[data-density=compact] body{font-size:13px;line-height:1.4}
html[data-density=compact] .main{padding:16px 24px 48px}
html[data-density=compact] .pagehead{margin:2px 0 14px}html[data-density=compact] .pagehead h1{font-size:28px}
html[data-density=compact] .sheet{padding:12px 14px;margin-bottom:10px}
html[data-density=compact] .rows li{padding-top:7px;padding-bottom:7px}
html[data-density=compact] .btn{height:32px}
html[data-density=compact] .tabrow a{height:38px}

/* ---- lists and tables ---- */
html[data-rows=striped] .ledger tbody tr:nth-child(even) td{background:var(--tint)}
html[data-rows=striped] .rows li:nth-child(even){background:var(--tint);padding-left:8px;padding-right:8px;border-radius:8px;border-top-color:transparent}
html[data-rows=airy] .ledger td{padding:19px 14px}
html[data-rows=airy] .rows li{padding:17px 0}

/* ---- tab style ---- */
html[data-tabs=pills] .tabs{border-bottom:0;gap:6px}
html[data-tabs=pills] .tabs a{padding:7px 14px;border-radius:999px;box-shadow:none}
html[data-tabs=pills] .tabs a[aria-current]{background:var(--ember);color:var(--on-ember,#fff);box-shadow:none}
html[data-tabs=pills][data-accent=gold] .tabs a[aria-current]{color:#171717}
html[data-tabs=boxed] .tabs{gap:2px}
html[data-tabs=boxed] .tabs a{padding:10px 16px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;margin-bottom:-1px;box-shadow:none}
html[data-tabs=boxed] .tabs a[aria-current]{background:var(--card);border-color:var(--line);box-shadow:none}

/* ---- status badges and colors ---- */
html[data-badges=pill] .pill{height:22px;padding:0 10px;border-radius:11px;background:var(--tint);color:var(--ink);gap:0}
html[data-badges=pill] .pill::before{display:none}
html[data-badges=pill] .pill.warm{background:var(--ember-tint);color:var(--ember-ink)}html[data-badges=pill] .pill.good{background:var(--good-bg);color:var(--good)}html[data-badges=pill] .pill.alert{background:var(--danger-bg);color:var(--danger)}html[data-badges=pill] .pill.mute{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ter)}
html[data-badges=dot] .pill{background:transparent!important;box-shadow:none!important;padding:0;height:auto;color:var(--ink)!important;font-weight:600}
html[data-badges=dot] .pill::before{content:"";width:8px;height:8px;border-radius:50%;margin-right:6px;background:#8E8E93}
html[data-badges=dot] .pill.warm::before{background:var(--ember)}html[data-badges=dot] .pill.good::before{background:var(--good)}html[data-badges=dot] .pill.mute::before{background:#B9B4AC}html[data-badges=dot] .pill.alert::before{background:#D92D20}
html[data-badges=solid] .pill{background:#6E6E73!important;color:#fff!important;box-shadow:none!important}
html[data-badges=solid] .pill.warm{background:var(--ember)!important}html[data-badges=solid] .pill.good{background:var(--good)!important}html[data-badges=solid] .pill.mute{background:#5E6F7B!important}html[data-badges=solid] .pill.alert{background:#D92D20!important}
html[data-badges=solid][data-accent=gold] .pill.warm{color:#171717!important}
html[data-statuscolors=colorblind]{--good:#0072B2}
html[data-statuscolors=colorblind] .pill.good{background:#DCEBF7;color:#00538A}html[data-statuscolors=colorblind] .pill.warm{background:#FFE6D0;color:#8A3B00}html[data-statuscolors=colorblind] .pill.alert{background:#D55E00;color:#fff}
html[data-statuscolors=mono] .pill.good,html[data-statuscolors=mono] .pill.warm{background:var(--tint);color:var(--ink)}html[data-statuscolors=mono] .pill.alert{background:var(--ink);color:var(--card)}

/* ---- readability ---- */
html[data-contrast=high]{--sec:var(--ink);--ter:var(--sec);--line:#6B6B6B;--sep:#8A8A8A}
html[data-contrast=high][data-mode=dark]{--sec:#FFFFFF;--ter:#E5E5E5;--line:#9A9A9A;--sep:#6A6A6A}
html[data-targets=large] .btn{min-height:46px}
html[data-targets=large] input,html[data-targets=large] select{min-height:46px;font-size:16px}
html[data-targets=large] .tabrow a{height:50px}html[data-targets=large] .tabs a{padding:14px 12px}
html[data-targets=large] .rows li{padding:16px 0}html[data-targets=large] .checkrow{padding:16px}

/* ---- logo and sign-in screen ---- */
html[data-logo=large]{--th:68px}
html[data-logo=large] .kit-logo .kl-main{font-size:22px}html[data-logo=large] .kit-logo .kl-sub{font-size:15px}html[data-logo=large] .kl-img{height:42px}
html[data-logo=short] .kit-logo .kl-sub{display:none}
html[data-login=split] body.bare{grid-template-columns:1fr 1fr;padding:0;place-items:center stretch;min-height:100vh}
html[data-login=split] .bare-art{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:56px;background:var(--ember);color:var(--on-ember,#fff);min-height:100vh}
html[data-login=split] .bare-art .kit-logo .kl-main{font-size:36px;color:inherit}html[data-login=split] .bare-art .kit-logo .kl-sub{font-size:20px;color:color-mix(in srgb,var(--on-ember,#fff) 82%,transparent)}
html[data-login=split] .bare-art .tagline{display:block;font-size:22px;font-weight:500;opacity:.92;margin:0;color:inherit;font-style:normal}
html[data-login=split] .bare-main{justify-self:center;padding:24px}
html[data-login=split] .bare-brand{display:none}
html[data-login=bold] body.bare{background:var(--ember)}
html[data-login=bold] .bare-art{display:block;text-align:center;color:var(--on-ember,#fff)}html[data-login=bold] .bare-art .ba-brand{display:none}
html[data-login=bold] .bare-art .tagline{display:block;font-size:18px;color:inherit;margin:0;font-style:normal}
html[data-login=bold] .bare-brand,html[data-login=bold] .bare-brand .wm2,html[data-login=bold] .bare-foot,html[data-login=bold] .bare-brand .kl-main,html[data-login=bold] .bare-brand .kl-sub{color:var(--on-ember,#fff)}
html[data-login=bold] .panel{border:0;box-shadow:0 24px 60px rgba(0,0,0,.28)}
@media (max-width:860px){html[data-login=split] body.bare{grid-template-columns:minmax(0,1fr);place-items:start stretch}html[data-login=split] .bare-art{min-height:auto;padding:28px}html[data-login=split] .bare-main{padding:28px 20px;max-width:100%}}

/* ---- search as an icon ---- */
html[data-search=icon] .top .search{display:none}
html[data-search=icon] .top .top-ic.m-only{display:grid}
html[data-search=icon] .top-side{margin-left:auto}

/* ---- menu on a phone: slim icons, or a menu button instead of the bottom bar ---- */
@media (max-width:860px){
  html[data-phone=slim] .tabbar a span{display:none}
  html[data-phone=burger] .tabbar{display:none}
  html[data-phone=burger] .burger{display:block;position:relative}
  .burger summary{list-style:none;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--hi)}
  .burger summary::-webkit-details-marker{display:none}
  .burger summary:hover{background:var(--hh)}
  .burger nav{position:absolute;left:0;top:44px;z-index:70;min-width:210px;padding:8px;background:var(--rb);border:1px solid var(--hl);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.35);display:flex;flex-direction:column}
  .burger nav a{padding:11px 14px;border-radius:9px;color:var(--hi);font-weight:500}
  .burger nav a[aria-current]{background:var(--ember);color:var(--on-ember,#fff)}
  html[data-phone=burger] .brand{width:auto}
}

/* ---- jobs list as cards or a board ---- */
.jcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.jcard{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.jcard:hover{border-color:var(--ember)}
.jc-t{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.jc-t b{font-size:15px;line-height:1.3}
.jc-c{color:var(--sec)}.jc-m{font-size:13px;color:var(--ter)}.jc-f{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.jboard{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.jcol{background:var(--tint);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.jcol-h{display:flex;justify-content:space-between;padding:2px 4px 4px}
.jcol .jcard{padding:11px}
.jcol-empty{padding:6px 4px;margin:0}

/* ---- Today: timeline and crew cards ---- */
.tline{list-style:none;margin:0;padding:12px 16px 4px;display:flex;flex-direction:column;gap:10px}
.tline li{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start}
.tl-time{font-weight:700;font-size:14px;padding-top:10px;font-variant-numeric:tabular-nums}
.tl-card{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ember);border-radius:10px}
.tline .s-complete .tl-card{border-left-color:var(--good)}.tline .s-scheduled .tl-card{border-left-color:#B9B4AC}
.tl-meta{display:flex;gap:10px;align-items:center;margin-top:4px}
.crewcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:12px 16px 6px}
.crewcard{background:var(--tint);border-radius:12px;padding:10px 12px}
.cc-h{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.crewcard ul{list-style:none;margin:0;padding:0}
.crewcard li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.crewcard li a{display:flex;flex-direction:column;min-width:0}.crewcard .s{font-size:12.5px;color:var(--ter)}

/* ---- Schedule: agenda and week ---- */
.agenda .ag-lane{margin-bottom:16px}.agenda h3{margin:0 0 6px;font-size:15px;display:flex;gap:8px;align-items:center}
.agrow{display:flex;gap:14px;align-items:center;padding:10px 4px;border-top:1px solid var(--line)}
.agrow .grow{display:flex;flex-direction:column}.agrow .s{font-size:13px;color:var(--ter)}
.ag-t{width:76px;font-weight:700;font-variant-numeric:tabular-nums}
.weekgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wk-day{background:var(--tint);border-radius:12px;padding:8px;min-height:150px;display:flex;flex-direction:column;gap:6px}
.wk-day.is-today{box-shadow:inset 0 0 0 2px var(--ember)}.wk-day.is-sel{background:var(--card);border:1px solid var(--line)}
.wk-h{display:flex;flex-direction:column;line-height:1.2;padding:2px 2px 4px}.wk-h span{font-size:12px;color:var(--ter)}
.wk-job{display:flex;gap:6px;align-items:flex-start;padding:6px 8px;background:var(--card);border-radius:8px;font-size:12.5px;line-height:1.3;border:1px solid var(--line)}
.wk-job .crewdot{margin-top:3px;flex:none}
@media (max-width:860px){.weekgrid{grid-template-columns:1fr}}

/* ---- job page as tabs ---- */
html[data-jobpage=tabs] [data-tab]{display:none}
html[data-jobpage=tabs] .jtabs[data-cur=overview] ~ [data-tab=overview],html[data-jobpage=tabs] .jtabs[data-cur=overview] ~ .grid-main [data-tab=overview],
html[data-jobpage=tabs] .jtabs[data-cur=work] ~ [data-tab=work],html[data-jobpage=tabs] .jtabs[data-cur=work] ~ .grid-main [data-tab=work],
html[data-jobpage=tabs] .jtabs[data-cur=time] ~ [data-tab=time],html[data-jobpage=tabs] .jtabs[data-cur=time] ~ .grid-main [data-tab=time]{display:block}
html[data-jobpage=tabs] .grid-main{grid-template-columns:1fr}
.jtabs{margin-top:6px}

/* ---- Today: briefing and numbers ---- */
html[data-briefing=hidden] .brief{display:none}
html[data-briefing=bottom] #main{display:flex;flex-direction:column}
html[data-briefing=bottom] #main .brief{order:5}
html[data-kpis=hidden] .kpis{display:none}
html[data-kpis=strip] .kpis{display:flex;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
html[data-kpis=strip] .kpi{flex:1;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent}
html[data-kpis=strip] .kpi:first-child{border-left:0}
@media (max-width:760px){html[data-kpis=strip] .kpis{flex-wrap:wrap}html[data-kpis=strip] .kpi{flex:1 1 45%;border-top:1px solid var(--line)}}

/* ---- job page header ---- */
html[data-jobhead=banner] .rec{background:var(--briefing);color:var(--briefing-ink);border-color:transparent}
html[data-jobhead=banner] .rec-ic{background:rgba(255,255,255,.1);color:var(--briefing-muted)}
html[data-jobhead=banner] .rec-name .kind,html[data-jobhead=banner] .rec-fields dt,html[data-jobhead=banner] .rec-meta .k{color:var(--briefing-muted)}
html[data-jobhead=banner] .rec-fields{border-top-color:rgba(255,255,255,.14)}
html[data-jobhead=banner] .rec .btn.dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
html[data-jobhead=banner] .rec input,html[data-jobhead=banner] .rec select{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
html[data-jobhead=light] .rec{background:var(--card);color:var(--ink);border:1px solid var(--line)}
html[data-jobhead=light] .rec-ic{background:var(--tint);border-color:var(--line);color:var(--sec)}
html[data-jobhead=light] .rec-name .kind,html[data-jobhead=light] .rec-fields dt,html[data-jobhead=light] .rec-meta .k{color:var(--ter)}
html[data-jobhead=light] .rec-fields{border-top-color:var(--line)}
html[data-jobhead=light] .rec .btn.dark{background:var(--tint);border-color:var(--line);color:var(--ink)}
html[data-jobhead=light] .rec .btn.dark .ic{color:var(--sec)}
html[data-jobhead=light] .rec .btn.dark:hover{background:var(--hover)}
html[data-jobhead=light] .rec input,html[data-jobhead=light] .rec select{background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-jobhead=light] .rec .rec-path label{color:var(--ter)}
html[data-jobhead=light] .rec .linkbtn.on-dark{color:var(--ter)}
html[data-jobhead=slim] .rec{padding:12px 18px}
html[data-jobhead=slim] .rec-ic{display:none}
html[data-jobhead=slim] .rec-name h1{font-size:20px}
html[data-jobhead=slim] .rec-fields{margin-top:10px;padding-top:10px;gap:12px}
html[data-jobhead=slim] .rec-path{margin-top:12px}

/* ---- jobs list: group headings ---- */
.grp{margin:22px 0 10px;font-size:14px;color:var(--sec);font-weight:650}
.grp .n{font-weight:400;color:var(--ter)}
html[data-crewhome=focus] .crew-today{display:none}

/* ---- crew phone: check-in bar, button size, job layout ---- */
html[data-clock=bar] .clock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);margin:0;border-radius:0;box-shadow:0 -6px 22px rgba(0,0,0,.2);padding:12px 20px;flex-wrap:nowrap;gap:16px;justify-content:center;border-top:3px solid var(--ember)}
html[data-clock=bar] .clock .hint{display:none}
html[data-clock=bar] .clock-run:nth-of-type(2){display:none}
html[data-clock=bar] .clock-t{font-size:22px}
html[data-clock=bar] .clock-act{margin-left:0;flex-wrap:nowrap}
html[data-clock=bar] .main{padding-bottom:140px}
@media (max-width:860px){html[data-clock=bar] .clock{bottom:calc(60px + env(safe-area-inset-bottom));padding:10px 14px;flex-wrap:wrap}html[data-clock=bar] .clock-act{width:100%}html[data-phone=burger][data-clock=bar] .clock{bottom:env(safe-area-inset-bottom)}}
html[data-buttons=xl] .bigbtn{padding:26px 18px;font-size:21px;border-radius:18px}
html[data-buttons=xl] .clock-act .btn{height:62px;font-size:18px;padding:0 26px}
html[data-buttons=xl] .checkrow{padding:20px 16px;font-size:18px}
html[data-buttons=xl] .btn{height:44px;font-size:15px}
html[data-crewlayout=checklist] body.is-crew .main{display:flex;flex-direction:column}
html[data-crewlayout=checklist] body.is-crew .main>[data-s=checklist]{order:-1}
html[data-crewlayout=checklist] body.is-crew .main>.jobhead{order:-2}

/* ---- the panel ---- */
.dopts{position:fixed;right:14px;bottom:14px;z-index:60;font-size:13px;max-width:min(330px,calc(100vw - 28px))}
.dopts>details>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#141414;color:#F7F4EF;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.3);border:1px solid #3a3a3a}
.dopts summary::-webkit-details-marker{display:none}
.dopts>details>summary::before{content:"";width:11px;height:11px;border-radius:50%;background:conic-gradient(#FF5A1F,#D6A000,#2E7D4F,#0F6E8C,#6D4AE0,#FF5A1F)}
.dopts>details[open]>summary{display:none}
.dopts form{background:#141414;color:#F7F4EF;border:1px solid #3a3a3a;border-radius:16px;padding:14px 14px 12px;box-shadow:0 10px 36px rgba(0,0,0,.4);max-height:calc(100vh - 40px);overflow-y:auto}
.dopts-hint{margin:0 0 10px;color:#BDB8B0;font-size:12px}
.dopts-group{border-top:1px solid #2d2d2d;padding:2px 0}
.dopts-group>summary{list-style:none;cursor:pointer;padding:9px 2px;font-weight:700;font-size:13px;display:flex;justify-content:space-between;color:#F7F4EF}
.dopts-group>summary::after{content:"+";color:#9C978F}.dopts-group[open]>summary::after{content:"–"}
.dopts fieldset{border:0;margin:0 0 10px;padding:0;min-width:0}
.dopts legend{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9C978F;padding:0;margin-bottom:5px}
.dopts-choices{display:flex;flex-wrap:wrap;gap:5px}
.dopts button{font:inherit;cursor:pointer;border:1px solid #3a3a3a;background:#232323;color:#F7F4EF;border-radius:999px;padding:5px 11px;font-size:12.5px}
.dopts button:hover{background:#2e2e2e}
.dopts button.on{background:#F7F4EF;color:#141414;border-color:#F7F4EF;font-weight:700}
.dopts-save{border-top:1px solid #2d2d2d;margin-top:6px;padding-top:10px;display:flex;flex-direction:column;gap:7px}
.dopts-saved{margin:0;color:#BDB8B0}.dopts-saved a{color:#F7F4EF;text-decoration:underline}
.dopts-save input,.dopts-save textarea{width:100%;background:#232323;border:1px solid #3a3a3a;color:#F7F4EF;border-radius:10px;padding:7px 10px;font:inherit;font-size:13px}
.dopts button.primary{background:#F7F4EF;color:#141414;border-color:#F7F4EF;font-weight:700;padding:8px 12px}
.dopts-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.dopts-foot button{background:transparent}
html[data-clock=bar] .dopts{bottom:110px}
@media (max-width:860px){.dopts{left:10px;right:10px;bottom:70px;max-width:none}.dopts>details>summary{float:right}.dopts form{max-height:58vh}.dopts-hint{display:none}.dopts button{padding:4px 10px;font-size:12px}.dopts fieldset{margin-bottom:7px}}
/* only the button and the open panel take taps; the empty space around them must not block what is underneath */
.dopts{pointer-events:none}.dopts>details>summary,.dopts form{pointer-events:auto}
@media print{.dopts{display:none}}
.dopts-presets{padding:2px 0 10px;border-bottom:1px solid #2d2d2d;margin-bottom:4px}
.dopts-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9C978F;margin-bottom:6px}
.dopts-presets button{font-weight:600}
.dopts-n{font-weight:400;font-size:11px;color:#9C978F;margin-left:8px}
.dopts-group>summary{justify-content:flex-start}
.dopts-group>summary::after{margin-left:auto}
.dopts-field{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dopts-field input[type=text]{flex:1;min-width:120px;background:#232323;border:1px solid #3a3a3a;color:#F7F4EF;border-radius:10px;padding:6px 10px;font:inherit;font-size:13px}
.dopts-field input[type=color]{width:44px;height:30px;padding:0;border:1px solid #3a3a3a;border-radius:8px;background:#232323;cursor:pointer}

.dopts-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:600;background:rgba(127,127,127,.18);color:inherit;vertical-align:middle}.dopts-tag.live{background:#1f7a3d;color:#fff}

.guide .dopts-choices{display:flex;flex-wrap:wrap;gap:8px}.guide .dopts-choices button{padding:10px 16px;font-size:15px;border-radius:10px;border:1px solid var(--line,#ccc);background:var(--card,#fff);color:inherit;cursor:pointer}.guide .dopts-choices button.on,.guide .dopts-choices button[aria-pressed=true]{outline:2px solid var(--ember,#D6A000);font-weight:700}.guidefs{border:0;padding:0;margin:0 0 22px}.guidefs legend{font-weight:700;margin-bottom:8px;padding:0}.guide .dopts-field{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.guide .dopts-field input[type=text]{min-width:260px;padding:9px 12px;font-size:15px}.guide .dopts-field button{padding:9px 14px;border-radius:10px;border:1px solid var(--line,#ccc);background:var(--card,#fff);color:inherit;cursor:pointer}
.guide .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

.sofar{margin-top:14px}.sofar p{margin:6px 0}

.guide .dopts-choices.big{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.guide .presetcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border-radius:14px}
.guide .presetcard b{font-size:15px}.guide .presetcard small{font-size:12.5px;color:var(--sec,#666);line-height:1.35}
.sw{display:flex;width:100%;height:46px;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.12);margin-bottom:6px}.sw i{flex:1}
.sw-clean i:nth-child(1){background:#FFFFFF}.sw-clean i:nth-child(2){background:#F4F6F8}.sw-clean i:nth-child(3){background:#086D80}
.sw-field i:nth-child(1){background:#141414}.sw-field i:nth-child(2){background:#2B2B2B}.sw-field i:nth-child(3){background:#D6A000}
.sw-office i:nth-child(1){background:#243447}.sw-office i:nth-child(2){background:#E8EDF3}.sw-office i:nth-child(3){background:#1F5FD6}
.sw-blueprint i:nth-child(1){background:#0B2540}.sw-blueprint i:nth-child(2){background:#12385E}.sw-blueprint i:nth-child(3){background:#27C3F0}
.sw-paper i:nth-child(1){background:#F3EBDD}.sw-paper i:nth-child(2){background:#FFFBF2}.sw-paper i:nth-child(3){background:#8A5A2B}
.sw-hivis i:nth-child(1){background:#FFD400}.sw-hivis i:nth-child(2){background:#111}.sw-hivis i:nth-child(3){background:#fff}
.guide .dopts-choices.big{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.guide .dopts-choices.big{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* On a phone the design pill is just a round button, so it covers as little as possible. */
@media (max-width:640px){
  .dopts{bottom:74px}
  .dopts>details:not([open])>summary{font-size:0;gap:0;padding:12px}
  .dopts>details:not([open])>summary::before{width:22px;height:22px}
}
html[data-mode=dark] .lane.unassigned .track{background-color:#3A2E16}
html[data-mode=dark] .lane.unassigned .who b::after{background:#5A4318;color:#F6DFB5}

/* Text on the main color: white on dark colors, dark on light ones. */
html[data-accent=teal]{--on-ember:#fff}html[data-accent=blue]{--on-ember:#fff}html[data-accent=green]{--on-ember:#fff}html[data-accent=ember]{--on-ember:#171717}html[data-accent=violet]{--on-ember:#fff}html[data-accent=gold]{--on-ember:#171717}
html[data-theme=blueprint][data-accent=brand]{--on-ember:#0B2540}html[data-theme=hivis][data-accent=brand]{--on-ember:#000}html[data-theme=forest][data-accent=brand]{--on-ember:#fff}html[data-theme=midnight][data-accent=brand]{--on-ember:#111}html[data-theme=contrast][data-accent=brand]{--on-ember:#fff}
/* Links and small labels in the accent color stay readable on dark pages. */
html[data-mode=dark][data-accent]{--ember-ink:color-mix(in srgb,var(--ember) 55%,#fff)}

/* Dark pages get a dark bottom bar on a phone, and the design pill stays clear of the sticky check-in bar. */
html[data-mode=dark] .tabbar{background:color-mix(in srgb,var(--card) 94%,transparent);border-top-color:rgba(255,255,255,.14)}
html[data-mode=dark] .tabbar a{color:#A8A8AE}
html[data-mode=dark] .tabbar a[aria-current]{color:var(--ember-ink)}
@media (max-width:640px){html[data-clock=bar] .dopts{bottom:150px}}
/* A serif body face runs small, so it gets a little more size. */
html[data-font=classic] body{font-size:15px}
/* The count inside a selected pill tab keeps its contrast. */
html[data-tabs=pills] .tabs a[aria-current] .num,html[data-tabs=boxed] .tabs a[aria-current] .num{color:inherit;opacity:.85}
html[data-font=classic] .tabrow a,html[data-font=classic] .tabs a{font-size:14.5px}

/* Checklist first: the check-in button must never scroll out of reach, so it stays pinned on a phone. */
@media (max-width:860px){
html[data-crewlayout=checklist] .clock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);margin:0;border-radius:0;box-shadow:0 -6px 22px rgba(0,0,0,.2);padding:12px 20px;flex-wrap:nowrap;gap:16px;justify-content:center;border-top:3px solid var(--ember)}
html[data-crewlayout=checklist] .clock .hint{display:none}
html[data-crewlayout=checklist] .clock-run:nth-of-type(2){display:none}
html[data-crewlayout=checklist] .clock-t{font-size:22px}
html[data-crewlayout=checklist] .clock-act{margin-left:0;flex-wrap:nowrap}
html[data-crewlayout=checklist] .main{padding-bottom:140px}
}
@media (max-width:860px){html[data-crewlayout=checklist] .clock{bottom:calc(60px + env(safe-area-inset-bottom));padding:10px 14px;flex-wrap:wrap}html[data-crewlayout=checklist] .clock-act{width:100%}html[data-phone=burger][data-crewlayout=checklist] .clock{bottom:env(safe-area-inset-bottom)}}
@media (max-width:640px){html[data-crewlayout=checklist] .dopts{bottom:150px}}

/* The menu button: three bars and the word Menu, at least 44px to tap. */
.burger summary{width:auto;min-width:44px;height:44px;padding:0 12px;display:inline-flex;gap:8px;align-items:center;border-radius:22px}
.burger .bars{width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.burger-t{font-size:14px;font-weight:600}
@media (max-width:640px){html[data-phone=burger] .brand .kl-sub{display:none}html[data-phone=burger] .burger summary{padding:0 10px}}
.brief .tag{color:color-mix(in srgb,var(--ember) 55%,#fff)}

/* Pale panels in the base stylesheet get dark-page versions. */
html[data-mode=dark] .lead-text{color:var(--sec)}
html[data-mode=dark] .errbox,html[data-mode=dark] .alertcard,html[data-mode=dark] .notice,html[data-mode=dark] .gatebar.alert{background:color-mix(in srgb,var(--ember) 14%,var(--card));border-color:color-mix(in srgb,var(--ember) 38%,var(--card))}
html[data-mode=dark] .ledger tr.kb td{background:color-mix(in srgb,var(--ember) 16%,var(--card))}
html[data-mode=dark] .ob-bar.off,html[data-mode=dark] .ob-local,html[data-mode=dark] .ob-pending li{background:#3A2E16;color:#F6DFB5}
/* Gray-only status colors win over solid badges too. */
html[data-badges=solid][data-statuscolors=mono] .pill,html[data-badges=solid][data-statuscolors=mono] .pill.warm,html[data-badges=solid][data-statuscolors=mono] .pill.good,html[data-badges=solid][data-statuscolors=mono] .pill.mute{background:#555!important;color:#fff!important}
/* Schedule lanes on dark pages (the base lanes are pale cream). */
html[data-mode=dark] .lane{background:var(--tint)}
html[data-mode=dark] .track{background-color:var(--card);background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/11))}
html[data-mode=dark] .blk{box-shadow:inset 0 0 0 1.5px var(--line)}
html[data-mode=dark] .blk.s-en_route,html[data-mode=dark] .blk.s-on_site{box-shadow:none}
html[data-mode=dark] .blk.s-complete{background:color-mix(in srgb,var(--good) 18%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--good) 40%,var(--card))}
html[data-mode=dark] .lane.unassigned .blk{box-shadow:inset 4px 0 0 #D99532,inset 0 0 0 1.5px #6B4F1E}
html[data-mode=dark] .weekstrip a[aria-current]{background:var(--ember);border-color:var(--ember);color:color-mix(in srgb,var(--on-ember,#fff) 80%,transparent)}
html[data-mode=dark] .weekstrip a[aria-current] b{color:var(--on-ember,#fff)}
html[data-mode=dark] .weekstrip a[aria-current] small{color:inherit}

/* ---- the design panel, 2.0: a light side drawer (a bottom sheet on a phone). Its colors are fixed so a customer's own theme never changes the tool. ---- */
.dopts{--dp-ink:#14242E;--dp-sec:#435663;--dp-ter:#60727E;--dp-line:#D9E1E6;--dp-tint:#EEF3F5;--dp-acc:#086D80;--dp-acc-ink:#075568;--dp-acc-tint:#E7F4F6;
  position:fixed;right:20px;bottom:20px;z-index:80;font:400 13px/1.45 var(--f,system-ui,sans-serif);color:var(--dp-ink);max-width:none}
.dopts>details>summary{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 16px;border-radius:999px;background:#fff;color:var(--dp-ink);border:1px solid var(--dp-line);box-shadow:0 6px 24px rgba(16,36,48,.16);font-size:14px;font-weight:650;letter-spacing:-.005em}
.dopts>details>summary:hover{border-color:var(--dp-acc)}
.dopts>details>summary::before{width:14px;height:14px}
.dopts form{position:fixed;top:0;right:0;bottom:0;width:384px;max-height:none;overflow-y:auto;padding:0;background:#fff;color:var(--dp-ink);border:0;border-left:1px solid var(--dp-line);border-radius:0;box-shadow:-12px 0 40px rgba(16,36,48,.10);display:block}
.dopts-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;background:#fff;border-bottom:1px solid var(--dp-line)}
.dopts-head b{font-size:16px;font-weight:700;letter-spacing:-.015em}
.dopts button.dopts-x{width:36px;height:36px;padding:0;border-radius:8px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--dp-sec)}
.dopts button.dopts-x:hover{background:var(--dp-tint)}
.dopts form > .dopts-hint,.dopts form > .dopts-presets,.dopts form > .dopts-group{margin-left:20px;margin-right:20px}
.dopts-hint{margin-top:14px;margin-bottom:0;color:var(--dp-sec);font-size:13px}
.dopts-hint a{color:var(--dp-acc-ink);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.dopts-presets{padding:16px 0 14px;border-bottom:1px solid var(--dp-line);margin-bottom:0}
.dopts-lbl,.dopts legend{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dp-ter)}
.dopts-lbl{margin-bottom:10px}
.dopts legend{margin-bottom:8px}
.dopts-group{border-top:0;border-bottom:1px solid var(--dp-line);padding:0}
.dopts-group>summary{padding:15px 0;font-size:14px;font-weight:700;color:var(--dp-ink);letter-spacing:-.005em}
.dopts-group>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--dp-ter);border-bottom:2px solid var(--dp-ter);transform:rotate(45deg);margin:0 4px 3px auto}
.dopts-group[open]>summary::after{content:"";transform:rotate(-135deg);margin-bottom:-3px}
.dopts-n{margin-left:8px;font-size:12px;font-weight:600;color:var(--dp-ter);background:var(--dp-tint);border-radius:99px;padding:1px 8px}
.dopts fieldset{margin:0 0 18px}
.dopts-group[open]{padding-bottom:2px}
.dopts-choices{gap:6px}
.dopts button{border:1px solid var(--dp-line);background:#fff;color:var(--dp-ink);border-radius:8px;padding:0 12px;min-height:34px;font-size:13px;font-weight:600;line-height:1.2}
.dopts button:hover{background:#F0F5F7;border-color:#9FB0BA}
.dopts button.on{background:var(--dp-acc-tint);border-color:var(--dp-acc);color:var(--dp-acc-ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--dp-acc)}
.dopts-tag{background:var(--dp-tint);color:var(--dp-sec);font-size:11px;font-weight:650;letter-spacing:0;text-transform:none}.dopts-tag.live{background:#E7F5EB;color:#137044}
.dopts-field input[type=text]{background:#fff;border:1px solid var(--dp-line);color:var(--dp-ink);border-radius:8px;min-height:36px;padding:0 12px}
.dopts-field input[type=color]{background:#fff;border:1px solid var(--dp-line);border-radius:8px;width:48px;height:36px}
.dopts-bottom{position:sticky;bottom:0;z-index:3;background:#fff;border-top:1px solid var(--dp-line);padding:14px 20px 16px;box-shadow:0 -8px 24px rgba(16,36,48,.06)}
.dopts-save{border-top:0;margin:0;padding:0;gap:8px}
.dopts-saved{color:var(--dp-sec);margin:0}.dopts-saved a{color:var(--dp-acc-ink);font-weight:650}
.dopts button.primary{background:var(--dp-acc);border-color:var(--dp-acc);color:#fff;min-height:44px;font-size:14px;font-weight:700}
.dopts button.primary:hover{background:var(--dp-acc-ink);border-color:var(--dp-acc-ink)}
.dopts-save textarea{background:#fff;border:1px solid var(--dp-line);color:var(--dp-ink);border-radius:8px;padding:9px 12px;font:inherit;font-size:13px;min-height:56px;width:100%}
.dopts-save textarea:focus{border-color:var(--dp-acc);outline:0;box-shadow:0 0 0 3px rgba(8,109,128,.2)}
.dopts-foot{margin-top:10px}
.dopts-foot button{background:transparent;border-color:transparent;color:var(--dp-sec);text-decoration:underline;text-underline-offset:3px;padding:0 4px}
.dopts-foot button:hover{background:transparent;color:var(--dp-ink)}
@media (min-width:1100px){body:has(.dopts > details[open]){padding-right:384px}}
@media (max-width:860px){
  .dopts{left:auto;right:12px;bottom:84px;max-width:none}
  .dopts>details:not([open])>summary{font-size:0;gap:0;padding:0;width:48px;height:48px;justify-content:center}
  .dopts>details:not([open])>summary::before{width:22px;height:22px}
  .dopts form{top:auto;left:0;right:0;bottom:0;width:auto;max-height:86vh;border:0;border-top:1px solid var(--dp-line);border-radius:16px 16px 0 0;box-shadow:0 -16px 48px rgba(16,36,48,.2)}
  .dopts-head{border-radius:16px 16px 0 0}
  .dopts-hint{display:block}
  .dopts button{min-height:40px}
}
.dopts-ask>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:650;color:var(--dp-acc-ink);padding:2px 0}
.dopts-ask>summary::-webkit-details-marker{display:none}
.dopts-ask[open]>summary{margin-bottom:8px}
.dopts-ask button{width:100%;margin-top:8px}
@media (max-width:860px){.dopts-bottom{padding:12px 16px 14px}.dopts-head{padding:0 16px}.dopts form > .dopts-hint,.dopts form > .dopts-presets,.dopts form > .dopts-group{margin-left:16px;margin-right:16px}}

/* ---- panel: what changed, what is only a request ---- */
.dopts-count{margin:10px 20px 0;font-size:12.5px;font-weight:600;color:var(--dp-ter)}
.dopts-count.some{color:var(--dp-acc-ink)}
.dopts-n.chg{background:var(--dp-acc-tint);color:var(--dp-acc-ink);font-weight:700}
.dopts fieldset.changed legend{color:var(--dp-ink)}
.dopts-chg{display:inline-block;margin-left:8px;padding:0 7px;border-radius:99px;background:var(--dp-acc-tint);color:var(--dp-acc-ink);font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:none;vertical-align:1px}
.dopts button.dopts-reset{min-height:0;height:auto;margin-left:6px;padding:0;border:0;background:none;color:var(--dp-ter);font-size:11.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-transform:none;letter-spacing:0;box-shadow:none;border-radius:0}
.dopts button.dopts-reset:hover{background:none;color:var(--dp-ink)}
/* a "How we work" choice is a request, not a working feature: it is selected in ink, never in the working color */
.dopts-group.plan button.on{background:#14242E;border-color:#14242E;color:#fff;box-shadow:none}
.dopts-group.plan .dopts-hint{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:#FFF3D7;color:#855008;font-size:12.5px}
@media (max-width:860px){.dopts-count{margin-left:16px}}

/* ---- walk-through: the buttons stay in reach, and the app's own bottom bar steps aside ---- */
.guide-nav{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px -4px 0;padding:14px 4px;background:linear-gradient(to top,var(--page) 78%,transparent)}
.guide-step{margin-right:auto;font-size:13px;font-weight:650;color:var(--ter)}
body:has(form.guide) .tabbar{display:none}
@media (max-width:860px){body:has(form.guide) .main{padding-bottom:24px}.guide-nav{padding-bottom:calc(14px + env(safe-area-inset-bottom))}.guide-step{flex-basis:100%}}
.design-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;font-size:14px;color:var(--sec)}
@media print{.dopts,.top,.tabrow,.tabbar,.flash,.guide-nav{display:none!important}body:has(> header.top){padding:0!important}.main{padding:0!important;max-width:none!important}.headside{display:none}}

/* ---- starting-style cards: a tiny picture of the product, not three stripes ---- */
.presetcard .sw{position:relative;display:block;height:78px;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:#fff}
.presetcard .sw i{position:absolute;display:block}
.presetcard .sw i:nth-child(1){left:0;top:0;bottom:0;width:22%}
.presetcard .sw i:nth-child(2){left:22%;top:0;right:0;bottom:0}
.presetcard .sw i:nth-child(3){right:10px;top:12px;width:26%;height:12px;border-radius:5px}
.presetcard .sw::before{content:"";position:absolute;z-index:1;left:30%;top:34px;width:28%;height:30px;border-radius:5px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.presetcard .sw::after{content:"";position:absolute;z-index:1;left:62%;top:34px;width:28%;height:30px;border-radius:5px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.presetcard[aria-pressed=true] .sw{outline:2px solid var(--ember)}

/* ---- job header on the dark banner choice ---- */
html[data-jobhead=banner] .rec .rec-path label,html[data-jobhead=banner] .rec .sched-inline label,html[data-jobhead=banner] .rec .linkbtn.on-dark{color:var(--briefing-muted)}
html[data-jobhead=banner] .rec .linkbtn.on-dark:hover{color:#fff}
html[data-jobhead=banner] .rec .btn.dark .ic{color:var(--briefing-muted)}
html[data-jobhead=banner] .rec select option{color:#14242E}
html[data-tabs=pills] .tabs a[aria-current] .num{background:rgba(255,255,255,.25);color:inherit}
.kv .kv-changed dd{font-weight:700}
.kv .mini.warn{background:var(--ember-tint,#E7F4F6);color:var(--ember-ink)}

/* ---- sign-in with a brand panel: a real welcome, not a flat block ---- */
html[data-login=split] .bare-art{position:relative;overflow:hidden;align-items:flex-start;justify-content:center;gap:20px;padding:64px;background:linear-gradient(155deg,color-mix(in srgb,var(--ember) 92%,#fff) 0%,var(--ember) 45%,color-mix(in srgb,var(--ember) 62%,#000) 100%)}
html[data-login=split] .bare-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 70%);mask-image:linear-gradient(160deg,#000 0%,transparent 70%)}
html[data-login=split] .bare-art > *{position:relative}
html[data-login=split] .bare-art .ba-brand{padding:0}
html[data-login=split] .bare-art .kl-img,html[data-login=split] .bare-art .kl-img.on-dark{height:72px;max-width:300px;padding:12px 18px;border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.22)}
html[data-login=split] .bare-art .kit-logo .kl-main{font-size:44px;letter-spacing:-.035em}
html[data-login=split] .bare-art .kit-logo .kl-sub{font-size:20px}
html[data-login=split] .bare-art .tagline{max-width:420px;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em;opacity:1}