/* TeamTracker · navy and gold. Colour only where it carries meaning (late, done, focus). */
:root {
  --navy: #1E2329;
  --navy-2: #2A3139;
  --navy-3: #39424C;
  --gold: #2BB3A3;
  --gold-soft: #DDF3F0;
  --gold-ink: #0E6B61;
  --ink: #1A2230;
  --ink-2: #3C4656;
  --ink-3: #626C7A;
  --line: #E4E7EC;
  --line-2: #EEF0F3;
  --bg: #F6F7F9;
  --card: #FFFFFF;
  --late: #B42318;
  --late-soft: #FDECEA;
  --ok: #1F7A4D;
  --ok-soft: #E7F4EC;
  --amber: #B5540B;
  --amber-soft: #FDF0E3;
  --blue: #175CD3;
  --blue-soft: #EAF1FD;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --row-alt: #EEF1F3;
  --detail-bg: #EEF5F4;
  --reg-hover: #EAF6F4;
  --reg-sel: #CFEDE8;
  --side-bg: #F4F5F7;
  --side-ink: #1F2733;
  --side-muted: #6B7280;
  --side-faint: #8A909B;
  --side-hover: #F0F0ED;
  --side-active: #EAEAE5;
  --side-border: #EAE8E3;
}

/* Dark theme (set by each person in My profile). Sidebar stays navy; the main area flips. */
:root[data-theme="dark"] {
  --gold: #3CC7B6; --gold-soft: #0F2E2A; --gold-ink: #5FD8C8;
  --ink: #E9EDF1; --ink-2: #BAC2CB; --ink-3: #8D96A0;
  --line: #2C333B; --line-2: #22282F; --bg: #121519; --card: #1A1F25;
  --late: #F08A82; --late-soft: #3A1C19; --ok: #5FCF8F; --ok-soft: #133024;
  --amber: #F2B37A; --amber-soft: #3A2A16; --blue: #7FB0F5; --blue-soft: #16263E;
  --row-alt: #20262D;
  --detail-bg: #1F262E;
  --reg-hover: #1E2A2B;
  --reg-sel: #1B3F3B;
  --side-bg: #0F1215;
  --side-ink: #E6ECF3;
  --side-muted: #98A2AD;
  --side-faint: #7C8691;
  --side-hover: rgba(255,255,255,.06);
  --side-active: rgba(255,255,255,.10);
  --side-border: rgba(255,255,255,.08);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
}
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { border-color: #2E3E50; }
/* headings and accents that were navy-on-light need to flip on dark surfaces */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] .health-num, :root[data-theme="dark"] .kpi b,
:root[data-theme="dark"] .topbar .brand-sm, :root[data-theme="dark"] .iconbtn,
:root[data-theme="dark"] .tab.on, :root[data-theme="dark"] .tab:hover,
:root[data-theme="dark"] .row:hover .row-title, :root[data-theme="dark"] .notif-list .unread .row-title,
:root[data-theme="dark"] .chip-btn, :root[data-theme="dark"] .btn-secondary { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --gold: #3CC7B6; --gold-soft: #0F2E2A; --gold-ink: #5FD8C8;
    --ink: #E9EDF1; --ink-2: #BAC2CB; --ink-3: #8D96A0;
    --line: #2C333B; --line-2: #22282F; --bg: #121519; --card: #1A1F25;
    --late: #F08A82; --late-soft: #3A1C19; --ok: #5FCF8F; --ok-soft: #133024;
    --amber: #F2B37A; --amber-soft: #3A2A16; --blue: #7FB0F5; --blue-soft: #16263E;
    --row-alt: #20262D;
    --reg-hover: #1E2A2B;
    --reg-sel: #1B3F3B;
    --side-bg: #0F1215;
    --side-ink: #E6ECF3;
    --side-muted: #98A2AD;
    --side-faint: #7C8691;
    --side-hover: rgba(255,255,255,.06);
    --side-active: rgba(255,255,255,.10);
    --side-border: rgba(255,255,255,.08);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  }
  :root[data-theme="auto"] input, :root[data-theme="auto"] select, :root[data-theme="auto"] textarea { border-color: #2E3E50; }
  :root[data-theme="auto"] h1, :root[data-theme="auto"] h2, :root[data-theme="auto"] h3,
  :root[data-theme="auto"] .health-num, :root[data-theme="auto"] .kpi b,
  :root[data-theme="auto"] .topbar .brand-sm, :root[data-theme="auto"] .iconbtn,
  :root[data-theme="auto"] .tab.on, :root[data-theme="auto"] .tab:hover,
  :root[data-theme="auto"] .row:hover .row-title, :root[data-theme="auto"] .notif-list .unread .row-title,
  :root[data-theme="auto"] .chip-btn, :root[data-theme="auto"] .btn-secondary { color: var(--ink); }
}

/* Text size (set by each person in My profile) */
:root[data-text="s"] body { font-size: 15px; }
:root[data-text="l"] body { font-size: 18px; }

/* Profile link in the sidebar footer */
.side-me a.who { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.side-me a.who:hover b { text-decoration: underline; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link, var(--navy-3)); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; color: var(--navy); }
h1 { font-size: 1.42rem; font-weight: 700; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.06rem; font-weight: 650; }
h3, .h3 { font-size: .98rem; font-weight: 650; }
p { margin: 0 0 .6em; }
ol, ul { margin: 0 0 .6em; padding-left: 1.2em; }
code { background: var(--line-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
small, .small { font-size: .85rem; }
.muted { color: var(--ink-3); }
.help { color: var(--ink-3); font-size: .83rem; margin: .25em 0 0; }
.eyebrow { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: .3em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--navy); padding: 8px 12px; border-radius: 6px; z-index: 99; }
.skip:focus { left: 8px; }
.txt-late { color: var(--late); font-weight: 600; }
.txt-soon { color: var(--gold-ink); font-weight: 600; }
.txt-gold { color: var(--gold); }
.txt-late-light { color: #FF9B91; }
.txt-ok-light { color: #8FE0B5; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Layout */
.shell { display: flex; min-height: 100vh; }
.side { width: 248px; flex: 0 0 248px; background: var(--side-bg); color: var(--side-ink); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--side-border); }
.side .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; padding: 0 2px; }
.side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
/* Console-style: small uppercase section header that expands its items */
.nav-group { margin-top: 11px; }
.nav-group > summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 1px; border-radius: 8px; color: var(--side-faint); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: var(--side-ink); background: var(--side-hover); }
.nav-group > summary .nav-group-label { flex: 1; }
.nav-group > summary .chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .75; transition: transform .15s ease; }
.nav-group[open] > summary .chev { transform: rotate(45deg); }
.nav-group.has-current > summary { color: var(--gold-ink); }
.nav-group.has-current > summary .here { display: none; }
.nav-group > summary .count { background: var(--gold); color: var(--navy); font-size: .7rem; border-radius: 10px; padding: 1px 7px; font-weight: 800; }
.side ul a { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 8px; color: var(--side-ink); font-weight: 500; font-size: .92rem; }
.side ul a .ic { color: var(--side-muted); flex: 0 0 auto; }
.side ul a:hover { background: var(--side-hover); color: var(--side-ink); text-decoration: none; }
.side ul a:hover .ic { color: var(--side-ink); }
.side ul a[aria-current="page"] { background: var(--side-active); color: var(--side-ink); font-weight: 600; }
.side ul a[aria-current="page"] .ic { color: var(--gold-ink); }
.side ul a span { flex: 1; }
.side .count { background: var(--late); color: #fff; font-size: .72rem; border-radius: 10px; padding: 1px 7px; }
.side-search input { width: 100%; background: var(--card); border: 1px solid var(--side-border); color: var(--ink); border-radius: 9px; }
.side-search input::placeholder { color: var(--side-faint); }
.side-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--side-border); }
.side-me .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.side-me .who b { color: var(--side-ink); font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-me .who small { color: var(--side-faint); }
.side-me .link { color: var(--side-muted); font-size: .8rem; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--side-ink); font-size: 1.15rem; letter-spacing: -.01em; padding: 2px 4px 2px; }
.brand:hover { text-decoration: none; }
.brand b { color: var(--gold-ink); font-weight: 700; }
.brand-lg { font-size: 1.5rem; color: var(--navy); justify-content: center; margin-bottom: 18px; }
.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
/* Top-right profile dropdown */
.topbar .profile { position: relative; }
.topbar .profile > summary { list-style: none; cursor: pointer; display: inline-flex; border-radius: 50%; }
.topbar .profile > summary::-webkit-details-marker { display: none; }
.topbar .profile > summary .avatar { width: 34px; height: 34px; font-size: .82rem; }
.topbar .profile > summary:hover .avatar { box-shadow: 0 0 0 2px var(--gold); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 236px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 40; }
.profile-menu .pm-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; text-decoration: none; color: var(--ink); }
.profile-menu .pm-head .who { display: flex; flex-direction: column; min-width: 0; }
.profile-menu .pm-head .who b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu .pm-head .who small { color: var(--ink-3); font-size: .76rem; }
.profile-menu a, .profile-menu button.link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 9px; color: var(--ink); font-weight: 500; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; }
.profile-menu a .ic, .profile-menu button .ic { color: var(--ink-3); }
.profile-menu a:hover, .profile-menu button.link:hover { background: var(--row-alt); text-decoration: none; }
.profile-menu a[aria-current="page"] { color: var(--gold-ink); font-weight: 700; }
.profile-menu .pm-sep { height: 1px; background: var(--line-2); margin: 4px 6px; }
.profile-menu form { margin: 4px 0 0; border-top: 1px solid var(--line-2); padding-top: 4px; }
/* Section tabs across the top of the main screen */
.sectabs { display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 55px; z-index: 15; }
.sectabs-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; flex: 0 0 auto; }
.sectabs-row { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.sectabs-row::-webkit-scrollbar { display: none; }
.sectabs-row a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 10px; color: var(--ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap; border-bottom: 2.5px solid transparent; }
.sectabs-row a .ic { width: 17px; height: 17px; color: var(--ink-3); }
.sectabs-row a:hover { color: var(--ink); text-decoration: none; }
.sectabs-row a[aria-current="page"] { color: var(--gold-ink); border-bottom-color: var(--gold); }
.sectabs-row a[aria-current="page"] .ic { color: var(--gold-ink); }
.sectabs-row a .count { background: var(--late); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 9px; padding: 0 6px; }
.topbar .brand-sm { display: none; color: var(--navy); font-size: 1.05rem; }
.spacer { flex: 1; }
.main { padding: 24px; max-width: 1180px; width: 100%; margin: 0 auto; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--navy); }
.iconbtn:hover { background: var(--line-2); text-decoration: none; }
.ic { width: 20px; height: 20px; flex: 0 0 auto; }
.badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--late); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--card); }
.badge[hidden] { display: none; }
.net { background: var(--gold-soft); color: var(--gold-ink); font-size: .8rem; border-radius: 20px; padding: 3px 10px; }
.net[hidden] { display: none; }
.bottom { display: none; }

/* Cards and sections */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.sub-card { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.section { margin-top: 22px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.section-head h2 { margin: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head p { flex-basis: 100%; margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; }
.empty { color: var(--ink-3); text-align: center; padding: 22px; }
.note { background: var(--line-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0; }
.note p:last-child { margin: 0; }
.note.warn, .warn .note { background: var(--late-soft); }
.highlight { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.ok-box { background: var(--ok-soft); color: var(--ok); border-radius: var(--radius-sm); padding: 8px 12px; }
.count-pill { display: inline-block; background: var(--line-2); color: var(--ink-2); font-size: .78rem; font-weight: 600; border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.crumbs { font-size: .85rem; color: var(--ink-3); margin-bottom: 10px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #DCE4EE; border-radius: 16px; padding: 26px; margin-bottom: 18px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border: 2px solid color-mix(in srgb, var(--gold) 25%, transparent); border-radius: 50%; }
.hero h1 { color: #fff; font-size: 1.55rem; }
.hero .eyebrow { color: var(--gold); }
.hero-sub { color: #9FB0C4; }
.quote { margin: 14px 0 0; padding: 0 0 0 14px; border-left: 3px solid var(--gold); color: #E8EDF3; font-size: 1rem; font-style: italic; }
.quote .eyebrow { font-style: normal; color: #9FB0C4; }
.quote cite { display: block; font-size: .82rem; color: #9FB0C4; margin-top: 4px; font-style: normal; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; position: relative; z-index: 1; }
.stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 12px 14px; color: #9FB0C4; display: flex; flex-direction: column; }
a.stat:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.stat b { font-size: 1.8rem; color: #fff; line-height: 1.1; font-weight: 700; }
.stat span { font-size: .8rem; }
.banner { display: block; background: var(--gold-soft); color: var(--gold-ink); border: 1px solid #A9DED7; border-radius: var(--radius); padding: 12px 16px; font-weight: 600; margin-bottom: 14px; }
.health { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.health .small { grid-column: 1 / -1; margin: 0; }
.health-num { font-size: 1.6rem; color: var(--navy); }

/* Progress */
.progress { height: 6px; background: var(--line-2); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.progress span { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.progress-lg { height: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap; background: none; }
.btn:hover { text-decoration: none; }
.btn .ic { width: 16px; height: 16px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: color-mix(in srgb, var(--gold) 85%, #000); }
.btn-secondary { background: var(--card); color: var(--navy); border-color: var(--line); }
.btn-secondary:hover { background: var(--line-2); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { background: #18663F; }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--line-2); }
.btn-sm { padding: 6px 11px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--link, var(--navy-3)); cursor: pointer; font-weight: 600; }
.link:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.actions form { margin: 0; }
.actions .push-right { margin-left: auto; }
.el-grid th, .el-grid td { padding: 6px 8px; white-space: nowrap; }
.el-ladder input { padding: 4px 6px; }
.el-ladder td { vertical-align: middle; }
/* Full salary register: compact, horizontally scrollable, pinned name column */
.reg th, .reg td { padding: 6px 8px; white-space: nowrap; font-size: .88rem; }
.reg td:first-child, .reg th:first-child { position: sticky; left: 0; background: var(--card); z-index: 2; box-shadow: 1px 0 0 var(--line); }
.reg thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.reg thead th:first-child { z-index: 3; }
.reg .grp { text-align: center; background: var(--line-2); font-weight: 600; color: var(--ink-2); }
.reg .cmt { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.reg tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: var(--card); }
.reg tfoot td:first-child { position: sticky; left: 0; background: var(--card); }
.reg .grp-sec td { background: var(--line-2); color: var(--ink); font-weight: 700; position: sticky; left: 0; }
.reg .grp-sub td { background: var(--line-2); font-weight: 600; border-top: 1px solid var(--line); }
.reg .grp-sub td:first-child { position: sticky; left: 0; background: var(--line-2); }
.reg tr.flagged td:first-child { box-shadow: inset 3px 0 0 var(--late), 1px 0 0 var(--line); }
.flag-dot { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: var(--late); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; padding: 0 2px; }
.payslip-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 10px; }
.payslip-head b { font-size: 1.05rem; color: var(--navy); }
.payslip-head span { color: var(--ink-3); font-size: .85rem; }
/* Compact salary register with tap-to-expand detail */
.regc tr.pr { cursor: pointer; }
.regc tr.pr:hover { background: var(--row-alt); }
.regc .chev { display: inline-block; margin-right: 7px; color: var(--ink-3); font-weight: 700; }
.regc tr.pr.open .chev { transform: rotate(90deg); }
.regc tr.flagged td:first-child { box-shadow: inset 3px 0 0 var(--late); }
.regc .grp-sec td { background: var(--line-2); color: var(--ink); font-weight: 700; }
.regc .grp-sub td, .regc tfoot td { background: var(--line-2); font-weight: 700; border-top: 1px solid var(--line); }
.regc tr.prd > td { padding: 0; background: var(--detail-bg); border-bottom: 2px solid var(--line); }
.pay-detail { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 16px 16px 12px 16px; border-left: 4px solid var(--gold); }
.pay-detail .pd-grp { flex: 1 1 240px; min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.pay-detail h4 { margin: 0 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid currentColor; padding-bottom: 5px; }
.pay-detail .pd-grp:nth-of-type(1) h4 { color: var(--ok); }
.pay-detail .pd-grp:nth-of-type(2) h4 { color: var(--late); }
.pay-detail .pd-grp:nth-of-type(3) h4 { color: var(--gold-ink); }
.pay-detail .facts { margin: 0; }
.pay-detail dd.big { font-weight: 700; font-size: 1.12rem; color: var(--gold-ink); }
/* Report-style register: dark header band, business bands, trend badges, filter chips */
.regc thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; }
.regc thead th:first-child { border-top-left-radius: 10px; }
.regc thead th:last-child { border-top-right-radius: 10px; }
.regc .grp-sec td { background: var(--line-2); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--navy-3); letter-spacing: .02em; }
.reg-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; }
.reg-filters .rf { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 10px; padding: 6px 13px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.reg-filters .rf:hover { border-color: var(--navy-3); color: var(--ink); }
.reg-filters .rf.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.reg-filters .rf-n { background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 7px; font-size: .76rem; font-weight: 700; }
.reg-filters .rf.on .rf-n { background: rgba(255,255,255,.22); }
/* Understated, professional trend indicator — no coloured pills, just a muted arrow + % */
.trend { display: inline-block; font-size: .8rem; font-weight: 600; white-space: nowrap; letter-spacing: .01em; }
.trend-up { color: #2F7A54; }
.trend-down { color: #A8504A; }
.trend-new { color: var(--ink-3); font-weight: 600; }
:root:not([data-theme="light"]) .trend-up, :root[data-theme="dark"] .trend-up { color: #7FD0A4; }
:root:not([data-theme="light"]) .trend-down, :root[data-theme="dark"] .trend-down { color: #E79089; }
/* Full-detail salary register — all columns, frozen name column, dark grouped header */
.regfull { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.regfull th, .regfull td { white-space: nowrap; padding: 7px 10px; font-size: .83rem; }
.regfull .num { text-align: right; font-variant-numeric: tabular-nums; }
.regfull .z { color: var(--ink-3); }
.regfull thead th { background: var(--navy); color: #fff; border-bottom: 0; }
.regfull thead .band-row th.band { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; text-align: center; color: #D7E0EC; border-left: 1px solid var(--navy-3); font-weight: 700; }
.regfull thead .col-row th { background: var(--navy-2); color: #C6D2E2; font-size: .67rem; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
.regfull th.stick, .regfull td.stick { position: sticky; left: 0; z-index: 3; text-align: left; background: var(--card); box-shadow: 1px 0 0 var(--line), 3px 0 6px rgba(0,0,0,.05); }
.regfull thead th.stick { z-index: 5; background: var(--navy); box-shadow: 1px 0 0 var(--navy-3); }
.regfull tbody tr.pr { cursor: pointer; }
/* zebra striping (incl. the frozen name column) */
.regfull tbody tr.pr.alt > td, .regfull tbody tr.pr.alt > td.stick { background: var(--row-alt); }
/* hover, then click-to-check selection — selection wins and holds while scrolling */
.regfull tbody tr.pr:hover > td, .regfull tbody tr.pr:hover > td.stick { background: var(--reg-hover); }
.regfull tbody tr.pr.sel > td, .regfull tbody tr.pr.sel > td.stick { background: var(--reg-sel); }
.regfull tbody tr.pr.sel > td.stick { box-shadow: inset 3px 0 0 var(--navy-3); }
.regfull tr.flagged td.stick { box-shadow: inset 3px 0 0 var(--late); }
/* section header, business subtotal (gold), grand total (navy) — three distinct levels */
.regfull .grp-sec td { background: var(--line-2); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--navy-3); }
.regfull .grp-sub td, .regfull .grp-sub td.stick { background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; border-top: 1px solid var(--line); }
.regfull tfoot td, .regfull tfoot td.stick { background: var(--navy); color: #fff; font-weight: 700; border-top: 2px solid var(--navy-3); }
/* Lock header (top), name column (left) and grand total (bottom) inside a scroll pane */
.regscroll { max-height: calc(100vh - 190px); overflow: auto; scroll-behavior: smooth; }
.regscroll:focus, .regscroll:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.regfull thead .band-row th { position: sticky; top: 0; z-index: 3; height: 26px; box-sizing: border-box; }
.regfull thead .col-row th { position: sticky; top: 26px; z-index: 3; }
.regfull thead th.stick { top: 0; z-index: 6; }
.regfull td.stick { z-index: 4; }
.regfull tfoot td { position: sticky; bottom: 0; z-index: 3; }
.regfull tfoot td.stick { z-index: 5; }
.pay-detail .pd-note { flex-basis: 100%; margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; }
/* Keyboard review: row highlight, help overlay, hint button */
.knav-on { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius-sm); background: var(--gold-soft); }
.kbd-btn { font-size: 1.05rem; line-height: 1; }
.kbd-help { position: fixed; inset: 0; background: rgba(30, 35, 41, .55); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; }
.kbd-card { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 480px; width: 100%; max-height: 85vh; overflow: auto; padding: 18px 20px; }
.kbd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kbd-x { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.kbd-card h4 { margin: 14px 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.kbd-card dl { margin: 0; }
.kbd-card dl > div { display: flex; gap: 12px; padding: 3px 0; align-items: baseline; }
.kbd-card dt { flex: 0 0 96px; }
.kbd-card dd { margin: 0; color: var(--ink-2); }
.kbd-card kbd { display: inline-block; background: var(--line-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; font: 600 .82rem var(--font); color: var(--ink); }
.kbd-note { margin: 14px 0 0; color: var(--ink-3); font-size: .85rem; }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 2px; font-size: 13px; }
.steps .st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--row-alt); color: var(--ink-3); font-weight: 600; }
.steps .st.on { background: var(--gold-soft); color: var(--gold-ink); }
.steps .st.done { background: var(--ok-soft); color: var(--ok); }
.steps .sep { color: var(--ink-3); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 600; border-radius: 6px; padding: 2px 8px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.chip-plain { background: transparent; border: 1px solid var(--line); color: var(--ink-3); }
.chip-focus { background: var(--gold-soft); color: var(--gold-ink); }      /* yellow — focus */
.chip-ok { background: var(--gold-soft); color: var(--gold-ink); }         /* matches your industry */
.chip-late { background: var(--late-soft); color: var(--late); }
/* Priority ramp: High = red, Medium = orange, Low = blue */
.chip-p-high { background: var(--late-soft); color: var(--late); }
.chip-p-medium { background: var(--amber-soft); color: var(--amber); }
.chip-p-low { background: var(--blue-soft); color: var(--blue); }
/* Status colours: active work green, waiting amber, to-do blue, requested gold */
.chip-s-todo { background: var(--blue-soft); color: var(--blue); }
.chip-s-in_progress { background: var(--ok-soft); color: var(--ok); }      /* green — in progress */
.chip-s-waiting { background: var(--amber-soft); color: var(--amber); }
.chip-s-on_hold { background: var(--amber-soft); color: var(--amber); }
.chip-s-done { background: var(--ok); color: #fff; }                        /* solid green — finished */
.chip-s-requested { background: var(--gold-soft); color: var(--gold-ink); }
.chip-s-declined { background: var(--late-soft); color: var(--late); }
/* Status shown by a shape (dot) as well as colour, so it reads in B/W and for colour-blind staff */
[class*="chip-s-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; flex: 0 0 7px; }
.chip-btn { font: inherit; font-size: .82rem; background: var(--card); border: 1px solid var(--line); color: var(--navy); border-radius: 10px; padding: 5px 12px; cursor: pointer; }
.chip-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

/* Rows */
.rows { list-style: none; padding: 0; margin: 0; }
.rows { border-radius: var(--radius-sm); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line-2); transition: background .08s; }
.row:nth-child(even) { background: var(--row-alt); }
.row:hover { background: var(--gold-soft); }
.row:hover .row-title { color: var(--navy); }
.row:last-child { border-bottom: 0; }
.row[aria-current="true"], .row.selected { background: var(--gold-soft); box-shadow: inset 4px 0 0 var(--gold); }
.row-main { flex: 1; min-width: 0; display: block; color: inherit; }
a.row-main:hover { text-decoration: none; }
.row-title { color: var(--ink); font-weight: 600; display: block; }
.row-title:hover { color: var(--link, var(--navy-3)); }
.row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-3); font-size: .82rem; margin-top: 2px; }
.row-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.notif-list .unread .row-title { color: var(--navy); }
.dot-new { width: 9px; height: 9px; border-radius: 50%; background: var(--late); flex: 0 0 9px; }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; }
.fold > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); }
.fold:not([open]) > summary::after { content: "▸"; }
.fold[open] > summary { margin-bottom: 8px; }

/* Top 3 */
.top3 { display: grid; gap: 12px; }
.top-card { display: flex; gap: 16px; margin: 0; }
.top-num { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.top-body { flex: 1; min-width: 0; }
.top-title { font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.inline-menu { position: relative; }
.inline-menu > summary { list-style: none; }
.inline-menu > summary::-webkit-details-marker { display: none; }
.menu { position: absolute; z-index: 10; top: 100%; left: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); padding: 4px; min-width: 170px; margin-top: 4px; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; font: inherit; border-radius: 6px; cursor: pointer; }
.menu-item:hover { background: var(--line-2); }
.ai-panel { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ai-out { white-space: pre-wrap; font-size: .9rem; color: var(--ink); }
.ai-out:not(:empty) { background: var(--gold-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }
.ai-out.big { font-size: .95rem; }
.ai-out .copy { display: block; margin-top: 6px; }
.card-title { display: block; font-weight: 650; color: var(--ink); margin-bottom: 4px; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack > label { font-weight: 600; font-size: .88rem; margin-top: 4px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, legend { font-weight: 600; font-size: .88rem; color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0; }
input, select, textarea { font: inherit; font-size: .95rem; color: var(--ink); background: var(--card); border: 1px solid #CDD3DB; border-radius: 8px; padding: 9px 11px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(30, 67, 102, .15); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--navy); }
input[type="file"] { padding: 6px; }
textarea { resize: vertical; }
.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: .9rem; cursor: pointer; }
.check input { margin-top: 3px; }
.checks { gap: 8px; }
.form-wide { max-width: 760px; }
.hint:not(:empty) { font-size: .85rem; background: var(--gold-soft); color: var(--gold-ink); border-radius: 8px; padding: 7px 10px; }
.hint button { font: inherit; background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; cursor: pointer; font-weight: 600; }
.hint ul { margin: 4px 0 0; }
.inline-field { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.inline-field input { width: 90px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: .85rem; background: var(--card); }
.seg input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.seg input:checked + span small { color: #C9D3DF; }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.seg-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; }
.seg-wide span { padding: 10px 12px; height: 100%; }
.seg small { color: var(--ink-3); font-size: .78rem; }
.hours { display: grid; gap: 8px; margin-top: 6px; }
.hours-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-top: 8px; }
.filter-box { margin-bottom: 14px; max-width: 360px; }
.code-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 14px; }
.tab-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-right: 10px; border-right: 1px solid var(--line); }
.tab-group:last-child { border-right: 0; padding-right: 0; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: .86rem; background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
.tab:hover { color: var(--navy); border-color: var(--gold); text-decoration: none; }
.tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--line-2); color: var(--ink-3); font-size: .72rem; font-weight: 700; }
.tab.on .tab-n { background: rgba(255,255,255,.22); color: #fff; }
.tab-n.zero { opacity: .45; }
.tab-alert { border-color: var(--late); color: var(--late); }
.tab-alert .tab-n { background: var(--late-soft); color: var(--late); }
.tab-alert.on { background: var(--late); border-color: var(--late); color: #fff; }
/* One slim utility line: search · period · collapsible person/company filters. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar-search { flex: 1 1 220px; min-width: 0; }
.toolbar-period { flex: 0 0 auto; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .86rem; font-weight: 600; }
.morefilters { position: relative; }
.morefilters > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.morefilters > summary::-webkit-details-marker { display: none; }
.morefilters > summary:hover { border-color: var(--gold); color: var(--navy); }
.morefilters[open] > summary { border-color: var(--gold); color: var(--navy); }
.morefilters .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }
.morefilters-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--row-alt); flex-basis: 100%; }
.morefilters-body select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .86rem; }
.clear-link { font-size: .84rem; font-weight: 600; color: var(--ink-3); }
.clear-link:hover { color: var(--late); }

/* Flash */
.flash { border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; font-weight: 500; border: 1px solid; }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: #BFE3CD; }
.flash-error { background: var(--late-soft); color: var(--late); border-color: #F6C4BE; }
.flash-info { background: var(--gold-soft); color: var(--gold-ink); border-color: #A9DED7; }

/* People */
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--navy-2); color: var(--gold); font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.avatar.sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .7rem; }
.avatar.lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.15rem; }
.avatar.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
/* Live presence: a green blinking dot on the avatar when a person is online now. */
.avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.presence-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.avatar-wrap .presence-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid var(--card); background: var(--line-2); opacity: 0; transition: opacity .2s ease; }
.avatar-wrap .presence-dot.is-online { opacity: 1; background: #22C55E; animation: tt-presence 1.6s ease-in-out infinite; }
.online-pip { display: inline-flex; align-items: center; gap: 5px; }
.online-pip .presence-dot { width: 9px; height: 9px; background: #22C55E; animation: tt-presence 1.6s ease-in-out infinite; }
@keyframes tt-presence { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .presence-dot { animation: none !important; } }
:root[data-calm="1"] .presence-dot { animation: none !important; }
/* "Online now" glance strip on the main screen. */
.online-now .online-strip { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-start; }
.online-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; color: inherit; }
.online-chip small { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.online-chip:hover small { color: var(--ink); }
.online-empty { margin: 2px 0; }
.profile-top { display: flex; align-items: center; gap: 16px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hub-card { display: flex; flex-direction: column; gap: 3px; margin: 0; text-decoration: none; transition: border-color .12s, transform .12s; }
.hub-card:hover { border-color: var(--gold); transform: translateY(-1px); text-decoration: none; }
.hub-card .hub-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-ink); margin-bottom: 4px; }
.hub-card b { color: var(--ink); }
.hub-card small { line-height: 1.35; }
.cp-score { display: flex; gap: 18px; align-items: center; }
.score-badge { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; line-height: 1; color: #fff; box-shadow: var(--shadow); }
.score-badge b { font-size: 2rem; font-weight: 800; }
.score-badge span { font-size: .85rem; font-weight: 700; opacity: .92; margin-top: 2px; }
.score-badge.grade-A { background: linear-gradient(135deg, #1F7A4D, #2E9D66); }
.score-badge.grade-B { background: linear-gradient(135deg, #B8912E, #3CC7B6); }
.score-badge.grade-C { background: linear-gradient(135deg, #C47A1B, #E0962F); }
.score-badge.grade-D { background: linear-gradient(135deg, #B42318, #D1483C); }
.score-main { flex: 1 1 auto; min-width: 0; }
.rank-lines { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.score-bars { display: grid; gap: 6px; max-width: 460px; }
.sbar { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.sbar-l { flex: 0 0 96px; color: var(--ink-2); }
.sbar-track { flex: 1 1 auto; height: 8px; background: var(--row-alt); border-radius: 5px; overflow: hidden; }
.sbar-fill { display: block; height: 100%; background: var(--gold); border-radius: 5px; }
.sbar-v { flex: 0 0 28px; text-align: right; font-weight: 700; color: var(--ink-2); }
@media (max-width: 560px) { .cp-score { flex-direction: column; align-items: flex-start; } }
.code-block { background: var(--navy); color: #E7ECF2; padding: 12px 14px; border-radius: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; overflow-x: auto; white-space: pre; margin: 8px 0; }
.src { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.src-auto { background: var(--ok-soft); color: var(--ok); }
.src-manual { background: var(--gold-soft); color: var(--gold-ink); }
/* Help centre */
.help-search { position: sticky; top: 56px; z-index: 5; margin-bottom: 16px; }
.help-search .hs-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.help-search input { width: 100%; padding: 13px 16px 13px 42px; font-size: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.help-none { text-align: center; color: var(--ink-3); padding: 18px; }
.help-grp { margin-bottom: 22px; }
.help-h { font-size: .95rem; margin: 0 0 10px; color: var(--ink-2); }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.help-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.help-card h3 { font-size: .95rem; margin: 0 0 5px; }
.help-card p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.help-card .chip-focus { font-size: .7rem; }
.side .avatar { background: var(--navy-3); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.person-card { color: inherit; margin: 0; }
.person-card:hover { border-color: var(--gold); text-decoration: none; }
.person-head { display: flex; align-items: center; gap: 10px; }
.person-head > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mini-stats { display: flex; gap: 12px; font-size: .82rem; color: var(--ink-2); margin-top: 10px; flex-wrap: wrap; }
.mini-stats b { color: var(--ink); }
.person-top { justify-content: flex-start; }
.person-top > div { flex: 1; }
.person-link { display: flex; align-items: center; gap: 10px; color: inherit; }
.person-link span:last-child { display: flex; flex-direction: column; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { display: flex; flex-direction: column; margin: 0; }
.kpi b { font-size: 1.6rem; color: var(--navy); }
.kpi span { color: var(--ink-3); font-size: .82rem; }
.mini-list { list-style: none; padding: 0; font-size: .86rem; }
.mini-list li { padding: 3px 0; }

/* Feed and timeline */
.feed { list-style: none; padding: 0; margin: 0; }
.feed > li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.feed > li:last-child { border-bottom: 0; }
.feed p { margin: 0 0 2px; }
.act-feed > li { align-items: flex-start; }
.act-tag { display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 5px; padding: 0 6px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.act-status { background: #E7F0FD; color: #175CD3; }
.act-delay { background: var(--late-soft); color: var(--late); }
.act-comment { background: var(--line-2); color: var(--ink-2); }
.act-meeting { background: var(--gold-soft); color: var(--gold-ink); }
.act-verify { background: var(--ok-soft); color: var(--ok); }
.act-system { background: var(--line-2); color: var(--ink-3); }

/* Dashboard with a right-side live task-news rail */
.dash-wrap { display: flex; gap: 20px; align-items: flex-start; }
.dash-main { flex: 999 1 560px; min-width: 0; }
.news-rail { flex: 0 0 330px; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 72px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; }
.news-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: var(--navy); color: #fff; font-weight: 650; flex: 0 0 auto; }
.news-live { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #FF9B91; letter-spacing: .04em; }
.news-live i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A4D; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.news-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.news-item { border-top: 1px solid var(--line-2); border-left: 4px solid var(--line); }
.news-item:first-child { border-top: 0; }
.news-item a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; color: inherit; text-decoration: none; }
.news-item a:hover { background: var(--gold-soft); }
.news-line { font-size: .86rem; color: var(--ink); }
.news-task { font-size: .82rem; color: var(--ink-2); }
.news-ago { font-size: .72rem; color: var(--ink-3); }
.news-status { border-left-color: #175CD3; }
.news-meeting { border-left-color: var(--gold); }
.news-delay { border-left-color: var(--late); }
.news-verify, .news-system { border-left-color: var(--ok); }
.news-comment { border-left-color: var(--navy-3); }
.news-empty { padding: 14px; color: var(--ink-3); font-size: .85rem; }
.news-all { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--line-2); font-weight: 650; font-size: .85rem; flex: 0 0 auto; }
@media (max-width: 900px) {
  .dash-wrap { flex-wrap: wrap; }
  .news-rail { flex-basis: 100%; position: static; max-height: 460px; }
}

.focus-list { margin: 0; padding-left: 1.6em; }
.focus-list > li { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.focus-list > li::marker { color: var(--gold-ink); font-weight: 700; }
.focus-list.big { padding: 18px 18px 18px 42px; }
.timeline { list-style: none; padding: 0; margin: 0 0 8px; position: relative; }
.timeline > li { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.timeline > li > div { flex: 1; min-width: 0; }
.timeline p { margin: 0 0 3px; }
.timeline .dot { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.timeline.compact > li { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.ev-system p:not(.small) { color: var(--ink-2); font-size: .9rem; }
.ev-delay p:not(.small) { color: var(--late); }
.file { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 600; }
.file .ic { width: 16px; height: 16px; }

/* Task page */
/* Delivery-style status tracker */
.tracker { list-style: none; display: flex; padding: 0; margin: 16px 0 6px; overflow-x: auto; scrollbar-width: none; }
.tracker::-webkit-scrollbar { display: none; }
.trk { flex: 1 1 0; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.trk::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.trk:first-child::before { display: none; }
.trk.done::before, .trk.cur::before { background: var(--gold); }
.trk-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--line-2); color: var(--ink-3); border: 2px solid var(--card); }
.trk.done .trk-dot { background: var(--ok); color: #fff; }
.trk.cur .trk-dot { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 4px var(--gold-soft); }
.trk.trk-late .trk-dot { background: var(--late); color: #fff; box-shadow: 0 0 0 4px var(--late-soft); }
.trk-lbl { font-size: .78rem; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.trk.cur .trk-lbl { color: var(--navy); font-weight: 700; }
.trk.future .trk-lbl { color: var(--ink-3); }
.trk-sub { font-size: .7rem; color: var(--ink-3); }
.extend > summary { cursor: pointer; padding: 2px 0; }
.extend[open] { padding-bottom: 16px; }

.task-head h1 { font-size: 1.45rem; margin-top: 6px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 18px; margin: 12px 0; }
.facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.respond select { width: auto; min-width: 160px; }

/* Tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table tbody tr:nth-child(even) { background: var(--row-alt); }
.table tbody tr:hover { background: var(--gold-soft); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td .progress { width: 90px; margin: 6px 0 2px; }
.table small { display: block; }
.row-edit[open] { position: relative; }
.row-edit[open] .person-form { position: absolute; right: 0; z-index: 15; width: min(560px, 90vw); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }

/* Approvals deck */
.approve-card h2 { font-size: 1.25rem; margin-top: 4px; }
.approve-card h2 a { color: var(--ink); }

/* Calendar */
.cal-wrap { overflow-x: auto; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal-h { background: var(--line-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 6px 8px; font-weight: 600; }
.cal-d { background: var(--card); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.cal-d.empty { background: var(--bg); }
.cal-d.today { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-n { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.cal-t { font-size: .74rem; background: var(--line-2); color: var(--ink); border-radius: 4px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-t.late { background: var(--late-soft); color: var(--late); }
.cal-t.done { color: var(--ink-3); text-decoration: line-through; }
.month-label { min-width: 130px; text-align: center; color: var(--navy); }

/* Rules and help */
.rules ol { margin: 0; }
.rules li { padding: 3px 0; }
.help-card { background: var(--gold-soft); border-color: #A9DED7; }

/* Guest */
body.guest { background: var(--navy); display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.guest-box { width: 100%; max-width: 420px; }
.guest .brand-lg { color: #fff; }
.guest .card { padding: 26px; }

/* Mobile */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .side { display: none; }
  .topbar { padding: 10px 16px; }
  .topbar .brand-sm { display: flex; }
  .main { padding: 16px 16px 96px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { padding: 20px; border-radius: 14px; }
  .hero h1 { font-size: 1.4rem; }
  .hero { gap: 14px; }
  .hero::after { display: none; }
  .quote { font-size: .92rem; margin-top: 10px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat { padding: 8px 6px; text-align: center; }
  .stat b { font-size: 1.3rem; }
  .stat span { font-size: .68rem; line-height: 1.2; }
  .row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .row-chips { justify-content: flex-start; }
  .top-card { gap: 12px; }
  .top-num { flex-basis: 32px; height: 32px; font-size: .95rem; }
  .bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; }
  .bottom > a, .bottom summary { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .7rem; color: var(--ink-3); padding: 4px 8px; list-style: none; cursor: pointer; }
  .bottom summary::-webkit-details-marker { display: none; }
  .bottom a[aria-current="page"] { color: var(--navy); font-weight: 700; }
  .bottom .add { width: 50px; height: 50px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; margin-top: -18px; box-shadow: 0 4px 12px rgba(30, 35, 41, .25); }
  .bottom .ic-wrap { position: relative; display: inline-flex; }
  .bottom .ic-wrap .badge { top: -6px; right: -10px; }
  .more { position: static; }
  /* Mobile menu as a bottom sheet */
  .sheet-wrap { display: none; }
  .more[open] .sheet-wrap { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(8, 16, 28, .5); }
  .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 20px 20px 0 0; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 -12px 40px rgba(0, 0, 0, .3); }
  .sheet::before { content: ""; width: 42px; height: 4px; background: var(--line); border-radius: 3px; margin: 10px auto 2px; flex: 0 0 auto; }
  .sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 10px; border-bottom: 1px solid var(--line-2); }
  .sheet-me { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: 1; min-width: 0; }
  .sheet-me .who { display: flex; flex-direction: column; min-width: 0; }
  .sheet-me .who b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-me .who small { color: var(--ink-3); font-size: .78rem; }
  .sheet-x { background: var(--row-alt); border: 0; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); font-size: 1rem; cursor: pointer; flex: 0 0 auto; }
  .sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 10px; flex: 1 1 auto; }
  .sheet-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; padding: 12px 8px 4px; }
  .sheet-sec { display: grid; gap: 2px; }
  .sheet-sec a { display: flex; align-items: center; gap: 13px; padding: 13px 10px; border-radius: 11px; color: var(--ink); font-weight: 500; }
  .sheet-sec a .ic { color: var(--ink-3); flex: 0 0 auto; }
  .sheet-sec a[aria-current="page"] { background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; }
  .sheet-sec a[aria-current="page"] .ic { color: var(--gold-ink); }
  .sheet-sec .count { margin-left: auto; background: var(--late); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
  .sheet-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); }
  .sheet-foot .link { font-weight: 600; color: var(--ink-2); }
  .row-edit[open] .person-form { position: static; width: auto; box-shadow: none; padding: 10px 0; border: 0; }
}

/* Payroll pipeline on the HR home */
.pipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; margin: 10px 0 4px; }
.pipe-step { border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: var(--card); }
.pipe-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.pipe-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .82rem; background: var(--line-2); color: var(--ink-2); }
.pipe-badge { font-size: .7rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.pipe-title { font-weight: 700; font-size: .94rem; line-height: 1.25; }
.pipe-meta { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.pipe-done .pipe-num { background: var(--ok); color: #fff; }
.pipe-done .pipe-badge { color: #1F8A52; }
.pipe-next { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pipe-next .pipe-num { background: var(--navy); color: #fff; }
.pipe-next .pipe-badge { color: var(--gold-ink); }
.pipe-auto .pipe-badge { color: #2563C9; }
.pipe-your { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 12px; padding: 13px 16px; margin-top: 12px; }
:root:not([data-theme="light"]) .pipe-done .pipe-badge, :root[data-theme="dark"] .pipe-done .pipe-badge { color: #7FD0A4; }

/* Accounts "Tasks from HR and payroll" list */
.paytasks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.paytask a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; color: inherit; text-decoration: none; background: var(--card); }
.paytask a:hover { border-color: var(--navy-3); background: var(--row-alt); }
.paytask.hot a { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.paytask.pending a { opacity: .72; }
.pt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.pt-owner { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.pt-chip { font-size: .72rem; font-weight: 700; color: var(--ink-3); background: var(--line-2); border-radius: 999px; padding: 2px 9px; }
.pt-chip.you { background: var(--gold-soft); color: var(--gold-ink); }
.pt-title { font-weight: 700; font-size: 1rem; }
.pt-sub { font-size: .85rem; color: var(--ink-2); margin-top: 2px; }
.pt-due { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }

/* Accounts "Check salary" review checklist */
.rev-checks { display: grid; gap: 10px; }
.rev-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--gold-soft); cursor: pointer; font-size: .92rem; }
.rev-item input { margin-top: 2px; flex: 0 0 auto; width: 17px; height: 17px; }
.rev-item:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); }

/* Task page: two columns on desktop so the right space is used and it fits ~1 screen */
.task-wrap { display: flex; gap: 20px; align-items: flex-start; }
.task-wrap > .task-main { flex: 3 1 0; min-width: 0; }
.task-wrap > .task-side { flex: 2 1 0; min-width: 0; }
.task-main > :first-child, .task-side > :first-child { margin-top: 0; }
@media (max-width: 860px) { .task-wrap { display: block; } .task-side { margin-top: 14px; } }
a.kpi { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
a.kpi:hover { border-color: var(--navy-3); transform: translateY(-1px); }

/* Preview-as-employee banner */
.impersonate-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: var(--gold); color: var(--navy); padding: 8px 16px; font-weight: 600; font-size: .9rem; }
.impersonate-bar b { font-weight: 800; }
.impersonate-bar form { margin: 0; }
.btn-exitprev { background: var(--navy); color: #fff; padding: 4px 13px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-exitprev:hover { background: var(--navy-2); }
.person-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.person-actions form { margin: 0; }

/* Name / company picker (mobile-friendly replacement for native datalist) */
.combo { position: relative; }
.combo > input { padding-right: 34px; }
.combo-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--line-2); color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
.combo-clear:hover { background: var(--late-soft); color: var(--late); }
.combo-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
.combo-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; padding: 11px 12px; border-radius: 8px; cursor: pointer; color: var(--ink); font: inherit; }
.combo-opt:hover, .combo-opt.on { background: var(--gold-soft); }
.combo-opt .combo-name { font-weight: 600; font-size: .95rem; }
.combo-opt .combo-sub { font-size: .8rem; color: var(--ink-3); }
.flow-note { margin: 6px 0 0; padding: 8px 11px; border-radius: 9px; font-size: .86rem; font-weight: 600; }
.flow-note.flow-direct { background: var(--ok-soft, rgba(45,160,100,.12)); color: var(--ok-ink, #1b7a4b); }
.flow-note.flow-request { background: var(--gold-soft); color: var(--gold-ink); }

/* Year-end reward grid */
.rwgrid td { vertical-align: middle; }
.rwgrid input[type="text"], .rwgrid select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; }
.rwgrid input[readonly], .rwgrid select:disabled { background: var(--row-alt); color: var(--ink-3); border-style: dashed; }
.rwgrid .rw-rate { color: var(--gold-ink); }
.rwgrid tr.not-elig td:first-child { opacity: .62; }
.rw-act .forms { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rw-act .forms form { margin: 0; }

/* Installed app (standalone): reclaim the top space the browser bar used to take */
@media all and (display-mode: standalone) {
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .topbar .iconbtn[aria-label="Help"] { display: none; }
  body { padding-top: env(safe-area-inset-top); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .side, .topbar, .bottom, .actions, form { display: none !important; } .card { box-shadow: none; } }

/* ── Recognition: appreciation, reliability, CareerPass preview ───────────── */
.clap-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.clap-list li { background: var(--ok-soft); color: var(--ink); border-radius: var(--radius-sm); padding: 7px 11px; font-size: .9rem; }
.clap-ico { margin-right: 2px; }
.ap-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-row input { flex: 1 1 220px; min-width: 0; }
#ap-suggest { white-space: nowrap; }

.rel-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.rel-pill { font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--row-alt); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; }
.rel-pill b { color: var(--ink); }
.rel-pill.rel-good { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.rel-pill.rel-good b { color: var(--ok); }
.rel-pill.rel-clap { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.rel-pill.rel-clap b { color: var(--gold-ink); }

.cp-card { display: flex; align-items: center; gap: 16px; }
.cp-ring { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--row-alt); border: 3px solid var(--line-2); line-height: 1; }
.cp-ring b { font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.cp-ring span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-top: 2px; }
.cp-ring.cp-g-ap, .cp-ring.cp-g-a { border-color: var(--ok); } .cp-ring.cp-g-ap b, .cp-ring.cp-g-a b { color: var(--ok); }
.cp-ring.cp-g-b { border-color: var(--gold); } .cp-ring.cp-g-b b { color: var(--gold-ink); }
.cp-ring.cp-g-c, .cp-ring.cp-g-d { border-color: var(--late); }
.cp-body { flex: 1; min-width: 0; }
.cp-sub { margin: 2px 0 8px; color: var(--ink-2); font-size: .9rem; }
.cp-sub b { color: var(--ink); }
.cp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-badge { font-size: .78rem; font-weight: 700; background: var(--row-alt); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; color: var(--ink-2); }
.cp-badge.cp-fire { background: var(--late-soft); border-color: transparent; color: var(--late); }
.cp-badge.cp-new { background: var(--ok-soft); border-color: transparent; color: var(--ok); }

.banner-nudge { background: var(--late-soft); color: var(--late); border-color: transparent; }

/* ── Done list: sticky day headers so scrolling reads as a timeline ───────── */
.done-timeline { position: relative; }
.date-head { list-style: none; position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--card); padding: 10px 2px 6px; margin: 2px 0;
  border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); font-size: .92rem; }
.date-head .date-count { font-weight: 600; font-size: .78rem; color: var(--ink-3); }
.date-head:first-child { padding-top: 2px; }

/* ── Day/Week segmented toggle on the Done list ──────────────────────────── */
.list-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.vtoggle { display: inline-flex; background: var(--line-2); border-radius: 8px; padding: 2px; gap: 2px; }
.vtoggle-btn { font-size: .8rem; font-weight: 600; color: var(--ink-2); padding: 4px 12px; border-radius: 6px; text-decoration: none; }
.vtoggle-btn.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.vtoggle-btn:hover:not(.on) { color: var(--ink); }

/* ── Check-in "why it matters" explainer ─────────────────────────────────── */
.why-box { background: var(--blue-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.why-box > b { display: block; margin-bottom: 6px; color: var(--ink); }
.why-box ul { margin: 0 0 8px; padding-left: 18px; }
.why-box li { margin: 3px 0; font-size: .9rem; color: var(--ink-2); }
.why-box li b { color: var(--ink); }

/* ── Master "send to staff" hold switch ──────────────────────────────────── */
.hold-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.hold-box.hold-off { background: var(--amber-soft); border-color: transparent; }
.hold-box.hold-on { background: var(--ok-soft); border-color: transparent; }
.hold-box .help b { color: var(--ink); }


/* ── First-login welcome screen ──────────────────────────────────────────── */
body.guest:has(.welcome) .guest-box { max-width: 560px; }
.welcome { text-align: left; }
.welcome-hi { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 6px 0 14px; }
.welcome-body { color: rgba(237, 242, 248, .86); line-height: 1.7; font-size: 1.02rem; }
.welcome-sign { margin: 14px 0 0; font-weight: 700; color: var(--gold); }
.welcome-cp { display: flex; align-items: flex-start; gap: 10px; background: var(--gold-soft); color: var(--gold-ink); border-radius: var(--radius-sm); padding: 12px 14px; margin: 18px 0; font-size: .92rem; line-height: 1.55; }
.welcome-cp b { color: var(--gold-ink); }
.welcome-cp-badge { font-weight: 800; white-space: nowrap; }
.btn-lg { padding: 13px 20px; font-size: 1.05rem; }

/* ── Employee privacy page ───────────────────────────────────────────────── */
.priv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0; }
.priv-card { padding: 16px 16px 14px; }
.priv-ico { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.priv-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); }
.priv-card p { margin: 0; color: var(--ink-2); line-height: 1.55; font-size: .92rem; }
.priv-card p b { color: var(--ink); }
.lead { font-size: 1.05rem; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ── People list: return to the person you just edited ───────────────────── */
.person-row { scroll-margin-top: 80px; }
.person-row:target td { animation: rowflash 1.8s ease; }
@keyframes rowflash { 0%, 35% { background: var(--gold-soft); } 100% { background: transparent; } }

/* ── Organisation chart (branching top-down tree) ────────────────────────── */
.org-controls { display: flex; gap: 6px; }
.org-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.org-leg { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.org-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-3); }
.org-dot.b0 { background: var(--navy-3); } .org-dot.b1 { background: var(--gold); }
.org-dot.b2 { background: var(--ok); }    .org-dot.b3 { background: var(--amber); }
.org-dot.b4 { background: var(--blue); }  .org-dot.b5 { background: var(--late); }

.org-wrap { overflow-x: auto; padding: 8px 4px 16px; }

/* Classic centred org tree: each parent's reports sit side by side beneath it.
   Compact sizing so a whole team fits on screen with little or no scrolling. */
.org-tree ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 15px 0 0; position: relative; }
.org-tree li { list-style: none; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 3px; }
/* connectors */
.org-tree li::before, .org-tree li::after { content: ""; position: absolute; top: 0; width: 50%; height: 15px; border-top: 1.5px solid var(--line-2); }
.org-tree li::before { right: 50%; }
.org-tree li::after { left: 50%; border-left: 1.5px solid var(--line-2); }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0; }
.org-tree li:last-child::before { border-right: 1.5px solid var(--line-2); }
.org-tree > ul { padding-top: 0; }
.org-tree > ul > li::before, .org-tree > ul > li::after { display: none; }
.org-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 15px; border-left: 1.5px solid var(--line-2); }

.org-node { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px 4px 8px; min-width: 96px; max-width: 150px; position: relative; box-shadow: var(--shadow); }
.org-node .org-name { font-weight: 700; font-size: .78rem; color: var(--ink); text-decoration: none; line-height: 1.15; }
.org-node .org-name:hover { color: var(--gold-ink); }
.org-meta { font-size: .64rem; color: var(--ink-3); line-height: 1.2; }
.org-dot { width: 7px; height: 7px; margin-bottom: 2px; }
.org-boss { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); min-width: 120px; max-width: 170px; }
.org-head { background: var(--row-alt); border-color: var(--line-2); }

/* the report-count chip doubles as a collapse toggle */
.org-count { position: absolute; top: 4px; right: 4px; font-size: .6rem; font-weight: 700; color: var(--ink-2); background: var(--row-alt); border: 1px solid var(--line); border-radius: 9px; min-width: 15px; height: 15px; padding: 0 4px; cursor: pointer; line-height: 1; }
.org-count:hover { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent; }
li.collapsed > .org-node .org-count::after { content: "+"; margin-left: 1px; }
li.collapsed > ul { display: none; }

/* ── Org chart "By team" view: each head and their team, stacked ─────────── */
.team-blocks { display: grid; gap: 14px; }
.team-block { padding: 14px 16px; scroll-margin-top: 80px; }
.team-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.team-head .org-dot { align-self: center; }
.team-boss-name { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.team-boss-name:hover { color: var(--gold-ink); }
.team-boss-meta { font-size: .82rem; color: var(--ink-3); }
.team-count { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--ink-2); background: var(--row-alt); border-radius: 20px; padding: 3px 11px; }
.team-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.team-members li { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: var(--radius-sm); flex-wrap: wrap; }
.team-members li:hover { background: var(--row-alt); }
.team-members .org-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.team-members .org-name:hover { color: var(--gold-ink); }
.team-members .org-meta { font-size: .78rem; color: var(--ink-3); }
.team-jump { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--gold-ink); text-decoration: none; background: var(--gold-soft); padding: 2px 9px; border-radius: 20px; }

/* ── Approvals list with bulk approve ────────────────────────────────────── */
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 10px; position: sticky; top: 8px; z-index: 3; }
.approve-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.approve-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.ar-pick { flex: 0 0 auto; padding-top: 2px; }
.ar-pick input { width: 18px; height: 18px; }
.ar-body { flex: 1; min-width: 0; }
.ar-title { font-weight: 700; color: var(--ink); text-decoration: none; }
.ar-title:hover { color: var(--gold-ink); }
.ar-meta { font-size: .82rem; color: var(--ink-3); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ar-note { font-size: .86rem; color: var(--ink-2); margin: 6px 0 0; }
.ar-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.bulk-foot { margin-top: 12px; }
@media (max-width: 560px) {
  .approve-row { flex-wrap: wrap; }
  .ar-actions { flex-direction: row; width: 100%; }
  .ar-actions .btn { flex: 1; }
}

/* ── Home "Needs you now" pulse strip ────────────────────────────────────── */
.pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.pulse-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-right: 2px; }
.pulse-clear { font-size: .9rem; color: var(--ok); font-weight: 600; background: var(--ok-soft); padding: 5px 12px; border-radius: 20px; }
.pulse-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .88rem; font-weight: 600; text-decoration: none; padding: 5px 13px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.pulse-pill b { font-size: 1rem; }
.pulse-pill:hover { border-color: var(--line-2); }
.pulse-pill.p-late { background: var(--late-soft); border-color: transparent; color: var(--late); }
.pulse-pill.p-late b { color: var(--late); }
.pulse-pill.p-appr { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.pulse-pill.p-appr b { color: var(--gold-ink); }
.pulse-pill.p-chk { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.pulse-pill.p-chk b { color: var(--amber); }

/* ── Jump-search dropdown ────────────────────────────────────────────────── */
.side-search { position: relative; }
.search-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.14)); max-height: 60vh; overflow-y: auto; padding: 4px; }
.search-grp { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 7px 10px 3px; }
.search-opt { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: var(--radius-sm); text-decoration: none; }
.search-opt:hover, .search-opt.on { background: var(--row-alt); }
.search-name { font-weight: 600; color: var(--ink); font-size: .9rem; }
.search-sub { font-size: .76rem; color: var(--ink-3); }
.search-empty { padding: 10px; font-size: .84rem; color: var(--ink-3); }
.srow { display: flex; flex-direction: column; gap: 1px; padding: 9px 6px; text-decoration: none; border-radius: var(--radius-sm); }
.srow:hover { background: var(--row-alt); }
.srow-name { font-weight: 600; color: var(--ink); }
.srow-sub { font-size: .8rem; color: var(--ink-3); }

/* ── Task checklist ──────────────────────────────────────────────────────── */
.ck-prog-label { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.ck-bar { height: 6px; background: var(--line-2); border-radius: 4px; overflow: hidden; margin: 2px 0 12px; }
.ck-bar span { display: block; height: 100%; background: var(--ok); border-radius: 4px; transition: width .2s; }
.ck-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.ck-item { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--radius-sm); }
.ck-item:hover { background: var(--row-alt); }
.ck-item:hover .ck-x { opacity: 1; }
.ck-toggle { display: flex; margin: 0; }
.ck-check { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--line-2); border-radius: 6px; background: var(--card); color: #fff; font-size: .8rem; font-weight: 800; cursor: pointer; display: grid; place-content: center; padding: 0; }
.ck-on .ck-check { background: var(--ok); border-color: var(--ok); }
.ck-text { flex: 1; min-width: 0; color: var(--ink); }
.ck-on .ck-text { color: var(--ink-3); text-decoration: line-through; }
.ck-del { margin: 0; }
.ck-x { background: none; border: 0; color: var(--ink-3); font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0; padding: 0 4px; }
.ck-x:hover { color: var(--late); }
.ck-add { display: flex; gap: 8px; }
.ck-add input { flex: 1; }

/* ── Organisation chart: Vertical (indented top-down) view ───────────────── */
.vtree-wrap { padding: 10px 14px; }
.vtree, .vtree ul { list-style: none; margin: 0; padding: 0; }
.vtree ul { margin-left: 12px; padding-left: 16px; border-left: 1.5px solid var(--line-2); }
.vtree li { position: relative; }
.vtree ul > li::before { content: ""; position: absolute; left: -16px; top: 18px; width: 12px; height: 1.5px; background: var(--line-2); }
.vt-node { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 7px 10px 7px 9px; margin: 3px 0; border-radius: var(--radius-sm); position: relative; }
.vt-node:hover { background: var(--row-alt); }
.vt-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.vt-name:hover { color: var(--gold-ink); }
.vt-meta { font-size: .76rem; color: var(--ink-3); }
.vt-boss { background: var(--gold-soft); }
.vt-boss .vt-name { font-weight: 800; }
.vt-head { background: var(--row-alt); }
.vt-head .vt-name { font-weight: 700; }
.vt-node .org-count { position: static; margin-left: auto; }

/* ── Rename affordance next to a task title ──────────────────────────────── */
.task-title { display: inline; }
.title-edit { border: 0; background: none; cursor: pointer; font-size: .85em; color: var(--ink-3); padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.title-edit:hover { background: var(--gold-soft); color: var(--gold-ink); }

/* ── Inline rename from a task row ───────────────────────────────────────── */
.row { position: relative; }
.row-rename { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: .95rem; padding: 4px 8px; border-radius: 6px; opacity: 0; flex: 0 0 auto; align-self: center; }
.row:hover .row-rename, .row:focus-within .row-rename { opacity: 1; }
.row-rename:hover { background: var(--gold-soft); color: var(--gold-ink); }
.row-rename-form { display: none; }
.row.renaming .row-main, .row.renaming .row-chips, .row.renaming .row-rename { display: none; }
.row.renaming .row-rename-form { display: flex; flex: 1; gap: 8px; align-items: center; width: 100%; }
.row-rename-form input[name="title"] { flex: 1; min-width: 0; }
@media (hover: none) { .row-rename { opacity: 1; } }

/* Quick tour overlay ------------------------------------------------------ */
.tour[hidden] { display: none; }
.tour { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tour-backdrop { position: absolute; inset: 0; background: rgba(30, 35, 41, .55); }
.tour-card { position: relative; z-index: 1; width: 100%; max-width: 436px; background: var(--card); color: var(--ink); border-radius: 18px; box-shadow: 0 18px 54px rgba(16, 24, 40, .34); padding: 0; overflow: hidden; }
.tour-x { position: absolute; top: 12px; right: 12px; z-index: 2; border: 0; width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .78); color: #1E2329; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 50%; box-shadow: 0 1px 4px rgba(16, 24, 40, .14); }
.tour-x:hover { background: #fff; }
.tour-slides { display: block; }
.tour-slide { text-align: center; }
.tour-slide[hidden] { display: none; }
.tour-hero { height: 196px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #e8eff7 0%, #f2f6fb 48%, #fbf4e4 100%); }
:root:not([data-theme="light"]) .tour-hero { background: linear-gradient(140deg, #dbe6f2 0%, #e9eff7 48%, #f6edd8 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour-hero { background: linear-gradient(140deg, #dbe6f2 0%, #e9eff7 48%, #f6edd8 100%); } }
:root[data-theme="dark"] .tour-hero { background: linear-gradient(140deg, #dbe6f2 0%, #e9eff7 48%, #f6edd8 100%); }
.tour-hero svg { width: 84%; max-width: 300px; height: auto; }
.tour-body { padding: 20px 28px 4px; }
.tour-slide h2 { font-size: 20px; margin: 0 0 8px; color: var(--ink); }
.tour-slide p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0 auto; max-width: 36ch; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px 18px; margin-top: 14px; border-top: 1px solid var(--line); }
.tour-never { white-space: nowrap; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 2px; text-decoration: underline; text-underline-offset: 2px; }
.tour-never:hover { color: var(--ink-2); }
.tour-dots { display: flex; gap: 6px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .15s, transform .15s; }
.tour-dot.on { background: var(--gold); transform: scale(1.25); }
.tour-btns { display: flex; gap: 8px; }
body.tour-open { overflow: hidden; }

/* Growth charts (person page) --------------------------------------------- */
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.growth-chart { min-width: 0; }
.growth-h { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.linechart { width: 100%; height: auto; display: block; }
.lc-axis { fill: var(--ink-3); font-size: 10px; }
.lc-val { fill: var(--ink); font-size: 11px; font-weight: 700; }
@media (max-width: 700px) { .growth-grid { grid-template-columns: 1fr; } }

/* Payroll insights -------------------------------------------------------- */
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.qcell { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.qcell .qname { font-size: 12px; color: var(--ink-3); }
.qcell b { font-size: 15px; }
.gbars { display: flex; flex-direction: column; gap: 8px; }
.gbar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 10px; }
.gbar-lbl { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbar-track { background: var(--line-2); border-radius: 6px; height: 14px; overflow: hidden; }
.gbar-fill { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.gbar-val { font-size: 13px; font-weight: 600; color: var(--ink); }
@media (max-width: 600px) { .gbar-row { grid-template-columns: 96px 1fr auto; } }

/* Calendar: clickable day -> detail list ---------------------------------- */
.cal-d.has-tasks { cursor: pointer; }
.cal-d.has-tasks:hover { background: var(--reg-hover); }
.cal-d.sel { box-shadow: inset 0 0 0 2px var(--gold); border-radius: 4px; }
.cal-detail .rows { margin-top: 4px; }

/* Calendar day-view toggle + popup --------------------------------------- */
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.calview-toggle { display: flex; align-items: center; gap: 6px; }
.cv-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 10px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.cv-btn:hover { border-color: var(--ink-3); }
.cv-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.cal-modal[hidden] { display: none; }
.cal-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cal-modal-back { position: absolute; inset: 0; background: rgba(30, 35, 41, .55); }
.cal-modal-card { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 85vh; overflow: auto; background: var(--card); border-radius: var(--radius); box-shadow: 0 12px 44px rgba(16, 24, 40, .28); padding: 18px 20px; }
body.cal-modal-open { overflow: hidden; }

/* Click-to-sort table headers -------------------------------------------- */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--ink); }
.th-sort::after { content: "\2195"; opacity: .35; margin-left: 4px; font-size: .85em; }
.th-sort[data-sorted="asc"]::after { content: "\2191"; opacity: 1; color: var(--gold-ink); }
.th-sort[data-sorted="desc"]::after { content: "\2193"; opacity: 1; color: var(--gold-ink); }

/* Interactive star rating (year-end reward). Fill is driven by the .on class
   in JS (hover previews, click sets), so no CSS :hover state is needed. */
.star-rate { display: inline-flex; align-items: center; gap: 1px; }
.star-rate .star { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--line); padding: 0 1px; transition: color .08s; }
.star-rate .star.on { color: var(--gold); }
.star-clear { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 12px; margin-left: 5px; }
.star-clear:hover { color: var(--late); }
.stars-static { color: var(--gold); font-size: 16px; letter-spacing: 2px; }

/* Payroll insights — by-business table bar -------------------------------- */
.gtable td.gcell-bar { width: 130px; }
.gbar-mini { display: block; background: var(--line-2); border-radius: 5px; height: 10px; overflow: hidden; }
.gbar-mini > span { display: block; height: 100%; background: var(--gold); border-radius: 5px; }

/* Top-bar search ---------------------------------------------------------- */
.tb-spacer { flex: 1 1 0; min-width: 0; }
.tb-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
.top-search { position: relative; flex: 0 1 460px; width: 100%; min-width: 0; margin: 0 12px; display: flex; align-items: center; }
.top-search .ts-ico { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.top-search input[type="search"] { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px 0 34px; background: var(--bg); color: var(--ink); font-size: 14px; }
.top-search input[type="search"]:focus { border-color: var(--gold); background: var(--card); outline: none; }
.top-search .search-pop { left: 0; right: 0; }
@media (max-width: 560px) {
  .topbar .kbd-btn, .topbar .tb-nav { display: none; } /* make room for search on phones; AI/Calendar live in the Menu sheet there */
  .top-search { margin: 0 6px; }
  .topbar .brand-sm span { display: none; } /* keep just the logo mark on small screens */
}

/* ---- Month picker (replaces native <input type="month">) ---- */
.monthpick { position: relative; display: inline-block; }
.mp-trigger { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; min-width: 158px; justify-content: space-between; }
.mp-trigger:hover { border-color: var(--line-2); }
.mp-trigger[aria-expanded="true"] { border-color: var(--gold); }
.mp-cal { color: var(--ink-3); flex: none; }
.mp-pop { position: fixed; z-index: 1000; width: 244px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; }
.mp-ynav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-ynav b { font-size: .98rem; }
.mp-nav { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.mp-nav:hover { background: var(--row-alt); }
.mp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-m { height: 38px; border: 1px solid transparent; border-radius: 9px; background: var(--row-alt); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.mp-m:hover { background: var(--gold-soft); }
.mp-m.sel { background: var(--navy); color: #fff; font-weight: 600; }
.mp-m.off { opacity: .35; cursor: not-allowed; }
.mp-m.off:hover { background: var(--row-alt); }

/* ---- Consistent filter / "find a person" search pill ---- */
.pill-search { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 240px; }
.pill-search > svg { position: absolute; left: 11px; color: var(--ink-3); pointer-events: none; }
.pill-search input { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px 0 32px; background: var(--bg); color: var(--ink); font-size: 14px; }
.pill-search input:focus { border-color: var(--gold); background: var(--card); outline: none; }

/* ---- Tinted sidebar groups (Payroll / People) ---- */
.nav-group[data-group] > summary .nav-group-label::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 8px; vertical-align: middle; background: var(--side-faint); }
.nav-group[data-group="Payroll"] > summary { background: rgba(43, 179, 163, .12); }
.nav-group[data-group="Payroll"] > summary:hover { background: rgba(43, 179, 163, .2); }
.nav-group[data-group="Payroll"] > summary .nav-group-label::before { background: #2BB3A3; }
.nav-group[data-group="People"] > summary { background: rgba(58, 110, 183, .13); }
.nav-group[data-group="People"] > summary:hover { background: rgba(58, 110, 183, .22); }
.nav-group[data-group="People"] > summary .nav-group-label::before { background: #3A6EB7; }
.nav-group[data-group="Work"] > summary { background: rgba(199, 122, 28, .12); }
.nav-group[data-group="Work"] > summary:hover { background: rgba(199, 122, 28, .2); }
.nav-group[data-group="Work"] > summary .nav-group-label::before { background: #C77A1C; }
.nav-group[data-group="Team"] > summary { background: rgba(124, 92, 191, .12); }
.nav-group[data-group="Team"] > summary:hover { background: rgba(124, 92, 191, .2); }
.nav-group[data-group="Team"] > summary .nav-group-label::before { background: #7C5CBF; }

/* Readable, aligned figures (clean look without going thin) */
.table td.num, .kpi b, .qcell b, .gtable .num, .mp-trigger, .reg td, .lc-axis, .lc-val { font-variant-numeric: tabular-nums; }

/* ---- Ctrl/Cmd-K hint chip inside the top search ---- */
.top-search input[type="search"] { padding-right: 52px; }
.ts-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink-3); font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.ts-kbd:hover { color: var(--ink); border-color: var(--line-2); }

/* Visible pulse when the search is focused via the "/" shortcut */
@keyframes tsPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 0%, transparent); } }
input.ts-pulse { animation: tsPulse .7s ease-out; border-color: var(--gold) !important; }

/* ---- Payroll insights date-range picker ---- */
.ins-range { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 14px; }
.ins-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-presets .rf { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 10px; padding: 6px 12px; font-size: .84rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.ins-presets .rf:hover { border-color: var(--navy-3); color: var(--ink); }
.ins-presets .rf.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ins-fromto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Live "find" box above a table */
.tbl-find { display: flex; justify-content: flex-end; margin: 0 0 10px; }

/* ---- Reminders (⏰ next to the bell) ---- */
.badge.badge-rem { background: #D97706; } /* amber: something is due — distinct from the red unread bell */
.rem-row { align-items: flex-start; }
.rem-row.rem-over { box-shadow: inset 4px 0 0 var(--late); }
.rem-row.rem-today { box-shadow: inset 4px 0 0 #B7791F; }
.rem-row.rem-soon { box-shadow: inset 4px 0 0 var(--gold); }
.rem-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.rem-actions form { margin: 0; }
.rem-more { position: relative; }
.rem-more > summary { list-style: none; cursor: pointer; }
.rem-more > summary::-webkit-details-marker { display: none; }
.rem-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 12px; display: grid; gap: 10px; box-shadow: 0 8px 24px rgba(30, 35, 41, .16); }
.rem-menu form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rem-strip .row-title { font-weight: 600; }
@media (max-width: 560px) {
  .rem-row { flex-wrap: wrap; }
  .rem-actions { width: 100%; justify-content: flex-end; }
}
.chip-rem-today { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.chip-rem-soon { background: var(--gold-soft); color: var(--navy); }
:root[data-theme="dark"] .chip-rem-soon { color: var(--ink); }
@media (max-width: 560px) {
  /* make room for ⏰ + bell next to search on phones (Help is in the Menu sheet) */
  .top-search .ts-kbd { display: none; }
  .topbar .iconbtn[aria-label="Help"] { display: none; }
  .topbar .iconbtn { width: 36px; }
}
.stuck-person { border-top: 1px solid var(--line-2); padding: 10px 0; }
.stuck-person > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stuck-person .rows { margin-top: 8px; }

/* =====================================================================
   Use the whole screen (9 Nov 2026) — full width by default, a per-person
   "Centred" option, Compact spacing, and a foldable icon sidebar ( [ ).
   ===================================================================== */
:root[data-width="full"] .main { max-width: none; padding: 20px 28px 28px; }
@media (min-width: 1500px) {
  :root[data-width="full"] .grid-2 { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
  :root[data-width="full"] .kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  :root[data-width="full"] .help-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (min-width: 1800px) {
  :root[data-width="full"] .news-rail { flex-basis: 380px; }
}

/* Compact spacing: same look, tighter rows — more on one screen, less scrolling */
:root[data-density="compact"] .card { padding: 13px 14px; margin-bottom: 10px; }
:root[data-density="compact"] .section { margin-top: 14px; }
:root[data-density="compact"] .row { padding: 8px 12px; gap: 10px; }
:root[data-density="compact"] .page-head { margin-bottom: 10px; }
:root[data-density="compact"] .main { padding-top: 14px; }
:root[data-density="compact"] .table td, :root[data-density="compact"] .table th { padding-top: 6px; padding-bottom: 6px; }

/* Fold button at the bottom of the sidebar */
.side-fold { margin-top: auto; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--side-muted); font: inherit; font-size: .82rem; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.side-fold:hover { background: var(--side-hover); color: var(--side-ink); }
.side-fold > span:first-child { font-size: 1.05rem; line-height: 1; width: 20px; text-align: center; }

/* Folded (icon) sidebar */
:root[data-side="mini"] .side { width: 68px; flex-basis: 68px; padding: 14px 8px; }
:root[data-side="mini"] .side .brand span,
:root[data-side="mini"] .side ul a span,
:root[data-side="mini"] .side .sn-txt,
:root[data-side="mini"] .side .sf-txt,
:root[data-side="mini"] .nav-group > summary { display: none; }
:root[data-side="mini"] .side .brand { justify-content: center; padding: 2px 0; }
:root[data-side="mini"] .side-new { padding-left: 0; padding-right: 0; font-size: 1.2rem; }
:root[data-side="mini"] .side ul a { justify-content: center; padding: 9px 0; position: relative; }
:root[data-side="mini"] .side .count { position: absolute; top: 1px; right: 2px; font-size: .62rem; padding: 0 5px; }
:root[data-side="mini"] .nav-group { border-top: 1px solid var(--side-border); padding-top: 4px; margin-top: 4px; }
:root[data-side="mini"] .side-fold { justify-content: center; }
:root[data-side="mini"] .side-fold > span:first-child { transform: rotate(180deg); }
/* Shortcut sheet: two columns on desktop so it fits one screen */
@media (min-width: 760px) {
  .kbd-card { max-width: 720px; }
  .kbd-card dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .kbd-card dt { flex-basis: 92px; }
}

/* =====================================================================
   Easy reading (9 Nov 2026) — per person: extra-large text, high contrast,
   easy-read font, bold, colour-blind safe, reduce motion, privacy mode.
   ===================================================================== */
:root[data-text="xl"] body { font-size: 20px; }
:root[data-text="xl"] .side ul a { font-size: 1rem; }

/* High contrast — light */
:root[data-contrast="high"] {
  --ink: #000; --ink-2: #111; --ink-3: #2B2B2B; --line: #6B7280; --line-2: #9CA3AF;
  --bg: #FFFFFF; --row-alt: #EEF1F5; --side-muted: #222; --side-faint: #333; --side-border: #9CA3AF;
  --gold-ink: #5A4508; --late: #9B1C1C; --ok: #14532D; --amber: #8A3B00; --blue: #0B3FA8;
}
:root[data-contrast="high"] .card, :root[data-contrast="high"] .side { border-width: 2px; }
:root[data-contrast="high"] .muted, :root[data-contrast="high"] .help, :root[data-contrast="high"] .small { color: var(--ink-2); }
:root[data-contrast="high"] a { text-decoration-thickness: 2px; }
:root[data-contrast="high"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
/* High contrast — dark */
:root[data-contrast="high"][data-theme="dark"] {
  --ink: #FFF; --ink-2: #F2F2F2; --ink-3: #DADADA; --line: #9AA4B2; --line-2: #6B7685;
  --bg: #000; --card: #0A0F16; --row-alt: #141B25; --side-bg: #000; --side-ink: #FFF; --side-muted: #E5E5E5; --side-faint: #CFCFCF;
  --late: #FF9C94; --ok: #7CF0AE; --amber: #FFC78F; --blue: #A9CBFF; --gold-ink: #FFD966;
}
:root[data-contrast="high"][data-theme="dark"] :focus-visible { outline-color: #FFD966 !important; }
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"][data-theme="auto"] {
    --ink: #FFF; --ink-2: #F2F2F2; --ink-3: #DADADA; --line: #9AA4B2; --line-2: #6B7685;
    --bg: #000; --card: #0A0F16; --row-alt: #141B25; --side-bg: #000; --side-ink: #FFF; --side-muted: #E5E5E5; --side-faint: #CFCFCF;
  }
}

/* Easy-read font (Atkinson Hyperlegible — made for low vision) */
:root[data-font="easy"] { --font: "Atkinson Hyperlegible", "Inter", "Segoe UI", system-ui, sans-serif; }
:root[data-font="easy"] body, :root[data-font="easy"] input, :root[data-font="easy"] select, :root[data-font="easy"] textarea, :root[data-font="easy"] button { font-family: var(--font); }

/* Bolder text + more line spacing */
:root[data-bold="1"] body { font-weight: 500; line-height: 1.7; }
:root[data-bold="1"] b, :root[data-bold="1"] strong, :root[data-bold="1"] h1, :root[data-bold="1"] h2, :root[data-bold="1"] h3, :root[data-bold="1"] .row-title { font-weight: 800; }
:root[data-bold="1"] .row-meta, :root[data-bold="1"] .small { font-weight: 500; }

/* Colour-blind safe: green → blue, red → orange (shapes stay as well) */
:root[data-cs="1"] { --ok: #1D4ED8; --ok-soft: #E3EBFD; --late: #C2410C; --late-soft: #FFEDD5; }
:root[data-cs="1"][data-theme="dark"] { --ok: #8DB4FF; --ok-soft: #16264A; --late: #FDBA74; --late-soft: #3B2412; }
:root[data-cs="1"] .txt-ok-light { color: var(--ok); }

/* Reduce motion */
:root[data-calm="1"] *, :root[data-calm="1"] *::before, :root[data-calm="1"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* Privacy mode — amounts hidden until tapped */
:root[data-privacy="1"] .amt:not(.shown),
:root[data-privacy="1"] [data-money]:not(.shown),
:root[data-privacy="1"] .regscroll td:not(:first-child):not(.shown) { filter: blur(6px); cursor: pointer; user-select: none; }
:root[data-privacy="1"] .amt.shown, :root[data-privacy="1"] .regscroll td.shown { filter: none; }
@media print { :root[data-privacy="1"] .amt, :root[data-privacy="1"] .regscroll td { filter: none !important; } }

/* Quick switches (profile menu + phone sheet) */
.profile-menu { width: 272px; }
.qp { display: grid; gap: 2px; padding: 2px 0; }
.qp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 9px; color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.qp-row:hover { background: var(--row-alt); }
.qp-lbl { display: flex; flex-direction: column; line-height: 1.25; }
.qp-lbl small { color: var(--ink-3); font-weight: 400; font-size: .76rem; }
.qp-sw { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line); flex: 0 0 38px; transition: background .15s; }
.qp-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.qp-row[aria-checked="true"] .qp-sw { background: var(--navy); }
:root[data-theme="dark"] .qp-row[aria-checked="true"] .qp-sw { background: var(--gold); }
.qp-row[aria-checked="true"] .qp-sw::after { left: 19px; }
.qp-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; }
.qp-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qp-seg button { border: 0; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: .82rem; padding: 4px 8px; cursor: pointer; min-width: 34px; }
.qp-seg button + button { border-left: 1px solid var(--line); }
.qp-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
:root[data-theme="dark"] .qp-seg button[aria-pressed="true"] { background: var(--gold); color: #111; }
.profile-menu a.qp-more, .qp-more { font-size: .78rem; color: var(--blue); padding: 6px 10px; }
.pm-kbd .pm-ic { width: 20px; text-align: center; color: var(--ink-3); }
.sheet-qp { padding: 0 6px; }

/* Read aloud button */
.speak-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.speak-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.speak-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Salary history — net pay trend bars */
.emp-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 6px 2px 0; overflow-x: auto; }
.emp-bars .eb { flex: 1 0 28px; max-width: 56px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-decoration: none; color: var(--ink-3); }
.emp-bars .eb-bar { width: 100%; background: var(--gold); border-radius: 5px 5px 0 0; min-height: 2px; }
.emp-bars .eb:hover .eb-bar { background: var(--gold); }
.emp-bars .eb-lbl { font-size: .7rem; line-height: 1.1; text-align: center; margin-top: 4px; }
:root[data-theme="dark"] .emp-bars .eb-bar { background: var(--gold); }
.regfull tbody tr.pr { cursor: default; }
.nowrap { white-space: nowrap; }
/* The privacy wrapper around ₹ amounts must never change how the number looks */
span.amt { font-size: inherit !important; color: inherit !important; font-weight: inherit !important; letter-spacing: inherit; }
.emp-bars .eb { max-width: 96px; }
.emp-bars .eb-val { font-size: .68rem; color: var(--ink-2); margin-bottom: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Profile menu v2: compact & smart (9 Nov) ---- */
.profile-menu.pm2 { width: 304px; padding: 0; overflow: hidden; }
.pm2 .pm-head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 12px; border-bottom: 0; margin: 0; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; }
.pm2 .pm-head .avatar { width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.35); }
.pm2 .pm-head .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm2 .pm-head .who b { color: #fff; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm2 .pm-head .who small { color: rgba(255,255,255,.72); font-size: .76rem; }
.pm2 .pm-edit { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff !important; background: rgba(255,255,255,.12); text-decoration: none; padding: 0 !important; width: 30px !important; }
.pm2 .pm-edit:hover { background: rgba(255,255,255,.24) !important; }
.pm2 .pm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 10px 8px; border-bottom: 1px solid var(--line-2); }
.pm2 .pm-tiles a { display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px !important; border-radius: 10px; font-size: .74rem !important; font-weight: 600; color: var(--ink-2); text-align: center; width: auto !important; }
.pm2 .pm-tiles a .ic { color: var(--navy-3); }
.pm2 .pm-tiles a:hover { background: var(--gold-soft) !important; }
.pm2 .pm-tiles a[aria-current="page"] { background: var(--gold-soft); color: var(--gold-ink); }
.pm2 .qp { padding: 10px 12px 6px; border-bottom: 1px solid var(--line-2); gap: 8px; }
.qp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qp-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-2); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.qp-chip .qp-ico { font-size: 1.05rem; line-height: 1; filter: grayscale(1); opacity: .75; }
.qp-chip:hover { border-color: var(--gold); }
.qp-chip[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.qp-chip[aria-checked="true"] .qp-ico { filter: none; opacity: 1; }
:root[data-theme="dark"] .qp-chip[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: #111; }
.pm2 .qp-size { padding: 2px 0; }
.pm2 .qp-lbl { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.pm2 .qp-more { display: block; padding: 0 0 2px !important; font-size: .74rem !important; color: var(--blue) !important; width: auto !important; }
.pm2 .pm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; }
.pm2 .pm-links a, .pm2 .pm-links button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px !important; border: 0; background: none; border-radius: 8px; color: var(--ink); font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer; text-align: left; }
.pm2 .pm-links .ic { width: 17px; height: 17px; color: var(--ink-3); }
.pm2 .pm-links .pm-ic { width: 17px; text-align: center; color: var(--ink-3); }
.pm2 .pm-links a:hover, .pm2 .pm-links button:hover { background: var(--row-alt); }
.pm2 .pm-out { margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.pm2 .pm-out button { width: 100%; border: 0; background: none; padding: 10px 14px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--late); text-align: left; cursor: pointer; }
.pm2 .pm-out button:hover { background: var(--late-soft); }
/* phone Menu sheet uses the same chips */
.sheet-qp .qp { padding: 4px 6px; gap: 8px; display: grid; }

:root[data-theme="dark"] .pm2 .pm-head { background: linear-gradient(135deg, #2A3139 0%, #3A444F 100%); }
:root[data-theme="dark"] .pm2 .pm-tiles a .ic { color: var(--gold); }
:root[data-theme="dark"] .pm2 .pm-tiles a { color: var(--ink); }

/* ---- Sider-style animated sidebar (9 Nov) ---- */
.side .nav { position: relative; }
.nav-glide { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; z-index: 0; pointer-events: none;
  background: var(--card); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1), height .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
.nav-glide.no-anim { transition: none; }
.has-glide .side ul a { position: relative; z-index: 1; transition: color .18s ease; }
.has-glide .side ul a:hover, .has-glide .side ul a[aria-current="page"] { background: transparent; }
.has-glide .side ul a .ic { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), color .18s ease; }
.has-glide .side ul a.glide-on { color: var(--side-ink); }
.has-glide .side ul a.glide-on .ic { color: var(--gold-ink); transform: scale(1.12); }
.has-glide .side ul a[aria-current="page"] { font-weight: 650; }
.has-glide .side ul a[aria-current="page"] .ic { color: var(--gold-ink); }
:root[data-theme="dark"] .nav-glide { background: #232A31; box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); }
:root[data-contrast="high"] .nav-glide { border: 2px solid var(--ink); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .nav-glide { background: #232A31; } }
/* Sidebar fold animates too */
.side { transition: width .26s cubic-bezier(.22, 1, .36, 1), flex-basis .26s cubic-bezier(.22, 1, .36, 1), padding .26s ease; }
.side-new { transition: transform .18s ease, box-shadow .18s ease; }
.side-new:hover { transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, var(--gold) 35%, transparent); }
/* Section tabs and filter chips get the same soft-pill feel */
.sectabs-row a { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.sectabs-row a[aria-current="page"] { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 3px 10px rgba(16,24,40,.08); }

/* ---- Sweep fixes (9 Nov): links + navy text readable in dark / high contrast ---- */
:root { --link: #0E7065; }
:root[data-theme="dark"] { --link: #6FD9CB; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --link: #6FD9CB; } }
:root[data-contrast="high"] { --link: #064E46; }
:root[data-contrast="high"][data-theme="dark"] { --link: #9FEDE2; }
:root[data-theme="dark"] .payslip-head b, :root[data-theme="dark"] .hint button, :root[data-theme="dark"] .trk.cur .trk-lbl,
:root[data-theme="dark"] .month-label, :root[data-theme="dark"] .bottom a[aria-current="page"], :root[data-theme="dark"] .brand-lg,
:root[data-theme="dark"] .chip-rem-soon { color: var(--ink); }
:root[data-theme="dark"] input[type="checkbox"], :root[data-theme="dark"] input[type="radio"] { accent-color: var(--gold); }
/* Icon buttons that are <button>s (⌨) must look like the link icons, not a white browser button */
button.iconbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
:root[data-theme="dark"] button.iconbtn { color: var(--ink); }
/* Green "Done" buttons: dark text on the lighter dark-mode / colour-safe greens & blues */
:root[data-theme="dark"] .btn-ok, :root[data-cs="1"][data-theme="dark"] .btn-ok { color: #0A1A12; }
:root[data-theme="dark"] .btn-ok:hover { background: #7BE0A6; }
:root[data-cs="1"] .btn-ok:hover { background: #1E40AF; }
:root[data-cs="1"][data-theme="dark"] .btn-ok:hover { background: #A9C7FF; }
/* Calendar: last week's empty tail uses the page colour, not the grid-line colour */
.cal { background: var(--line-2); }
:root[data-contrast="high"][data-theme="dark"] .cal { background: #3A4555; }
/* Phone: wide tables/charts scroll inside their card instead of pushing the page sideways */
@media (max-width: 700px) {
  .org-controls { flex-wrap: wrap; }
  .org-wrap { overflow-x: auto; max-width: 100%; }
}

/* =====================================================================
   Living icons (9 Nov): each icon acts out its meaning on hover —
   bell rings, sun brightens, focus locks on target, inbox catches,
   check ticks, list slides, team waves… Plays once on the current page.
   Off automatically with "Reduce motion".
   ===================================================================== */
.ic { transform-box: fill-box; transform-origin: center; }
@keyframes tt-ring   { 0%,100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } }
@keyframes tt-shine  { 0% { transform: rotate(0) scale(1); filter: none; } 50% { transform: rotate(45deg) scale(1.18); filter: drop-shadow(0 0 4px rgba(242, 179, 30, .85)); color: #E2A400; } 100% { transform: rotate(90deg) scale(1.08); filter: drop-shadow(0 0 2px rgba(242, 179, 30, .5)); } }
@keyframes tt-aim    { 0% { transform: scale(1); } 30% { transform: scale(.78); } 60% { transform: scale(1.22); filter: drop-shadow(0 0 3px rgba(43, 179, 163, .8)); } 100% { transform: scale(1.08); } }
@keyframes tt-hop    { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-4px); } 60% { transform: translateY(0); } 78% { transform: translateY(-1.5px); } }
@keyframes tt-catch  { 0% { transform: translateY(0); } 30% { transform: translateY(3px) scaleY(.9); } 60% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes tt-tick   { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.25) rotate(-8deg); color: var(--ok); } 100% { transform: scale(1.08) rotate(0); color: var(--ok); } }
@keyframes tt-slide  { 0%,100% { transform: translateX(0); } 40% { transform: translateX(4px); } 70% { transform: translateX(-1px); } }
@keyframes tt-wave   { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg) translateY(-1px); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes tt-twinkle{ 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.3) rotate(20deg); filter: drop-shadow(0 0 4px rgba(43, 179, 163, .9)); } 100% { transform: scale(1.08) rotate(0); } }
@keyframes tt-spin   { from { transform: rotate(0); } to { transform: rotate(120deg); } }
@keyframes tt-flip   { 0% { transform: rotateX(0); } 50% { transform: rotateX(70deg); } 100% { transform: rotateX(0); } }
@keyframes tt-buzz   { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-1.5px) rotate(-6deg); } 40% { transform: translateX(1.5px) rotate(6deg); } 60% { transform: translateX(-1px) rotate(-4deg); } 80% { transform: translateX(1px) rotate(3deg); } }
@keyframes tt-tilt   { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-8deg) scale(1.08); } 70% { transform: rotate(4deg); } }
@keyframes tt-tock   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes tt-nod    { 0%,100% { transform: translateY(0); } 40% { transform: translateY(2px); } 70% { transform: translateY(-1px); } }
@keyframes tt-plus   { from { transform: rotate(0); } to { transform: rotate(90deg); } }

:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .bottom a:hover, .bottom a[aria-current="page"], .iconbtn:hover, .iconbtn:focus-visible, .pm-tiles a:hover, .pm-links a:hover, .sectabs-row a:hover, .sectabs-row a[aria-current="page"], .btn:hover) :is(.ic-bell, .ic-alarm) { transform-origin: 50% 8%; animation: tt-ring .8s ease; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .bottom a:hover, .bottom a[aria-current="page"], .pm-tiles a:hover, .pm-links a:hover, .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) .ic-sun { animation: tt-shine .7s ease forwards; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .bottom a:hover, .sectabs-row a:hover) .ic-target { animation: tt-aim .6s cubic-bezier(.34, 1.56, .64, 1) forwards; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .bottom a:hover, .bottom a[aria-current="page"], .sectabs-row a:hover) .ic-home { animation: tt-hop .6s ease; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .bottom a:hover, .bottom a[aria-current="page"], .pm-links a:hover) .ic-inbox { animation: tt-catch .55s ease; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) .ic-check { animation: tt-tick .5s cubic-bezier(.34, 1.56, .64, 1) forwards; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) .ic-list { animation: tt-slide .5s ease; }
:is(.side ul a:hover, .side ul a:focus-visible, .side ul a[aria-current="page"], .sectabs-row a:hover) .ic-users { transform-origin: 50% 90%; animation: tt-wave .7s ease; }
:is(.side ul a:hover, .side ul a[aria-current="page"], .iconbtn:hover, .sectabs-row a:hover) :is(.ic-spark, .ic-star) { animation: tt-twinkle .6s ease forwards; }
:is(.side ul a:hover, .side ul a[aria-current="page"], .pm-links a:hover, .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) .ic-settings { animation: tt-spin .6s ease forwards; }
:is(.side ul a:hover, .side ul a[aria-current="page"], .iconbtn:hover, .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) .ic-calendar { animation: tt-flip .55s ease; }
:is(.side ul a:hover, .pm-links a:hover) .ic-phone { animation: tt-buzz .5s ease; }
:is(.side ul a:hover, .side ul a[aria-current="page"], .pm-tiles a:hover, .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) :is(.ic-wallet, .ic-card, .ic-award) { animation: tt-tilt .55s ease; }
:is(.side ul a:hover, .side ul a[aria-current="page"], .sectabs-row a:hover, .sectabs-row a[aria-current="page"]) .ic-clock { animation: tt-tock .9s ease; }
:is(.pm-tiles a:hover, .side ul a:hover) .ic-user { animation: tt-nod .5s ease; }
:is(.iconbtn:hover, .pm-links a:hover) .ic-help { animation: tt-tilt .55s ease; }
.bottom .add:hover .ic-plus, .side-new:hover .sn-plus { display: inline-block; animation: tt-plus .3s ease forwards; }
/* Icons inside the sidebar glide/pill take the gold "lit" colour while acting */
.side ul a:hover .ic-sun, .side ul a[aria-current="page"] .ic-sun { color: #E2A400; }
:root[data-contrast="high"] .side ul a:hover .ic-sun { color: var(--ink); }

/* ---- Person colours (9 Nov): every person keeps one professional colour everywhere ---- */
.pc-0 { --pc: #1E4E8C; --pc-soft: #E4ECF7; }   /* sapphire */
.pc-1 { --pc: #0F766E; --pc-soft: #DFF2EF; }   /* teal */
.pc-2 { --pc: #7E3A8A; --pc-soft: #F2E6F4; }   /* plum */
.pc-3 { --pc: #9A5B13; --pc-soft: #F6ECDD; }   /* bronze */
.pc-4 { --pc: #B4233C; --pc-soft: #F9E3E7; }   /* crimson */
.pc-5 { --pc: #4338CA; --pc-soft: #E8E7FA; }   /* indigo */
.pc-6 { --pc: #2F6B2F; --pc-soft: #E4F0E2; }   /* forest */
.pc-7 { --pc: #B4531F; --pc-soft: #F9E8DD; }   /* rust */
.pc-8 { --pc: #3F5E7A; --pc-soft: #E5EBF1; }   /* steel */
.pc-9 { --pc: #A3346F; --pc-soft: #F7E3EE; }   /* rose */
:root[data-theme="dark"] .pc-0 { --pc: #7FAAE6; --pc-soft: #172A44; }
:root[data-theme="dark"] .pc-1 { --pc: #5CC9BC; --pc-soft: #10302D; }
:root[data-theme="dark"] .pc-2 { --pc: #C99AD3; --pc-soft: #2C1A31; }
:root[data-theme="dark"] .pc-3 { --pc: #DDAE6B; --pc-soft: #33250F; }
:root[data-theme="dark"] .pc-4 { --pc: #EE8C9C; --pc-soft: #3A1820; }
:root[data-theme="dark"] .pc-5 { --pc: #A3A0F0; --pc-soft: #1F1D45; }
:root[data-theme="dark"] .pc-6 { --pc: #8FCB8A; --pc-soft: #17301A; }
:root[data-theme="dark"] .pc-7 { --pc: #EFA27A; --pc-soft: #3A2014; }
:root[data-theme="dark"] .pc-8 { --pc: #9DB7CF; --pc-soft: #1B2836; }
:root[data-theme="dark"] .pc-9 { --pc: #E592BE; --pc-soft: #36182A; }
.avatar[class*="pc-"]:not(.has-photo) { background: var(--pc); color: #fff; }
:root[data-theme="dark"] .avatar[class*="pc-"]:not(.has-photo) { background: var(--pc-soft); color: var(--pc); box-shadow: inset 0 0 0 1px var(--pc); }
.pwho { display: inline-flex; align-items: center; gap: 6px; color: var(--pc); font-weight: 600; }
.who-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: 0 0 8px; }
.pc-row { box-shadow: inset 3px 0 0 var(--pc); }
.pc-row .row-av { width: 32px; height: 32px; flex: 0 0 32px; font-size: .72rem; }
:root[data-cs="1"] .pwho, :root[data-contrast="high"] .pwho { text-decoration: underline; text-decoration-color: var(--pc); text-underline-offset: 3px; }
/* Last seen on Team */
.seen-on { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: .86rem; }
.seen-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.hero-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } }
.stat-new b { color: #7FE3D6; }

/* ---- Sign-in: split screen with brand showcase (9 Nov) ---- */
.guest .brand-lg b { color: #2BB3A3; }
body.guest-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); place-items: stretch; padding: 0; background: #F4F6F7; min-height: 100vh; }
.guest-split .guest-box { align-self: center; justify-self: center; width: 100%; max-width: 420px; padding: 32px 24px; }
.guest-split .guest-box > .brand-lg { display: none; }
.guest-split .card { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 32px rgba(16,24,40,.08); border-radius: 18px; padding: 30px; }
.guest-split .btn-primary { background: #2BB3A3; border-color: #2BB3A3; color: #0F2420; font-weight: 700; }
.guest-split .btn-primary:hover { background: #24A091; }
.guest-foot { text-align: center; font-size: .8rem; color: #5B6573; margin-top: 16px; }
.showcase { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 85% 15%, #2A3139 0%, #1E2329 55%, #171B20 100%); color: #DDE3E8; padding: 40px 56px; display: flex; flex-direction: column; gap: 26px; min-height: 100vh; box-sizing: border-box; }
.sc-top { display: flex; align-items: center; justify-content: space-between; }
.sc-brand { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; color: #fff; font-weight: 500; }
.sc-brand b { color: #2BB3A3; font-weight: 700; }
.sc-greet { font-size: .9rem; color: #A9B4BE; }
.sc-tag { margin: 0; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.08; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.sc-tag span { color: #2BB3A3; }
.sc-sub { margin: 14px 0 0; max-width: 460px; font-size: 1.05rem; line-height: 1.6; color: #B7C1CA; }
.sc-art { position: relative; height: 290px; display: grid; place-items: center; max-width: 560px; }
.sc-ring { filter: drop-shadow(0 10px 30px rgba(43,179,163,.25)); }
.sc-arc { stroke-dashoffset: 100; animation: sc-fill 2.2s cubic-bezier(.22,1,.36,1) .2s forwards; }
.sc-tick { stroke-dasharray: 100; stroke-dashoffset: 100; animation: sc-draw .7s ease 1.6s forwards; }
@keyframes sc-fill { to { stroke-dashoffset: 0; } }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
.sc-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; animation: sc-in .6s ease forwards, sc-float 6s ease-in-out infinite; }
.sc-card span { display: flex; flex-direction: column; line-height: 1.25; }
.sc-card b { color: #fff; font-size: .9rem; font-weight: 600; }
.sc-card small { color: #A9B4BE; font-size: .74rem; }
.sc-card i { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .85rem; }
.sc-card i.ok { background: rgba(95,207,143,.18); color: #5FCF8F; } .sc-card i.ok::before { content: "✓"; }
.sc-card i.go { background: rgba(43,179,163,.18); color: #2BB3A3; } .sc-card i.go::before { content: "▶"; font-size: .7rem; }
.sc-card i.pay { background: rgba(242,179,122,.18); color: #F2B37A; } .sc-card i.pay::before { content: "₹"; }
.sc-card i.star { background: rgba(167,139,250,.18); color: #B9A4FB; } .sc-card i.star::before { content: "★"; }
.sc-card.c1 { top: 8px; left: 0; animation-delay: .9s, .9s; }
.sc-card.c2 { top: 28px; right: 0; animation-delay: 1.2s, 1.2s; }
.sc-card.c3 { bottom: 26px; left: 14px; animation-delay: 1.5s, 1.5s; }
.sc-card.c4 { bottom: 6px; right: 10px; animation-delay: 1.8s, 1.8s; }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sc-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.sc-quote { position: relative; margin: 0; min-height: 96px; max-width: 520px; border-left: 3px solid #2BB3A3; padding-left: 18px; }
.sc-quote blockquote { position: absolute; inset: 0 0 auto 18px; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.sc-quote blockquote.on { opacity: 1; transform: none; position: relative; inset: auto; }
.sc-quote p { margin: 0; font-size: 1.12rem; line-height: 1.55; color: #EEF2F5; font-style: italic; }
.sc-quote figcaption { margin-top: 6px; font-size: .85rem; color: #8FA0AD; }
.sc-points { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: #C6CFD7; }
.sc-points li { display: flex; align-items: center; gap: 8px; }
.sc-points span { width: 20px; height: 20px; border-radius: 50%; background: rgba(43,179,163,.2); color: #2BB3A3; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sc-arc, .sc-tick, .sc-card { animation: none; opacity: 1; stroke-dashoffset: 0; } }
/* Tablet / phone: showcase becomes a compact banner above the form */
@media (max-width: 900px) {
  body.guest-split { grid-template-columns: 1fr; }
  .showcase { min-height: 0; padding: 22px 22px 24px; gap: 14px; }
  .sc-art, .sc-points { display: none; }
  .sc-tag { font-size: 1.7rem; } .sc-tag br { display: none; }
  .sc-sub { font-size: .95rem; margin-top: 8px; }
  .sc-quote { min-height: 70px; } .sc-quote p { font-size: .98rem; }
  .guest-split .guest-box { padding: 20px 16px 32px; }
}
/* Workspace (company) chip on the sign-in card — SaaS-ready: brand stays TeamTracker, company shown here */
.ws-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #EEF1F3; color: #2B3442; font-size: .8rem; font-weight: 600; margin-bottom: 12px; }
.ws-chip i { width: 22px; height: 22px; border-radius: 50%; background: #1E2329; color: #2BB3A3; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 700; }

/* ---- One menu on phones (9 Nov): photo + Menu open the same sheet ---- */
@media (max-width: 820px) {
  .sheet-edit { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--row-alt); color: var(--ink-2); text-decoration: none; font-size: 1rem; }
  .sheet-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 12px 12px 6px; }
  .sheet-tiles a { display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px !important; border-radius: 12px; font-size: .78rem !important; font-weight: 600; color: var(--ink-2); text-align: center; text-decoration: none; }
  .sheet-tiles a .ic { color: var(--gold-ink); width: 22px; height: 22px; }
  .sheet-tiles a[aria-current="page"] { background: var(--gold-soft); color: var(--gold-ink); }
  .sheet-foot .link { color: var(--late); font-weight: 700; }
  .sheet-qp .qp { padding: 4px 4px 8px; }
}
/* Keyboard shortcuts mean nothing on touch screens: hide them there */
@media (hover: none) and (pointer: coarse) {
  [data-kbd-help], .kbd-btn { display: none !important; }
}

/* =====================================================================
   My profile — Google-account style (9 Nov): section menu + tidy rows,
   tap a row to edit just that detail; display settings apply instantly.
   ===================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-wrap { display: grid; grid-template-columns: 230px minmax(0, 860px); gap: 36px; justify-content: center; align-items: start; }
.pf-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 4px; }
.pf-nav a { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 999px; color: var(--ink); font-weight: 500; text-decoration: none; transition: background .15s ease; }
.pf-nav a:hover { background: var(--row-alt); }
.pf-nav a[aria-current="true"] { background: var(--gold-soft); color: var(--gold-ink); font-weight: 650; }
.pf-nic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 34px; }
.pf-nic .ic { width: 18px; height: 18px; }
.pf-nav-0 .pf-nic { background: #DCEBFF; color: #1D4ED8; } .pf-nav-1 .pf-nic { background: #DDF3F0; color: #0E6B61; }
.pf-nav-2 .pf-nic { background: #EDE6FB; color: #6D28D9; } .pf-nav-3 .pf-nic { background: #FDEBD8; color: #B45309; }
.pf-nav-4 .pf-nic { background: #FCE4EF; color: #BE185D; } .pf-nav-5 .pf-nic { background: #E5EDF4; color: #334E68; }
.pf-nav-6 .pf-nic { background: #FFF2CC; color: #A16207; } .pf-nav-7 .pf-nic { background: #E3F4E6; color: #15803D; }
:root[data-theme="dark"] .pf-nic { filter: saturate(.8) brightness(.9); }
.pf-main { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.pf-over { text-align: center; padding: 8px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pf-av-btn { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; }
.pf-av-btn .pf-av { width: 104px !important; height: 104px !important; font-size: 2rem; box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--pc, var(--gold)); }
.pf-av-btn.over .pf-av { box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--gold); transform: scale(1.04); }
.pf-cam { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(16,24,40,.2); }
.pf-cam .ic { width: 17px; height: 17px; }
.pf-avatar.busy .pf-av { opacity: .6; }
.pf-name { margin: 10px 0 0; font-size: 1.75rem; font-weight: 600; }
.pf-role { margin: 0; color: var(--ink-2); }
.pf-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.pf-stats > * { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.pf-stats b { font-size: 1.25rem; } .pf-stats span span, .pf-stats a span { font-size: .78rem; color: var(--ink-3); }
.pf-stats a:hover { border-color: var(--gold); }
.pf-complete { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; font-size: .86rem; color: var(--ink-2); max-width: 520px; width: 100%; }
.pf-bar { width: 100%; height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.pf-h { margin: 0 0 4px; font-size: 1.35rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.pf-live { font-size: .72rem; font-weight: 600; color: var(--gold-ink); background: var(--gold-soft); padding: 3px 9px; border-radius: 999px; }
.pf-intro { margin: 0 0 12px; color: var(--ink-3); font-size: .9rem; }
.pr-list { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pr-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line-2); margin: 0; }
.pr-list > .pr-row:first-child { border-top: 0; }
details.pr-row { display: block; padding: 0; }
details.pr-row > summary { display: flex; align-items: center; gap: 16px; padding: 14px 20px; cursor: pointer; list-style: none; }
details.pr-row > summary::-webkit-details-marker { display: none; }
details.pr-row > summary:hover, label.pr-photo:hover { background: var(--row-alt); }
details.pr-row[open] > summary { background: var(--row-alt); }
details.pr-row.saved > summary { background: var(--gold-soft); transition: background .6s ease; }
label.pr-photo { cursor: pointer; }
.pr-ic { width: 24px; color: var(--ink-2); flex: 0 0 24px; display: grid; place-items: center; }
.pr-ic .ic { width: 20px; height: 20px; }
.pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-lbl { font-weight: 550; color: var(--ink); }
.pr-val { color: var(--ink-2); font-size: .9rem; overflow-wrap: anywhere; }
.pr-empty { color: var(--link); font-weight: 500; }
.pr-go { color: var(--ink-3); font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
details.pr-row[open] .pr-go { transform: rotate(90deg); }
.pr-hr { font-size: .68rem; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.pr-fixed .pr-lbl { color: var(--ink-2); }
.pr-av { width: 52px !important; height: 52px !important; min-width: 52px; flex: 0 0 52px; aspect-ratio: 1 / 1; border-radius: 50%; }
.pr-edit { padding: 4px 20px 16px 60px; display: flex; flex-direction: column; gap: 10px; }
.pr-edit input, .pr-edit select { max-width: 420px; }
.pr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.pr-actions { display: flex; gap: 8px; }
.pr-err { color: var(--late); font-size: .85rem; margin: 0; }
.pr-set { min-height: 56px; }
.pseg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--row-alt); flex-shrink: 0; }
.pseg button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pseg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.15); }
:root[data-theme="dark"] .pseg button[aria-pressed="true"] { background: var(--gold); color: #0F2420; }
.pr-switch { border: 0; background: none; padding: 4px; cursor: pointer; }
.pr-switch[aria-checked="true"] .qp-sw { background: var(--gold); }
.pr-switch[aria-checked="true"] .qp-sw::after { left: 19px; }
@media (max-width: 900px) {
  .pf-wrap { grid-template-columns: 1fr; gap: 18px; }
  .pf-nav { position: sticky; top: 56px; z-index: 5; flex-direction: row; overflow-x: auto; gap: 6px; padding: 6px 0; background: var(--bg); scrollbar-width: none; }
  .pf-nav a { flex: 0 0 auto; padding: 6px 12px 6px 6px; font-size: .86rem; border: 1px solid var(--line); background: var(--card); }
  .pf-nic { width: 26px; height: 26px; flex-basis: 26px; } .pf-nic .ic { width: 15px; height: 15px; }
  .pr-row, details.pr-row > summary { padding: 12px 14px; gap: 12px; }
  .pr-edit { padding: 4px 14px 14px; }
  .pr-set { flex-wrap: wrap; } .pr-set .pseg { margin-left: 36px; }
  .pr-two { grid-template-columns: 1fr; }
  .pf-stats > * { min-width: 76px; padding: 8px 10px; }
}
.pr-fixed .pr-empty { color: var(--ink-3); font-weight: 400; }

/* ---------- Contacts (address book) ---------- */
.contact-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.contact-cats .chip { text-decoration: none; padding: 4px 10px; }
.contact-cats .chip small { opacity: .7; margin-left: 4px; font-weight: 500; }
.chip-on { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold); }
.contact-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.az-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0 8px; font-size: .78rem; font-weight: 600; }
.az-bar a, .az-bar span { min-width: 22px; text-align: center; padding: 2px 0; border-radius: 4px; }
.az-bar a { color: var(--link); text-decoration: none; }
.az-bar a:hover { background: var(--gold-soft); }
.az-bar span { color: var(--ink-3); opacity: .45; }
.contact-row { scroll-margin-top: 90px; }
.wa-link { font-size: .7rem; font-weight: 700; color: var(--ok); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; margin-left: 4px; text-decoration: none; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold); }
.contact-card-full dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.contact-card-full dt { color: var(--ink-3); font-size: .86rem; }
.contact-card-full dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.contact-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.dup-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dup-pair .dup-side { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
.dup-pair .dup-side p { margin: 2px 0; font-size: .88rem; }
@media (max-width: 700px) {
  .hide-phone { display: none; }
  .contact-card-full dl { grid-template-columns: 1fr; gap: 2px; }
  .contact-card-full dd { margin-bottom: 8px; }
  .dup-pair { grid-template-columns: 1fr; }
}
.notice-card { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.link-more summary { list-style: none; cursor: pointer; }
.link-more summary::-webkit-details-marker { display: none; }
.num-edit .num-rows { display: grid; gap: 8px; margin: 6px 0 8px; }
.num-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
.num-roles { display: block; font-size: .74rem; color: var(--gold-ink); font-weight: 600; }
.find-only { display: none; }
@media (max-width: 700px) {
  .num-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "role person del" "kind value value"; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .num-row > [name="num_role[]"] { grid-area: role; }
  .num-row > [name="num_person[]"] { grid-area: person; }
  .num-row > select { grid-area: kind; }
  .num-row > [name="num_value[]"] { grid-area: value; }
  .num-row > [data-num-del] { grid-area: del; }
}
.num-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .num-chips .chip { text-decoration: none; white-space: normal; }
.contact-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.contact-place select { max-width: 100%; min-width: 0; width: auto; }
.only-phone, .person-link small.only-phone { display: none; }
@media (max-width: 700px) { .only-phone, .person-link small.only-phone { display: block; } }

/* ---------- Quotations ---------- */
.q-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.q-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin: 0; color: var(--ink); text-decoration: none; }
.q-stat b { font-size: 1.35rem; line-height: 1.2; }
.q-stat > span { font-size: .82rem; color: var(--ink-3); }
a.q-stat:hover { border-color: var(--gold); }
.q-alert { border-color: var(--late); box-shadow: inset 4px 0 0 var(--late); }
.q-alert b { color: var(--late); }
.q-items { min-width: 980px; }
.q-items input, .q-items select { width: 100%; min-width: 0; padding: 6px 8px; }
.q-items td { padding: 4px 4px; vertical-align: middle; }
.q-items .q-amt { text-align: right; font-weight: 600; white-space: nowrap; }
.q-totals { display: grid; grid-template-columns: auto minmax(120px, max-content); gap: 6px 18px; justify-content: end; align-items: center; margin-top: 10px; }
.q-totals .grand { font-size: 1.15rem; font-weight: 700; }
.q-totals input { width: 110px; }
.q-follow-form .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.q-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q-timeline li { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; }
.q-timeline li.k-won { border-color: var(--ok); }
.q-timeline li.k-lost { border-color: var(--late); }
.q-timeline li.k-sent, .q-timeline li.k-follow { border-color: var(--gold); }
@media (max-width: 700px) {
  .q-stats { grid-template-columns: 1fr 1fr; }
  .q-follow-form .grid-3 { grid-template-columns: 1fr; }
}

/* ---- Sign-in v3 (9 Nov): richer right side, welcoming card, smart input ---- */
body.guest-split { background: #EEF4F3; position: relative; }
.si-bg { position: fixed; inset: 0 0 0 auto; width: 46.5%; overflow: hidden; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 500px at 100% 0%, #D6EFEB 0%, rgba(214,239,235,0) 60%), radial-gradient(700px 500px at 0% 100%, #E3ECF6 0%, rgba(227,236,246,0) 60%), #F3F7F6; }
.si-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(30,35,41,.07) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 72%); }
.si-bg i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: si-drift 18s ease-in-out infinite alternate; }
.si-bg .b1 { width: 340px; height: 340px; background: #9FE3D9; top: -60px; right: -40px; }
.si-bg .b2 { width: 280px; height: 280px; background: #C9D8F0; bottom: -40px; left: 10%; animation-delay: -6s; }
.si-bg .b3 { width: 200px; height: 200px; background: #F6D9B5; top: 45%; right: 18%; opacity: .35; animation-delay: -12s; }
@keyframes si-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.12); } }
.guest-split .guest-box { position: relative; z-index: 1; max-width: 440px; }
.signin-card { position: relative; padding: 34px 32px 26px !important; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 24px 60px -12px rgba(16,24,40,.18) !important; border-radius: 22px !important; animation: si-rise .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes si-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.si-badge { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #1E2329; box-shadow: 0 10px 24px -6px rgba(30,35,41,.45), inset 0 0 0 1px rgba(255,255,255,.06); margin-bottom: 18px; }
.si-title { font-size: 1.7rem; line-height: 1.15; margin: 4px 0 6px; color: #1E2329; letter-spacing: -.02em; font-weight: 700; }
.si-sub { margin: 0 0 18px; color: #5B6573; line-height: 1.55; font-size: .97rem; }
.si-sub b { color: #1E2329; }
.si-form label { font-weight: 600; font-size: .88rem; color: #1E2329; }
.si-input { position: relative; display: flex; align-items: center; }
.si-input input { width: 100%; padding: 14px 14px 14px 46px !important; border-radius: 12px !important; border: 1.5px solid #D6DCE1 !important; background: #fff !important; font-size: 1.02rem !important; transition: border-color .15s, box-shadow .15s; }
.si-input input:focus { border-color: #2BB3A3 !important; box-shadow: 0 0 0 4px rgba(43,179,163,.18) !important; outline: none; }
.si-ic { position: absolute; left: 14px; color: #8A95A3; display: grid; place-items: center; pointer-events: none; }
.si-ic svg { display: none; }
.si-input:not([data-kind="mail"]):not([data-kind="phone"]) .ic-user, .si-input[data-kind=""] .ic-user, .si-input[data-kind="mail"] .ic-mail, .si-input[data-kind="phone"] .ic-phone { display: block; }
.si-input[data-kind="mail"] .si-ic, .si-input[data-kind="phone"] .si-ic { color: #0E7065; }
.si-hint { margin: -2px 0 2px; font-size: .84rem; color: #5B6573; min-height: 1.2em; }
.si-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px !important; border-radius: 12px !important; font-size: 1.02rem !important;
  background: linear-gradient(180deg, #34C3B2 0%, #2BB3A3 100%) !important; border: 0 !important; color: #0B2622 !important; box-shadow: 0 8px 20px -6px rgba(43,179,163,.6); transition: transform .12s, box-shadow .15s; }
.si-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(43,179,163,.7); }
.si-btn svg { transition: transform .2s; } .si-btn:hover svg { transform: translateX(3px); }
.si-btn.is-busy { opacity: .85; pointer-events: none; }
.si-trust { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid #E6EAED; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .8rem; color: #4A5562; font-weight: 600; }
.si-trust li { display: flex; align-items: center; gap: 6px; }
.si-new { margin: 12px 0 0; font-size: .82rem; color: #6B7684; text-align: center; }
.guest-split .guest-foot { color: #5B6573; }
.guest-split .ws-chip { margin-bottom: 4px; }
.signin-card .code-input { padding: 14px !important; border-radius: 12px !important; font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; border: 1.5px solid #D6DCE1 !important; }
.signin-card .code-input:focus { border-color: #2BB3A3 !important; box-shadow: 0 0 0 4px rgba(43,179,163,.18) !important; outline: none; }
/* Left showcase: a slow teal aurora behind the ring */
.showcase::before { content: ""; position: absolute; width: 620px; height: 620px; left: 10%; top: 28%; border-radius: 50%; background: radial-gradient(closest-side, rgba(43,179,163,.20), rgba(43,179,163,0)); animation: si-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.showcase > * { position: relative; }
@media (prefers-reduced-motion: reduce) { .si-bg i, .showcase::before, .signin-card { animation: none; } }
@media (max-width: 900px) {
  .si-bg { width: 100%; top: auto; height: 70%; }
  .showcase { padding-bottom: 54px; border-radius: 0 0 28px 28px; }
  .guest-split .guest-box { margin-top: -40px; padding: 0 14px 28px; }
  .signin-card { padding: 26px 20px 20px !important; }
  .si-badge { width: 52px; height: 52px; border-radius: 16px; margin: -54px auto 14px; border: 4px solid #EEF4F3; box-sizing: content-box; }
  .si-title, .si-sub { text-align: center; }
  .si-title { font-size: 1.5rem; }
  .guest-split .ws-chip { display: flex; width: max-content; margin: 0 auto 6px; }
}
.si-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.si-trust li { flex-direction: column; gap: 4px; justify-content: center; font-size: .76rem; line-height: 1.25; }
.si-trust li span { font-size: 1.1rem; }
@media (max-width: 900px) {
  .showcase { overflow: visible; }
  .showcase .sc-quote { min-height: 0; }
  .showcase .sc-quote blockquote:not(.on) { display: none; }
}
/* Employee family / emergency rows */
.fam-rows { display: grid; gap: 8px; margin: 8px 0 10px; }
.fam-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr 1fr 1.4fr auto; gap: 6px; align-items: center; }
.fam-row input { min-width: 0; }
.fam-em { white-space: nowrap; font-size: .86rem; }
@media (max-width: 900px) {
  .fam-row { grid-template-columns: 1fr 1fr; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .fam-em { grid-column: 1 / -1; }
}
/* Address in three lines: street / area + landmark / city + state + PIN */
.addr-block { display: grid; gap: 8px; margin-top: 10px; }
.addr-block legend { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.addr-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.addr-3 { display: grid; grid-template-columns: 1.4fr 1.2fr .7fr; gap: 8px; }
.addr-block input { min-width: 0; }
@media (max-width: 600px) { .addr-2 { grid-template-columns: 1fr; } .addr-3 { grid-template-columns: 1fr 1fr; } .addr-3 > :first-child { grid-column: 1 / -1; } }

/* ---- Sign-in showcase v2 (9 Nov): live app preview instead of floating cards ---- */
.showcase { gap: 22px; justify-content: space-between; }
.sc-hero { max-width: 560px; }
.sc-art2 { height: auto; min-height: 330px; max-width: 600px; width: 100%; display: block; position: relative; margin: 6px 0; }
.sc-win { position: relative; width: min(520px, 92%); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(10px); padding: 14px 16px 12px; opacity: 0; animation: sc-in .7s ease .2s forwards; }
.sc-win-top { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: #A9B4BE; margin-bottom: 12px; }
.sc-win-top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sc-win-top i:first-child { background: #F07167; } .sc-win-top i:nth-child(2) { background: #F6C35B; } .sc-win-top i:nth-child(3) { background: #5FCF8F; }
.sc-win-top span { margin-left: 8px; font-weight: 600; color: #DDE3E8; }
.sc-live { margin-left: auto; color: #5FD8C8; font-weight: 600; font-size: .7rem; animation: sc-pulse 2s ease-in-out infinite; }
@keyframes sc-pulse { 50% { opacity: .45; } }
.sc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-kpis div { border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); padding: 8px 10px; display: flex; flex-direction: column; }
.sc-kpis small { font-size: .68rem; color: #8FA0AD; }
.sc-kpis b { font-size: 1.35rem; color: #fff; line-height: 1.2; }
.sc-kpis em { font-style: normal; font-size: .66rem; color: #A9B4BE; } .sc-kpis em.up { color: #5FCF8F; }
.sc-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 74px; margin: 12px 2px 8px; }
.sc-bars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.sc-bars i { width: 100%; max-width: 26px; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #3CC7B6, rgba(43,179,163,.35)); transform-origin: bottom; transform: scaleY(0); animation: sc-grow .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(.5s + var(--d) * .08s); }
.sc-bars span:nth-child(6) i { background: linear-gradient(180deg, #7FE3D6, #2BB3A3); box-shadow: 0 0 18px rgba(43,179,163,.5); }
.sc-bars small { font-size: .6rem; color: #6F7E8A; }
@keyframes sc-grow { to { transform: scaleY(1); } }
.sc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sc-rows li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.035); opacity: 0; animation: sc-in .5s ease forwards; }
.sc-rows .r1 { animation-delay: 1s; } .sc-rows .r2 { animation-delay: 1.2s; } .sc-rows .r3 { animation-delay: 1.4s; }
.sc-rows .tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.sc-rows .tx b { color: #EEF2F5; font-size: .82rem; font-weight: 600; } .sc-rows .tx small { color: #8FA0AD; font-size: .68rem; }
.sc-rows .st { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; flex: 0 0 auto; }
.sc-rows .st i { width: 10px; height: 6px; border-left: 2px solid #0F2420; border-bottom: 2px solid #0F2420; transform: rotate(-45deg) scale(0); margin-top: -2px; }
.sc-rows .r1 .st, .sc-rows .r2 .st { animation: sc-done .35s ease forwards; } .sc-rows .r1 .st { animation-delay: 2s; } .sc-rows .r2 .st { animation-delay: 2.6s; }
.sc-rows .r1 .st i, .sc-rows .r2 .st i { animation: sc-tickin .3s ease forwards; } .sc-rows .r1 .st i { animation-delay: 2.1s; } .sc-rows .r2 .st i { animation-delay: 2.7s; }
@keyframes sc-done { to { background: #2BB3A3; border-color: #2BB3A3; } }
@keyframes sc-tickin { to { transform: rotate(-45deg) scale(1); } }
.sc-rows .st.go { width: auto; height: auto; border: 0; border-radius: 6px; padding: 2px 7px; font-size: .64rem; font-weight: 700; color: #F6C35B; background: rgba(246,195,91,.14); }
.sc-art2 .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: #fff; flex: 0 0 auto; border: 2px solid #1E2329; }
.av.t1 { background: #2B8C82; } .av.t2 { background: #6D5BD0; } .av.t3 { background: #C9732E; } .av.t4 { background: #3A79C9; }
.sc-ring-sm { position: absolute; top: -22px; right: 2%; filter: drop-shadow(0 12px 30px rgba(43,179,163,.35)); }
.sc-toast { position: absolute; right: 0; bottom: 34px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(30,35,41,.92); border: 1px solid rgba(95,216,200,.35);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); opacity: 0; transform: translateY(12px); animation: sc-toastin .6s cubic-bezier(.22,1,.36,1) 3.2s forwards, sc-float 6s ease-in-out 4s infinite; }
.sc-toast span:first-child { font-size: 1.2rem; } .sc-toast span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.sc-toast b { color: #fff; font-size: .84rem; } .sc-toast small { color: #8FA0AD; font-size: .7rem; }
@keyframes sc-toastin { to { opacity: 1; transform: none; } }
.sc-team { position: absolute; left: 4%; bottom: -8px; display: flex; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(30,35,41,.9); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); opacity: 0; animation: sc-in .6s ease 1.8s forwards; }
.sc-team .av { margin-left: -6px; } .sc-team .av:first-child { margin-left: 0; }
.sc-team .more { margin-left: -6px; height: 26px; padding: 0 7px; border-radius: 999px; background: #2BB3A3; color: #0F2420; font-size: .66rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #1E2329; }
.sc-team small { margin-left: 8px; font-size: .72rem; color: #A9B4BE; }
.sc-quote { min-height: 0; }
.sc-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-mods li { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #C6CFD7; font-size: .8rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .sc-win, .sc-rows li, .sc-toast, .sc-team { animation: none; opacity: 1; transform: none; }
  .sc-bars i { animation: none; transform: none; } .sc-live { animation: none; }
  .sc-rows .r1 .st, .sc-rows .r2 .st { animation: none; background: #2BB3A3; border-color: #2BB3A3; } .sc-rows .r1 .st i, .sc-rows .r2 .st i { animation: none; transform: rotate(-45deg) scale(1); }
}
@media (max-width: 900px) { .sc-art2, .sc-mods { display: none; } }
@media (max-height: 760px) and (min-width: 901px) { .sc-art2 { min-height: 280px; } .sc-bars { height: 52px; } .sc-quote { display: none; } }
.sc-art2 { margin: 18px 0 30px; }
.sc-win { width: min(490px, 84%); margin: 0; }
.sc-ring-sm { top: -38px; right: auto; left: calc(min(490px, 84%) - 72px); }
.sc-win-top .sc-live { margin-right: 70px; }
.sc-toast { right: auto; left: calc(min(490px, 84%) - 120px); bottom: 64px; }
.sc-team { left: 18px; bottom: -22px; }
.sc-win { margin: 0 auto; }
.sc-win .sc-ring-sm { top: -44px; right: -44px; left: auto; }
.sc-win .sc-toast { left: auto; right: -64px; bottom: 58px; }
.sc-win .sc-team { left: -22px; bottom: -24px; }
.sc-win-top .sc-live { margin-right: 66px; }
.sc-win .sc-toast { right: -46px; bottom: -30px; }
@media (max-height: 960px) and (min-width: 901px) {
  .showcase { padding-top: 28px; padding-bottom: 26px; gap: 16px; }
  .sc-tag { font-size: clamp(1.9rem, 3vw, 2.7rem); }
  .sc-bars { height: 54px; margin: 10px 2px 6px; }
  .sc-art2 { margin: 26px 0 26px; min-height: 0; }
}
.si-why { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: #F1F8F7; border: 1px solid #D5ECE8; font-size: .82rem; line-height: 1.5; color: #3E4A57; }
.si-why p { margin: 0; } .si-why p + p { margin-top: 6px; color: #5B6573; }
.si-why b { color: #0E7065; }
.sc-tease { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .88rem; color: #C6CFD7; }
.sc-tease li { display: flex; align-items: center; gap: 8px; }
.sc-tease span { width: 20px; height: 20px; border-radius: 50%; background: rgba(43,179,163,.2); color: #2BB3A3; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.sc-tease li.lock { color: #8FA0AD; font-style: italic; } .sc-tease li.lock span { background: transparent; font-size: .85rem; }
@media (max-width: 900px) { .sc-tease { display: none; } }
/* ---- Sign-in fits laptop screens (10 Nov): no page scroll on 1366×768, 1280×720 etc. ----
   Left showcase is pinned to the screen height and trims extras on shorter screens;
   the sign-in card tightens so it fits too. Phones: no sideways scroll from the glow. */
body.guest-split { overflow-x: clip; }
@media (min-width: 901px) {
  .showcase { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
}
@media (min-width: 901px) and (max-height: 900px) {
  .showcase { padding-top: 24px; padding-bottom: 22px; gap: 12px; }
  .sc-quote { display: none; }
  .sc-tag { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
  .sc-sub { margin-top: 8px; font-size: .98rem; line-height: 1.5; }
  .sc-art2 { margin: 30px 0 28px; }
  .signin-card { padding: 26px 28px 20px !important; }
  .si-badge { width: 50px; height: 50px; border-radius: 15px; margin-bottom: 12px; }
  .si-title { font-size: 1.5rem; }
  .si-sub { margin-bottom: 12px; }
  .si-trust { margin-top: 14px; padding-top: 12px; }
  .guest-split .guest-box { padding-top: 16px; padding-bottom: 16px; }
  .guest-foot { margin-top: 10px; }
  .si-badge { display: none; }
  .si-why { margin-top: 12px; padding: 9px 12px; font-size: .78rem; line-height: 1.45; }
  .si-why p + p { margin-top: 3px; }
  .si-new { margin-top: 8px; font-size: .78rem; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .sc-mods, .sc-team, .sc-toast { display: none; }
  .sc-art2 { margin: 26px 0 8px; }
  .sc-rows .r3 { display: none; }
  .si-trust { display: none; }
  .sc-tease { gap: 6px 18px; font-size: .82rem; }
}
@media (max-width: 900px) { .showcase::before, .showcase .sc-quote { display: none; } }
/* Task tracker (10 Nov): reached steps show green with a tick; the step the task is on now is bold */
.trk.done::before { background: var(--ok); }
.trk.done .trk-lbl { color: var(--ok); }
.trk.now .trk-lbl { font-weight: 700; color: var(--ink); }
.trk.done.now .trk-dot { box-shadow: 0 0 0 4px var(--ok-soft); }
.trk.done.now .trk-lbl { color: var(--ok); }
/* Contact details (10 Nov): Personal (sign-in) vs Company groups */
.contact-card-full dt.dl-group { grid-column: 1 / -1; margin-top: 14px; font-weight: 700; color: var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.contact-card-full dd.dl-group { grid-column: 1 / -1; margin: -2px 0 4px; }
.contact-card-full dt.dl-group:first-of-type { margin-top: 0; }
.key-chip { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.key-chip::before { content: none !important; }

/* =====================================================================
   Projects, subtasks & board (10 Nov) — Asana-style, using theme tokens
   ===================================================================== */
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pj-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); border-top: 4px solid var(--pc, var(--gold)); transition: box-shadow .15s, transform .15s; }
.pj-card:hover { box-shadow: 0 8px 24px -8px rgba(16,24,40,.18); transform: translateY(-1px); }
.pj-card-top, .pj-head-top { display: flex; align-items: center; gap: 10px; }
.pj-name { font-size: 1.05rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pj-swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--pc, var(--gold)); flex: 0 0 auto; }
.pj-swatch.lg { width: 18px; height: 18px; border-radius: 6px; }
.pj-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--ink-2); align-items: center; }
.pj-bar { height: 8px; border-radius: 999px; background: var(--row-alt); overflow: hidden; }
.pj-bar.lg { height: 10px; margin-top: 12px; }
.pj-bar span { display: block; height: 100%; border-radius: inherit; background: var(--pc, var(--gold)); transition: width .6s cubic-bezier(.22,1,.36,1); }
.pj-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
.pj-pct { margin-left: auto; font-weight: 700; color: var(--ink); }
.pj-health { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pj-h-ok { background: var(--ok-soft); color: var(--ok); }
.pj-h-risk { background: var(--amber-soft); color: var(--amber); }
.pj-h-off { background: var(--late-soft); color: var(--late); }
.pj-h-hold { background: var(--row-alt); color: var(--ink-2); }
.pj-h-done { background: var(--blue-soft); color: var(--blue); }
.pj-h-ok::before { content: "● "; } .pj-h-risk::before { content: "▲ "; } .pj-h-off::before { content: "■ "; } .pj-h-done::before { content: "✓ "; }
.pj-new > summary, .pj-edit > summary, .pj-place > summary { cursor: pointer; padding: 2px 0; }
.pj-new[open] > summary, .pj-place[open] > summary { margin-bottom: 12px; }
.pj-edit { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pj-edit > summary { color: var(--link, var(--gold-ink)); font-weight: 600; font-size: .9rem; }
.pj-edit[open] > summary { margin-bottom: 10px; }
.pj-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-color { position: relative; cursor: pointer; }
.pj-color input { position: absolute; opacity: 0; }
.pj-color span[aria-hidden] { display: block; width: 26px; height: 26px; border-radius: 8px; background: var(--pc); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.pj-color input:checked + span { box-shadow: 0 0 0 2px var(--ink); }
.pj-color input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pj-head { border-top: 4px solid var(--pc, var(--gold)); }
.pj-head h1 { margin: 0 0 4px; font-size: 1.5rem; }
.pj-head-main { flex: 1; min-width: 0; }
.pj-note { margin: 12px 0 0; color: var(--ink-2); }
.pj-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 10px; }
.pj-toolbar .btn { margin-left: auto; }
.pj-sec { margin-bottom: 12px; }
.pj-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pj-sec-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.pj-sec-n { font-size: .75rem; font-weight: 700; background: var(--row-alt); color: var(--ink-2); padding: 1px 8px; border-radius: 999px; }
.pj-sec-menu { position: relative; }
.pj-sec-menu > summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); font-weight: 700; }
.pj-sec-menu > summary::-webkit-details-marker { display: none; }
.pj-sec-menu > summary:hover { background: var(--row-alt); }
.pj-sec-pop { position: absolute; right: 0; top: 36px; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(16,24,40,.25); padding: 10px; display: grid; gap: 8px; min-width: 280px; }
.pj-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-inline input, .pj-inline select { flex: 1; min-width: 0; }
.pj-sec-empty { margin: 8px 0 4px; }
.pj-add { display: grid; grid-template-columns: minmax(0, 1fr) 180px 150px auto; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pj-add input { min-width: 0; }
.pj-add-sec { display: flex; gap: 8px; }
.pj-add-sec input { flex: 1; min-width: 0; }
.pj-foot { margin-top: 10px; }
.pj-link { font-weight: 600; text-decoration: none; border-left: 4px solid var(--pc, var(--gold)); padding-left: 6px; }
.sub-of { margin: -4px 0 10px; font-size: .9rem; color: var(--ink-2); }
.sub-rows .row { padding-left: 6px; border-left: 3px solid var(--line); }
.chip-subs { background: var(--row-alt); color: var(--ink-2); font-weight: 600; }
@media (max-width: 700px) {
  .pj-add { grid-template-columns: 1fr 1fr; }
  .pj-add input[name="title"] { grid-column: 1 / -1; }
  .pj-toolbar .btn { margin-left: 0; }
  .pj-sec-pop { right: -8px; min-width: 240px; }
}
/* Board (Kanban) */
.kb { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; width: 100%; min-width: 0; contain: inline-size; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.kb-col { scroll-snap-align: start; }
@media (max-width: 700px) { .kb { grid-auto-columns: 78%; } }
.kb-col { background: var(--row-alt); border-radius: 14px; padding: 10px; min-height: 140px; display: flex; flex-direction: column; }
.kb-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; font-size: .9rem; color: var(--ink); }
.kb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.kb-todo .kb-dot { background: var(--blue); } .kb-in_progress .kb-dot { background: var(--gold); }
.kb-waiting .kb-dot { background: var(--amber); border-radius: 2px; } .kb-done .kb-dot { background: var(--ok); }
.kb-requested .kb-dot { background: transparent; border: 2px dashed var(--ink-3); }
.kb-n { margin-left: auto; font-size: .75rem; font-weight: 700; background: var(--card); color: var(--ink-2); padding: 1px 8px; border-radius: 999px; }
.kb-sub { margin: -4px 4px 6px; font-size: .74rem; color: var(--ink-3); }
.kb-list { list-style: none; margin: 0; padding: 2px; display: grid; gap: 8px; flex: 1; min-height: 60px; border-radius: 10px; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; }
.kb-list.is-over { background: var(--gold-soft); outline-color: var(--gold); }
.kb-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 8px; display: grid; gap: 6px; box-shadow: var(--shadow); }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card.is-drag { opacity: .5; }
.kb-card.is-busy { opacity: .6; pointer-events: none; }
.kb-card.is-late { border-left: 4px solid var(--late); }
.kb-title { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; overflow-wrap: anywhere; }
.kb-title:hover { text-decoration: underline; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: var(--ink-2); align-items: center; }
.kb-subs { font-weight: 600; }
.kb-proj { font-size: .72rem; font-weight: 700; color: var(--ink-2); text-decoration: none; border-left: 3px solid var(--pc); padding-left: 6px; }
.kb-move select { width: 100%; font-size: .8rem; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.kb-empty { font-size: .8rem; color: var(--ink-3); text-align: center; padding: 14px 6px; border: 1px dashed var(--line); border-radius: 10px; }
.kb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 200; box-shadow: 0 10px 30px -8px rgba(0,0,0,.4); transition: opacity .4s, transform .4s; }
.kb-toast.out { opacity: 0; transform: translate(-50%, 8px); }
@media (hover: none) { .kb-card[draggable="true"] { cursor: default; } }

/* =====================================================================
   Hiring (10 Nov): openings, apply page, candidate, interview scorecard
   ===================================================================== */
.hr-st { font-weight: 600; }
.hr-st-applied { background: var(--blue-soft); color: var(--blue); }
.hr-st-shortlisted, .hr-st-interview { background: var(--gold-soft); color: var(--gold-ink); }
.hr-st-selected { background: var(--amber-soft); color: var(--amber); }
.hr-st-approved, .hr-st-joined { background: var(--ok-soft); color: var(--ok); }
.hr-st-rejected, .hr-st-withdrawn { background: var(--row-alt); color: var(--ink-3); }
.hr-st-selected::before { content: "⏳ "; } .hr-st-joined::before { content: "✓ "; }
.hr-stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.hr-stage { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .86rem; font-weight: 600; }
.hr-stage b { margin-left: 4px; color: var(--ink-3); font-weight: 700; }
.hr-stage.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.hr-stage.on b { color: #CFE9E5; }
:root[data-theme="dark"] .hr-stage.on { background: var(--gold); border-color: var(--gold); color: #0B2622; }
.hr-link { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hr-link input { flex: 1 1 260px; min-width: 0; font-size: .85rem; color: var(--ink-2); }
.hr-toggle { margin-top: 8px; }
.is-closed { opacity: .7; }
.hr-sum { margin: 0; }
.hr-cand-top { display: flex; align-items: center; gap: 14px; }
.hr-cand-main { flex: 1; min-width: 0; }
.hr-cand-main h1 { margin: 0 0 4px; font-size: 1.45rem; }
.hr-av { width: 52px; height: 52px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; flex: 0 0 auto; }
.hr-steps { list-style: none; display: flex; margin: 18px 0 4px; padding: 0; }
.hr-dl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 6px 10px; margin: 0 0 10px; font-size: .9rem; }
.hr-dl dt { color: var(--ink-3); }
.hr-dl dd { margin: 0; overflow-wrap: anywhere; }
.hr-about { font-style: italic; color: var(--ink-2); border-left: 3px solid var(--line); padding-left: 10px; }
.hr-other { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.hr-other .pj-inline { flex: 1 1 280px; }
.hr-sched { grid-template-columns: minmax(0, 1fr) 160px auto; }
.timeline-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.hr-rec-hire { background: var(--ok-soft); color: var(--ok); }
.hr-rec-hold { background: var(--amber-soft); color: var(--amber); }
.hr-rec-reject { background: var(--late-soft); color: var(--late); }
.hr-q legend { font-weight: 600; font-size: 1rem; display: flex; gap: 10px; align-items: baseline; padding: 0; }
.hr-qn { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }
.hr-q input[name^="qnote"] { width: 100%; margin-top: 10px; }
.hr-rate { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hr-pill { position: relative; cursor: pointer; }
.hr-pill input { position: absolute; opacity: 0; inset: 0; }
.hr-pill span { display: inline-flex; gap: 5px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font-size: .88rem; color: var(--ink-2); min-height: 40px; }
.hr-pill input:checked + span { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; }
.hr-pill.hr-rec-hire input:checked + span { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.hr-pill.hr-rec-reject input:checked + span { border-color: var(--late); background: var(--late-soft); color: var(--late); }
.hr-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.hr-pill input:disabled + span { cursor: default; }
.hr-pill.hr-rec-hire, .hr-pill.hr-rec-hold, .hr-pill.hr-rec-reject { background: none; }
/* Public apply page (guest layout) */
body.guest:has(.apply) { align-items: start; }
body.guest:has(.apply) .guest-box { max-width: 680px; padding: 24px 0; }
.apply { display: grid; gap: 14px; }
.apply .card { padding: 24px; }
.apply-org { margin: 0 0 4px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-ink); }
.apply-list { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.apply .h3 { margin: 14px 0 6px; font-size: 1rem; }
.apply-form .h3 { margin-top: 4px; }
.apply-consent { font-size: .88rem; line-height: 1.45; }
.apply-done { text-align: center; }
.apply-tick { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 2rem; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) {
  .hr-sched { grid-template-columns: 1fr 1fr; }
  .hr-sched .btn { grid-column: 1 / -1; }
  .hr-steps .trk-lbl { font-size: .66rem; }
  .apply .card { padding: 18px; }
}
.apply-title { font-size: 1.5rem; line-height: 1.2; margin: 2px 0 8px; color: var(--ink); letter-spacing: -.01em; }
.hr-steps .trk { min-width: 0; }
.apply-consent { display: flex; gap: 10px; align-items: flex-start; }
.apply-consent input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--gold); }
.hr-q legend { float: left; width: 100%; margin-bottom: 2px; } .hr-q .hr-rate { clear: both; } .hr-q { border: 1px solid var(--line); }
/* Notifications: New / Seen tabs (10 Nov) */
.notif-seen { margin-left: 6px; }
.notif-seen .btn { white-space: nowrap; }
.notif-list .row { transition: opacity .25s, transform .25s; }
.notif-list .row.notif-out { opacity: 0; transform: translateX(24px); }
/* Sender highlighted (10 Nov): requests + notifications show who it is from */
.req-from { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: .92rem; }
.req-from-lbl { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.req-from .pwho { font-weight: 700; font-size: 1rem; }
.req-when { color: var(--ink-3); font-size: .82rem; }
.notif-list .row { gap: 12px; }
.notif-av { flex: 0 0 34px; display: grid; place-items: center; }
.notif-sys { width: 34px; height: 34px; border-radius: 50%; background: var(--row-alt); font-size: .95rem; }
.notif-from { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 1px; }
/* Profile menu stands apart from the page (10 Nov): tinted surface, clear edge, deeper shadow */
.profile-menu.pm2 { background: var(--detail-bg); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); box-shadow: 0 2px 6px rgba(16,24,40,.08), 0 24px 48px -12px rgba(16,24,40,.35); }
.profile-menu.pm2 .pm-tiles a:hover, .profile-menu.pm2 .pm-links a:hover, .profile-menu.pm2 button.link:hover { background: var(--card); }
:root[data-theme="dark"] .profile-menu.pm2 { box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 48px -12px rgba(0,0,0,.7); }
@media (prefers-contrast: more) { .profile-menu.pm2 { border-color: var(--ink); } }
/* Templates (10 Nov) */
.pj-head-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-savetp { margin-left: auto; }
.pj-toolbar .pj-savetp + .btn { margin-left: 0; }
.tp-card { border-top: 4px solid var(--gold); }
.tp-icon { font-size: 1.5rem; line-height: 1; }
.tp-desc { margin: 0; min-height: 2.6em; }
.tp-secs { margin: 0; color: var(--ink-2); }
.tp-actions { display: flex; gap: 8px; margin-top: 4px; }
.tp-lines { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.6; }
.tp-sec { margin: 16px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.tp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 220px 92px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.tp-row.is-off { opacity: .45; }
.tp-row.is-off .tp-title { text-decoration: line-through; }
.tp-take input { width: 20px; height: 20px; accent-color: var(--gold); }
.tp-title { font-weight: 500; overflow-wrap: anywhere; }
.tp-row select { min-width: 0; }
.tp-row select.tp-need { border-color: var(--amber); }
.tp-due { font-size: .84rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
.tp-go { align-items: center; }
@media (max-width: 700px) {
  .tp-row { grid-template-columns: 28px minmax(0, 1fr); }
  .tp-row select { grid-column: 2; }
  .tp-due { grid-column: 2; text-align: left; }
}
/* Typing help for task titles (10 Nov) */
.pj-add .as-hint, .pj-add [data-assist-hint] { grid-column: 1 / -1; }
.hint .as-row + .as-row { margin-top: 6px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--gold-ink) 25%, transparent); }
.hint .as-spell button { text-decoration: none; padding: 2px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); margin: 2px 2px; color: var(--ink); }
.hint .as-spell s { color: var(--late); text-decoration-thickness: 1.5px; }
.hint .as-spell b { color: var(--ok); }
.hint .as-all { background: var(--gold) !important; color: #0B2622 !important; border-color: var(--gold) !important; font-weight: 700; }
.hint .as-dup { color: var(--amber); }
.hint .as-dup a, .hint .as-done a { font-weight: 600; color: var(--ink); }
.hint .as-meta { color: var(--ink-3); font-size: .8rem; }
.hint .as-done { color: var(--ok); }
.hint .as-chip { text-decoration: none; padding: 2px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); margin: 2px; color: var(--ink); font-weight: 500; }
.hint .as-tip { color: var(--ink-2); font-size: .82rem; }
/* Team wins (10 Nov): live leaderboard, next-day card, TV mode */
.wins-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.wt { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.wt b { font-size: 2.1rem; line-height: 1.1; color: var(--ink); }
.wt span { color: var(--ink-2); font-size: .88rem; }
.wins-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wb-row { display: grid; grid-template-columns: 36px 40px minmax(0, 1fr) 64px auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.wb-row.top { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 45%, var(--card)); }
.wb-row.is-me { box-shadow: inset 4px 0 0 var(--gold); }
.wb-rank { font-size: 1.3rem; font-weight: 700; text-align: center; color: var(--ink-3); }
.wb-name { font-weight: 700; }
.wb-name a { color: var(--ink); text-decoration: none; }
.wb-line { font-size: .86rem; color: var(--ink-2); }
.wb-bar { height: 6px; border-radius: 999px; background: var(--row-alt); margin-top: 6px; overflow: hidden; }
.wb-bar span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.wb-done { text-align: center; }
.wb-done b { display: block; font-size: 1.5rem; color: var(--ok); line-height: 1; }
.wb-done span { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.wb-claps { font-size: .85rem; font-weight: 600; color: var(--amber); }
.wb-clapped { font-size: .82rem; color: var(--ok); font-weight: 600; white-space: nowrap; }
.wins-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.wf-time { color: var(--ink-3); font-size: .78rem; margin-right: 4px; }
.wins-card { border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold-soft) 70%, var(--card)) 0%, var(--card) 70%); }
.wins-top { display: flex; gap: 14px; align-items: center; }
.wins-medal { font-size: 2.4rem; line-height: 1; }
.wins-top h2 { margin: 0; }
.wins-praise { margin: 2px 0 0; color: var(--ink-2); }
.wins-nums { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.wins-nums div { flex: 1 1 90px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.wins-nums b { font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.wins-nums span { font-size: .78rem; color: var(--ink-3); }
.wins-nums .wins-big b { color: var(--ok); }
.wins-clap { margin: 6px 0 0; font-size: .92rem; }
.wins-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
html.tv-mode .side, html.tv-mode .topbar, html.tv-mode .bottom, html.tv-mode .page-head .btn { display: none !important; }
html.tv-mode .main { max-width: none !important; padding: 24px 32px !important; }
html.tv-mode .wt b { font-size: 3rem; }
html.tv-mode .wb-name { font-size: 1.2rem; }
@media (max-width: 700px) {
  .wins-tiles { grid-template-columns: 1fr 1fr; }
  .wb-row { grid-template-columns: 28px 40px minmax(0, 1fr) 48px; }
  .wb-clap, .wb-clapped { grid-column: 3 / -1; justify-self: start; }
}
.my-win .wb-row { grid-template-columns: 36px 40px minmax(0, 1fr) 64px; }
.my-win-msg { margin: 8px 0 0; }
@media (max-width: 700px) { .my-win .wb-row { grid-template-columns: 28px 40px minmax(0, 1fr) 48px; } }
/* My brand (10 Nov): talent profile that builds CareerPass */
.pm-brand { display: flex !important; flex-direction: column; gap: 3px; margin-top: 6px; padding: 0 !important; color: #CFE9E5 !important; font-size: .72rem; font-weight: 600; text-decoration: none; background: none !important; }
.pm-brand:hover span:last-child { text-decoration: underline; }
.pm-brand-bar { display: block; width: 100%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.pm-brand-bar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.pf-nav-brand { margin-top: 8px; border: 1px dashed color-mix(in srgb, var(--gold) 50%, var(--line)); font-weight: 650 !important; color: var(--gold-ink) !important; }
.br-head { border-top: 4px solid var(--gold); }
.br-top { display: flex; align-items: center; gap: 16px; }
.br-main { flex: 1; min-width: 0; }
.br-main h1 { margin: 0; font-size: 1.5rem; }
.br-title { margin: 2px 0 0; color: var(--ink-2); }
.br-headline { margin: 6px 0 0; font-style: italic; color: var(--ink); }
.br-ring { --p: 0; width: 86px; height: 86px; border-radius: 50%; flex: 0 0 auto; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--card) 76%, transparent 78% 100%), conic-gradient(var(--gold) calc(var(--p) * 1%), var(--row-alt) 0); }
.br-ring b { font-size: 1.3rem; line-height: 1; color: var(--ink); }
.br-ring span { font-size: .68rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.br-score { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.br-cp { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--navy); color: #fff; text-decoration: none; }
.br-cp b { font-size: 1.3rem; } .br-cp span { font-size: .78rem; color: #CFE9E5; }
:root[data-theme="dark"] .br-cp { background: var(--gold-soft); color: var(--ink); } :root[data-theme="dark"] .br-cp span { color: var(--gold-ink); }
.br-rank { padding: 6px 10px; border-radius: 10px; background: var(--row-alt); font-size: .84rem; color: var(--ink-2); }
.br-rank b { color: var(--ink); }
.br-rank-dept { background: var(--ok-soft); } .br-rank-city { background: var(--blue-soft); } .br-rank-state { background: var(--amber-soft); }
.br-steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .88rem; }
.br-step { padding: 5px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); text-decoration: none; font-weight: 600; }
.br-full { margin: 12px 0 0; color: var(--ok); font-weight: 600; }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.br-grid .card { margin: 0; }
.br-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.br-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.br-list li.is-verified { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.br-it { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.br-org, .br-yr { color: var(--ink-2); font-size: .86rem; }
.br-det { flex-basis: 100%; color: var(--ink-3); font-size: .84rem; }
.br-lvl { color: var(--amber); letter-spacing: 1px; font-size: .9rem; }
.br-lvl-off { color: var(--line); }
.br-lvl small { color: var(--ink-3); letter-spacing: 0; }
.br-ver { color: var(--ok); font-size: .78rem; font-weight: 700; }
.br-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.br-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); }
.br-chips .br-it b { font-weight: 600; }
.br-act { display: inline; }
.br-x { border: 0; background: none; color: var(--ink-3); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.br-x:hover { color: var(--late); background: var(--late-soft); }
.br-add { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.br-add input[name="title"] { flex: 1 1 200px; min-width: 0; }
.br-add input[name="org"] { flex: 1 1 140px; min-width: 0; }
.br-add input[type="number"] { width: 100px; }
.br-add .help { flex-basis: 100%; margin: 0; }
.cpb-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-2, var(--line)); }
.cpb-l { color: var(--ink-3); font-size: .86rem; }
.cpb-v { display: flex; flex-wrap: wrap; gap: 6px; }
.cpb-chip { padding: 3px 10px; border-radius: 999px; background: var(--row-alt); font-size: .86rem; }
.cpb-chip.is-ver { background: var(--ok-soft); } .cpb-chip b { color: var(--ok); }
@media (max-width: 700px) {
  .br-top { flex-wrap: wrap; }
  .br-ring { width: 72px; height: 72px; }
  .br-grid { grid-template-columns: 1fr; }
  .cpb-row { grid-template-columns: 1fr; }
}
.br-top .avatar { flex: 0 0 auto; aspect-ratio: 1; font-size: 1.4rem; }
/* Person page: task status tabs (10 Nov) */
.ptab-bar { display: inline-flex; flex-wrap: wrap; margin: 0 0 10px; }
.ptab-bar .vtoggle-btn { border: 0; cursor: pointer; font: inherit; font-size: .88rem; }
.ptab-n { margin-left: 4px; font-size: .75rem; padding: 0 6px; border-radius: 999px; background: var(--row-alt); color: var(--ink-2); }
.ptab-bar .vtoggle-btn.on .ptab-n { background: var(--gold-soft); color: var(--gold-ink); }
.ptab-bar .vtoggle-btn:not(.on) { background: none; }
.br-add .br-wide { flex: 1 1 100%; }
a.br-det { color: var(--link, var(--gold-ink)); text-decoration: none; }
.br-cvbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
/* CV (10 Nov) — view-only during the beta; printing is blocked below */
.cv-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cv-beta { font-size: .82rem; padding: 6px 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.cv-sheet { display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 980px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px -24px rgba(16,24,40,.35); user-select: none; -webkit-user-select: none; }
.cv-side { background: var(--navy); color: #E7ECEF; padding: 28px 22px; }
.cv-photo { display: grid; place-items: center; margin-bottom: 12px; }
.cv-photo .avatar { width: 112px !important; height: 112px !important; font-size: 2.2rem; border: 4px solid rgba(255,255,255,.15); }
.cv-name { color: #fff; font-size: 1.45rem; text-align: center; margin: 0; line-height: 1.2; }
.cv-role { text-align: center; color: #2BB3A3; font-weight: 600; margin: 4px 0 0; }
.cv-headline { text-align: center; font-style: italic; color: #C9D3DA; font-size: .9rem; margin: 10px 0 0; }
.cv-h { color: #2BB3A3; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.cv-contact, .cv-plain, .cv-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.cv-contact li { overflow-wrap: anywhere; }
.cv-plain small { color: #9FB0BC; }
.cv-plain a { color: #CFE9E5; }
.cv-skills li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.cv-tick { color: #5FD8C8; }
.cv-dots { display: inline-flex; gap: 3px; }
.cv-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.cv-dots i.on { background: #2BB3A3; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cv-tags span { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .8rem; }
.cv-main { padding: 28px 32px; }
.cv-sec + .cv-sec { margin-top: 20px; }
.cv-h2 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--gold-soft); display: flex; align-items: center; gap: 10px; }
.cv-badge { font-size: .68rem; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.cv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cv-stats div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.cv-stats b { font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.cv-stats span { font-size: .76rem; color: var(--ink-3); }
.cv-ranks { margin: 10px 0 0; font-size: .88rem; color: var(--ink-2); }
.cv-job + .cv-job { margin-top: 12px; }
.cv-job-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cv-job-top > span:last-child { color: var(--ink-3); font-size: .86rem; white-space: nowrap; }
.cv-job-org { color: var(--ink-2); font-size: .9rem; }
.cv-li { margin: 4px 0 0; font-size: .92rem; }
.cv-ver { font-size: .72rem; font-weight: 700; color: var(--ok); white-space: nowrap; }
.cv-quote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--row-alt); border-radius: 0 8px 8px 0; font-style: italic; }
.cv-quote cite { display: block; font-style: normal; font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.cv-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cv-refs div { display: flex; flex-direction: column; font-size: .88rem; color: var(--ink-2); }
.cv-refs b { color: var(--ink); }
@media (max-width: 760px) {
  .cv-sheet { grid-template-columns: 1fr; }
  .cv-main { padding: 20px 18px; }
  .cv-stats { grid-template-columns: 1fr 1fr; }
}
/* Beta: no printing / saving as PDF of the CV */
@media print {
  body:has(.cv-sheet) .shell, body:has(.cv-sheet) .cv-sheet { display: none !important; }
  body:has(.cv-sheet)::after { content: "CV download and printing open after the TeamTracker beta."; display: block; padding: 40px; font: 16px sans-serif; }
}
/* Hiring by business (10 Nov) */
.hr-biz { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hr-bz { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .88rem; }
.hr-bz b { margin-left: 4px; font-size: .75rem; color: var(--ink-3); }
.hr-bz.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.hr-biz-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 1.1rem; margin: 18px 0 10px; }
.hr-biz-h:first-of-type { margin-top: 4px; }
/* People form redesign (10 Nov): side drawer with grouped sections */
.row-edit[open]::before { content: ""; position: fixed; inset: 0; background: rgba(16, 24, 40, .38); z-index: 59; backdrop-filter: blur(2px); }
.row-edit[open] .person-form.pf2 { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); z-index: 60; margin: 0; padding: 0; border: 0; border-radius: 18px 0 0 18px;
  background: var(--bg); box-shadow: -20px 0 50px -10px rgba(16, 24, 40, .35); display: flex; flex-direction: column; animation: pf2-in .22s cubic-bezier(.22,1,.36,1); }
@keyframes pf2-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pf2 { text-align: left; }
.pf2-head { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--navy); color: #fff; }
.row-edit[open] .pf2-head { border-radius: 18px 0 0 0; }
.pf2-head .avatar { flex: 0 0 auto; width: 48px; height: 48px; border: 2px solid rgba(255,255,255,.25); }
.pf2-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf2-who b { font-size: 1.15rem; color: #fff; }
.pf2-who > span { font-size: .86rem; color: #C9D3DA; }
.pf2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pf2-tag { font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: #E7ECEF; }
.pf2-tag.ok { background: rgba(95,207,143,.2); color: #8FE3B4; }
.pf2-tag.warn { background: rgba(242,179,122,.22); color: #F6C99B; }
.pf2-x { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; cursor: pointer; }
.pf2-x:hover { background: rgba(255,255,255,.24); }
.pf2-head-new { border-radius: 14px 14px 0 0; }
.pf2-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: grid; gap: 12px; overscroll-behavior: contain; }
.pf2-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.pf2-sec h3 { margin: 0; font-size: .95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--ink); }
.pf2-sec h3 small { font-weight: 500; font-size: .76rem; color: var(--ink-3); }
.pf2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pf2-grid .field { margin: 0; min-width: 0; }
.pf2-full { grid-column: 1 / -1; }
.pf2-signin { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 35%, var(--card)); }
.pf2-note { margin: 0; font-size: .8rem; color: var(--ink-3); }
.pf2-warn { margin: 0; font-size: .84rem; padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.pf2-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; }
.pf2-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf2-sw { width: 40px; height: 22px; border-radius: 999px; background: var(--line); position: relative; flex: 0 0 40px; transition: background .15s; }
.pf2-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.pf2-switch input:checked + .pf2-sw { background: var(--gold); }
.pf2-switch input:checked + .pf2-sw::after { transform: translateX(18px); }
.pf2-switch input:focus-visible + .pf2-sw { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf2-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); }
.row-edit[open] .pf2-foot { position: sticky; bottom: 0; border-radius: 0 0 0 18px; }
.sub-card .pf2 { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 10px; background: var(--bg); }
@media (max-width: 760px) {
  .row-edit[open] .person-form.pf2 { width: 100vw; border-radius: 0; position: fixed; }
  .row-edit[open] .pf2-head { border-radius: 0; }
  .pf2-grid { grid-template-columns: 1fr; }
}
html.pf2-open { overflow: hidden; }

/* Head duties (10 Nov) */
.hd-jump { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.hd-dept { scroll-margin-top: 70px; }
.hd-dept-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hd-dept-head h2 { margin: 0; }
.hd-dept-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.hd-dept-form select { max-width: 280px; }
.hd-list { margin-top: 10px; }
.hd-row { display: block; padding: 0; }
.hd-det > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.hd-det > summary::-webkit-details-marker { display: none; }
.hd-open { color: var(--link); white-space: nowrap; }
.hd-det[open] .hd-open { visibility: hidden; }
.hd-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; padding: 0 14px 14px; }
.hd-task { border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.hd-checks { list-style: none; margin: 6px 0 0; padding: 0; font-size: .9rem; color: var(--ink-2); }
.hd-checks li { padding: 2px 0; }
.hd-form textarea { width: 100%; }
.chip.hd-on { background: var(--ok-soft); color: var(--ok); }
.hd-on .row-title { font-weight: 600; }
@media (max-width: 760px) {
  .hd-body { grid-template-columns: 1fr; }
  .hd-dept-form, .hd-dept-form select { width: 100%; max-width: none; }
  .hd-open { display: none; }
}

/* Documents (10 Nov) */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.doc-grid > .card { margin-bottom: 0; }
.doc-filter { margin: 0 0 10px; }
.doc-filter select { max-width: 320px; width: 100%; }
.doc-group { list-style: none; padding: 12px 14px 4px; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.doc-row { align-items: flex-start; }
.doc-ico { font-size: 1.3rem; line-height: 1.4; }
.doc-actions { margin-top: 0; flex-wrap: nowrap; }
.chip.doc-soon { background: var(--warn-soft, var(--gold-soft)); color: var(--ink); }
.doc-soon-box h2 { margin-top: 0; }
.doc-upload { position: sticky; top: 72px; }
.doc-upload input[type=file] { max-width: 100%; }
.chips .chip-btn[aria-current="true"] { border-color: var(--gold); background: var(--gold-soft); }
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-upload { position: static; }
  .doc-row { flex-wrap: wrap; }
  .doc-actions { width: 100%; padding-left: 34px; }
}

/* People drawer v3 (10 Nov night): roomy two-pane layout — side menu, one section at a time,
   completeness ring in the header, role powers, all companies. */
.row-edit[open] .person-form.pf2 { width: min(900px, 100vw); }
.pf2-head { padding: 20px 24px; gap: 16px; background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 80%, var(--gold)) 100%); }
.pf2-ring { position: relative; width: 58px; height: 58px; flex: 0 0 58px; color: #fff; }
.pf2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pf2-ring circle { fill: none; stroke-width: 5; }
.pf2-ring-bg { stroke: rgba(255, 255, 255, .16); }
.pf2-ring-fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .4s; }
.pf2-ring.is-full .pf2-ring-fg { stroke: #5FCF8F; }
.pf2-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.pf2-ring b { font-size: .9rem; color: #fff; }
.pf2-ring small { font-size: .56rem; color: #C9D3DA; text-transform: uppercase; letter-spacing: .04em; }
.pf2-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.pf2-jump { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-right: 1px solid var(--line-2); background: var(--card); overflow-y: auto; }
.pf2-jump button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: .93rem; font-weight: 600; padding: 10px 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.pf2-jump button > span { width: 22px; text-align: center; }
.pf2-jump button:hover { background: var(--row-alt, var(--line-2)); color: var(--ink); }
.pf2-jump button[aria-current] { background: var(--gold-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.pf2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-left: auto; }
.pf2-main .pf2-body { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 32px; }
.pf2-body > * { flex-shrink: 0; }
.pf2-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 40%, var(--card)); }
.pf2-todo-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--amber); margin-right: 4px; }
.pf2-miss { font: inherit; font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.pf2-miss:hover { border-color: var(--gold); color: var(--ink); text-decoration: none; }
.pf2.pf2-tabs .pf2-sec[id^="pfs-"]:not(.on) { display: none; }
.pf2.pf2-tabs .pf2-sec { border: 0; border-left: 0; box-shadow: none; background: transparent; padding: 0; gap: 18px; }
.pf2.pf2-tabs .pf2-sec h3 { font-size: 1.15rem; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.pf2-sec h3 > span[aria-hidden] { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gold-soft); font-size: 1rem; }
.pf2.pf2-tabs .pf2-grid { gap: 18px 20px; }
.pf2.pf2-tabs .pf2-note { padding: 10px 12px; border-radius: 10px; background: var(--row-alt, var(--line-2)); }
.pf2.pf2-tabs .pf2-switch { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pf2-powers > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--gold-soft) 30%, var(--card)); display: grid; gap: 8px; color: var(--ink); }
.pf2-powers ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--ink-2); display: grid; gap: 3px; }
.pf2-powers .pf2-warn { margin: 2px 0 0; }
.pf2-branch[hidden] { display: none; }
.pf2-foot { padding: 14px 24px; }
@media (max-width: 760px) {
  .pf2-head { padding: 16px; }
  .pf2-ring { width: 48px; height: 48px; flex-basis: 48px; }
  .pf2-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .pf2-jump { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line-2); overflow: visible; }
  .pf2-jump button { width: auto; padding: 7px 12px; font-size: .84rem; border: 1px solid var(--line); border-radius: 999px; }
  .pf2-jump button[aria-current] { box-shadow: none; border-color: var(--gold); }
  .pf2-main .pf2-body { padding: 16px; }
  .pf2-foot { padding: 12px 16px; }
}

/* Role guides (10 Nov night) */
.gd-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.gd { display: grid; gap: 18px; }
.gd-hero { display: flex; gap: 18px; align-items: center; padding: 24px 26px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 75%, var(--gold)) 100%); }
.gd-hero h2 { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.4; color: #fff; font-weight: 600; }
.gd-icon { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .12); font-size: 2rem; }
.gd-kicker { margin: 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.gd-hero .gd-kicker { color: #9FE5DA; }
.gd-h { margin: 4px 0 0; font-size: 1.05rem; color: var(--ink); }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gd-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; display: grid; gap: 8px; align-content: start; }
.gd-card h4 { margin: 0; font-size: 1rem; color: var(--ink); padding-right: 30px; }
.gd-card p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.gd-n { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--ink); font-weight: 700; font-size: .8rem; }
.gd-card .gd-gain { color: var(--ok); font-weight: 600; font-size: .88rem; }
.gd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gd-two > .card { margin: 0; }
.gd-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.gd-checks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.gd-foot { margin: 0; }
@media (max-width: 760px) {
  .gd-two { grid-template-columns: 1fr; }
  .gd-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .gd-hero h2 { font-size: 1.1rem; }
}
@media print {
  .sidebar, .topbar, .mobile-nav, .gd-pick, .gd-print, .page-head p, .gd-foot, nav, header.top { display: none !important; }
  .gd-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gd-card, .gd-two > .card { break-inside: avoid; }
  .gd-two { grid-template-columns: 1fr; }
}
/* First-login guide popup */
.gdp { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.gdp-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
.gdp-card { position: relative; width: min(460px, 100%); background: var(--card); color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(16, 24, 40, .45); }
.gdp-hero { height: 110px; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 70%, var(--gold)) 100%); }
.gdp-hero span { font-size: 2.8rem; }
.gdp-body { padding: 18px 24px 6px; display: grid; gap: 8px; }
.gdp-body h2 { margin: 0; font-size: 1.25rem; }
.gdp-body p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.gdp-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.gdp-list span { color: var(--ok); margin-right: 4px; }
.gdp-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; margin: 0; }
/* Role guide editor */
.ge textarea { width: 100%; }
.ge-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 16px; display: grid; gap: 10px; }
.ge-card legend { padding: 0 6px; font-weight: 700; color: var(--ink); }
.gd-head .gd-print { margin-top: 0; }
@media (max-width: 760px) { .ge .grid-2 { grid-template-columns: 1fr; } }
/* ---- Team page branch/department filters ---- */
.team-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.team-filters .tf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team-filters .tf-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-right: 2px; }
.team-filters .rf { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 10px; padding: 5px 11px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.team-filters .rf:hover { border-color: var(--navy-3); color: var(--ink); }
.team-filters .rf.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.team-filters .tf-find { max-width: 200px; }
.team-filters .tf-count { margin-left: auto; white-space: nowrap; }

/* Clean-up day (10 Nov) */
.cu-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.cu-bar { position: sticky; top: 64px; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; margin-bottom: 10px; }
.cu-bar.has-sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.cu-all { display: flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--ink); cursor: pointer; }
.cu-all input, .cu-row > input { width: 20px; height: 20px; accent-color: var(--gold); flex: 0 0 20px; }
.cu-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cu-date { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cu-date input[type=date] { padding: 5px 8px; font-size: .86rem; width: auto; flex: 0 0 auto; }
.cu-date { flex-wrap: nowrap; }
.cu-row { gap: 14px; }
.cu-row.is-late { box-shadow: inset 3px 0 0 var(--late); }
.cu-one { display: flex; gap: 6px; flex: 0 0 auto; }
@media (max-width: 760px) {
  .cu-bar { top: 56px; }
  .cu-date { border: 0; padding: 0; }
  .cu-row { flex-wrap: wrap; }
  .cu-one { width: 100%; padding-left: 34px; }
}

/* Head duties score on Today (10 Nov) */
.ds-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.ds-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 52px; grid-template-areas: "name bar pct" ". meta meta"; gap: 2px 14px; align-items: center; }
.ds-name { grid-area: name; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-bar { grid-area: bar; height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.ds-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.ds-mid .ds-bar > span { background: var(--amber); }
.ds-low .ds-bar > span { background: var(--late); }
.ds-pct { grid-area: pct; text-align: right; color: var(--ink); }
.ds-meta { grid-area: meta; }
.ds-open { color: var(--amber); }
@media (max-width: 600px) { .ds-row { grid-template-columns: 1fr 52px; grid-template-areas: "name pct" "bar bar" "meta meta"; } }
/* Training tick + tracker (10 Nov) */
.gd-done { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; border-left: 4px solid var(--gold); }
.gd-done p { margin: 0; color: var(--ink); }
.gd-done form { margin: 0; }
.gd-done.is-done { border-left-color: var(--ok); }
.gd-track { margin-bottom: 16px; }
.gd-track summary { cursor: pointer; }
.gd-track h2 { display: inline; font-size: 1.05rem; }
/* Missing papers checklist (10 Nov) */
.dm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dm-table th, .dm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.dm-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); white-space: nowrap; }
.dm-cell { text-align: center !important; }
.dm-ok { color: var(--ok); font-weight: 700; }
.dm-miss { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px dashed var(--late); color: var(--late); font-weight: 700; text-decoration: none; }
.dm-miss:hover { background: var(--late-soft); text-decoration: none; }
.dm-n { color: var(--late); }
/* Business filter chips (10 Nov) */
.co-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.co-lbl, .who-lbl { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-right: 4px; min-width: 64px; }

/* Growth moments (10 Nov): celebration after "done", count-up numbers, growth card */
.cel { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(16, 24, 40, .35); backdrop-filter: blur(2px); animation: cel-fade .25s ease; }
.cel.out { animation: cel-out .3s ease forwards; }
.cel-card { position: relative; width: min(380px, 100%); text-align: center; padding: 28px 24px 22px; border-radius: 22px; color: #F4F6F5;
  background: linear-gradient(160deg, #1E2329 0%, #1F3A3A 100%); box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); animation: cel-pop .45s cubic-bezier(.2,1.4,.4,1); }
.cel-ring { width: 120px; height: 120px; color: #F4F6F5; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 45%, transparent)); }
.cel-arc { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cel-fill 1s cubic-bezier(.22,1,.36,1) .15s forwards; }
.cel-tick { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cel-fill .45s ease .9s forwards; }
.cel-kick { margin: 8px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7FD8CC; }
.cel h2 { margin: 4px 0 6px; font-size: 1.45rem; color: #fff; }
.cel-num { margin: 0; font-size: 1rem; color: #C9D6D3; }
.cel-num b { font-size: 1.6rem; color: #fff; font-variant-numeric: tabular-nums; }
.cel-line { margin: 8px 0 16px; font-size: .92rem; color: #A9B4BE; }
.cel-confetti { position: absolute; left: 50%; top: 92px; width: 0; height: 0; pointer-events: none; }
.cel-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: cel-burst 1.3s cubic-bezier(.15,.8,.3,1) calc(.85s + var(--d)) forwards; }
.cel-big .cel-card { box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 2px #E7B85A; }
.cel-big .cel-kick { color: #E7B85A; }
@keyframes cel-fade { from { opacity: 0; } }
@keyframes cel-out { to { opacity: 0; } }
@keyframes cel-pop { from { transform: scale(.85) translateY(10px); opacity: 0; } }
@keyframes cel-fill { to { stroke-dashoffset: 0; } }
@keyframes cel-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 160px)) rotate(var(--r)); } }
:root[data-calm="1"] .cel-card, :root[data-calm="1"] .cel { animation: none; }
:root[data-calm="1"] .cel-arc, :root[data-calm="1"] .cel-tick { animation: none; stroke-dashoffset: 0; }
:root[data-calm="1"] .cel-confetti { display: none; }
@media (prefers-reduced-motion: reduce) { .cel-arc, .cel-tick { animation: none; stroke-dashoffset: 0; } .cel-confetti { display: none; } .cel-card, .cel { animation: none; } }
.cel-nums { display: flex; justify-content: center; gap: 28px; margin: 6px 0 16px; }
.cel-nums span { display: flex; flex-direction: column; align-items: center; }
.cel-nums b { font-size: 2rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.cel-nums small { font-size: .74rem; color: #8FA3A0; text-transform: uppercase; letter-spacing: .06em; }
/* My Day growth card */
.gw { display: grid; grid-template-columns: 132px minmax(0, 1fr) 150px; gap: 20px; align-items: center; padding: 16px 18px; margin: 4px 0 14px; border-radius: 18px;
  background: linear-gradient(135deg, #1E2329 0%, #1F3A3A 100%); color: #F4F6F5; }
.gw-ring { position: relative; width: 120px; height: 120px; }
.gw-ring svg { width: 100%; height: 100%; }
.gw-ring circle { fill: none; stroke-width: 11; }
.gw-bg { stroke: rgba(255,255,255,.12); }
.gw-arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: gw-arc 1.4s cubic-bezier(.22,1,.36,1) .2s forwards; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 50%, transparent)); }
@keyframes gw-arc { to { stroke-dashoffset: calc(100 - var(--p)); } }
.gw-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gw-ring b { font-size: 1.6rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.gw-ring small, .gw-side small { font-size: .66rem; color: #8FA3A0; text-transform: uppercase; letter-spacing: .06em; }
.gw-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; }
.gw-bars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.gw-bars em { font-style: normal; font-size: .72rem; color: #C9D6D3; min-height: 1em; }
.gw-bars i { width: 100%; max-width: 30px; height: var(--h); min-height: 6px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 30%, transparent)); transform-origin: bottom; transform: scaleY(0); animation: gw-grow .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(.3s + var(--d) * .08s); }
.gw-bars .is-today i { background: linear-gradient(180deg, #9FF0E4, var(--gold)); box-shadow: 0 0 14px rgba(127,216,204,.55); }
.gw-bars small { font-size: .7rem; color: #8FA3A0; }
.gw-bars .is-today small { color: #7FD8CC; font-weight: 700; }
@keyframes gw-grow { to { transform: scaleY(1); } }
.gw-side { display: grid; gap: 10px; }
.gw-streak, .gw-next { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.gw-streak span, .gw-next span { grid-row: span 2; font-size: 1.4rem; text-align: center; }
.gw-streak b, .gw-next b { font-size: 1.25rem; line-height: 1; color: #fff; }
.gw-streak:not(.on) span { filter: grayscale(1); opacity: .5; }
.gw-streak.on span { animation: gw-flame 1.6s ease-in-out infinite; transform-origin: bottom; }
@keyframes gw-flame { 50% { transform: scale(1.12) rotate(-4deg); } }
.gw-next i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: #E7B85A; }
:root[data-calm="1"] .gw-arc { stroke-dashoffset: calc(100 - var(--p)); }
:root[data-calm="1"] .gw-bars i { transform: none; }
@media (prefers-reduced-motion: reduce) { .gw-arc { animation: none; stroke-dashoffset: calc(100 - var(--p)); } .gw-bars i { animation: none; transform: none; } .gw-streak.on span { animation: none; } }
@media (max-width: 760px) {
  .gw { grid-template-columns: 110px minmax(0, 1fr); }
  .gw-ring { width: 104px; height: 104px; }
  .gw-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
.gw-ring.is-full .gw-arc { stroke: #5FCF8F; filter: drop-shadow(0 0 8px rgba(95,207,143,.6)); }
.gw-bars { min-height: 0; }
.gw-bars i { max-height: calc(100% - 34px); }

/* Sign-in preview moments (10 Nov): confetti from the ring, pulse, count bump, new rows */
.sc-conf { position: absolute; top: 20px; left: calc(min(490px, 84%) - 13px); width: 0; height: 0; pointer-events: none; z-index: 3; }
.sc-conf i { position: absolute; width: 7px; height: 10px; border-radius: 2px; background: var(--c); opacity: 0; }
.sc-conf.go i { animation: sc-burst 1.4s cubic-bezier(.15,.8,.3,1) var(--d) forwards; }
@keyframes sc-burst { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 150px)) rotate(var(--r)); } }
.sc-ring.sc-pulse { animation: sc-ringpulse .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes sc-ringpulse { 40% { transform: scale(1.12); filter: drop-shadow(0 0 26px rgba(43,179,163,.75)); } }
.sc-kpis b { display: inline-block; font-variant-numeric: tabular-nums; }
.sc-kpis b.sc-bump { animation: sc-bump .5s cubic-bezier(.2,1.6,.4,1); color: #9FF0E4; }
@keyframes sc-bump { 40% { transform: translateY(-4px) scale(1.18); } }
.sc-rows li.sc-new { opacity: 0; animation: sc-rowin .55s cubic-bezier(.22,1,.36,1) forwards; }
.sc-rows li.sc-new .st { animation: sc-done .3s ease .35s forwards; }
.sc-rows li.sc-new .st i { animation: sc-tickin .3s ease .45s forwards; }
@keyframes sc-rowin { from { opacity: 0; transform: translateY(-10px) scale(.97); background: rgba(43,179,163,.25); } to { opacity: 1; transform: none; } }
.sc-bars i { transition: height .6s cubic-bezier(.22,1,.36,1); }
.sc-toast.sc-repop { animation: sc-repop .6s cubic-bezier(.2,1.5,.4,1) forwards, sc-float 6s ease-in-out .6s infinite; }
@keyframes sc-repop { 0% { opacity: 1; transform: scale(.9); } 50% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-conf { display: none; } }

/* Sign-in preview on every screen (10 Nov): compact living strip on phones/tablets, roomier on big monitors */
.sc-mini { display: none; }
@media (max-width: 900px) {
  .sc-mini { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .scm-ring { position: relative; width: 58px; height: 58px; flex: 0 0 58px; }
  .scm-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(43,179,163,.45)); }
  .scm-arc { stroke-dasharray: 100; stroke-dashoffset: 100; animation: sc-fill 1.4s cubic-bezier(.22,1,.36,1) .2s forwards; }
  .scm-tick { stroke-dasharray: 100; stroke-dashoffset: 100; animation: sc-draw .5s ease 1.3s forwards; }
  .scm-ring.sc-pulse { animation: sc-ringpulse .7s cubic-bezier(.2,1.5,.4,1); }
  .scm-conf { position: absolute; left: 29px; top: 10px; width: 0; height: 0; pointer-events: none; }
  .scm-conf i { position: absolute; width: 6px; height: 9px; border-radius: 2px; background: var(--c); opacity: 0; }
  .scm-conf.go i { animation: sc-burst 1.3s cubic-bezier(.15,.8,.3,1) var(--d) forwards; }
  .scm-k { display: flex; flex-direction: column; line-height: 1.05; min-width: 52px; }
  .scm-k b { display: inline-block; font-size: 1.45rem; color: #fff; font-variant-numeric: tabular-nums; }
  .scm-k b.sc-bump { animation: sc-bump .5s cubic-bezier(.2,1.6,.4,1); color: #9FF0E4; }
  .scm-k small { font-size: .62rem; color: #8FA3A0; text-transform: uppercase; letter-spacing: .06em; }
  .scm-bars { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; height: 44px; min-width: 70px; }
  .scm-bars i { width: 9px; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #3CC7B6, rgba(43,179,163,.35)); transform-origin: bottom; transform: scaleY(0); animation: sc-grow .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(.4s + var(--d) * .07s); transition: height .6s ease; }
  .scm-bars i:nth-child(6) { background: linear-gradient(180deg, #7FE3D6, #2BB3A3); box-shadow: 0 0 10px rgba(43,179,163,.5); }
}
@media (max-width: 360px) { .scm-bars { display: none; } }
@media (prefers-reduced-motion: reduce) { .scm-arc, .scm-tick { animation: none; stroke-dashoffset: 0; } .scm-bars i { animation: none; transform: none; } .scm-conf { display: none; } }
/* Tablets in landscape / small laptops: keep the floating chips apart */
@media (min-width: 901px) and (max-width: 1180px) { .sc-team { display: none; } .sc-toast { bottom: -18px; right: 2%; } .sc-art2 { margin-bottom: 40px; } }
/* Big monitors (2K / 4K): scale the whole sign-in up so it doesn't look tiny */
@media (min-width: 2200px) and (min-height: 1250px) {
  body.guest-split { zoom: 1.4; --gz: 1.4; }
  body.guest-split, body.guest-split .showcase { min-height: calc(100vh / var(--gz)); }
  body.guest-split .showcase { height: calc(100vh / var(--gz)); }
}
@media (min-width: 3000px) and (min-height: 1700px) { body.guest-split { zoom: 1.9; --gz: 1.9; } }
@media (max-width: 900px) {
  body.guest-split .showcase { position: relative; z-index: 1; }
  body.guest-split .guest-box { position: relative; z-index: 2; }
  body.guest-split .si-bg { z-index: 0; }
}
@media (max-width: 900px) { .sc-mini { margin-bottom: 22px; } }

/* Task dependencies */
.dep-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dep-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dep-dot { font-size: .9rem; line-height: 1; }
.dep-dot.open { color: var(--amber, #B7791F); }
.dep-dot.done { color: var(--ok, #2BB3A3); }
.dep-link { font-weight: 600; }
.dep-x { margin-left: auto; display: inline; }
.dep-note { margin: 8px 0 0; color: var(--late); font-weight: 600; font-size: .9rem; }
.dep-add { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.dep-add select { flex: 1 1 240px; min-width: 0; }
.dep-blocking { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dep-blocking .h4 { margin: 0 0 6px; font-size: .95rem; color: var(--ink-2); }

/* Portfolio board + weekly project status */
.pf-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.pf-chip { font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.pf-chip b { font-size: 1rem; margin-right: 2px; }
.pf-group { margin-bottom: 22px; }
.pf-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1rem; }
.pf-note { margin: 6px 0 0; font-style: italic; color: var(--ink-2); font-size: .9rem; }
.pj-status { margin-top: 12px; }
.pj-status-note { margin: 0 0 6px; font-style: italic; color: var(--ink-2); }
.pj-status-edit { margin-top: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .9rem; font-weight: 600; }
.seg-opt:has(input:checked) { border-color: var(--link); background: var(--side-faint, rgba(43,179,163,.08)); }

/* Project timeline (Gantt) */
.tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl-grid { position: relative; }
.tl-head { display: flex; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; }
.tl-wk { flex: 1; text-align: left; font-size: .7rem; line-height: 1.1; color: var(--ink-3); border-left: 1px solid var(--line-2); padding-left: 4px; }
.tl-wk-m { display: block; font-weight: 700; color: var(--ink-2); min-height: .9em; }
.tl-body { position: relative; }
.tl-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); z-index: 0; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--late); z-index: 2; }
.tl-row { position: relative; height: 30px; margin-bottom: 6px; z-index: 1; }
.tl-bar { position: absolute; top: 2px; height: 24px; min-width: 10px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; background: var(--blue, #3A79C9); color: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tl-bar-lbl { font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-s-done { background: var(--ok, #2BB3A3); }
.tl-s-in_progress { background: var(--blue, #3A79C9); }
.tl-s-todo, .tl-s-requested { background: #6D5BD0; }
.tl-s-waiting { background: var(--amber, #B58A16); }
.tl-s-on_hold { background: #8792A3; }
.tl-late { background: var(--late, #C84A4A) !important; }
.tl-legend { margin-top: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tl-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 2px; }

/* Workload chart */
.wl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wl-row { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 12px; }
.wl-row.wl-heavy .wl-bar { background: var(--amber, #B58A16); }
.wl-who { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.wl-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wl-name small { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-barwrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wl-bar { height: 20px; border-radius: 6px; background: var(--blue, #3A79C9); position: relative; min-width: 2px; overflow: hidden; transition: width .3s ease; }
.wl-late { position: absolute; right: 0; top: 0; bottom: 0; background: var(--late, #C84A4A); }
.wl-count { font-size: .85rem; white-space: nowrap; }
.wl-count b { font-size: 1rem; }
.wl-flag { flex: 0 0 auto; }
@media (max-width: 640px) {
  .wl-row { grid-template-columns: 1fr; gap: 4px; }
  .wl-flag { justify-self: start; }
}

/* Goals / OKRs */
.goal-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.goal-card { }
.goal-top { display: flex; gap: 16px; align-items: flex-start; }
.goal-ring { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
.goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring .gr-bg { fill: none; stroke: var(--line-2); stroke-width: 3.2; }
.goal-ring .gr-fg { fill: none; stroke: var(--link, #2BB3A3); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.goal-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.goal-pct small { font-size: .62rem; font-weight: 600; }
.goal-main { flex: 1; min-width: 0; }
.goal-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.goal-title { font-size: 1.05rem; }
.goal-metric { margin: 2px 0 0; font-weight: 600; color: var(--link); }
.goal-note { margin: 4px 0 0; }
.goal-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.goal-card .pj-bar { margin-top: 12px; }
.goal-projects { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.goal-proj { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--card-2, var(--line-2)); font-size: .8rem; text-decoration: none; }
.goal-proj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, #2BB3A3); }
.goal-actions { margin-top: 10px; display: flex; gap: 8px; }
.goal-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }

/* Per-project calendar header */
.cal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-top .month-label { font-size: 1.05rem; }
.cal-top .btn-ghost { margin-left: auto; }

/* Reports */
.rpt-field { display: inline-flex; flex-direction: column; font-size: .75rem; font-weight: 600; color: var(--ink-2); gap: 3px; }
.rpt-field select { font-size: .9rem; }
.rpt-tbl tfoot th { border-top: 2px solid var(--line); font-weight: 700; }
.rpt-foot { margin-top: 10px; }

/* Automation rules */
.au-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-kw { font-weight: 700; color: var(--ink-2); min-width: 44px; }
.au-line select, .au-line input { min-width: 140px; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.au-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.au-list .row-meta { display: flex; gap: 10px; flex-wrap: wrap; }
/* Appreciations: thank-yous folded, big achievements listed (11 Nov) */
.thanks-fold { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
.thanks-fold summary { cursor: pointer; color: var(--ink); }
.thanks-fold .rows { margin-top: 8px; }
.row.is-highlight { box-shadow: inset 3px 0 0 #E7B85A; }
.ap-big { margin-top: 4px; }

/* Rollout & adoption dashboard */
.ro-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ro-ring { position: relative; width: 84px; height: 84px; flex: 0 0 84px; }
.ro-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ro-ring .gr-bg { fill: none; stroke: var(--line-2); stroke-width: 3; }
.ro-ring .gr-fg { fill: none; stroke: var(--link, #2BB3A3); stroke-width: 3; stroke-linecap: round; }
.ro-ring .goal-pct { font-size: 1.2rem; }
.ro-stats { display: flex; gap: 28px; flex-wrap: wrap; flex: 1; }
.ro-stat { display: flex; flex-direction: column; }
.ro-stat b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ro-stat span { font-size: .8rem; color: var(--ink-2); }
.ro-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ro-group { border-left: 4px solid var(--line); }
.ro-group.ro-bad { border-left-color: var(--late, #C84A4A); }
.ro-group.ro-warn { border-left-color: var(--amber, #B58A16); }
.ro-group.ro-info { border-left-color: var(--blue, #3A79C9); }
.ro-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ro-group-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.ro-why { margin: 4px 0 10px; }
.ro-people { display: flex; flex-wrap: wrap; gap: 8px; }
.ro-person { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; text-decoration: none; background: var(--card); }
.ro-more { align-self: center; font-size: .8rem; color: var(--ink-3); }
.ro-done { border-left: 4px solid var(--ok, #2BB3A3); }

/* What's new — slide pager (MD only) */
.wn { max-width: 840px; margin: 0 auto; }
.wn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wn-track::-webkit-scrollbar { display: none; }
.wn-slide { flex: 0 0 100%; scroll-snap-align: start; padding: 4px; box-sizing: border-box; }
.wn-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; box-shadow: 0 4px 18px rgba(20,40,36,.06); display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 290px)); min-height: 260px; }
@media (max-width: 760px) { .wn-card { max-height: calc(100vh - 330px); } }
.wn-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.wn-date { font-size: 1.3rem; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; line-height: 1.2; }
.wn-fulldate { font-size: .82rem; font-weight: 500; color: var(--ink-3); }
.wn-items { list-style: none; margin: 0; padding: 2px 8px 2px 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1 1 auto; }
.wn-items::-webkit-scrollbar { width: 7px; }
.wn-items::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.wn-item { display: flex; gap: 14px; align-items: flex-start; }
.wn-emoji { font-size: 1.4rem; line-height: 1.35; flex: 0 0 34px; text-align: center; }
.wn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wn-body b { font-size: 1rem; color: var(--ink); }
.wn-desc { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.wn-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.wn-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 1.5rem; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.wn-arrow:hover { border-color: var(--link); color: var(--link); }
.wn-dots { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 60%; }
.wn-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line-2); cursor: pointer; padding: 0; transition: transform .15s ease, background .15s ease; }
.wn-dot.on { background: var(--link); transform: scale(1.3); }
.wn-count { text-align: center; margin-top: 8px; }

/* Simple checklists — supervisor view & set-up (11 Nov) */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sl-card { display: grid; gap: 10px; border-left: 4px solid var(--line); }
.sl-card.is-done { border-left-color: var(--ok); }
.sl-card.has-no { border-left-color: var(--late); }
.sl-top { display: flex; gap: 14px; align-items: center; }
.sl-ring { --p: 0; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), var(--line-2) 0); position: relative; }
.sl-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.sl-ring span { position: relative; font-weight: 700; font-size: .9rem; color: var(--ink); }
.sl-card.is-done .sl-ring { background: conic-gradient(var(--ok) 100%, var(--line-2) 0); }
.sl-who { display: flex; flex-direction: column; min-width: 0; }
.sl-who b { color: var(--ink); }
.sl-no { margin: 0; color: var(--late); font-weight: 600; font-size: .9rem; }
.sl-ok { margin: 0; color: var(--ok); font-weight: 700; }
.sl-card .actions { margin-top: 0; }
.sl-add { margin-top: 16px; }
.sl-add summary { cursor: pointer; } .sl-add h2 { display: inline; font-size: 1.05rem; }
.sl-ic { font-size: 1.6rem; width: 36px; text-align: center; }
.sl-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sl-preset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; display: grid; gap: 6px; }
.sl-preset legend { font-weight: 700; color: var(--ink); padding: 0 6px; }
.sl-pick { display: flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--ink); cursor: pointer; }
.sl-pick input { width: 18px; height: 18px; accent-color: var(--gold); }
.sl-pick.is-have { color: var(--ink-3); }
.sl-new { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.sl-emoji { font-size: 1.4rem; text-align: center; }
.sl-opts { display: flex; flex-wrap: wrap; flex: 0 1 auto; gap: 8px 14px; align-items: center; justify-content: flex-end; }
.sl-opts .sl-part { width: auto; min-width: 140px; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; }
.sl-photo { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); cursor: pointer; }
.sl-photo input { width: 18px; height: 18px; accent-color: var(--gold); }
.sl-tags { margin-left: auto; font-size: .9rem; letter-spacing: 2px; }
.sl-new-opts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.sl-new-opts .field { min-width: 180px; }
.sl-new-opts .sl-photo { min-height: 44px; }
.sl-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-pics img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 2px solid var(--line); display: block; background: var(--line-2); }
.sl-pics a:focus-visible img, .sl-pics a:hover img { border-color: var(--gold); }
.sl-nopic { margin: 0; color: var(--ink-2); }
@media (max-width: 600px) { .sl-items .row { flex-wrap: wrap; } .sl-items .row .row-main { flex: 1 1 calc(100% - 60px); } .sl-opts { width: 100%; justify-content: flex-start; padding-left: 48px; } }
@media (max-width: 600px) { .sl-new { grid-template-columns: 80px 1fr; } .sl-tr { grid-template-columns: 1fr; } }

/* Group view (11 Nov): one card per business, red / amber / green with shapes */
.gv-kpis { margin-bottom: 16px; }
.gv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.gv-card { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--ok); margin: 0; }
.gv-card.gv-amber { border-top-color: var(--amber); }
.gv-card.gv-red { border-top-color: var(--late); }
.gv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gv-top h2 { font-size: 1.05rem; margin: 0; color: var(--ink); }
.gv-badge { font-size: .78rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.gv-badge-green { background: var(--ok-soft); color: var(--ok); }
.gv-badge-amber { background: var(--amber-soft); color: var(--amber); }
.gv-badge-red { background: var(--late-soft); color: var(--late); }
.gv-dot { display: inline-block; min-width: 1.4em; text-align: center; border-radius: 999px; font-size: .75rem; }
.gv-big { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink-3); }
.gv-big b { font-size: 2.2rem; line-height: 1; color: var(--ink); }
.gv-big b.txt-late { color: var(--late); }
.gv-bar { height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.gv-bar i { display: block; height: 100%; background: var(--late); border-radius: 999px; }
.gv-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; margin: 0; }
.gv-nums div { display: flex; justify-content: space-between; gap: 6px; font-size: .9rem; }
.gv-nums dt { color: var(--ink-3); }
.gv-nums dd { margin: 0; font-weight: 600; color: var(--ink); }
.gv-amber-txt, dd.gv-amber { color: var(--amber); }
.gv-up { color: var(--ok); font-size: .8rem; font-weight: 600; }
.gv-down { color: var(--late); font-size: .8rem; font-weight: 600; }
.gv-links { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: .9rem; }
.gv-links a { color: var(--link); }
.gv-h { font-size: 1.05rem; margin: 0 0 10px; color: var(--ink); }
.gv-staff { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.gv-staff b { font-size: 1.3rem; color: var(--ink); margin-right: 4px; }
.gv-staff span { color: var(--ink-3); }
.gv-tbl td:first-child, .gv-tbl th { white-space: nowrap; }
.gv-switch { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-3); white-space: nowrap; }
.gv-switch select { min-height: 40px; }
.gv-lock { font-size: .85rem; }
.gv-priv { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.gv-priv-row { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
/* Business switcher in the top bar + "Showing only" bar (11 Nov) */
.tb-biz { display: flex; align-items: center; margin-right: 6px; }
.tb-biz select { min-height: 36px; max-width: 190px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); padding: 0 8px; font: inherit; font-size: .88rem; }
@media (max-width: 760px) { .tb-biz { display: none; } }
.biz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--blue-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px; font-size: .92rem; }
.biz-bar form { margin: 0; }
.biz-bar button { background: none; border: 0; padding: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; min-height: 32px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; min-height: 28px; }
/* People import preview */
.pi-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.pi-n{display:flex;flex-direction:column;gap:4px;padding:16px}
.pi-n b{font-size:2rem;line-height:1;color:var(--ink)}
.pi-n span{color:var(--muted,#667);font-size:.9rem}
.pi-add b{color:var(--gold)}
.pi-warn b{color:#c2410c}
.pi-new{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--ink);border:1px solid var(--gold)}
.pi-x{color:#c2410c;font-weight:700}
.pi-table td{vertical-align:top}
.inv-all{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.inv-all>div{flex:1 1 260px}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.gv-tidy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 12px; }
.gv-tidy label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--ink-3); }
.gv-tidy select, .gv-tidy input { min-height: 40px; min-width: 200px; max-width: 100%; }
/* Owner console (11 Nov) */
.pf-org-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pf-org-row p { margin: 0; }
.pf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pf-chips li { background: var(--line-2); border-radius: 999px; padding: 6px 12px; font-size: .88rem; color: var(--ink-2); }
.pf-chips b { color: var(--ink); }
.pf-plan { color: var(--ok); font-weight: 600; }
.pf-org { margin-bottom: 16px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 16px 0; }
.pf-grid .card { margin: 0; }
.pf-bars { display: flex; align-items: stretch; gap: 8px; height: 160px; margin: 8px 0 10px; }
.pf-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.pf-col > i, .pf-pair i { display: block; width: 100%; max-width: 36px; background: var(--ok); border-radius: 6px 6px 2px 2px; }
.pf-pair { display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; height: 100%; }
.pf-pair i { max-width: 14px; }
.pf-pair i.pf-made, .pf-key-made { background: var(--blue); }
.pf-v { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.pf-l { font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.pf-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ok); vertical-align: middle; }
.pf-dl { display: grid; gap: 8px; margin: 0; }
.pf-dl div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.pf-dl dt { color: var(--ink-3); }
.pf-dl dd { margin: 0; color: var(--ink); text-align: right; }
.pf-st { font-weight: 600; font-size: .9rem; }
.pf-ok { color: var(--ok); }
.pf-bad { color: var(--late); }
.pf-hold { color: var(--amber); }
.pf-h3 { font-size: .95rem; margin: 14px 0 6px; color: var(--ink); }
.pf-err { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pf-err code { display: block; font-size: .76rem; white-space: pre-wrap; word-break: break-word; background: var(--line-2); padding: 6px 8px; border-radius: 6px; color: var(--ink-2); }
.pf-ready { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--ink-3); }
.pf-ready .pf-done { color: var(--ok); font-weight: 600; }
.pf-key.pf-key-made { background: var(--blue); }

/* Staff "What's new" (everyone) */
.nw-hero { border-radius: 18px; padding: 2px; background: linear-gradient(135deg, var(--gold) 0%, #3A79C9 100%); margin-bottom: 22px; }
.nw-hero-in { background: var(--card); border-radius: 16px; padding: 22px 24px 26px; }
.nw-eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--link); margin-bottom: 14px; }
.nw-latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nw-big { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: var(--side-faint, color-mix(in srgb, var(--gold) 7%, transparent)); border: 1px solid var(--line-2); }
.nw-big-emoji { font-size: 2rem; line-height: 1; }
.nw-big b { font-size: 1.08rem; color: var(--ink); }
.nw-big-desc { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.nw-h { font-size: 1.1rem; margin: 6px 0 14px; color: var(--ink); }
.nw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.nw-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: box-shadow .15s ease, transform .15s ease; }
.nw-card:hover { box-shadow: 0 4px 16px rgba(20,40,36,.08); transform: translateY(-1px); }
.nw-emoji { font-size: 1.6rem; line-height: 1.3; flex: 0 0 32px; text-align: center; }
.nw-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nw-body b { font-size: 1rem; color: var(--ink); }
.nw-desc { font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.nw-foot { text-align: center; }
@media (max-width: 760px) { .nw-latest { grid-template-columns: 1fr; } }
.fs-table td{vertical-align:top}
.fs-edit form{min-width:180px;margin-top:6px}

/* "✨ new" nudge banner for staff */
.news-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent), rgba(58,121,201,.12)); border: 1px solid var(--line-2); }
.news-nudge-link { text-decoration: none; color: var(--ink); font-size: .95rem; }
.news-nudge-link b { color: var(--link); }
.news-nudge-x button { background: none; border: none; color: var(--ink-3); font-size: 1rem; cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: 8px; }
.news-nudge-x button:hover { background: var(--line-2); color: var(--ink); }

/* Rollout per-unit breakdown */
.ro-unit { margin-bottom: 14px; }
.ro-unit-tbl .num { text-align: right; }
.ro-upb { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ro-upb-fill { display: block; height: 100%; border-radius: 4px; }
.ro-upb-ok { background: var(--ok, #2BB3A3); }
.ro-upb-risk { background: var(--amber, #B58A16); }
.ro-upb-off { background: var(--late, #C84A4A); }
/* Avatars never squash into ovals inside flex rows (11 Nov) */
.avatar { flex-shrink: 0; aspect-ratio: 1 / 1; background-size: cover; background-position: center; }
/* Set-up check */
.sc-ring{width:64px;height:64px;flex:0 0 64px}
.sc-item{align-items:flex-start}
.sc-tick{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 28px;border:2px solid var(--line);color:var(--muted,#667);font-weight:700}
.sc-item.is-done .sc-tick{background:var(--gold);border-color:var(--gold);color:#fff}
.sc-item.is-done .row-title{color:var(--muted,#667)}
.sc-bar{display:block;height:6px;border-radius:6px;background:var(--line);margin-top:6px;max-width:320px;overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--gold);border-radius:6px}
.sc-people{display:block;margin-top:4px}

/* Dealer targets */
.dl-funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:16px}
.dl-step,.dl-conv{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;overflow:hidden}
.dl-step b,.dl-conv b{font-size:1.6rem;line-height:1}
.dl-step span:not(.dl-ic),.dl-conv span{font-size:.82rem;color:var(--muted,#667)}
.dl-ic{font-size:1.1rem}
.dl-step.is-on{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 35%,transparent)}
.dl-bar{position:absolute;left:0;bottom:0;height:5px;width:var(--w);background:var(--gold);border-radius:0 4px 0 0;transition:width .6s}
.dl-won .dl-bar{background:#16a34a}.dl-lost .dl-bar{background:#94a3b8}
.dl-conv{background:color-mix(in srgb,var(--gold) 12%,var(--card));border-color:var(--gold)}
.dl-week{margin-bottom:16px}
.dl-wk td{vertical-align:top}
.dl-pbar{display:block;height:6px;width:90px;max-width:100%;background:var(--line);border-radius:6px;margin-top:4px;overflow:hidden}
.dl-pbar i{display:block;height:100%;background:var(--gold)}
.dl-pbar.ok i{background:#16a34a}
.dl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.dl-filters input[type=search]{flex:1 1 220px}
.dl-filters select{width:auto}
.dl-row{align-items:center;gap:10px}
.dl-row.is-due{border-left:3px solid var(--gold)}
.dl-tick{width:20px;height:20px;flex:0 0 20px}
.dl-quick{display:flex;gap:6px;flex:0 0 auto}
.dl-chip{font-size:.75rem}
.chip.dl-won{background:#dcfce7;color:#14532d}.chip.dl-lost{background:#f1f5f9;color:#475569}
.chip.dl-new{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.dl-assignbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;position:sticky;bottom:10px;z-index:5}
.dl-assignbar select{width:auto;min-width:160px}
.dl-import{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dl-tg input{width:90px}
.dl-head{display:grid;gap:12px}
.dl-head h1{margin:0}
.dl-big{display:flex;flex-wrap:wrap;gap:8px}
.dl-callbtn{font-size:1.05rem;padding:12px 18px}
.dl-track{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;list-style:none;padding:0;margin:4px 0 0;counter-reset:s}
.dl-track li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:10px;background:var(--line);opacity:.55;text-align:center}
.dl-track li.is-on{background:color-mix(in srgb,var(--gold) 22%,var(--card));opacity:1}
.dl-track li.is-now{outline:2px solid var(--gold)}
.dl-track small{font-size:.7rem;line-height:1.15}
.dl-acts{display:flex;flex-direction:column;gap:8px}
.dl-act>summary{list-style:none;display:inline-flex;cursor:pointer}
.dl-act>summary::-webkit-details-marker{display:none}
.dl-act[open]>summary{margin-bottom:10px}
.dl-act form{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.dl-outcomes{display:flex;flex-wrap:wrap;gap:6px}
.dl-oc input{position:absolute;opacity:0;pointer-events:none}
.dl-oc span{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-size:.88rem}
.dl-oc input:checked+span{background:var(--gold);border-color:var(--gold);color:#fff}
.dl-oc input:focus-visible+span{outline:2px solid var(--ink)}
.dl-quickdates{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dl-quickdates input{width:auto}
.dl-quickdates .chip{cursor:pointer;border:1px solid var(--line);background:var(--card)}
.dl-geo{color:var(--muted,#667)}.dl-geo.ok{color:#15803d}
.dl-tl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.dl-tl li{display:flex;gap:10px}
.dl-tl-ic{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:var(--line)}
.dl-tl-order .dl-tl-ic{background:#dcfce7}
.dl-tl p{margin:2px 0}
.dl-photo{width:120px;height:90px;object-fit:cover;border-radius:8px;display:block;margin:4px 0}
.dl-proof{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dl-add{margin-top:16px}
@media (max-width:600px){.dl-track small{font-size:.62rem}.dl-funnel{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   Settings page redesign — scoped to .set2 so no other page moves
   ============================================================ */
.set2 .section { margin-top: 16px; }
.set2 .card { padding: 18px 20px; transition: box-shadow .15s ease, border-color .15s ease; }
.set2 .card:hover { box-shadow: 0 3px 12px rgba(16,24,40,.08); }

/* Section header band: icon chip + title, divider under, pulled to card edges */
.set2 .s-hd {
  display: flex; align-items: center; gap: 12px;
  margin: -18px -20px 16px; padding: 15px 20px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(to bottom, var(--gold-soft) 0%, transparent 140%);
}
.set2 .s-ic {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--card); color: var(--gold-ink); border: 1px solid var(--line);
}
.set2 .s-ic svg, .set2 .s-ic .ic { width: 20px; height: 20px; }
.set2 .s-hd h2 { margin: 0; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em; }
.set2 .s-hd .count-pill { margin-left: 2px; }

/* First description sits right under the header as a subtitle */
.set2 .s-hd + .help { margin-top: -6px; margin-bottom: 14px; font-size: .86rem; }

/* Fields: brand-teal focus ring instead of navy */
.set2 input:focus, .set2 select:focus, .set2 textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
.set2 input[type="file"] {
  padding: 10px 12px; border: 1px dashed var(--line); border-radius: 9px;
  background: var(--bg); cursor: pointer;
}
.set2 input[type="file"]:hover { border-color: var(--gold); }

/* Confirm checkboxes read as a small callout */
.set2 .check:has(input[required]) {
  background: var(--amber-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px;
}

/* Hub tiles at the top: match the new chip border */
.set2 .hub-card .hub-ic { border: 1px solid var(--line); }

/* Facts list (Integrations) as tidy rows */
.set2 .facts div { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.set2 .facts div:last-child { border-bottom: 0; }

@media (max-width: 640px) {
  .set2 .s-hd { margin: -18px -20px 14px; }
}
/* Dealer rows: contact line + aligned quick buttons (11 Nov) */
.dl-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.dl-line1{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dl-line1 .row-title{color:var(--ink);text-decoration:none;font-weight:600}
.dl-line1 .row-title:hover{text-decoration:underline}
.dl-cat{font-size:.75rem;color:var(--muted,#667);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.dl-contact{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem}
.dl-ci{color:var(--ink);text-decoration:none;white-space:nowrap}
a.dl-ci{color:var(--link,var(--gold))}
a.dl-ci:hover{text-decoration:underline}
.dl-missing{color:#c2410c!important;font-weight:600}
.dl-quick{display:grid;grid-template-columns:repeat(3,38px);gap:6px;flex:0 0 auto;margin-left:auto}
.dl-qb{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);text-decoration:none;font-size:1rem}
.dl-qb.dl-qcall{background:var(--gold);border-color:var(--gold);filter:saturate(1.1)}
.dl-qb.is-off{opacity:.25}
.dl-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.dl-cards li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.dl-cards span{font-size:.78rem;color:var(--muted,#667)}
.dl-cards a{text-decoration:none}
@media (max-width:600px){.dl-quick{grid-template-columns:repeat(3,34px)}.dl-qb{width:34px;height:34px}.dl-row{align-items:flex-start}}
@media (max-width:600px){.dl-cards{grid-template-columns:1fr 1fr}.dl-cards li{padding:8px 10px}.dl-cards b{font-size:.92rem;word-break:break-word}}

/* All tasks → By person: each person's own colour + pending count (11 Nov) */
.rows.pg{border-left:4px solid var(--pc);border-radius:12px;margin-bottom:14px;overflow:visible}
.date-head.pg-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:var(--pc-soft);color:var(--ink);padding:10px 12px;border-radius:0 10px 0 0}
.pg-who{display:flex;align-items:center;gap:10px;font-size:1rem}
.pg-who b{color:var(--pc)}
.pg-dot{width:30px;height:30px;border-radius:50%;background:var(--pc);color:#fff;display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:700;flex:0 0 30px}
.pg-n{font-weight:800;color:var(--ink)}
.pg-chips{display:flex;flex-wrap:wrap;gap:6px}
.pg-chip{font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--card);color:var(--ink-2,var(--ink));border:1px solid var(--line)}
.pg-chip.pg-late{background:#FDE8E8;color:#B42318;border-color:#F5C2C0}
.pg-chip.pg-today{background:#FEF3C7;color:#92400E;border-color:#FCD9A0}
.pg-chip.pg-ok{background:#E7F6EC;color:#166534;border-color:#BBE5C8}
:root[data-theme="dark"] .pg-chip.pg-late{background:#3A1717;color:#F5A3A0;border-color:#5A2523}
:root[data-theme="dark"] .pg-chip.pg-today{background:#3A2C0D;color:#F5CF7A;border-color:#5A4415}
:root[data-theme="dark"] .pg-chip.pg-ok{background:#123120;color:#8FD9A8;border-color:#1E4D31}
/* Person section headings in Clean-up / Approvals (same look as All tasks → By person) */
.date-head.pg-sep{position:static;margin-top:14px;border-radius:10px;list-style:none}
.cu-list .date-head.pg-sep:first-child,.approve-list .date-head.pg-sep:first-child{margin-top:0}
.pg-who input[type=checkbox]{width:18px;height:18px;margin:0 2px 0 0}
.row.pg-row{border-left:4px solid var(--pc)}
.approve-row.pg-card{border-left:4px solid var(--pc)}
.chip-btn .pwho{display:inline-flex;align-items:center;gap:5px}
/* Dues (11 Nov) */
.du-in { color: var(--ok) !important; }
.du-out { color: var(--amber) !important; }
.du-files { margin: 0 0 14px; }
.du-list { list-style: none; margin: 0; padding: 0; }
.du-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 4px; border-bottom: 1px solid var(--line-2); }
.du-row:last-child { border-bottom: 0; }
.du-ic { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.du-ic-in { background: var(--ok-soft); color: var(--ok); }
.du-ic-out { background: var(--amber-soft); color: var(--amber); }
.du-main { flex: 1 1 240px; min-width: 0; }
.du-amt { font-size: 1.05rem; white-space: nowrap; }
.du-when-over { color: var(--late); font-weight: 600; }
.du-when-today { color: var(--amber); font-weight: 600; }
.du-act > summary { list-style: none; }
.du-act > summary::-webkit-details-marker { display: none; }
.du-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 8px; padding: 10px; background: var(--line-2); border-radius: var(--radius-sm); }
.du-form label, .du-add label { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--ink-3); }
.du-form input { min-height: 38px; width: 150px; }
.du-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin-top: 10px; }
.du-add input, .du-add select { min-height: 40px; }
.du-wide { grid-column: 1 / -1; }
.du-btns { display: flex; gap: 10px; }
.du-presets { margin-top: 6px; }
.du-off { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.du-off li { display: flex; gap: 10px; align-items: center; }
.du-off form, .du-stop { margin: 0; }
.du-act[open] { flex-basis: 100%; order: 5; }
.du-pgrp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.du-pgrp .co-lbl { min-width: 120px; }
/* Dues v2 (11 Nov): calm add panel — type tiles, then grouped details */
.du-panel { border-top: 4px solid var(--navy); }
.du-panel-head { display: flex; justify-content: space-between; align-items: center; }
.du-x { text-decoration: none; }
.du-step { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-weight: 600; color: var(--ink); }
.du-step b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .8rem; }
.du-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.du-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; min-height: 72px; }
.du-cat-ic { font-size: 1.4rem; line-height: 1; }
.du-cat[aria-selected="true"] { border-color: var(--navy); background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--navy); }
.du-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; padding: 12px; background: var(--line-2); border-radius: var(--radius-sm); }
.du-pick { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .88rem; cursor: pointer; min-height: 38px; }
.du-pick.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); font-weight: 600; }
.du-form2 { display: grid; gap: 14px; margin-top: 6px; }
.du-fs { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.du-fs legend { font-weight: 700; font-size: .9rem; color: var(--ink); padding: 0 6px; }
.du-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.du-f { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; color: var(--ink-3); min-width: 0; }
.du-f input, .du-f select { min-height: 42px; width: 100%; }
.du-span2 { grid-column: span 2; }
@media (max-width: 560px) { .du-span2 { grid-column: auto; } }
.du-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.du-seg-opt { position: relative; cursor: pointer; }
.du-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.du-seg-opt span { display: block; padding: 9px 16px; font-weight: 600; font-size: .9rem; color: var(--ink-2); background: var(--card); }
.du-seg-opt + .du-seg-opt span { border-left: 1px solid var(--line); }
.du-seg-opt input:checked + span { background: var(--navy); color: #fff; }
.du-seg-opt input:focus-visible + span { outline: 2px solid var(--link); outline-offset: -2px; }
.du-seg-sm { margin: 0; }
.du-seg-sm .du-seg-opt span { font-size: .84rem; padding: 8px 12px; }
.du-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.du-papers { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.du-btns2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.du-agr { margin-top: 2px; }
.du-up { margin: 0; }
.du-up label { cursor: pointer; }
:root[data-theme="dark"] .du-seg-opt input:checked + span, :root[data-theme="dark"] .du-step b { background: var(--gold); color: #0B1A18; }
:root[data-theme="dark"] .du-cat[aria-selected="true"], :root[data-theme="dark"] .du-pick.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .du-seg-opt input:checked + span, :root[data-theme="auto"] .du-step b { background: var(--gold); color: #0B1A18; }
  :root[data-theme="auto"] .du-cat[aria-selected="true"], :root[data-theme="auto"] .du-pick.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
}

/* ===== Sidebar v2 (11 Nov, MD: "do some proper designing") =====
   Calm, one-colour menu: plain section titles with a thin divider instead of
   coloured blocks, roomy rows, a teal bar on the page you're on, red numbers only
   for things to act on (backlog counts are grey), fold button pinned at the bottom. */
.side { padding: 16px 10px 10px; gap: 14px; }
.side .nav { gap: 2px; padding: 0 4px; margin: 0 -2px; }
.side ul { gap: 2px; }
.side ul a { gap: 12px; padding: 8px 10px; min-height: 38px; border-radius: 10px; font-size: .9rem; font-weight: 500; color: var(--side-ink); }
.side ul a .ic { color: var(--side-muted); }
.side ul a[aria-current="page"]::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--gold); z-index: 2; }
.side ul a { position: relative; }

.nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--side-border); }
.nav-group > summary,
.nav-group[data-group] > summary,
.nav-group[data-group] > summary:hover { background: transparent; }
.nav-group > summary { padding: 6px 10px; margin-bottom: 2px; font-size: .78rem; font-weight: 650; letter-spacing: .01em; text-transform: none; color: var(--side-muted); border-radius: 8px; min-height: 32px; }
.nav-group > summary:hover, .nav-group[data-group] > summary:hover { color: var(--side-ink); background: var(--side-hover); }
.nav-group[data-group] > summary .nav-group-label::before { width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; opacity: .9; }
.nav-group.has-current > summary { color: var(--side-ink); }
.nav-group > summary .chev { opacity: .5; }
.nav-group > summary .count { background: var(--late); color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.nav-group[open] > summary .count { display: none; } /* the numbers show on the rows inside */

.side .count { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; min-width: 20px; text-align: center; }
.side .count.count-quiet { background: var(--side-active); color: var(--side-muted); }

.side-fold { margin-top: 0; padding: 10px 12px; border-top: 1px solid var(--side-border); border-radius: 0; width: 100%; background: var(--side-bg); }
.side-fold:hover { border-radius: 8px; }
:root[data-side="mini"] .side ul a[aria-current="page"]::before { left: -2px; }
:root[data-contrast="high"] .side ul a[aria-current="page"]::before { width: 4px; background: var(--ink); }

/* ===== Tasks page v2 (11 Nov, MD: "more better view") ===== */
.tk-head h1 { display: flex; align-items: center; gap: 10px; }
.tk-total { font-size: .8rem; font-weight: 700; color: var(--ink-3); background: var(--line-2); border-radius: 999px; padding: 3px 10px; }
/* Tabs: one clean underline row that scrolls sideways instead of wrapping into pills */
.tabs { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab-group { flex-wrap: nowrap; gap: 0; padding: 0; border: 0; }
.tabs .tab-group + .tab-group { margin-left: 14px; padding-left: 14px; position: relative; }
.tabs .tab-group + .tab-group::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.tabs .tab { background: none; border: 0; border-radius: 0; padding: 12px 12px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-3); font-weight: 600; }
.tabs .tab:hover { color: var(--ink); background: none; }
.tabs .tab.on { color: var(--ink); border-bottom-color: var(--gold); background: none; }
.tabs .tab.on .tab-n { background: var(--gold-soft); color: var(--gold-ink); }
.tabs .tab-alert, .tabs .tab-alert .tab-label { color: var(--late); border-color: transparent; }
.tabs .tab-alert.on { color: var(--late); background: none; border-bottom-color: var(--late); }
.tabs .tab-alert .tab-n { background: var(--late-soft); color: var(--late); }
/* Toolbar: one tidy row — search, due, filters, view */
.tk-bar { gap: 10px; align-items: center; }
.tk-search { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.tk-search svg { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.tk-search .toolbar-search { width: 100%; height: 42px; padding-left: 36px; border-radius: 10px; border-color: var(--line); background: var(--card); }
.tk-bar .toolbar-period { width: auto; height: 42px; border-radius: 10px; }
.tk-bar .morefilters > summary { height: 42px; border-radius: 10px; }
.tk-bar .tk-views { height: 42px; align-items: center; padding: 3px; border-radius: 10px; }
.tk-bar .tk-views .vtoggle-btn { padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
.tk-bar .morefilters-body select { width: auto; }
@media (max-width: 760px) { .tk-bar .tk-views { order: 5; width: 100%; overflow-x: auto; } .tk-bar .tk-views .vtoggle-btn { flex: 1; text-align: center; } }
/* List: rows with a coloured edge for late / due soon, calmer chips */
.tk-list { padding-top: 6px; }
.tk-list .list-top { margin: 4px 4px 6px; }
.rows .row { border-left: 3px solid transparent; padding-left: 14px; }
.rows .row:hover { background: var(--row-alt); }
.rows .row-late { border-left-color: var(--late); }
.rows .row-soon { border-left-color: var(--amber); }
.rows .row-done .row-title { color: var(--ink-3); }
.row-title { font-size: .97rem; }
.row-meta { margin-top: 4px; }
.row-chips .chip { font-size: .72rem; padding: 3px 9px; border-radius: 999px; }
/* v2.1: no zebra; late / soon shown as a short inset bar, not a solid wall */
.tk-list .rows .row, .tk-list .rows .row:nth-child(even) { background: transparent; border-left: 0; padding-left: 18px; }
.tk-list .rows .row:hover { background: var(--row-alt); }
.rows .row-late::before, .rows .row-soon::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--late); }
.rows .row-soon::before { background: var(--amber); }
.rows .row { border-left: 0; }
.tabs .tab { padding: 12px 10px 11px; }
/* Sidebar compact (11 Nov, MD: "can we do compact") — tighter rows so every folder fits */
.side { padding: 12px 8px 8px; gap: 10px; }
.side .brand { min-height: 0; }
.side-new { padding-top: 8px; padding-bottom: 8px; }
.side ul, .side .nav { gap: 0; }
.side ul a { padding: 5px 10px; min-height: 32px; gap: 10px; font-size: .86rem; border-radius: 8px; }
.side ul a .ic svg, .side ul a svg { width: 17px; height: 17px; }
.side ul a[aria-current="page"]::before { top: 7px; bottom: 7px; }
.nav-group { margin-top: 6px; padding-top: 6px; }
.nav-group > summary { min-height: 28px; padding: 4px 10px; font-size: .74rem; margin-bottom: 0; }
.side .count { font-size: .66rem; padding: 0 6px; line-height: 1.5; }
.side-fold { padding: 7px 12px; font-size: .78rem; }
.nav-glide { border-radius: 8px; }
/* One theme everywhere (11 Nov): filter pills use the same soft-teal "on" state;
   the top-bar business box never squeezes into the icons. */
.hr-stage.on, :root[data-theme="dark"] .hr-stage.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.hr-stage.on b { color: var(--gold-ink); }
.tb-biz { flex: 0 0 auto; margin-right: 10px; }
.tb-biz select { width: 176px; max-width: 176px; text-overflow: ellipsis; }
@media (max-width: 1100px) { .tb-biz select { width: 140px; max-width: 140px; } }
/* Hero number tiles v2 (11 Nov, MD: "round design I don't like — more beautiful"):
   no decorative ring; each tile = emoji badge, big number, label, a soft colour glow,
   and a thin progress bar for x / y numbers. */
.hero::after { display: none; }
.hero-stats { gap: 12px; }
.stat { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, border-color .18s ease, background .18s ease; text-decoration: none; }
.stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); text-decoration: none; }
.stat::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 120px; height: 120px; border-radius: 50%; background: var(--st, #2BB3A3); opacity: .16; filter: blur(28px); pointer-events: none; }
.stat-ic { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 1.2rem; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.stat b { font-size: 1.7rem; line-height: 1.05; letter-spacing: -.01em; }
.stat b small { font-size: .95rem; font-weight: 600; color: #9FB0C4; margin-left: 1px; }
.stat span { font-size: .78rem; color: #AEBBCB; }
.stat-bar { grid-column: 1 / -1; display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(255,255,255,.10); overflow: hidden; }
.stat-bar i { display: block; height: 100%; border-radius: 4px; background: var(--st, #2BB3A3); }
.st-blue { --st: #5B9BFF; } .st-red { --st: #FF7B6E; } .st-teal { --st: #3CC7B6; }
.st-green { --st: #4FD18B; } .st-violet { --st: #A78BFA; } .st-amber { --st: #F5B544; }
@media (max-width: 640px) {
  .stat { grid-template-columns: 1fr; text-align: left; padding: 10px; }
  .stat-ic { grid-row: auto; width: 30px; height: 30px; font-size: 1rem; border-radius: 9px; margin-bottom: 6px; }
  .stat b { font-size: 1.3rem; }
}
:root[data-calm="1"] .stat:hover { transform: none; }
.h1-ic { margin-right: 2px; }
/* tiles: stacked (emoji badge on top, number, label) so numbers never get cut */
.stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 14px; min-width: 0; }
.stat-ic { grid-row: auto; width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; margin-bottom: 8px; }
.stat b { font-size: 1.6rem; white-space: nowrap; }
.stat span { line-height: 1.25; }
.stat-bar { width: 100%; margin-top: auto; padding-top: 0; transform: translateY(6px); }
@media (max-width: 640px) { .stat { padding: 10px; } .stat-ic { width: 28px; height: 28px; font-size: .95rem; margin-bottom: 6px; } .stat b { font-size: 1.3rem; } }
.hero-stats:has(> .stat:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
/* ===== Tabs = segmented switch (11 Nov, MD chose style A) =====
   Grey track; the chosen tab lifts up in white. Scrolls sideways on phones. */
.tabs { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--line-2); border: 0; border-bottom: 0; border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab-group { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 0; border: 0; margin: 0; }
.tabs .tab-group + .tab-group { margin-left: 6px; padding-left: 6px; }
.tabs .tab-group + .tab-group::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tabs .tab-group { position: relative; }
.tabs .tab, .tabs .tab:hover { background: transparent; border: 0; border-bottom: 0; margin: 0; border-radius: 9px; padding: 7px 12px; color: var(--ink-2); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.tabs .tab:hover { color: var(--ink); background: rgba(0, 0, 0, .03); }
.tabs .tab .tab-n { background: rgba(0, 0, 0, .06); color: var(--ink-3); }
.tabs .tab.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px rgba(16, 24, 40, .06); }
.tabs .tab.on .tab-n { background: var(--gold-soft); color: var(--gold-ink); }
.tabs .tab-alert, .tabs .tab-alert .tab-label { color: var(--late); }
.tabs .tab-alert .tab-n { background: var(--late-soft); color: var(--late); }
.tabs .tab-alert.on { background: var(--card); color: var(--late); }
:root[data-theme="dark"] .tabs { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .tabs .tab.on { background: #2A323B; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .tabs .tab .tab-n { background: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .tabs { background: rgba(255, 255, 255, .06); }
  :root[data-theme="auto"] .tabs .tab.on { background: #2A323B; }
}
:root[data-contrast="high"] .tabs .tab.on { box-shadow: inset 0 0 0 2px var(--ink); }
/* Dealer targets v2 (11 Nov, MD: "more organised") — tabs, grouped list, pipeline board */
.dl-filters.tk-bar { margin: 0 0 12px; }
.dl-filters select { height: 42px; border-radius: 10px; }
.dl-duechip { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: .86rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.dl-duechip input { position: absolute; opacity: 0; pointer-events: none; }
.dl-duechip.is-on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.dl-rows { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.dl-rows .dl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; background: transparent; border-left: 0; }
.dl-rows .dl-row:nth-child(even) { background: transparent; }
.dl-rows .dl-row:hover { background: var(--row-alt); }
.dl-rows .dl-row.is-due { border-left: 0; }
.dl-rows .dl-row.is-due::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--amber); }
.dl-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dl-line1 .row-title { font-size: .98rem; }
.dl-cat { font-size: .72rem; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.dl-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .86rem; }
.dl-ci { color: var(--ink-2); }
a.dl-ci { color: var(--link); }
.dl-quick { gap: 6px; }
.dl-qb { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); font-size: .95rem; text-decoration: none; }
.dl-qb.dl-qcall { background: var(--gold); border-color: var(--gold); }
.dl-qb.dl-qwa { background: #E7F8EE; border-color: #BFE9CF; }
.dl-qb.is-off { opacity: .35; }
.dl-ghead { list-style: none; padding: 10px 16px 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); background: var(--line-2); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.dl-ghead:first-child { border-top: 0; border-radius: var(--radius) var(--radius) 0 0; }
.dl-ghead .tab-n { background: var(--card); }
@media (max-width: 640px) {
  .dl-rows .dl-row { grid-template-columns: auto minmax(0, 1fr); }
  .dl-rows .dl-quick { grid-column: 1 / -1; justify-content: flex-end; }
}
/* pipeline board */
.dl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.dl-col { background: var(--line-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.dl-col > header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .86rem; color: var(--ink); padding: 2px 4px 4px; }
.dl-col > header .tab-n { background: var(--card); }
.dl-col-empty { color: var(--ink-3); text-align: center; margin: 12px 0; }
.dl-card { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dl-card:hover { border-color: var(--gold); text-decoration: none; }
.dl-card.is-late { box-shadow: inset 3px 0 0 var(--late); }
.dl-card b { font-size: .9rem; line-height: 1.25; }
.dl-card-meta { font-size: .76rem; color: var(--ink-3); }
.dl-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .76rem; margin-top: 2px; }
.dl-col-won { background: color-mix(in srgb, #16a34a 8%, var(--line-2)); }
.dl-more { font-size: .82rem; text-align: center; padding: 4px; }
/* Team filters (11 Nov): one tidy row — search, Branch and Department dropdowns with counts */
.team-filters.tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.team-filters .tf-sel { width: auto; min-width: 200px; height: 42px; border-radius: 10px; border-color: var(--line); font-weight: 600; font-size: .88rem; }
.team-filters .tf-sel.is-on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.team-filters .tf-count { margin-left: auto; }
@media (max-width: 640px) { .team-filters .tf-sel { flex: 1 1 140px; min-width: 0; } .team-filters .tf-count { margin-left: 0; } }
/* HR & Payroll home v2 (11 Nov, MD: "can we design better") */
.pr-hero { grid-template-columns: 1.4fr 1fr; align-items: center; }
.pr-hero .hero-sub b { color: #fff; }
.pr-prog { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0 10px; max-width: 420px; }
.pr-prog i { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.pr-prog i.is-done { background: #4FD18B; }
.pr-prog i.is-next { background: linear-gradient(90deg, var(--gold) 0 50%, rgba(255,255,255,.12) 50%); }
.pr-lock { font-size: .8rem; color: #9FB0C4; margin: 0; }
.pr-nextbox { position: relative; z-index: 1; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pr-next-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.pr-next-title { display: flex; gap: 10px; align-items: flex-start; color: #fff; font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.pr-next-n { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); font-size: .85rem; }
.pr-next-who { display: flex; align-items: center; gap: 10px; color: #DCE4EE; }
.pr-next-who span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.pr-next-who small { color: #9FB0C4; font-size: .8rem; }
.pr-av { width: 34px; height: 34px; font-size: .78rem; background: #3A6EB7; color: #fff; }
.pr-next-btn { align-self: flex-start; }
/* stepper */
.pr-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.pr-step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 12px 0 0; }
.pr-step::before { content: ""; position: absolute; top: 15px; left: 34px; right: 4px; height: 3px; border-radius: 3px; background: var(--line); }
.pr-step:last-child::before { display: none; }
.pr-step.pr-done::before { background: #4FD18B; }
.pr-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .88rem; background: var(--card); border: 2px solid var(--line); color: var(--ink-3); margin-bottom: 6px; }
.pr-done .pr-node { background: var(--ok); border-color: var(--ok); color: #fff; }
.pr-next .pr-node { border-color: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 4px var(--gold-soft); }
.pr-badge { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pr-done .pr-badge { color: var(--ok); }
.pr-next .pr-badge { color: var(--gold-ink); }
.pr-title { font-size: .9rem; line-height: 1.3; color: var(--ink); }
.pr-meta { font-size: .78rem; color: var(--ink-3); }
.pr-later .pr-title, .pr-auto .pr-title { color: var(--ink-2); font-weight: 600; }
@media (max-width: 900px) {
  .pr-hero { grid-template-columns: 1fr; }
  .pr-steps { grid-template-columns: 1fr; gap: 14px; }
  .pr-step { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding: 0; }
  .pr-step::before { top: 34px; bottom: -14px; left: 15px; right: auto; width: 3px; height: auto; }
  .pr-node { grid-row: 1 / span 3; margin: 0; }
}
/* tiles */
.pr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 10px; }
.pr-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.pr-tile:hover { border-color: var(--gold); text-decoration: none; }
.pr-tile b { font-size: 1.6rem; line-height: 1.1; }
.pr-tile span:last-child { font-size: .8rem; color: var(--ink-3); }
.pr-tile-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--line-2); margin-bottom: 6px; }
.pr-tile-red b { color: var(--late); }
.pr-tile-amber b { color: var(--amber); }
.pr-clear { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--ok-soft); margin: 6px 0; }
.pr-clear > span { font-size: 1.5rem; }
.pr-clear p { margin: 0; }
/* tools */
.pr-tools-h { margin: 20px 0 10px; }
.pr-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pr-tool { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.pr-tool:hover { border-color: var(--gold); transform: translateY(-1px); text-decoration: none; }
.pr-tool-ic { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--gold-soft); }
.pr-tool b { display: block; font-size: .92rem; }
.pr-tool small { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.3; }
:root[data-calm="1"] .pr-tool:hover { transform: none; }

/* number boxes → tiles */
.kpis { gap: 12px; }
.kpis .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: none; }
.kpis .kpi b { font-size: 1.65rem; line-height: 1.1; color: var(--ink); }
.kpis .kpi span { margin-top: 2px; }
.kpis a.kpi:hover { border-color: var(--gold); transform: translateY(-1px); }
.kpis .kpi b.txt-late { color: var(--late); }

/* ===== Page header in the colour of its section (11 Nov, MD: "every screen dark looks odd —
   change colours related to theme, make it awesome") =====
   Light card tinted with the section's colour — the same colours as the sidebar dots:
   Daily = teal, Work = amber, Team = violet, Payroll = green-teal, People = blue.
   Emoji sits in a soft coloured badge; a gentle colour glow on the right; dark text. */
.main { --sec: var(--gold); --sec-ink: var(--gold-ink); }
.main[data-section="work"] { --sec: #D9822B; --sec-ink: #9A4F0B; }
.main[data-section="team"] { --sec: #7C5CBF; --sec-ink: #5B3F99; }
.main[data-section="payroll"] { --sec: #1FA38E; --sec-ink: #0E6E5F; }
.main[data-section="people"] { --sec: #3A6EB7; --sec-ink: #22508F; }
.main .page-head { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 22px; margin-bottom: 18px; row-gap: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sec) 16%, var(--card)) 0%, color-mix(in srgb, var(--sec) 6%, var(--card)) 55%, var(--card) 100%);
  border: 1px solid color-mix(in srgb, var(--sec) 22%, var(--line)); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.main .page-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 40%, transparent)); }
.main .page-head::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sec) 22%, transparent), transparent); pointer-events: none; }
.main .page-head > * { position: relative; z-index: 1; }
.main .page-head h1 { color: var(--ink); font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
.main .page-head .h1-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: inline-grid; place-items: center; font-size: 1.35rem;
  background: var(--card); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), inset 0 0 0 1px color-mix(in srgb, var(--sec) 30%, transparent); margin: 0; }
.main .page-head p, .main .page-head > div > .muted { color: var(--ink-2); }
.main .page-head .eyebrow { color: var(--sec-ink); }
.main .page-head a:not(.btn) { color: var(--sec-ink); }
.main .page-head .tk-total { background: color-mix(in srgb, var(--sec) 16%, var(--card)); color: var(--sec-ink); }
.main .page-head .pj-head-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.main .page-head .btn-secondary { background: var(--card); }
@media (max-width: 640px) {
  .main .page-head { padding: 16px 16px 16px 18px; border-radius: 14px; }
  .main .page-head h1 { font-size: 1.25rem; gap: 10px; }
  .main .page-head .h1-ic { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 11px; }
}
:root[data-contrast="high"] .main .page-head { background: var(--card); border: 2px solid var(--ink); }
@media print { .main .page-head { background: none !important; border: 0; padding: 0; box-shadow: none; } .main .page-head::before, .main .page-head::after { display: none; } }
/* section colour also tints the number tiles' hover and the active segmented tab count */
.main .kpis a.kpi:hover { border-color: var(--sec); }
.main .tabs .tab.on .tab-n { background: color-mix(in srgb, var(--sec) 16%, var(--card)); color: var(--sec-ink); }
:root[data-theme="dark"] .main { --sec-ink: color-mix(in srgb, var(--sec) 60%, #fff); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .main { --sec-ink: color-mix(in srgb, var(--sec) 60%, #fff); } }
/* Salary register v2 (11 Nov, MD: "in a better way") — light header with a colour per group
   (Earnings green, Deductions red, Net teal, Balances blue), Net column highlighted,
   filter buttons as the segmented switch. */
.regfull { --g-earn: #1F7A4D; --g-ded: #B42318; --g-net: #0E7065; --g-bal: #22508F; }
.regfull thead th, .regfull thead th.stick { background: var(--line-2); color: var(--ink-2); box-shadow: none; }
.regfull thead th.stick { box-shadow: 1px 0 0 var(--line); }
.regfull thead .band-row th.band { color: var(--ink); font-size: .7rem; border-left: 2px solid var(--card); border-top: 3px solid var(--line); letter-spacing: .05em; }
.regfull thead .band-row th.b-earn { background: color-mix(in srgb, var(--g-earn) 12%, var(--card)); border-top-color: var(--g-earn); color: var(--g-earn); }
.regfull thead .band-row th.b-ded { background: color-mix(in srgb, var(--g-ded) 10%, var(--card)); border-top-color: var(--g-ded); color: var(--g-ded); }
.regfull thead .band-row th.b-net { background: color-mix(in srgb, var(--g-net) 14%, var(--card)); border-top-color: var(--g-net); color: var(--g-net); }
.regfull thead .band-row th.b-bal { background: color-mix(in srgb, var(--g-bal) 10%, var(--card)); border-top-color: var(--g-bal); color: var(--g-bal); }
.regfull thead .col-row th { background: var(--card); color: var(--ink-3); border-bottom: 2px solid var(--line); }
.regfull thead .col-row th.c-earn { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--g-earn) 45%, transparent); }
.regfull thead .col-row th.c-ded { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--g-ded) 40%, transparent); }
.regfull thead .col-row th.c-net { box-shadow: inset 0 -2px 0 var(--g-net); color: var(--g-net); }
.regfull thead .col-row th.c-bal { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--g-bal) 40%, transparent); }
.regfull thead .band-row th.stick, .regfull thead .band-row th[rowspan] { background: var(--card); border-bottom: 2px solid var(--line); color: var(--ink-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.regfull td.c-net { background: color-mix(in srgb, var(--g-net) 7%, var(--card)); color: var(--g-net); }
.regfull tbody tr.pr.alt > td.c-net { background: color-mix(in srgb, var(--g-net) 10%, var(--card)); }
.regfull td.c-ded:not(:has(.z)) { color: color-mix(in srgb, var(--g-ded) 75%, var(--ink)); }
.regfull tfoot td, .regfull .grp-total td { background: color-mix(in srgb, var(--navy) 5%, var(--card)); }
/* filters as segmented switch */
.reg-filters { display: inline-flex; gap: 2px; background: var(--line-2); border-radius: 12px; padding: 4px; }
.reg-filters .rf { border: 0; background: transparent; border-radius: 9px; padding: 7px 12px; }
.reg-filters .rf:hover { background: rgba(0, 0, 0, .03); color: var(--ink); }
.reg-filters .rf.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px rgba(16, 24, 40, .06); }
.reg-filters .rf .rf-n { background: rgba(0, 0, 0, .06); }
.reg-filters .rf.on .rf-n { background: var(--gold-soft); color: var(--gold-ink); }
.reg-filters .rf[data-rf="flagged"] { color: var(--late); }
.team-filters .rf.on, .ins-presets .rf.on { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold); }
:root[data-theme="dark"] .regfull { --g-earn: #5FCF8F; --g-ded: #F08A82; --g-net: #6FD9CB; --g-bal: #7FB0F5; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .regfull { --g-earn: #5FCF8F; --g-ded: #F08A82; --g-net: #6FD9CB; --g-bal: #7FB0F5; } }
.regfull tbody tr.pr:nth-child(even) { background: transparent; }
.regfull tbody tr.pr > td { background: var(--card); }
.regfull tbody tr.pr.alt > td, .regfull tbody tr.pr.alt > td.stick { background: color-mix(in srgb, var(--line-2) 70%, var(--card)); }
.regfull tbody tr.pr > td.c-net { background: color-mix(in srgb, var(--g-net) 7%, var(--card)); }
.regfull tbody tr.pr.alt > td.c-net { background: color-mix(in srgb, var(--g-net) 11%, var(--card)); }
.regfull tbody tr.pr:hover > td, .regfull tbody tr.pr:hover > td.stick { background: var(--reg-hover); }
.regfull tbody tr.pr.sel > td, .regfull tbody tr.pr.sel > td.stick { background: var(--reg-sel); }
.regfull tfoot td, .regfull tfoot td.stick { background: color-mix(in srgb, var(--navy) 8%, var(--card)); color: var(--ink); border-top: 2px solid var(--ink-3); }
.regfull tfoot td.c-net { background: color-mix(in srgb, var(--g-net) 18%, var(--card)); color: var(--g-net); }
.regfull tfoot td.c-ded { color: var(--g-ded); }

/* Setup guide (/setup, 12 Nov): one-time set-up and old-data steps, in order. */
.sg-next { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin-bottom: 16px; border-left: 4px solid var(--gold); text-decoration: none; color: var(--ink); }
.sg-next:hover { border-left-color: var(--gold-ink); }
.sg-next-k { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
.sg-alldone { display: block; }
.sg-phase { margin-bottom: 16px; }
.sg-phase h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.sg-pnum { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .9rem; flex-shrink: 0; }
.sg-pdesc { margin: 4px 0 10px 38px; }
.sg-steps { list-style: none; margin: 0; padding: 0; }
.sg-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.sg-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); color: var(--ink-3, var(--ink-2)); font-size: .8rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.sg-step.is-done .sg-dot { background: var(--ok, #1f8a4c); border-color: var(--ok, #1f8a4c); color: #fff; }
.sg-step.is-next .sg-dot { border-color: var(--gold); color: var(--gold-ink); }
.sg-body { flex: 1; min-width: 0; }
.sg-body > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sg-body > summary::-webkit-details-marker { display: none; }
.sg-title { font-weight: 600; color: var(--ink); }
.sg-step.is-done .sg-title { color: var(--ink-2); }
.sg-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sg-why { margin: 10px 0 6px; }
.sg-how { margin: 0 0 10px 20px; padding: 0; }
.sg-how li { margin: 2px 0; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg-actions form { margin: 0; display: inline; }
.sg-hide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.set-guide { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 14px; text-decoration: none; color: var(--ink); border-left: 4px solid var(--gold); }
.set-guide .sg-mini { flex-shrink: 0; }

/* Company look + quick start (12 Nov) */
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lk-grid { display: flex; flex-direction: column; gap: 16px; }
.lk-logo-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lk-logo-box { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.lk-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lk-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; width: 74px; text-align: center; }
.lk-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lk-sw span { width: 38px; height: 38px; border-radius: 50%; background: var(--c); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.lk-sw span.lk-own { background: conic-gradient(var(--c) 0 50%, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.lk-sw input:checked + span { box-shadow: 0 0 0 3px var(--ink); }
.lk-sw input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.lk-sw small { font-size: .72rem; color: var(--ink-2); line-height: 1.2; }
.lk-own-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.lk-own-row input[type=color] { width: 48px; height: 34px; padding: 2px; border-radius: 8px; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; flex-shrink: 0; }
.brand-sm .brand-logo { width: 28px; height: 28px; border-radius: 7px; }
.brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.brand-tagline { margin: 4px 0 2px; font-size: .92rem; color: inherit; opacity: .92; font-weight: 600; padding-left: 10px; border-left: 3px solid var(--gold); }
.cs-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 14px; }
.cs-steps li { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 600; }
.cs-steps li span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); font-size: .8rem; }
.cs-steps li.is-on { color: var(--ink); } .cs-steps li.is-on span { border-color: var(--gold); color: var(--gold-ink); }
.cs-steps li.is-done span { background: var(--ok); border-color: var(--ok); color: #fff; }
.cs-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cs-choice { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none; color: var(--ink); border-left: 4px solid var(--gold); }
.payslip-logo { height: 40px; max-width: 160px; object-fit: contain; margin-right: 10px; vertical-align: middle; }

/* Simpler menu (12 Nov): "N more in Payroll" link at the end of a long folder. */
.side ul li.nav-more a { color: var(--side-faint); font-size: .82rem; font-weight: 500; padding-top: 5px; padding-bottom: 5px; }
.side ul li.nav-more a:hover { color: var(--side-ink); }
.nav-more-dots { width: 20px; flex: 0 0 20px !important; text-align: center; font-weight: 700; letter-spacing: .05em; }
:root[data-side="mini"] .side ul li.nav-more { display: none; }
/* Lighter tasks list (12 Nov): Show more under the list. */
.tk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 4px; }
/* Statutory due dates (12 Nov) */
.stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.stat-list li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); }
/* Required papers per department (12 Nov) */
.dm-rules { margin: 10px 0 14px; }
.dm-rules > summary { cursor: pointer; }
.dm-rule-table th { font-size: .78rem; white-space: normal; min-width: 70px; }
.dm-rule-table td.dm-cell, .dm-rule-table th { text-align: center; }
.dm-rule-table td:first-child, .dm-rule-table th:first-child { text-align: left; min-width: 150px; }
.dm-rule-table input[type=checkbox] { width: 18px; height: 18px; }

/* ---- Phone layout for staff pages (12 Nov) ---- */
.quick-tiles { display: none; }
.lv-dates { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bell { position: relative; }
.bell-new { position: absolute; top: -2px; right: -4px; font-style: normal; font-size: .72rem; line-height: 1; pointer-events: none; }
.news-card { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--ink); text-decoration: none; }
.news-card > span:first-child { font-size: 1.4rem; }
.news-card .news-go { margin-left: auto; font-size: 1.4rem; color: var(--ink-3); }
.news-card:hover { text-decoration: none; border-color: var(--gold); }
@media (max-width: 820px) {
  /* My Day: four big tiles right under the greeting */
  .quick-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
  .quick-tiles a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 10px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; text-align: center; }
  .quick-tiles a > span { font-size: 1.45rem; line-height: 1; }
  .quick-tiles a b { font-size: .78rem; font-weight: 600; }
  .quick-tiles a:active { transform: scale(.97); }
  .quick-tiles .qt-n { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--late); color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
  /* Leave: balances as one compact row; dates side by side */
  .lv-bal { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .lv-bal .kpi { padding: 12px 10px; }
  .lv-bal .kpi b { font-size: 1.5rem; }
  .lv-bal .kpi span { font-size: .8rem; }
  .lv-bal .kpi small { font-size: .7rem; }
  /* Long page descriptions: 2 lines, tap to read the rest */
  .main .page-head p.muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .main .page-head p.muted.open { display: block; -webkit-line-clamp: unset; }
  /* Thumb-friendly buttons and fields on forms */
  .main form .btn:not(.btn-sm):not(.link) { min-height: 46px; }
  .gp-save, .lv-send { width: 100%; }
  .gp-field select, .gp-field input { min-height: 46px; font-size: 1rem; }
}
.dm-rules, .dm-rules form, .dm-rules form > * { min-width: 0; max-width: 100%; }
.dm-rules .table-wrap { overflow-x: auto; }
/* Missing papers on phones: the hidden "uploaded / missing" screen-reader words are absolutely
   positioned — keep them inside the scroll box (Apply-everywhere rule 2). */
.dm .table-wrap { position: relative; }

/* ⬇ Export menu on list pages (13 Nov, ListExport) */
.xp-menu { position: relative; display: inline-block; flex: 0 0 auto; }
.xp-menu > summary { list-style: none; min-height: 44px; }
.xp-menu > summary::-webkit-details-marker { display: none; }
.xp-menu[open] > summary { background: var(--line-2); }
.xp-pop { position: fixed; z-index: 400; min-width: 190px; padding: 6px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.16); display: grid; gap: 2px; }
.xp-pop a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.xp-pop a:hover, .xp-pop a:focus-visible { background: var(--line-2); text-decoration: none; }
.xp-sub { margin-left: auto; color: var(--ink-2); font-weight: 400; font-size: .85em; }
.xp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* placed by app.js (fixed, so a page header with overflow: hidden never clips it) */
@media print { .xp-menu { display: none !important; } }

/* Authenticator app (13 Nov) */
.tfa-steps { margin: 0; padding-left: 20px; display: grid; gap: 18px; }
.tfa-steps > li { padding-left: 4px; }
.tfa-qr { display: inline-block; margin: 12px 0 4px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; width: 212px; max-width: 100%; }
.tfa-qr svg { display: block; width: 190px; height: 190px; }
.tfa-manual { margin-top: 6px; }
.tfa-secret code { display: inline-block; margin: 6px 0; padding: 8px 12px; background: var(--row-alt); border-radius: 8px; font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; }
.tfa-confirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.tfa-confirm .code-input { max-width: 190px; }
.tfa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tfa-codes { border: 2px solid var(--gold); }
.tfa-code-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tfa-code-list li { padding: 10px 12px; background: var(--row-alt); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; text-align: center; }
.pf2-tfa-reset { margin-top: 10px; }
@media (max-width: 820px) { .tfa-confirm .code-input { max-width: 100%; } .tfa-confirm .btn { width: 100%; } }