/* ============================================================
   TARA ROSE SALONS: Team Home (the Knowledge Base hub) and its pages
   hub.css (Kate, 1 Oct 2026)

   The dashboard's own tokens, light and dark, so the hub and the dashboard read
   as one site. Layout after the CWD Knowledge Base opening screen (a header with
   search and an account menu over a grid of section cards); nothing of its
   branding comes across.
   ============================================================ */
:root{
  --accent-mint:#99F6E4;--accent-butter:#EEF3C7;--accent-lavender:#C4B5FD;--accent-coral:#FF9B9B;
  --radius:12px;--ease:cubic-bezier(.2,.7,.2,1);
}
:root,[data-theme="light"]{
  --bg:#FAF7F0;--surface:#fff;--surface2:#F4F1E9;--border:#E8E2D6;--border2:#F0ECE3;
  --text:#1A1A1A;--muted:#565049;--muted2:#77706A;--accent:#1A1A1A;--accent-fg:#FBF7F0;
  --shadow:0 1px 2px rgba(26,26,26,.05),0 10px 28px -8px rgba(26,26,26,.10);
  --shadow-hover:0 2px 4px rgba(26,26,26,.07),0 18px 40px -10px rgba(26,26,26,.16);
  --hair:#7C5CD4;--beauty:#0F8A72;--warn:#8A5A0C;--warn-bg:#FAEEDA;--mark:#FDE9A8;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#2D2E37;--surface:#383944;--surface2:#3f4052;--border:rgba(250,248,243,.09);--border2:rgba(250,248,243,.05);
  --text:#FAF8F3;--muted:rgba(250,248,243,.68);--muted2:rgba(250,248,243,.5);--accent:#99F6E4;--accent-fg:#2D2E37;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -8px rgba(0,0,0,.35);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35),0 20px 44px -10px rgba(0,0,0,.45);
  --hair:#C4B5FD;--beauty:#99F6E4;--warn:#EEF3C7;--warn-bg:rgba(238,243,199,.12);--mark:rgba(238,243,199,.28);
}}
[data-theme="dark"]{
  --bg:#2D2E37;--surface:#383944;--surface2:#3f4052;--border:rgba(250,248,243,.09);--border2:rgba(250,248,243,.05);
  --text:#FAF8F3;--muted:rgba(250,248,243,.68);--muted2:rgba(250,248,243,.5);--accent:#99F6E4;--accent-fg:#2D2E37;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -8px rgba(0,0,0,.35);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35),0 20px 44px -10px rgba(0,0,0,.45);
  --hair:#C4B5FD;--beauty:#99F6E4;--warn:#EEF3C7;--warn-bg:rgba(238,243,199,.12);--mark:rgba(238,243,199,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.6;min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit}
.hide{display:none!important}
/* Nothing shows until the sign-in check has answered (hub.js lifts it). */
body.kb-wait .wrap{visibility:hidden}

.wrap{max-width:1180px;margin:0 auto;padding:28px 40px 72px}

/* ── Header ─────────────────────────────────────────────────── */
.kb-head{position:sticky;top:0;z-index:20;background:var(--bg);
  display:flex;align-items:center;gap:28px;padding:14px 0 16px;margin-bottom:8px;
  border-bottom:1px solid var(--border);
  /* Kate, 6 Oct 2026: the header's background runs to both screen edges, so cards
     scrolling under it no longer peek out in the side gutters (it looked cut off).
     Painted with a border-image outset, which neither clips the account menu and search
     results hanging below the header (the first try, a clip-path, cut them off) nor
     widens the page. A border-image hides the border itself, so the rule under the
     header is an inset shadow. */
  border-image:linear-gradient(var(--bg),var(--bg)) fill 0/0/0 100vmax;
  box-shadow:inset 0 -1px 0 var(--border)}
/* Kate, 6 Oct 2026: on a desktop the logo sits in the centre of the header, the
   page title on the left and search + account on the right (.kb-head-r). */
@media (min-width:761px){
  .kb-head{display:grid;grid-template-columns:1fr auto 1fr;gap:28px}
  .kb-head>.kb-titles{grid-column:1;grid-row:1}
  .kb-head>.kb-brand{grid-column:2;grid-row:1}
  .kb-head-r{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
}
.kb-brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;flex-shrink:0}
.kb-brand img{width:138px;height:auto;display:block}
.kb-brand span{font-size:11px;letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;opacity:.82}
.kb-logo-dark{display:none!important}
[data-theme="dark"] .kb-logo-light{display:none!important}
[data-theme="dark"] .kb-logo-dark{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kb-logo-light{display:none!important}
  :root:not([data-theme="light"]) .kb-logo-dark{display:block!important}}
.kb-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.kb-eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
/* 22px, not 30 (Kate, 1 Oct 2026): the page's own heading, not a second logo. */
.kb-titles h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:22px;line-height:1.2;margin:0}

/* Search */
.kb-search-wrap{position:relative;flex:1;max-width:420px;margin-left:auto}
.kb-search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:0 16px;height:44px;transition:border-color .2s,box-shadow .2s}
.kb-search:focus-within{border-color:var(--text);box-shadow:0 0 0 3px rgba(153,246,228,.45)}
.kb-search svg{width:17px;height:17px;flex-shrink:0;color:var(--muted)}
.kb-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--text)}
.kb-search input::placeholder{color:var(--muted2)}
.kb-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-hover);
  max-height:min(70vh,520px);overflow:auto;padding:6px;display:none}
.kb-results.open{display:block}
.kb-result{display:block;text-decoration:none;padding:10px 12px;border-radius:8px}
.kb-result:hover,.kb-result.active{background:var(--surface2)}
.kb-result-group{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.kb-result-title{font-weight:600;font-size:15px}
.kb-result-snip{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.kb-result mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 1px}
.kb-empty{padding:14px 12px;color:var(--muted);font-size:14px}

/* Account menu */
.kb-account{position:relative;flex-shrink:0}
.kb-account-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:14px;font-weight:500}
.kb-account-btn:hover,.kb-account-btn[aria-expanded="true"]{border-color:var(--text)}
.kb-avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--accent-mint);color:#1A1A1A}
.kb-caret{transition:transform .2s}
.kb-account-btn[aria-expanded="true"] .kb-caret{transform:rotate(180deg)}
.kb-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-hover);padding:6px}
.kb-menu-who{padding:8px 12px 10px;border-bottom:1px solid var(--border2);margin-bottom:4px}
.kb-menu-who b{display:block;font-size:14.5px}
.kb-menu-who span{font-size:12.5px;color:var(--muted2);word-break:break-all}
.kb-menu a,.kb-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  border-radius:8px;cursor:pointer;font-size:14.5px;text-decoration:none}
.kb-menu a:hover,.kb-menu button:hover{background:var(--surface2)}
/* "View as" (Kate, 2 Oct 2026): Level 5 only. The row in the account menu, and the bar
   under the header while a preview is on. */
.kb-menu:has(.kb-menu-viewas){min-width:272px}
.kb-menu-viewas{border-bottom:1px solid var(--border2);margin-bottom:4px;padding-bottom:4px}
.kb-menu .kb-va-toggle{display:flex;align-items:center;gap:8px;min-height:44px}
.kb-va-k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);flex:none}
.kb-va-cur{flex:1;min-width:0;text-align:right;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-va-toggle svg{flex:none;opacity:.6;transition:transform .18s}
.kb-va-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.kb-va-list{padding:2px 0 4px}
.kb-menu .kb-va-list button{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:8px 12px 8px 14px;min-height:38px;color:var(--muted)}
.kb-va-list button::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;border:1.5px solid var(--border)}
.kb-menu .kb-va-list button.on{color:var(--text);font-weight:600;cursor:default}
.kb-va-list button.on::before{background:var(--accent-mint);border-color:var(--accent-mint)}
.kb-viewas-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:8px 0 4px;padding:9px 14px;border-radius:12px;background:var(--warn-bg);color:var(--text);font-size:13.5px}
.kb-viewas-bar button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;
  padding:6px 14px;min-height:36px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* ── Hub: intro + cards ─────────────────────────────────────── */
.kb-hello{font-family:'Playfair Display',Georgia,serif;font-size:22px;margin:22px 0 2px}
.kb-intro{color:var(--muted);margin:0 0 26px;max-width:640px}
.kb-section-title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);margin:34px 0 12px}
.kb-fav-hint{font-size:13px;color:var(--muted2);margin:-8px 0 22px}
/* Team Home rows (Kate, 5 Oct 2026): a panel per department, a row per section. */
.kb-fv-h{margin-top:4px}
.kb-fvs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.kb-fv{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);text-decoration:none;font-size:14.5px;font-weight:600}
.kb-fv:hover{border-color:var(--text)}
.kb-fv:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.kb-fv .kb-ic{width:32px;height:32px;font-size:13px;border-radius:50%}
.kb-depts{columns:2 440px;column-gap:24px}
.kb-dept{break-inside:avoid;margin:0 0 24px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.kb-dept-h{margin:0;padding:16px 20px 10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);font-weight:600}
.kb-row{position:relative;display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 12px 12px 20px;border-top:1px solid var(--border2)}
.kb-row:has(.kb-row-link):hover{background:var(--surface2)}
.kb-row:has(.kb-row-link:focus-visible){outline:2px solid var(--text);outline-offset:-2px}
.kb-row-link{text-decoration:none;outline:0}
.kb-row-link::after{content:"";position:absolute;inset:0}
.kb-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--c,var(--accent-mint));color:#1A1A1A;
  font-family:'Playfair Display',Georgia,serif;font-size:16px;font-weight:600;letter-spacing:.02em}
.kb-row-tx{flex:1;min-width:0}
.kb-row-tx b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.kb-row-tx>span{display:block;font-size:13.5px;color:var(--muted);line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-row-n{flex:none;font-size:12.5px;color:var(--muted2);white-space:nowrap}
.kb-go{flex:none;width:14px;color:var(--muted2);font-size:20px;line-height:1;text-align:center}
.kb-row .kb-star{position:relative;z-index:1;top:auto;right:auto;flex:none;width:36px;height:36px}
.kb-row .kb-star svg{width:18px;height:18px}
.kb-row.soon .kb-row-tx,.kb-row.soon .kb-ic{opacity:.6}
.kb-row.soon .kb-ic{background:var(--surface2);color:var(--muted)}
.kb-ic.kb-ic-line{background:color-mix(in srgb,var(--c,var(--accent-mint)) 30%,var(--surface));color:var(--text)}
.kb-ic-line svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kb-row.soon .kb-ic.kb-ic-line{background:var(--surface2);color:var(--muted)}
.kb-fv .kb-ic-line svg{width:17px;height:17px}
/* Kate, 6 Oct 2026: an opened page wears its section's icon beside the title. */
.kb-has-ic{display:flex;align-items:center;gap:14px}
.kb-has-ic>.kb-ic{width:48px;height:48px;border-radius:14px}
.kb-has-ic>.kb-ic svg{width:25px;height:25px}
.kb-has-ic>span{min-width:0}
.kb-tag{flex:none;margin-right:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.kb-star{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted2);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.kb-star svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.kb-star:hover{background:var(--surface2);color:var(--text)}
.kb-star:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.kb-star.on{color:#E7B84A}
.kb-star.on svg{fill:currentColor}
.kb-star:active{transform:scale(.9)}
.kb-menu-lvl{display:block;font-style:normal;font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:4px}

/* ── Section list + page ────────────────────────────────────── */
.kb-crumbs{font-size:13.5px;color:var(--muted);margin:20px 0 6px}
.kb-crumbs a{text-decoration:none;border-bottom:1px solid var(--border)}
.kb-crumbs a:hover{border-color:var(--text)}
.kb-page-title{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:34px;line-height:1.2;margin:0 0 6px}
.kb-meta{font-size:13px;color:var(--muted2);margin:0 0 22px}
.kb-group{margin:0 0 26px}
.kb-group h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);font-weight:600;margin:0 0 8px}
.kb-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.kb-list li+li{border-top:1px solid var(--border2)}
.kb-list a{display:flex;align-items:center;gap:12px;padding:13px 18px;text-decoration:none;font-size:15.5px}
/* Kate, 6 Oct 2026: each page in a section's list wears a small icon for its kind. */
.kb-list .kb-ic{flex:none;width:32px;height:32px;border-radius:9px}
.kb-list .kb-ic-line svg{width:17px;height:17px}
.kb-list a:hover{background:var(--surface2)}
.kb-list a::after{content:"›";margin-left:auto;color:var(--muted2);font-size:20px;line-height:1}
/* Stars on every page (Kate, 1 Oct 2026): beside each row of a section's list, and
   beside the title on the page itself. The card star stays absolute; these sit in flow. */
.kb-list li{display:flex;align-items:center}
.kb-list li > a{flex:1;min-width:0}
.kb-list .kb-star,.kb-title-row .kb-star,.kb-tools .kb-star{position:static;flex:none}
.kb-list .kb-star{margin-right:8px}
.kb-title-row{display:flex;align-items:flex-start;gap:8px}
.kb-title-row .kb-page-title{flex:1;min-width:0}
/* A stylist's own numbers, under the greeting. */
.kb-mylink{display:inline-flex;align-items:center;gap:8px;margin:4px 0 16px;padding:10px 18px;border-radius:999px;
  background:var(--accent-mint);color:#1A1A1A;font-weight:600;font-size:14.5px;text-decoration:none;min-height:44px;box-sizing:border-box}
.kb-mylink[hidden]{display:none}
@media(hover:hover){.kb-mylink:hover{box-shadow:0 0 0 1px #1A1A1A inset}}
.kb-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex-shrink:0;opacity:.85}
.kb-legend{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;margin:-8px 0 22px}
/* Kate, 6 Oct 2026: what still needs a yes. "N to check" on a Team Home row, and a
   "To check" chip on each page or form that carries a being-confirmed note. */
.kb-check{position:relative;z-index:1;flex:none;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--warn-bg);color:var(--warn);text-decoration:none;white-space:nowrap}
@media(hover:hover){a.kb-check:hover{box-shadow:0 0 0 1px var(--warn) inset}}
.kb-flag{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
  background:var(--warn-bg);color:var(--warn);white-space:nowrap;margin-left:8px}
.kb-legend button{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:999px;padding:4px 12px;cursor:pointer;margin-left:4px}
.kb-legend button[aria-pressed="true"]{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.fm-note{display:block;font-size:12.5px;color:var(--warn);margin-top:4px;white-space:normal}

.kb-note{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--text);
  border-radius:10px;padding:12px 14px;margin:0 0 22px;font-size:14.5px;line-height:1.5}
.kb-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);margin-top:7px;flex-shrink:0}

.kb-doc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 34px 32px;max-width:820px;box-shadow:var(--shadow)}
.kb-doc h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:21px;margin:26px 0 8px}
.kb-doc h3:first-child{margin-top:0}
.kb-doc p{margin:0 0 10px}
.kb-doc ul,.kb-doc ol{margin:0 0 12px;padding-left:22px}
.kb-doc li{margin:0 0 4px}
.kb-doc strong{font-weight:600}
.kb-doc img{max-width:min(100%,460px);height:auto;display:block;border-radius:8px;margin:10px 0 16px;border:1px solid var(--border2)}
.kb-doc table{border-collapse:collapse;width:100%;margin:10px 0 16px;font-size:14.5px;display:block;overflow-x:auto}
.kb-doc td,.kb-doc th{border:1px solid var(--border);padding:7px 10px;vertical-align:top;text-align:left}
.kb-pager{display:flex;justify-content:space-between;gap:12px;max-width:820px;margin:18px 0 0}
.kb-pager a{flex:1;max-width:48%;text-decoration:none;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:14px}
.kb-pager a:hover{border-color:var(--text)}
.kb-pager small{display:block;color:var(--muted2);font-size:12px}
.kb-pager .next{text-align:right;margin-left:auto}
/* ── Reader (Kate, 1 Oct 2026): chapters down the side ── */
.kb-reader{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start}
.kb-toc{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding:4px 4px 12px 0}
.kb-toc summary{list-style:none;cursor:default;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);font-weight:600;margin:0 0 6px}
.kb-toc summary::-webkit-details-marker{display:none}
.kb-toc summary span{letter-spacing:0;font-weight:500}
.kb-toc-g{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin:14px 0 4px}
.kb-toc ul{list-style:none;margin:0;padding:0}
.kb-toc a{display:block;padding:5px 10px;border-radius:8px;font-size:14px;line-height:1.35;text-decoration:none;color:var(--muted)}
.kb-toc a:hover{background:var(--surface2);color:var(--text)}
.kb-toc a.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:inset 3px 0 0 var(--accent-mint)}
.kb-read{min-width:0;max-width:860px}
.kb-read .kb-pager{max-width:none}
@media (max-width:900px){
  .kb-reader{display:block}
  .kb-toc{position:static;max-height:none;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:0}
  .kb-toc summary{cursor:pointer;padding:12px 16px;margin:0;display:flex;justify-content:space-between;align-items:center;min-height:44px;box-sizing:border-box}
  .kb-toc summary::after{content:"\25BE";font-size:14px;letter-spacing:0}
  .kb-toc[open] summary::after{content:"\25B4"}
  .kb-toc nav{padding:0 8px 12px;max-height:60vh;overflow:auto}
}
.kb-msg{padding:40px 0;color:var(--muted)}

.kb-foot{margin-top:48px;font-size:12.5px;color:var(--muted2)}
.kb-foot a{color:var(--muted2)}

/* ── Phones ─────────────────────────────────────────────────── */
@media (max-width:760px){
  /* Kate, 2 Oct 2026: the 12px floor the dashboard uses on a phone. Card badges
     (Live / Coming soon), search group heads, the View as label, the menu's level
     line and the chapter list's group heads were 11-11.5px. The wordmark stays. */
  .kb-badge,.kb-result-group,.kb-va-k,.kb-menu-lvl,.kb-toc-g{font-size:12px}
  .wrap{padding:12px 16px 56px}
  /* Kate, 6 Oct 2026: the logo is centred on a phone too, "Team Home" on the left and
     the account button on the right, search below (replaces the 2 Oct layout). */
  .kb-head{display:grid;grid-template-columns:1fr auto 1fr;gap:12px 10px;padding:10px 0 12px}
  .kb-head-r{display:contents}
  .kb-head>.kb-titles{grid-column:1;grid-row:1;align-items:flex-start;text-align:left}
  .kb-head>.kb-brand{grid-column:2;grid-row:1;justify-self:center}
  .kb-account{grid-column:3;grid-row:1;justify-self:end}
  .kb-search-wrap{grid-column:1/-1;grid-row:2}
  .kb-brand img{width:96px}
  .kb-titles h1{font-size:16px;white-space:nowrap}
  .kb-eyebrow{display:none}
  .kb-account-btn .kb-name{display:none}
  .kb-account-btn{padding:0 10px 0 6px}
  /* Kate, 3 Oct 2026: every row in the account menu is a 44px tap (the View as levels
     were 38, the rest 41). With the levels open it still ends well above the fold. */
  .kb-menu a,.kb-menu button{display:flex;align-items:center;min-height:44px}
  .kb-menu .kb-va-list button{min-height:44px}
  .kb-search-wrap{order:3;flex-basis:100%;max-width:none;margin:0}
  .kb-page-title{font-size:26px}
  .kb-doc{padding:20px 18px 22px}
  .kb-intro{margin-bottom:18px}
  .kb-section-title{margin:24px 0 10px}
  /* Team Home rows on a phone: one column, favourites swipe sideways, no page counts. */
  .kb-fvs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 22px;padding:0 16px 4px;scrollbar-width:none}
  .kb-fvs::-webkit-scrollbar{display:none}
  .kb-fv{flex:none}
  .kb-depts{columns:1}
  .kb-dept{margin-bottom:16px;border-radius:14px}
  .kb-dept-h{padding:14px 16px 8px}
  .kb-row{min-height:60px;gap:12px;padding:10px 6px 10px 14px}
  .kb-ic{width:36px;height:36px;border-radius:10px;font-size:15px}
  .kb-ic-line svg{width:19px;height:19px}
  .kb-has-ic{gap:12px}
  .kb-has-ic>.kb-ic{width:40px;height:40px;border-radius:12px}
  .kb-has-ic>.kb-ic svg{width:21px;height:21px}
  .kb-row-tx b{font-size:15px}
  .kb-row-tx>span{font-size:13px}
  .kb-row-n{display:none}
  /* Kate, 3 Oct 2026, the reader on a phone. Previous and Next sit side by side (stacked,
     Next shrank to its text on the right). */
  .kb-pager{flex-direction:row}
  .kb-pager a{flex:1 1 0;min-width:0;max-width:none}
  /* Kate, 6 Oct 2026: the whole header stays pinned on a phone, logo row included, so the
     account menu (and View as) is always one tap away. Replaces the 3 Oct rule that let
     the logo row scroll off and kept only the search. */
  /* The chapter count sits beside "Chapters", not in the middle of the bar. */
  .kb-toc summary span{margin:0 auto 0 10px}
}
@media print{
  .kb-head,.kb-pager,.kb-foot,.kb-crumbs,.kb-toc,.kb-tools,.kb-viewas-bar{display:none}
  .kb-reader{display:block}
  .kb-doc,.kd{box-shadow:none;border:0;padding:0}
}

/* ── Dropdowns (Kate, 3 Oct 2026): the dashboard's soft pill menu, made by KB.pillDD ── */
.kb-dd{position:relative;display:inline-flex}
.kb-dd select{display:none}
.kb-dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-size:14px;font-weight:500;color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:9px 15px;cursor:pointer;white-space:nowrap}
.kb-dd-btn svg{width:10px;height:10px;flex:none;opacity:.6;transition:transform .18s}
@media(hover:hover){.kb-dd-btn:hover{border-color:var(--text)}}
.kb-dd.on .kb-dd-btn{border-color:var(--text);font-weight:600}
.kb-dd.open .kb-dd-btn{border-color:var(--text)}
.kb-dd.open .kb-dd-btn svg{transform:rotate(180deg)}
.kb-dd-btn:focus-visible,.kb-dd-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kb-dd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:100%;
  display:none;flex-direction:column;gap:2px;padding:6px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  max-height:320px;overflow-y:auto}
.kb-dd.open .kb-dd-menu{display:flex}
.kb-dd-menu button{appearance:none;border:0;background:transparent;color:var(--text);text-align:left;
  white-space:nowrap;font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .15s}
@media(hover:hover){.kb-dd-menu button:hover{background:var(--surface2)}}
.kb-dd-menu button.on{background:var(--accent);color:var(--accent-fg);font-weight:700}

/* ── Staff Roster & Access (Kate, 3 Oct 2026) ───────────────── */
.rs-n{font-weight:500;letter-spacing:0;color:var(--muted2);margin-left:4px}
.rs-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.rs-filter{flex:1 1 300px;max-width:420px}
.rs-selects{display:flex;flex-wrap:wrap;gap:8px}
.rs-status{display:flex;gap:12px;align-items:center;min-height:22px;margin:0 0 14px;font-size:13px;color:var(--muted2)}
.rs-status button{background:none;border:0;padding:0;font-size:13px;text-decoration:underline;cursor:pointer;color:var(--text)}
.rs-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:4px 18px;align-items:center;padding:12px 18px}
/* Kate, 3 Oct 2026: emails start on one left edge; the columns are the same width on every row, so they line up. */
.rs-who{display:flex;align-items:center;gap:12px;min-width:0}
.rs-id,.rs-contact{display:flex;flex-direction:column;min-width:0}
.rs-av{position:relative;flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface2);
  font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
/* assets/avatars/: square crops on the photo's own block colour, head centred (scripts/make_avatars.py). */
.rs-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rs-id b{font-weight:600;font-size:15px}
.rs-pos,.rs-contact span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-pos:empty,.rs-where:empty{display:none}
.rs-when{font-size:12.5px;color:var(--muted2);white-space:nowrap;text-align:right}
.rs-when.never{color:var(--warn)}
@media (max-width:760px){
  .rs-filter{flex-basis:100%;max-width:none}
  .rs-selects{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .rs-selects .kb-dd{width:100%}
  .rs-selects .kb-dd-btn{font-size:13.5px;padding:9px 13px}
  .rs-list li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who when" "contact contact";gap:2px 12px;padding:11px 14px;align-items:start}
  .rs-who{grid-area:who;align-items:flex-start}.rs-when{grid-area:when;font-size:12px;padding-top:2px}
  .rs-contact{grid-area:contact;padding-left:50px}
  .rs-av{width:38px;height:38px;font-size:12px}
  .rs-id b{font-size:14.5px}
  .rs-pos,.rs-contact span{font-size:12.5px}
  .rs-pos{white-space:normal}
}

/* ── Suggestions Box (Kate, 5 Oct 2026) ─────────────────────── */
.sg-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px 20px;max-width:720px;box-shadow:var(--shadow)}
.sg-label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.sg-form .kb-dd{margin:0 0 16px}
.sg-form textarea{display:block;width:100%;font:inherit;font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:10px;padding:11px 13px;resize:vertical;min-height:130px}
.sg-form textarea:focus{outline:2px solid var(--accent-mint);outline-offset:1px}
.sg-anon{display:flex;align-items:center;gap:9px;margin:14px 0 4px;font-size:14.5px;cursor:pointer;min-height:32px}
.sg-anon input{width:18px;height:18px;accent-color:var(--text);margin:0}
.sg-hint{font-size:13px;color:var(--muted2);margin:0 0 16px;padding-left:27px}
.sg-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sg-send{font:inherit;font-size:14.5px;font-weight:600;border:0;border-radius:999px;padding:11px 22px;min-height:44px;
  background:var(--accent);color:var(--accent-fg);cursor:pointer}
.sg-send:disabled{opacity:.6;cursor:default}
.sg-msg{font-size:14px;color:var(--muted)}
.sg-inbox{max-width:820px}
.sg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sg-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px}
.sg-item.is-new{box-shadow:inset 3px 0 0 var(--accent-mint)}
.sg-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sg-topic{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);font-weight:600}
.sg-when{font-size:12.5px;color:var(--muted2);white-space:nowrap}
.sg-body{margin:6px 0 10px;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sg-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sg-from{font-size:13.5px;color:var(--muted)}
/* Kate, 5 Oct 2026: its own switch (it borrowed .kb-view, which went with the Workbook | Text toggle). */
.sg-status{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:3px;gap:3px;background:var(--surface);margin:0}
.sg-status button{font:inherit;font-size:13px;border:0;border-radius:999px;padding:5px 13px;min-height:32px;background:transparent;color:var(--muted);cursor:pointer}
.sg-status button[aria-pressed="true"]{background:var(--text);color:var(--bg);font-weight:600}
.sg-by{font-size:12.5px;color:var(--muted2);margin-top:6px}
.sg-none{color:var(--muted);padding:18px 0}
@media (max-width:760px){
  .sg-form{padding:18px 16px}
  .sg-item{padding:13px 14px}
  .sg-topic,.sg-when{font-size:12px}
  .sg-status button{min-height:36px}
}

/* ── The house document (Kate, 5 Oct 2026) ──────────────────────────────
   One view for every SOP and induction page, no more Workbook | Text: TRS Standard v1
   type and colour (Playfair Display headings, Inter text, paper, ink, turquoise).
   Paper and ink in the light theme; in the dark theme the same sheet in ink with
   paper text. The PDF (kb-doc.js) draws the same parts in the paper colours. */
.kd{--kd-paper:#FAF8F4;--kd-cream:#F1ECE3;--kd-ink:#2D2E37;--kd-soft:#74747B;--kd-hair:rgba(45,46,55,.11);
  --kd-tq:#99F6E4;--kd-tq-deep:#7DE6D2;--kd-tq-text:#3aa892;--kd-lime:#EEF3C7;
  background:var(--kd-paper);color:var(--kd-ink);border:1px solid var(--kd-hair);border-radius:22px;
  padding:44px 52px 48px;max-width:820px;box-shadow:var(--shadow);font-size:16px;line-height:1.65}
[data-theme="dark"] .kd{--kd-paper:#383944;--kd-cream:#2D2E37;--kd-ink:#FAF8F3;--kd-soft:rgba(250,248,243,.66);
  --kd-hair:rgba(250,248,243,.10);--kd-tq-text:#99F6E4;--kd-lime:rgba(238,243,199,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kd{--kd-paper:#383944;--kd-cream:#2D2E37;--kd-ink:#FAF8F3;
  --kd-soft:rgba(250,248,243,.66);--kd-hair:rgba(250,248,243,.10);--kd-tq-text:#99F6E4;--kd-lime:rgba(238,243,199,.14)}}
.kd-head{margin:0 0 30px;padding:0 0 22px;position:relative;border-bottom:1px solid var(--kd-hair)}
.kd-head::after{content:"";position:absolute;left:0;bottom:-2px;width:64px;height:3px;border-radius:3px;background:var(--kd-tq)}
.kd-eyebrow,.kd .kd-kicker{font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--kd-soft);margin:0 0 12px}
.kd-title{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.08;letter-spacing:-.01em;margin:0 0 12px}
.kd-meta{font-size:13px;color:var(--kd-soft);margin:0}
.kd .kb-note{background:var(--kd-lime);color:var(--kd-ink);border-radius:14px;margin:0 0 26px}
.kd .kb-note::before{background:var(--kd-ink);opacity:.55}
.kd .kb-note b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin:0 0 2px}
.kd-body > :first-child{margin-top:0}
.kd-body h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(23px,2.6vw,28px);line-height:1.15;margin:42px 0 12px}
.kd-body h3::before{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--kd-tq);margin:0 0 14px}
.kd-body .kd-kicker{margin:42px 0 0}
.kd-body .kd-kicker + h3{margin-top:4px}
.kd-body .kd-kicker + h3::before{display:none}
.kd-body h4{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:16px;margin:24px 0 8px}
.kd-body p{margin:0 0 14px}
.kd-body strong{font-weight:600}
.kd-body ul{list-style:none;margin:0 0 18px;padding:0}
.kd-body ul > li{position:relative;padding-left:22px;margin:0 0 8px}
.kd-body ul > li::before{content:"";position:absolute;left:4px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--kd-tq-text)}
.kd-body ol{list-style:none;counter-reset:kd;margin:6px 0 20px;padding:0}
.kd-body ol > li{counter-increment:kd;position:relative;padding:0 0 0 42px;margin:0 0 12px;min-height:28px}
.kd-body ol > li::before{content:counter(kd);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;
  background:var(--kd-tq);color:#2D2E37;font-size:13px;font-weight:600;display:grid;place-items:center;line-height:1}
.kd-body li > ul,.kd-body li > ol{margin:8px 0 0}
.kd-say{position:relative;margin:8px 0 22px;padding:16px 20px 18px 22px;background:var(--kd-cream);border-left:3px solid var(--kd-tq-deep);
  border-radius:0 16px 16px 0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18.5px;line-height:1.5}
.kd-say::before{content:"Say it like this";display:block;font-family:'Inter',system-ui,sans-serif;font-style:normal;font-size:10.5px;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--kd-tq-text);margin:0 0 6px}
.kd-table{overflow-x:auto;margin:6px 0 22px;border:1px solid var(--kd-hair);border-radius:14px}
.kd-body table{border-collapse:collapse;width:100%;font-size:14.5px;display:table;margin:0}
.kd-body th,.kd-body td{border:0;border-bottom:1px solid var(--kd-hair);padding:10px 14px;vertical-align:top;text-align:left}
.kd-body tr:last-child > *{border-bottom:0}
.kd-body th{background:var(--kd-cream);font-weight:600}
.kd-body tbody th{width:34%}
.kd-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 24px;max-width:560px}
.kd-photos img,.kd-fig img{display:block;width:100%;height:auto;border-radius:14px;border:0;margin:0;max-width:none}
.kd-fig{max-width:420px;margin:8px 0 24px}
/* The page's buttons: Download PDF (an ink pill, turquoise in the dark theme) and the star. */
.kb-tools{display:flex;align-items:center;gap:8px;margin:0 0 14px;max-width:820px}
.kb-read .kb-tools{justify-content:flex-end}
.kb-pdf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px 0 16px;border:0;border-radius:100px;
  background:#2D2E37;color:#FAF8F4;font-size:13.5px;font-weight:500;cursor:pointer;transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s}
.kb-pdf svg{width:18px;height:18px;flex:none}
@media(hover:hover){.kb-pdf:hover{transform:translateY(-2px);background:#3b3c47}}
.kb-pdf:focus-visible{outline:2px solid #7DE6D2;outline-offset:3px}
.kb-pdf.busy{opacity:.7;cursor:progress;transform:none}
[data-theme="dark"] .kb-pdf{background:#99F6E4;color:#2D2E37}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kb-pdf{background:#99F6E4;color:#2D2E37}}
@media (max-width:760px){
  .kd{padding:26px 20px 30px;border-radius:16px;font-size:15.5px}
  .kd-head{margin-bottom:22px;padding-bottom:18px}
  .kd-say{font-size:17px;padding:14px 16px 16px 18px}
  .kd-photos{gap:8px}
  .kd-body ol > li{padding-left:38px}
}
/* Replies (Kate, 5 Oct 2026) */
.sg-mine{max-width:820px;margin-top:8px}
.sg-link{background:none;border:0;padding:6px 0;font:inherit;font-size:13.5px;color:var(--text);text-decoration:underline;cursor:pointer;min-height:32px}
.sg-reply-btn{margin-top:6px}
.sg-reply{margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--surface2)}
.sg-reply p{margin:4px 0 0;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sg-reply .sg-link{padding-bottom:0}
.sg-reply-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);font-weight:600}
.sg-reply-edit{margin-top:10px}
.sg-reply-edit textarea,.sg-code input{display:block;width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.sg-reply-edit textarea{resize:vertical;min-height:80px;line-height:1.5}
.sg-code{margin-top:14px}
.sg-code-row{display:flex;gap:10px;align-items:center;max-width:420px}
.sg-code-row input{margin:0;letter-spacing:.08em;text-transform:uppercase}
.sg-code-row .sg-send{flex:none}
#sgCodeOut{margin-top:10px}
.sg-codebox{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--warn-bg)}
.sg-codebox b{display:inline-block;font-size:20px;letter-spacing:.12em;margin:4px 12px 0 0;font-variant-numeric:tabular-nums}
.sg-codebox p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.sg-hint-inline{font-size:13px;color:var(--muted2);margin-left:10px}
/* Attachments (Kate, 5 Oct 2026) */
.sg-files{margin:12px 0 2px}
.sg-attach{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px dashed var(--border);border-radius:999px;cursor:pointer;font-size:14px;font-weight:600}
@media(hover:hover){.sg-attach:hover{border-color:var(--text)}}
.sg-attach:focus-within{outline:2px solid var(--accent-mint);outline-offset:2px}
.sg-chosen{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sg-chosen li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.sg-chosen li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sg-chosen .sg-link{padding:2px 0;min-height:0}
.sg-att{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sg-thumb{display:block;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--surface2)}
.sg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sg-pdf{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--border);font-size:13.5px;font-weight:600;text-decoration:none;color:var(--text);background:var(--surface2)}

/* HR Forms & Waivers (Kate, 5 Oct 2026): /hub/forms, one panel per group. */
.fm-row .kb-row-tx>span{white-space:normal;overflow:visible}
.fm-switch{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:999px;padding:4px;gap:4px;background:var(--surface);margin:0 0 20px}
.fm-switch button{font:inherit;font-size:14px;border:0;border-radius:999px;padding:7px 16px;min-height:38px;background:transparent;color:var(--muted);cursor:pointer}
.fm-switch button span{font-size:12px;opacity:.7;margin-left:4px}
.fm-switch button[aria-pressed="true"]{background:var(--text);color:var(--bg);font-weight:600}
.fm-switch b{font-weight:inherit}
.fm-short{display:none}
.fm-dept[hidden]{display:none}
.fm-code{flex:none;width:56px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted2)}
.fm-acts{flex:none;display:flex;gap:8px}
.fm-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.fm-btn:hover{border-color:var(--text)}
.fm-btn.fm-dl{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.fm-btn:disabled{opacity:.6;cursor:wait}
@media(max-width:760px){
  /* Kate, 5 Oct 2026: on a phone the switch is one full-width row with short names
     (HR, Hair, Beauty); the long ones wrapped it into a giant oval. */
  .fm-switch{display:flex;flex-wrap:nowrap;width:100%}
  .fm-switch button{flex:1;padding:7px 8px;white-space:nowrap}
  .fm-full{display:none}
  .fm-short{display:inline}
  .fm-row{flex-wrap:wrap}
  .fm-code{width:48px;font-variant-numeric:tabular-nums}
  .fm-row .kb-row-tx{flex-basis:calc(100% - 70px)}
  .fm-row .kb-row-n{order:3}
  .fm-acts{order:4;margin-left:auto}
}

/* The narrowest phones: the centred header still fits on one line. */
@media (max-width:360px){.kb-titles h1{font-size:14.5px}.kb-brand img{width:88px}}