:root{
 --ink:#0c1320; --ink-soft:#1b2536; --ink-line:#1d2738;
 --bg:#f5f7fa; --card:#ffffff; --line:#e7eaf0; --line2:#eef1f5;
 --txt:#16202e; --mut:#6b7686; --mut2:#9aa4b2;
 --accent:#0fb6a6; --accent-d:#0a8f83; --accent-soft:#e9f9f6;
 --pos-mgr:#4f46e5; --pos-am:#e11d48; --pos-key:#0d9488; --pos-lead:#7c3aed; --pos-att:#16a34a;
 --warn:#e0a800; --danger:#dc3545; --ok:#0a9d57; --info:#1d6fd6;
 --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
 --shadow-lg:0 8px 30px rgba(16,24,40,.12);
 --r:10px; --r-sm:8px; --r-lg:14px;
 /* Responsive layout tokens (RESPONSIVE-DESIGN-PROTOCOL.md §3/§5): sidebar is a constrained track, never the screen. */
 --sidebar-w: clamp(200px, 18vw, 280px);
 --modal-w: 480px;
 --font:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --display:'Schibsted Grotesk', var(--font);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{font-family:var(--font);color:var(--txt);background:var(--bg);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none !important}
.muted{color:var(--mut)}
.error{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;color:var(--txt)}
a{color:var(--accent-d);text-decoration:none}
button{font-family:var(--font)}

/* ---------- login ---------- */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%, #eafcf9 0%, var(--bg) 55%)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 30px;width:360px;box-shadow:var(--shadow-lg);text-align:center}
.login-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:4px}
.login-brand .logo,.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-d));display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:background .25s ease}
.login-brand .wm{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.5px}
.login-brand .wm b{color:var(--accent-d);font-weight:700}
.login-sub{color:var(--mut2);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 22px}
.login-card input{width:100%;margin-bottom:12px}
.login-card .primary{width:100%;margin-top:4px}
.login-card label.check{display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 0;font-size:13px;cursor:pointer}
.login-card label.check input[type=checkbox]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--accent)}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
/* The mobile-drawer backdrop is an OVERLAY — always position:fixed so it never becomes a grid child of #app and
   distorts the desktop sidebar/content columns. Hidden until the drawer is open (only happens on mobile/tablet). */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:150}
#app.nav-open .nav-backdrop{display:block}
#sidebar{background:var(--ink);color:#c4ccd8;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.brand .wm{font-family:var(--display);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.4px;line-height:1}
.brand .wm b{color:var(--accent)}
.brand .wm small{display:block;font-family:var(--font);font-weight:500;font-size:9.5px;letter-spacing:2px;color:var(--mut2);text-transform:uppercase;margin-top:3px}
#nav{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
#nav button{display:flex;align-items:center;gap:12px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:#aab4c2;font-size:13.5px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:background .12s,color .12s}
#nav button i{font-size:19px;width:20px;text-align:center}
#nav button:hover{background:var(--ink-soft);color:#fff}
#nav button.active{background:var(--accent);color:#fff;font-weight:600}
.side-foot{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--ink-line)}
.side-user{flex:1;min-width:0;font-size:12px}
.side-user #side-name{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .muted{color:var(--mut2);text-transform:capitalize}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 32px}

.workspace{display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topbar{height:60px;flex:0 0 60px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px}
.site-sel{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-weight:600;cursor:pointer;background:var(--card)}
.site-sel i:first-child{color:var(--accent);pointer-events:none}.site-sel .chev{color:var(--mut2);font-size:15px;pointer-events:none}
.site-sel select{border:0;background:transparent;font:inherit;font-weight:600;color:var(--txt);outline:0;cursor:pointer;font-size:14px;font-family:var(--display);-webkit-appearance:none;-moz-appearance:none;appearance:none}
.topbar-sp{flex:1}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;position:relative;transition:background .12s,color .12s}
.iconbtn:hover{background:var(--bg);color:var(--txt)}
.iconbtn.ghost{border:0;background:transparent;color:var(--mut2);width:32px;height:32px}
.iconbtn.ghost:hover{color:#fff;background:var(--ink-soft)}
.dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}
.umenu{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px}
.umeta{display:flex;flex-direction:column;line-height:1.2}
.umeta #who{font-weight:600;font-size:13px}.umeta .muted{font-size:11px;text-transform:capitalize}

#main{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:24px 28px}

/* ---------- typography blocks ---------- */
.section-title{font-size:16px;margin:22px 0 12px;font-weight:600;padding-left:11px;position:relative}
.section-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:16px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent-d))}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.row h3{font-size:18px;margin-right:auto}

/* ---------- buttons ---------- */
button.primary,.primary{background:var(--accent);border:1px solid var(--accent);color:var(--accent-fg,#04221f);font-weight:600;border-radius:var(--r-sm);padding:9px 15px;cursor:pointer;font-size:13.5px;transition:background .12s,transform .07s ease,filter .1s,box-shadow .1s}
button.primary:hover,.primary:hover{background:var(--accent-d)}
button.primary:active,.primary:active{transform:scale(.93);filter:brightness(.88);box-shadow:inset 0 2px 6px rgba(0,0,0,.28)}
button:not(.primary):not(.iconbtn):not(#nav button){background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;font-size:13.5px;font-weight:500;transition:background .12s,transform .07s ease,box-shadow .1s}
button:not(.primary):not(.iconbtn):not(#nav button):hover{background:var(--bg)}
button:not(.primary):not(.iconbtn):not(#nav button):active{transform:scale(.93);background:var(--line2,var(--bg));box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
.iconbtn{transition:background .12s,color .12s,transform .07s ease}
.iconbtn:active{transform:scale(.88);background:var(--bg)}
#nav button:active{transform:scale(.96)}
/* Press ripple-ish: kill the default mobile tap highlight, use our own */
button{-webkit-tap-highlight-color:transparent}
button:not(.primary):not(.iconbtn):not(#nav button):hover{background:var(--bg)}
button.danger{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important;font-weight:600}
button.danger:hover{background:var(--danger)!important;filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}

/* ---------- inputs ---------- */
input,select,textarea{font-family:var(--font);font-size:13.5px;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;outline:0;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.card h3{font-size:15.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;border-top:1px solid var(--line2)}
.kv:first-of-type{border-top:0}
.kv>span:first-child{color:var(--mut)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--bg);color:var(--mut);text-transform:capitalize;letter-spacing:.2px}
.badge.operating,.badge.low,.badge.approved{background:#e7f8ef;color:var(--ok)}
.badge.opening_soon,.badge.moderate,.badge.min{background:#fff4e0;color:#b9770b}
.badge.construction,.badge.high,.badge.max,.badge.severe{background:#fdeaec;color:var(--danger)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
th{text-align:left;font-weight:600;color:var(--mut);background:var(--line2);padding:10px 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-top:1px solid var(--line2)}
tr:first-child td{border-top:0}

/* ---------- toast / modal ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;box-shadow:var(--shadow-lg);z-index:100;animation:rise .2s ease}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.modal{position:fixed;inset:0;background:rgba(12,19,32,.45);display:flex;align-items:center;justify-content:center;z-index:90;backdrop-filter:blur(2px)}
.modal-card{background:var(--card);border-radius:16px;padding:clamp(18px,4vw,26px);width:min(92vw,var(--modal-w));max-height:85vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal-card h2{font-size:18px;margin-bottom:6px}
.modal-x{background:var(--bg,#f3f4f6);border:1px solid var(--line);font-size:18px;line-height:1;color:var(--mut);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:9px;flex:0 0 auto}
.modal-x:hover{background:var(--line);color:var(--txt)}
.m-sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:5px 12px;margin:4px 0 8px}
.m-site-chk{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;cursor:pointer}
.modal-card .m-site-chk input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
/* Team table: sticky header (freezes column labels on vertical scroll) + frozen first column (names stay on horizontal scroll) */
.team-scroll{overflow:auto;max-height:68vh;border:1px solid var(--line);border-radius:10px}
.team-scroll table{width:100%}
.team-scroll thead th{position:sticky;top:0;background:var(--card);z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
.team-scroll th:first-child,.team-scroll td:first-child{position:sticky;left:0;background:var(--card);box-shadow:inset -1px 0 0 var(--line)}
.team-scroll td:first-child{z-index:1}
.team-scroll thead th:first-child{z-index:3}
.modal-card input{width:100%;margin:8px 0}
.modal-card .settings-grid input:not([type=color]),.modal-card .settings-grid select,.modal-card .settings-grid textarea{width:100%;margin:4px 0 0;box-sizing:border-box;min-width:0}
.modal-card .settings-grid input[type=date],.modal-card .settings-grid input[type=time]{-webkit-appearance:none;-moz-appearance:none;appearance:none}
/* Color picker = a clickable chip showing the current color (same as the position-color setting), not a grey bar. */
input[type=color]{width:56px;height:30px;border:1px solid var(--line);border-radius:6px;padding:0;cursor:pointer;background:none;vertical-align:middle}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.modal-card .primary{width:100%;margin-top:8px}

/* ---------- schedule grid ---------- */
.sched-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sched-top b{font-family:var(--display);font-size:16px;min-width:130px;text-align:center}
.sched-wrap{display:flex;gap:16px;align-items:flex-start;margin-top:12px}
.sched-filters{flex:0 0 198px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 15px;box-shadow:var(--shadow)}
.sched-filters h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin-bottom:12px}
.sched-filters .fhead{font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin:14px 0 6px}
.sched-filters label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer}
.sched-filters #f-pos{display:grid;grid-template-columns:1fr;gap:2px}
.sched-filters #f-pos .fpos-lbl{margin:0}
.sched-grid-area{flex:1;min-width:0;overflow:auto}
.wiw-grid{width:100%;min-width:880px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.wiw-row{display:grid;grid-template-columns:190px repeat(7,minmax(104px,1fr));border-top:1px solid var(--line2)}
.wiw-row.head{background:var(--line2);border-top:0;position:sticky;top:0;z-index:2}
.wiw-name{padding:9px 13px;border-right:1px solid var(--line2);display:flex;flex-direction:column;justify-content:center;gap:2px;background:var(--card)}
.wiw-name b{font-weight:600}
.wiw-name .muted{font-size:11px}
.wiw-dh{padding:9px 12px;font-family:var(--display);font-weight:600;font-size:13px}
.wiw-dh .muted{font-weight:400;color:var(--mut)}
.wiw-cell{padding:5px;border-right:1px solid var(--line2);min-height:52px;display:flex;flex-direction:column;gap:4px;position:relative}
.wiw-cell.today,.wiw-dh.today{background:var(--accent-soft)}
/* Hover affordance: empty day cells show a semi-transparent "+ Add a Shift" bubble so it's clearly clickable. */
.wiw-cell.addable{cursor:pointer}
.wiw-cell.addable:empty:hover::before{content:'+ Add a Shift';position:absolute;inset:4px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft,rgba(15,118,110,.10));border:1.5px dashed var(--accent,#0f766e);border-radius:8px;color:var(--accent-d,#0f766e);font-size:11.5px;font-weight:700;opacity:.9;pointer-events:none}
.wiw-dh.today{color:var(--accent-d)}
.wiw-row.open .wiw-name{color:var(--accent-d);font-weight:600}
.wiw-row.totals{background:var(--line2);font-weight:600;border-top:2px solid var(--line)}
.wiw-cell.tot{align-items:center;justify-content:center;color:#445;min-height:40px}
.wiw-shift{color:var(--txt,#111);border-radius:8px;padding:5px 8px;line-height:1.2;position:relative;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .06s,filter .12s}
.wiw-shift .tm{color:var(--txt,#111)}
.wiw-shift .pos{color:var(--pc,#555);opacity:.95}
.wiw-shift:hover{filter:brightness(1.06)}
.wiw-shift:active{transform:scale(.98)}
.wiw-shift .tm{font-weight:700;display:block;font-size:12px}
.wiw-shift .pos{font-size:9.5px;opacity:.92;letter-spacing:.3px;text-transform:uppercase}
.wiw-shift.draft{opacity:1}
.wiw-unconf{display:block;color:#dc2626;font-weight:800;font-size:8.5px;text-transform:uppercase;letter-spacing:.02em;margin-top:1px}
.wiw-manual{display:inline-flex;align-items:center;gap:2px;color:#7c3aed;font-weight:800;font-size:8.5px;text-transform:uppercase;letter-spacing:.02em;margin-top:1px}
.wiw-manual i{font-size:11px}
.wiw-shift.manual{border-left-style:dashed!important;border-left-width:3px!important}
.sc-tag.unconf{background:rgba(220,38,38,.12);color:#dc2626}
.wiw-shift.tentative{outline:2px dashed #f4c000;outline-offset:-2px}
.wiw-shift .x{position:absolute;top:1px;right:5px;cursor:pointer;opacity:0;font-weight:700;font-size:13px}
.wiw-shift:hover .x{opacity:.85}

/* ---------- forecast bars ---------- */
.bar-row{display:flex;align-items:flex-end;gap:4px;margin-top:14px;min-height:90px}
.bar{background:linear-gradient(180deg,var(--bar,var(--accent)),color-mix(in srgb,var(--bar,var(--accent)) 45%,#fff));border-radius:4px 4px 0 0;min-height:2px;width:100%}
.bar.staff{background:var(--txt)}   /* forecast day-view: staff-required bars (adapts light/dark) */
.bar-label{font-size:10px;color:var(--mut);text-align:center;margin-top:4px}
#budget-panel:not(:empty){margin:6px 0 4px}
.day-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}

/* KPI summary tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:6px 0 4px}
/* SYSTEMIC GUARD (tile text must never bleed): min-width:0 lets grid tracks shrink; overflow-wrap breaks long
   words (e.g. FORECASTED); overflow:hidden clips as a last resort. Applies to every .kpi tile everywhere. */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow);min-width:0;overflow:hidden}
.kpi-l,.kpi-v,.kpi-s{min-width:0;overflow-wrap:break-word;word-break:break-word}
.kpi-l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.kpi-v{font-family:var(--display);font-size:22px;font-weight:600;margin:4px 0 2px}
.kpi-v.warn{color:var(--danger)}
.kpi-s{font-size:11.5px;color:var(--mut)}
/* data-freshness light */
.dlight{display:inline-block;width:11px;height:11px;border-radius:50%;cursor:help;vertical-align:middle;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.dlight.green{background:#22c55e}.dlight.yellow{background:#eab308}.dlight.red{background:#ef4444}.dlight.off{background:#c7cdd6}
/* user dropdown */
.umenu-pop{position:absolute;top:46px;right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:222px;padding:6px;z-index:80}
.umenu-pop .umenu-h{padding:9px 12px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line2);margin-bottom:4px}
.umenu-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--txt);font-size:13.5px;cursor:pointer}
.umenu-pop a i{font-size:18px;color:var(--mut)}
.umenu-pop a:hover{background:var(--bg)}
.umenu-sep{height:1px;background:var(--line2);margin:4px 0}
.site-status{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.metaline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5;margin-top:8px;font-size:12.5px}
.metaline i{font-size:16px;color:var(--mut)}
.badge.light{background:#e7f8ef;color:var(--ok)}

/* settings: wide form fields (no truncation) */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
/* Responsive: stack to one column on phones so labels/fields stay readable (laptop/tablet keep two). */
@media(max-width:560px){.settings-grid{grid-template-columns:1fr}.modal-card{width:auto;max-width:94vw}}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
/* AnalyticsIQ "updating" overlay — shown while new site/date data is being pulled, over the (dimmed) current view. */
#an-busy{position:absolute;inset:0;background:rgba(255,255,255,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:48px;z-index:30}
.an-busy-pill{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:9px 16px;border-radius:22px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg)}
.an-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:an-spin .7s linear infinite;display:inline-block}
@keyframes an-spin{to{transform:rotate(360deg)}}
/* Staffing-rules grid: equal-height cells with the input pinned to the bottom, so the boxes line up cleanly even
   when labels wrap to two lines. */
.st-grid{grid-auto-rows:1fr;align-items:stretch}
.st-grid .fld{justify-content:space-between}
.st-grid .fld span{font-size:12px;line-height:1.3;color:var(--mut)}
.st-grid .fld input{width:100%;box-sizing:border-box;margin-top:auto}
.fld>span{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.fld input,.fld select{width:100%;box-sizing:border-box;max-width:100%}
.modal-card.wide{--modal-w:720px;width:min(92vw,var(--modal-w));max-height:85vh;overflow:auto}
.modal-card .sec{font-family:var(--display);font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin:18px 0 8px;font-weight:600;border-top:1px solid var(--line2);padding-top:12px}
.modal-card .sec:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.tbl-tight td,.tbl-tight th{padding:6px 10px}

/* ---- Overview tiles (richer site cards) ---- */
.ov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.ov-grid{grid-template-columns:1fr}}
.site-tile{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.site-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.tile-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--accent-soft),transparent)}
.site-ini{width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 2px 6px rgba(15,182,166,.35)}
.tile-head h3{margin:0;font-size:16px;font-family:var(--display);letter-spacing:-.01em}
.tile-head .small{font-size:12px;color:var(--mut);margin-top:1px}
.tile-head .badge{margin-left:auto;align-self:flex-start}
.tile-lights{display:flex;gap:20px;padding:11px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.statline{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut)}
.statline b{color:var(--txt);font-weight:600}
.tile-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.tile-kpis .tk{background:var(--card);padding:13px 8px;text-align:center}
.tk-v{font-size:19px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1}
.tk-v.cgood{color:var(--ok)} .tk-v.cwarn{color:var(--warn)} .tk-v.cbad{color:var(--danger)}
.tk-l{font-size:10.5px;color:var(--mut);margin-top:5px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em}
.tile-meta{padding:11px 18px;display:flex;flex-direction:column;gap:6px;margin-top:auto}

/* ---- Module switcher popover ---- */
.modules-pop{position:fixed;z-index:200;width:320px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:7px;animation:pop .12s ease}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mp-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:8px 10px 6px}
.mp-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;text-decoration:none;color:var(--txt)}
.mp-item:hover{background:var(--bg)}
.mp-item.active{background:var(--accent-soft)}
.mp-ic{width:34px;height:34px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.mp-tx{display:flex;flex-direction:column;line-height:1.25;flex:1}
.mp-tx b{font-size:13.5px} .mp-tx span{font-size:11.5px;color:var(--mut)}
.mp-chk{color:var(--accent);font-size:18px}
.mp-soon{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);background:var(--bg);border:1px solid var(--line);padding:2px 7px;border-radius:20px}
/* ---- Module placeholder hero ---- */
.module-hero{max-width:560px;margin:36px auto;text-align:center}
.mh-ic{width:68px;height:68px;border-radius:18px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:32px;box-shadow:var(--shadow-lg)}
.module-hero h2{font-family:var(--display);font-size:26px;margin:16px 0 6px;display:flex;gap:10px;align-items:center;justify-content:center}
.mh-soon{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-d);background:var(--accent-soft);padding:4px 10px;border-radius:20px}
.mh-sub{color:var(--mut);font-size:14px;margin:0 auto}
.mh-card{margin:22px auto 0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.mh-card-h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:10px}
.mh-feat{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;border-top:1px solid var(--line2)}
.mh-feat:first-of-type{border-top:0}
.mh-feat .ti{color:var(--accent);font-size:18px}

/* ---- Overview tile drag-to-reorder ---- */
.site-tile[draggable=true]{cursor:grab}
.site-tile[draggable=true]:active{cursor:grabbing}
.site-tile.dragging{opacity:.45;box-shadow:var(--shadow-lg);transform:scale(.99)}

/* ---- Company-wide overview tile ---- */
.company-tile{padding:0;overflow:hidden;margin-bottom:18px}
.company-tile .tile-head{background:linear-gradient(180deg,rgba(12,19,32,.05),transparent)}
.ct-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:820px){.ct-cols{grid-template-columns:1fr}}
.ct-col{background:var(--card);padding:14px 18px}
.ct-h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;margin-bottom:10px}
.ct-col .kpis{grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
/* keep the clean 3×3 on phones too (2-col left an odd orphan tile); tighten spacing so it fits */
@media(max-width:560px){.ct-col .kpis{gap:6px}.ct-col .kpi{padding:9px 8px}}
.ct-col .kpi{padding:10px 12px}
.ct-col .kpi-v{font-size:19px}
/* ---- per-site tile section headers ---- */
.tile-section-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:10px 18px 4px;border-top:1px solid var(--line)}

/* ---- AnalyticsIQ ---- */
.an-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.an-controls select{min-width:160px}
/* Financials — WashMetrix-style four-wide tiles */
.fin-wm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.fin-wm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.fin-wm{grid-template-columns:1fr}}
.wm-tile{display:flex;flex-direction:column;gap:2px;padding:16px}
.wm-title{font-size:13px;font-weight:700;color:var(--txt)}
.wm-delta{font-size:12px;margin:1px 0 2px}
.wm-val{font-size:26px;font-weight:800;line-height:1.1;margin:2px 0}
.wm-sub{font-size:11px;line-height:1.5}
.wm-pl{font-size:18px;font-weight:700;margin:2px 0}
.fin-month{margin-top:8px}
.fin-month>summary{cursor:pointer;font-weight:600;padding:2px 0}
/* Scope tabs (All Sites | groups | + Add a Group) */
.an-scope-tabs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px}
.an-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.an-tab:hover{background:var(--bg);color:var(--txt)}
.an-tab.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 10px rgba(15,118,110,.28)}
.an-tab-add{border-style:dashed;color:var(--accent-d)}
.an-tab-add:hover{background:var(--accent-soft);color:var(--accent-d)}
.an-tab-x{font-size:16px;line-height:1;opacity:.45;padding:0 1px;border-radius:50%;transition:opacity .15s,color .15s,background .15s}
.an-tab-x:hover{opacity:1;color:#dc2626;background:rgba(220,38,38,.14)}
.an-tab.on .an-tab-x{opacity:.75;color:#fff}
#an-grp-save{display:none}
.an-scope-pop.adding #an-grp-save{display:flex}
.an-scope-pop.adding::before{content:'Pick the sites for this group, then Save';display:block;font-size:11px;color:var(--mut);padding:3px 6px 8px;font-weight:600}
.an-delta{font-weight:700;font-size:11px;padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:1px;background:var(--line2);color:var(--mut);line-height:1.5;vertical-align:middle}
.an-delta.good{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.an-delta.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}

/* ---- tenure badge (Legacy / NTI) ---- */
.tile-badges{margin-left:auto;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.tile-badges .badge{margin-left:0}
.badge.tn-legacy{background:#eef2ff;color:#4f46e5}
.badge.tn-nti{background:#fff7ed;color:#c2410c}

/* ---- AnalyticsIQ larger WashMetrix-style tiles ---- */
.an-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1180px){.an-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.an-grid{grid-template-columns:1fr}}
/* pacing tiles: larger, 2-up, spread */
#an-body > .cards:first-child{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#an-body > .cards:first-child .card{padding:22px 24px}
#an-body > .cards:first-child .an-pace td,#an-body > .cards:first-child .an-pace th{padding:9px 12px;font-size:14px}
.an-tile{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ac,var(--accent));border-radius:14px;padding:16px 20px 18px;box-shadow:var(--shadow);min-height:124px;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* faint corner wash of the tile's color so each tile reads as its own hue even before the chart */
.an-tile::after{content:"";position:absolute;top:0;right:0;width:110px;height:110px;background:radial-gradient(circle at top right,var(--ac,var(--accent)),transparent 70%);opacity:.16;pointer-events:none}
.an-t-label{font-size:12px;color:var(--ac,var(--mut));font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.an-t-value{font-family:var(--display);font-size:32px;font-weight:600;margin:12px 0 6px;line-height:1;font-variant-numeric:tabular-nums}
.an-t-foot{font-size:12px;margin-top:auto}
.an-tile.an-dim{opacity:.5}
.an-tile.an-dim .an-t-value{min-height:32px}
table.an-pace{width:100%;border-collapse:collapse;margin-top:6px}
table.an-pace th,table.an-pace td{text-align:left;padding:6px 8px;font-size:13px;border-top:1px solid var(--line2)}
table.an-pace th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.an-matrix-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
table.an-matrix{border-collapse:collapse;width:100%;font-size:13px}
table.an-matrix th,table.an-matrix td{padding:9px 12px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
table.an-matrix th:first-child,table.an-matrix td.an-m-k{text-align:left;position:sticky;left:0;background:var(--card);font-weight:600}
table.an-matrix tr th{background:var(--bg)}
input.an-tgt{padding:5px 7px;font-size:12.5px}

/* ---- ChecklistIQ ---- */
.cl-form{max-width:720px}
.cl-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.cl-sec{margin:18px 0}
.cl-sec h3{font-size:14px;font-family:var(--display);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:10px}
.cl-field{padding:10px 0;border-bottom:1px solid var(--line2)}
.cl-field>label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.cl-inputs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cl-inputs input{flex:1;min-width:120px;font-size:16px;padding:11px 12px}
.cl-inputs .cl-sm{flex:0 0 110px;min-width:90px}
.cl-money{display:flex;align-items:center;gap:4px;flex:1;min-width:140px}
.cl-money span{color:var(--mut);font-weight:600}
.cl-money input{width:100%}
.cl-note{font-size:12px;color:var(--mut);margin-top:5px}
.cl-photo-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-d);border:1px solid var(--accent);border-radius:9px;padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.cl-thumb{max-width:64px;max-height:64px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.cl-instr{margin-top:16px;font-size:13px}
.cl-instr summary{cursor:pointer;font-weight:600;color:var(--accent-d)}
.cl-instr ol{margin:10px 0 0 18px;color:var(--mut);line-height:1.6}
@media(max-width:620px){ .cl-inputs{flex-direction:column;align-items:stretch} .cl-inputs input,.cl-money{min-width:0;width:100%} .cl-photo-btn{justify-content:center} }

/* ---- ChecklistIQ inspections & tasks ---- */
.cl-insp{padding:11px 0;border-bottom:1px solid var(--line2)}
.cl-insp-label{font-size:14px;font-weight:600;margin-bottom:7px}
.cl-insp-label .cl-note{font-weight:400;display:block}
.cl-sub{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.cl-dual{display:flex;gap:18px;flex-wrap:wrap}
.cl-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.cl-seg button{border:0;border-right:1px solid var(--line);background:var(--card);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--mut);border-radius:0}
.cl-seg button:last-child{border-right:0}
.cl-seg button.on.seg-pass{background:var(--ok);color:#fff}
.cl-seg button.on.seg-fail{background:var(--warn);color:#fff}
.cl-seg button.on.seg-critical{background:var(--danger);color:#fff}
.cl-insp-note{width:100%;margin-top:8px}
.cl-insp-photo{margin-top:8px}
.cl-task{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px;cursor:pointer}
.cl-task input{width:20px;height:20px;flex:0 0 auto}
.cl-check{display:flex;align-items:center;gap:8px}
.cl-check input{width:20px;height:20px}

/* ---- AnalyticsIQ in-tile graphs + pin menu ---- */
.an-tile{position:relative}
/* Per-metric color accent — a thin gradient stripe along the top of each tile for visual diversity. */
.an-tile[style*="--ac"]{background:linear-gradient(180deg,var(--card) 62%,color-mix(in srgb,var(--ac) 6%,var(--card)) 100%)}
.an-tile[style*="--ac"]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 45%,transparent))}
.an-tile[style*="--ac"]:hover::before{height:4px}
.an-dots{position:absolute;top:4px;right:10px;border:0 !important;outline:none !important;-webkit-appearance:none;appearance:none;background:none !important;box-shadow:none !important;color:var(--mut);font-size:32px !important;line-height:1;cursor:pointer;padding:0;z-index:2}
.an-dots:hover,.an-dots:focus{color:#7c3aed;background:none !important;outline:none !important}
.an-dots.on,.an-dots.on:hover{color:#7c3aed !important}
.an-tile .an-t-value{margin-right:24px}
.an-spark{width:100%;height:42px;margin-top:14px;display:block}
.an-tile[draggable=true]{cursor:grab}
.an-tile.dragging{opacity:.5;box-shadow:var(--shadow-lg)}

/* ---- AnalyticsIQ multi-site checkbox selector ---- */
.an-scope{position:relative;display:inline-block}
.an-scope-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:9px 13px;background:var(--card);font-weight:600;font-size:13.5px;cursor:pointer;min-width:165px;color:var(--txt)}
.an-scope-btn .ti{margin-left:auto;color:var(--mut)}
.an-scope-pop{position:absolute;top:44px;left:0;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:230px;max-height:340px;overflow:auto;animation:pop .12s ease}
.an-scope-pop label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer}
.an-scope-pop label:hover{background:var(--bg)}
.an-scope-pop input{width:17px;height:17px;flex:0 0 auto}

/* ---- AnalyticsIQ site groups in scope dropdown ---- */
.an-scope-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:8px 10px 4px}
.an-grp{display:flex;align-items:center;gap:4px}
.an-grp-pick{flex:1;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--txt)}
.an-grp-pick:hover{background:var(--bg)}
.an-grp-del{border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:16px;padding:0 8px;border-radius:6px}
.an-grp-del:hover{color:var(--danger)}
.an-addgrp{width:100%;display:flex;align-items:center;gap:6px;border:0;border-top:1px solid var(--line2);margin-top:6px;background:transparent;color:var(--accent-d);font-weight:600;padding:10px;cursor:pointer;text-align:left}
.an-addgrp:hover{background:var(--accent-soft)}
.an-tile[data-met]{cursor:pointer;transition:transform .14s ease, box-shadow .14s ease}
.an-tile[data-met]:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}

/* ---- color utilities (positive/negative quick-read) ---- */
.cgood{color:var(--ok)!important} .cwarn{color:var(--warn)!important} .cbad{color:var(--danger)!important}
.pos{color:var(--ok)} .neg{color:var(--danger)}
.badge.over_labored{background:#fdecea;color:var(--danger)}
.badge.under_labored{background:#fff4e0;color:#b7791f}
.lab-monthly td:first-child,.lab-monthly th:first-child{font-weight:600}
.lab-daily summary{cursor:pointer;font-weight:600;color:var(--accent-d);padding:6px 0}
.lab-daily summary:hover{color:var(--accent)}
/* ---- dropdowns auto-size to content, no wrapping (clean aesthetics) ---- */
.an-scope-btn{min-width:0;width:auto;white-space:nowrap}
.an-scope-pop{width:max-content;min-width:230px;max-width:380px}
.an-scope-pop label,.an-grp-pick{white-space:nowrap}
.site-sel{white-space:nowrap}
.site-sel select{width:auto;min-width:0;text-overflow:ellipsis}
select{white-space:nowrap}

/* ---- module shortcut rail (left nav) ---- */
.mod-rail{padding:10px 12px 8px;border-top:1px solid var(--ink-line)}
.mod-rail-lbl{font-size:9.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut2);padding:0 2px 7px}
.mod-rail-chips{display:flex;gap:7px;flex-wrap:wrap}
.mod-chip{width:32px;height:32px;border-radius:9px;border:1px solid var(--mc);background:var(--mc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;opacity:.82}
.mod-chip:hover{transform:translateY(-1px);filter:brightness(1.08);opacity:1}
.mod-chip.on{opacity:1;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--mc)}
.mod-chip.soon{opacity:.5;border-style:dashed}
.mod-chip.soon:hover{opacity:.8}
.mod-chip.dragging{opacity:.35;transform:scale(.88)}
.mod-chip.drop-to{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--mc)}
/* ---- clickable trend cards (AnalyticsIQ overview) ---- */
.card.an-trend{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card.an-trend:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 18px -8px var(--accent)}
.card.an-trend h3::after{content:'\2197';float:right;color:var(--mut2);font-weight:600;opacity:.6}
.card.an-trend:hover h3::after{color:var(--accent);opacity:1}
/* ---- forecast KPI value ---- */
.card .big{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;margin:4px 0 2px;letter-spacing:-.5px}
.card .big.cgood{color:var(--ok)}.card .big.cwarn{color:var(--warn)}.card .big.cbad{color:var(--danger)}
td input.fc-ov{padding:5px 7px;font-size:13px}
/* ---- AnalyticsIQ typography polish (retail-ready) ---- */
.an-t-value,.card .big,.an-pace td,#an-body table td,.card table td,.an-matrix td{
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1,'cv01' 1}
.an-t-value{letter-spacing:-.018em;font-weight:600}
.card .big{letter-spacing:-.018em}
.an-t-label{letter-spacing:.04em;font-size:11.5px;color:var(--ac,var(--mut));font-weight:700}
.an-t-foot{font-size:12px;color:var(--mut);margin-top:auto;padding-top:4px}
.an-tile{padding:16px 20px 16px;gap:2px;border-top:4px solid var(--ac,var(--accent))}
/* AnalyticsIQ reorder mode (mobile/tablet): ↑/↓ controls top-left of each tile */
.an-tile .tile-move{position:absolute;top:10px;left:14px;flex-direction:row;gap:5px;z-index:3}
#an-body.reordering .tile-move{display:flex}
#an-body.reordering .an-tile{outline:2px dashed var(--ac,var(--accent));outline-offset:-3px}
#an-body table td,.card table td{padding:8px 12px}
#an-body table th,.card table th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.an-pace td:not(:first-child),#an-body table td:not(:first-child){text-align:right}
.an-pace th:not(:first-child),#an-body table th:not(:first-child){text-align:right}
/* ---- employee modal: aligned checkboxes + labeled fields ---- */
.modal-card input[type=checkbox]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--accent)}
.modal-card label.check{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:14px;cursor:pointer}
.modal-card label.muted{display:block;margin:10px 0 -2px;font-size:12px;font-weight:600;letter-spacing:.02em}
.modal-card select{width:100%;margin:6px 0}
/* ---- ChecklistIQ fill: presentable, aligned cards ---- */
.cl-form{max-width:760px;margin:0 auto}
.cl-form>h2{padding:0 2px}
.cl-sec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 18px 10px;margin:14px 0;box-shadow:var(--shadow)}
.cl-sec h3{border-bottom:1px solid var(--line2);color:var(--txt);font-size:14px;padding:12px 0 9px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.cl-field{padding:12px 0;border-bottom:1px solid var(--line2)}
.cl-field:last-child,.cl-task:last-child,.cl-insp:last-child{border-bottom:0}
.cl-field>label{font-size:13.5px;font-weight:600;color:var(--txt);margin-bottom:7px}
.cl-task{padding:11px 2px;transition:background .12s;border-radius:8px}
.cl-task:hover{background:var(--accent-soft)}
.cl-task input,.cl-check input,.cl-field input[type=checkbox]{accent-color:var(--accent);width:19px;height:19px}
.cl-head{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.cl-head .fld span{font-size:12px;font-weight:600;color:var(--mut)}
.cl-inputs input,.cl-inputs textarea,.cl-money input{border-radius:9px}
.cl-insp{padding:13px 2px;border-bottom:1px solid var(--line2)}

/* ============================== MOBILE / RESPONSIVE SHELL ==============================
   The sidebar keeps its desktop look but becomes an off-canvas DRAWER (slides in via the ☰ button),
   so the content gets full width and the layout doesn't stack/clutter. */
#nav-toggle{display:none}                  /* hamburger: hidden on desktop (≥1025), shown on tablet/phone */
/* ===== APP SHELL — tablet & phone (≤1024). Protocol §3: the module menu becomes an off-canvas DRAWER; the page
   scrolls NATURALLY (body), the topbar STICKS, and nothing is height-pinned so content can never be clipped.
   Desktop (≥1025) keeps the base grid: constrained sidebar (var --sidebar-w) + 1fr content. ===== */
@media(max-width:1024px){
  #app{display:block;height:auto;min-height:100dvh;overflow-x:clip;max-width:100vw}
  #main,.workspace{max-width:100vw;overflow-x:clip}
  #sidebar{position:fixed;inset:0 auto 0 0;width:min(82vw,288px);z-index:200;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);overflow-y:auto}
  #app.nav-open #sidebar{transform:translateX(0)}
  .workspace{display:block;overflow-x:clip;overflow-y:visible;min-width:0}
  #topbar{position:sticky;top:0;z-index:40;padding:0 clamp(0.75rem,3vw,1rem);gap:10px}
  #topbar .site-sel{min-width:0;flex:0 1 auto}
  #nav-toggle{display:flex}
  #main{overflow-x:clip;overflow-y:visible;height:auto;padding:clamp(0.75rem,3vw,1.25rem)}
}
/* CONTENT stacking for phones / small tablets only. */
@media(max-width:820px){
  #main{padding:16px 14px}
  .cards{grid-template-columns:1fr;gap:12px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  h2{font-size:19px}h3{font-size:16px}
  table:not(.matrix-tbl){display:block;overflow-x:auto;max-width:100%}
  /* Tile/KPI values: shrink to fit on ONE line — NEVER wrap (25,/949) and NEVER truncate to the first digit.
     No overflow:hidden / ellipsis on the number itself; the clamp font keeps it inside a 2-col cell. */
  .an-t-value,.tk-v,.kpi-v,.an-big-val,.card .big,.big{font-size:clamp(13px,4.4vw,26px) !important;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;line-height:1.18;margin-right:0}
  .an-tile,.tk,.kpi,.kpis,.tile-kpis,.card{min-width:0}
  /* keep the 4-up CPLH tiles + company KPIs to 2 columns so each number has room */
  .tile-kpis{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  #main{padding:13px 11px}
  .iconbtn{width:34px;height:34px;font-size:17px}
  #topbar{gap:6px}
}
@media(max-width:560px){
  .tile-kpis,.kpis{grid-template-columns:1fr}   /* phones: one KPI per row, full width — values + labels never cramp */
}
/* Role-access / CoverageIQ-section matrices: a real table that scrolls sideways with a frozen first column, so the
   roles stay readable on a phone instead of squishing. */
/* Sticky-table scroll context: cap height + scroll BOTH axes HERE (not the modal) so the header row (top:0) AND the
   identifying name/label column (.mx-sticky, left:0) freeze. RULE: any popup/screen with offscreen columns freezes its label column. */
.matrix-scroll{overflow:auto;max-height:min(62vh,560px);-webkit-overflow-scrolling:touch;margin-top:6px;border:1px solid var(--line);border-radius:10px}
/* CRITICAL: override the global table{overflow:hidden} (used for rounded corners) — overflow:hidden on a <table> makes
   it its own clip/scroll context, which makes position:sticky cells INERT (they bind to the table, not .matrix-scroll).
   This is THE reason sticky name/label columns weren't freezing. Applies to every sticky-column table. */
.matrix-tbl, .team-scroll table, table.an-matrix, table.an-pace{overflow:visible}
.matrix-tbl{border-collapse:separate;border-spacing:0;font-size:13px;min-width:560px;width:100%}
.matrix-tbl th,.matrix-tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);text-align:center;white-space:nowrap}
.matrix-tbl thead th{position:sticky;top:0;background:var(--card);z-index:2;font-weight:600;color:var(--mut)}
.matrix-tbl .mx-sticky{position:sticky;left:0;background:var(--card);z-index:1;text-align:left;box-shadow:1px 0 0 var(--line2);white-space:normal;min-width:130px;max-width:210px}
.matrix-tbl thead .mx-sticky{z-index:3}

/* ---- Mobile catch-all: force EVERY modal, popup/dropdown, and multi-column grid to auto-fit the screen, overriding
   any inline pixel widths so nothing overflows or needs manual fixing per-component. ---- */
@media(max-width:820px){
  /* modal width/height handled fluidly by the base .modal-card rule (min(92vw,--modal-w) + max-height:85vh). Here we
     only reflow the CONTENT to a single column so it fits a narrow screen. */
  .modal-card input,.modal-card select,.modal-card textarea{max-width:100%;box-sizing:border-box}
  /* TALL forms (edit user, user management) must scroll the OVERLAY, not an internal 85vh card whose Save/Close
     buttons get cut off on mobile (vh ignores the address bar). The card flows at its natural height and you scroll
     the page to reach every control. */
  .modal{align-items:flex-start;overflow-y:auto}
  .modal-card,.modal-card.wide{max-height:none;margin:14px auto}
  .modal-card .settings-grid,.settings-grid,.st-grid{grid-template-columns:1fr}
  /* iOS Safari AUTO-ZOOMS the whole page when you focus a form control smaller than 16px (the base is 13.5px) and
     never zooms back. Keep every control ≥16px on touch screens so tapping a field doesn't zoom the app. */
  input,select,textarea{font-size:16px}
  .site-sel select,input.an-tgt{font-size:16px}
  /* JS-built popups / menus */
  .notif-pop,.emp-menu,.umenu-pop,#an-scope-pop,#export-sched-menu,#an-scope-pop .an-scope-list{max-width:94vw!important;box-sizing:border-box}
  .notif-pop{right:3vw!important}
  /* keep wide data tables (heatmap, goals, schedule, man-hour) scrolling inside their own box, not breaking the page */
  .an-matrix-wrap,.sched-grid-area,.fin-wm{max-width:100%;overflow-x:auto}
}

/* ---- Schedule section on mobile: filters stack ABOVE the grid (full width, positions wrap horizontally), the
   week grid scrolls inside its own box instead of pushing the page, and the action button rows wrap cleanly. ---- */
@media(max-width:820px){
  .sched-wrap{flex-direction:column;gap:12px}
  .sched-filters{flex:0 0 auto;width:100%;box-sizing:border-box}
  .sched-filters #f-pos{grid-template-columns:1fr 1fr;gap:2px 14px}
  .sched-filters label{padding:3px 0}
  .sched-grid-area{width:100%;overflow-x:auto}
  .row{flex-wrap:wrap;gap:8px}
  .sched-top b{min-width:0}
  /* action buttons: comfortable tap targets, don't let margin-left:auto strand them off-screen */
  #main .row > button{flex:0 1 auto}
  #export-sched-menu{right:0;left:auto}
}

/* ---- Pacing / KPI tiles: the 4-across grid is too wide for a phone — stack to 2×2 (then it fits with no scroll). ---- */
@media(max-width:820px){
  .tile-kpis{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px){
  .tile-kpis{grid-template-columns:1fr}
}

/* ---- Schedule grid containment on mobile: the page must NOT scroll sideways; ONLY the grid box scrolls
   horizontally, so you can reach all 7 days + the totals. min-width:0 lets the flex/area shrink to the screen. ---- */
@media(max-width:820px){
  .workspace,#main,.sched-wrap,.sched-filters,.sched-grid-area{min-width:0}
  /* #main scrolls with the PAGE on mobile (natural scroll, set in the shell block) — no internal overflow here. */
  .sched-wrap{width:100%}
  .sched-grid-area{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* slightly narrower columns so more of the week is visible before scrolling */
  .wiw-grid{min-width:760px}
  .wiw-row{grid-template-columns:130px repeat(7,minmax(86px,1fr))}
  .wiw-name{padding:7px 9px}
}

/* Week-nav stays one unit (matches the row's gap so DESKTOP is unchanged). */
.wk-nav{display:inline-flex;align-items:center;gap:10px}
.wk-nav #wk-label{white-space:nowrap}
/* Schedule action buttons — MOBILE ONLY: clean left-aligned wrap, no stranded auto-margins, even sizing. */
@media(max-width:820px){
  .sched-head #clear-btn{margin-left:0 !important}
  .sched-actions{gap:8px}
  .sched-actions > span[style*="margin-left:auto"]{margin-left:0 !important}
  .sched-actions > .muted{flex-basis:100%;margin-left:0 !important;order:9}
  .sched-actions > button{flex:1 1 140px}
  .sched-head{gap:8px}
}

/* ============================== RESPONSIVE FOUNDATION (consolidated) ==============================
   Universal rules so the whole app adapts without per-component patching. */
/* 1) Inline multi-column grids (style="grid-template-columns:repeat(3/2,...)") override CSS media queries — force
      them to reflow on smaller screens. repeat(1,...) single-tile grids are left alone. */
@media(max-width:900px){
  [style*="repeat(3,minmax"],[style*="repeat(2,minmax"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:560px){
  [style*="repeat(3,minmax"],[style*="repeat(2,minmax"]{grid-template-columns:1fr !important}
}
/* 2) Overflow safety: flex/grid children can refuse to shrink and force sideways scroll — let them shrink. */
@media(max-width:1024px){
  .row,.cards,.an-grid,.ov-grid,.fin-wm,.tile-kpis,.kpis,.workspace,#main{min-width:0}
  .row > *{min-width:0}
}
/* 3) Long words/emails/labels wrap instead of stretching the layout (numbers handled separately, single-line). */
@media(max-width:820px){
  /* Only break genuinely long unbreakable strings (emails/URLs in table cells). NOT short labels — that was
     breaking words like "Current" into "Curren"+"t". Short labels wrap at spaces normally. */
  td,th{overflow-wrap:break-word}
  .tk-l,.an-t-label,.kpi-l,.kpi-s{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
}

/* ---- More mobile fixes: modal controls fill the row (shift editor was bleeding), and the employee-name + ▾ stay
   on ONE line in the schedule (the arrow was wrapping and stretching the row). ---- */
@media(max-width:820px){
  .modal-card .fld{min-width:0}
  .modal-card select,.modal-card input:not([type=color]):not([type=checkbox]),.modal-card textarea{width:100%;max-width:100%;box-sizing:border-box}
  .modal-card .settings-grid{grid-template-columns:1fr !important}
  .wiw-name > .row{flex-wrap:nowrap;min-width:0;gap:4px}
  .wiw-name > .row > b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .wiw-name .emp-menu-btn{flex:0 0 auto}
}

/* ---- Mobile schedule: FREEZE the names column while days scroll, + an obvious swipe hint. ---- */
.sched-scroll-hint{display:none}
@media(max-width:820px){
  .sched-scroll-hint{display:flex;align-items:center;gap:7px;justify-content:center;font-size:12.5px;color:var(--accent-d);background:var(--accent-soft);border:1px solid var(--accent);border-radius:9px;padding:8px 12px;margin-bottom:10px;font-weight:600}
  .sched-scroll-hint i{font-size:16px}
  /* frozen first column — names stay visible while the 7 days scroll under them (-webkit- for iOS Safari) */
  .wiw-name{position:-webkit-sticky;position:sticky;left:0;z-index:3;background:var(--card);box-shadow:2px 0 5px -2px rgba(16,24,40,.18)}
  .wiw-row.head .wiw-name{z-index:4;background:var(--line2)}
  .wiw-row.totals .wiw-name{background:var(--line2)}
  /* edge fade on the scroller so there's a visual "more →" cue */
  .sched-grid-area{position:relative}
}

/* ---- Overview tile reordering. Desktop (>1024) = drag-and-drop (button hidden). Mobile/tablet (≤1024) = the
   "Reorder tiles" button toggles ↑/↓ move controls on each tile. ---- */
.reorder-btn{display:none;align-items:center;gap:6px;font-size:13px}
.reorder-btn.active{background:var(--accent);color:#04221f;border-color:var(--accent);font-weight:600}
.tile-move{display:none;flex-direction:column;gap:3px;margin-left:auto}
.tile-move .tmv{padding:3px 7px;line-height:1;border-radius:6px}
.ov-grid.reordering .site-tile{outline:2px dashed var(--accent);outline-offset:-2px}
.ov-grid.reordering .tile-move{display:flex}
@media(max-width:1024px){ .reorder-btn{display:inline-flex} }

/* ---- FIX: mobile CoverageIQ schedule visibility. Put the grid FIRST (filters were stacking on top and pushing the
   grid far below the fold), give it a min-height so it can't collapse, and let the frozen names stick cleanly. ---- */
@media(max-width:820px){
  .sched-wrap{display:flex;flex-direction:column}
  .sched-scroll-hint{order:1}
  .sched-grid-area{order:2;min-height:200px}
  .sched-filters{order:3}
  .wiw-grid{overflow:visible}   /* sticky names stick to the scroll area instead of being clipped by overflow:hidden */
}

/* ---- Goals page: company roll-up KPI cards + per-location expandable rows. ---- */
.goal-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:8px}
.goal-kpi{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ac,var(--accent));border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.goal-kpi .gk-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ac,var(--mut))}
.goal-kpi .gk-v{font-family:var(--display);font-size:22px;font-weight:600;margin:5px 0 4px;line-height:1}
.goal-kpi .gk-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.goal-bar{height:5px;border-radius:3px;background:var(--line2);margin-top:8px;overflow:hidden}
.goal-bar span{display:block;height:100%;border-radius:3px;transition:width .3s ease}
.goal-site{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.goal-site-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
.goal-site-head:hover{background:var(--bg)}
.goal-site-head .gs-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goal-site-head .gs-cars{white-space:nowrap}
.goal-site-head .gs-pct{font-weight:700;min-width:48px;text-align:right}
.gs-chev{transition:transform .18s ease;color:var(--mut2);flex:0 0 auto}
.goal-site.open .gs-chev{transform:rotate(90deg)}
.goal-site-body{padding:0 16px 16px}
@media(max-width:560px){ .goal-site-head .gs-cars{display:none} .goal-kpis{grid-template-columns:1fr 1fr} }

/* ================= AUTHORITATIVE mobile schedule (supersedes every fragment above) =================
   Grid renders + scrolls sideways; the name column FREEZES. Two iOS keys: (1) NO -webkit-overflow-scrolling:touch
   on the scroll container (it breaks position:sticky inside it); (2) .wiw-grid must be overflow:VISIBLE so the
   sticky cells stick to .sched-grid-area (the real scroller), not to .wiw-grid. */
@media(max-width:820px){
  .sched-wrap{display:flex !important;flex-direction:column !important;gap:12px;width:100%;min-width:0;align-items:stretch}
  .sched-scroll-hint{order:0;width:100%}
  .sched-grid-area{order:1;display:block;width:100%;min-width:0;max-width:100%;min-height:0;height:auto;overflow-x:auto;overflow-y:visible;position:static}
  .sched-filters{order:2;width:100%;flex:0 0 auto;box-sizing:border-box}
  .wiw-grid{min-width:760px;width:100%;overflow:visible}
  .wiw-row{grid-template-columns:130px repeat(7,minmax(86px,1fr))}
  .wiw-name{position:-webkit-sticky !important;position:sticky !important;left:0;z-index:3;background:var(--card);box-shadow:2px 0 5px -2px rgba(16,24,40,.18);padding:7px 9px}
  .wiw-row.head .wiw-name{z-index:4;background:var(--line2)}
  .wiw-row.totals .wiw-name{background:var(--line2)}
}

/* Shift block notes/checklist on the schedule calendar */
.wiw-note{display:block;font-size:10px;line-height:1.25;margin-top:2px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wiw-note i{font-size:11px;vertical-align:-1px}
.wiw-chk{margin-left:4px;opacity:.9}
.wiw-chk i{font-size:12px;vertical-align:-1px}

/* ================= AUTHORITATIVE modal + popup sizing (phones AND tablets, ≤1024 — matches the drawer breakpoint) =====
   Fixes the gap where 820–1024px tablets (iPad Air/Pro portrait) got desktop-sized modals. Contained cap so dialogs
   never fill a big tablet, but go ~full-width on phones. Overrides any inline pixel width. ===== */
@media(max-width:1024px){
  /* width/height = fluid base rule. Here: single-column content + full-width fields + capped JS popups. No !important. */
  .modal-card .settings-grid,.modal-card .st-grid,.settings-grid,.st-grid{grid-template-columns:1fr}
  .modal-card input:not([type=checkbox]):not([type=radio]):not([type=color]),.modal-card select,.modal-card textarea{width:100%;max-width:100%;box-sizing:border-box}
  .modal-card .fld,.modal-card label{min-width:0}
  .notif-pop,.emp-menu,.umenu-pop,#an-scope-pop,#export-sched-menu{max-width:94vw;box-sizing:border-box}
}
@media(max-width:560px){
  .modal-card h2{font-size:17px}
}

/* Man-hour matrix legend */
.mh-legend{font-size:11.5px;color:var(--mut);display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.mh-sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin:0 2px;border:1px solid var(--line)}

/* Pacing dashboard cards */
.pace-card{border-top:4px solid var(--ac,var(--accent))}
.pace-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ac,var(--mut))}
.pace-v{font-family:var(--display);font-size:26px;font-weight:600;margin:5px 0 0;line-height:1}
.pace-bar{height:6px;border-radius:3px;background:var(--line2);margin-top:9px;overflow:hidden}
.pace-bar span{display:block;height:100%;border-radius:3px;transition:width .3s ease}
.pace-deltas{font-size:12px;margin-top:9px;border-top:1px solid var(--line2);padding-top:7px}

/* Availability modal rows — responsive (were fixed-width inputs that overflowed inside the scaled modal) */
.av-day{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.av-day-lbl{display:flex;align-items:center;gap:8px;margin:0;min-width:88px;font-weight:600}
.av-day-lbl input{width:18px;height:18px;margin:0;flex:0 0 auto}
.av-times{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.av-times input[type=time]{flex:1 1 0;min-width:0;width:auto !important;margin:0}
@media(max-width:560px){ .av-day{gap:6px} .av-day-lbl{min-width:50px;font-size:13px} .av-times{gap:4px} .av-times input[type=time]{font-size:12px;padding:8px 2px 8px 6px} .av-times .muted{font-size:11px} }
/* Safety net: any leftover fixed-width inline inputs inside a modal shrink on phones instead of overflowing */
@media(max-width:560px){
  .modal-card [style*="width:96px"],.modal-card [style*="width:120px"],.modal-card [style*="width:130px"],.modal-card [style*="width:90px"],.modal-card [style*="width:60px"]{width:auto !important;min-width:0 !important}
}

/* (mobile shell consolidated into the single drawer block above — protocol §3/§7; modals are fluid via base rules) */

/* ===== Schedule drag-and-drop (desktop) + Republish button ===== */
.wiw-shift[draggable="true"]{cursor:grab}
.wiw-shift.dragging{opacity:.4;cursor:grabbing}
.wiw-cell.drag-over{outline:2px dashed #0fb6a6;outline-offset:-2px;background:rgba(15,182,166,.10)}
#pub-btn.republish{background:#f59e0b;border-color:#f59e0b;color:#fff;font-weight:700;animation:pubPulse 1.6s ease-in-out infinite}
#pub-btn.republish:hover{background:#d97706;border-color:#d97706}
@keyframes pubPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
#pub-btn.published-ok{opacity:.65}

/* ===== Time Off calendar ===== */
.to-grid{display:flex;flex-direction:column;gap:4px}
.to-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.to-dh{text-align:center;font-size:12px;font-weight:600;color:var(--mut);padding:4px 0}
.to-cell{min-height:84px;border:1px solid var(--line);border-radius:8px;padding:5px 6px;background:var(--card);min-width:0;overflow:hidden}
.to-cell.empty{background:transparent;border-color:transparent}
.to-cell.today{border-color:#0fb6a6;box-shadow:inset 0 0 0 1px #0fb6a6}
.to-d{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:3px}
.to-op{font-size:10px;color:var(--mut)}
.to-hol{font-size:10px;color:#7c3aed;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.to-off{font-size:11px;background:rgba(0,0,0,.05);border-radius:4px;padding:1px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.to-cell{min-height:58px;padding:3px}.to-d{font-size:11px}.to-op{display:none}.to-off{font-size:9px;padding:1px 3px}.to-dh{font-size:10px}}
/* Phone fallback: swap the cramped 7-col month grid for an agenda list at ≤560 (tablets keep the calendar) */
#to-agenda{display:none}
.to-ag-h{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--mut);margin-bottom:6px;text-transform:uppercase}
.to-ag-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.to-ag-row:last-child{border-bottom:0}
@media(max-width:560px){#to-cal{display:none}#to-agenda{display:block}}
/* My Shifts — schedule confirmation week view + nav badge */
.ms-confirm{border-left:4px solid #f59e0b}
.ms-wk{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:4px}
.ms-wk-day{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--card);font-size:13px}
.ms-wk-day.on{background:var(--accent-soft)}
.ms-wk-dn{flex:0 0 108px;font-weight:600}
.ms-wk-sh{flex:1;min-width:0}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:middle}
@media(max-width:560px){ .ms-wk-dn{flex:0 0 92px;font-size:12px} .ms-wk-day{font-size:12px;padding:7px 9px} }
/* Guided tour (position-based onboarding) */
.tut-dim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1500}
.tut-ring{position:fixed;z-index:1500;border:3px solid var(--accent);border-radius:10px;box-shadow:0 0 0 9999px rgba(15,23,42,.5);pointer-events:none;transition:left .15s,top .15s,width .15s,height .15s}
.tut-card{position:fixed;z-index:1600;background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);padding:18px 18px 14px;width:min(92vw,360px)}
.tut-card.tut-center{left:50%;top:50%;transform:translate(-50%,-50%)}
.tut-card.tut-bottom{left:50%;bottom:22px;transform:translateX(-50%)}
.tut-card h3{margin:4px 0 6px;font-size:17px}
.tut-card p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--txt)}
.tut-step{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent)}
.tut-nav{display:flex;align-items:center;gap:8px}
.tut-nav button{font-size:13px}
.tut-skip{color:var(--mut)!important;background:none!important;border:0!important;box-shadow:none!important;font-size:12px;padding:4px 6px}
.env-badge{font-size:10px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-d);border:1px solid var(--accent);white-space:nowrap;line-height:1.4}
.env-badge:empty{display:none}
.env-badge.is-dev{background:#fef3c7;color:#92400e;border-color:#f59e0b}
/* Time-off calendar: editable entries get a ✎ badge + a hover "Edit" overlay */
.to-off-editable{position:relative;cursor:pointer;padding-right:13px}
.to-off-pen{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:9px;opacity:.5}
.to-off-editable:hover::after{content:'Edit';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,30,28,.62);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;border-radius:3px;z-index:2}
/* Schedule: holiday day column — purple, with name + Closed/hours */
.wiw-dh.holiday{background:#f3e8ff;color:#7c3aed;border-radius:6px}
.wiw-dh-hol{display:block;font-size:9px;font-weight:700;color:#7c3aed;line-height:1.15;margin-top:1px;white-space:normal}
.wiw-cell.holiday-closed{background:repeating-linear-gradient(45deg,#faf5ff,#faf5ff 6px,#f3e8ff 6px,#f3e8ff 12px)}
/* Smooth drag-to-reorder (makeSortable) — module rail, Overview locations, AnalyticsIQ tiles */
.sortable-drag{box-shadow:0 14px 38px rgba(0,0,0,.30)!important;opacity:.98;border-radius:14px;cursor:grabbing}
.sortable-ph{background:rgba(124,58,237,.08);border:2px dashed rgba(124,58,237,.38);border-radius:14px;box-sizing:border-box}
body.sorting,body.sorting *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
/* AnalyticsIQ custom date-range calendar picker (month/year header → calendar grid; mobile-friendly) */
.an-custom-wrap{position:relative}
.an-cal-trigger{padding:7px 12px;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:var(--card,#fff);color:var(--txt);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.an-cal{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:min(92vw,300px);background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:12px;box-shadow:var(--shadow-lg,0 12px 34px rgba(0,0,0,.18));padding:12px}
.an-cal-hd{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.an-cal-hd select{flex:1;min-width:0;padding:5px;border:1px solid var(--line,#e5e7eb);border-radius:6px;font-size:13px;background:var(--card,#fff);color:var(--txt)}
.an-cal-nav{width:30px;height:30px;flex:none;border:1px solid var(--line,#e5e7eb);border-radius:6px;background:var(--card,#fff);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center}
.an-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.an-cal-dow span{text-align:center;font-size:10px;color:var(--mut2,#9ca3af);font-weight:700}
.an-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.an-cal-d{aspect-ratio:1;border:none;background:none;border-radius:7px;font-size:12.5px;cursor:pointer;color:var(--txt);display:flex;align-items:center;justify-content:center;padding:0}
.an-cal-d:hover:not(.empty):not(.end){background:rgba(37,99,235,.10)}
.an-cal-d.empty{visibility:hidden;cursor:default}
.an-cal-d.in{background:rgba(37,99,235,.28);color:#2563eb;font-weight:700;border-radius:0}
.an-cal-d.pre{background:rgba(37,99,235,.14);border-radius:0}
.an-cal-d.end{background:#2563eb;color:#fff;font-weight:700}
.an-cal-ft{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11px}
.an-cal-apply{margin-left:auto;padding:6px 14px;font-size:12px}
.an-cal-apply[disabled]{opacity:.45;cursor:default}
/* ChecklistIQ Phase-1 manager dashboard */
.cl-dash-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cl-dash-tally{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cl-tal{font-size:12px;color:var(--mut2,#9ca3af)}.cl-tal b{color:var(--txt);font-size:15px}
.cl-dash-tally select{padding:7px 10px;border:1px solid var(--line,#e5e7eb);border-radius:8px;font-size:13px;background:var(--card,#fff);color:var(--txt)}
.cl-dash-sec{margin-bottom:22px}
.cl-dash-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cl-dash-h h3{margin:0;font-size:15px}
.cl-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.cl-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line,#e5e7eb);border-radius:14px;background:var(--card,#fff);cursor:pointer;text-align:left;font:inherit;transition:box-shadow .15s,transform .15s}
.cl-card:hover{box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.10));transform:translateY(-1px)}
.cl-card.done{background:linear-gradient(0deg,rgba(22,163,74,.06),rgba(22,163,74,.06)),var(--card,#fff);border-color:rgba(22,163,74,.32)}
.cl-card-ring{--p:0;position:relative;width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--accent,#2563eb) calc(var(--p)*1%),#e5e7eb 0)}
.cl-card-ring::before{content:'';position:absolute;width:34px;height:34px;border-radius:50%;background:var(--card,#fff)}
.cl-card-ring span{position:relative;font-size:11px;font-weight:700;color:var(--txt);z-index:1}
.cl-card.done .cl-card-ring{background:#16a34a}.cl-card.done .cl-card-ring span{color:#fff}.cl-card.done .cl-card-ring::before{display:none}
.cl-card-body{flex:1;min-width:0}
.cl-card-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-card-meta{font-size:12px;color:var(--mut2,#9ca3af);margin-top:2px}
.cl-done-lbl{color:#16a34a;font-weight:600}
.cl-card-arr{color:var(--mut2,#9ca3af);flex:none}
.cl-alldone{display:flex;align-items:center;gap:8px;background:rgba(22,163,74,.1);color:#15803d;padding:12px 14px;border-radius:12px;font-weight:600;margin-bottom:18px}
.cl-alldone i{font-size:20px}
.cl-assign{display:flex;flex-wrap:wrap;gap:6px}
.cl-assign label{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 9px;border:1px solid var(--line,#e5e7eb);border-radius:20px;cursor:pointer}
.cl-assign label:has(input:checked){background:var(--accentSoft,#e8f0fe);border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);font-weight:600}
/* ChecklistIQ Manage — grouped by cadence + admin drag-to-reorder */
.cl-mgroup{margin-bottom:18px}
.cl-mgroup-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2,#9ca3af);margin:0 0 8px 2px}
.cl-drag-handle{cursor:grab;color:var(--mut2,#9ca3af);font-size:18px;padding:2px 8px 0 0;display:flex;align-items:center;touch-action:none;flex:none}
.cl-drag-handle:active{cursor:grabbing}
.cl-mcard-btns{display:flex;gap:8px;flex-wrap:wrap}
.cl-mcard-btns button{flex:0 1 auto}
/* ChecklistIQ Editor — native mobile/tablet checklist builder */
.cle-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cle-back{flex:none}
.cle-wrap{max-width:760px}
.cle-meta{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
@media(min-width:560px){.cle-meta{grid-template-columns:2fr 1fr}}
.cle-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.cle-fld span{font-size:12px;font-weight:600;color:var(--mut2,#9ca3af)}
.cle-fld input,.cle-fld select{padding:11px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:16px;width:100%;min-width:0;box-sizing:border-box;background:var(--card,#fff)}
.cle-sec{border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:14px;margin-bottom:14px;background:var(--card,#fff)}
.cle-sec-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.cle-sec-title{flex:1;min-width:150px;padding:10px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-weight:600;font-size:16px}
.cle-sec-kind{flex:none;padding:10px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:14px;background:var(--card,#fff)}
.cle-sec-del,.cle-item-del{flex:none;border:none;background:transparent;color:var(--danger,#dc2626);cursor:pointer;padding:9px;border-radius:8px;font-size:17px;line-height:1}
.cle-sec-del:hover,.cle-item-del:hover{background:rgba(220,38,38,.09)}
.cle-opts{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.cle-opts span{font-size:11px;font-weight:600;color:var(--mut2,#9ca3af)}
.cle-opts input{padding:9px 11px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:15px}
.cle-items{display:flex;flex-direction:column;gap:8px}
.cle-item{border:1px solid var(--line,#eef0f2);border-radius:11px;padding:9px 9px 11px;background:var(--bg,#fafbfc)}
.cle-item-row{display:flex;gap:6px;align-items:center}
.cle-item-label{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:16px;background:var(--card,#fff)}
.cle-item-type{flex:none;padding:10px 8px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:13px;background:var(--card,#fff)}
.cle-days{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;align-items:center}
.cle-days-lbl{font-size:11px;font-weight:600;color:var(--mut2,#9ca3af);margin-right:2px}
.cle-day{flex:1 1 40px;min-width:40px;padding:8px 0;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:var(--card,#fff);color:var(--mut2,#9ca3af);font-size:12px;font-weight:600;cursor:pointer}
.cle-day.on{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb);color:#fff}
.cle-additem{margin-top:11px;width:100%;padding:10px;border:1px dashed var(--line,#cbd5e1);border-radius:10px;background:transparent;color:var(--accent,#2563eb);font-weight:600;cursor:pointer;font-size:14px}
.cle-empty{color:var(--mut2,#9ca3af);font-size:13px;padding:6px 2px}
.cle-actions{display:flex;gap:8px;align-items:center;margin-top:16px}
.cle-actions .primary{margin-left:auto}
.cle-listgroup{margin-bottom:16px}
.cle-listcard{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:14px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:var(--card,#fff);cursor:pointer;font:inherit;margin-bottom:8px}
.cle-listcard:hover{box-shadow:var(--shadow-lg,0 6px 18px rgba(0,0,0,.08))}
.cle-listcard-main{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.cle-listcard-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cle-listcard-arr{color:var(--mut2,#9ca3af);flex:none}
/* fixes: day chips justify left + stay inside; Manage collapsible cards + role */
.cle-days{justify-content:flex-start}
.cle-day{flex:0 0 auto;min-width:42px;text-align:center}
.cl-mcard-head{display:flex;align-items:center;gap:8px;cursor:pointer}
.cl-mcard-title{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cl-mcard-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cl-mcard-caret{margin-left:auto;color:var(--mut2,#9ca3af);transition:transform .15s;flex:none}
.cl-mcard.open .cl-mcard-caret{transform:rotate(180deg)}
.cl-mcard-body{padding-top:12px;margin-top:8px;border-top:1px solid var(--line,#eef0f2)}
.cl-role-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--accent-soft,#eef);color:var(--accent-d,#2563eb)}
.cl-visto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cl-visto span{font-size:12px;font-weight:600;color:var(--mut2,#9ca3af)}
.cl-visto select{padding:8px 10px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:14px;background:var(--card,#fff)}
.cl-assign-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mut2,#9ca3af);margin:2px 0 6px}
/* fill form: keep date/text inputs inside their cell, left-justified */
.cl-head .fld input,.cl-head .fld select{box-sizing:border-box;text-align:left}
.cl-form input,.cl-form select{box-sizing:border-box}
/* ChecklistIQ Fill — premier progress experience */
.cl-fill-wrap{max-width:760px;margin:0 auto}
.cl-fill-hero{position:sticky;top:0;z-index:20;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:14px 16px;margin:6px 0 14px;box-shadow:var(--shadow,0 4px 14px rgba(0,0,0,.06))}
.cl-fill-hero-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.cl-fill-hero-name{font-family:var(--display);font-weight:700;font-size:17px;margin-right:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-fill-count{font-size:13px;font-weight:700;color:var(--accent-d,#1d4ed8);background:var(--accent-soft,#e8f0fe);padding:5px 13px;border-radius:20px;flex:none}
.cl-fill-track{height:9px;border-radius:20px;background:var(--line,#eef0f2);overflow:hidden}
.cl-fill-bar{height:100%;border-radius:20px;background:var(--accent,#2563eb);width:0;transition:width .4s cubic-bezier(.4,0,.2,1)}
.cl-fill-hero.done .cl-fill-bar{background:#16a34a}
.cl-fill-hero.done .cl-fill-count{background:rgba(22,163,74,.14);color:#15803d}
.cl-submit-bar{position:sticky;bottom:0;z-index:20;padding:12px 0 8px;margin-top:6px;background:linear-gradient(transparent,var(--bg,#fff) 45%)}
.cl-submit-bar .primary{width:100%;padding:14px;font-size:15px;border-radius:12px}
.cl-task{gap:12px;padding:13px 12px;border-radius:10px}
.cl-task input{width:24px;height:24px;accent-color:#16a34a;flex:0 0 auto;cursor:pointer}
.cl-task span{flex:1;min-width:0}
.cl-task.done{background:rgba(22,163,74,.07)}
.cl-task.done span{color:var(--mut,#6b7280)}
.cl-stamp{margin-left:auto;font-size:11px;font-weight:600;color:#16a34a;flex:none}
.cl-seg{border-radius:10px}
.cl-seg button{padding:11px 18px;font-size:13.5px}
@media(max-width:520px){ .cl-seg{display:flex;width:100%} .cl-seg button{flex:1} }
/* Module vision previews (CommandIQ / KnowledgeIQ placeholders) */
.mh-preview{text-align:left;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:18px;margin:18px auto;max-width:640px;box-shadow:var(--shadow,0 4px 14px rgba(0,0,0,.05))}
.mh-prev-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut2,#9ca3af);margin:0 0 10px}
.mh-preview .mh-prev-h:not(:first-child){margin-top:20px}
.mh-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.mh-tile{border:1px solid var(--line,#eef0f2);border-radius:12px;padding:12px 14px;background:var(--bg,#fafbfc)}
.mh-tile-v{font-family:var(--display);font-weight:700;font-size:20px;color:var(--txt)}
.mh-tile-k{font-size:12px;font-weight:600;margin-top:2px}
.mh-tile-s{font-size:11px;color:var(--mut2,#9ca3af);margin-top:1px}
.mh-top{margin:0;padding:0;list-style:none;counter-reset:mh}
.mh-top li{counter-increment:mh;position:relative;padding:11px 8px 11px 42px;border-bottom:1px solid var(--line2,#f1f3f5);font-size:14px}
.mh-top li:last-child{border-bottom:0}
.mh-top li::before{content:counter(mh);position:absolute;left:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--accent-soft,#e0f2fe);color:var(--accent-d,#0284c7);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mh-chips{display:flex;flex-wrap:wrap;gap:8px}
.mh-chip{font-size:13px;font-weight:600;padding:8px 14px;border-radius:20px;background:var(--accent-soft,#fff7ed);color:var(--accent-d,#c2410c);border:1px solid var(--accent,#ea580c)}
.mh-chat{display:flex;flex-direction:column;gap:8px}
.mh-q{align-self:flex-end;max-width:85%;background:var(--accent,#ea580c);color:#fff;padding:9px 14px;border-radius:16px 16px 4px 16px;font-size:13.5px}
.mh-a{align-self:flex-start;max-width:90%;background:var(--bg,#f3f4f6);color:var(--txt);padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:13.5px;display:flex;gap:8px;align-items:center}
.mh-a i{color:var(--accent,#ea580c)}
/* DEFINITIVE date/header overflow fix — grid cells must be allowed to shrink below the native input's intrinsic width */
.cl-head{min-width:0}
.cl-head .fld,.cl-head label.fld{min-width:0}
.cl-head .fld input,.cl-head .fld select{min-width:0;width:100%;box-sizing:border-box;max-width:100%}
/* === DEFINITIVE date/header fix: native date inputs impose a -webkit intrinsic min-width that ignores min-width:0 === */
.cl-head{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.cl-head .fld input,.cl-head .fld input[type=date],.cl-head .fld input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:0;width:100%;box-sizing:border-box;text-align:left;overflow:hidden}
/* === Dashboard (clToday) — premium iOS-native === */
.cl-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,var(--accent,#2563eb),var(--accent-d,#1d4ed8));color:#fff;border-radius:20px;padding:22px 24px;margin-bottom:22px;box-shadow:0 12px 32px -12px rgba(0,0,0,.35)}
.cl-hero.done{background:linear-gradient(135deg,#16a34a,#15803d)}
.cl-hero-l{flex:1;min-width:0}
.cl-hero-greet{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1}
.cl-hero-date{opacity:.85;font-size:13px;margin-top:3px}
.cl-hero-stats{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.cl-hero-stat b{font-size:18px;font-weight:700}
.cl-hero-stat span{display:block;font-size:10.5px;opacity:.8;text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.cl-dash-sitesel{margin-top:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 12px;border-radius:10px;font-size:13px;max-width:220px}
.cl-dash-sitesel option{color:#111}
.cl-hero-ring{--p:0;flex:none;width:98px;height:98px;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0);display:flex;align-items:center;justify-content:center}
.cl-hero-ring-in{width:78px;height:78px;border-radius:50%;background:var(--accent-d,#1d4ed8);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cl-hero.done .cl-hero-ring-in{background:#15803d}
.cl-hero-ring-in b{font-size:22px;font-weight:800}
.cl-hero-ring-in span{font-size:11px;opacity:.85;margin-top:2px}
@media(max-width:520px){.cl-hero{padding:18px;gap:14px}.cl-hero-greet{font-size:19px}.cl-hero-stats{gap:16px}.cl-hero-ring{width:82px;height:82px}.cl-hero-ring-in{width:66px;height:66px}.cl-hero-ring-in b{font-size:19px}}
.cl-dash-sec{margin-bottom:26px}
.cl-dash-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cl-dash-h h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.cl-dash-h h3 i{color:var(--accent,#2563eb)}
.cl-dash-h-count{font-size:13px;font-weight:700;color:var(--mut2,#9ca3af);background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);padding:3px 12px;border-radius:20px}
/* High-polish color treatment per dashboard section */
.cl-dash-sec.cl-ds-today,.cl-dash-sec.cl-ds-week,.cl-dash-sec.cl-ds-month{padding:15px 16px 17px;border-radius:18px;border:1px solid var(--line);position:relative;overflow:hidden}
.cl-dash-sec.cl-ds-today::before,.cl-dash-sec.cl-ds-week::before,.cl-dash-sec.cl-ds-month::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.cl-ds-today{background:linear-gradient(135deg,rgba(245,158,11,.11),rgba(245,158,11,.02) 60%);border-color:rgba(245,158,11,.30)}
.cl-ds-today::before{background:#f59e0b}.cl-ds-today .cl-dash-h h3 i{color:#d97706}
.cl-ds-week{background:linear-gradient(135deg,rgba(15,182,166,.11),rgba(15,182,166,.02) 60%);border-color:rgba(15,182,166,.30)}
.cl-ds-week::before{background:#0fb6a6}.cl-ds-week .cl-dash-h h3 i{color:#0d9488}
.cl-ds-month{background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(99,102,241,.02) 60%);border-color:rgba(99,102,241,.28)}
.cl-ds-month::before{background:#6366f1}.cl-ds-month .cl-dash-h h3 i{color:#6366f1}
/* All-sites Dashboard: collapsible per-site cards with a small hero header */
.cl-siteacc{display:flex;flex-direction:column;gap:11px}
.cl-sitecard{--sc-blue:#2563eb;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--card);position:relative}
.cl-sitecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#2563eb);z-index:1}
.cl-sitecard.all-clear::before{background:#16a34a}
.cl-sitecard.has-over::before{background:#dc2626}
.cl-sitecard.all-clear{border-color:rgba(22,163,74,.42);background:linear-gradient(rgba(22,163,74,.05),rgba(22,163,74,.012))}
.cl-sitecard.has-over{border-color:rgba(220,38,38,.5);background:linear-gradient(rgba(220,38,38,.06),rgba(220,38,38,.02))}
.cl-sitecard-hero{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--txt);cursor:pointer;border:0;padding:13px 16px 13px 18px;background:transparent}
.cl-sc-ring{width:44px;height:44px;flex:none;border-radius:50%;background:conic-gradient(var(--accent,#2563eb) calc(var(--p,0)*1%),var(--line,#e5e7eb) 0);display:grid;place-items:center}
.cl-sc-ring.cl-scr-done{background:conic-gradient(#16a34a calc(var(--p,0)*1%),var(--line,#e5e7eb) 0)}
.cl-sc-ring.cl-scr-over{background:conic-gradient(#dc2626 calc(var(--p,0)*1%),var(--line,#e5e7eb) 0)}
.cl-sc-ring.cl-scr-mid{background:conic-gradient(#f59e0b calc(var(--p,0)*1%),var(--line,#e5e7eb) 0)}
.cl-sc-ring span{width:34px;height:34px;border-radius:50%;background:var(--card,#fff);display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--txt)}
.cl-sc-meta{flex:1;min-width:0}
.cl-sc-meta b.cl-sc-name{font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);color:var(--sc-blue)}
.cl-sc-meta span{font-size:12.5px;color:var(--mut,#6b7280)}
.cl-over-word{color:#dc2626;font-weight:700}
.cl-sc-chev{font-size:20px;flex:none;transition:transform .2s;color:var(--mut2,#9ca3af)}
@media(prefers-color-scheme:dark){.cl-sitecard{--sc-blue:#60a5fa}}
:root[data-theme="dark"] .cl-sitecard{--sc-blue:#60a5fa}
:root[data-theme="light"] .cl-sitecard{--sc-blue:#2563eb}
/* Site names across ChecklistIQ read blue (Scorecard tiles + the site-tag chip on cards) */
.clov-name,.cl-site-tag{color:#2563eb}
@media(prefers-color-scheme:dark){.clov-name,.cl-site-tag{color:#60a5fa}}
:root[data-theme="dark"] .clov-name,:root[data-theme="dark"] .cl-site-tag{color:#60a5fa}
:root[data-theme="light"] .clov-name,:root[data-theme="light"] .cl-site-tag{color:#2563eb}
/* ChecklistIQ History — per-site expandable, category groups, 30/60-day toggle */
.clh-daytoggle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 16px}
.clh-daybtn{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer}
.clh-daybtn.on{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb);color:#fff}
.clh-day-note{font-size:12px;display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.clh-siteacc{display:flex;flex-direction:column;gap:10px}
.clh-sitecard{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--card)}
.clh-sc-hero{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;color:var(--txt);cursor:pointer;border:0;padding:12px 15px}
.clh-sc-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:grid;place-items:center;font-size:19px}
.clh-sc-meta{flex:1;min-width:0}
.clh-sc-meta b{font-size:15.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);color:var(--sc-blue,#2563eb)}
.clh-sc-meta span{font-size:12.5px;color:var(--mut,#6b7280)}
.clh-sc-count{flex:none;font-size:12px;font-weight:800;color:var(--accent-d,#1d4ed8);background:var(--accent-soft,#e8f0fe);border-radius:999px;padding:3px 10px}
.clh-sc-chev{font-size:19px;flex:none;transition:transform .2s;color:var(--mut2,#9ca3af)}
.clh-sitecard.open .clh-sc-chev{transform:rotate(180deg)}
.clh-sc-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:14px}
.clh-sc-body[hidden]{display:none}
.clh-cat-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--mut2,#9ca3af);margin:2px 0 7px}
.clh-cat-h i{color:var(--accent,#2563eb)}
.clh-cat-n{font-weight:700;color:var(--mut2,#9ca3af)}
.clh-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;background:var(--bg,#fafbfc);margin-bottom:7px;overflow:hidden}
.clh-row-main{flex:1;min-width:0;display:block;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:10px 12px}
.clh-row-top{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.clh-row-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clh-row-meta{font-size:12px;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clh-inc{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#b45309;background:rgba(245,158,11,.16);border-radius:6px;padding:2px 7px}
/* Generator vs Reality report */
.gl-wksel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.gl-wk{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer}
.gl-wk.on{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb);color:#fff}
.gl-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.gl-mcard{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:15px 16px}
.gl-mtop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gl-mtop b{font-size:16px;font-family:var(--display);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-tr{flex:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:3px}
.gl-imp{color:#16a34a;background:rgba(22,163,74,.12)}
.gl-st{color:#2563eb;background:rgba(37,99,235,.1)}
.gl-dr{color:#dc2626;background:rgba(220,38,38,.12)}
.gl-nw{color:var(--mut2,#9ca3af);background:var(--bg,#f3f4f6)}
.gl-mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px}
.gl-mstats>div{text-align:center;padding:8px 4px;border-radius:10px;background:var(--bg,#fafbfc)}
.gl-mstats b{display:block;font-size:16px;font-weight:800}
.gl-mstats span{font-size:9.5px;color:var(--mut2,#9ca3af);text-transform:uppercase;letter-spacing:.02em}
.gl-pos{color:#d97706}.gl-neg{color:#2563eb}
.gl-verdict{font-size:12.5px;color:var(--mut);line-height:1.4;border-top:1px solid var(--line);padding-top:10px}
.gl-tbl th,.gl-tbl td{padding:8px 12px;text-align:center;font-size:13px}
.gl-tbl td.gl-big{font-weight:800;color:#d97706}
.gl-over{color:#dc2626;font-weight:800}
.clh-chain{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;color:#d97706}
.clh-chain.done{color:#16a34a}
.clh-chain i{font-size:13px}
.clh-row-acts{flex:none;display:flex;gap:4px;padding-right:8px}
.clh-row-acts button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;display:grid;place-items:center;font-size:15px}
.clh-row-acts button:hover{border-color:var(--accent);color:var(--accent)}
.clh-row-acts .clh-reset:hover{border-color:#dc2626;color:#dc2626}
.cl-sitecard.open .cl-sc-chev{transform:rotate(180deg)}
.cl-sitecard-body{padding:13px 13px 5px;display:flex;flex-direction:column;gap:12px}
.cl-sitecard-body[hidden]{display:none}
.cl-alert-txt{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.cl-alert-seg{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:2px 4px;border-radius:6px;text-decoration:underline;text-underline-offset:2px}
.cl-alert-seg:hover{background:rgba(220,38,38,.12)}
.cl-alert-sep{opacity:.6}
.cl-alert-need{color:inherit;opacity:.85;margin-left:2px;text-decoration:none}
.cl-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.cl-card{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line,#e5e7eb);border-radius:16px;background:var(--card,#fff);cursor:pointer;text-align:left;font:inherit;transition:transform .18s cubic-bezier(.34,1.2,.64,1),box-shadow .18s,border-color .18s}
.cl-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.28);border-color:var(--accent,#2563eb)}
.cl-card:active{transform:translateY(0) scale(.985)}
.cl-card.done{border-color:rgba(22,163,74,.3)}
.cl-card-ic{flex:none;width:46px;height:46px;border-radius:13px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:23px}
.cl-card.done .cl-card-ic{background:rgba(22,163,74,.12);color:#16a34a}
.cl-card-body{flex:1;min-width:0}
.cl-card-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-card-meta{font-size:12.5px;color:var(--mut2,#9ca3af);margin-top:3px}
.cl-done-lbl{color:#16a34a;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.cl-card-ring{--p:0;flex:none;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--accent,#2563eb) calc(var(--p)*1%),var(--line,#eef0f2) 0);display:flex;align-items:center;justify-content:center;position:relative}
.cl-card-ring::before{content:'';position:absolute;width:32px;height:32px;border-radius:50%;background:var(--card,#fff)}
.cl-card-ring span{position:relative;font-size:11px;font-weight:700;color:var(--txt);z-index:1}
.cl-card.done .cl-card-ring{background:#16a34a}
.cl-card.done .cl-card-ring::before{display:none}
.cl-card.done .cl-card-ring span{color:#fff}
.cl-alldone{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(22,163,74,.12),rgba(22,163,74,.04));border:1px solid rgba(22,163,74,.28);color:#15803d;padding:16px 18px;border-radius:16px;margin-bottom:22px}
.cl-alldone>i{font-size:28px}
.cl-alldone b{display:block;font-size:15px}
.cl-alldone span{font-size:13px;opacity:.85}
.cl-empty-state{text-align:center;padding:46px 22px;background:radial-gradient(120% 90% at 50% 0,var(--accent-soft,#eef4ff),var(--card,#fff) 62%);border:1px dashed var(--line,#d5dbe2);border-radius:18px;animation:clCardIn .35s backwards}
.cl-empty-state>i{font-size:34px;color:var(--accent,#2563eb);width:74px;height:74px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--card,#fff);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent,#2563eb) 55%,transparent);border:1px solid var(--line,#e5e7eb)}
.cl-empty-state h3{margin:16px 0 4px;font-size:17px;font-family:var(--display)}
.cl-empty-state p{color:var(--mut,#64748b);font-size:14px;margin:0 auto;max-width:340px;line-height:1.5}
/* incomplete-submission state */
.cl-inc-lbl{color:#d97706;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.cl-card.incomplete{border-color:rgba(217,119,6,.35);background:linear-gradient(0deg,rgba(217,119,6,.04),rgba(217,119,6,.04)),var(--card,#fff)}
.cl-card.incomplete .cl-card-ic{background:rgba(217,119,6,.12);color:#d97706}
.cl-card.incomplete .cl-card-ring{background:conic-gradient(#d97706 calc(var(--p)*1%),var(--line,#eef0f2) 0)}
/* ==== ChecklistIQ Editor / Manage / Build — premium polish ==== */
.cle-listcard{gap:14px;padding:15px 16px;border-radius:16px;transition:transform .18s cubic-bezier(.34,1.2,.64,1),box-shadow .18s,border-color .18s}
.cle-listcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.28);border-color:var(--accent,#2563eb)}
.cle-listcard:active{transform:translateY(0) scale(.985)}
.cle-listcard-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:21px}
.cle-listcard-main b{font-size:15px}
.cle-top{position:sticky;top:0;z-index:15;background:var(--bg,#fff);padding:12px 0;margin-bottom:14px;border-bottom:1px solid var(--line,#eef0f2)}
.cle-top h3{font-family:var(--display);font-size:18px}
.cle-back{border-radius:10px}
.cle-sec{border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.cle-sec-title{font-size:16px}
.cle-additem{border-radius:11px;transition:background .12s,border-color .12s}
.cle-additem:hover{background:var(--accent-soft,#e8f0fe);border-color:var(--accent,#2563eb)}
.cle-day{transition:transform .1s,background .12s;font-weight:700}
.cle-day:active{transform:scale(.9)}
.cle-day.on{box-shadow:0 3px 8px -3px var(--accent,#2563eb)}
.cle-actions{position:sticky;bottom:0;z-index:15;background:linear-gradient(transparent,var(--bg,#fff) 40%);padding:14px 0 8px;margin-top:8px}
.cle-actions .primary{padding:13px 20px;border-radius:12px}
.cl-mcard{border-radius:16px;transition:box-shadow .18s,border-color .18s}
.cl-mcard.open{box-shadow:0 10px 26px -14px rgba(0,0,0,.22);border-color:var(--accent,#2563eb)}
.cl-mcard-head{padding:4px 2px}
.cl-mcard-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:20px}
.cl-mcard-title b{font-size:15px}
.cl-mcard-title .badge,.cle-listcard .badge{background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);border:none;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:capitalize}
.cl-role-badge{background:var(--bg,#f3f4f6);color:var(--mut,#6b7280);border:1px solid var(--line,#e5e7eb)}
.cl-assign{gap:8px}
.cl-assign label{padding:8px 13px;border-radius:20px;font-size:13px;transition:transform .1s,background .12s,border-color .12s,color .12s;user-select:none}
.cl-assign label:active{transform:scale(.95)}
.cl-mcard-btns button{border-radius:10px}
/* tiered module rail — active row + dimmed "coming soon" row */
.mod-rail-soon{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.mod-rail-soon-lbl{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut2);padding:9px 2px 6px;opacity:.75}
/* + Roadmap expander in the module rail */
.mod-rail-road{display:flex;align-items:center;gap:5px;margin-top:9px;padding:5px 6px;background:transparent;border:none;color:var(--mut2);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:6px}
.mod-rail-road:hover{color:var(--txt);background:var(--bg)}
.mod-rail-road i{font-size:14px;transition:transform .15s}
/* ChecklistIQ Overview — per-site KPI tiles (CoverageIQ-style, drillable) */
.clov-summary{display:flex;align-items:center;gap:22px;background:linear-gradient(135deg,var(--accent,#2563eb),var(--accent-d,#1d4ed8));color:#fff;border-radius:20px;padding:20px 24px;margin-bottom:6px;box-shadow:0 12px 32px -12px rgba(0,0,0,.35)}
.clov-summary-ring{--p:0;flex:none;width:88px;height:88px;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0);display:flex;align-items:center;justify-content:center}
.clov-summary-ring-in{width:70px;height:70px;border-radius:50%;background:var(--accent-d,#1d4ed8);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.clov-summary-ring-in b{font-size:20px;font-weight:800}.clov-summary-ring-in span{font-size:10px;opacity:.85;margin-top:2px}
.clov-summary-stats{display:flex;gap:26px;flex-wrap:wrap}
.clov-summary-stats>div b{font-size:20px;font-weight:700}
.clov-summary-stats>div span{display:block;font-size:11px;opacity:.82;text-transform:uppercase;letter-spacing:.03em;margin-top:1px}
.clov-summary-stats>div.good b{color:#16a34a}
.clov-tile-main{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0}
.clov-signoff{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.clov-so{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#16a34a}
.clov-so-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:9px;padding:7px 13px;cursor:pointer}
.clov-so-btn:hover{background:var(--accent);color:#fff}
.clov-tile.signed{border-color:rgba(22,163,74,.4)}
/* Scorecard inventory viz */
.clinv-tg{background:var(--card);border:0;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--mut)}
.clinv-tg.on{background:var(--accent);color:#fff}
.clinv-tg,.clinv-setcost{height:34px;line-height:1}
.clinv-setcost{display:inline-flex;align-items:center;gap:5px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--txt);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.clinv-setcost:hover{border-color:var(--accent);color:var(--accent)}
.clinv-tg{border-radius:0}
.clinv-tot{font-size:12.5px;margin-bottom:10px}
.clinv-bars{display:flex;flex-direction:column;gap:7px}
.clinv-row{display:flex;align-items:center;gap:10px}
.clinv-lbl{flex:0 0 34%;max-width:34%;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clinv-track{flex:1;height:16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.clinv-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-d,#0d9488));border-radius:8px;min-width:2px}
.clinv-val{flex:0 0 72px;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.clinv-costlist{display:flex;flex-direction:column;gap:2px}
.clinv-costrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 8px;border-radius:8px;font-size:13.5px}
.clinv-costrow:hover{background:var(--accent-soft)}
.clinv-costin{display:flex;align-items:center;gap:3px}
.clinv-costin i{color:var(--mut);font-style:normal}
.clinv-costin input{width:88px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--txt);text-align:right}
@media(max-width:560px){.clinv-lbl{flex-basis:40%;max-width:40%}}
.clov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.clov-tile{text-align:left;font:inherit;width:100%;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:16px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.2,.64,1),box-shadow .18s,border-color .18s}
.clov-tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.28);border-color:var(--accent,#2563eb)}
.clov-tile:active{transform:translateY(0) scale(.99)}
.clov-tile-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.clov-ini{flex:none;width:38px;height:38px;border-radius:11px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.clov-name{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clov-ring{--p:0;--rc:var(--accent,#2563eb);flex:none;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--line,#eef0f2) 0);display:flex;align-items:center;justify-content:center;position:relative}
.clov-ring::before{content:'';position:absolute;width:38px;height:38px;border-radius:50%;background:var(--card,#fff)}
.clov-ring span{position:relative;font-size:12px;font-weight:800;z-index:1}
.clov-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.clov-kpi{text-align:center;padding:9px 4px;border-radius:10px;background:var(--bg,#fafbfc)}
.clov-kpi b{display:block;font-size:15px;font-weight:700}
.clov-kpi span{font-size:9px;color:var(--mut2,#9ca3af);text-transform:uppercase;letter-spacing:.02em}
.clov-kpi.bad{background:rgba(220,38,38,.08)}.clov-kpi.bad b{color:#dc2626}
.clov-kpi.warn{background:rgba(217,119,6,.09)}.clov-kpi.warn b{color:#d97706}
@media(max-width:480px){.clov-kpis{grid-template-columns:repeat(3,1fr)}.clov-summary{flex-direction:column;text-align:center;gap:14px}.clov-summary-stats{justify-content:center;gap:18px}}
/* fill-screen completion celebration */
@keyframes clDonePulse{0%{transform:scale(1)}45%{transform:scale(1.012)}100%{transform:scale(1)}}
.cl-fill-hero.done{animation:clDonePulse .5s ease}
/* ==== Editor polish v2 — premium, iOS-native ==== */
#cl-editor input,#cl-editor select,#cl-editor textarea{font-family:inherit;color:var(--txt);transition:border-color .12s,box-shadow .12s}
#cl-editor input:focus,#cl-editor select:focus,#cl-editor textarea:focus{outline:none;border-color:var(--accent,#2563eb);box-shadow:0 0 0 3px var(--accent-soft,#e8f0fe)}
.cle-meta{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:16px;box-shadow:0 2px 10px -4px rgba(0,0,0,.06)}
.cle-fld span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2,#9ca3af)}
.cle-sec{border:1px solid var(--line,#e5e7eb);border-radius:18px;padding:0;overflow:hidden;box-shadow:0 6px 20px -10px rgba(0,0,0,.12);margin-bottom:16px;background:var(--card,#fff)}
.cle-sec-head{display:flex;align-items:center;gap:10px;background:var(--bg,#f8fafc);border-bottom:1px solid var(--line,#eef0f2);padding:11px 13px;margin:0}
.cle-sec-num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent,#2563eb);color:var(--accent-fg,#fff);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.cle-sec-title{flex:1;min-width:80px;border:1px solid transparent;background:transparent;font-size:16px;font-weight:700;padding:7px 9px;border-radius:9px}
.cle-sec-title:hover{background:var(--card,#fff);border-color:var(--line,#e5e7eb)}
.cle-sec-kind{flex:none;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:9px;padding:8px 10px;font-size:13px;font-weight:600}
.cle-sec-del{flex:none;width:34px;height:34px;border-radius:9px;border:none;background:transparent;color:var(--danger,#dc2626);cursor:pointer;font-size:16px}
.cle-sec-del:hover{background:rgba(220,38,38,.1)}
.cle-sec-body{padding:14px}
.cle-sec{scroll-margin:84px 0 96px}
.cle-sec-grip{flex:none;width:28px;height:34px;border:none;background:transparent;color:var(--mut2,#9ca3af);cursor:grab;display:flex;align-items:center;justify-content:center;font-size:17px;touch-action:none;border-radius:8px}
.cle-sec-grip:hover{background:var(--card,#fff);color:var(--txt,#111)}
.cle-sec-grip:active{cursor:grabbing}
.cle-sec-move{flex:none;display:flex;flex-direction:column;gap:2px}
.cle-mv{width:30px;height:19px;border:1px solid var(--line,#e5e7eb);background:var(--card,#fff);color:var(--txt,#334155);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;padding:0;line-height:1}
.cle-mv:disabled{opacity:.35;cursor:default}
.cle-mv:not(:disabled):active{background:var(--accent-soft,#e8f0fe)}
.cle-dragging{position:fixed;z-index:9999;box-shadow:0 22px 50px -12px rgba(0,0,0,.4);opacity:.97;transform:rotate(.5deg);pointer-events:none;border-color:var(--accent,#2563eb)!important}
.cle-sec-ph{border:2px dashed var(--accent,#2563eb);border-radius:18px;background:var(--accent-soft,#eaf1fe);margin-bottom:16px;opacity:.7}
.cle-sec-flash{animation:cleFlash .65s ease}
@keyframes cleFlash{0%{box-shadow:0 0 0 3px var(--accent,#2563eb)}100%{box-shadow:0 6px 20px -10px rgba(0,0,0,.12)}}
.cle-itopts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line,#eef0f2)}
.cle-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mut,#64748b);border:1px solid var(--line,#e5e7eb);background:var(--card,#fff);border-radius:999px;padding:7px 12px;cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s}
.cle-chip input{margin:0;accent-color:var(--accent,#2563eb)}
.cle-chip.on{background:var(--accent-soft,#e8f0fe);border-color:var(--accent,#2563eb);color:var(--accent-d,#1d4ed8)}
.cl-taskwrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cl-taskwrap .cl-task{flex:1;min-width:58%}
.cl-task-photo{flex:none}
/* Draw-on-image — builder config */
.cle-annrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line,#eef0f2)}
.cle-upload{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-d,#1d4ed8);border:1px solid var(--accent,#2563eb);background:var(--accent-soft,#e8f0fe);border-radius:9px;padding:8px 12px;cursor:pointer}
.cle-annthumb{height:44px;border-radius:8px;border:1px solid var(--line,#e5e7eb);object-fit:cover}
.cle-sizeseg{display:flex;margin-left:auto;border:1px solid var(--line,#e5e7eb);border-radius:9px;overflow:hidden}
.cle-sizeseg button{width:34px;height:34px;border:none;background:var(--card,#fff);color:var(--mut,#64748b);font-weight:700;cursor:pointer;border-left:1px solid var(--line,#e5e7eb)}
.cle-sizeseg button:first-child{border-left:none}
.cle-sizeseg button.on{background:var(--accent,#2563eb);color:#fff}
/* Draw-on-image — fill */
.cl-annfield{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
.cl-annview{width:100%}
.cl-annbase{width:100%;border-radius:10px;border:1px solid var(--line,#e5e7eb);display:block}
.cl-ann-sm .cl-annview{max-width:200px}.cl-ann-md .cl-annview{max-width:340px}.cl-ann-lg .cl-annview{max-width:100%}
.cl-annbtn{flex:none}
/* Draw-on-image — preview */
.clpv-ann img{width:100%;border-radius:9px;border:1px solid var(--line,#e5e7eb);display:block}
.clpv-ann-sm{max-width:150px}.clpv-ann-md{max-width:230px}.clpv-ann-lg{max-width:100%}
.clpv-annbtn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;font-weight:600;color:var(--accent-d,#1d4ed8)}
.cl-emlist{display:flex;flex-wrap:wrap;gap:7px;min-height:20px}
.cl-emchip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);border:1px solid var(--accent,#2563eb);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
.cl-emchip button{border:none;background:rgba(0,0,0,.08);color:inherit;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.cl-emchip button:hover{background:var(--danger,#dc2626);color:#fff}
.cle-alert-chip.on{background:rgba(245,158,11,.14);border-color:#f59e0b;color:#b45309}
.cl-arules{display:flex;flex-direction:column;gap:10px}
.cl-arule{border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:10px;background:var(--bg,#fafbfc)}
.cl-arule-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-arule-top select{padding:8px;border:1px solid var(--line,#e5e7eb);border-radius:9px;background:var(--card,#fff);font-size:14px}
.cl-aval{display:flex;align-items:center;gap:4px;border:1px solid var(--line,#e5e7eb);border-radius:9px;padding:0 8px;background:var(--card,#fff);flex:1;min-width:88px}
.cl-aval span{color:var(--mut,#64748b);font-weight:700}
.cl-aval input{border:none;background:transparent;padding:8px 2px;width:100%;font-size:15px;outline:none}
.cl-arule-del{margin-left:auto;border:none;background:rgba(0,0,0,.06);color:var(--txt,#334155);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;flex:none}
.cl-arule-del:hover{background:var(--danger,#dc2626);color:#fff}
.cl-arule-bot{display:flex;gap:8px;margin-top:8px}
.cl-arule-bot input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:14px;background:var(--card,#fff)}
.cl-asev-critical{border-color:#dc2626!important;color:#dc2626;font-weight:700}
.cl-asev-warning{border-color:#f59e0b!important;color:#b45309;font-weight:700}
.cl-asev-info{border-color:#2563eb!important;color:#1d4ed8;font-weight:700}
.cl-cond-hidden{display:none!important}
.cc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg,#fafbfc);border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:11px}
.cc-row select,.cc-row input{padding:8px 10px;border:1px solid var(--line,#e5e7eb);border-radius:9px;background:var(--card,#fff);font-size:14px;font-weight:600}
.cle-optrow{display:flex;align-items:center;gap:8px;margin-top:9px;color:var(--mut,#64748b)}
.cle-optrow input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:14px;background:var(--card,#fff)}
.cl-pf{display:flex;gap:8px}
.cl-pf button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 12px;border:1.5px solid var(--line,#e5e7eb);background:var(--card,#fff);color:var(--txt,#334155);border-radius:11px;font-size:15px;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.cl-pf .pf-pass.on{background:rgba(22,163,74,.12);border-color:#16a34a;color:#15803d}
.cl-pf .pf-fail.on{background:rgba(220,38,38,.1);border-color:#dc2626;color:#b91c1c}
.cl-sigwrap{display:flex;flex-direction:column;gap:6px;width:100%}
.cl-sigpad{width:100%;height:150px;border:1.5px dashed var(--line2,#cbd5e1);border-radius:12px;background:var(--card,#fff);touch-action:none}
.cl-sig-clear{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--line,#e5e7eb);background:var(--card,#fff);color:var(--txt,#334155);border-radius:9px;font-size:13px;cursor:pointer}
/* Live preview (editor) */
.clpv-card{width:min(96vw,420px);max-height:90vh;display:flex;flex-direction:column}
.clpv-phone{background:linear-gradient(160deg,#e9edf3,#f6f8fb);border-radius:22px;padding:14px 12px;overflow:auto;flex:1}
@media(prefers-color-scheme:dark){.clpv-phone{background:#0c1116}}
:root[data-theme="dark"] .clpv-phone{background:#0c1116}
.clpv-screen{background:var(--card,#fff);border-radius:16px;padding:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px}
.clpv-hero{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;background:var(--accent-soft,#e8f0fe)}
.clpv-hero-ic{width:38px;height:38px;border-radius:11px;background:var(--accent,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.clpv-hero-name{font-weight:800;font-size:15px;color:var(--txt,#0f172a)}
.clpv-hero-meta{font-size:12px;color:var(--mut,#64748b);text-transform:capitalize}
.clpv-sec{border:1px solid var(--line,#eef0f2);border-radius:13px;padding:12px}
.clpv-sec h4{margin:0 0 9px;font-size:14px;font-weight:800;color:var(--txt,#0f172a)}
.clpv-field{padding:8px 0;border-bottom:1px dashed var(--line,#f0f2f5)}
.clpv-field:last-child{border-bottom:none}
.clpv-lbl{font-size:13px;font-weight:600;color:var(--txt,#334155);margin-bottom:6px}
.clpv-inp{display:flex;align-items:center;gap:5px;border:1px solid var(--line,#e5e7eb);border-radius:9px;padding:9px 11px;background:var(--bg,#fafbfc);font-size:14px;color:var(--mut2,#9ca3af)}
.clpv-inp.clpv-area{min-height:38px;align-items:flex-start}
.clpv-inp.clpv-sel{justify-content:space-between;color:var(--txt,#334155)}
.clpv-pre{font-weight:700;color:var(--mut,#64748b)}
.clpv-suf{margin-left:auto;color:var(--mut,#64748b)}
.clpv-chk,.clpv-task{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--txt,#334155);padding:6px 0}
.clpv-box{width:20px;height:20px;border:2px solid var(--line2,#cbd5e1);border-radius:6px;flex:none}
.clpv-pf{display:flex;gap:7px}
.clpv-pf span{flex:1;text-align:center;padding:8px;border-radius:9px;border:1.5px solid var(--line,#e5e7eb);font-size:13px;font-weight:700;color:var(--mut,#64748b)}
.clpv-pf .pf-pass{color:#15803d;border-color:#bbf7d0}.clpv-pf .pf-fail{color:#b91c1c;border-color:#fecaca}.clpv-pf .pf-crit{color:#b45309;border-color:#fed7aa}
.clpv-sig{border:1.5px dashed var(--line2,#cbd5e1);border-radius:10px;padding:16px;text-align:center;color:var(--mut2,#9ca3af);font-size:13px}
.clpv-photo,.clpv-photo-inline{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:var(--accent-d,#1d4ed8);font-weight:600}
.clpv-alerts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.clpv-alert{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:999px;padding:3px 9px;background:color-mix(in srgb,var(--ac) 10%,transparent)}
.clpv-insp{padding:8px 0;border-bottom:1px dashed var(--line,#f0f2f5)}.clpv-insp:last-child{border-bottom:none}
.clpv-submit{background:var(--accent,#2563eb);color:#fff;text-align:center;padding:12px;border-radius:12px;font-weight:700;font-size:15px}
.cle-opts{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.cle-items{display:flex;flex-direction:column;gap:9px}
.cle-item{border:1px solid var(--line,#eef0f2);border-radius:12px;padding:11px;background:var(--bg,#fafbfc);transition:border-color .12s,box-shadow .12s,background .12s}
.cle-item:hover{background:var(--card,#fff);border-color:var(--line2,#d5dbe2);box-shadow:0 3px 10px -5px rgba(0,0,0,.12)}
.cle-item-row{display:flex;gap:8px;align-items:center}
.cle-item-label{flex:1;min-width:0;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:10px 12px;font-size:15px;background:var(--card,#fff)}
.cle-item-type{flex:none;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:10px 8px;font-size:12.5px;font-weight:600;background:var(--card,#fff)}
.cle-item-del{flex:none;width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--mut2,#9ca3af);cursor:pointer;font-size:16px}
.cle-item-del:hover{background:rgba(220,38,38,.1);color:var(--danger,#dc2626)}
.cle-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center;justify-content:flex-start}
.cle-days-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mut2,#9ca3af);margin-right:2px}
.cle-day{flex:0 0 auto;min-width:46px;text-align:center;padding:9px 0;border:1px solid var(--line,#e5e7eb);border-radius:10px;background:var(--card,#fff);color:var(--mut2,#9ca3af);font-size:12px;font-weight:700;cursor:pointer;transition:transform .1s,background .12s,color .12s,box-shadow .12s}
.cle-day:active{transform:scale(.9)}
.cle-day.on{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb);color:#fff;box-shadow:0 4px 10px -3px var(--accent,#2563eb)}
.cle-additem{margin-top:12px;width:100%;padding:12px;border:1.5px dashed var(--line2,#cbd5e1);border-radius:12px;background:transparent;color:var(--accent-d,#1d4ed8);font-weight:600;font-size:14px;cursor:pointer;transition:background .12s,border-color .12s}
.cle-additem:hover{background:var(--accent-soft,#e8f0fe);border-color:var(--accent,#2563eb)}
.cle-empty{color:var(--mut2,#9ca3af);font-size:13px;padding:10px 4px;text-align:center}
.cle-actions{display:flex;gap:10px;align-items:center;margin-top:18px}
#cle-addsec{padding:12px 18px;border-radius:12px;font-weight:600}
/* global auto-X on every modal */
.modal-x-auto{position:absolute;top:11px;right:11px;z-index:6;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--bg,#f3f4f6);border:none;border-radius:50%;font-size:15px;padding:0;color:var(--mut,#6b7280);cursor:pointer}
.modal-x-auto:hover{background:var(--line,#e5e7eb);color:var(--txt,#111)}
/* CoverageIQ schedule toolbar — polished, consistent */
.sched-actions{gap:8px;flex-wrap:wrap;align-items:center}
.sched-actions button{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 15px;font-weight:600;font-size:13.5px}
.sched-actions button i{font-size:16px}
.sched-export{position:relative;display:inline-block}
#export-sched-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:184px;padding:6px}
#export-sched-menu a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--txt)}
#export-sched-menu a:hover{background:var(--bg)}
#export-sched-menu a i{font-size:17px;color:var(--mut)}
.sched-hint{font-size:12px;margin-top:9px;padding-left:2px}
/* CoverageIQ schedule — professional toolbar bar (v2) */
.sched-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:10px 12px;box-shadow:0 2px 10px -6px rgba(0,0,0,.08)}
.sched-bar-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.sched-bar-r{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.wk-nav{display:inline-flex;align-items:center;gap:2px;background:var(--bg,#f3f4f6);border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:3px}
.wk-nav button{background:transparent;border:none;padding:6px 9px;border-radius:8px;cursor:pointer;color:var(--txt);display:flex;align-items:center;font-size:16px}
.wk-nav button:hover{background:var(--card,#fff)}
.wk-nav b{padding:0 8px;font-size:13.5px;white-space:nowrap}
.sched-bar-r button{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 15px;font-weight:600;font-size:13.5px}
.sched-bar-r button i{font-size:16px}.sched-bar-r .cev{font-size:14px;margin-left:1px}
.sched-export,.sched-more{position:relative;display:inline-block}
#sched-more-btn{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb)}
.sched-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:12px;box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.15));min-width:192px;padding:6px}
.sched-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--txt)}
.sched-menu a:hover{background:var(--bg,#f3f4f6)}
.sched-menu a i{font-size:17px;color:var(--mut,#6b7280)}
.sched-menu-sep{height:1px;background:var(--line2,#eef0f2);margin:5px 4px}
.sched-menu-danger,.sched-menu-danger i{color:var(--danger,#dc2626)!important}
.sched-hint{font-size:12px;margin-top:10px;padding-left:2px}
@media(max-width:640px){.sched-bar-l,.sched-bar-r{width:100%}.sched-bar-r{margin-left:0}.sched-bar-r #gen-btn{flex:1}}
/* dashboard alert banner + overdue state */
.cl-alert{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(220,38,38,.1),rgba(220,38,38,.04));border:1px solid rgba(220,38,38,.28);color:#b91c1c;padding:14px 18px;border-radius:16px;margin-bottom:20px;font-size:14px}
.cl-alert>i{font-size:24px;flex:none}
.cl-alert b{font-weight:800}
.cl-od-lbl{color:#dc2626;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.cl-card.overdue{border-color:rgba(220,38,38,.4);background:linear-gradient(0deg,rgba(220,38,38,.04),rgba(220,38,38,.04)),var(--card,#fff)}
.cl-card.overdue .cl-card-ic{background:rgba(220,38,38,.12);color:#dc2626}
.cl-card.overdue .cl-card-ring{background:conic-gradient(#dc2626 calc(var(--p)*1%),var(--line,#eef0f2) 0)}
/* fix: don't stretch the Generate button — natural width */
@media(max-width:640px){.sched-bar-r{flex-wrap:wrap}.sched-bar-r #gen-btn{flex:0 0 auto}}
.sched-bar-r #gen-btn{flex:0 0 auto}
.sched-bar-end{display:inline-flex;gap:8px;align-items:center;flex-wrap:nowrap}
/* ChecklistIQ Settings */
.cls-card{padding:18px;margin-bottom:14px}
.cls-card h3{margin:0 0 4px;display:flex;align-items:center;gap:8px;font-size:16px}
.cls-card h3 i{color:var(--accent,#2563eb)}
.cls-alert,.cls-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line2,#f1f3f5)}
.cls-alert:last-child,.cls-row:last-child{border-bottom:0}
.cls-alert-body{flex:1;min-width:0}
.cls-alert-name{font-weight:600;font-size:14px}
.cls-alert-desc{font-size:12.5px;margin-top:2px}
.cls-who{flex:none;padding:8px 10px;border:1px solid var(--line,#e5e7eb);border-radius:9px;font-size:13px;background:var(--card,#fff)}
.cls-switch{flex:none;position:relative;width:44px;height:26px;display:inline-block}
.cls-switch input{opacity:0;width:0;height:0}
.cls-slider{position:absolute;inset:0;background:var(--line,#d1d5db);border-radius:20px;transition:background .18s;cursor:pointer}
.cls-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cls-switch input:checked+.cls-slider{background:var(--accent,#2563eb)}
.cls-switch input:checked+.cls-slider::before{transform:translateX(18px)}
@media(max-width:520px){.cls-alert{flex-wrap:wrap}.cls-who{width:100%}}
/* CoverageIQ positions filter — aligned checkbox + label */
.fpos-lbl{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13.5px;cursor:pointer}
.fpos-lbl input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent,#2563eb)}
/* Corrective Actions (ChecklistIQ) */
.ca-card{padding:16px;margin-bottom:14px;border-left:4px solid var(--line,#e5e7eb)}
.ca-card.crit{border-left-color:#dc2626}
.ca-card.over{box-shadow:0 0 0 1px rgba(220,38,38,.25)}
.ca-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ca-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:15px}
.ca-sev{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:6px;flex:none}
.ca-sev.crit{background:rgba(220,38,38,.12);color:#dc2626}
.ca-sev.fail,.ca-sev.med{background:rgba(217,119,6,.14);color:#b45309}
.ca-sev.low{background:rgba(100,116,139,.14);color:#64748b}
.ca-sev.high{background:rgba(249,115,22,.16);color:#c2410c}
.ca-st{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;flex:none}
.ca-st.open{background:rgba(220,38,38,.1);color:#dc2626}
.ca-st.prog{background:rgba(37,99,235,.1);color:#2563eb}
.ca-st.done{background:rgba(22,163,74,.12);color:#16a34a}
.ca-meta{font-size:12px;margin-bottom:12px}
.ca-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ca-fld{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.ca-fld>span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mut2,#9ca3af)}
.ca-fld select,.ca-fld input,.ca-fld textarea{padding:9px 11px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:14px;font-family:inherit;background:var(--card,#fff);width:100%}
.ca-fld textarea{resize:vertical}
.ca-thread{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ca-cmt{background:var(--bg,#f8fafc);border-radius:9px;padding:8px 11px;font-size:13px}
.ca-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ca-cmt-in{flex:1;min-width:120px;padding:9px 11px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:14px;font-family:inherit}
.ca-actions button{border-radius:10px;padding:9px 14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
@media(max-width:520px){.ca-grid{grid-template-columns:1fr}.ca-actions{flex-direction:column;align-items:stretch}.ca-cmt-in{width:100%}}
/* ChecklistIQ Settings — alert role checkboxes */
.cls-alert2{padding:14px 0;border-bottom:1px solid var(--line2,#f1f3f5)}
.cls-alert2:last-child{border-bottom:0}
.cls-alert-top{display:flex;align-items:center;gap:14px}
.cls-roles{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:10px;padding-left:58px}
.cls-roles-lbl{flex-basis:100%;margin-bottom:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mut2,#9ca3af)}
.cls-rchk{display:flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.cls-rchk input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent,#2563eb)}
@media(max-width:520px){.cls-roles{padding-left:0}}
/* ChecklistIQ multi-site reporting & trends */
.clr-card{padding:16px;margin-bottom:14px}
.clr-legend{display:flex;align-items:center;gap:16px;font-size:12.5px;margin-bottom:12px;flex-wrap:wrap}
.clr-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.clr-dot.done{background:var(--accent,#2563eb)}.clr-dot.inc{background:#d97706}
.clr-seg.done{background:var(--accent,#2563eb)}.clr-seg.inc{background:#f59e0b}
.clr-chart{display:flex;align-items:flex-end;gap:2px;height:130px;padding:4px 0;border-bottom:1px solid var(--line,#e5e7eb)}
.clr-bar{flex:1;min-width:2px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;cursor:default}
.clr-seg{width:100%;border-radius:2px 2px 0 0;min-height:0;transition:opacity .12s}
.clr-bar:hover .clr-seg{opacity:.75}
.clr-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mut2,#9ca3af);margin-top:6px}
.clr-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.clr-tbl th,.clr-tbl td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--line2,#f1f3f5);white-space:nowrap}
.clr-tbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mut2,#9ca3af);background:var(--bg,#fafbfc)}
.clr-tbl tbody tr:last-child td{border-bottom:0}
.clr-tbl .clr-bad{color:#dc2626;font-weight:700}
/* Reusable module greeting hero (uses module --accent). CoverageIQ Overview; pattern for future modules (skip AnalyticsIQ). */
.iq-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:linear-gradient(135deg,var(--accent,#2563eb),var(--accent-d,#1d4ed8));color:#fff;border-radius:18px;padding:15px 20px;margin-bottom:16px;box-shadow:0 10px 28px -12px rgba(0,0,0,.35)}
.iq-hero-l{flex:1;min-width:0}
.iq-hero-greet{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1}
.iq-hero-date{opacity:.85;font-size:12.5px;margin-top:2px}
.iq-hero-stats{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap}
.iq-hero-stat b{font-size:17px;font-weight:700;white-space:nowrap}
.iq-hero-stat span{display:block;font-size:10px;opacity:.8;text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.iq-hero-ring{--p:0;flex:none;width:76px;height:76px;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0);display:flex;align-items:center;justify-content:center}
.iq-hero-ring-in{width:60px;height:60px;border-radius:50%;background:var(--accent-d,#1d4ed8);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center}
.iq-hero-ring-in b{font-size:16px;font-weight:700}
.iq-hero-ring-in span{font-size:8px;opacity:.85;text-transform:uppercase;letter-spacing:.03em;margin-top:1px}
@media(max-width:560px){.iq-hero{padding:14px 16px;gap:12px}.iq-hero-stats{gap:14px}}
.badge.notopen{background:rgba(217,119,6,.14);color:#b45309;border:1px solid rgba(217,119,6,.3)}

/* ===================== Connecteam-inspired mobile / iOS-native polish ===================== */
/* #2 — Bottom-sheet modals on phones. dvh (with vh fallback) keeps action buttons above the address bar. */
@media(max-width:640px){
  .modal:not(.no-sheet){align-items:flex-end;top:auto;height:100dvh}
  .modal:not(.no-sheet) .modal-card,.modal:not(.no-sheet) .modal-card.wide{width:100%;max-width:100%;max-height:88vh;max-height:88dvh;margin:0;border-radius:22px 22px 0 0;overflow:auto;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px);animation:iq-sheet .28s cubic-bezier(.16,1,.3,1)}
  .modal:not(.no-sheet) .modal-card.pf-modal,.modal:not(.no-sheet) .modal-card.emp-modal{overflow-x:hidden}   /* profiles: vertical scroll ok, NEVER horizontal (mobile) */
  .modal:not(.no-sheet) .modal-card::before{content:"";display:block;width:38px;height:4px;border-radius:3px;background:var(--line,#d1d5db);margin:2px auto 14px}
}
@keyframes iq-sheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* #4 — Segmented controls as clean iOS pill groups (used across ChecklistIQ/AnalyticsIQ). */
.hm-seg{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:999px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.hm-seg.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff);box-shadow:0 3px 10px -4px var(--accent)}
.hm-seg:not(.primary):active{background:var(--bg)}
/* #3/#1 — bigger, tappable schedule cells + tiles on touch. */
@media(max-width:640px){
  .wiw-cell{min-height:58px}
  .wiw-cell.addable:active{background:var(--accent-soft,rgba(15,118,110,.10))}
  .site-tile:active,.clov-tile:active{transform:scale(.99)}
}
.site-tile,.clov-tile{transition:transform .12s,box-shadow .15s}

/* ===== Schedule shift-card view — mobile & tablet PORTRAIT only; full grid in landscape + on desktop ===== */
#grid-cards{display:none}
@media(max-width:1024px) and (orientation:portrait){
  #grid{display:none}
  #grid-cards{display:block}
  .sched-scroll-hint{display:none}
}
.sched-cards{display:flex;flex-direction:column;gap:14px}
.sc-day{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.sc-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sc-day-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--line2)}
.sc-day-h b{font-size:16px}.sc-day-d{color:var(--mut);font-size:13px;margin-left:6px}
.sc-day-sum{font-size:11.5px;color:var(--mut);font-weight:600;white-space:nowrap}
.sc-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--bg);margin-bottom:8px;cursor:pointer;transition:background .12s;-webkit-tap-highlight-color:transparent}
.sc-card:last-of-type{margin-bottom:0}
.sc-card:active{background:var(--line2)}
.sc-card.draft{}
.sc-ava{flex:none;width:40px;height:40px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.sc-body{flex:1;min-width:0}
.sc-nm{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-meta{font-size:12.5px;color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-tag{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 7px;border-radius:6px}
.sc-tag.draft{background:var(--line2);color:var(--mut)}.sc-tag.tent{background:rgba(217,119,6,.15);color:#b45309}
.sc-empty{color:var(--mut);font-size:13px;padding:8px 2px;text-align:center}
.sc-add{width:100%;margin-top:10px;padding:11px;border:1.5px dashed var(--line2);border-radius:11px;background:transparent;color:var(--accent-d,#1d4ed8);font-weight:600;cursor:pointer}
.sc-add:active{background:var(--accent-soft,rgba(37,99,235,.08))}

/* Connecteam-style schedule card view: date scroll + bold day hero + color-coded cards */
.sc-datescroll{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sc-datescroll::-webkit-scrollbar{display:none}
.sc-chip{flex:0 0 auto;width:52px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.sc-chip:active{transform:scale(.94)}
.sc-chip-dow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--mut)}
.sc-chip-num{font-size:18px;font-weight:700;color:var(--txt);line-height:1}
.sc-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.sc-chip-dot.none{background:transparent}
.sc-chip.today{border-color:var(--accent)}
.sc-chip.today .sc-chip-num{color:var(--accent)}
.sc-chip.sel{background:var(--accent);border-color:var(--accent);box-shadow:0 7px 18px -7px var(--accent)}
.sc-chip.sel .sc-chip-num,.sc-chip.sel .sc-chip-dow{color:var(--accent-fg,#fff)}
.sc-chip.sel .sc-chip-dot{background:var(--accent-fg,#fff)}
.sc-chip.sel .sc-chip-dow,.sc-chip.sel .sc-chip-num{color:var(--accent-fg,#fff)}
.sc-chip.sel .sc-chip-dot{background:rgba(255,255,255,.9)}
.sc-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff;border-radius:16px;padding:14px 18px;margin:2px 0 14px;box-shadow:0 8px 22px -10px rgba(0,0,0,.4)}
.sc-hero-day{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.1}
.sc-hero-date{opacity:.85;font-size:13px;margin-top:2px}
.sc-hero-sum{text-align:right;white-space:nowrap}
.sc-hero-sum b{font-size:22px;font-weight:800;display:block;line-height:1}
.sc-hero-sum span{display:block;font-size:10.5px;opacity:.85;margin-top:3px}
.sc-list{display:flex;flex-direction:column;gap:9px}
.sc-card{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pc,var(--line));box-shadow:0 2px 8px -4px rgba(0,0,0,.08);cursor:pointer;transition:transform .1s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.sc-card:active{transform:scale(.99)}
.sc-card.draft{}
.sc-ava{flex:none;width:44px;height:44px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;background-size:cover;background-position:center;box-shadow:0 2px 6px -2px rgba(0,0,0,.3)}
.sc-body{flex:1;min-width:0}
.sc-nm{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-meta{font-size:12.5px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-tag{flex:none;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:7px}
.sc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mut);font-size:13.5px;padding:34px 10px;text-align:center}
.sc-empty i{font-size:32px;opacity:.5}

/* ===================== CoverageIQ Home hub ===================== */
.home-actions{display:flex;gap:10px;margin:-4px 0 16px;flex-wrap:wrap;position:relative;z-index:2}
#oversight-status+.home-actions{margin-top:16px}   /* oversight board is taller than the old hero — clear the buttons so site cards can't overlap them */
.home-act{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:600;font-size:14px;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s}
.home-act:active{transform:scale(.97)}
.home-act i{font-size:19px;color:var(--accent)}
.dir-list{display:flex;flex-direction:column;gap:2px}
.dir-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line2)}
.dir-row:last-child{border-bottom:0}
.dir-ava{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-fg,#fff);display:flex;align-items:center;justify-content:center;font-weight:700}
.dir-info{flex:1;min-width:0}.dir-info b{display:block;font-size:14.5px}
.dir-info span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.dir-call{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:var(--accent-soft,rgba(37,99,235,.1));color:var(--accent-d,#1d4ed8);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.feed-wrap{margin-top:18px}
.feed-h h3{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:12px}.feed-h h3 i{color:var(--accent)}
.feed-compose{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);margin-bottom:16px}
.feed-compose-body{flex:1;min-width:0}
.feed-compose textarea{width:100%;border:0;background:transparent;resize:none;font-family:inherit;font-size:14.5px;outline:none;color:var(--txt);line-height:1.4}
.feed-compose-bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.feed-photo-btn{cursor:pointer;color:var(--mut);display:inline-flex;padding:6px;border-radius:8px}
.feed-photo-btn:hover{background:var(--bg);color:var(--accent)}.feed-photo-btn i{font-size:21px}
.feed-compose-bar .primary{margin-left:auto;padding:8px 20px;border-radius:20px}
.feed-prev{position:relative;display:inline-block;margin-top:8px}
.feed-prev img{max-width:160px;max-height:160px;border-radius:10px;border:1px solid var(--line)}
.feed-prev button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;font-size:12px}
.feed-ava{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-fg,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.feed-list{display:flex;flex-direction:column;gap:12px}
.feed-post{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.feed-post.pinned{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.feed-head{display:flex;align-items:center;gap:10px}
.feed-meta{flex:1;min-width:0;line-height:1.2}.feed-meta b{font-size:14.5px}
.feed-meta span{display:block;font-size:11px;color:var(--mut)}
.feed-pin{font-size:10.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:3px}
.feed-menu{border:0;background:none;cursor:pointer;color:var(--mut);font-size:18px;padding:2px 6px}
.feed-body{margin:10px 0 4px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.feed-img{width:100%;border-radius:12px;margin-top:8px;display:block}
.feed-rx{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.feed-rx-b,.feed-rx-add{border:1px solid var(--line);background:var(--bg);border-radius:16px;padding:3px 10px;font-size:13px;cursor:pointer;transition:background .12s}
.feed-rx-b.on{background:var(--accent-soft,rgba(37,99,235,.12));border-color:var(--accent)}
.feed-rx-add{color:var(--mut)}
.feed-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2)}
.feed-actions button{padding:6px 14px;border-radius:9px;font-size:13px}

/* ===== Team feed — ported from approved prototype (window · one reaction · replies) ===== */
/* Scrolls internally (feed can be long) but capped short enough that page content always shows around it → no scroll trap. */
.feed-window{background:transparent;border:0;box-shadow:none;max-height:none;overflow:visible}
.fp-empty{padding:36px 20px;text-align:center;color:var(--mut);font-size:14px}
.fp-compose{display:flex;gap:11px;padding:13px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:14px}
.fp-compose-main{flex:1;min-width:0}
.fp-compose textarea{width:100%;border:0;background:transparent;resize:none;font-family:inherit;font-size:15px;color:var(--txt);outline:none;line-height:1.4}
.fp-compose-bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.fp-photo-btn{border:0;background:transparent;color:var(--mut);cursor:pointer;padding:6px;border-radius:9px;display:inline-flex}
.fp-photo-btn:hover{background:var(--bg);color:var(--accent)}.fp-photo-btn i{font-size:21px}
.fp-compose-bar .primary{margin-left:auto;border-radius:20px;padding:8px 20px;font-weight:700}
.fp-ava{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:16px;background-size:cover;background-position:center}
.fp-ava.sm{width:32px;height:32px;font-size:13px}
.fp{display:flex;gap:11px;padding:14px 15px;border-bottom:1px solid var(--line2)}
.fp:last-child{border-bottom:0}
.fp.pinned{background:var(--accent-soft,rgba(13,148,136,.10))}
.fp-main{flex:1;min-width:0}
.fp-pinflag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--accent);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.fp-pinflag svg{width:12px;height:12px;fill:var(--accent)}
.fp-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
.fp-name{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.fp-pos{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--mut);background:var(--bg);padding:2px 7px;border-radius:6px}
.fp-time{font-size:12.5px;color:var(--mut)}
.fp-menu{margin-left:auto;border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;border-radius:6px}
.fp-menu:hover{color:var(--txt)}
.fp-menu-pop{position:absolute;right:0;top:22px;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:5px;display:flex;flex-direction:column;min-width:110px}
.fp-menu-pop button{border:0;background:none;text-align:left;padding:8px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--txt)}
.fp-menu-pop button:hover{background:var(--bg)}.fp-menu-pop button[data-del]{color:var(--danger,#dc2626)}
.fp-text{font-size:15px;line-height:1.5;margin:4px 0 0;word-break:break-word;white-space:pre-wrap}
.fp-media{margin-top:10px;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:var(--bg);display:flex;justify-content:center}
.fp-media img{max-width:100%;max-height:min(60vh,440px);width:auto;height:auto;object-fit:contain;display:block;cursor:zoom-in}
.fp-rxsum{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:12.5px;color:var(--mut)}
.fp-rxfaces{display:inline-flex}
.fp-rxfaces span{width:20px;height:20px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-left:-6px;box-shadow:0 0 0 2px var(--card)}
.fp-rxfaces span:first-child{margin-left:0}
.fp-bar{display:flex;align-items:center;gap:6px;margin-top:10px;border-top:1px solid var(--line2);padding-top:10px}
.fp-rx,.fp-reply{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--mut);cursor:pointer;padding:6px 10px;border-radius:20px;font-size:13px;font-weight:600;transition:background .12s,color .12s;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
.fp-rx:hover,.fp-reply:hover{background:var(--bg)}
.fp-rx-e{font-size:16px;transition:transform .12s}
.fp-rx:active .fp-rx-e{transform:scale(1.3)}
.fp-rx.on{color:var(--accent);background:var(--accent-soft,rgba(13,148,136,.12))}
.fp-rx[data-r="love"].on{color:#e0245e;background:rgba(224,36,94,.1)}
.fp-rx[data-r="celebrate"].on{color:#d97706;background:rgba(217,119,6,.1)}
.fp-rx[data-r="like"].on{color:#2563eb;background:rgba(37,99,235,.1)}
.fp-reply svg{width:17px;height:17px}
.fp-replies{margin-top:12px;padding-left:14px;border-left:2px solid var(--line)}
.fp-reply-item{display:flex;gap:9px;padding:9px 0}
.fp-reply-main{min-width:0}
.fp-rname{font-weight:700;font-size:13.5px}
.fp-rmeta{font-size:11.5px;color:var(--mut);margin-left:5px}
.fp-rtext{font-size:14px;margin-top:1px;word-break:break-word;white-space:pre-wrap}
.fp-reply-box{display:flex;gap:9px;align-items:center;padding:8px 0 2px}
.fp-reply-in{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:20px;padding:9px 15px;font-size:14px;font-family:inherit;outline:none}
.fp-reply-in:focus{border-color:var(--accent)}
.fp-reply-send{background:var(--accent);color:var(--accent-fg,#fff);border:0;border-radius:20px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer}

/* ===== Dark / light theme (top-bar toggle; OS preference is the default) ===== */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0c1116; --card:#161d25; --line:#29333d; --line2:#1d2630; --ink:#05080d; --ink-soft:#111a26; --ink-line:#202b39;
  --txt:#e8eef3; --mut:#95a1ad; --mut2:#69747f; --accent-soft:#0fb6a622;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px -14px rgba(0,0,0,.7); --shadow-lg:0 16px 40px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --bg:#0c1116; --card:#161d25; --line:#29333d; --line2:#1d2630; --ink:#05080d; --ink-soft:#111a26; --ink-line:#202b39;
  --txt:#e8eef3; --mut:#95a1ad; --mut2:#69747f; --accent-soft:#0fb6a622;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px -14px rgba(0,0,0,.7); --shadow-lg:0 16px 40px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --bg:#f5f7fa; --card:#ffffff; --line:#e7eaf0; --line2:#eef1f5; --ink:#0c1320; --ink-soft:#1b2536; --ink-line:#1d2738;
  --txt:#16202e; --mut:#6b7686; --mut2:#9aa4b2; --accent-soft:#e9f9f6;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06); --shadow-lg:0 8px 30px rgba(16,24,40,.12);
}
/* Feed: always-visible reply composer + "View N replies" toggle */
.fp-view{border:0;background:none;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;padding:9px 0 0;display:block}
.fp-thread{padding-left:14px;border-left:2px solid var(--line);margin-top:8px}
.fp-reply-box{margin-top:9px}
.fp-reply-box .fp-ava.sm{width:30px;height:30px;font-size:12px}
/* Forecast legend swatch word — matches the --txt bar colour, which is black in light / white in dark. */
.staff-word::after{content:"Black"}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .staff-word::after{content:"White"} }
:root[data-theme="dark"] .staff-word::after{content:"White"}
:root[data-theme="light"] .staff-word::after{content:"Black"}
/* Shift detail sheet + swap picker (Home hub) */
.ms-shift:active{background:var(--bg)}
.sd-time{font-size:18px;font-weight:700}
.sd-badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.sd-badge.ok{background:rgba(22,163,74,.14);color:#16a34a}
.sd-badge.warn{background:rgba(220,38,38,.12);color:#dc2626}
.sd-badge.bad{background:rgba(107,119,131,.16);color:var(--mut)}
.sd-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:9px}
.sd-cos{display:flex;flex-direction:column;gap:10px}
.sd-co,.sp-cand{display:flex;align-items:center;gap:11px}
.sd-co-ava{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none}
.sp-list{display:flex;flex-direction:column;gap:8px}
.sp-cand{width:100%;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;color:var(--txt)}
.sp-cand:hover{border-color:var(--accent);background:var(--bg)}
/* Home hub schedule card view (date scroll + Me/Team toggle) */
.hub-seg{display:inline-flex;gap:4px;background:var(--bg);border-radius:20px;padding:3px}
.hub-day-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:2px 0 10px}
.hub-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border-left:4px solid var(--pc,var(--accent));margin-bottom:8px;cursor:pointer;transition:transform .1s}
.hub-card:active{transform:scale(.99)}
.hub-pos{display:block;font-size:11.5px;font-weight:600;margin-top:1px}
/* Feed brand header (company name + logo, set at onboarding) + photo avatars */
.feed-brand{display:none}
.feed-brand-logo{width:44px;height:44px;border-radius:11px;object-fit:contain;background:#fff;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.feed-brand-logo.ph{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px;background:var(--card)}
.feed-brand-name{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.has-photo{background-size:cover !important;background-position:center;color:transparent !important}
.hub-sample{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--accent);background:var(--accent-soft);border-radius:9px;padding:8px 11px;margin-bottom:11px;font-weight:600}
/* Overview polish — trend sparklines */
.spark{display:block;width:100%;height:26px}
.tile-spark{margin-left:auto;text-align:right;flex:none;width:96px}
.tile-spark .spark{height:30px}
.tile-spark-l{font-size:9.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.tsh-spark{display:flex;align-items:center;gap:8px}
.tk-spark{margin-left:auto;width:82px;flex:none}
.tk-spark .spark{height:20px}
.kpi-v,.tk-v{font-variant-numeric:tabular-nums}
/* ===== Scheduling — reorganized control panel (ported from approved prototype) ===== */
.sched-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.sp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-wk{display:flex;align-items:center;gap:8px;margin-left:auto}
.sp-arrow{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sp-wk b{font-weight:800;font-size:15.5px;letter-spacing:-.02em;text-align:center;min-width:120px;white-space:nowrap}
.sp-today{height:36px;border:1px solid var(--line);background:var(--bg);border-radius:10px;font-size:12px;font-weight:700;padding:0 12px;color:var(--mut);cursor:pointer;flex:none}
.sp-view{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:var(--bg);border-radius:12px;padding:4px}
.sp-view button{border:0;background:transparent;color:var(--mut);font-weight:700;font-size:13px;padding:9px 0;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sp-view button.on{background:var(--card);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.sp-summ{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp-summ:empty{display:none}
.sp-sc{border:1px solid var(--line);border-radius:11px;padding:9px 10px;min-width:0;overflow:hidden}
.sp-sc .v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.sp-sc .v.g{color:var(--ok)}.sp-sc .v.a{color:var(--warn)}.sp-sc .v.r{color:var(--danger)}
.sp-sc .l{font-size:9.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-actions{display:flex;gap:8px;flex-wrap:wrap}
.sp-actions .btn{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:11px;padding:10px 14px;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.sp-actions .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)}
.sp-actions .btn.bicon{padding:10px 12px}
.sp-actions .sched-export,.sp-actions .sched-more{position:relative;display:inline-flex}
@media(min-width:720px){ .sp-view{grid-template-columns:auto auto auto;justify-content:start;width:max-content} .sp-summ{grid-template-columns:repeat(6,1fr)} }
/* Scheduling panel — color accents + heat-chart hour-column freeze + polish */
.sp-top .site-sel{border:1px solid var(--line);border-radius:12px;padding:6px 10px 6px 8px;background:var(--card)}
.sp-top .site-sel > i:first-child{color:var(--txt);font-size:18px}
.sp-top .site-sel select{color:var(--accent);font-weight:800;font-size:15px;letter-spacing:-.01em}
.sp-top .site-sel .chev{color:var(--accent)}
.sp-view button i{color:var(--accent)}
.sp-view button.on i{color:var(--accent-d)}
.sp-sc{background:linear-gradient(180deg,var(--accent-soft),transparent)}
.mh-hr{position:sticky;left:0;z-index:1;background:var(--card)}
/* Scheduling — bottom KPI chips (Target Cars … Projected OT): small, 3-wide × 2 rows, green gradient */
.sched-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.sched-kpis .sp-sc{background:linear-gradient(180deg,var(--accent-soft),transparent)}
/* Heat charts: reuse the proven matrix-tbl/mx-sticky freeze, but keep the 2px cell gaps + no row borders */
.mh-tbl{border-spacing:2px !important}
.mh-tbl td,.mh-tbl th{border-bottom:0 !important;white-space:nowrap}
/* Team — directory cards (ported from approved prototype; no explanatory note per Jeff) */
.tm-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tm-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.tm-ct{font-size:12px;color:var(--mut);font-weight:600;background:var(--bg);padding:3px 9px;border-radius:20px}
.tm-add{margin-left:auto;background:var(--accent);color:var(--accent-fg,#fff);border:0;border-radius:11px;padding:9px 15px;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tm-search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 13px;margin-bottom:10px;box-shadow:var(--shadow)}
.tm-search i{color:var(--mut);font-size:18px}
.tm-search input{border:0;background:transparent;outline:none;font-family:inherit;font-size:15px;color:var(--txt);width:100%}
.tm-fscroll{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 16px;padding:2px}
.tm-fscroll::-webkit-scrollbar{display:none}
.tm-fc{flex:none;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tm-fc.on{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent-d)!important}
.tm-fdot{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--accent))}
.tm-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.tm-grid{grid-template-columns:1fr 1fr}}
.tm-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pc);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow);cursor:pointer;transition:transform .1s}
.tm-card:active{transform:scale(.99)}
.tm-card.inactive{opacity:.55}
.tm-ava{width:46px;height:46px;border-radius:50%;color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none;background-size:cover;background-position:center}
.tm-info{flex:1;min-width:0}
.tm-nm{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-inact{font-size:10px;font-weight:700;color:var(--mut);background:var(--bg);padding:1px 6px;border-radius:5px;text-transform:uppercase}
.tm-pos{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;padding:2px 8px;border-radius:6px;margin-top:3px}
.tm-meta{font-size:12px;color:var(--mut);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap}
.tm-meta b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.tm-view{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--accent);margin-top:5px;text-transform:uppercase;letter-spacing:.03em}
.tm-view i{font-size:13px}
.tm-acts{display:flex;flex-direction:column;gap:7px;flex:none}
.tm-ib{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);text-decoration:none}
.tm-ib i{font-size:17px}
.tm-chev{font-size:24px;color:var(--mut);font-weight:400;flex:none;line-height:1}
/* User Management — Team-style card list (fixes the weird nested horizontal scroll) */
.um-list{display:flex;flex-direction:column;gap:0;overflow-y:auto;overflow-x:hidden;flex:1;min-height:120px;padding:2px}
.um-list>.um-card{margin-bottom:8px}
.um-email{font-size:12px;color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-chips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.um-chip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--mut);background:var(--bg);padding:2px 8px;border-radius:6px}
.um-chip.pos{color:#fff}
.um-list .tm-ib i{color:var(--accent)}
.um-list .tm-ib.um-danger i{color:var(--danger)}
/* User Management as a full "page" — large panel on desktop, full-screen on phone (no more tiny scroll window) */
.modal-card.um-full{width:min(940px,95vw);max-width:95vw;height:min(88vh,920px);max-height:92vh}
@media(max-width:640px){ .modal-card.um-full{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 14px} }
/* Time Off — mobile agenda cards (ported prototype) */
.oc-list{display:flex;flex-direction:column;gap:10px}
.oc{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow)}
.oc-ava{width:44px;height:44px;border-radius:50%;color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--pc)}
.oc-in{flex:1;min-width:0}
.oc-nm{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-when{font-size:13px;color:var(--txt);margin-top:2px;font-weight:600}
.oc-type{display:inline-block;font-size:10px;font-weight:700;color:#fff;padding:2px 8px;border-radius:6px;margin-top:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-st{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.oc-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:3px 9px;border-radius:20px}
.oc-badge.pending{background:rgba(245,158,11,.15);color:#d97706}
.oc-badge.approved{background:rgba(34,197,94,.15);color:#16a34a}
.oc-badge.denied{background:rgba(107,119,131,.16);color:var(--mut)}
.oc-mgr{display:flex;gap:6px}
.oc-mgr button{border:0!important;border-radius:9px;width:34px;height:34px;cursor:pointer;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.oc-ok{background:rgba(34,197,94,.15)!important;color:#16a34a!important}
.oc-no{background:rgba(220,38,38,.12)!important;color:var(--bad)!important}
.oc-edit{border:0!important;background:none!important;cursor:pointer;color:var(--mut)!important;font-size:16px}
/* Time Off — view toggle, color key, status dots, card note */
.to-vtoggle{display:inline-flex;gap:4px;background:var(--bg);border-radius:10px;padding:3px}
.to-vtoggle button{border:0!important;background:transparent!important;color:var(--mut)!important;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.to-vtoggle button.on{background:var(--card)!important;color:var(--txt)!important;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.to-vtoggle button i{color:var(--accent)}
.to-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:14px;padding:0 2px}
.lgk{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut)}
.lgk i{width:11px;height:11px;border-radius:3px;display:inline-block}
.to-off-sd{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:3px;vertical-align:middle;flex:none}
.to-off-sd.approved{background:#16a34a}.to-off-sd.pending{background:#f59e0b}.to-off-sd.denied{background:var(--mut)}
.oc-note{display:block;font-size:11.5px;color:var(--mut);margin-top:3px}
/* Tour narration mute/music toggle */
.tut-mute{float:right;border:0!important;background:transparent!important;color:var(--accent)!important;cursor:pointer;font-size:16px;padding:0 0 0 8px;margin-top:-2px;line-height:1}
.tut-mute i{color:var(--accent)}
/* Tour music slider in the tut card */
.tut-audio{float:right;display:inline-flex;align-items:center;gap:6px}
.tut-audio > i{font-size:13px;color:var(--mut)}
.tut-audio input[type=range]{width:62px;height:4px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
.tut-audio .tut-mute{float:none;padding:0}
/* Feed: readable column on desktop + tap-to-enlarge photo lightbox */
.feed-wrap{max-width:640px;margin-inline:auto}
.img-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:ilbfade .15s ease}
.img-lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.6)}
@keyframes ilbfade{from{opacity:0}to{opacity:1}}
/* User management — site group headers */
.um-site-h{position:sticky;top:0;z-index:5;margin:10px -2px 0;padding:10px 15px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:2px}
.um-list>.um-site-h:first-child{margin-top:0}
/* ===== Team Feed 2.0 — full-width social posts (colored heroes, files, audio, polls) ===== */
.post{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;display:block;padding:0}
.post.pinned{border-color:var(--accent)}
.post .pin-flag{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);padding:10px 15px 0}
.post .pin-flag svg{width:13px;height:13px}
.p-head{display:flex;align-items:center;gap:11px;padding:13px 15px 10px}
.p-head .fp-ava{width:44px;height:44px;flex:none}
.p-hmain{flex:1;min-width:0}
.p-name{font-weight:800;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.p-pos{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;padding:2px 7px;border-radius:5px}
.p-meta{font-size:12.5px;color:var(--mut);margin-top:1px}
.p-more{margin-left:auto;color:var(--mut);background:transparent;border:0;font-size:20px;cursor:pointer;align-self:flex-start;line-height:1;padding:0 4px}
.p-text{padding:0 15px 12px;font-size:15px;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.p-hero{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px 24px;font-size:clamp(19px,5vw,23px);font-weight:800;line-height:1.3;color:#fff;letter-spacing:-.01em;white-space:pre-wrap;word-break:break-word}
/* audio clip */
.p-audio{margin:0 15px 13px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:14px;padding:11px 14px;background:var(--accent-soft)}
.p-play{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;border:0;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.p-play svg{width:20px;height:20px}
.p-play.playing svg{display:none}.p-play.playing::before{content:"";width:14px;height:14px;background:currentColor;border-radius:2px}
.p-wave{flex:1;display:flex;align-items:center;gap:2.5px;height:34px;overflow:hidden}
.p-wave i{flex:1;background:var(--accent);border-radius:2px;opacity:.38;transition:opacity .1s}
.p-wave i.on{opacity:1}
/* file card */
.p-file{margin:0 15px 13px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:13px;padding:12px 13px;cursor:pointer;background:var(--chip);text-decoration:none;color:var(--txt)}
.p-file:hover{border-color:var(--accent)}
.p-fi{width:44px;height:44px;border-radius:10px;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-weight:800;font-size:11px}
.p-fi.pdf{background:#dc2626}
.p-fmeta{min-width:0}.p-fmeta b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p-fmeta span{font-size:12.5px;color:var(--mut)}
.p-dl{margin-left:auto;color:var(--accent);font-size:19px;flex:none}
/* poll */
.p-poll{padding:0 15px 13px}
.p-pollq{font-weight:700;font-size:14.5px;margin-bottom:4px}
.p-opt{display:block;width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 14px;margin-top:8px;font-size:14px;font-weight:600;cursor:pointer;position:relative;overflow:hidden;background:var(--card);color:var(--txt);font-family:inherit;text-align:left}
.p-opt:hover{border-color:var(--accent)}
.p-opt.mine{border-color:var(--accent)}
.p-fill{position:absolute;inset:0;background:var(--accent-soft);width:0;transition:width .4s ease}
.p-optl{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.p-optl b{color:var(--accent-d,#0a8f83)}
.p-pollmeta{font-size:12px;color:var(--mut);margin-top:8px}
/* composer additions */
.fp-comp-actions{display:flex;gap:4px;margin-top:11px;border-top:1px solid var(--line2);padding-top:9px;flex-wrap:wrap}
.fp-ca{flex:1;min-width:70px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--mut);font-weight:600;font-size:12.5px;padding:8px 4px;border-radius:9px;cursor:pointer;font-family:inherit}
.fp-ca:hover{background:var(--chip)}.fp-ca i{font-size:18px}
.fp-ca.photo i{color:#16a34a}.fp-ca.file i{color:#2563eb}.fp-ca.voice i{color:#e0245e}.fp-ca.color i{color:#f59e0b}.fp-ca.poll i{color:#7c3aed}
.fp-bgrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fp-bgchip{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.fp-bgchip.on{border-color:var(--txt);transform:scale(1.08)}
.fp-bgchip.none{background:var(--chip);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:13px}
.fp-attach{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fp-att{display:flex;align-items:center;gap:7px;background:var(--chip);border-radius:9px;padding:6px 10px;font-size:12.5px;font-weight:600;max-width:100%}
.fp-att span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.fp-att b{cursor:pointer;color:var(--mut)}
.fp-poll-build{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.fp-poll-build input{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;color:var(--txt);outline:none}
.fp-rec{display:flex;align-items:center;gap:10px;margin-top:10px;background:var(--accent-soft);border-radius:11px;padding:10px 13px;font-size:13px;font-weight:600}
.fp-rec .dot{width:11px;height:11px;border-radius:50%;background:#e0245e;animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.3}}
.ilb-x{position:fixed;top:14px;right:14px;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:20px;line-height:1;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.ilb-x:hover{background:rgba(0,0,0,.75)}
/* Feed post images — scale to the post width, full & uncropped (Instagram-style), tall ones capped */
.p-media{background:var(--bg);line-height:0;display:block}
.p-media img{width:100%;height:auto;max-height:82vh;object-fit:contain;display:block;cursor:zoom-in}
/* Reports section — Overview / Adherence toggle */
.rp-vtabs{display:inline-flex;gap:4px;background:var(--bg);border-radius:12px;padding:3px;margin-bottom:14px}
.rp-vtabs .rp-vtab{border:0;background:transparent;color:var(--mut);font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;cursor:pointer;font-family:inherit}
.rp-vtabs .rp-vtab.on{background:var(--card);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* ===== Team Feed — full-screen Instagram-style section ===== */
.fs{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column}
.fs-top{flex:none;height:calc(54px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;padding-left:6px;padding-right:12px}
.fs-back{width:40px;height:40px;border:0;background:transparent;color:var(--txt);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;border-radius:50%}
.fs-back:hover{background:var(--chip)}
.fs-logo{width:30px;height:30px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--accent),#0891b2);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.fs-logo img{width:100%;height:100%;object-fit:cover}
.fs-top h1{font-size:18px;font-weight:800;letter-spacing:-.02em}
.fs-ic{margin-left:auto;width:40px;height:40px;border:0;background:transparent;color:var(--txt);font-size:21px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%}
.fs-ic:hover{background:var(--chip)}
.fs-searchbar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.fs-searchbar>i{color:var(--mut)}
.fs-searchbar input{flex:1;border:0;background:var(--chip);border-radius:20px;padding:9px 14px;font-size:15px;font-family:inherit;color:var(--txt);outline:none}
.fs-searchbar button{border:0;background:transparent;color:var(--mut);font-size:15px;cursor:pointer}
.fs-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;justify-content:center;padding:12px 10px 22px}
.fs-scroll>.feed-wrap{width:100%;max-width:600px;margin:0}
.fs .feed-h{display:none}
.fs .feed-window{margin:0}
.fs-bnav{flex:none;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);display:flex}
.fs-bnav button{flex:1;background:0;border:0;color:var(--mut);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.fs-bnav button.on{color:var(--accent)}
.fs-bnav button i{font-size:23px}
.fs-bnav .fs-create{color:var(--accent)}.fs-bnav .fs-create i{font-size:30px}
/* Home pinned-post preview card */
.hfc{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;margin-top:14px;transition:transform .1s}
.hfc:active{transform:scale(.995)}
.hfc-h{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;font-weight:800;font-size:15px;border-bottom:1px solid var(--line2)}
.hfc-h>span:first-child{display:flex;align-items:center;gap:7px}.hfc-h i{color:var(--accent)}
.hfc-go{color:var(--accent);font-size:13px;font-weight:700;display:flex;align-items:center;gap:1px}
.hfc-empty{padding:22px;text-align:center;color:var(--mut)}
.hfc-post{padding:12px 15px 14px}
.hfc-pin{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.hfc-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.hfc-ava{width:36px;height:36px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;background-size:cover;flex:none}
.hfc-who b{font-size:14px;display:block}.hfc-who span{font-size:12px;color:var(--mut)}
.hfc-body{font-size:14.5px;line-height:1.5}
.hfc-hero{border-radius:12px;padding:22px 16px;color:#fff;font-weight:800;font-size:16px;text-align:center;line-height:1.3}
.hfc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hfc-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);background:var(--chip);border-radius:8px;padding:5px 9px}
/* Team Feed — lock full screen, no double-tap zoom, cap notif, interact padding */
.fs,.fs-scroll{overflow-x:hidden;max-width:100vw}
.fs,.fs-bnav button,.fs-back,.fs-ic,.fp-rx,.fp-reply,.p-more,.rx{touch-action:manipulation}
.notif-pop{max-height:min(66vh,480px);overflow-y:auto}
.post .fp-bar{padding-left:13px;padding-right:13px}
.post .fp-reply-box{padding-left:15px;padding-right:15px}
/* ===== Instagram-exact posts (seamless) ===== */
.igp{display:block;background:transparent;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);margin:0 0 0 0;overflow:visible;padding:0 0 4px}
.feed-list{gap:0}
.ig-pin{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--accent);padding:9px 14px 0}
.ig-pin i{font-size:13px}
.ig-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig-ring{width:42px;height:42px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);flex:none}
.ig-ring .ig-ava{width:100%;height:100%;border-radius:50%;border:2px solid var(--card);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
:root[data-theme=dark] .ig-ring .ig-ava,.igp .ig-ring .ig-ava{border-color:var(--bg)}
.ig-hmeta{flex:1;min-width:0}
.ig-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ig-pos{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;padding:2px 6px;border-radius:4px}
.ig-sub{font-size:12px;color:var(--mut);margin-top:1px}
.ig-more{margin-left:auto;background:0;border:0;color:var(--txt);cursor:pointer;font-size:18px;padding:4px 8px;position:relative;line-height:1;align-self:flex-start;font-family:inherit}
.ig-menu{position:absolute;right:4px;top:30px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.3);min-width:158px;padding:6px;z-index:9;text-align:left}
.ig-menu.hidden{display:none}
.ig-menu button{display:block;width:100%;text-align:left;border:0;background:0;color:var(--txt);padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.ig-menu button:hover{background:var(--chip)}.ig-menu .del{color:#ed4956}
.ig-media{width:100%;background:#000;line-height:0}
.ig-media img{width:100%;height:auto;display:block;cursor:zoom-in}
.ig-hero{width:100%;min-height:min(115vw,480px);display:flex;align-items:center;justify-content:center;text-align:center;padding:34px 26px;font-size:clamp(20px,5.5vw,24px);font-weight:800;line-height:1.3;color:#fff;white-space:pre-wrap;word-break:break-word}
/* clean IG reactions (no pill frames) */
.igp .fp-bar{padding:9px 13px 2px;gap:15px;display:flex;align-items:center}
.igp .fp-rx,.igp .fp-reply{padding:0;border-radius:0;gap:5px;font-size:14px;font-weight:700}
.igp .fp-rx:hover,.igp .fp-reply:hover{background:transparent;color:var(--txt)}
.igp .fp-rx-e{font-size:23px}
.igp .fp-reply svg{width:25px;height:25px}
.ig-cap{padding:4px 14px 0;font-size:14px;line-height:1.45;word-break:break-word}
.ig-cap b{font-weight:700;margin-right:4px}
.igp .fp-reply-box{padding:9px 13px 2px;margin-top:6px;border-top:0}
.igp .fp-thread{padding:0 13px}
/* Feed overflow lock — stop the composer/media from pushing the layout wider than the screen */
.fs{overflow-x:hidden}
.fs-scroll>.feed-wrap,.feed-wrap,.feed-window,.igp,.fp-compose{max-width:100%;min-width:0}
.fp-compose-main{min-width:0;flex:1}
.fp-compose textarea{max-width:100%}
.ig-media,.ig-media img,.ig-hero{max-width:100%}
.ig-hmeta,.ig-name{min-width:0}
.igp{overflow-x:hidden}
/* dark-mode selected date number visible; remove reaction frames */
.sc-chip.sel .sc-chip-num,.sc-chip.sel .sc-chip-dow{color:#fff}
.igp .fp-rx,.igp .fp-reply,.igp .fp-rx.on,.igp .fp-rx[data-r="love"].on,.igp .fp-rx[data-r="celebrate"].on,.igp .fp-rx[data-r="like"].on{background:transparent!important;border:0;box-shadow:none;border-radius:0}
/* Selected date chip: soft accent fill + THEME-AWARE text (switches light/dark, always readable) */
.sc-chip.sel{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}
.sc-chip.sel .sc-chip-num{color:var(--txt)}
.sc-chip.sel .sc-chip-dow{color:var(--accent)}
.sc-chip.sel .sc-chip-dot{background:var(--accent)}
/* Instagram-clean reactions — no frame line, no boxes; ⋯ menu wrapper fix */
.igp .fp-bar{border-top:0!important;margin-top:0;padding:9px 13px 4px;gap:17px;display:flex;align-items:center}
.igp .fp-rx,.igp .fp-reply{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.igp .fp-rx.on,.igp .fp-rx[data-r="love"].on,.igp .fp-rx[data-r="celebrate"].on,.igp .fp-rx[data-r="like"].on{background:transparent!important}
.ig-morewrap{margin-left:auto;position:relative}
.ig-more{margin-left:0;position:static}
.ig-menu{right:0;top:32px}
/* Team Feed as a normal tab (keeps global bar) + fixed IG bottom nav */
.tf-body{padding-bottom:78px}
.tf-searchbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.tf-searchbar>i{color:var(--mut)}
.tf-searchbar input{flex:1;border:0;background:var(--chip);border-radius:20px;padding:9px 14px;font-size:15px;font-family:inherit;color:var(--txt);outline:none}
.tf-searchbar button{border:0;background:transparent;color:var(--mut);font-size:15px;cursor:pointer}
.tf-bnav{position:fixed;bottom:0;left:0;right:0;z-index:46;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);display:flex}
.tf-bnav button{flex:1;background:0;border:0;color:var(--mut);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;touch-action:manipulation}
.tf-bnav button.on{color:var(--accent)}
.tf-bnav button i{font-size:23px}
.tf-bnav .tf-create{color:var(--accent)}.tf-bnav .tf-create i{font-size:30px}
@media(min-width:1025px){.tf-bnav{max-width:var(--sidebar-w,0);left:auto;right:0;width:calc(100% - var(--sidebar-w,0))}}
/* Prevent iOS auto-zoom on focus (inputs must be >=16px) */
.fp-reply-in,.fp-compose textarea,#feed-text,.tf-searchbar input,.fs-searchbar input,.fp-poll-build input,.fp-comp-actions input{font-size:16px}
/* App-wide: never let iOS zoom on focus — every text field >=16px on touch widths */
@media(max-width:1024px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  textarea,select{font-size:16px!important}
}
/* Instagram photo carousel */
.ig-carousel{position:relative;width:100%;height:min(120vw,600px);background:#000;overflow:hidden}
.ig-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ig-track::-webkit-scrollbar{display:none}
.ig-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center}
.ig-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in}
.ig-cnt{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;pointer-events:none}
.ig-cdots{position:absolute;bottom:12px;left:0;right:0;text-align:center;pointer-events:none}
.ig-cdots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);margin:0 3px}
.ig-cdots i.on{background:#fff}
/* ===== Timesheet — Connecteam-style employee cards ===== */
.ts-kpis{margin-top:12px}
.ts-emp{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin-bottom:11px;box-shadow:var(--shadow)}
.ts-emp-h{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.ts-ava{width:38px;height:38px;border-radius:50%;flex:none;font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.ts-emp-id{min-width:0}
.ts-name{font-weight:700;font-size:15px;line-height:1.2}
.ts-pos{font-size:11.5px;color:var(--mut);margin-top:1px}
.ts-emp-tot{margin-left:auto;text-align:right;line-height:1.25;white-space:nowrap}
.ts-emp-tot b{font-size:19px}
.ts-ot{display:inline-block;margin-left:5px;font-size:11px;font-weight:800;color:#dc2626;background:rgba(220,38,38,.12);padding:1px 6px;border-radius:6px;vertical-align:middle}
.ts-cost{font-size:12px;color:var(--mut);font-weight:600;margin-top:1px}
.ts-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ts-day{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 3px 7px;text-align:center;min-width:0}
.ts-day-d{font-size:9.5px;color:var(--mut);text-transform:uppercase;font-weight:700;letter-spacing:.02em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-day-v{font-size:15px;font-weight:600;min-height:20px}
.ts-day-in{width:100%;text-align:center;border:0;background:transparent;font-weight:600;color:var(--txt);padding:1px 0;font-family:inherit;-moz-appearance:textfield;outline:none}
.ts-day-in::-webkit-outer-spin-button,.ts-day-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ts-day.edited{border-color:var(--accent);background:var(--accent-soft)}
.ts-day.edited .ts-day-in,.ts-day.edited .ts-day-v{color:var(--accent)}
@media(max-width:640px){.ts-days{grid-template-columns:repeat(4,1fr)}}
/* Time Off — Connecteam-style overview strip */
.to-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.to-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow)}
.to-stat-n{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.to-stat-l{font-size:12px;color:var(--mut);margin-top:5px;font-weight:600;line-height:1.2}
.to-stat.warn{border-color:#f59e0b}.to-stat.warn .to-stat-n{color:#f59e0b}
@media(max-width:640px){.to-sum{grid-template-columns:repeat(2,1fr)}}
/* Nav group headers (My Work / Manage) */
.nav-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:15px 14px 5px;opacity:.7}
.nav-group:first-child{padding-top:4px}
/* Nav must scroll instead of overflowing behind the module rail (flexbox min-height trap) */
#nav{min-height:0}
.mod-rail{flex-shrink:0;background:var(--ink)}
.side-foot{flex-shrink:0}
/* Timesheet clock in/out slider modal + tappable cells */
.ts-day-btn{width:100%;border:0;background:transparent;font-family:inherit;cursor:pointer;padding:1px 0;color:inherit;-webkit-tap-highlight-color:transparent}
.ts-day-btn:active{transform:scale(.94)}
.tsc-row{display:flex;align-items:center;justify-content:space-between}
.tsc-lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.tsc-time{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.tsc-slider{width:100%;margin:9px 0 0;accent-color:var(--accent);height:26px;cursor:pointer}
.tsc-total{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;font-weight:700}
.tsc-total b{font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums}
/* Timesheet per-employee week detail (drill-down) */
.ts-emp-open{width:100%;text-align:left;background:transparent;border:0;font-family:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:11px;padding:0;-webkit-tap-highlight-color:transparent}
.ts-emp-chev{margin-left:6px;color:var(--mut);font-size:18px;flex:none}
.tse-back{background:0;border:0;color:var(--accent);font-weight:700;font-size:14px;cursor:pointer;padding:12px 2px 8px;display:flex;align-items:center;gap:6px;font-family:inherit}
.tse-hero{margin-top:2px}
.tse-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.tse-day{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;font-family:inherit;color:var(--txt)}
.tse-day:disabled{cursor:default}
.tse-day.edited{border-color:var(--accent)}
.tse-dcol{text-align:center;flex:none;width:40px}
.tse-dow{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--mut);letter-spacing:.03em}
.tse-dnum{font-size:20px;font-weight:800;line-height:1;margin-top:1px}
.tse-times{flex:1;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tse-t{font-variant-numeric:tabular-nums}.tse-arr{color:var(--mut)}
.tse-h{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}.tse-h span{font-size:12px;font-weight:600;color:var(--mut)}
.tse-chev{color:var(--mut);font-size:18px;flex:none}
/* Native date/time pickers follow the app theme (month/year text visible in dark) */
:root[data-theme=dark] input[type=date],:root[data-theme=dark] input[type=month],:root[data-theme=dark] input[type=time]{color-scheme:dark}
:root[data-theme=light] input[type=date],:root[data-theme=light] input[type=month],:root[data-theme=light] input[type=time]{color-scheme:light}
@media(prefers-color-scheme:dark){input[type=date],input[type=month],input[type=time]{color-scheme:dark}}
/* ===== Team Feed desktop 3-column (IG-style) + Direct Messages ===== */
.tf-wrap{display:flex;justify-content:flex-start;gap:24px;align-items:flex-start;width:100%}
.tf-center{width:100%;max-width:600px;min-width:0}
.tf-left,.tf-right{display:none}
@media(min-width:1025px){
  .tf-center{max-width:470px}
  .tf-left{display:flex;flex-direction:column;gap:3px;width:190px;flex:none;position:sticky;top:16px}
  .tf-left .tf-nav{display:flex;align-items:center;gap:14px;padding:11px 14px;border:0;background:transparent;color:var(--txt);font-size:15px;font-weight:600;border-radius:12px;cursor:pointer;font-family:inherit;text-align:left}
  .tf-left .tf-nav i{font-size:23px}
  .tf-left .tf-nav:hover{background:var(--chip)}
  .tf-left .tf-nav.on{font-weight:800}
  .tf-right{display:flex;flex-direction:column;width:330px;flex:none;position:sticky;top:16px;height:calc(100vh - 96px);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
  .tf-bnav{display:none!important}
}
.dm-head{padding:14px 16px;font-weight:800;font-size:16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex:none}
.dm-list{flex:1;overflow-y:auto;min-height:0}
.dm-c{display:flex;align-items:center;gap:11px;width:100%;padding:10px 14px;border:0;background:transparent;cursor:pointer;font-family:inherit;text-align:left;color:var(--txt);border-bottom:1px solid var(--line2)}
.dm-c:hover{background:var(--chip)}
.dm-ava{width:42px;height:42px;border-radius:50%;flex:none;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;background-size:cover;background-position:center}
.dm-ava.sm{width:34px;height:34px;font-size:13px}
.dm-c-main{min-width:0;flex:1}
.dm-c-nm{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px}
.dm-badge{background:var(--accent);color:#fff;font-size:11px;font-weight:800;border-radius:10px;padding:0 6px;min-width:18px;text-align:center}
.dm-c-last{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dm-c.unread .dm-c-last{color:var(--txt);font-weight:600}
.dm-thead{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);flex:none}
.dm-back{background:0;border:0;color:var(--txt);font-size:20px;cursor:pointer;padding:2px 6px 2px 0;font-family:inherit}
.dm-tnm{font-weight:700;font-size:15px;line-height:1.2}.dm-tnm span{display:block;font-size:11.5px;color:var(--mut);font-weight:500}
.dm-msgs{flex:1;overflow-y:auto;min-height:0;padding:14px;display:flex;flex-direction:column;gap:7px}
.dm-b{max-width:80%;padding:8px 12px;border-radius:16px;font-size:14px;line-height:1.35;word-break:break-word}
.dm-b.them{align-self:flex-start;background:var(--chip);border-bottom-left-radius:5px}
.dm-b.me{align-self:flex-end;background:var(--accent);color:var(--accent-fg,#fff);border-bottom-right-radius:5px}
.dm-b.flagged{outline:2px solid #f59e0b;outline-offset:1px}
.dm-flag{margin-left:6px;font-size:12px;opacity:.9}
.dm-compose{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.dm-compose input{flex:1;border:1px solid var(--line);background:var(--bg);border-radius:20px;padding:9px 14px;font-size:16px;color:var(--txt);outline:none;font-family:inherit}
.dm-compose button{background:var(--accent);color:#fff;border:0;width:40px;height:40px;border-radius:50%;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
.dm-full{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column}
.dm-full-top{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:17px;font-weight:800;flex:none}
.dm-full-x{background:0;border:0;color:var(--txt);font-size:20px;cursor:pointer;font-family:inherit}
.dm-panel{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* Team Feed desktop: rail flush against the sidebar (kill #main left padding), DM to far right */
@media(min-width:1025px){
  #main:has(.tf-wrap){padding-left:0}
  .tf-left{padding-left:6px}
  .tf-right{margin-left:0}
}
/* Calendar day-of-week labels share the date grid so they line up exactly */
.an-cal-hdr{aspect-ratio:auto;text-align:center;font-size:10px;color:var(--mut2,#9ca3af);font-weight:700;display:flex;align-items:center;justify-content:center;padding-bottom:3px}
/* Timesheet commission entry */
.ts-comm{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px;box-shadow:var(--shadow)}
.ts-comm-h{font-weight:800;font-size:13px;display:flex;align-items:center;gap:7px;margin-bottom:11px}
.ts-comm-in{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ts-comm-in label{font-size:14px;font-weight:600}
.ts-comm-in input{width:90px;text-align:center;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:8px;font-size:16px;font-weight:700;color:var(--txt);font-family:inherit}
.ts-comm-tot{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.ts-comm-tot b{color:#16a34a;font-size:18px}
/* Commission packages editor (settings) */
.comm-add{margin-top:7px;font-size:13px;background:transparent;border:1px dashed var(--line);border-radius:9px;padding:7px 12px;color:var(--accent);cursor:pointer;font-weight:700;font-family:inherit}
.comm-pkg-row{display:flex;align-items:center;gap:6px;margin-top:7px}
.comm-pkg-row input{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:8px;font-size:15px;color:var(--txt);font-family:inherit}
.comm-pk-name{flex:1;min-width:0}.comm-pk-dollar{color:var(--mut);font-weight:700}.comm-pk-amt{width:82px;text-align:right}
.comm-pk-x{background:0;border:0;color:var(--mut);cursor:pointer;font-size:15px;padding:4px 6px;flex:none}
/* Home hub manager priorities banner */
.mp-banner{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:14px;box-shadow:var(--shadow)}
.mp-h{font-weight:800;font-size:12px;display:flex;align-items:center;gap:7px;margin-bottom:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.mp-task{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;border-left:4px solid;border-radius:10px;padding:11px 12px;margin-bottom:7px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--txt)}
.mp-task:last-child{margin-bottom:0}
.mp-task.yellow{background:rgba(245,158,11,.12);border-left-color:#f59e0b}
.mp-task.red{background:rgba(239,68,68,.14);border-left-color:#ef4444}
.mp-task>i:first-child{font-size:20px;flex:none}
.mp-lbl{flex:1;min-width:0}
.mp-note{font-size:10px;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:20px;white-space:nowrap;color:#fff}
.mp-task.yellow .mp-note{background:#f59e0b}.mp-task.red .mp-note{background:#ef4444}
.mp-chev{color:var(--mut);flex:none}
/* Timesheet 'All employees' back button — above the banner, green */
.tse-back-top{display:inline-flex;align-items:center;gap:6px;color:#16a34a;background:rgba(22,163,74,.12);border:0;border-radius:10px;padding:9px 14px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit;margin:2px 0 12px}
.tse-back-top:hover{background:rgba(22,163,74,.2)}
.comm-pk-warn{color:#f59e0b;font-size:16px;flex:none}
/* Guided-tour freeze: blocks all page interaction; only the tour card is live */
.tut-mask{position:fixed;inset:0;z-index:1490;pointer-events:auto;background:rgba(0,0,0,0.001);-webkit-tap-highlight-color:transparent;touch-action:none;cursor:default}
.tut-card{z-index:1600!important}
@keyframes tutNudge{0%,100%{box-shadow:var(--shadow-lg)}50%{box-shadow:0 0 0 3px var(--accent),var(--shadow-lg)}}
.tut-card.tut-nudge{animation:tutNudge .3s ease}
/* Profile & Settings — polished (matches app hero/card system) */
.pf-modal{position:relative}
.modal-card.pf-modal,.modal-card.emp-modal{overflow-x:hidden}   /* vertical scroll ok; NEVER a horizontal scrollbar (Jeff) */
.pf-hero{display:flex;align-items:center;gap:14px;padding:2px 42px 15px 0;margin-bottom:15px;border-bottom:1px solid var(--line)}
.pf-hid{min-width:0}
.pf-avatar{width:60px;height:60px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));box-shadow:var(--shadow)}
.pf-name{font-size:20px;font-weight:800;color:var(--txt);line-height:1.15}
.pf-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.pf-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.pf-badge.alt{background:rgba(120,124,134,.16);color:var(--mut)}
.pf-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px}
.pf-card-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:10px}
.pf-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.pf-qbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--txt);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;transition:background .12s,transform .12s}
.pf-qbtn:hover{background:var(--accent-soft);transform:translateY(-1px)}
.pf-qbtn i{font-size:21px;color:var(--accent)}
.pf-save{width:100%;margin-top:14px}
@media(max-width:420px){.pf-quick{grid-template-columns:1fr}.pf-qbtn{flex-direction:row;justify-content:flex-start;gap:11px;padding:12px 14px}}
/* Edit-user modal — polished sections */
.emp-modal{max-height:90vh;overflow-y:auto}
.emp-modal .pf-card{margin-bottom:12px}
.emp-modal .pf-card:last-of-type{margin-bottom:0}
.emp-checks{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.emp-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.emp-modal .m-sites-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
/* Commissions report (Reports → Commissions) */
.rp-per{padding:7px 11px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-family:inherit;font-size:13px}
.cm-grand{font-size:15px;padding:12px 15px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.cm-grand b{font-size:19px;color:var(--accent)}
.cm-site{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.cm-site-h{display:flex;align-items:center;gap:11px;width:100%;padding:14px 15px;border:0;background:none;cursor:pointer;font-family:inherit;color:var(--txt)}
.cm-chev{transition:transform .15s;color:var(--mut);flex:none;font-size:17px}
.cm-site-h.open .cm-chev{transform:rotate(90deg)}
.cm-site-name{font-weight:800;font-size:15px}
.cm-site-tot{margin-left:auto;font-weight:800;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
.cm-site-n{font-size:12px;min-width:66px;text-align:right}
.cm-people{border-top:1px solid var(--line)}
.cm-person{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line)}
.cm-person:last-child{border-bottom:0}
.cm-p-l{min-width:0;flex:1}
.cm-p-name{font-weight:600;font-size:14px}
.cm-p-sub{font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-p-amt{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;flex:none}
.cm-unmatched{font-size:10px;font-weight:700;color:var(--mut);background:rgba(120,124,134,.16);padding:1px 6px;border-radius:10px}
@media(max-width:600px){.cm-site-n{display:none}.cm-p-sub{white-space:normal}}
/* Edit-user: solid red delete + scalable searchable site picker */
.emp-actions .danger{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important}
.emp-actions .danger:hover{background:var(--danger)!important;filter:brightness(1.08)}
.ms2-hidden{display:none}
.ms2-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ms2-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600;padding:5px 10px;border-radius:20px;cursor:pointer}
.ms2-chip i{font-size:13px;opacity:.7}
.ms2-chip:hover{background:var(--danger);color:#fff}
.ms2-empty{font-size:13px;color:var(--mut)}
.ms2-search{width:100%;margin:4px 0 6px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--txt);font-family:inherit;font-size:14px}
.ms2-list{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow-y:auto}
.ms2-add{background:var(--card);border:1px solid var(--line);color:var(--txt);font-size:13px;padding:6px 10px;border-radius:8px;cursor:pointer;font-family:inherit}
.ms2-add:hover{background:var(--accent-soft);border-color:var(--accent)}
.ms2-bulk{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:12.5px}
.ms2-bulk button{background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer;font-family:inherit;padding:2px 0}
.ms2-count{margin-left:auto;color:var(--mut)}
/* Reports view switcher — dropdown (scales past a button row) */
.rp-nav{display:inline-flex;align-items:center;gap:8px;position:relative;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:0 34px 0 12px;margin-bottom:14px}
.rp-nav-ic{color:var(--accent);font-size:16px;flex:none}
.rp-nav .rp-select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--txt);font-family:inherit;font-weight:700;font-size:14px;padding:11px 4px 11px 0;cursor:pointer;outline:none}
.rp-nav-chev{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:16px;pointer-events:none}
.rp-nav:hover{border-color:var(--accent)}
/* Time Off Insights (Reports → Time Off) */
.toi-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:11px}
.toi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.toi-name{font-weight:800;font-size:15px}
.toi-sub{font-size:12px;margin-top:2px}
.toi-dow{display:flex;gap:3px;align-items:flex-end;height:44px;flex:none}
.toi-dow-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:15px;gap:2px}
.toi-dow-bar{width:100%;min-height:2px;background:var(--accent);border-radius:2px;opacity:.85}
.toi-dow-col span{font-size:8px;color:var(--mut)}
.toi-ins{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.toi-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px}
.toi-badge.warn{background:rgba(245,158,11,.16);color:#b45309}
.toi-badge.info{background:var(--accent-soft);color:var(--accent)}
.toi-badge i{font-size:13px}
@media(prefers-color-scheme:dark){.toi-badge.warn{color:#fbbf24}}
:root[data-theme="dark"] .toi-badge.warn{color:#fbbf24}
:root[data-theme="light"] .toi-badge.warn{color:#b45309}
/* Design scheme: close (X) pinned top-right on pf-modal dialogs (profile, edit-user) — sticky so it survives scroll */
.pf-modal .modal-x{position:absolute;top:14px;right:14px;z-index:8;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;padding:0;font-size:19px;background:var(--card)!important;box-shadow:0 2px 8px rgba(0,0,0,.16);border:1px solid var(--line)!important;color:var(--mut);border-radius:9px}
.pf-modal .modal-x:hover{background:var(--line)!important;color:var(--txt)}
/* Checklist card meta (due-by / overdue line) — truncate instead of bleeding right */
.cl-card-meta{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-card-meta .cl-od-lbl,.cl-card-meta .cl-done-lbl,.cl-card-meta .cl-inc-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* ChecklistIQ — pass/fail/critical: fix highlight (beats ID-inflated base rule) + press feedback + pop */
.cl-seg button{transition:background .14s,color .14s,transform .08s ease;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.cl-seg button i{font-size:14px}
.cl-seg button.on.seg-pass{background:var(--ok)!important;color:#fff!important}
.cl-seg button.on.seg-fail{background:var(--warn)!important;color:#fff!important}
.cl-seg button.on.seg-critical{background:var(--danger)!important;color:#fff!important}
.cl-seg button.on{box-shadow:inset 0 1px 3px rgba(0,0,0,.2);animation:segpop .24s ease}
.cl-seg button:active{transform:scale(.92)}
@keyframes segpop{0%{transform:scale(.86)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
/* answered inspection row gets a colored status stripe */
.cl-insp{transition:box-shadow .18s,background .18s}
.cl-insp:has(.seg-pass.on){box-shadow:inset 3px 0 0 var(--ok);background:linear-gradient(90deg,rgba(10,157,87,.05),transparent 60%)}
.cl-insp:has(.seg-fail.on){box-shadow:inset 3px 0 0 var(--warn);background:linear-gradient(90deg,rgba(224,168,0,.06),transparent 60%)}
.cl-insp:has(.seg-critical.on){box-shadow:inset 3px 0 0 var(--danger);background:linear-gradient(90deg,rgba(220,53,69,.06),transparent 60%)}
/* Site selector: show the FULL selected site name (don't over-truncate); topbar stays compact */
.site-sel select{min-width:max-content}
#topbar .site-sel select{min-width:0}
/* ChecklistIQ Fill-view hero — accent gradient + progress ring + completion celebration */
.cl-fill-hero{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));border:0;border-radius:16px;padding:15px 17px;margin:0 0 14px;box-shadow:var(--shadow-lg);overflow:hidden;transition:background .45s ease}
.clh-main{display:flex;align-items:center;gap:13px}
.clh-kind{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.clh-txt{flex:1;min-width:0}
.clh-name{font-family:var(--display);font-weight:800;font-size:18px;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clh-meta{font-size:12.5px;color:rgba(255,255,255,.86);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clh-hint{font-size:12px;color:rgba(255,255,255,.92);margin-top:6px;line-height:1.35;max-width:52ch;display:flex;gap:5px;align-items:flex-start}
.clh-hint i{opacity:.9;margin-top:1px;flex:none}
/* Audit-mode submission: missing / all-present summary banner */
.cl-miss-banner{display:flex;align-items:center;gap:8px;margin:2px 0 14px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.4;background:rgba(220,38,38,.09);border:1px solid rgba(220,38,38,.28);color:var(--txt,#111)}
.cl-miss-banner i{color:#dc2626;font-size:17px;flex:none}
.cl-miss-banner.ok{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.28)}
.cl-miss-banner.ok i{color:#16a34a}
/* Fill hero footer — site selector bottom-left, checklist + date bottom-right */
.clh-foot{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.clh-sitesel{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:5px 8px 5px 11px;min-width:0;max-width:60%;transition:background .15s}
.clh-sitesel:hover{background:rgba(255,255,255,.27)}
.clh-sitesel>i{font-size:13px;color:#fff;opacity:.9;flex:none}
.clh-sitesel select{background:transparent;border:none;color:#fff;font-size:12.5px;font-weight:700;padding:1px 2px;max-width:100%;min-width:0;text-overflow:ellipsis;cursor:pointer;-webkit-appearance:none;appearance:none}
.clh-foot-r{display:flex;gap:8px;margin-left:auto;min-width:0}
.clh-sel{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:9px;padding:6px 10px;font-size:12.5px;font-weight:600;max-width:170px;min-width:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.clh-sel.clh-date{max-width:150px}
.clh-foot select option{color:#111}
/* Custom dropdown chevron for the site + checklist selectors (appearance:none removed the native one) */
.clh-sitesel select,#cl-tpl2.clh-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;padding-right:23px}
.clh-sitesel{padding-right:4px}
/* Unified ChecklistIQ accent hero (every screen) */
.clx-hero{background:linear-gradient(135deg,var(--accent,#2563eb),color-mix(in srgb,var(--accent,#2563eb) 62%,#000));color:#fff;border-radius:18px;padding:16px 20px;margin-bottom:18px;box-shadow:0 12px 30px -14px color-mix(in srgb,var(--accent,#2563eb) 70%,#000);animation:clHeroIn .45s cubic-bezier(.2,.8,.3,1)}
.clx-hero-head{display:flex;align-items:center;gap:15px}
.clx-hero-ic{flex:none;width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:24px}
.clx-hero-txt{flex:1;min-width:0}
.clx-hero.has-controls .clx-hero-controls{margin-top:14px}
.clx-hero-title{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.1}
.clx-hero-sub{font-size:13px;opacity:.88;margin-top:3px}
.clx-hero-stat{flex:none;text-align:right;line-height:1.05}
.clx-hero-stat b{font-size:24px;font-weight:800;display:block}
.clx-hero-stat span{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.04em}
.clx-hero-controls{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.clx-hero-cbtn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);color:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
.clx-hero-cbtn:hover{background:rgba(255,255,255,.28)}
.clx-hero-site{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:7px 10px 7px 12px;transition:background .15s}
.clx-hero-site:hover{background:rgba(255,255,255,.27)}
.clx-hero-site>i{color:#fff;opacity:.9;font-size:15px}
.clx-hero-site select{background:transparent;border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:19px;max-width:min(70vw,320px);text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.clx-hero-site select option{color:#111}
.clx-hero-acts{flex:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.clx-hero-acts button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:background .14s,transform .08s}
.clx-hero-acts button:hover{background:rgba(255,255,255,.28)}
.clx-hero-acts button:active{transform:scale(.96)}
.clx-hero-acts button.primary{background:#fff;color:var(--accent-d,#1d4ed8);border-color:#fff}
.clx-hero-acts button.primary:hover{background:rgba(255,255,255,.9)}
@media(max-width:600px){.clx-hero{padding:15px 16px}.clx-hero-head{flex-wrap:wrap}.clx-hero-title{font-size:19px}.clx-hero-acts{width:100%;justify-content:stretch}.clx-hero-acts button{flex:1}}
/* Oversight deadline config rows */
.cov-due-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line,#eef0f2)}
.cov-due-lbl{flex:1;min-width:180px;display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--txt,#334155)}
.cov-due-lbl i{color:var(--accent,#2563eb)}
.cov-due-row select,.cov-due-row input[type=time]{padding:7px 10px;border:1px solid var(--line,#e5e7eb);border-radius:9px;background:var(--card,#fff);font-weight:600;font-size:13px}
/* Living section cards (Fill) — type icon, per-section progress, green done-state */
#cl-form-body .cl-sec{padding:0;border-radius:16px;overflow:hidden;transition:border-color .28s,box-shadow .28s}
.cl-sec-head{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line2,#eef0f2);background:var(--bg,#fafbfc)}
.cl-sec-ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:17px;transition:background .28s,color .28s}
.cl-sec-head h3{border:none!important;margin:0!important;padding:0!important;font-size:15px;font-family:var(--display);flex:1;min-width:0}
.cl-sec-prog{flex:none;font-size:11.5px;font-weight:800;color:var(--mut,#64748b);background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:999px;padding:3px 10px;transition:background .28s,color .28s,border-color .28s;white-space:nowrap}
.cl-sec-prog:empty{display:none}
.cl-sec-prog.done{background:rgba(22,163,74,.14);color:#15803d;border-color:transparent}
.cl-sec-body{padding:12px 15px 14px}
#cl-form-body .cl-sec.done{border-color:#86efac;box-shadow:0 6px 18px -10px rgba(22,163,74,.5)}
.cl-sec.done .cl-sec-head{background:rgba(22,163,74,.08)}
.cl-sec.done .cl-sec-ic{background:rgba(22,163,74,.16);color:#15803d}
/* Fill micro-interactions — subtle, with a reduced-motion guard */
.cl-task{position:relative;overflow:hidden}
.cl-task.done::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#16a34a;transform-origin:top;animation:clTaskBar .28s ease}
#cl-form-body .cl-sec.done{animation:clSecPop .45s cubic-bezier(.2,1.3,.4,1)}
.cl-pf button.on,.cl-seg button.on{animation:clPfPop .3s cubic-bezier(.2,1.4,.5,1)}
.cl-thumb{animation:clThumbPop .3s cubic-bezier(.2,1.3,.5,1)}
.cl-sec-ic{will-change:transform}.cl-sec.done .cl-sec-ic{animation:clPfPop .4s cubic-bezier(.2,1.4,.5,1)}
@keyframes clTaskBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes clSecPop{0%{transform:scale(1)}42%{transform:scale(1.014)}100%{transform:scale(1)}}
@keyframes clPfPop{0%{transform:scale(.92)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes clThumbPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.cl-task.done::before,#cl-form-body .cl-sec.done,.cl-pf button.on,.cl-seg button.on,.cl-thumb,.cl-sec.done .cl-sec-ic{animation:none}}
/* On Demand rows — match the tactile hover/press of the other list cards */
.od-card{transition:transform .12s,box-shadow .16s,border-color .16s;animation:clCardIn .3s backwards}
.od-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.od-card:active{transform:scale(.985)}
@media(max-width:520px){.clh-foot-r{width:100%;margin-left:0}.clh-foot-r .clh-sel{flex:1}.clh-sitesel{max-width:100%}}
.clh-ring{--p:0;position:relative;width:54px;height:54px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0);transition:background .45s ease}
.clh-ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:rgba(0,0,0,.24)}
.clh-pct{position:relative;z-index:1;font-size:13px;font-weight:800;color:#fff}
.clh-ring-check{position:relative;z-index:1;color:#fff;font-size:26px;display:none}
.cl-fill-track{height:6px;border-radius:20px;background:rgba(255,255,255,.24);overflow:hidden;margin-top:13px}
.cl-fill-bar{height:100%;border-radius:20px;background:#fff;width:0;transition:width .45s cubic-bezier(.4,0,.2,1)}
.cl-fill-hero.done{background:linear-gradient(135deg,#16a34a,#0e7a35);animation:clDonePulse .5s ease}
.cl-fill-hero.done .clh-ring{background:#fff}
.cl-fill-hero.done .clh-ring::before{background:#0e7a35}
.cl-fill-hero.done .clh-pct{display:none}
.cl-fill-hero.done .clh-ring-check{display:block;animation:clCheckPop .42s cubic-bezier(.2,1.5,.5,1)}
@keyframes clCheckPop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
@keyframes clDonePulse{0%{transform:scale(1)}45%{transform:scale(1.012)}100%{transform:scale(1)}}
.clh-confetti{position:absolute;top:38px;right:40px;width:0;height:0;pointer-events:none;z-index:5}
.clc-p{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;animation:clConfetti .75s ease-out forwards}
@keyframes clConfetti{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.35) rotate(220deg)}}
/* ChecklistIQ Overview cards — status chips, due-time, micro-interactions */
.cl-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;white-space:normal;overflow:visible}
.cl-status{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12px}
.cl-status i{font-size:14px}
.cl-st-done .cl-status{color:#16a34a}
.cl-st-inc .cl-status{color:#d97706}
.cl-st-overdue .cl-status{color:#dc2626}
.cl-st-soon .cl-status{color:#b45309}
.cl-st-prog .cl-status{color:var(--accent)}
.cl-st-new .cl-status{color:var(--mut)}
.cl-prog-txt{font-size:11.5px;font-weight:700;color:var(--mut);background:var(--bg);padding:2px 8px;border-radius:20px}
.cl-due-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.cl-due-chip i{font-size:12px}
.cl-due-chip.cl-due-soon{background:rgba(245,158,11,.16);color:#b45309}
.cl-due-chip.cl-due-over{background:rgba(220,38,38,.14);color:#dc2626}
.cl-site-tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--mut)}
.cl-site-tag i{font-size:12px}
.cl-card.cl-st-soon{border-color:rgba(245,158,11,.4)}
.cl-card.cl-st-soon .cl-card-ic{background:rgba(245,158,11,.13);color:#d97706}
.cl-card.cl-st-soon .cl-card-ring{background:conic-gradient(#f59e0b calc(var(--p)*1%),var(--line,#eef0f2) 0)}
.cl-card.cl-st-prog .cl-card-ring{background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line,#eef0f2) 0)}
@keyframes clCardIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.cl-card{animation:clCardIn .34s cubic-bezier(.4,0,.2,1) backwards;animation-delay:calc(var(--i,0)*32ms)}
.cl-card:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.cl-card{animation:none}}
/* ChecklistIQ dashboard hero — entrance + touch polish */
.cl-hero{animation:clHeroIn .5s cubic-bezier(.2,.8,.3,1)}
@keyframes clHeroIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cl-hero-greet i{margin-right:7px;opacity:.92;font-size:.92em}
.cl-hero-ring{animation:clRingIn .7s cubic-bezier(.2,1,.3,1) .1s backwards}
@keyframes clRingIn{from{transform:scale(.82) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
/* iOS touch — bigger tap targets + press feedback across the fill screen */
.cl-task{min-height:46px;padding:11px 6px;border-radius:10px;transition:background .12s,transform .07s ease;-webkit-tap-highlight-color:transparent}
.cl-task:active{background:var(--accent-soft);transform:scale(.99)}
.cl-task input[type=checkbox]{width:24px;height:24px;flex:0 0 auto}
.cl-task.done{background:linear-gradient(90deg,rgba(22,163,74,.07),transparent 70%)}
.cl-check input{width:24px;height:24px}
.cl-insp{padding:14px 6px;border-radius:10px}
.cl-photo-btn{min-height:44px;transition:transform .08s ease,background .12s;-webkit-tap-highlight-color:transparent}
.cl-photo-btn:active{transform:scale(.95)}
.cl-submit-bar button,#cl-submit{min-height:52px;font-size:15px;border-radius:13px;transition:transform .08s ease,filter .1s}
.cl-submit-bar button:active,#cl-submit:active{transform:scale(.985)}
.an-controls select,.an-controls input,#cl-tpl2,#cl-site,#cl-date,.cl-dash-sitesel{min-height:44px;-webkit-tap-highlight-color:transparent}
/* Checklist History — timeline card list */
.cl-hist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cl-hist-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 15px;cursor:pointer;font-family:inherit;transition:transform .1s,box-shadow .15s,border-color .15s;animation:clCardIn .3s backwards}
.cl-hist-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.cl-hist-row:active{transform:scale(.99)}
.cl-hr-dot{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px}
.cl-hr-done .cl-hr-dot{background:rgba(22,163,74,.13);color:#16a34a}
.cl-hr-inc .cl-hr-dot{background:rgba(217,119,6,.13);color:#d97706}
.cl-hr-open .cl-hr-dot{background:var(--accent-soft);color:var(--accent)}
.cl-hr-main{flex:1;min-width:0}
.cl-hr-top{display:flex;align-items:center;gap:9px}
.cl-hr-top b{font-size:14.5px;color:var(--txt)}
.cl-hr-st{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;text-transform:capitalize;white-space:nowrap}
.cl-hrst-done{background:rgba(22,163,74,.13);color:#15803d}
.cl-hrst-inc{background:rgba(217,119,6,.14);color:#b45309}
.cl-hrst-open{background:var(--accent-soft);color:var(--accent)}
.cl-hr-meta{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-hr-arr{color:var(--mut);flex:none}
/* Corrective Actions — status stripe + timeline thread + press */
.ca-card{border-left:3px solid var(--line);transition:box-shadow .15s,transform .1s;animation:clCardIn .3s backwards}
.ca-card.crit{border-left-color:var(--danger)}
.ca-card.over{border-left-color:#dc2626;box-shadow:0 0 0 1px rgba(220,38,38,.16)}
.ca-card:hover{box-shadow:var(--shadow-lg)}
.ca-thread{border-left:2px solid var(--line);padding-left:14px;margin:11px 0;display:flex;flex-direction:column;gap:9px}
.ca-cmt{position:relative}
.ca-cmt::before{content:'';position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--card)}
.ca-actions button{min-height:40px;transition:transform .08s ease}
.ca-actions button:active{transform:scale(.96)}
/* Fill-view completion: sticky hero offset below topbar (≤1024 page-scroll), confetti visible, always-reachable Submit */
.cl-fill-hero{overflow:visible}
@media(max-width:1024px){.cl-fill-hero{top:64px;z-index:22}}
.cl-fill-wrap .cl-submit-bar{position:sticky;bottom:14px;z-index:16;margin-top:18px;display:flex;justify-content:center}
.cl-fill-wrap .cl-submit-bar button,.cl-fill-wrap #cl-submit{box-shadow:0 10px 26px -8px rgba(0,0,0,.35);min-width:min(92%,420px)}
.cl-fill-wrap .cl-submit-bar.ready button,.cl-fill-wrap .cl-submit-bar.ready #cl-submit{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important;animation:clSubmitPop .42s cubic-bezier(.2,1.4,.5,1)}
@keyframes clSubmitPop{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
/* Mobile: sticky breaks under overflow-clip ancestors (iOS) — use fixed banner below the topbar instead */
@media(max-width:1024px){
  /* Global topbar stays FIXED on mobile everywhere (sticky breaks under overflow-clip ancestors on iOS) */
  #topbar{position:fixed;top:0;left:0;right:0;z-index:45}
  #main{padding-top:70px}
  /* Fill-view progress banner sits flush right below the fixed topbar */
  .cl-fill-hero{position:fixed;top:60px;left:0;right:0;margin:0;border-radius:0 0 16px 16px;z-index:30;box-shadow:0 10px 20px -10px rgba(0,0,0,.4)}
  .cl-fill-wrap{padding-top:150px}   /* fallback; clSyncHeroPad() sets the exact height at runtime */
}
/* Checklist multi-position assignment — role chips */
.cl-visto{display:block;margin-bottom:11px}
.cl-visto>span{font-size:12.5px;font-weight:600;display:block;margin-bottom:5px}
.cl-roles{display:flex;flex-wrap:wrap;gap:6px}
.cl-rchk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:5px 11px;border:1px solid var(--line);border-radius:20px;cursor:pointer;background:var(--card);color:var(--txt);transition:background .12s,border-color .12s}
.cl-rchk input{width:15px;height:15px;margin:0;flex:none}
.cl-rchk.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
/* Mobile: Submit is a FIXED bottom CTA (always reachable; sticky broken by overflow-clip ancestors) */
@media(max-width:1024px){
  .cl-fill-wrap{padding-bottom:90px}
  .cl-fill-wrap .cl-submit-bar{position:fixed;bottom:0;left:0;right:0;margin:0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:var(--card);box-shadow:0 -7px 22px -8px rgba(0,0,0,.3);z-index:35;justify-content:stretch}
  .cl-fill-wrap .cl-submit-bar button,.cl-fill-wrap #cl-submit{width:100%;min-width:0;max-width:none}
}
/* Manage assignment — aligned role grid + scalable searchable site picker */
.cl-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:6px}
.cl-rchk{justify-content:flex-start}
.cl-asg-tools{display:flex;gap:6px;align-items:center;margin:2px 0 7px;flex-wrap:wrap}
.cl-asg-search{flex:1;min-width:120px;padding:6px 10px;font-size:13px}
.cl-asg-all,.cl-asg-none{padding:5px 11px;font-size:12px;min-height:0}
.cl-asg-count{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;margin-left:auto}
.cl-assign{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px 12px;max-height:210px;overflow:auto;padding:2px;border:1px solid var(--line);border-radius:10px}
.cl-assign label{display:flex;align-items:center;gap:7px;font-size:13px;padding:4px 4px;cursor:pointer;border-radius:6px}
.cl-assign label:hover{background:var(--accent-soft)}
.cl-assign label input{flex:none;width:16px;height:16px}
/* ChecklistIQ urgent requests — dashboard cards + Manage button */
/* Dashboard "Awaiting your approval" cards (New Hire Approval etc.) */
.cl-appr-sec{margin:14px 0}
.cl-appr-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.03));border:1px solid rgba(37,99,235,.4);border-radius:13px;padding:13px 15px;cursor:pointer;font-family:inherit;margin-bottom:8px;transition:transform .1s,box-shadow .15s;animation:clCardIn .3s backwards}
.cl-appr-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(0,0,0,.3)}
.cl-appr-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent,#2563eb);color:#fff;font-size:20px}
.cl-appr-main{flex:1;min-width:0}
.cl-appr-name{font-weight:700;font-size:14.5px;color:var(--txt)}
.cl-appr-meta{font-size:12px;color:var(--mut);margin-top:2px}
.cl-appr-pill{flex:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--accent,#2563eb);border-radius:999px;padding:4px 11px}
/* Form-submission viewer (incident / new-hire etc.) — readable chain, signature & drawing images, clean header */
.clfv-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.clfv-head-txt{flex:1 1 260px;min-width:0}
.clfv-head-btns{flex:none;display:flex;gap:8px;flex-wrap:wrap}
.clfv-img{max-width:min(100%,320px);max-height:220px;border:1px solid var(--line);border-radius:8px;background:#fff;object-fit:contain;display:inline-block;margin:2px 4px 2px 0}
.clfv-chain{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.clfv-step{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg,#fafbfc)}
.clfv-step.done{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.05)}
.clfv-step.cur{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.06)}
.clfv-step-ic{flex:none;font-size:22px;color:var(--mut2,#9ca3af)}
.clfv-step.done .clfv-step-ic{color:#16a34a}
.clfv-step.cur .clfv-step-ic{color:#d97706}
.clfv-step-main{flex:1;min-width:0}
.clfv-step-main b{display:block;font-size:14px}
.clfv-step-main span{font-size:12px;color:var(--mut)}
.clfv-sig{flex:none;max-height:44px;max-width:130px;border:1px solid var(--line);border-radius:6px;background:#fff;object-fit:contain}
.cl-urgent-sec{margin:14px 0}
.cl-urgent-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(135deg,rgba(245,158,11,.13),rgba(245,158,11,.03));border:1px solid rgba(245,158,11,.42);border-radius:13px;padding:13px 15px;cursor:pointer;font-family:inherit;margin-bottom:8px;transition:transform .1s,box-shadow .15s;animation:clCardIn .3s backwards}
.cl-urgent-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.cl-urgent-card:active{transform:scale(.99)}
.cl-urgent-card.over{border-color:#dc2626;background:linear-gradient(135deg,rgba(220,38,38,.13),rgba(220,38,38,.03))}
.cl-urg-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:#f59e0b;color:#fff;font-size:20px}
.cl-urgent-card.over .cl-urg-ic{background:#dc2626}
.cl-urg-main{flex:1;min-width:0}
.cl-urg-name{font-weight:700;font-size:14.5px;color:var(--txt)}
.cl-urg-meta{font-size:12px;color:var(--mut);margin-top:2px}
.cl-urg-over{color:#dc2626}
.cl-urg-arr{color:var(--mut);flex:none}
.cl-urgent-btn{background:rgba(245,158,11,.15)!important;color:#b45309!important;border-color:rgba(245,158,11,.5)!important}
/* Home hub — Weather & Staffing (managers+) */
.hub-wx h4 i{color:var(--accent)}
.hub-wx-site{margin-top:10px}
.hub-wx-site+.hub-wx-site{border-top:1px solid var(--line);padding-top:12px}
.hub-wx-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.hub-wx-head b{font-size:14px}
.hub-wx-sum{font-size:12px;font-weight:700;display:inline-flex;align-items:center}
.hub-wx-sum.cut{color:#b45309}
.hub-wx-sum.ok{color:#16a34a}
.hub-wx-sum.sev{color:#dc2626}
.hub-wx-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hub-wx-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 3px;border-radius:11px;border:1px solid var(--line);background:var(--card);text-align:center;min-width:0}
.hub-wx-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.hub-wx-day.cut{background:linear-gradient(160deg,rgba(245,158,11,.14),rgba(245,158,11,.03));border-color:rgba(245,158,11,.45)}
.wxd-dow{font-size:11px;font-weight:700;color:var(--mut)}
.hub-wx-day.today .wxd-dow{color:var(--accent)}
.wxd-ic{font-size:22px;color:var(--txt);margin:1px 0}
.hub-wx-day.cut .wxd-ic{color:#d97706}
.wxd-temp{font-size:13.5px;font-weight:800}
.wxd-precip{font-size:10.5px;color:#2563eb;font-weight:600;min-height:13px}
.wxd-rec{margin-top:2px}
.wxd-cut{font-size:11.5px;font-weight:800;color:#b45309;background:rgba(245,158,11,.16);padding:1px 7px;border-radius:20px}
.wxd-min{font-size:10px;font-weight:800;color:#b45309;background:rgba(245,158,11,.14);padding:1px 6px;border-radius:20px}
.wxd-ok{font-size:11px;font-weight:700;color:#16a34a}
.hub-wx-tips{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.hub-wx-tip{font-size:12.5px;color:var(--txt);background:var(--bg);border-radius:9px;padding:7px 10px;line-height:1.4}
.hub-wx-tip i{color:#f59e0b}
@media(max-width:520px){.wxd-ic{font-size:19px}.wxd-temp{font-size:12.5px}.hub-wx-week{gap:4px}.hub-wx-day{padding:7px 2px}}
/* ChecklistIQ anti-gaming warning */
.clrush-card{max-width:min(92vw,400px);text-align:center}
.clrush-ic{width:66px;height:66px;border-radius:50%;background:rgba(245,158,11,.15);color:#f59e0b;display:flex;align-items:center;justify-content:center;font-size:34px;margin:2px auto 0;animation:clCheckPop .4s cubic-bezier(.2,1.5,.5,1)}
.clrush-p{color:var(--mut);font-size:14px;line-height:1.55;margin:0 0 18px}
.clrush-card #clrush-ok{width:100%}
.clrush-ic.hard{background:rgba(220,38,38,.14);color:#dc2626}
.cls-rush-days{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#eef0f2);font-size:13.5px;color:var(--txt,#334155);font-weight:600}
.cls-rush-days i{color:var(--accent,#2563eb)}
.cls-rush-days input{width:56px;padding:6px 8px;border:1px solid var(--line,#e5e7eb);border-radius:8px;text-align:center;font-weight:700;background:var(--card,#fff)}
/* Position/Pay change requests + approvals */
.pr-change{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--bg,#f8fafc);border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:12px 14px}
.pr-fromto,.pa-fromto{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.pr-from,.pa-fromto .pr-from{color:var(--mut,#64748b)}
.pr-to,.pa-fromto .pr-to{color:var(--accent-d,#1d4ed8)}
.pr-fromto i,.pa-fromto i{color:var(--mut2,#9ca3af)}
.pa-sec-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut,#64748b);margin:14px 0 8px}
.pa-card{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid var(--line,#e5e7eb);border-radius:13px;padding:12px 14px;margin-bottom:9px;background:var(--card,#fff)}
.pa-top{display:flex;gap:11px;align-items:flex-start;flex:1;min-width:0}
.pa-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:19px}
.pa-main{min-width:0;flex:1}
.pa-fromto{font-size:14px;margin-top:2px}
.pa-meta{font-size:12px;margin-top:3px}
.pa-reason{font-size:12.5px;color:var(--txt,#334155);margin-top:5px;font-style:italic}
.pa-acts{display:flex;gap:8px;margin-left:auto}
.pa-acts button{padding:8px 15px;border-radius:9px}
.pa-deny{border:1px solid var(--danger,#dc2626);color:var(--danger,#dc2626);background:transparent}
.pa-approved{border-color:#86efac;background:rgba(22,163,74,.05)}
.pa-denied{opacity:.6}
.pa-approved .pa-ic{background:rgba(22,163,74,.15);color:#15803d}
.pa-settings{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg,#f8fafc);border:1px solid var(--line,#e5e7eb);border-radius:11px;padding:9px 13px;margin-bottom:6px;font-size:13px;font-weight:600}
.pa-set-row{display:inline-flex;align-items:center;gap:6px}
.pa-settings{display:block}
.pa-settings-h{font-size:12px;font-weight:700;color:var(--mut,#64748b);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pa-setrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line,#eef0f2)}
.pa-setname{min-width:64px;font-size:13.5px}
.pa-ladder{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pa-arrow{color:var(--mut2,#9ca3af);font-size:14px}
.pa-step{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);border-radius:999px;padding:4px 6px 4px 11px;font-size:12.5px;font-weight:700}
.pa-step-x{border:none;background:rgba(0,0,0,.08);color:inherit;width:17px;height:17px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.pa-step-x:hover{background:var(--danger,#dc2626);color:#fff}
.pa-addstep{border:1px dashed var(--line2,#cbd5e1);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;background:var(--card,#fff);color:var(--mut,#64748b);cursor:pointer}
.pa-log{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pa-logitem{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--mut,#64748b);background:var(--bg,#f1f5f9);border-radius:999px;padding:2px 9px}
.pa-logitem.approved{color:#15803d;background:rgba(22,163,74,.12)}
.pa-logitem.denied{color:#b91c1c;background:rgba(220,38,38,.1)}
.cls-critassign{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#eef0f2);font-size:13.5px;color:var(--txt,#334155);font-weight:600}
.cls-critassign i{color:var(--accent,#2563eb)}
.cls-critassign select{padding:7px 10px;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:var(--card,#fff);font-weight:600;max-width:100%}
.ca-cmt-photo{max-width:160px;border-radius:8px;border:1px solid var(--line,#e5e7eb);margin-top:5px;display:block}
/* CoverageIQ oversight home — hero banner + completion trackers */
.ov-hero{background:linear-gradient(135deg,var(--accent,#2563eb),color-mix(in srgb,var(--accent,#2563eb) 60%,#000));color:#fff;border-radius:20px;padding:18px 22px;margin:4px 0 18px;box-shadow:0 14px 34px -16px color-mix(in srgb,var(--accent,#2563eb) 75%,#000);animation:clHeroIn .45s cubic-bezier(.2,.8,.3,1)}
.ov-hero-greet{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.1}
.ov-hero-sub{opacity:.85;font-size:13px;margin-top:3px}
.ov-hero-sitesel{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:7px 10px 7px 13px;transition:background .15s;margin:13px 0 18px}
.ov-hero-sitesel:hover{background:rgba(255,255,255,.27)}
.ov-hero-sitesel>i{color:#fff;opacity:.9;font-size:15px}
.ov-hero-sitesel select{background:transparent;border:none;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.ov-hero-sitesel select option{color:#111}
.ov-hero-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ov-track{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
.ov-ring{--p:0;--rc:#4ade80;flex:none;width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--p)*1%),rgba(255,255,255,.24) 0);display:flex;align-items:center;justify-content:center;position:relative;transition:background .5s ease}
.ov-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:color-mix(in srgb,var(--accent,#2563eb) 60%,#000)}
.ov-ring.ov-green{--rc:#4ade80}.ov-ring.ov-yellow{--rc:#fbbf24}.ov-ring.ov-red{--rc:#f87171}
.ov-ring span{position:relative;z-index:1;font-weight:800;font-size:19px}
.ov-ring span i{font-style:normal;font-weight:600;opacity:.72;font-size:13px}
.ov-track-lbl{font-size:12px;font-weight:600;opacity:.92;line-height:1.25;text-align:center}
.ov-track-lbl span{display:block}
@media(max-width:520px){.ov-hero{padding:16px}.ov-hero-tracks{gap:8px}.ov-ring{width:62px;height:62px}.ov-ring span{font-size:17px}.ov-hero-greet{font-size:19px}.ov-track-lbl{font-size:11px}}
/* Oversight task board — actionable manager cards under the status hero (ChecklistIQ card language) */
.ov-board-wrap{margin-top:20px}
.ov-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.ov-task{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;border:1px solid var(--line,#e5e7eb);border-radius:16px;background:var(--card,#fff);cursor:pointer;text-align:left;font:inherit;width:100%;position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.34,1.2,.64,1),box-shadow .18s,border-color .18s;animation:clHeroIn .4s both;animation-delay:calc(var(--i,0)*.04s)}
.ov-task:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(0,0,0,.3);border-color:var(--accent,#2563eb)}
.ov-task:active{transform:translateY(0) scale(.99)}
.ov-task::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#2563eb)}
.ov-task.ov-t-overdue::before{background:#ef4444}
.ov-task.ov-t-pending::before{background:#f59e0b}
.ov-task-ic{flex:none;width:44px;height:44px;border-radius:13px;background:var(--accent-soft,#e8f0fe);color:var(--accent-d,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:22px}
.ov-task.ov-t-overdue .ov-task-ic{background:rgba(239,68,68,.12);color:#ef4444}
.ov-task.ov-t-pending .ov-task-ic{background:rgba(245,158,11,.14);color:#d97706}
.ov-task-body{flex:1;min-width:0}
.ov-task-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-task-meta{font-size:12.5px;color:var(--mut2,#9ca3af);margin-top:3px;display:flex;align-items:center;gap:4px}
.ov-task-pill{flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.ov-p-overdue{background:rgba(239,68,68,.13);color:#dc2626}
.ov-p-pending{background:rgba(245,158,11,.15);color:#d97706}
.ov-task-chev{color:var(--mut2,#cbd5e1);font-size:18px;flex:none}
.ov-allclear{display:flex;align-items:center;gap:14px;padding:20px 22px;border:1px solid rgba(22,163,74,.3);background:rgba(22,163,74,.06);border-radius:16px}
.ov-allclear-ic{flex:none;width:46px;height:46px;border-radius:13px;background:rgba(22,163,74,.14);color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:26px}
.ov-allclear b{display:block;font-size:15px}
.ov-allclear span{font-size:13px;color:var(--mut2,#9ca3af)}
/* Oversight "Awaiting completion" — expandable per-site cards (ChecklistIQ dashboard style, coverage green) */
.ov-siteacc{display:flex;flex-direction:column;gap:10px}
.ov-sitecard{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--card);position:relative}
.ov-sitecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#16a34a;z-index:1}
.ov-sitecard.has-over::before{background:#dc2626}
.ov-sitecard.has-over{border-color:rgba(220,38,38,.4)}
.ov-sitecard-hero{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;color:var(--txt);cursor:pointer;border:0;padding:12px 15px 12px 18px;background:transparent}
.ov-sc-ic{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(22,163,74,.12);color:#16a34a;display:grid;place-items:center;font-size:19px}
.ov-sitecard.has-over .ov-sc-ic{background:rgba(220,38,38,.11);color:#dc2626}
.ov-sc-meta{flex:1;min-width:0}
.ov-sc-meta b{font-size:15.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--display)}
.ov-sc-meta span{font-size:12.5px;color:var(--mut,#6b7280)}
.ov-sc-count{flex:none;font-size:12px;font-weight:800;color:#15803d;background:rgba(22,163,74,.12);border-radius:999px;padding:3px 10px}
.ov-sitecard.has-over .ov-sc-count{color:#b91c1c;background:rgba(220,38,38,.12)}
.ov-sc-chev{font-size:19px;flex:none;transition:transform .2s;color:var(--mut2,#9ca3af)}
.ov-sitecard.open .ov-sc-chev{transform:rotate(180deg)}
.ov-sitecard-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px}
.ov-sitecard-body[hidden]{display:none}
/* holiday marker on the mobile schedule date chips */
.sc-chip.holiday{border-color:#7c3aed}
.sc-chip.holiday .sc-chip-dow{color:#7c3aed}

/* schedule action icons (download + dots) stay together + wrap as a unit when Publish→Republish gets long */
.sched-icons{display:flex;gap:8px;margin-left:auto;align-items:center}
/* Home hub Weather & Staffing — compact multi-site view */
.hub-wx-headline{font-size:13px;font-weight:700;margin:2px 0 8px;display:flex;align-items:center;gap:6px}
.hub-wx-headline.cut{color:#b45309}
.hub-wx-headline.ok{color:#16a34a}
.hub-wx-headline.sev{color:#dc2626}
.hub-wx-row{border-top:1px solid var(--line)}
.hub-wx-row:first-of-type{border-top:0}
.hub-wx-rowh{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:11px 4px;cursor:pointer;font-family:inherit;text-align:left;color:var(--txt);border-radius:8px}
.hub-wx-rowh:hover{background:var(--accent-soft)}
.wxr-caret{color:var(--mut);flex:none;transition:transform .15s}
.hub-wx-row.open .wxr-caret{transform:rotate(90deg)}
.wxr-name{font-size:14px;flex:none;min-width:0;max-width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-wx-rowh .hub-wx-sum{font-size:12px;flex:none;white-space:nowrap}
.wxm-strip{display:flex;gap:3px;margin-left:auto;flex:none}
.wxm-dot{position:relative;width:22px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--mut);background:var(--bg)}
.wxm-dot.today{outline:1.5px solid var(--accent);outline-offset:-1px}
.wxm-dot.cut{background:rgba(245,158,11,.18);color:#d97706}
.wxm-dot em{position:absolute;bottom:-3px;right:-3px;font-size:8px;font-weight:800;font-style:normal;color:#b45309;background:var(--card);border-radius:6px;padding:0 2px;line-height:1.3}
.hub-wx-detail{display:none;padding:0 2px 12px}
.hub-wx-row.open .hub-wx-detail{display:block}
@media(max-width:660px){.wxm-strip{display:none}.wxr-name{max-width:none;flex:1}}
/* Pay Card "Currently in Testing" label */
.pay-testing{display:inline-flex;align-items:center;gap:4px;background:#e8f0fe;color:#1d4ed8;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;vertical-align:middle;white-space:nowrap}
.pay-testing i{font-size:12px}
@media(prefers-color-scheme:dark){.pay-testing{background:rgba(37,99,235,.22);color:#93c5fd}}
:root[data-theme="dark"] .pay-testing{background:rgba(37,99,235,.22);color:#93c5fd}
/* tour: green highlight ring (e.g. the mobile Chat button where the directory lives) */
.tut-ring.tut-ring-green{border-color:#16a34a;box-shadow:0 0 0 9999px rgba(15,23,42,.5),0 0 0 6px rgba(22,163,74,.35);animation:tutGreenPulse 1.4s ease-in-out infinite}
@keyframes tutGreenPulse{0%,100%{box-shadow:0 0 0 9999px rgba(15,23,42,.5),0 0 0 4px rgba(22,163,74,.3)}50%{box-shadow:0 0 0 9999px rgba(15,23,42,.5),0 0 0 9px rgba(22,163,74,.5)}}
/* tour profile-photo capture modal */
.tph-stage{display:flex;justify-content:center;margin:6px 0 14px}
.tph-preview{width:118px;height:118px;border-radius:50%;font-size:42px}
.tph-cam{width:100%;max-width:280px;border-radius:14px;margin:0 auto 12px;display:block;background:#000;aspect-ratio:1;object-fit:cover}
.tph-actions{display:flex;gap:8px;margin-bottom:12px}
.tph-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;white-space:nowrap}
.tph-b.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tph-b.tph-file{margin:0}
.tph-skip{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;font-family:inherit;text-decoration:underline;padding:6px}
/* change-password: emphasize the CURRENT PASSWORD field (users miss it) */
.pw-cur-lbl{display:block;color:#2563eb;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 4px}
@media(prefers-color-scheme:dark){.pw-cur-lbl{color:#93c5fd}}
:root[data-theme="dark"] .pw-cur-lbl{color:#93c5fd}

/* ChecklistIQ — on-demand forms (Incident/Separation/Payroll) + On Demand tab */
.clf-wrap{max-width:640px;margin:0 auto}
.clf-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.clf-title{font-family:var(--display);margin:0;font-size:clamp(18px,4.5vw,24px)}
.clf-body{display:flex;flex-direction:column;gap:15px}
.clf-item{display:flex;flex-direction:column;gap:5px}
.clf-lbl{font-weight:700;font-size:13.5px}
.clf-req{color:#dc2626}
.clf-note{font-size:11.5px}
.clf-item>input,.clf-item>select,.clf-item>textarea{width:100%}
/* Date/time pickers only need their content width — never stretch them full-width (looks broken on desktop). */
.clf-item>input[type=date],.clf-item>input[type=time]{width:auto;max-width:100%}
@media(max-width:560px){.clf-item>input[type=date],.clf-item>input[type=time]{width:auto;min-width:140px}}
.clf-yn{display:flex;gap:18px}
.clf-yn label{display:flex;align-items:center;gap:6px;font-weight:600}
.clf-yn input{width:auto}
.clf-photos{display:flex;flex-wrap:wrap;gap:8px}
.clf-photos:empty{display:none}
.clf-photo{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.clf-photo img{width:100%;height:100%;object-fit:cover}
.clf-photo b{position:absolute;top:2px;right:3px;background:rgba(0,0,0,.62);color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer}
.clf-addphoto{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px dashed var(--line);border-radius:10px;font-weight:600;cursor:pointer;width:max-content}
/* Issue Tracking — ticket list + detail */
.iss-list{display:flex;flex-direction:column;gap:8px}
.iss-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;font:inherit;color:var(--txt)}
.iss-row:hover{border-color:var(--accent);background:var(--accent-soft)}
.iss-row.crit{border-left:3px solid #dc2626}
.iss-row-main{flex:1;min-width:0}
.iss-row-t{display:flex;align-items:center;gap:7px;font-size:14.5px}
.iss-row-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iss-num{font-size:11.5px;color:var(--mut);font-weight:600;flex:none}
.iss-row-sub{font-size:12px;margin-top:3px}
.iss-over{color:#dc2626;font-weight:700}
.iss-arrow{color:var(--mut);flex:none}
.iss-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.iss-dot.low{background:#16a34a}.iss-dot.medium{background:#f59e0b}.iss-dot.high{background:#f97316}.iss-dot.severe,.iss-dot.critical{background:#dc2626}
.tk-head{margin-bottom:12px}
.tk-titrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tk-title{font-size:19px;margin:0}
.tk-metarow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:12.5px}
.tk-resolved{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.35);border-radius:11px;padding:12px 14px;margin:0 0 14px;font-size:13.5px}
.tk-resolved b{color:#16a34a}
.tk-fields{margin-bottom:2px}
.tk-h3{font-size:14px;margin:18px 0 8px}
.tk-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.ca-cmt.res{background:rgba(22,163,74,.08);border-radius:9px;padding:8px 10px}
.ca-cmt.sys{opacity:.75;font-size:12.5px}
.ca-restag{font-size:9.5px;font-weight:800;background:#16a34a;color:#fff;padding:1px 6px;border-radius:20px;letter-spacing:.03em}
.sev-legend{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:6px;font-size:11.5px;line-height:1.55;color:var(--mut)}
.sev-legend b{color:var(--txt)}
.cle-quizrow{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.cle-quizhelp{font-size:11.5px;line-height:1.5}
.cle-quizhelp code{background:var(--card);padding:1px 5px;border-radius:4px;font-size:11px}
.cle-quiz{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13.5px;background:var(--card);color:var(--txt);resize:vertical}
.cle-quizfoot{display:flex;align-items:center;gap:14px;font-size:13px;flex-wrap:wrap}
.cle-quizfoot input[type=number]{width:62px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--txt)}
.cle-userlist{max-height:210px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:1px;margin-top:5px}
.cle-userck{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.cle-userck:hover{background:var(--accent-soft)}
.cle-userck input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
.cle-emailbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;display:flex;flex-direction:column;gap:9px}
.cle-chk{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.cle-chk input{width:17px;height:17px}
#cle-emailcfg{display:flex;flex-direction:column;gap:9px;padding-left:25px}
.cle-emailinp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--txt);font-size:14px}
.cl-netbanner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:24px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);max-width:92vw}
.cl-netbanner.off{background:#7c2d12;color:#fff}
.cl-netbanner.sync{background:#1e3a8a;color:#fff}
.cl-netbanner button{background:rgba(255,255,255,.22);color:#fff;border:0;border-radius:14px;padding:4px 11px;font-weight:700;cursor:pointer;font-size:12.5px}
.cl-netbanner .ti-loader{animation:an-spin 1s linear infinite}
.clf-ack input:disabled{opacity:.5}
.clf-taskitem{padding:2px 0}
.clf-task{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.clf-task:hover{border-color:var(--accent)}
.clf-task input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--accent)}
.clf-task input:checked+span{color:var(--mut);text-decoration:line-through}
.celebrate-banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3001;pointer-events:none}
.celebrate-msg{background:linear-gradient(135deg,var(--accent),var(--accent-d,#0d9488));color:#fff;font-size:clamp(20px,5vw,30px);font-weight:800;padding:20px 34px;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;align-items:center;gap:12px;animation:celebIn .5s cubic-bezier(.2,1.4,.4,1)}
.celebrate-banner.out .celebrate-msg{animation:celebOut .4s ease forwards}
@keyframes celebIn{from{transform:scale(.5) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes celebOut{to{transform:scale(.9) translateY(-10px);opacity:0}}
.clf-ack-lock{font-size:11.5px;color:#c2410c;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.clf-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);background:none;font-size:12px;font-weight:800;cursor:pointer;line-height:1;padding:0;vertical-align:middle}
.clf-help:hover{background:var(--accent);color:#fff}
.clf-helpbox{margin:6px 0 2px;padding:10px 12px;background:var(--accent-soft);border:1px solid var(--line);border-radius:9px;font-size:12.5px;line-height:1.5;color:var(--txt)}
.clf-helpbox .ti{color:var(--accent);margin-right:3px}
.clf-sig{position:relative}
.clf-sig canvas{width:100%;height:150px;border:1px solid var(--line);border-radius:10px;background:#fff;touch-action:none}
.clf-sig-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;color:#9aa4b2;font-size:15px;font-weight:600;pointer-events:none;letter-spacing:.2px}
.clf-sig.signing .clf-sig-hint{display:none}
/* pdf_form item + fill modal */
.clf-pdf{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.clf-pdf-status{font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.clf-pdf-status.ok{color:#16a34a}
.modal.pf-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal-card.pf-card{background:var(--card);border-radius:16px;width:min(94vw,560px);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 10px}
.pf-head h3{font-size:16px;margin:0;line-height:1.3}
.pf-x{background:var(--bg,#f3f4f6);border:1px solid var(--line);font-size:17px;color:var(--mut);cursor:pointer;flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.pf-note{padding:0 18px 6px;font-size:12.5px;display:flex;align-items:center;gap:6px}
.pf-body{padding:6px 18px 4px;overflow:auto;display:flex;flex-direction:column;gap:13px}
.pf-fld{display:flex;flex-direction:column;gap:5px}
.pf-fld>span{font-size:13px;font-weight:600;color:var(--txt)}
.pf-fld input,.pf-fld select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--txt);font-size:15px}
.pf-chk{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.4;cursor:pointer}
.pf-chk input{margin-top:2px;width:18px;height:18px;flex:none}
.pf-sigblk{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.pf-siglbl{font-size:13px;font-weight:600}
.pf-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px 16px;border-top:1px solid var(--line)}
@media(max-width:560px){.pf-card{width:96vw;max-height:92vh}}
.clf-annot-stage{position:relative;width:100%;max-width:440px;background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.clf-annot-base{width:100%;display:block}
.clf-annot-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.clf-clear{margin-top:7px;font-size:12px;padding:5px 12px}
.clf-soon{padding:10px;border:1px dashed var(--line);border-radius:10px;font-size:12.5px}
.clf-foot{position:sticky;bottom:0;background:var(--bg);padding:14px 0 6px;margin-top:20px;border-top:1px solid var(--line)}
.clf-submit{width:100%}
.od-report{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;border:0;border-radius:14px;padding:17px;font-weight:800;font-size:clamp(15px,4vw,17px);cursor:pointer;margin-bottom:6px;box-shadow:0 12px 26px -12px rgba(220,38,38,.7);transition:transform .09s ease,box-shadow .15s}
.od-report i{font-size:1.25em}
.od-report:hover{box-shadow:0 14px 30px -12px rgba(220,38,38,.8)}
.od-report:active{transform:scale(.985)}
.od-report-sub{text-align:center;color:var(--mut,#64748b);font-size:12.5px;margin:0 0 16px}
.od-list{display:flex;flex-direction:column;gap:10px}
.od-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}
.od-ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--accent);flex:none}
.od-meta{display:flex;flex-direction:column;min-width:0}
.od-meta b{font-size:15px}
.od-meta span{font-size:12px;color:var(--mut)}
.od-arrow{margin-left:auto;color:var(--mut);flex:none}

/* ChecklistIQ — onboarding stages + advanced item types (content_ack, rating, quiz) */
.clf-stage{border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:14px}
.clf-stage+.clf-stage{margin-top:14px}
.clf-stage-h{font-family:var(--display);font-weight:700;font-size:15px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.clf-doc{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-weight:600;text-decoration:none;color:var(--accent);width:max-content;max-width:100%}
.clf-audio{width:100%;margin:2px 0}
.clf-ack{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;margin-top:8px;cursor:pointer}
.clf-ack input{width:auto;margin-top:2px;flex:none}
.clf-rate{display:flex;gap:8px;flex-wrap:wrap}
.clf-star{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-weight:800;cursor:pointer;color:var(--mut);font-size:15px}
.clf-star.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.clf-quiz{display:flex;flex-direction:column;gap:15px}
.clf-q-p{font-weight:600;font-size:13.5px;margin-bottom:7px}
.clf-opt{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;cursor:pointer}
.clf-opt input{width:auto;flex:none}
.clf-photo.doc{font-size:22px;color:var(--accent)}

/* ChecklistIQ — onboarding roster */
.ob-list{display:flex;flex-direction:column;gap:8px}
.ob-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ob-who{display:flex;flex-direction:column;min-width:120px;flex:1}
.ob-who span{font-size:12px}
.ob-prog{display:flex;align-items:center;gap:8px;flex:none}
.ob-bar{width:80px;height:7px;border-radius:4px;background:var(--accent-soft);overflow:hidden}
.ob-bar i{display:block;height:100%;background:var(--accent)}
.ob-prog span{font-size:12px;color:var(--mut);min-width:34px;text-align:right}
.ob-st{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;flex:none}
.ob-st.done{background:rgba(22,163,74,.14);color:#16a34a}
.ob-st.prog{background:var(--accent-soft);color:var(--accent)}
.ob-st.over{background:rgba(220,38,38,.12);color:#dc2626}
.ob-mng{display:flex;gap:6px;flex:none;margin-left:auto}
.ob-mbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);color:var(--mut);border-radius:9px;cursor:pointer;font-size:16px}
.ob-mbtn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.ob-mbtn.danger:hover{background:rgba(220,38,38,.1);color:#dc2626;border-color:#dc2626}

/* ChecklistIQ Slice 5 — blue action buttons, full-screen damage editor, approval chain, deadline banner */
.clf-btn-blue{display:inline-flex;align-items:center;gap:7px;background:#2563eb;color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:700;cursor:pointer;font-size:14px}
.clf-btn-blue:hover{background:#1d4ed8}
.clf-annot-view{width:100%;max-width:440px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--accent-soft);margin-bottom:9px}
.clf-annot-view img{width:100%;display:block}
.clf-deadline{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:#b91c1c;border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:14px}
.clf-lockbanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-left:3px solid #f59e0b;border-radius:12px;padding:11px 14px;margin:0 0 16px;font-size:13.5px;color:var(--txt)}
.clf-lockbanner.open{border-left-color:#16a34a}
.clf-lockbanner>span{flex:1;min-width:180px}
.clf-lockbanner .clf-unlock{margin-left:auto;background:var(--accent);color:#fff;border:0;border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer;white-space:nowrap;font-size:13px}
.clf-lockbanner.open .clf-unlock{background:var(--card);color:var(--txt);border:1px solid var(--line)}
.clf-onfile{font-size:12px;margin-top:6px;color:#16a34a;display:flex;align-items:center;gap:5px}
.clf-table,.clf-trows{display:flex;flex-direction:column;gap:10px}
.clf-trow{display:flex;gap:8px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.clf-tcells{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.clf-tcell{display:flex;flex-direction:column;gap:3px;flex:1;min-width:110px}
.clf-tcell>span{font-size:11px;font-weight:600;color:var(--muted,#6b7280)}
.clf-tcell input{width:100%;box-sizing:border-box}
.clf-tphoto{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center}
.clf-tphotobtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px dashed var(--line);border-radius:10px;cursor:pointer;color:var(--muted,#6b7280)}
.clf-tthumb{width:44px;height:44px;object-fit:cover;border-radius:10px}
.clf-tphoto-rm{position:absolute;top:-6px;right:-6px;background:var(--danger,#dc2626);color:#fff;border-radius:50%;width:18px;height:18px;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.clf-trow-del{flex:0 0 auto;background:none;border:0;color:var(--muted,#9aa09b);cursor:pointer;font-size:16px;align-self:center}
.clf-tadd{align-self:flex-start;background:var(--accent-soft,#e8f6f4);color:var(--accent,#0fb6a6);border:1px solid var(--line);border-radius:10px;padding:9px 16px;font-weight:600;cursor:pointer}
.clfv-tablewrap{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}
.clfv-table{border-collapse:collapse;font-size:12.5px;min-width:100%}
.clfv-table th,.clfv-table td{border:1px solid var(--line);padding:5px 9px;text-align:left;white-space:nowrap}
.clfv-table th{background:var(--bg);font-weight:700}
.kv:has(.clfv-tablewrap){display:block}
.kv:has(.clfv-tablewrap)>span:first-child{display:block;margin-bottom:6px;font-weight:700}
.kv:has(.clfv-policy){display:block}
.kv:has(.clfv-policy)>span:first-child{display:block;margin-bottom:4px;font-weight:700}
.clfv-ack-yes{color:#16a34a;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.clfv-policy{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.clfv-policy-link{display:flex;align-items:center;gap:6px;padding:10px 12px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.clfv-policy-snap{display:block;width:100%;height:420px;border:0;background:#eef3f2}
img.clfv-policy-snap{height:auto;max-height:520px;object-fit:contain}
.clf-sitesel select{width:100%}
.clf-selwrap{position:relative}
.clf-selwrap select{width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:36px}
.clf-selarrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted,#6b7280);font-size:18px}
.clf-savelater{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-weight:600;cursor:pointer;color:var(--txt);margin-bottom:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.clf-savehint{font-size:12px;margin-top:8px;color:var(--muted,#6b7280);text-align:center}
.clfv-delfoot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.clfv-del{background:none;border:1px solid var(--danger,#dc2626);color:var(--danger,#dc2626);border-radius:9px;padding:9px 16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.clfv-del:hover{background:var(--danger,#dc2626);color:#fff}
.clh-inprog .clh-sc-hero{background:var(--accent-soft)}
.clh-ip-del{background:none;border:0;color:var(--muted,#9aa09b);cursor:pointer;font-size:15px;padding:0 12px;align-self:center}
.clh-ip-del:hover{color:var(--danger,#dc2626)}
.clh-shared-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:1px 7px;border-radius:6px;margin-left:4px;vertical-align:middle}
.cl-stages{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.cl-stage{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.cl-stage-done{color:#16a34a;background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.25)}
.cl-stage-over{color:#dc2626;background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.28)}
.cl-stage-pend{color:var(--muted,#6b7280);background:var(--bg)}
.cl-missed-y{color:#dc2626;font-weight:600}
.cl-sec-due{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:8px;margin-left:8px;vertical-align:middle}
.cle-secdue{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:10px;color:var(--txt);flex-wrap:wrap}
.cle-secdue input{width:130px}
.clf-chain{display:flex;flex-direction:column}
.clf-chain-step{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.clf-chain-n{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.clf-chain-meta{display:flex;flex-direction:column}
.clf-chain-meta span{font-size:11.5px}
.clf-chain-arrow{text-align:center;color:var(--mut);font-size:14px;padding:2px 0}
.clf-annot-full{position:fixed;inset:0;z-index:9999;background:#0b1220;display:flex;flex-direction:column}
.clf-annot-fullbar{display:flex;align-items:center;gap:10px;padding:16px;color:#fff}
.clf-annot-fullstage{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;min-height:0}
.clf-annot-fullwrap{position:relative;max-width:100%;max-height:100%;line-height:0}
.clf-annot-fullbase{display:block;max-width:100%;max-height:72vh;background:#fff;border-radius:8px}
.clf-annot-fullcv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.clf-annot-fullacts{display:flex;gap:12px;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* ChecklistIQ — approval sign-off */
.od-sec-h{font-family:var(--display);font-weight:700;font-size:14px;margin:4px 0 10px;display:flex;align-items:center;gap:7px;color:#dc2626}
.ap-summary{display:flex;flex-direction:column;gap:7px;background:var(--accent-soft);border-radius:10px;padding:12px 14px}
.ap-fld{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.ap-fld span{color:var(--mut)}
.ap-fld b{text-align:right}

/* ChecklistIQ — blue back button on forms */
.clf-back-btn{display:inline-flex;align-items:center;gap:6px;background:#2563eb;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:13px;flex:none}
.clf-back-btn:hover{background:#1d4ed8}