/* ============================================================
   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}
.kb-titles h1 a{color:inherit;text-decoration:none;position:relative}
.kb-titles h1 a:hover,.kb-titles h1 a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;outline:0}
/* the page body starts where the small Team Home crumb used to leave it */
.kb-head+#kbMain,.kb-head+#mxMain{padding-top:20px}

/* 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}

/* Kate, 8 Oct 2026: link to /search/, beside the page title on a desktop, under it on a phone. */
.kb-titlerow{display:flex;align-items:baseline;gap:14px;min-width:0}
.kb-searchpage{flex-shrink:0;font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap}
.kb-searchpage:hover,.kb-searchpage:focus-visible{color:var(--text);text-decoration:underline;outline:0}
/* On a phone the title is a short column on the left: the link sits under it, in the header's own height. */
@media (max-width:760px){.kb-titlerow{flex-direction:column;align-items:flex-start;gap:0}
  .kb-searchpage{font-size:12.5px;line-height:1.3;padding:5px 10px 5px 0}}

/* Account menu */
.kb-account{position:relative;flex-shrink:0;display:flex;align-items:center;gap:8px}
.kb-themequick{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.kb-themequick:hover{border-color:var(--text)}
.kb-themequick:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.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:center;gap:12px;flex-wrap:wrap;width:fit-content;max-width:100%;
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:9000;width:max-content;max-width:calc(100% - 24px);
  margin:0;padding:2px 3px 2px 12px;border-radius:999px;background:var(--warn-bg);color:var(--text);font-size:12.5px;line-height:1.2;box-shadow:0 4px 16px rgba(0,0,0,.28)}   /* Kate, 22 Oct 2026: a thin pill of its own, floating at the bottom */
.kb-viewas-bar button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;
  padding:3px 11px;min-height:24px;font:inherit;font-size:12px;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}
/* Kate, 22 Oct 2026: Team Home is one square per main section; a click opens its rows (.kb-depts-one) underneath. */
.kb-depts-one{columns:1;margin-top:-6px}
.kb-gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:0 0 26px}
.kb-gtile{appearance:none;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:14px;text-align:left;
  aspect-ratio:1/1;min-height:140px;padding:16px;background:var(--surface);color:var(--text);font:inherit;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease)}
.kb-gtile:hover{box-shadow:var(--shadow-hover);transform:translateY(-5px);border-color:var(--muted2)}
.kb-gtile{text-decoration:none}
/* Kate, 23 Oct 2026: a star on each favourite box, top right, to take it out of the favourites. The wrapper takes the lift so the star moves with the box. */
.kb-fvwrap{position:relative;aspect-ratio:1/1;min-height:140px;transition:transform .18s var(--ease)}
.kb-fvwrap:hover{transform:translateY(-5px)}
.kb-fvwrap .kb-gtile{width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box}
.kb-fvwrap .kb-gtile:hover{transform:none;box-shadow:var(--shadow-hover);border-color:var(--muted2)}
.kb-fvwrap .kb-star{z-index:1}
@media (prefers-reduced-motion:reduce){.kb-fvwrap{transition:none}.kb-fvwrap:hover{transform:none}}
.kb-gtile:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.kb-gtile.on{border-color:var(--text);box-shadow:0 0 0 1px var(--text) inset}
.kb-gtile .kb-ic{width:44px;height:44px}
.kb-gt-tx b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.kb-gt-tx span{display:block;font-size:12.5px;color:var(--muted2);margin-top:2px}
@media (prefers-reduced-motion:reduce){.kb-gtile{transition:none}.kb-gtile:hover{transform:none}}
.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)}
/* Kate, 8 Oct 2026: on a phone the legend wraps and the button keeps one line (it had squeezed to three). */
.kb-legend{flex-wrap:wrap}
.kb-legend button{flex:none;white-space:nowrap}
.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}
/* ── Mini sidebar (Kate, 29 Oct 2026): ONE look for every page that has one, taken from the dashboard's own rail
   (index.html .side-k / .side-nav, jump-nav.css). From 1100px it is a 172px column: a small bold label over a rule, then the
   links with a 2px rule on the left that lights the open one. Narrower it lies down into a row of pill chips, the open one
   outlined. .kb-shell-wide keeps the chips until 1400px, as the dashboard does for its widest tables. ── */
.kb-shell>*{min-width:0}
.kb-side-nav{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:0 0 14px}
.kb-side-k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);padding:0 4px 0 0}
.kb-side-nav a{position:relative;padding:4px 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;line-height:1.35;color:var(--text);text-decoration:none;white-space:nowrap;
  transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.kb-side-nav a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
@media(hover:hover){.kb-side-nav a:hover{border-color:var(--accent)}}
.kb-side-nav a.on{border-color:var(--text);font-weight:600}
.kb-side-nav a:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media(min-width:1100px){
  .kb-shell:not(.kb-shell-wide){display:grid;grid-template-columns:172px minmax(0,1fr);gap:46px;align-items:start}
  .kb-shell:not(.kb-shell-wide)>.kb-side{position:sticky;top:calc(var(--kb-top,76px) + 24px)}
}
@media(min-width:1400px){
  .kb-shell-wide{display:grid;grid-template-columns:172px minmax(0,1fr);gap:46px;align-items:start}
  .kb-shell-wide>.kb-side{position:sticky;top:calc(var(--kb-top,76px) + 24px)}
}
@media(min-width:1100px){.kb-shell:not(.kb-shell-wide) .kb-side-nav{display:block;padding:0}
  .kb-shell:not(.kb-shell-wide) .kb-side-k{display:block;padding:0 0 9px;border-bottom:1px solid var(--text)}
  .kb-shell:not(.kb-shell-wide) .kb-side-nav a{display:block;padding:8px 0 8px 13px;border:0;border-left:2px solid var(--border2);border-radius:0;font-size:14px;color:var(--muted);white-space:normal}
  .kb-shell:not(.kb-shell-wide) .kb-side-nav a.on{color:var(--text);border-left-color:var(--text)}
  .kb-shell:not(.kb-shell-wide) .kb-side-nav a::after{display:none}}
@media(min-width:1400px){.kb-shell-wide .kb-side-nav{display:block;padding:0}
  .kb-shell-wide .kb-side-k{display:block;padding:0 0 9px;border-bottom:1px solid var(--text)}
  .kb-shell-wide .kb-side-nav a{display:block;padding:8px 0 8px 13px;border:0;border-left:2px solid var(--border2);border-radius:0;font-size:14px;color:var(--muted);white-space:normal}
  .kb-shell-wide .kb-side-nav a.on{color:var(--text);border-left-color:var(--text)}
  .kb-shell-wide .kb-side-nav a::after{display:none}}
@media print{.kb-side{display:none}}

/* ── 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:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin:0 0 4px;padding-bottom:9px;border-bottom:1px solid var(--text)}
.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:8px 0 8px 13px;border-left:2px solid var(--border2);font-size:14px;line-height:1.35;text-decoration:none;color:var(--muted)}
@media(hover:hover){.kb-toc a:hover{color:var(--text)}}
.kb-toc a.on{color:var(--text);font-weight:600;border-left-color:var(--text)}
.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-depts{columns:1}
  .kb-gtiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
  .kb-gtile{min-height:120px;padding:14px;gap:10px;border-radius:14px}
  .kb-fvwrap{min-height:120px}
  .kb-fvwrap .kb-star{top:8px;right:8px;width:36px;height:36px}
  .kb-gt-tx b{font-size:15px}
  .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%}
/* Kate, 28 Oct 2026: a tick grid (Stylist & Client Matching): stylists down, services across, upright headings, the name column stays put when the grid scrolls. */
.kd-body table.mx{width:auto;min-width:100%;font-size:12.5px}
.kd-body table.mx th,.kd-body table.mx td{padding:5px 0;text-align:center;width:auto}
.kd-body table.mx tbody th{width:auto}
.kd-body table.mx th.g{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 4px}
.kd-body table.mx th.v{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;height:185px;min-width:16px;padding:8px 0;font-size:11.5px;font-weight:500;line-height:16px}
.kd-body table.mx td{min-width:16px;color:var(--kd-tq-text);font-weight:700;font-size:13px}
.kd-body table.mx th.s,.kd-body table.mx td.s{border-left:1px solid var(--kd-hair)}
.kd-body table.mx tr > :first-child{position:sticky;left:0;z-index:1;text-align:left;padding:5px 12px;white-space:nowrap;background:var(--kd-paper);color:var(--kd-ink);font-weight:500}
.kd-body table.mx tr:first-child > :first-child,.kd-body table.mx tr:nth-child(2) > :first-child{background:var(--kd-cream)}
.kd-body table.mx tr > :nth-child(2){text-align:left;padding:5px 10px 5px 0;color:var(--kd-soft);font-size:11px;font-weight:500}
.kd-body table.mx tr:nth-child(2) > :nth-child(2){writing-mode:horizontal-tb;transform:none;height:auto;vertical-align:bottom}
.kd-body table.mx tr:nth-child(2) > :first-child{vertical-align:bottom}
/* Kate, 28 Oct 2026: a two-column lookup (Client to Staff Matching): what she is booking, then who. */
.kd-body table.fd th:first-child,.kd-body table.fd td:first-child{width:28%}
.kd-body table.fd tbody th:nth-child(2){width:auto}
.kd-body table.fd td:first-child{font-weight:600}
.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}}

/* Phone tap targets and the branch switch (audit 18 Oct 2026, P7-10, P7-11): everything that measured under 44px at 375px on
   Team Home, Staff Card Links and the roster. The row-link on Team Home is a stretched link, so the whole row is its target. */
@media(max-width:760px){
  .kb-row .kb-star{width:44px;height:44px}
  .kb-check{position:relative}
  a.kb-check::after,.kb-searchpage::after,.kb-brand::after,.kb-titles h1 a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .kb-searchpage,.kb-brand{position:relative}
  .fm-btn,.fm-switch button,.kb-dd-btn,.kb-account-btn{min-height:44px}
  .kb-themequick{width:44px;height:44px}
  .rs-chg,.rs-rm,.rs-send,.rs-lv,.rs-addbtn{min-height:44px}
  .kb-foot a{display:inline-block;padding:14px 6px}
  /* Staff Card Links: five branches did not fit one row and pushed the page 46px wider than the screen. */
  .fm-switch{flex-wrap:wrap;border-radius:22px}
  .fm-switch button{flex:1 1 auto;min-width:0}
}

/* === ALAD-5 (Kate, 30 Oct 2026): the Knowledge Base and Tools doors. A row's line wraps instead of being cut with "...", because the
   why is the part that was cut off on a phone. Only the door pages (.kb-door-list); Team Home's own rows are unchanged. === */
.kb-door-list .kb-row-tx>span{white-space:normal;overflow:visible;text-overflow:clip}
.kb-door-list .kb-row{align-items:flex-start;padding-top:14px;padding-bottom:14px}
.kb-door-list .kb-row .kb-ic{margin-top:2px}
.kb-door-list .kb-row .kb-star,.kb-door-list .kb-row .kb-go{align-self:center}
.kb-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* === end ALAD-5 === */