/* WA Desk · DDO — "Kite" design system (v4).
   Light is the default; dark via :root[data-theme=dark]. No inline styles anywhere (CSP style-src 'self'). */
@font-face{font-family:"Onest";src:url("onest-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("bricolage-var.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("jetbrains-mono-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --cobalt:#3443F5; --tang:#FF6A3D; --lime:#CDEB4B; --lilac:#C4B2FF; --ink:#16122B; --pink:#FF9EC4;
  --lime-deep:#8DB516; --grey-shape:#8A879B;
  --bg:#F2F1F6; --card:#FFFFFF; --card-2:#F7F6FA; --chip:#F1F0F6; --hover:#F8F7FB;
  --line:#E8E6EF; --line-2:#DCD9E6; --input:#FFFFFF; --input-line:#D3D0DE;
  --text:#16122B; --text-2:#3D3856; --muted:#5F5B75; --faint:#8A879B;
  --link:#2E3BD9; --link-hover:#16122B;
  --tang-text:#B23A0E; --tang-soft:#FFE7DE; --cobalt-soft:#E7E9FF; --cobalt-text:#2632C4;
  --lime-soft:#EEF7C8; --lime-text:#3F5A0B; --lilac-soft:#EDE7FF; --lilac-text:#4B2FB8;
  --ok:#3F5A0B; --danger:#B23A0E;
  --bar-bg:#16122B; --bar-text:#CFCBE3; --bar-muted:#B9B3DA; --hero-bg:#16122B;
  --pop:#FFFFFF; --ring-track:#EEECF5;
  --shadow:0 1px 0 rgba(22,18,43,.06),0 1px 2px rgba(22,18,43,.04);
  --shadow-lg:0 24px 60px -24px rgba(22,18,43,.35),0 2px 6px rgba(22,18,43,.06);
  --focus:0 0 0 3px rgba(52,67,245,.28);
  --r-xl:28px; --r-lg:24px; --r:18px; --r-sm:12px; --r-xs:8px;
  --font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Bricolage Grotesque","Onest",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0F0C1E; --card:#1A1630; --card-2:#221D3B; --chip:#2A2447; --hover:#211C3A;
  --line:#2C2650; --line-2:#3A3364; --input:#14112A; --input-line:#4A4275;
  --text:#F3F1FB; --text-2:#D3CFE6; --muted:#ABA6C6; --faint:#8C87A8;
  --link:#A9B1FF; --link-hover:#FFFFFF;
  --tang-text:#FF9B78; --tang-soft:#3A1E1A; --cobalt-soft:#232A66; --cobalt-text:#B4BAFF;
  --lime-soft:#28301A; --lime-text:#D6EE6E; --lilac-soft:#2E2552; --lilac-text:#D3C7FF;
  --ok:#D6EE6E; --danger:#FF9B78;
  --bar-bg:#1F1A3A; --hero-bg:#1F1A3A;
  --pop:#221D3B; --ring-track:#2C2650;
  --shadow:0 1px 0 rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --focus:0 0 0 3px rgba(169,177,255,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:100px;scroll-padding-bottom:110px}
body{margin:0;font:400 14px/1.5 var(--font);color:var(--text);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:none;transition:color .15s}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:8px}
:root[data-theme=dark] :focus-visible{outline-color:#A9B1FF}
h1,h2,h3,h4{margin:0;line-height:1.15;font-family:var(--display);letter-spacing:-.02em;color:var(--text)}
p{margin:0}
code{font-family:var(--mono);font-size:.88em;background:var(--chip);padding:1px 6px;border-radius:6px;color:var(--text-2)}
::selection{background:rgba(52,67,245,.22)}
.ic{flex:none;vertical-align:-.15em}
.muted{color:var(--muted)} .small{font-size:12px} .block{display:block} .center{text-align:center} .right{text-align:right} .nowrap{white-space:nowrap}
.text-danger{color:var(--tang-text);font-weight:700}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700}
.skip-link:focus{top:12px;color:#fff;text-decoration:none}
.eyebrow{font:600 11px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#C9C3E6;margin:0}
.eyebrow-dark{color:var(--muted);margin-bottom:8px}
.u{background:linear-gradient(transparent 60%,var(--tang) 60%,var(--tang) 90%,transparent 90%);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kite-logo{display:block;flex:none}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;padding:12px 20px 0;background:linear-gradient(var(--bg) 62%,rgba(242,241,246,0))}
:root[data-theme=dark] .topbar{background:linear-gradient(var(--bg) 62%,rgba(15,12,30,0))}
.topbar-inner{position:relative;max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:14px;min-height:64px;padding:0 12px 0 16px;background:var(--bar-bg);color:#fff;border-radius:20px;box-shadow:0 10px 30px -18px rgba(22,18,43,.6)}
:root[data-theme=dark] .topbar-inner{box-shadow:inset 0 0 0 1px #332C5C,0 10px 30px -18px rgba(0,0,0,.8)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none!important;flex-shrink:0}
.brand:hover{color:#fff}
.brand-mark{display:inline-grid;place-items:center;flex:none}
.brand-mark.lg{width:56px;height:56px}
.brand-mark.lg .brand-logo{width:52px;height:52px;border-radius:14px;box-shadow:0 8px 20px -10px rgba(52,67,245,.6)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font:800 18px/1 var(--display);letter-spacing:-.02em}
.brand-text small{font-size:10.5px;color:var(--bar-muted);margin-top:4px;white-space:nowrap}
.mainnav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;margin-left:8px}
.mainnav>a{position:relative;color:var(--bar-text);padding:8px 12px;border-radius:12px;font-weight:500;font-size:13.5px;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.mainnav>a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.mainnav>a.active{background:var(--lime);color:var(--ink);font-weight:700}
.nav-spacer{flex:1}
.mainnav>a.nav-cta,.mainnav>a.nav-cta:hover{display:inline-flex;align-items:center;gap:6px;background:var(--tang);color:var(--ink);font-weight:700;padding:0 15px 0 12px;height:40px;border-radius:12px;margin-left:6px}
.mainnav>a.nav-cta:hover{background:#FF8259}
.mainnav>a.nav-cta.active{box-shadow:0 0 0 2px var(--lime)}
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;margin-left:6px;transition:background .15s}
.theme-toggle:hover{background:rgba(255,255,255,.16)}
.theme-toggle .tt-label{display:none}
.theme-toggle .i-sun{display:none} .theme-toggle>span{display:inline-grid;place-items:center}
:root[data-theme=dark] .theme-toggle .i-sun{display:inline-grid} :root[data-theme=dark] .theme-toggle .i-moon{display:none}
.usermenu{position:relative;margin-left:6px}
.usermenu summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;padding:3px;border-radius:999px;color:#fff;transition:background .15s}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover{background:rgba(255,255,255,.09)}
.uname{font-weight:600;font-size:13px;padding-right:8px}
.usermenu-pop{position:absolute;right:0;top:calc(100% + 12px);background:var(--pop);color:var(--text);border-radius:18px;box-shadow:var(--shadow-lg);min-width:250px;padding:8px;z-index:60;animation:pop .16s ease-out}
:root[data-theme=dark] .usermenu-pop{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-lg)}
.usermenu-pop a,.usermenu-pop .linkbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;color:var(--text);font-weight:500;font-size:13.5px}
.usermenu-pop a .ic,.usermenu-pop .linkbtn .ic{color:var(--muted)}
.usermenu-pop a:hover,.usermenu-pop .linkbtn:hover{background:var(--chip);text-decoration:none;color:var(--text)}
.usermenu-head{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.usermenu-head small{display:block;color:var(--muted);font-size:12px}
.usermenu-pop form{margin:0}
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.navtoggle-btn{display:none}
.nav-short{display:none}

/* ---------- Avatars, people, agencies ---------- */
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 10.5px/1 var(--font);flex-shrink:0;letter-spacing:-.01em;background:var(--lilac);color:var(--ink)}
.avatar-md{width:34px;height:34px;font-size:12.5px}
.avatar-lg{width:42px;height:42px;font-size:14px}
.av-0{background:#CDEB4B;color:#16122B} .av-1{background:#3443F5;color:#fff} .av-2{background:#FF6A3D;color:#16122B} .av-3{background:#C4B2FF;color:#16122B} .av-4{background:#16122B;color:#CDEB4B}
:root[data-theme=dark] .av-4{background:#F3F1FB;color:#16122B}
.person{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:500}
.person>span:last-child{min-width:0;overflow-wrap:anywhere}
.agency{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--text-2)}
.agency i{width:10px;height:10px;border-radius:3px;background:var(--cobalt);flex:none}
.ag-1 i{background:var(--tang);border-radius:50%} .ag-2 i{background:var(--lime-deep);border-radius:50% 50% 50% 2px} .ag-3 i{background:#9B83F5;transform:rotate(45deg);border-radius:2px}
.ag-4 i{background:var(--ink);border-radius:50%} .ag-5 i{background:#F062A0} .ag-none i{background:var(--faint)}
:root[data-theme=dark] .ag-4 i{background:#F3F1FB}

/* ---------- Layout ---------- */
.container{max-width:1440px;margin:0 auto;padding:22px 20px 48px}
.narrow{max-width:560px;margin:24px auto}
.footer{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12px;padding:8px 20px 32px}
.footer-mark{display:inline-grid}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin:6px 4px 20px;flex-wrap:wrap}
.page-head>div:first-child{min-width:0;max-width:820px}
.page-title{font:800 44px/1 var(--display);letter-spacing:-.04em;color:var(--text);overflow-wrap:anywhere}
.page-title .tag{vertical-align:middle;font-family:var(--font);letter-spacing:0}
.page-head p.muted{margin-top:10px;font-size:14px}
.page-head .actions{flex-wrap:wrap}
.page-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 4px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);font-weight:500;margin:4px 4px 14px}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.crumbs a:hover{color:var(--text);text-decoration-color:currentColor}
.crumbs .ic{color:var(--faint)}
.crumb-current{color:var(--text);font-family:var(--mono);font-size:12.5px;font-weight:600}
.card{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;margin-bottom:16px}
:root[data-theme=dark] .card{box-shadow:inset 0 0 0 1px var(--line)}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2,.c-title{font:700 18px/1.15 var(--display);letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:8px}
.c-title{margin:0 0 14px}
.c-title-light{color:#fff}
.c-sub{font:500 12px var(--font);color:var(--bar-muted);letter-spacing:0}
.more-link{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:13px;color:var(--link)}
.count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:8px;background:var(--chip);color:var(--text-2);font:700 11.5px/1 var(--font);margin-left:2px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.grid-2>.card,.grid-3>.card,.grid-2>div>.card:last-child{margin-bottom:0}
.grid-2>*,.grid-3>*{min-width:0}
.empty{padding:34px 20px;text-align:center;color:var(--muted);font-weight:500}
.empty::before{content:"";display:block;width:84px;height:44px;margin:0 auto 12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 44'%3E%3Ccircle cx='18' cy='24' r='16' fill='%23C4B2FF'/%3E%3Crect x='30' y='8' width='26' height='26' rx='8' fill='%23CDEB4B' transform='rotate(12 43 21)'/%3E%3Cpath d='M84 44H56a28 28 0 0 1 28-28z' fill='%23FF6A3D'/%3E%3Ccircle cx='66' cy='8' r='5' fill='%233443F5'/%3E%3C/svg%3E") center/contain no-repeat}
.empty.small{padding:16px 12px;font-size:12.5px}
.empty.small::before{width:56px;height:30px;margin-bottom:8px}
.empty-lg{padding:48px 20px;font-size:15px}
.empty-lg small{margin-top:4px;font-size:13px;font-weight:400}
.lock-note{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--lime-text);background:var(--lime-soft);padding:4px 9px;border-radius:999px}
.auto-note{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--cobalt-text);background:var(--cobalt-soft);padding:4px 10px;border-radius:999px}

/* ---------- Status shapes, priority, tags ---------- */
.status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--text-2);white-space:nowrap;line-height:1.3}
.status::before{content:"";width:16px;height:16px;flex:none;background:center/contain no-repeat}
.status.has-shape::before{content:none}
.status .shp{flex:none}
.sc-lilac{color:#7B5CF0} .sc-cobalt{color:#3443F5} .sc-tang{color:#F05A2C} .sc-lime{color:#8DB516} .sc-pink{color:#E0458A} .sc-teal{color:#0E9F8E} .sc-grey{color:#8A879B} .sc-ink{color:#16122B}
:root[data-theme=dark] .sc-lilac{color:#A88BFF} :root[data-theme=dark] .sc-cobalt{color:#8C96FF} :root[data-theme=dark] .sc-tang{color:#FF8A63} :root[data-theme=dark] .sc-lime{color:#A9CF2E} :root[data-theme=dark] .sc-pink{color:#FF8EC0} :root[data-theme=dark] .sc-teal{color:#3FD3BF} :root[data-theme=dark] .sc-grey{color:#A7A3BD} :root[data-theme=dark] .sc-ink{color:#F3F1FB}
.shp .tick{stroke:#fff} .sc-lime .tick{stroke:#16122B} :root[data-theme=dark] .shp .tick{stroke:#16122B}
.status-lg{font-size:18px;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.status-lg::before{width:26px;height:26px} .status-lg .shp{width:26px;height:26px}
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.prio::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pr-low{color:var(--muted)} .pr-medium{color:var(--cobalt-text)}
.prio.pr-high,.prio.pr-critical{font:700 10.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:7px}
.prio.pr-high{color:var(--tang-text);background:var(--tang-soft)}
.prio.pr-critical{color:#fff;background:#B23A0E}
.prio.pr-high::before,.prio.pr-critical::before{display:none}
.prio-chip.pr-low,.prio-chip.pr-medium{display:none}
.ticket-hero .prio-chip.pr-low,.ticket-hero .prio-chip.pr-medium{display:inline-flex;background:rgba(255,255,255,.75);padding:4px 10px;border-radius:999px;color:var(--ink)}
.task-cell .prio{margin-left:6px;vertical-align:1px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:600;background:var(--chip);color:var(--text-2);white-space:nowrap;line-height:1.35}
.tag-danger{background:var(--tang-soft);color:var(--tang-text)}
.tag-danger::before{content:"";width:10px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 11.6H1.4z' fill='%23F05A2C' stroke='%23F05A2C' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tag-yes,.tag.sow-approved{background:var(--lime-soft);color:var(--lime-text)}
.tag-no{background:var(--chip);color:var(--muted)}
.tag.sow-pending{background:var(--tang-soft);color:var(--tang-text)}
.tag.kb-type-sop{background:var(--lilac-soft);color:var(--lilac-text)}
.tag.kb-type-kb{background:var(--cobalt-soft);color:var(--cobalt-text)}
a.tag{text-decoration:none} a.tag:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.ticket-no{display:inline-block;font:600 11.5px/1.2 var(--mono);color:var(--text-2);background:var(--chip);border-radius:7px;padding:4px 7px;letter-spacing:-.01em;text-decoration:none!important;white-space:nowrap}
a.ticket-no:hover{background:var(--cobalt-soft);color:var(--cobalt-text)}
.ticket-no.lg{font-size:12.5px;padding:6px 10px;background:#fff;color:var(--ink)}

/* ---------- Hero (ink banner with geometric art) ---------- */
.hero{position:relative;background:var(--hero-bg);color:#fff;border-radius:var(--r-xl);padding:30px 34px;overflow:hidden;margin-bottom:16px;isolation:isolate}
:root[data-theme=dark] .hero{box-shadow:inset 0 0 0 1px #332C5C}
.hero-art{position:absolute;top:0;z-index:-1;pointer-events:none}
.hero-main{position:relative;min-width:0}
.hero-title{font:700 44px/1.06 var(--display);letter-spacing:-.035em;color:#fff;margin:14px 0 22px;max-width:640px}
.hero-sub{display:block}
.hero-lede{color:#D9D5EE;max-width:560px;margin:-10px 0 20px;font-size:14.5px}
.today-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;min-height:236px;
  background:radial-gradient(90% 130% at 100% 0%,rgba(52,67,245,.34) 0%,rgba(52,67,245,0) 58%),radial-gradient(60% 110% at 0% 100%,rgba(196,178,255,.13) 0%,rgba(196,178,255,0) 62%),var(--hero-bg)}
/* small tidy accent, only in the empty top-right corner above the tiles (hidden once the tiles move under the headline) */
.hero-accent{position:absolute;top:30px;right:34px;pointer-events:none;opacity:.9}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,118px);gap:10px;position:relative;flex:none}
.tile{height:122px;border-radius:20px;padding:12px 13px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;text-decoration:none!important;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.tile b{font:800 42px/1 var(--display);letter-spacing:-.04em}
.tile-label{font-weight:600;font-size:12px;line-height:1.2;text-wrap:balance}
.t-tang{background:var(--tang);color:var(--ink)} .t-tang:hover{color:var(--ink)}
.t-cobalt{background:var(--cobalt);color:#fff} .t-cobalt:hover{color:#fff}
.t-lilac{background:var(--lilac);color:var(--ink)} .t-lilac:hover{color:var(--ink)}
.t-lime{background:var(--lime);color:var(--ink)} .t-lime:hover{color:var(--ink)}
.t-shape{position:absolute;top:12px;right:12px;background:#fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}
.segmented{display:inline-flex;flex-wrap:wrap;background:var(--card);border-radius:14px;padding:4px;gap:2px;box-shadow:inset 0 0 0 1px var(--line)}
.segmented a{display:inline-flex;align-items:center;min-height:34px;padding:0 15px;border-radius:10px;color:var(--muted);font-weight:600;font-size:13px;text-decoration:none!important;transition:background .15s,color .15s}
.segmented a:hover{color:var(--text);background:var(--chip)}
.segmented a.active{background:var(--ink);color:#fff}
:root[data-theme=dark] .segmented a.active{background:var(--lime);color:var(--ink)}
.segmented-dark{background:rgba(255,255,255,.1);box-shadow:none}
.segmented-dark a{color:#DCD8EF}
.segmented-dark a:hover{background:rgba(255,255,255,.1);color:#fff}
.segmented-dark a.active,:root[data-theme=dark] .segmented-dark a.active{background:#fff;color:var(--ink)}

/* ---------- Today ---------- */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:16px;align-items:start}
.today-lists{display:flex;flex-direction:column;gap:14px;min-width:0}
.today-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.task-group{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
:root[data-theme=dark] .task-group{box-shadow:inset 0 0 0 1px var(--line)}
.task-group-head{display:flex;align-items:center;gap:6px 11px;padding:16px 20px;cursor:pointer;list-style:none;flex-wrap:wrap;border-radius:var(--r-lg)}
.task-group-head::-webkit-details-marker{display:none}
.task-group-head:hover .task-group-chev{background:var(--chip)}
.task-group-head:focus-visible{outline-offset:-3px}
.task-group-title{font:700 20px/1.1 var(--display);letter-spacing:-.02em;color:var(--text)}
.task-group-sub{color:var(--muted);font-size:12.5px;flex:1 1 200px}
.task-group-chev{margin-left:auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:transform .2s,background .15s}
.task-group details:not([open]) .task-group-chev{transform:rotate(-90deg)}
.g-badge{min-width:30px;height:30px;margin:0;display:grid;place-items:center;font:800 14px/1 var(--display);padding:0 8px;border-radius:9px}
.g-tang .g-badge{background:var(--tang);color:var(--ink);border-radius:50% 50% 50% 5px}
.g-cobalt .g-badge{background:var(--cobalt);color:#fff;border-radius:50%}
.g-lilac .g-badge{background:var(--lilac);color:var(--ink);border-radius:9px}
.g-lime .g-badge{background:var(--lime);color:var(--ink);border-radius:9px 9px 50% 50%}
.g-grey .g-badge{background:var(--chip);color:var(--text-2);border-radius:9px}
.g-pink .g-badge{background:var(--pink);color:var(--ink);border-radius:50% 5px 50% 5px}
.fu-line{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.fu-line .ic{flex:none}
.fu-line.is-due{color:#A3195B}
:root[data-theme=dark] .fu-line.is-due{color:#FF9EC4}
.task-group .table-wrap{padding:0 20px 8px}
.task-empty{display:flex;align-items:center;gap:10px;margin:0 20px 18px;padding:14px 16px;border-radius:16px;background:var(--card-2);color:var(--muted);font-weight:500}
.task-empty-mark{display:inline-grid}
.task-table{table-layout:fixed}
.task-table th:nth-child(1){width:108px} .task-table th:nth-child(3){width:118px} .task-table th:nth-child(4){width:150px}
.task-table th:nth-child(5){width:124px} .task-table th:nth-child(6){width:100px} .task-table th:nth-child(7){width:58px} .task-table th:nth-child(8){width:44px}
.task-table td{vertical-align:middle;padding-top:12px;padding-bottom:12px}
.task-table th:first-child,.task-table td:first-child{padding-left:0} .task-table th:last-child,.task-table td:last-child{padding-right:0}
.task-table .task-cell a{font-weight:600;font-size:13.5px;color:var(--text)}
.task-table .task-cell a:hover{color:var(--link)}
.task-table .agency,.task-table .person{font-size:13px}
.task-table td[data-label="Agency"],.task-table td[data-label="Assignee"]{overflow:hidden;text-overflow:ellipsis}
.task-open{text-align:right}
.open-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--chip);color:var(--text-2);transition:background .15s,color .15s}
.open-btn:hover{background:var(--ink);color:#fff}
:root[data-theme=dark] .open-btn:hover{background:var(--lime);color:var(--ink)}
.due-date{display:block;font-weight:600;font-size:13px;color:var(--text-2)}
.due-hint{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);font-weight:500}
.due-hint.is-late{color:var(--tang-text);font-weight:700}
.due-hint.is-late::before{content:"";width:10px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 11.6H1.4z' fill='%23F05A2C' stroke='%23F05A2C' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.due-hint.is-today{color:var(--cobalt-text);font-weight:700}
.row-overdue .due-date{color:var(--tang-text)}
.hours-cell{font:600 12.5px var(--mono);color:var(--text-2)}
.day-card .c-title{margin-bottom:6px}
.ring{position:relative;width:148px;height:148px;margin:8px auto 14px}
.ring svg{display:block}
.ring-track{stroke:var(--ring-track)}
.ring-today{stroke:var(--cobalt)} :root[data-theme=dark] .ring-today{stroke:#7F8BFF}
.ring-week{stroke:var(--lime-deep)} :root[data-theme=dark] .ring-week{stroke:var(--lime)}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-c b{font:800 26px/1 var(--display);letter-spacing:-.03em}
.ring-c span{font-size:11.5px;color:var(--muted);margin-top:3px}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--text-2)}
.legend li{display:flex;align-items:center;gap:9px}
.legend i{width:10px;height:10px;border-radius:50%;flex:none}
.legend b{margin-left:auto;font:600 12px var(--mono);color:var(--text)}
.legend small{color:var(--muted);font-weight:500}
.lg-today{background:var(--cobalt)} .lg-week{background:var(--lime-deep)} .lg-done{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%238DB516'/%3E%3Cpath d='M5 8.2l2 2 4-4.2' fill='none' stroke='%2316122B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;width:12px!important;height:12px!important}
.day-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.sop-card{display:block;background:var(--lilac);color:var(--ink);padding:20px 22px 22px;overflow:hidden;text-decoration:none!important;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
:root[data-theme=dark] .sop-card{box-shadow:none}
.sop-card:hover{color:var(--ink);transform:translateY(-2px)}
.sop-shape{position:absolute;right:-28px;bottom:-28px;width:100px;height:100px;border-radius:50%;background:var(--cobalt)}
.sop-eyebrow{display:block;font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#3D3856;margin-bottom:8px}
.sop-title{display:block;font:700 17px/1.25 var(--display);letter-spacing:-.01em;padding-right:48px;overflow-wrap:anywhere}
.sop-meta{display:block;font-size:12px;color:#3D3856;margin-top:8px;padding-right:56px}
.sop-go{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--ink);color:#fff;font-weight:700;font-size:12px;padding:7px 12px;border-radius:10px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table th{font:600 10.5px/1.2 var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:12px 12px 10px;white-space:nowrap;border-bottom:1px solid var(--line)}
.table td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text-2)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .12s}
.table tbody tr:hover td{background:var(--hover)}
.table tfoot th{color:var(--text);font-size:11px;border-top:1px solid var(--line-2);border-bottom:0;padding-top:12px}
.table.compact td,.table.compact th{padding:9px 10px}
.table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.card.flush .table th:first-child,.card.flush .table td:first-child{padding-left:22px}
.card.flush .table th:last-child,.card.flush .table td:last-child{padding-right:22px}
.task-cell{min-width:220px;max-width:440px;overflow-wrap:anywhere}
.task-cell a{color:var(--text);font-weight:600}
.task-cell a:hover{color:var(--link)}
.subj-line{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12px}
.ticket-title,.email-subject,.details dd{overflow-wrap:anywhere}
.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--tang)}
.task-table .row-overdue td:first-child{box-shadow:none}
.row-muted td{background:var(--hover);color:var(--muted)}
.row-muted .avatar{background:var(--chip);color:var(--text-2)}
.row-muted td a,.row-muted .person{color:var(--text-2)}
.matrix td,.matrix th{min-width:80px}
.tickets-table td,.tickets-table th{white-space:nowrap}
.tickets-table td.task-cell{white-space:normal}
.tickets-table td,.tickets-table th{padding-left:8px;padding-right:8px}
.tickets-table th{white-space:normal;vertical-align:bottom}
.tickets-table td.task-cell{min-width:180px}
.tickets-table td.col-requested_by{white-space:normal;min-width:104px;max-width:150px}
.tickets-table td.cell-updated{white-space:normal;min-width:100px;line-height:1.35}
.tickets-table td.col-due_date .tag,.sow-table td.cell-due .tag{display:block;width:max-content;margin-top:5px}
.sow-table td,.sow-table th{padding-left:9px;padding-right:9px}
.sow-table th{white-space:normal;vertical-align:bottom}
.sow-table td.task-cell{min-width:170px}
.sow-table .links-compact{max-width:190px}
.sow-table .links-compact a{white-space:normal;overflow-wrap:anywhere}

/* ---------- Forms ---------- */
label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:13px;color:var(--text-2)}
label.inline{flex-direction:row;align-items:center;gap:8px;white-space:nowrap}
label.check,label.radio{flex-direction:row;align-items:center;gap:9px;font-weight:500;cursor:pointer}
input[type=text],input[type=url],input[type=search],input[type=password],input[type=email],input[type=number],input[type=date],input:not([type]),select,textarea{
  font:inherit;font-size:14px;font-weight:400;color:var(--text);background:var(--input);border:1.5px solid var(--input-line);border-radius:var(--r-sm);padding:9px 13px;width:100%;min-height:44px;transition:border-color .15s,box-shadow .15s}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background:var(--input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5B75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat;cursor:pointer}
:root[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA6C6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
:root[data-theme=dark] input::placeholder,:root[data-theme=dark] textarea::placeholder{color:#8F8AAE}
select option{background:var(--card);color:var(--text)}
input[type=radio],input[type=checkbox]{accent-color:var(--cobalt);width:18px;height:18px;margin:0}
textarea{resize:vertical;line-height:1.55}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:var(--focus)}
.stack{display:flex;flex-direction:column;gap:14px}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px}
.form-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.update-row{align-items:end}
.update-row>label>.lbl{display:flex;align-items:baseline;gap:4px;line-height:1.25}
.update-row .req{font-size:14px;line-height:1}
.update-row input,.update-row select{height:44px}
.span-2{grid-column:span 2}
fieldset.card{border:0;min-width:0;padding-top:26px}
fieldset legend{float:left;width:100%;margin:0 0 18px;padding:0;font:700 18px/1.1 var(--display);letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:10px}
fieldset legend::before{content:"";width:14px;height:14px;border-radius:50% 50% 50% 3px;background:var(--tang);flex:none}
fieldset legend+*{clear:both}
.ticket-form fieldset:nth-of-type(2) legend::before,.kb-form fieldset:nth-of-type(2) legend::before{background:var(--cobalt);border-radius:50%}
.ticket-form fieldset:nth-of-type(3) legend::before{background:var(--lilac);border-radius:4px}
.ticket-form fieldset:nth-of-type(4) legend::before{background:var(--lime-deep);border-radius:4px 4px 50% 50%}
.ticket-form fieldset:nth-of-type(5) legend::before{background:var(--ink);border-radius:2px;transform:rotate(45deg)}
:root[data-theme=dark] .ticket-form fieldset:nth-of-type(5) legend::before{background:#F3F1FB}
.req{color:var(--tang-text);font-style:normal}
.has-error input,.has-error select,.has-error textarea{border-color:var(--tang-text);box-shadow:0 0 0 3px rgba(178,58,14,.14)}
.field-error{color:var(--tang-text);font-weight:600;font-size:12px}
.input-prefix{display:flex;align-items:stretch}
.input-prefix>span{display:grid;place-items:center;padding:0 13px;background:var(--chip);border:1.5px solid var(--input-line);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);font-weight:700;color:var(--text-2)}
.input-prefix input{border-radius:0 var(--r-sm) var(--r-sm) 0}
.radio-row{display:flex;gap:10px;min-height:44px;align-items:center;flex-wrap:wrap}
.radio-row label.radio{padding:0 14px;min-height:40px;border-radius:12px;background:var(--card-2);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.radio-row label.radio:has(input:checked){box-shadow:inset 0 0 0 2px var(--cobalt);background:var(--cobalt-soft);color:var(--text)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sticky-actions{position:sticky;bottom:12px;z-index:5;padding:12px 14px;border-radius:18px;background:var(--ink);box-shadow:0 14px 34px -14px rgba(22,18,43,.55)}
:root[data-theme=dark] .sticky-actions{background:#241E44;box-shadow:inset 0 0 0 1px #3A3364,0 14px 34px -14px rgba(0,0,0,.8)}
.sticky-actions .btn-primary{background:var(--tang);color:var(--ink)}
.sticky-actions .btn-primary:hover{background:#FF8259;color:var(--ink)}
.sticky-actions .btn:not(.btn-primary){background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.sticky-actions .btn:not(.btn-primary):hover{background:rgba(255,255,255,.18);color:#fff}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-form input[type=search]{min-width:220px}
.inline-edit{display:flex;gap:6px} .inline-edit input{min-width:120px}
.add-row{margin-top:12px}
.add-row input{flex:1 1 160px;min-width:0}
.search-field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.search-field>.ic{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.search-field input{padding-left:40px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-label{font-size:13px;font-weight:600;color:var(--text-2)}
label>.lbl small{font-weight:500;margin-left:2px}
.pill-select{position:relative}
.pill-select .pill-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:inline-grid;pointer-events:none;z-index:1}
.pill-select select{padding-left:38px;min-width:200px;border-radius:14px;font-weight:600}
/* Dashboard filters: agency + date range (+ custom from/to) */
.dash-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;max-width:100%}
.dash-filters .pill-select select{min-width:0;width:auto}
.dash-filters select[name=agency_id]{min-width:180px}
.dash-filters select[name=range]{min-width:168px}
.dash-filters select.is-active{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-soft)}
.range-custom{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.range-custom[hidden]{display:none}
.range-custom input[type=date]{width:auto;min-width:150px}
.range-sep{color:var(--muted);font-weight:600}
.range-note{display:inline-block;margin-left:4px;font-weight:600;color:var(--text-2)}
.range-note a{text-decoration:underline;text-underline-offset:3px}
.vchart-dense .vlabel{font-size:10px}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-weight:600;font-size:13.5px;padding:0 16px;min-height:42px;border-radius:var(--r-sm);border:0;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--text);cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .15s,box-shadow .15s,color .15s,transform .1s}
.btn:hover{background:var(--chip);color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-ink{background:var(--ink);color:#fff;box-shadow:none}
.btn-primary:hover,.btn-ink:hover{background:#2A2450;color:#fff}
:root[data-theme=dark] .btn-primary,:root[data-theme=dark] .btn-ink{background:var(--lime);color:var(--ink)}
:root[data-theme=dark] .btn-primary:hover,:root[data-theme=dark] .btn-ink:hover{background:#DBF26E;color:var(--ink)}
.btn-accent{background:var(--tang);color:var(--ink);box-shadow:none}
.btn-accent:hover{background:#FF8259;color:var(--ink)}
.btn-glass{background:rgba(255,255,255,.7);box-shadow:none;color:var(--ink)}
.btn-glass:hover{background:#fff;color:var(--ink)}
.btn-danger{background:#B23A0E;color:#fff;box-shadow:none} .btn-danger:hover{background:#932F0B;color:#fff}
.btn-danger-outline{color:var(--tang-text);box-shadow:inset 0 0 0 1.5px currentColor;background:transparent}
.btn-danger-outline:hover{background:var(--tang-soft);color:var(--tang-text)}
.btn-glass-danger{background:rgba(255,255,255,.7);color:#932F0B;box-shadow:none}
.btn-glass-danger:hover{background:#fff;color:#932F0B}
.btn-ghost{box-shadow:none;background:transparent}
.btn-ghost:hover{background:var(--chip)}
.btn-sm{padding:0 11px;min-height:34px;font-size:12.5px;border-radius:10px}
.btn-lg{min-height:50px;padding:0 22px;font-size:15px;border-radius:14px}
.btn-block{width:100%} .btn-block+.btn-block{margin-top:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer;font-weight:600} .linkbtn:hover{color:var(--link-hover);text-decoration:underline}
.linkbtn.danger{color:var(--tang-text)}
summary.btn{list-style:none} summary.btn::-webkit-details-marker{display:none}

/* ---------- Alerts ---------- */
.alert{display:flex;flex-direction:column;gap:2px;position:relative;padding:13px 18px 13px 46px;border-radius:16px;margin-bottom:16px;font-weight:500;animation:rise .3s ease both}
.alert::before{content:"";position:absolute;left:16px;top:14px;width:18px;height:18px;background:center/contain no-repeat}
.alert-success{background:var(--lime-soft);color:var(--lime-text)} .alert-success::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%238DB516'/%3E%3Cpath d='M5 8.2l2 2 4-4.2' fill='none' stroke='%2316122B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.alert-error{background:var(--tang-soft);color:var(--tang-text)} .alert-error::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 11.6H1.4z' fill='%23F05A2C' stroke='%23F05A2C' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.alert-info{background:var(--cobalt-soft);color:var(--cobalt-text)} .alert-info::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%233443F5' stroke-width='2'/%3E%3Cpath d='M8 4a4 4 0 0 0 0 8z' fill='%233443F5'/%3E%3C/svg%3E")}
:root[data-theme=dark] .alert-info::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%238C97FF' stroke-width='2'/%3E%3Cpath d='M8 4a4 4 0 0 0 0 8z' fill='%238C97FF'/%3E%3C/svg%3E")}
.alert a{color:inherit;text-decoration:underline}
.reveal{gap:8px} .pw{font-size:18px;padding:8px 14px;background:var(--card);border:2px dashed var(--lime-deep);align-self:flex-start;user-select:all;color:var(--text);border-radius:12px}

/* ---------- Filters ---------- */
.filters{padding:16px 18px}
.filters-main{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filters-main .search-field{flex:1 1 320px}
.filters-main label.inline select{width:auto;min-width:150px}
.filters-more{margin-top:12px}
.filters-more summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--text-2);font-weight:600;font-size:13px;padding:6px 12px 6px 10px;border-radius:10px;background:var(--chip);list-style:none}
.filters-more summary::-webkit-details-marker{display:none}
.filters-more summary:hover{color:var(--text)}
.filters-more[open] summary{background:var(--ink);color:#fff}
:root[data-theme=dark] .filters-more[open] summary{background:var(--lime);color:var(--ink)}
.filters-more[open] summary .count{background:rgba(255,255,255,.18);color:inherit}
.filters-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px;margin-top:14px;align-items:end}
.filters-grid-report{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.range{display:flex;gap:6px;align-items:center} .range span{color:var(--muted)}
.presets{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;color:var(--text-2);font-weight:600;background:var(--chip);transition:background .15s,color .15s}
.chip:hover{text-decoration:none;color:var(--text);background:var(--line-2)}
.chip.active{background:var(--ink);color:#fff}
:root[data-theme=dark] .chip.active{background:var(--lime);color:var(--ink)}
.pager{display:flex;gap:12px;justify-content:center;align-items:center;margin:4px 0 14px}
.filters-submit{display:flex;align-items:flex-end}
.filters-submit .btn{width:100%}
.sow-toolbar,.kb-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.sow-toolbar .inline-form,.kb-toolbar .inline-form{flex:0 1 auto;flex-wrap:nowrap;align-items:center}
.sow-toolbar .search-field,.kb-toolbar .search-field{min-width:200px}
.sow-toolbar .inline-form input,.sow-toolbar .inline-form select,.kb-toolbar .inline-form input,.kb-toolbar .inline-form select{width:auto}
.sow-toolbar .search-field,.kb-toolbar .search-field{flex:0 1 280px}
.sow-toolbar .search-field input,.kb-toolbar .search-field input{width:100%}
[data-show-if].is-hidden{display:none}
label.field-label{display:block}
fieldset.card>label+label,fieldset.card>label+.field,fieldset.card>.field+label{margin-top:16px}
.sow-toolbar .search-field{flex-basis:340px}

/* ---------- Stat tiles (KPIs) ---------- */
.kpis{display:grid;gap:12px;margin-bottom:16px}
.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))} .kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))} .kpis-7{grid-template-columns:repeat(7,minmax(0,1fr))} .kpis-status{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.kpi{position:relative;overflow:hidden;isolation:isolate;background:var(--card);border-radius:22px;padding:16px 18px;min-height:118px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);color:var(--text);text-decoration:none!important;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
:root[data-theme=dark] .kpi{box-shadow:inset 0 0 0 1px var(--line)}
a.kpi:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(22,18,43,.45)}
/* hover keeps each card's own text colour (was 'inherit', which turned the dark Total card's text ink-on-ink) */
.kpi:hover{color:var(--text)}
.kpi-top{display:flex;align-items:center;gap:8px}
.kpi-top .kite-logo,.kpi-top .shp{flex:none}
.kpi-label{font-size:13px;font-weight:600;color:inherit;line-height:1.2}
.kpi-value{font:800 40px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:auto;padding-top:10px}
.kpi-money{font-size:28px}
.kpi small,.kpi-sub{font-size:12px;color:var(--muted);margin-top:4px;position:relative}
.kpis-7 .kpi{min-height:136px}
.kpis-7 .kpi-value{font-size:48px}
.kt-ink,.kt-ink:hover{background:var(--ink);color:#fff} .kt-ink .kpi-sub,.kt-ink small{color:#CFCBE3}
:root[data-theme=dark] .kt-ink{background:#2A2450}
.kt-lilac,.kt-lilac:hover{background:var(--lilac);color:var(--ink)} .kt-lilac .kpi-sub,.kt-lilac small{color:#3D3856}
.kt-lime,.kt-lime:hover{background:var(--lime);color:var(--ink)} .kt-lime .kpi-sub,.kt-lime small{color:#3D3856}
.kt-tang,.kt-tang:hover{background:var(--tang);color:var(--ink)} .kt-tang .kpi-sub{color:#3D1A0D}
.kt-cobalt,.kt-cobalt:hover{background:var(--cobalt);color:#fff} .kt-cobalt .kpi-sub,.kt-cobalt small{color:#E3E6FF}
.kt-white,.kt-white:hover{background:var(--card);color:var(--text)}
.kpi .deco{position:absolute;right:-18px;bottom:-18px;width:86px;height:86px;z-index:-1;border-radius:50%;background:currentColor;opacity:.08}
.kpi.st-new .deco{border-radius:50%;opacity:.14;background:var(--ink)}
.kpi.st-assigned .deco{border-radius:50% 0 0 50%;background:var(--cobalt);opacity:.14}
.kpi.st-in-progress .deco{border-radius:50% 50% 0 50%;background:var(--tang);opacity:.2}
.kpi.st-on-hold .deco{border-radius:14px;width:26px;right:22px;background:var(--grey-shape);box-shadow:-36px 0 0 var(--grey-shape);opacity:.2}
.kpi.st-completed .deco{opacity:.16;background:var(--ink)}
.kpi.kpi-danger .deco{border-radius:0;width:110px;height:100px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#fff;opacity:.3}
.kt-ink .deco{background:var(--lime);opacity:.9;width:70px;height:70px;right:-14px;bottom:-14px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.report-kpis .kpi .deco,.sow-kpis .kpi .deco{display:none}

/* ---------- Dashboard ---------- */
.bento{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:16px}
.bento>.card{margin:0}
.b-hours{grid-row:span 2;background:var(--cobalt);color:#fff;display:flex;flex-direction:column;gap:12px}
:root[data-theme=dark] .b-hours{background:#2632C4;box-shadow:none}
.bh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bh-sub{color:#E3E6FF;font-size:12.5px;margin-top:-8px}
.bh-total{text-align:right}
.bh-total span{display:block;font-size:12px;color:#E3E6FF;font-weight:600;margin-bottom:6px}
.bh-total b{font:800 46px/1 var(--display);letter-spacing:-.04em}
.bh-total small{font-size:22px;opacity:.75;margin-left:2px}
.vchart{width:100%;height:auto;display:block;overflow:visible}
.vtrack{fill:rgba(255,255,255,.1)}
.vbar{fill:#fff;transform-box:fill-box;transform-origin:bottom;animation:growy .8s cubic-bezier(.2,.7,.2,1) both}
.vbar-today{fill:var(--tang)}
.vval{font:700 12px var(--mono);fill:#fff;text-anchor:middle}
.vval-in{fill:var(--cobalt)}
:root[data-theme=dark] .vval-in{fill:#2632C4}
.vlabel{font:600 12px var(--mono);fill:#DDE0FF;text-anchor:middle}
.vlabel-sm{font:500 10.5px var(--font)}
.vlabel-today{fill:#fff;font-weight:800}
.bh-people{background:rgba(22,18,43,.2);border-radius:18px;padding:14px 16px}
.bh-people-t{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.bh-share{display:block;width:100%;height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.16)}
.bh-share .av-fill-1{fill:#fff} .bh-share .av-fill-4{fill:#16122B}
.bh-people-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.bh-people-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff}
.bh-people-list .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.bh-people-list b{font:600 12.5px var(--mono);color:#fff}
:root[data-theme=dark] .bh-share .av-fill-4{fill:#F3F1FB}
.hpair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto}
.hpair div{background:rgba(22,18,43,.2);border-radius:16px;padding:12px 14px}
.hpair b{display:block;font:800 26px/1 var(--display);letter-spacing:-.03em}
.hpair span{display:block;font-size:11.5px;color:#F1F2FF;margin-top:5px;line-height:1.3}
.b-cost{background:var(--ink);color:#fff;min-height:236px;overflow:hidden;isolation:isolate}
:root[data-theme=dark] .b-cost{background:#221C40}
.cost{font:800 40px/1 var(--display);letter-spacing:-.04em;color:var(--lime);margin-top:6px;overflow-wrap:anywhere}
.cost-sub{font-size:12.5px;color:#CFCBE3;margin-top:10px;max-width:60%}
.cost-sub strong{color:#fff}
.cost-art{position:absolute;right:-10px;bottom:-1px;z-index:-1}
.b-sow{min-height:236px;display:flex;flex-direction:column}
.sow-bubbles{display:flex;align-items:center;gap:0;margin:6px 0 0;padding:0}
.sow-bubbles .kpi{min-height:0;border-radius:50%;padding:0;align-items:center;justify-content:center;text-align:center;flex:none;box-shadow:0 0 0 4px var(--card);transition:transform .2s}
.sow-bubbles .kpi:hover{transform:scale(1.04);box-shadow:0 0 0 4px var(--card)}
.sow-bubbles .kpi-value{order:0;margin:0;padding:0;font-size:30px}
.sow-bubbles .kpi-label{order:1;font-size:10.5px;font-weight:700;margin-top:4px;max-width:64%;line-height:1.2}
.sow-b1{width:122px;height:122px;background:var(--lilac);color:var(--ink);z-index:1}
.sow-b2{width:116px;height:116px;background:var(--cobalt);color:#fff;margin-left:-8px;z-index:2}
.sow-b3{width:108px;height:108px;background:var(--tang);color:var(--ink);margin-left:-8px;z-index:3}
.sow-b1:hover,.sow-b3:hover{color:var(--ink)} .sow-b2:hover{color:#fff}
.sow-foot{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--muted)}
.sow-foot strong{color:var(--text)}
.mixbar{display:block;width:100%;height:16px;border-radius:999px;overflow:hidden;background:var(--chip)}
.mix{fill:currentColor}
.mix-empty{fill:var(--chip)}
.mix-legend{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.mix-legend li{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mix-legend b{font:700 13px var(--mono)}
.b-attn{display:flex;flex-direction:column;gap:8px}
.b-attn .c-title{margin-bottom:4px}
.attn{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:14px;background:var(--card-2);color:var(--text);font-weight:600;text-decoration:none!important;transition:background .15s}
.attn:hover{background:var(--chip);color:var(--text)}
.attn b{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;font:800 18px/1 var(--display);border-radius:12px}
.attn-cobalt b{background:var(--cobalt);color:#fff;border-radius:50%}
.attn-lilac b{background:var(--lilac);color:var(--ink)}
.attn-tang b{background:var(--tang);color:var(--ink);border-radius:50% 50% 50% 6px}
.workload-table td{vertical-align:middle}
.load{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end}
.load-bar{width:60px;height:8px;display:block}
.load-track{fill:var(--chip)}
.load-fill{fill:var(--cobalt)}
.av-fill-0{fill:var(--lime-deep)} .av-fill-1{fill:var(--cobalt)} .av-fill-2{fill:var(--tang)} .av-fill-3{fill:#9B83F5} .av-fill-4{fill:var(--ink)}
:root[data-theme=dark] .av-fill-4{fill:#F3F1FB}
.agency-viz{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center}
.donut{position:relative;width:140px;height:140px}
.donut svg{display:block}
.donut-track{stroke:var(--chip)}
.donut-seg{stroke:var(--cobalt)}
.ags-1{stroke:var(--tang)} .ags-2{stroke:var(--lime-deep)} .ags-3{stroke:#9B83F5} .ags-4{stroke:var(--ink)} .ags-5{stroke:#F062A0} .ags-none{stroke:var(--faint)}
:root[data-theme=dark] .ags-4{stroke:#F3F1FB}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-c b{font:800 30px/1 var(--display);letter-spacing:-.03em}
.donut-c span{font-size:12px;color:var(--muted)}
.ag-list{list-style:none;margin:0;padding:0}
.ag-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.ag-list li:first-child{border-top:0}
.ag-list b{font:800 18px var(--display)}
.ag-list em{font:500 11.5px var(--mono);font-style:normal;color:var(--muted);min-width:64px;text-align:right}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.mini-list li:first-child{border-top:0}
.recent-list a{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);font-weight:600}
.recent-title{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.recent-list .ticket-no{flex:none}
.recent-list li>.status{flex:none}

/* ---------- Ticket detail ---------- */
.ticket-hero{position:relative;background:var(--lilac);color:var(--ink);border-radius:var(--r-xl);padding:26px 30px 28px;overflow:hidden;margin-bottom:16px;isolation:isolate}
:root[data-theme=dark] .ticket-hero{background:#C4B2FF}
.tk-art{position:absolute;right:0;top:0;z-index:-1}
.ticket-head-main{position:relative;max-width:calc(100% - 300px)}
.ticket-head-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ticket-hero .status{background:#fff;color:var(--ink);padding:5px 11px 5px 8px;border-radius:10px}
/* hero pill is white in both themes: use the light-theme shape colours */
.ticket-hero .sc-lilac{color:#7B5CF0} .ticket-hero .sc-cobalt{color:#3443F5} .ticket-hero .sc-tang{color:#F05A2C} .ticket-hero .sc-lime{color:#8DB516} .ticket-hero .sc-pink{color:#E0458A} .ticket-hero .sc-teal{color:#0E9F8E} .ticket-hero .sc-grey{color:#8A879B} .ticket-hero .sc-ink{color:#16122B} .ticket-hero .shp .tick{stroke:#fff} .ticket-hero .sc-lime .tick{stroke:#16122B}
.ticket-hero .prio-chip.pr-high{background:#fff;color:#B23A0E}
.ticket-hero .tag-danger{background:#fff;color:#B23A0E}
.ticket-title{font:700 40px/1.06 var(--display);letter-spacing:-.035em;margin:16px 0 10px;color:var(--ink)}
.email-subject{display:flex;align-items:flex-start;gap:9px;color:#3D3856;font-weight:500;font-size:14px}
.email-subject .ic{margin-top:2px}
.email-subject .muted{color:#3F3A58}
.tk-act{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.ticket-hero .btn-ink{background:var(--ink);color:#fff}
.ticket-hero .btn-ink:hover{background:#2A2450;color:#fff}
.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.ticket-layout>*{min-width:0}
.ticket-layout{row-gap:0}
.ticket-layout>.ticket-links{grid-column:1/-1}
.ticket-side{display:flex;flex-direction:column;gap:0}
.totals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;margin-bottom:16px}
.tt{position:relative;border-radius:20px;padding:15px 16px;min-height:110px;display:flex;flex-direction:column}
.tt span{font-size:12px;font-weight:600}
.tt .big{display:block;font:800 30px/1 var(--display);letter-spacing:-.03em;margin-top:auto;padding-top:12px;overflow-wrap:anywhere}
.tt small{font-size:11.5px;font-weight:600;margin-top:3px}
.tt-hours{background:var(--lime);color:var(--ink)} .tt-hours small{color:#3D3856}
.tt-cost{background:var(--ink);color:#fff} .tt-cost .big{color:var(--lime)} .tt-cost span,.tt-cost small{color:#CFCBE3}
:root[data-theme=dark] .tt-cost{background:#2A2450}
.tt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.tt-head span{min-width:0;line-height:1.3;overflow-wrap:anywhere}
.tt em{flex:none;font:700 9.5px/1.2 var(--mono);font-style:normal;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:3px 6px;border-radius:6px}
.prose{white-space:normal;overflow-wrap:anywhere;color:var(--text-2);font-size:14.5px;line-height:1.65}
.details{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:10px 12px;margin:0}
.details dt{color:var(--muted);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding-top:3px}
.details dd{margin:0;word-break:break-word;font-weight:500;color:var(--text)}
.details-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.details-tiles>div{background:var(--card-2);border-radius:14px;padding:10px 12px;min-height:58px;min-width:0}
.details-tiles>div.span-2{grid-column:span 2}
.details-tiles dt{padding:0;margin-bottom:5px;font-size:10px}
.details-tiles dd{font-weight:600;font-size:13px;line-height:1.3}
.details-tiles dd small{font-weight:500}
.details-tiles .tag-danger{margin-top:4px}
.link-list{list-style:none;margin:0 0 10px;padding:0}
.link-list li{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.link-list li:first-child{border-top:0}
.link-list a{word-break:break-word;min-width:0;font-weight:600;color:var(--text)}
.link-list a:hover{color:var(--link)}
.link-list form{margin-left:auto;flex:none}
.lk-ic{width:36px;height:36px;border-radius:12px;background:var(--cobalt-soft);color:var(--cobalt-text);display:grid;place-items:center;flex:none}
.lk-main{flex:1;min-width:0}
.link-list .ext{opacity:.6}
.link-list .url{font-size:11.5px;margin-top:2px}
.kb-related li{gap:10px}
.kb-related-main{flex:1;min-width:0;overflow-wrap:anywhere}
.link-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:8px;align-items:center;margin-top:10px}
.link-add input,.link-add select{min-width:0;width:100%}
.kb-link-add{grid-template-columns:minmax(0,1fr) auto}
.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.links a{display:inline-flex;align-items:center;gap:5px;word-break:break-word}
.links-compact{font-size:12.5px;max-width:220px}
.links-compact a{display:flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.comment{background:var(--card-2);border-radius:4px 18px 18px 18px;padding:12px 15px}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;font-size:13px}
.comment-head time{font-size:11.5px}
.hours-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--lime-soft);color:var(--lime-text);font-family:var(--mono);font-size:11.5px;font-weight:700;white-space:nowrap;line-height:1.35}
.hours-badge svg{flex:none}
#hours-help{margin-top:-6px}
.comment-body{overflow-wrap:anywhere;color:var(--text-2);font-size:13.5px;line-height:1.55}
.replies{list-style:none;margin:12px 0 0 12px;padding:0 0 0 14px;border-left:2px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.reply{background:var(--cobalt-soft)}
.reply .comment-body{color:var(--text-2)}
.reply-box{margin-top:10px}
.reply-box summary{display:inline-flex;cursor:pointer;color:var(--link);font-size:12.5px;font-weight:700;list-style:none}
.reply-box summary::-webkit-details-marker{display:none}
.reply-box form{margin-top:8px}
.time-table .te-date{font:600 12px var(--mono);color:var(--text-2)}
.time-table .te-note{color:var(--text-2);min-width:160px}
.time-table th:first-child,.time-table td:first-child{padding-left:0}
.time-table th:last-child,.time-table td:last-child{padding-right:0}
.te-total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;background:var(--ink);color:#CFCBE3;border-radius:14px;padding:12px 16px;font-size:12.5px}
.te-total strong{font:700 13px var(--mono);color:var(--lime)}
:root[data-theme=dark] .te-total{background:#2A2450}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{display:flex;gap:12px;padding:0 0 16px;position:relative;font-size:13px;color:var(--text-2)}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:6px;top:18px;bottom:2px;width:2px;border-radius:2px;background:var(--line)}
.timeline li>div{min-width:0;overflow-wrap:anywhere}
.timeline strong{color:var(--text)}
.tl-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:3px;background:var(--grey-shape);box-shadow:0 0 0 3px var(--card)}
.tl-dot.tl-created{background:var(--cobalt)} .tl-dot.tl-commented{background:var(--lilac)} .tl-dot.tl-time_logged{background:var(--lime-deep)} .tl-dot.tl-time_deleted{background:var(--tang);border-radius:3px}
.tl-dot.tl-changed{background:var(--ink);border-radius:4px;transform:rotate(45deg) scale(.8)}
:root[data-theme=dark] .tl-dot.tl-changed{background:#F3F1FB}
.tl-dot.tl-shape{background:var(--card);border-radius:0;display:grid;place-items:center} .tl-dot.tl-shape .shp{width:14px;height:14px}
.quick-links{padding:14px}
.quick-links .btn{justify-content:flex-start}
.danger-zone summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--tang-text);font-weight:700;list-style:none}
.danger-zone summary::-webkit-details-marker{display:none}
.danger-zone form{margin-top:12px}

/* ---------- Track ---------- */
.track-hero-search{min-height:220px}
.track-hero-search .hero-art{right:0}
.track-hero-search .hero-main{max-width:660px}
.track-form{display:flex;gap:10px;align-items:stretch}
.track-form .search-field input{min-height:52px;font:600 17px var(--mono);text-transform:uppercase;letter-spacing:.06em;border-radius:14px;border-color:transparent;background:#fff;color:var(--ink)}
.track-form .search-field input::placeholder{text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:400;color:#6F6B86}
.track-form .search-field>.ic{color:#5F5B75}
.track-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.track-hero .ticket-no.lg{background:var(--chip);color:var(--text)}
.track-hero .ticket-title{color:var(--text);font-size:30px;margin:12px 0 8px}
.track-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.progress-steps{display:flex;gap:8px;margin:0 0 16px;background:var(--card);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow);flex-wrap:wrap}
:root[data-theme=dark] .progress-steps{box-shadow:inset 0 0 0 1px var(--line)}
.step{flex:1;display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600;min-width:130px;padding:10px 14px;border-radius:14px;background:var(--card-2)}
.step-dot{display:inline-grid;place-items:center;width:28px;height:28px;flex-shrink:0}
.step-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2);font:700 11.5px var(--mono);color:var(--muted)}
.step.done{background:var(--lime-soft);color:var(--lime-text)}
.step.current{background:var(--cobalt-soft);color:var(--cobalt-text);box-shadow:inset 0 0 0 2px var(--cobalt)}
.step.hold{background:var(--chip);color:var(--text-2);box-shadow:inset 0 0 0 2px var(--grey-shape)}

/* ---------- Reports ---------- */
.day-group{border-radius:18px;margin-bottom:12px;overflow:hidden;background:var(--card-2)}
.day-head{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:var(--chip)}
.day-head strong{font:700 14px var(--display);letter-spacing:-.01em}
.day-total{font:700 13px var(--mono);color:var(--ink);background:var(--lime);padding:3px 9px;border-radius:8px}
.day-group .table td,.day-group .table th{background:transparent}
.per-ticket-table td:nth-child(2){min-width:200px}

/* ---------- Admin ---------- */
td.actions-cell{white-space:nowrap}
.actions-cell>*{display:inline-block;vertical-align:middle;margin:2px 6px 2px 0}
.actions-cell>*:last-child{margin-right:0}
.actions-cell form{margin-top:2px;margin-bottom:2px}
.inline-details{position:relative} .inline-details summary{list-style:none} .inline-details summary::-webkit-details-marker{display:none}
.popover-form{position:absolute;z-index:20;background:var(--pop);border-radius:18px;box-shadow:var(--shadow-lg);padding:16px;width:290px;max-width:calc(100vw - 40px);right:0;top:calc(100% + 8px);animation:pop .16s ease-out}
:root[data-theme=dark] .popover-form{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-lg)}
.narrow-card{max-width:820px}
.admin-tabs{align-self:flex-end}
.roles-table td:not(:first-child),.roles-table th:not(:first-child){text-align:center}
.users-table .cell-user{min-width:200px}
.timeline li>div>.status::before{content:none} .timeline li>div>.status .shp{display:none}
.timeline li>div>.status{gap:0;font-weight:700;color:var(--text)}
@media (min-width:721px){.entries-table{table-layout:fixed}.entries-table th:nth-child(1){width:13%}.entries-table th:nth-child(2){width:12%}.entries-table th:nth-child(3){width:33%}.entries-table th:nth-child(4){width:11%}.entries-table th:nth-child(5){width:7%}.entries-table td{overflow-wrap:anywhere}}
.actions-cell .popover-form{white-space:normal}
.lk-main .url{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-all;line-height:1.35}
.kb-layout>*,.ticket-layout>*,.today-grid>*{min-width:0}
.links li{min-width:0}
li.empty{display:block!important;width:100%}
.bh-empty{margin:-4px 0 0;text-align:center;font-size:13px;font-weight:600;color:#fff}

/* Dashboard: lined up for the next 3 days */
.lined-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lined-day{background:var(--card-2);border-radius:var(--r);padding:14px;min-width:0}
.lined-date{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font:700 15px var(--display)}
.lined-date small{font:600 12px var(--font);color:var(--muted)}
.lined-date .count{margin-left:auto}
.lined-empty{margin:0;color:var(--muted);font-size:13px}
.lined-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lined-list li{background:var(--card);border-radius:var(--r-sm);padding:10px 12px;box-shadow:var(--shadow);min-width:0}
:root[data-theme=dark] .lined-list li{box-shadow:inset 0 0 0 1px var(--line)}
.lined-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.lined-why{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.why{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;line-height:1.4}
.why-due{background:var(--tang-soft);color:var(--tang-text)} .why-start{background:var(--cobalt-soft);color:var(--cobalt-text)} .why-followup{background:var(--lilac-soft);color:var(--lilac-text)}
.lined-name{display:block;margin:4px 0 6px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.lined-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px}

/* Admin: statuses, user edit */
.status-add{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto auto;gap:12px;align-items:end;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.status-add label.check{padding-bottom:12px;white-space:nowrap}
.order-btns{display:inline-flex;gap:4px}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--text);cursor:pointer;transition:background .15s}
.icon-btn:hover:not(:disabled){background:var(--hover)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.icon-btn:disabled{opacity:.35;cursor:default}
.cell-status-name{white-space:nowrap}
.cell-status-name .shp{vertical-align:-4px;margin-right:4px}
.swatches{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.swatches legend{font-size:13px;font-weight:600;margin:0 0 6px;padding:0;color:var(--text)}
label.swatch{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;margin:0}
.swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.swatch:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.swatch:has(input:focus-visible){box-shadow:var(--focus)}
.status-form{min-width:300px;max-width:380px}
.user-edit-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.user-edit-head strong{font:700 18px var(--display)}

/* ---------- Knowledge Base & SOP ---------- */
.kb-list{list-style:none;margin:0;padding:0}
.kb-item{display:flex;align-items:flex-start;gap:16px;padding:18px 22px;border-top:1px solid var(--line);transition:background .12s}
.kb-item:first-child{border-top:0}
.kb-item:hover{background:var(--hover)}
.kb-item-mark{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px}
.kb-mark-sop{background:var(--lilac);color:var(--ink);border-radius:14px 14px 14px 4px}
.kb-mark-kb{background:var(--cobalt);color:#fff;border-radius:50%}
.kb-item-main{min-width:0;flex:1}
.kb-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.kb-item-title{font:700 17px/1.25 var(--display);letter-spacing:-.015em;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.kb-item-title:hover{color:var(--link);text-decoration:underline}
.kb-item-excerpt{margin:5px 0 0;font-size:13px;overflow-wrap:anywhere;max-width:760px}
.kb-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;flex-shrink:0;max-width:260px}
.kb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.kb-hero{position:relative;border-radius:var(--r-xl);padding:26px 30px;overflow:hidden;margin-bottom:16px;isolation:isolate;color:var(--ink)}
.kb-hero-sop{background:var(--lilac)}
.kb-hero-kb{background:#D6DAFF}
.kb-art{position:absolute;right:0;top:0;z-index:-1;opacity:.95}
.kb-head-main{min-width:0;flex:1;max-width:calc(100% - 200px)}
.kb-hero .tag{background:rgba(255,255,255,.8);color:var(--ink)}
.kb-hero .tag.kb-type-sop{color:#3B2396} .kb-hero .tag.kb-type-kb{color:#2632C4}
.kb-hero a.tag:hover{background:#fff}
.kb-title{font:700 36px/1.08 var(--display);letter-spacing:-.03em;margin:12px 0 10px;overflow-wrap:anywhere;color:var(--ink)}
.kb-hero .muted{color:#3D3856}
.kb-hero strong{color:var(--ink)}
.kb-head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:relative}
.kb-head-actions form{margin:0}
.kb-hero .btn-ink{background:var(--ink);color:#fff} .kb-hero .btn-ink:hover{background:#2A2450;color:#fff}
.kb-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.kb-side .card{margin-bottom:16px}
.kb-side .link-list li{align-items:flex-start}
.kb-ticket-list{list-style:none;margin:0;padding:0}
.kb-ticket-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:9px 0;border-top:1px solid var(--line)}
.kb-ticket-list li:first-child{border-top:0}
.kb-ticket-name{flex:1;min-width:120px;overflow-wrap:anywhere;color:var(--text);font-weight:500}
.kb-side .timeline a,.kb-ticket-list a:not(.ticket-no){text-decoration:underline;text-underline-offset:2px}
.kb-body{padding:28px 32px}
.md-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1.5px solid var(--input-line);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--card-2)}
.md-toolbar .btn-sm{min-height:32px;padding:0 10px;background:var(--card)}
.md-toolbar + textarea{border-top-left-radius:0;border-top-right-radius:0}
.mono-area{font-family:var(--mono);font-size:13.5px;line-height:1.6}
.md-help summary{cursor:pointer;color:var(--link);font-size:12.5px;font-weight:700;margin-top:2px}
.md-help-grid{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin-top:8px;align-items:baseline}
.md-help-grid code{white-space:nowrap}
.kb-preview{box-shadow:inset 0 0 0 2px var(--lilac)}
.md{color:var(--text-2);line-height:1.72;font-size:15px}
.md > :first-child{margin-top:0} .md > :last-child{margin-bottom:0}
.md h2,.md h3,.md h4{font-family:var(--display);color:var(--text);line-height:1.25;margin:1.5em 0 .5em;letter-spacing:-.02em}
.md h2{font-size:23px} .md h3{font-size:18.5px} .md h4{font-size:15.5px}
.md p{margin:0 0 .95em}
.md ul,.md ol{margin:0 0 1em;padding-left:1.5em} .md li{margin:.3em 0}
.md ul li::marker{color:var(--tang)}
.md ol li::marker{color:var(--cobalt-text);font-weight:800;font-family:var(--display)}
.md a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.md a .ext{font-size:11px;opacity:.7;text-decoration:none}
.md code{font-family:var(--mono);font-size:.86em;padding:1px 6px;border-radius:6px;background:var(--chip);color:var(--text)}
.md pre.md-code{margin:0 0 1em;padding:16px 18px;border-radius:16px;background:var(--ink);overflow:auto;max-width:100%}
.md pre.md-code code{padding:0;background:none;font-size:13px;line-height:1.6;white-space:pre;color:#E9E6F7}
:root[data-theme=dark] .md pre.md-code{background:#0B0917;box-shadow:inset 0 0 0 1px var(--line)}
.md blockquote{margin:0 0 1em;padding:12px 16px;border-radius:4px 16px 16px 16px;background:var(--lilac-soft);color:var(--text)}
.md hr{border:0;border-top:2px dashed var(--line-2);margin:1.6em 0}
.md-checklist{list-style:none;padding-left:.2em!important}
.md-checklist li{display:flex;gap:9px;align-items:baseline}
.md-checklist .md-box{color:var(--cobalt-text);font-size:16px;line-height:1}
.md-checklist li.done{color:var(--muted)}
.diff{font-family:var(--mono);font-size:12.5px;border-radius:14px;overflow:auto;max-height:560px;background:var(--card-2)}
.diff-row{display:flex;min-width:max-content}
.diff-op{width:28px;flex-shrink:0;text-align:center;color:var(--muted);user-select:none;padding:2px 0}
.diff-line{white-space:pre-wrap;overflow-wrap:anywhere;padding:2px 12px 2px 0;min-width:0;max-width:100%}
.diff-add{background:var(--lime-soft)} .diff-add .diff-op{color:var(--lime-text);font-weight:700}
.diff-del{background:var(--tang-soft)} .diff-del .diff-op{color:var(--tang-text);font-weight:700}
.diff-del .diff-line{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--tang-text) 55%,transparent)}
.diff-gap{color:var(--muted);background:var(--chip);justify-content:center;padding:1px 0}
.diff-key{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:700}
.diff-key-add{background:var(--lime-soft);color:var(--lime-text)} .diff-key-del{background:var(--tang-soft);color:var(--tang-text)}
.kb-meta-diff{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 14px}
.kb-meta-diff dt{font-weight:600;color:var(--text-2)} .kb-meta-diff dd{margin:0;overflow-wrap:anywhere}
.kb-meta-diff del{color:var(--tang-text)} .kb-meta-diff ins{color:var(--lime-text);text-decoration:none;font-weight:700}

/* ---------- Login ---------- */
.login-body{min-height:100vh;background:var(--bg)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;padding:14px}
.login-art{position:relative;background:var(--ink);border-radius:var(--r-xl);overflow:hidden;color:#fff;padding:34px 38px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;min-height:560px}
:root[data-theme=dark] .login-art{background:#1F1A3A}
.login-shapes{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.login-art-top{display:flex;align-items:center;gap:12px}
.login-art-top .brand-text strong{font-size:22px}
.login-art-top .brand-text small{font-size:12px;color:#CFCBE3}
.login-art-copy{max-width:420px}
.login-headline{font:700 52px/1.02 var(--display);letter-spacing:-.04em;margin-top:14px}
.login-panel{display:grid;place-items:center;padding:28px}
.login-card{width:100%;max-width:400px;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.login-brand{display:flex;gap:16px;align-items:center;margin-bottom:28px}
.login-brand h1{font:800 40px/1 var(--display);letter-spacing:-.04em}
.login-brand p{margin:6px 0 0;color:var(--text-2);font-weight:500;font-size:13px}
.login-brand p.small{margin-top:2px;font-weight:400}
.login-card .stack{gap:16px}
.login-card input{min-height:50px;border-radius:14px}
.login-card .btn-lg{margin-top:4px}
.login-help{margin-top:18px}
.login-foot{margin-top:8px}

/* ---------- Password & error ---------- */
.page-head-narrow{margin-left:0}
.password-card{padding-top:26px}
.password-mark{width:48px;height:48px;border-radius:50% 50% 50% 8px;background:var(--lime);color:var(--ink);display:grid;place-items:center}
.error-page{max-width:560px;margin:30px auto;padding:20px 0;text-align:center}
.error-art{display:block;margin:0 auto 6px}
.error-code{font:800 96px/1 var(--display);letter-spacing:-.05em;color:var(--cobalt);margin:4px 0 6px}
:root[data-theme=dark] .error-code{color:#A9B1FF}
.error-page h1{font-size:28px;margin-bottom:8px}
.error-page>p.muted{font-size:15px}
.error-actions{justify-content:center;margin-top:22px}
.error-body{display:grid;place-items:center;min-height:100vh;padding:24px}
.error-page-fatal .error-art{position:relative;width:180px;height:110px}
.error-art span{position:absolute;display:block}
.ea-1{width:90px;height:90px;border-radius:50%;background:var(--cobalt);right:10px;top:0}
.ea-2{width:110px;height:55px;border-radius:110px 110px 0 0;background:var(--lime);left:10px;bottom:0}
.ea-3{width:44px;height:44px;border-radius:13px;background:var(--lilac);left:30px;top:6px;transform:rotate(14deg)}

/* ---------- Motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero,.ticket-hero,.kb-hero{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.tiles li{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.tiles li:nth-child(2){animation-delay:.05s} .tiles li:nth-child(3){animation-delay:.1s} .tiles li:nth-child(4){animation-delay:.15s}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Responsive ---------- */
.nav-short{display:none}
@media (max-width:1500px){.mainnav .uname{display:none}}
@media (max-width:1400px) and (min-width:1100px){.mainnav .nav-full{display:none}.mainnav .nav-short{display:inline}}
@media (max-width:1400px) and (min-width:721px){
  .tickets-table{font-size:12.5px}
  .tickets-table td,.tickets-table th{padding-left:6px;padding-right:6px}
  .tickets-table td.col-assigned_to .avatar{display:none}
  .tickets-table td.task-cell{min-width:160px}
  .tickets-table .ticket-no{padding-left:6px;padding-right:6px}
}
@media (max-width:1280px){
  .brand-text small{display:none}
  .mainnav>a{padding:8px 10px;font-size:13px}
  .kpis-7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .b-hours{grid-row:auto;grid-column:span 2}
  .ticket-layout{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:1180px){
  .ticket-layout,.kb-layout{grid-template-columns:minmax(0,1fr)}
  .ticket-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
  .ticket-side>.totals{grid-column:span 2}
  .filters-grid,.filters-grid-report{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .today-grid{grid-template-columns:minmax(0,1fr) 280px}
  .today-hero{flex-direction:column;align-items:stretch}
  .hero-accent{display:none}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1099px){
  .topbar-inner{min-height:60px}
  .navtoggle-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin-left:auto;cursor:pointer;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.09)}
  .navtoggle-btn span{width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .navtoggle:checked+.navtoggle-btn{background:var(--lime)}
  .navtoggle:checked+.navtoggle-btn span{background:var(--ink)}
  .navtoggle:checked+.navtoggle-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle:checked+.navtoggle-btn span:nth-child(2){opacity:0}
  .navtoggle:checked+.navtoggle-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .navtoggle:focus-visible+.navtoggle-btn{outline:2px solid var(--lime);outline-offset:2px}
  .mainnav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;background:var(--bar-bg);border-radius:20px;box-shadow:0 24px 50px -20px rgba(22,18,43,.7);flex-direction:column;align-items:stretch;padding:10px;gap:2px;max-height:calc(100vh - 100px);overflow-y:auto;animation:pop .18s ease-out}
  .navtoggle:checked~.mainnav{display:flex}
  .mainnav>a{padding:13px 14px;font-size:15.5px;border-radius:14px}
  .mainnav .nav-full{display:inline}.mainnav .nav-short{display:none}
  .nav-spacer{display:none}
  .mainnav>a.nav-cta,.mainnav>a.nav-cta:hover{margin:8px 0 0;height:50px;justify-content:center;font-size:15px}
  .theme-toggle{margin:6px 0 0;width:100%;height:48px;display:flex;gap:10px;justify-content:center;align-items:center;font:inherit;font-weight:600;font-size:14px;border-radius:14px}
  .theme-toggle .tt-label{display:inline}
  .usermenu{margin:6px 0 0}
  .usermenu summary{border-radius:14px;padding:8px 10px;background:rgba(255,255,255,.06)}
  .mainnav .uname{display:inline;font-size:14px}
  .usermenu-pop{position:static;margin-top:6px;box-shadow:none;min-width:0}
  .today-grid{grid-template-columns:minmax(0,1fr)}
  .today-side{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .workload-table td,.workload-table th{padding-left:8px;padding-right:8px}
}
@media (max-width:980px){
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid-4{grid-template-columns:1fr 1fr}
  .today-grid{grid-template-columns:minmax(0,1fr)}
  .today-side{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ticket-head-main{max-width:none}
  .tk-art{opacity:.35}
  .kb-head-main{max-width:none}
  .kb-art{opacity:.3}
  .login-shell{grid-template-columns:minmax(0,1fr)}
  .login-art{min-height:260px}
  .login-shapes .ls-sq,.login-shapes .ls-dots,.login-shapes .ls-wave{display:none}
  .login-shapes .ls-lime{transform:translate(260px,120px)}
  .login-headline{font-size:40px}
  .agency-viz{grid-template-columns:minmax(0,1fr);justify-items:center}
  .agency-viz .ag-list{width:100%}
}
@media (max-width:1180px){
  /* Today rows become cards (the fixed-width table has no room for the task name below this width) */
  .task-table,.task-table tbody,.task-table tr,.task-table td{display:block;width:auto}
  .task-table thead{display:none}
  .task-table tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
  .task-table tbody tr:first-child{border-top:0}
  .task-table td{padding:0!important;border:0!important;text-align:left!important}
  .task-table tbody tr:hover td{background:none}
  .task-table td[data-label="Ticket"]{grid-column:1;grid-row:1}
  .task-table td[data-label="Due"]{grid-column:2 / 4;grid-row:1;justify-self:end;display:flex;align-items:center;gap:6px}
  .task-table td[data-label="Due"] .due-date{display:inline;font-size:12px}
  .task-table td.task-cell{grid-column:1 / 3;grid-row:2;font-size:15px;min-width:0;max-width:none}
  .task-table td.task-cell a{font-size:14.5px}
  .task-table td.task-open{grid-column:3;grid-row:2 / 4;align-self:center}
  .task-table td[data-label="Status"]{grid-column:1 / 3;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .task-table td[data-label="Agency"],.task-table td[data-label="Assignee"],.task-table td[data-label="Hours"]{grid-row:4;font-size:12.5px;min-width:0}
  .task-table td[data-label="Agency"]{grid-column:1}
  .task-table td[data-label="Assignee"]{grid-column:2}
  .task-table td[data-label="Assignee"] .avatar{width:20px;height:20px;font-size:8.5px}
  .task-table td[data-label="Hours"]{grid-column:3;justify-self:end}
  .task-table td[data-label="Hours"]::after{content:" h";font-family:var(--font);color:var(--muted)}
  .task-table .m-meta{display:contents}
}
@media (max-width:720px){
  .container{padding:14px 12px 32px}
  .topbar{padding:10px 12px 0}
  .topbar-inner{padding:0 8px 0 14px;border-radius:18px}
  .page-title{font-size:34px}
  .page-head{margin:4px 2px 16px}
  .card{padding:18px;border-radius:22px}
  .hero{padding:22px 20px;border-radius:24px}
  .hero-title{font-size:32px;margin:10px 0 16px}
  .today-hero{gap:16px}
  .tiles{gap:8px}
  .tile{height:84px;border-radius:18px;padding:10px 11px}
  .tile b{font-size:28px}
  .tile-label{font-size:11px}
  .t-shape{width:24px;height:24px;top:9px;right:9px}
  .t-shape .shp{width:14px;height:14px}
  .today-side{grid-template-columns:minmax(0,1fr)}
  .task-group-head{padding:14px 16px}
  .task-group-title{font-size:18px}
  .task-group-sub{flex-basis:100%;order:5}
  .task-group .table-wrap{padding:0 16px 6px;overflow:visible}
  .task-empty{margin:0 16px 16px}
  .ticket-hero{padding:22px 20px 22px;border-radius:24px}
  .ticket-title{font-size:30px}
  .tk-art,.kb-art{display:none}
  .ticket-hero::after,.kb-hero::after{content:"";position:absolute;z-index:-1;right:-34px;top:-34px;width:96px;height:96px;border-radius:50%;background:var(--tang)}
  .ticket-side{display:flex}
  .kb-hero{padding:22px 20px;border-radius:24px}
  .kb-title{font-size:28px}
  .kb-body{padding:20px}
  .kpis-7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis-7 .kpi:first-child{grid-column:span 2}
  .kpis-7 .kpi{min-height:112px}
  .kpis-7 .kpi-value,.kpi-value{font-size:36px}
  .kpis-3{grid-template-columns:minmax(0,1fr)}
  .bento{grid-template-columns:minmax(0,1fr)}
  .b-hours{grid-column:auto}
  .bh-total b{font-size:34px}
  .hpair{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hpair div{padding:10px}
  .hpair b{font-size:20px}
  .sow-bubbles{justify-content:center}
  .kpis-3.sow-bubbles{display:flex}
  .form-grid,.filters-grid,.filters-grid-report,.form-grid-4,.form-grid-3{grid-template-columns:minmax(0,1fr)}
  .lined-days{grid-template-columns:minmax(0,1fr)}
  .status-add{grid-template-columns:minmax(0,1fr)}
  .status-add label.check{padding-bottom:0}
  .status-form{min-width:0}
  .span-2,.details-tiles>div.span-2{grid-column:auto}
  .filters-main label.inline{flex:1 1 140px}
  .filters-main label.inline select{min-width:0;width:100%}
  .track-form{flex-direction:column}
  .track-hero .ticket-title{font-size:24px}
  .track-status{align-items:flex-start;text-align:left}
  .link-add,.kb-link-add{grid-template-columns:minmax(0,1fr)}
  .sow-toolbar .inline-form,.sow-toolbar .search-field,.sow-toolbar .inline-form select,.kb-toolbar .inline-form,.kb-toolbar .search-field,.kb-toolbar .inline-form select{width:100%;flex:1 1 100%;min-width:0}
  .sow-toolbar .inline-form input[type=search],.kb-toolbar .inline-form input[type=search]{min-width:0}
  .sow-toolbar .inline-form,.kb-toolbar .inline-form{flex-wrap:wrap}
  .sow-toolbar .search-field,.kb-toolbar .search-field{min-width:0}
  .kb-item{padding:16px;gap:12px}
  .kb-item-mark{width:36px;height:36px}
  .kb-item-main{flex:1 1 calc(100% - 50px)}
  .kb-item{flex-wrap:wrap}
  .kb-item-side{align-items:flex-start;text-align:left;max-width:none;padding-left:48px}
  .md-help-grid{grid-template-columns:1fr} .md-help-grid code{white-space:normal}
  .pill-select,.pill-select select{width:100%}
  .dash-filters{justify-content:stretch;width:100%}
  .dash-filters>.pill-select{flex:1 1 160px}
  .dash-filters .pill-select select{width:100%;min-width:0}
  .range-custom{width:100%}
  .range-custom input[type=date]{flex:1 1 130px;min-width:0}
  .login-shell{padding:10px}
  .login-art{min-height:220px;padding:22px 22px}
  .login-headline{font-size:32px}
  .login-panel{padding:24px 8px 32px}
  .login-brand h1{font-size:32px}
  .error-code{font-size:72px}
  .agency-viz .donut{margin:0 auto}
  /* Generic tables -> stacked cards */
  .rows-to-cards,.rows-to-cards tbody,.rows-to-cards tr,.rows-to-cards td{display:block;width:auto}
  .rows-to-cards thead{display:none}
  .rows-to-cards tr{padding:14px 16px;border-top:1px solid var(--line)}
  .rows-to-cards tbody tr:first-child{border-top:0}
  .rows-to-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0!important;border:0!important;text-align:right!important;white-space:normal!important;min-width:0;max-width:none}
  .rows-to-cards td[data-label]::before{content:attr(data-label);flex:none;font:600 10.5px/1.3 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left}
  .rows-to-cards td.cell-no,.rows-to-cards td.task-cell{display:block;text-align:left!important}
  .rows-to-cards td.cell-no::before,.rows-to-cards td.task-cell::before{content:none!important}
  .rows-to-cards td.task-cell{padding:6px 0 8px!important;font-size:15px}
  .rows-to-cards td.cell-actions,.rows-to-cards td.actions-cell{justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .rows-to-cards td.actions-cell>*{margin:0}
  .rows-to-cards td.cell-actions::before{content:none}
  .rows-to-cards td:empty{display:none}
  .rows-to-cards tbody tr:hover td{background:none}
  .rows-to-cards .links-compact{max-width:60%}
  .rows-to-cards .person{justify-content:flex-end}
  .time-table tr{padding:12px 0}
  .users-table td.actions-cell{flex-wrap:wrap}
  .users-table .popover-form{left:0;right:auto}
  .workload-table.rows-to-cards tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}
  .workload-table td.cell-person,.workload-table td.cell-open{grid-column:1 / -1}
  .workload-table td.cell-person{display:block;padding:2px 0 4px!important}
  .workload-table td.cell-person::before{content:none}
  .workload-table td.cell-person .person{justify-content:flex-start;font-size:15px}
  .workload-table td.cell-person a{font-weight:600}
  .per-ticket-table tfoot,.per-ticket-table tfoot tr{display:flex;width:auto}
  .per-ticket-table tfoot tr{justify-content:flex-end;gap:18px;padding:12px 0;border-top:1px solid var(--line-2);flex:1}
  .per-ticket-table tfoot th{display:block;border:0;padding:0!important}
  .per-ticket-table tfoot th:first-child{margin-right:auto}
  .entries-table tr{padding:10px 0}
  .lookup-table td.cell-name{display:block}
  .lookup-table tr,.card:not(.flush) .rows-to-cards tr{padding-left:0;padding-right:0}
  .lookup-table td.cell-name .inline-edit{width:100%}
  .lookup-table td.cell-name .inline-edit input{flex:1;min-width:0}
  .sticky-actions{bottom:8px}
}
@media (max-width:560px){
  /* phones: 2 x 2 tiles so every label fits on one line */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{height:76px}
}
@media (max-width:420px){
  .brand-text small{display:none}
  .hero-title{font-size:29px}
  .tile b{font-size:26px}
}
@media print{
  .topbar,.filters,.actions,.footer,.theme-toggle,.hero-art,.tk-art,.skip-link{display:none}
  body,html{background:#fff}
  .card,.kpi,.task-group{box-shadow:none;border:1px solid #ddd}
  .hero,.ticket-hero{background:#fff;color:#000;border:1px solid #ddd}
  .hero-title,.ticket-title{color:#000}
}