/* MCP customer service mockup. Calm tokens with MCP blues. No inline styles anywhere (CSP style-src 'self'). */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("assets/Figtree-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("assets/Figtree-LatinExt.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font: "Figtree", "Segoe UI Variable", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ground: #F5F7F5; --surface: #FFFFFF; --line: #E3E9E4; --divider: #EDF1EE;
  --side: #FAFBFA; --surface2: #F8FAF8;
  --tint-red: #FCF4F3; --tint-amber: #FEF9EF; --tint-good: #F3F8F5; --tint-blue: #F3F7FC;
  --sh-1: 0 1px 2px rgba(22, 35, 29, 0.04); --sh-2: 0 6px 16px rgba(22, 35, 29, 0.06), 0 1px 3px rgba(22, 35, 29, 0.05); --sh-pop: 0 18px 50px rgba(22, 35, 29, 0.18), 0 2px 8px rgba(22, 35, 29, 0.08);
  --ink: #16231D; --muted: #5B6B63; --grey-ink: #3B4A43; --input: #C9D3CC;
  --brand: #212121; --on-brand: #FFFFFF;
  --blue-btn: #4471B8; --blue-hover: #3A66AA; --blue-tint: #EAF0F9; --blue-ink: #2C5599; --link: #3A66AA; --on-accent: #FFFFFF;
  --bowranda: #1480C4; --wd-dot: #212121;
  --amber: #7A4F00; --amber-bg: #FFF1D6; --amber-bar: #D9A23A;
  --red: #A1251B; --red-bg: #FCE8E6;
  --blue: #1F5F99; --blue-bg: #E7EFF8;
  --good: #2F6B55;
  --row-hover: #F8FAF8; --row-sel: #F7F9FC; --strip-bg: #ECEFEB; --switch-off: #D6DDD8; --chip-bg: #EEF2EF;
  --toast-bg: #212121; --toast-ink: #FFFFFF; --scrim: rgba(22, 35, 29, 0.35); --logo-filter: none;
  /* Copilot mascot */
  --m-rail: #2A2D2B; --m-cap: #4A4F4C; --m-fabric: #EEE9DF; --m-weave: #E0D9CC; --m-ink: #1E2420; --m-cheek: #F2A7A0;
  --m-accent: #4471B8; --m-good: #2F6B55; --m-warn: #D9A23A; --m-chain: #8C918E; --m-arm: #2A2D2B;
  --m-slat-lo: #CFC5B1; --m-edge: rgba(60, 46, 20, 0.32); --m-shadow: rgba(30, 36, 32, 0.14); --m-halo: 0.55;
  --r-card: 16px; --r-sm: 14px; --r-ctl: 10px; --r-tight: 8px; --r-pill: 999px;
  --strip: 32px;
  /* Type scale (calm rules): labels 12, secondary 14, body 15, section 16, large 20, page title 24. Nothing under 12. */
  --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-20: 1.25rem; --fs-24: 1.5rem;
  /* Spacing on a 4/8 grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  /* Layers */
  --z-nav: 40; --z-menu: 60; --z-dialog: 80; --z-toast: 90;
  /* Control borders need 3:1 against the page (WCAG 1.4.11); --input stays for quiet dividers and hovers */
  --input-strong: #7C8A83; --badge-red: #BF3326;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101513; --surface: #171D1A; --line: #2A3430; --divider: #222A26;
    --side: #131916; --surface2: #1B221E;
    --tint-red: #2A1B19; --tint-amber: #2A2414; --tint-good: #17251F; --tint-blue: #172231;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3); --sh-2: 0 6px 16px rgba(0, 0, 0, 0.35); --sh-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
    --ink: #E5ECE8; --muted: #9AA9A1; --grey-ink: #C2CDC7; --input: #3A4641; --input-strong: #6E7D76;
    --brand: #F1F4F2; --on-brand: #101513;
    --blue-btn: #4471B8; --blue-hover: #3A66AA; --blue-tint: #1C2A3E; --blue-ink: #AFC8F2; --link: #9DBDF0; --on-accent: #FFFFFF;
    --bowranda: #6E9BDE; --wd-dot: #C9D0CC;
    --amber: #F1C76F; --amber-bg: #3A2C0E; --amber-bar: #D9A23A;
    --red: #F29C92; --red-bg: #3D1C19;
    --blue: #9CC0EC; --blue-bg: #1A2A3D;
    --good: #7BC4A6;
    --row-hover: #1C2320; --row-sel: #1A2433; --strip-bg: #1C2320; --switch-off: #3A4641; --chip-bg: #222A26;
    --toast-bg: #E5ECE8; --toast-ink: #101513; --scrim: rgba(0, 0, 0, 0.55); --logo-filter: invert(1) brightness(1.15);
    --m-rail: #C9D0CC; --m-cap: #E6EBE8; --m-fabric: #E6E0D3; --m-weave: #D6CEBF; --m-arm: #C9D0CC;
    --m-accent: #8FB3EA; --m-good: #7BC4A6; --m-warn: #F0C46A; --m-chain: #7F8783; --m-slat-lo: #BDB4A2; --m-edge: rgba(0, 0, 0, 0.45); --m-shadow: rgba(0, 0, 0, 0.4); --m-halo: 1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #101513; --surface: #171D1A; --line: #2A3430; --divider: #222A26;
    --side: #131916; --surface2: #1B221E;
    --tint-red: #2A1B19; --tint-amber: #2A2414; --tint-good: #17251F; --tint-blue: #172231;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3); --sh-2: 0 6px 16px rgba(0, 0, 0, 0.35); --sh-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
  --ink: #E5ECE8; --muted: #9AA9A1; --grey-ink: #C2CDC7; --input: #3A4641; --input-strong: #6E7D76;
  --brand: #F1F4F2; --on-brand: #101513;
  --blue-btn: #4471B8; --blue-hover: #3A66AA; --blue-tint: #1C2A3E; --blue-ink: #AFC8F2; --link: #9DBDF0; --on-accent: #FFFFFF;
  --bowranda: #6E9BDE; --wd-dot: #C9D0CC;
  --amber: #F1C76F; --amber-bg: #3A2C0E; --amber-bar: #D9A23A;
  --red: #F29C92; --red-bg: #3D1C19;
  --blue: #9CC0EC; --blue-bg: #1A2A3D;
  --good: #7BC4A6;
  --row-hover: #1C2320; --row-sel: #1A2433; --strip-bg: #1C2320; --switch-off: #3A4641; --chip-bg: #222A26;
  --toast-bg: #E5ECE8; --toast-ink: #101513; --scrim: rgba(0, 0, 0, 0.55); --logo-filter: invert(1) brightness(1.15);
  --m-rail: #C9D0CC; --m-cap: #E6EBE8; --m-fabric: #E6E0D3; --m-weave: #D6CEBF; --m-arm: #C9D0CC;
  --m-accent: #8FB3EA; --m-good: #7BC4A6; --m-warn: #F0C46A; --m-chain: #7F8783; --m-slat-lo: #BDB4A2; --m-edge: rgba(0, 0, 0, 0.45); --m-shadow: rgba(0, 0, 0, 0.4); --m-halo: 1;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 0.9375rem/1.45 var(--font); overflow-wrap: anywhere; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--surface); padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-14); }
svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Mockup strip ---------- */
.strip { position: sticky; top: 0; z-index: 60; min-height: var(--strip); padding: 4px 16px; display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap;
  background: var(--strip-bg); color: var(--grey-ink); font-size: 0.75rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.link { background: none; border: 0; padding: 0; color: var(--link); font-weight: 600; cursor: pointer; text-decoration: none; text-align: left; }
.link:hover { text-decoration: underline; }
.link.quiet { color: var(--grey-ink); font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.link.quiet:hover { color: var(--ink); text-decoration: underline; }
.strip .link.quiet { min-height: 24px; font-size: 0.75rem; text-decoration: underline; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - var(--strip)); }
.side { position: sticky; top: var(--strip); align-self: start; height: calc(100vh - var(--strip)); overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.brandrow { display: flex; align-items: center; gap: 12px; padding: 0 4px; min-width: 0; }
.mcplogo { width: 64px; height: auto; flex: none; filter: var(--logo-filter); }
.brandtext { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.brandtext b { font-size: 1rem; font-weight: 800; color: var(--brand); }
.brandtext span { font-size: 0.75rem; color: var(--muted); }
.brandtext i { font-style: normal; color: var(--muted); opacity: 0.9; }
.sidesearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 10px; min-height: 40px; color: var(--muted); }
.sidesearch:focus-within { border-color: var(--blue-btn); outline: 2px solid var(--blue-btn); outline-offset: 1px; }
.sidesearch input { border: 0; background: transparent; flex: 1; min-width: 0; outline: none; color: var(--ink); min-height: 38px; }
.sidesearch kbd { font: 500 var(--fs-12) var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
#nav { display: flex; flex-direction: column; gap: 2px; }
.navlabel { margin: 14px 8px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.navlink { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 8px; border-radius: var(--r-ctl); color: var(--grey-ink); text-decoration: none; font-weight: 500; position: relative; }
.navlink:hover { background: var(--ground); color: var(--ink); }
.navlink[aria-current="page"] { background: var(--blue-tint); color: var(--blue-ink); font-weight: 700; }
.navlink[aria-current="page"] svg { color: var(--blue-btn); }
.navlink .navn { margin-left: auto; font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.navlink .navtxt { min-width: 0; }
.navlink .soon { margin-left: auto; font-size: var(--fs-12); color: var(--muted); }
.topbar, .scrim { display: none; }

/* Icon rail */
@media (min-width: 900px) and (max-width: 1279px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .side { padding: 12px 8px; align-items: center; }
  .brandtext, .sidesearch kbd, .sidesearch input, .navlabel, .navlink .navtxt, .navlink .navn, .navlink .soon { display: none; }
  .brandrow { padding: 0; }
  .mcplogo { width: 44px; }
  .sidesearch { border: 0; padding: 0; min-height: 44px; width: 44px; justify-content: center; cursor: pointer; }
  .navlink { width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  #nav { align-items: center; }
  .navsep { width: 24px; border-top: 1px solid var(--divider); margin: 8px 0; }
}
@media (min-width: 1280px) { .navsep { display: none; } }

/* Menu button under 900px */
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: var(--strip); z-index: 40; padding: 4px 8px; min-height: 52px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .topbar b { font-weight: 800; color: var(--brand); }
  .menubtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; font-weight: 600; }
  .side { position: fixed; z-index: 70; left: 0; top: var(--strip); bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform 0.2s ease; }
  .side.open { transform: none; }
  .scrim { display: block; position: fixed; inset: var(--strip) 0 0 0; z-index: 65; background: var(--scrim); }
  .navlink { min-height: 44px; }
}

main { min-width: 0; padding: 24px; outline: none; }
.page { max-width: 1160px; margin: 0 auto; min-width: 0; }
.pagehead { margin-bottom: 16px; }
h1 { font-size: var(--fs-24); font-weight: 800; color: var(--brand); line-height: 1.15; }
.lede { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }
.lede b { color: var(--grey-ink); font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; min-height: 32px; color: var(--grey-ink); font-weight: 500; text-decoration: none; }
.back:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer; text-align: left; }
.btn:hover { background: var(--ground); }
.btn.primary { background: var(--blue-btn); border-color: var(--blue-btn); color: var(--on-accent); }
.btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn.confirm { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.confirm:hover { opacity: 0.9; }
.iconbtn { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--grey-ink); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.iconbtn:hover { background: var(--divider); color: var(--ink); }
.iconbtn .ic { width: 18px; height: 18px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0 20px; border-bottom: 1px solid var(--divider); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { min-height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-weight: 600; box-shadow: inset 0 -2px 0 transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue-btn); }
.tab .n { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.tab:focus-visible { outline-offset: -2px; border-radius: 4px; }

/* ---------- Dots and labels ---------- */
.kind, .brandl { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--muted); white-space: nowrap; min-width: 0; }
.kind i, .brandl i, .st i { width: 7px; height: 7px; border-radius: 50%; background: #9AA8A1; flex: none; display: inline-block; }
.kind.amber i { background: var(--amber-bar); } .kind.red i { background: var(--red); } .kind.blue i { background: var(--blue-btn); }
.brandl.wd i { background: var(--wd-dot); } .brandl.bw i { background: var(--bowranda); }
.brandl { color: var(--grey-ink); }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.8125rem; color: var(--grey-ink); }
.st.good i { background: var(--good); } .st.warn i { background: var(--amber-bar); } .st.bad i { background: var(--red); }
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--amber); }
.flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-bar); }
.av { width: 24px; height: 24px; border-radius: 50%; background: var(--divider); color: var(--grey-ink); font-size: var(--fs-12); font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.av.lg { width: 32px; height: 32px; font-size: 0.75rem; }
.sortl { font-size: 0.75rem; font-weight: 700; color: var(--amber); white-space: nowrap; }

.card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); }
.card.pad { padding: 16px; }
.card h2 { font-size: 1rem; font-weight: 800; color: var(--brand); }
.pairs { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 0.875rem; }
.pairs dt { color: var(--muted); }
.pairs dd { margin: 0; font-weight: 600; text-align: right; }
.team { list-style: none; margin: 0; padding: 0; }
.team li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--divider); }
.team li:first-child { border-top: 0; }
.team .who { min-width: 0; flex: 1; line-height: 1.3; }
.team .who b { display: block; font-size: 0.875rem; }
.team .who span { font-size: 0.8125rem; color: var(--muted); }
.team .tl { display: flex; gap: 12px; flex: none; }
.team .link { font-size: 0.8125rem; font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; color: var(--grey-ink); }
.team .link:hover { color: var(--ink); text-decoration: underline; }

/* Ask the Assistant */
.ask form { display: flex; gap: 8px; align-items: center; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 6px 0 12px; min-height: 44px; }
.ask form:focus-within { border-color: var(--blue-btn); outline: 2px solid var(--blue-btn); outline-offset: 1px; }
.ask input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; min-height: 42px; }
.ask label { font-size: 0.8125rem; font-weight: 700; color: var(--grey-ink); display: block; margin-bottom: 6px; }
.ask .go { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--link); cursor: pointer; display: grid; place-items: center; }
.ask .go:hover { background: var(--blue-tint); }
.answer { margin-top: 8px; padding: 12px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--divider); }
.answer p { font-size: 0.875rem; }
.answer .from { display: block; margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
.answer .who { font-size: 0.75rem; font-weight: 700; color: var(--blue-ink); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.tryl { margin-top: 6px; font-size: 0.75rem; color: var(--muted); }

/* Next up */
.next { padding: 16px; margin-bottom: 16px; }
.nexthead { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--muted); }
.nexthead .eyebrow { font-weight: 800; color: var(--blue-ink); }
.next h2 { font-size: 1.125rem; margin: 4px 0 8px; font-weight: 800; }
.next .xpanel { padding: 0; }

/* ---------- List and rows ---------- */
.list { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); overflow: hidden; }
.ghead { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 6px; border-top: 1px solid var(--divider); }
.ghead:first-child { border-top: 0; }
.ghead h2 { font-size: 0.8125rem; color: var(--grey-ink); font-weight: 800; }
.ghead span { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.item { position: relative; border-top: 1px solid var(--divider); }
.ghead + .item { border-top: 0; }
.item:hover:not(.sel), .item:focus-within:not(.sel) { background: var(--row-hover); }
.item.sel { background: var(--row-sel); box-shadow: inset 3px 0 0 var(--blue-btn); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; background: none; border: 0; text-align: left; cursor: pointer; }
.row:focus-visible { outline-offset: -2px; border-radius: 6px; }
.row .kind { width: 150px; flex: none; }
.row .brandl { width: 92px; flex: none; }
.row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row .what b { font-size: 0.9375rem; font-weight: 500; }
.row .what b.new { font-weight: 800; }
.row .what span { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .age { width: 40px; flex: none; text-align: right; font-size: 0.8125rem; color: var(--muted); }
.row .own { width: 56px; flex: none; display: flex; justify-content: flex-end; }
.item.sel .row .own, .item.sel .row .age { visibility: hidden; }
.acts { position: absolute; top: 10px; right: 12px; display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--row-hover); opacity: 0; pointer-events: none; }
.item:hover > .acts:not(.open), .item:focus-within > .acts:not(.open) { opacity: 1; pointer-events: auto; }
.acts.open { opacity: 1; pointer-events: auto; background: transparent; }
.item .flagrow { display: none; }

/* Open item */
.xwrap { padding: 0 16px 16px 19px; }
.xpanel { display: flex; flex-direction: column; gap: 12px; }
.xsent { font-size: 0.9375rem; max-width: 70ch; }
.sugwrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; color: var(--blue-ink); }
.sugrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 100%; }
.sugrow .btn.primary { max-width: 100%; }
.morelinks { display: flex; flex-wrap: wrap; gap: 0 20px; }
.morelinks .link, .xfoot .link, .xfoot a { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--grey-ink); text-decoration: none; }
.morelinks .link:hover, .xfoot .link:hover, .xfoot a:hover { color: var(--ink); text-decoration: underline; }
.alts { border: 1px solid var(--divider); border-radius: var(--r-ctl); padding: 8px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; max-width: 520px; }
.alt label { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-size: 0.875rem; }
.alt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--blue-btn); margin: 0; }
.fields { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 2px 0 8px 28px; }
.fields label { display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.fields select, .fields input { min-height: 40px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 10px; font-size: 0.875rem; color: var(--ink); min-width: 160px; }
.facts { margin: 0; display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 4px 16px; font-size: 0.875rem; padding: 12px 0 0; border-top: 1px solid var(--divider); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.draft { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.draft .dh { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--grey-ink); }
.draft .subj { font-size: 0.8125rem; color: var(--muted); }
.draft textarea { width: 100%; min-height: 190px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); padding: 12px; background: var(--surface); line-height: 1.5; resize: vertical; font-size: 0.875rem; }
.draft textarea:focus { outline: 2px solid var(--blue-btn); outline-offset: 1px; border-color: var(--blue-btn); }
.qbtn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--input); background: var(--surface); color: var(--grey-ink); font-size: 0.8125rem; font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.qbtn:hover { background: var(--blue-tint); }
.why { margin: 0; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--ground); font-size: 0.8125rem; color: var(--grey-ink); }
.why ul { margin: 4px 0 0; padding-left: 18px; }
.xfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.xclose { position: absolute; top: 10px; right: 12px; }
.handpick { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px; border: 1px solid var(--divider); border-radius: var(--r-ctl); background: var(--surface); max-width: 520px; }
.handpick button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 500; }
.handpick button:hover { background: var(--ground); }
.handpick small { color: var(--muted); font-size: 0.75rem; }

.spacer16 { height: 16px; }
.facts.nobord { border-top: 0; padding-top: 0; }

/* ---------- States ---------- */
.state { padding: 32px 16px; text-align: center; color: var(--muted); }
.state h2 { font-size: 1.125rem; color: var(--brand); margin-bottom: 4px; font-weight: 800; }
.state p { max-width: 46ch; margin: 0 auto; }
.state .link { margin-top: 12px; display: inline-flex; min-height: 44px; align-items: center; }
.skel { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.skel i { display: block; height: 14px; border-radius: 6px; background: var(--divider); animation: pulse 1.2s ease-in-out infinite; }
.skel .w30 { width: 30%; } .skel .w60 { width: 60%; } .skel .w80 { width: 80%; } .skel .w45 { width: 45%; }
.skel .btnb { height: 40px; width: 220px; border-radius: 10px; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ---------- Toast ---------- */
#toast { position: fixed; z-index: 90; left: 16px; bottom: 16px; right: 16px; display: flex; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 16px; max-width: 520px; padding: 8px 8px 8px 16px; border-radius: var(--r-ctl); background: var(--toast-bg); color: var(--toast-ink); font-size: 0.875rem; }
.toast button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--toast-ink); font-weight: 700; text-decoration: underline; cursor: pointer; }
.toast button:hover { background: rgba(127, 127, 127, 0.18); }
.toast button:focus-visible { outline-color: var(--toast-ink); }

/* ---------- Call card ---------- */
.call { position: fixed; z-index: 80; top: calc(var(--strip) + 12px); right: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - var(--strip) - 24px); overflow-y: auto;
  border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: slidein 0.25s ease-out;
  --panel: #212121; --text: #fff; --box: rgba(255, 255, 255, 0.08); --rule: rgba(255, 255, 255, 0.22); --edge: #6D6D6D; --btn: #fff; --btn-text: #212121; --btn-hover: #EAEAEA;
  background: var(--panel); color: var(--text); border-bottom: 3px solid var(--edge); }
.call[data-brand="bw"] { --panel: #4471B8; --edge: #9DB8E2; --box: rgba(0, 0, 0, 0.16); --btn-text: #3A66AA; --btn-hover: #EEF3FA; }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.call .chd { display: flex; align-items: center; gap: 12px; }
.call .chd img { width: auto; flex: none; }
.call .chd img.wd { height: 22px; } .call .chd img.bw { height: 34px; }
.call .chd span { font-size: 0.8125rem; font-weight: 700; margin-left: auto; letter-spacing: 0.04em; text-transform: uppercase; }
.call h2 { font-size: 1.25rem; font-weight: 800; color: #fff; }
.call .box { background: var(--box); border-radius: var(--r-ctl); padding: 8px 12px; font-size: 0.875rem; }
.call .box ul { margin: 4px 0 0; padding: 0; list-style: none; }
.call .box li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.call .lab { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.codes legend { padding: 0; margin-bottom: 6px; }
.codes label { position: relative; }
.codes input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.codes span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: 0.8125rem; font-weight: 600; }
.codes input:checked + span { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.codes input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.call .btn { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.call .btn:hover { background: var(--btn-hover); }
.call .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.call .link { color: #fff; font-weight: 500; min-height: 36px; }
.call .callfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.call .hint { font-size: 0.75rem; }

/* ---------- Orders, order page, dealers ---------- */
.searchbar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 12px; min-height: 48px; margin-bottom: 16px; max-width: 560px; color: var(--muted); }
.searchbar:focus-within { border-color: var(--blue-btn); outline: 2px solid var(--blue-btn); outline-offset: 1px; }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; min-height: 44px; color: var(--ink); }
.ores { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; text-decoration: none; color: inherit; border-top: 1px solid var(--divider); }
.ores:first-child { border-top: 0; }
.ores:hover { background: var(--row-hover); }
.ores .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ores .what b { font-weight: 700; }
.ores .what span { font-size: 0.8125rem; color: var(--muted); }
.ores .brandl { width: 92px; }
.ores .stagew { width: 110px; flex: none; font-size: 0.8125rem; color: var(--grey-ink); text-align: right; }
.ohead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.ohead .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.cols > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.timeline { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.timeline li { position: relative; padding-top: 22px; font-size: 0.8125rem; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line); }
.timeline li::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--input); }
.timeline li.done::before { background: var(--blue-btn); }
.timeline li.done::after { background: var(--blue-btn); border-color: var(--blue-btn); }
.timeline li.now::after { background: var(--blue-btn); border-color: var(--blue-btn); box-shadow: 0 0 0 3px var(--blue-tint); }
.timeline li:last-child::before { right: auto; width: 0; }
.timeline b { display: block; color: var(--ink); font-weight: 700; font-size: 0.875rem; }
.timeline li.todo b { color: var(--muted); font-weight: 600; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--divider); font-size: 0.875rem; }
.lines li:first-child { border-top: 0; }
.lines .p { font-weight: 700; flex: 1 1 140px; min-width: 0; }
.lines .s { flex: 1 1 130px; min-width: 0; }
.lines .q { flex: 0 0 60px; color: var(--grey-ink); }
.lines .c { flex: 1 1 140px; min-width: 0; color: var(--grey-ink); }
.hist { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.hist li { padding: 8px 0; border-top: 1px solid var(--divider); display: flex; flex-direction: column; }
.hist li:first-child { border-top: 0; }
.hist span { font-size: 0.75rem; color: var(--muted); }
.ordersug { padding: 16px; }
.sechead { font-size: var(--fs-16); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.drow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; min-height: 56px; background: none; border: 0; text-align: left; cursor: pointer; }
.drow .dn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drow .dn b { font-weight: 700; }
.drow .dn span { font-size: 0.8125rem; color: var(--muted); }
.drow .st { width: 190px; flex: none; }
.drow .oc { width: 100px; flex: none; text-align: right; font-size: 0.8125rem; color: var(--grey-ink); }
.drow .lc { width: 190px; flex: none; font-size: 0.8125rem; color: var(--muted); }
.ditem { border-top: 1px solid var(--divider); }
.ditem:first-child { border-top: 0; }
.ditem:hover:not(.sel) { background: var(--row-hover); }
.ditem.sel { background: var(--row-sel); box-shadow: inset 3px 0 0 var(--blue-btn); }
.dopen { padding: 0 16px 16px 19px; display: flex; flex-direction: column; gap: 12px; }
.dopen .facts { border-top: 0; padding-top: 0; }
.roworders a { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 0; font-size: 0.875rem; color: var(--ink); text-decoration: none; min-height: 32px; align-items: center; }
.roworders a:hover b { text-decoration: underline; }
.roworders { display: flex; flex-direction: column; border-top: 1px solid var(--divider); padding-top: 8px; }
.soonpage { max-width: 560px; margin: 48px auto; padding: 32px 24px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 899px) {
  main { padding: 16px; }
  h1 { font-size: 1.5rem; }
  .lede.hide-m { display: none; }
}
@media (max-width: 720px) {
  main { padding: 12px 16px; }
  .row { flex-wrap: wrap; gap: 2px 8px; padding: 12px; }
  .row .kind { width: auto; font-size: 0.75rem; order: 0; }
  .row .brandl { width: auto; font-size: 0.75rem; order: 1; }
  .row .age { order: 2; margin-left: auto; width: auto; }
  .row .own { order: 3; width: auto; }
  .row .what { order: 4; flex-basis: 100%; }
  .row .what span { white-space: normal; }
  .xwrap { padding: 0 12px 12px 15px; }
  .ghead { padding: 12px 12px 6px; }
  .acts { display: none; }
  .ores { flex-wrap: wrap; gap: 2px 8px; }
  .ores .what { flex-basis: 100%; order: 3; }
  .ores .stagew { margin-left: auto; width: auto; }
  .drow { flex-wrap: wrap; gap: 2px 8px; padding: 12px; }
  .drow .dn { flex-basis: 100%; order: 3; }
  .drow .st, .drow .oc, .drow .lc { width: auto; }
  .drow .lc { flex-basis: 100%; order: 4; }
  .dopen { padding: 0 12px 12px 15px; }
  .timeline li { font-size: 0.75rem; }
  .timeline b { font-size: 0.8125rem; }
  .call { top: calc(var(--strip) + 56px); left: 16px; right: 16px; width: auto; max-height: calc(100vh - var(--strip) - 72px); }
  .facts { grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 4px 12px; }
  .next { padding: 12px; }
  .next h2 { font-size: 1rem; }
}

/* Touch: row actions live in the open item; 44px targets */
@media (hover: none), (pointer: coarse) { .acts:not(.open) { display: none; } }
@media (pointer: coarse) {
  .btn, .tab, .iconbtn, .qbtn { min-height: 44px; }
  .iconbtn { width: 44px; height: 44px; }
  .qbtn { width: 44px; height: 44px; border: 0; background: transparent; }
  .morelinks .link, .xfoot .link, .xfoot a, .link.quiet, .team .link, .back { min-height: 44px; }
  .alt label { min-height: 44px; }
  .handpick button { min-height: 44px; }
  .codes span { min-height: 44px; }
  .fields select, .fields input { min-height: 44px; }
  .toast button { min-height: 44px; }
  .strip .link.quiet { min-height: 44px; }
  .ask .go { width: 44px; height: 44px; }
  .row { min-height: 64px; }
}
@media (pointer: coarse) { :root { --strip: 44px; } }

/* ---------- Round 2 pages ---------- */
.sp { margin-top: 8px; }
.tab[aria-pressed="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue-btn); }
.tabs.filters { flex-wrap: nowrap; }
.swline { display: flex; align-items: center; }
.swline .row { flex: 1; min-width: 0; }
.tick { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-left: 4px; cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--blue-btn); margin: 0; cursor: pointer; }
.bulk { margin-bottom: 12px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.stocklist { list-style: none; margin: 0 0 8px; padding: 0; }
.stocklist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; border-top: 1px solid var(--divider); font-size: 0.875rem; }
.stocklist li:first-child { border-top: 0; }
.stocklist .sc { grid-column: 1 / -1; font-size: 0.75rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.stocklist .sc.stale { color: var(--amber); font-weight: 600; }
.stocklist .sc i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-bar); display: inline-block; }
.notif { margin: -8px 0 16px; }
.logrow { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr) 190px 60px; gap: 4px 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--divider); font-size: 0.875rem; }
.logrow:first-child { border-top: 0; }
.logrow small { display: block; color: var(--muted); font-size: 0.8125rem; }
.logrow .ldur { text-align: right; color: var(--muted); font-size: 0.8125rem; }
.logrow .lt { color: var(--grey-ink); font-size: 0.8125rem; }
.logrow .lt .kind { font-weight: 700; }
.cbrow { grid-template-columns: 130px 80px minmax(0, 1fr) auto; }
.cbacts { display: flex; gap: 16px; }
.cbacts .link { min-height: 32px; }
.bigta { width: 100%; min-height: 140px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); padding: 12px; background: var(--surface); line-height: 1.5; resize: vertical; font-size: 0.875rem; margin-top: 8px; }
.bigta:focus { outline: 2px solid var(--blue-btn); outline-offset: 1px; border-color: var(--blue-btn); }
.sechead { display: block; }
.trysamples { margin: 8px 0 12px; font-size: 0.8125rem; color: var(--muted); }
.wizact { margin-top: 12px; }
.wizact .link[aria-pressed="true"] { text-decoration: underline; color: var(--ink); }
.src { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.tpls { list-style: none; margin: 0; padding: 0; }
.tplprev { white-space: pre-wrap; font: 400 0.8125rem/1.5 var(--font); background: var(--ground); border-radius: var(--r-ctl); padding: 12px; margin: 8px 0 0; overflow-wrap: anywhere; }
mark.ph { background: var(--blue-tint); color: var(--blue-ink); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.recent { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.recent li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--divider); }
.recent li:first-child { border-top: 0; }
.recent span { font-size: 0.75rem; color: var(--muted); }
.needs { border-color: var(--amber-bar); }
.needl { list-style: none; margin: 0; padding: 0; }
.needl li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--divider); align-items: center; justify-content: space-between; }
.needl li:first-child { border-top: 0; }
.needl span { flex: 1 1 280px; min-width: 0; }
.needl a, .needl .link { min-height: 32px; display: inline-flex; align-items: center; }
.wfrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 140px minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.wfrow .what span { white-space: normal; }
.wft, .wfl { font-size: 0.8125rem; color: var(--muted); }
.swrow { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.switch { width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--input); background: var(--switch-off); position: relative; cursor: pointer; padding: 0; }
.switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch[aria-checked="true"] { background: var(--blue-btn); border-color: var(--blue-btn); }
.switch[aria-checked="true"] i { left: 20px; }
.hist .kind { font-weight: 600; margin-bottom: 2px; }
.cnline { display: flex; align-items: center; }
.cnline .row { flex: 1; min-width: 0; }
.cnline .what span { white-space: normal; }
.opt { font-size: 0.75rem; font-weight: 500; }
.chipwrap { position: relative; flex: none; padding-right: 12px; }
.schip { min-height: 36px; padding: 0 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.schip:hover { background: var(--divider); }
.pop { position: absolute; right: 12px; top: 100%; z-index: 20; width: 260px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 0.8125rem; box-shadow: 0 4px 14px rgba(22, 35, 29, 0.08); }
.secrets { list-style: none; margin: 0; padding: 0; }
.secrets li { display: flex; align-items: center; gap: 8px; }
.secrets code { font: 600 0.8125rem var(--mono, ui-monospace, monospace); background: var(--ground); padding: 2px 8px; border-radius: 6px; }
.addrow { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.prow { display: grid; grid-template-columns: 32px minmax(0, 1.3fr) minmax(0, 1.1fr) 70px minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 4px 12px; align-items: center; }
.prow:not(:has(.av)) { grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1.4fr) minmax(0, 1.4fr); }
.prow .what span { white-space: normal; }
.pdeps { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.pdeps .kind { width: auto; }
.pext, .pmail { font-size: 0.8125rem; color: var(--grey-ink); min-width: 0; }
.hlabel { flex-basis: 100%; font-size: 0.75rem; font-weight: 700; color: var(--muted); padding: 4px 8px 0; }
.hgroup { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 0 8px; }
.tform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 760px; }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld label, .fld legend { font-size: 0.8125rem; font-weight: 600; color: var(--grey-ink); padding: 0; }
.fld input[type="text"], .fld input[type="email"], .fld input[type="date"], .fld select { min-height: 44px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 10px; font-size: 0.875rem; }
.fld input[aria-invalid="true"] { border-color: var(--red); }
.fld .err { color: var(--red); font-size: 0.8125rem; }
.chk { gap: 0 16px; flex-direction: row; flex-wrap: wrap; align-items: center; }
.chk legend { flex-basis: 100%; margin-bottom: 4px; }
.chk label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 500; font-size: 0.875rem; }
.chk input { width: 18px; height: 18px; accent-color: var(--blue-btn); margin: 0; }
.formact { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.formact .link { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 899px) {
  .wfrow { grid-template-columns: minmax(0, 1fr); }
  .prow, .prow:not(:has(.av)) { grid-template-columns: minmax(0, 1fr); }
  .prow .av { display: none; }
  .logrow, .cbrow { grid-template-columns: minmax(0, 1fr) auto; }
  .logrow .ld, .logrow .what { grid-column: 1 / -1; }
  .tform { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pop { right: 0; width: min(260px, 80vw); }
  .tick { margin-left: 0; width: 40px; }
}
@media (pointer: coarse) { .switch { min-height: 44px; width: 52px; border-radius: 22px; } .switch i { top: 10px; } .schip { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .call, .side, .skel i { animation: none; transition: none; } }

/* Branded email preview (table-like, Outlook-safe look, built with classes) */
.bctl { display: flex; gap: 20px; margin: 8px 0; }
.bctl .link[aria-pressed="true"] { text-decoration: underline; color: var(--ink); font-weight: 700; }
.bmail { max-width: 640px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; color: #212121; font: 0.9375rem/1.5 "Segoe UI", Arial, sans-serif; }
.bm-head { padding: 16px 24px; background: #212121; min-height: 56px; display: flex; align-items: center; }
.bmail[data-brand="bw"] .bm-head { background: #1480C4; }
.bm-logo.wd { height: 24px; width: auto; } .bm-logo.bw { height: 56px; width: auto; }
.bm-alt { color: #fff; font-weight: 700; font-size: 1.125rem; }
.bm-body { padding: 24px; }
.bm-body p { margin: 0 0 12px; }
.bm-sig { display: flex; flex-direction: column; margin-top: 4px; font-size: 0.875rem; color: #3B3B3B; }
.bm-sig b { color: #212121; }
.bm-foot { padding: 12px 24px; border-top: 1px solid #E6E6E6; font-size: 0.75rem; color: #6D6D6D; }
.bm-foot span { color: #6D6D6D; }
.bmail.dark { background: #1F1F1F; color: #E8E8E8; border-color: #444; }
.bmail.dark .bm-sig, .bmail.dark .bm-sig b { color: #E8E8E8; }
.bmail.dark .bm-foot { border-top-color: #444; color: #B0B0B0; background: #1F1F1F; }
.bmail.dark .bm-foot span { color: #B0B0B0; }
.bmail.dark mark.ph { background: #2E3F5F; color: #CFE0FF; }
@media (max-width: 720px) { .bm-body { padding: 16px; } .bm-head { padding: 12px 16px; } }
.toast button { white-space: nowrap; } .toast span { min-width: 0; }

/* ---------- Copilot mascot ---------- */
.mas { display: inline-block; flex: none; line-height: 0; vertical-align: middle; }
.mas svg { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; }
.m-sm { width: 32px; height: 32px; } .m-md { width: 56px; height: 56px; } .m-lg { width: 120px; height: 120px; }
.heado { display: flex; align-items: center; gap: 12px; }
.heado > div { min-width: 0; }
.stripl { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.askhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.askhead label { margin: 0; }
.eyebrow .mas { margin: -6px 0; }
.alertrow { display: flex; align-items: center; gap: 8px; }
.thinkbox { display: flex; gap: 12px; align-items: flex-start; }
.thinkbox > div { min-width: 0; flex: 1; }
.hmas { display: flex; align-items: center; gap: 8px; }
.answer .who .mas { margin-right: 4px; }
.state .mas { display: block; margin: 0 auto 8px; }
.toast .mas { margin-right: -4px; }
.workcard { display: flex; align-items: center; gap: 12px; }
.cbrow .lt .mas { display: block; }
.lm { width: 32px; height: 32px; border-radius: 8px; background: var(--divider); color: var(--grey-ink); font-weight: 800; display: inline-grid; place-items: center; flex: none; }
.cnline .row .mas { flex: none; }
.posegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pose { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.posebox { align-self: center; margin-bottom: 8px; }
.pose h2 { font-size: 1rem; }
.pose .link { min-height: 32px; display: inline-flex; align-items: center; }
@media (pointer: coarse) { .pose .link { min-height: 44px; } }

@keyframes mwave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 70% { transform: rotate(4deg); } }
@keyframes mnudge { 0% { transform: scale(0.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes mhop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
@keyframes mshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes mring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes mtilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.mas.wave svg { animation: mwave 0.9s ease-in-out 1; }
.mas.nudge svg { animation: mnudge 0.26s ease-out 1; }
.mas.hop svg { animation: mhop 0.45s ease-out 1; }
.mas.shake svg { animation: mshake 0.2s linear 2; }
.mas.ring svg { animation: mring 1.6s ease-in-out infinite; }
.mas.ring3 svg { animation: mring 1.6s ease-in-out 2; }
.mas.tilt svg { animation: mtilt 0.9s ease-in-out infinite; }
.mas.tilt3 svg { animation: mtilt 0.9s ease-in-out 3; }
/* Point at Copilot and it reacts once: a wave when it's saying hello, a small hop otherwise.
   Mouse only (no hover on touch), and never while it's ringing or working. */
@media (hover: hover) {
  .mas:not(.ring):not(.tilt):hover svg { animation: mhop 0.45s ease-out 1; }
  .mas[data-pose="hello"]:not(.ring):not(.tilt):hover svg { animation: mwave 0.9s ease-in-out 1; }
  .mas:hover { cursor: default; }
}
@media (prefers-reduced-motion: reduce) { .mas svg, .mas.wave svg, .mas.nudge svg, .mas.hop svg, .mas.shake svg, .mas.ring svg, .mas.ring3 svg, .mas.tilt svg, .mas.tilt3 svg { animation: none !important; } }

.lm.fw { background: #3A3A96; color: #fff; }
.lmimg { background: #fff; object-fit: contain; border-radius: 8px; }
.cnline .what .sub { font-size: 0.8125rem; color: var(--muted); }
.clogo { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: #fff; }
.clogo img { width: auto; display: block; }
.clogo .h20 { height: 20px; } .clogo .h24 { height: 24px; }
.sidesearch[hidden] { display: none; }

/* My day summary: calls today and unassigned emails */

/* ---------- the Assistant: drawing (shared by Mascot.svg in js/mascot.js and the live component in js/assist.js) ----------
   Level of detail: .m-xs/.m-sm (static) or .pg-lod-xs/.pg-lod-sm (live) switch to fewer, thicker slats, bigger eyes, no cord/arms. */
.m-svg { overflow: visible; }
.pg-halo-w { opacity: var(--m-halo, 1); }
.pg-tube, .pg-hem { fill: var(--m-rail); }
.pg-capr, .pg-brackets rect { fill: var(--m-cap); }
.pg-slat, .pg-hem { stroke: var(--m-edge); stroke-width: 0.55; }
.pg-sa { stop-color: var(--m-fabric); } .pg-sb { stop-color: var(--m-slat-lo); }
.pg-scan { fill: #FFFFFF; }
.pg-eo { fill: var(--m-ink); } .pg-gl { fill: #FFFFFF; }
.pg-eh, .pg-es, .pg-brow { fill: none; stroke: var(--m-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pg-brow { stroke-width: 1.7; }
.pg-mouth { fill: var(--m-ink); stroke: var(--m-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-cheek { fill: var(--m-cheek); }
.pg-arm { fill: none; stroke: var(--m-arm); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .pg-hand { fill: var(--m-arm); }
.pg-clip rect:first-child { fill: var(--m-accent); } .pg-clip .pg-clipp { fill: var(--m-chain); }
.pg-clip path { fill: none; stroke: #FFFFFF; stroke-width: 0.9; stroke-linecap: round; }
.pg-cordl { stroke: var(--m-chain); stroke-width: 1.3; stroke-linecap: round; } .pg-bead { fill: var(--m-chain); }
.pg-shadow { fill: var(--m-shadow); }
.pg-glasses { fill: none; stroke: var(--m-ink); stroke-width: 1; stroke-linecap: round; }
.pg-zs path { fill: none; stroke: var(--m-accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pg-q path { fill: none; stroke: var(--m-warn); stroke-width: 1.7; stroke-linecap: round; } .pg-q circle { fill: var(--m-warn); }
.pg-set-lo { display: none; }
.m-xs .pg-set-hi, .m-sm .pg-set-hi, .pg-lod-xs .pg-set-hi, .pg-lod-sm .pg-set-hi { display: none; }
.m-xs .pg-set-lo, .m-sm .pg-set-lo, .pg-lod-xs .pg-set-lo, .pg-lod-sm .pg-set-lo { display: inline; }
.m-xs .pg-detail, .m-sm .pg-detail { display: none; }
.m-md .pg-brackets, .pg-lod-md .pg-brackets { display: none; }
.m-xs .pg-lodw, .m-sm .pg-lodw, .pg-lod-xs .pg-lodw, .pg-lod-sm .pg-lodw { transform: scale(1.2); transform-origin: 50px 56px; }
.m-xs .pg-eh, .m-xs .pg-es, .m-xs .pg-mouth, .pg-lod-xs .pg-eh, .pg-lod-xs .pg-es, .pg-lod-xs .pg-mouth { stroke-width: 2.8; }
.m-xs .pg-slat, .m-xs .pg-hem, .pg-lod-xs .pg-slat, .pg-lod-xs .pg-hem { stroke-width: 0.6; }
.m-xs .pg-brow, .m-sm .pg-brow, .pg-lod-xs .pg-brow, .pg-lod-sm .pg-brow { stroke-width: 2.2; }
/* Static pose cues on the old "busy" classes (core.js): the light breathes while the Assistant is working */
@keyframes pgpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
.mas.tilt .pg-glowfill, .mas.tilt3 .pg-glowfill { animation: pgpulse 2.4s ease-in-out infinite; }
.mas.tilt3 .pg-glowfill { animation-iteration-count: 3; }
@media (prefers-reduced-motion: reduce) { .mas .pg-glowfill { animation: none !important; } }
/* Live instance (js/assist.js) */
.assist { display: inline-block; position: relative; flex: none; line-height: 0; vertical-align: middle; }
.assist > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* =====================================================================
   Live dashboard (sign-in, shell extras, KAM Requests)
   ===================================================================== */
body.live { --strip: 0px; }
.kind.good i { background: var(--good); } .kind.grey i { background: #9AA8A1; }
.kind:empty { gap: 0; }
.boot { min-height: 100vh; background: var(--ground); }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; background: var(--chip-bg); color: var(--grey-ink); font-size: 0.75rem; font-weight: 600; }
.hint { font-size: 0.75rem; color: var(--muted); }
.danger { color: var(--red) !important; }
.bad { color: var(--red); }
.wide { grid-column: 1 / -1; }
.flab { font-size: 0.8125rem; font-weight: 600; color: var(--grey-ink); }
.chkl { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 0.875rem; cursor: pointer; }
.chkl input { width: 18px; height: 18px; accent-color: var(--blue-btn); margin: 0; }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 0.8125rem; gap: 4px; }
.btn.wide { width: 100%; }
.sechd { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fld textarea, .fld input[type="number"], .fld input[type="tel"], .inform textarea, .inform select, .inform input[type="text"], .composer textarea, .composer input[type="text"], .fld select { width: 100%; min-height: 44px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 8px 10px; font-size: 0.875rem; color: var(--ink); }
.fld input[type="text"], .fld input[type="email"], .fld input[type="date"] { width: 100%; color: var(--ink); }
.fld textarea, .composer textarea { resize: vertical; line-height: 1.5; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .composer textarea:focus, .inform textarea:focus { outline: 2px solid var(--blue-btn); outline-offset: 1px; border-color: var(--blue-btn); }
.fld .err { color: var(--red); font-size: 0.8125rem; }

/* Message boxes (sign-in and the Two-step sign-in page) */
.signmsg { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--blue-bg); color: var(--ink); font-size: 0.875rem; width: 100%; }
.signmsg.bad { background: var(--red-bg); color: var(--red); }
.btn .ms { width: 18px; height: 18px; } .ms1 { fill: #F25022; } .ms2 { fill: #7FBA00; } .ms3 { fill: #00A4EF; } .ms4 { fill: #FFB900; }

/* Sidebar extras */
.navlink .navbadge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); color: var(--surface); font-size: 0.75rem; font-weight: 800; display: inline-grid; place-items: center; }
@media (min-width: 900px) and (max-width: 1279px) { .navlink .navbadge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: var(--fs-12); } .userbox .whotxt, .userbox .umenu { display: none; } .userbox .who { flex-direction: column; gap: 6px; } }
.userbox { border-bottom: 1px solid var(--divider); padding-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.userbox .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.userbox .whotxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.userbox .who b { font-size: 0.875rem; } .userbox .who small { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
.ubrow { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--muted); }
.ubrow select { min-height: 32px; border: 1px solid var(--input-strong); border-radius: 8px; background: var(--surface); padding: 0 8px; font-size: 0.8125rem; color: var(--ink); }
.userbox .link.quiet { font-size: 0.8125rem; }

/* My day: three stats */
.setup { padding: 40px 24px; }

/* KAM sub navigation */
.subnav { display: flex; gap: 0 20px; border-bottom: 1px solid var(--divider); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { min-height: 40px; display: inline-flex; align-items: center; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; flex: none; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue-btn); }

/* Quick actions */
.qagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.qagrid.big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.qabtn { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; }
.qabtn:hover { border-color: var(--blue-btn); background: var(--blue-tint); }
.qabtn .ic { width: 24px; height: 24px; color: var(--blue-btn); }
.qagrid.big .qabtn { min-height: 88px; font-size: 1rem; }

/* Attention and updates lists */
.attl, .updates { list-style: none; margin: 8px 0 0; padding: 0; }
.attl li { border-top: 1px solid var(--divider); } .attl li:first-child { border-top: 0; }
.attl a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.attl a:hover .go { text-decoration: underline; }
.attl .what { flex: 1; min-width: 0; display: flex; flex-direction: column; } .attl .what span { font-size: 0.8125rem; color: var(--muted); }
.attl .go { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-weight: 600; font-size: 0.875rem; flex: none; }
.updates li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--divider); padding: 2px 0; align-items: center; }
.updates li:first-child { border-top: 0; }
.updates span { font-size: 0.75rem; color: var(--muted); flex: none; }
.updates .link.quiet { text-align: left; }

/* Request tables */
.rtable { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); overflow: hidden; }
.rhead, .rrow { display: grid; grid-template-columns: 130px minmax(0, 1.6fr) 150px 170px minmax(0, 1fr) 100px; gap: 4px 12px; align-items: center; padding: 10px 16px; }
.rtable.q .rhead, .rtable.q .rrow { grid-template-columns: 150px minmax(0, 1.5fr) minmax(0, 1fr) 140px 130px 150px minmax(0, 1fr); }
.rhead { font-size: 0.75rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--divider); }
.rrow { border-top: 1px solid var(--divider); color: var(--ink); text-decoration: none; min-height: 52px; font-size: 0.875rem; }
.rhead + .rrow { border-top: 0; }
.rrow:hover { background: var(--row-hover); }
.rrow.attn { box-shadow: inset 3px 0 0 var(--red); }
.rrow span { min-width: 0; }
@media (max-width: 899px) {
  .rhead { display: none; }
  .rrow, .rtable.q .rrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; }
  .rrow span[data-l]:nth-child(2) { text-align: right; }
}

/* Request page */
.altlist { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--divider); border-radius: var(--r-ctl); padding: 4px 12px; max-width: 360px; }
.altlist .link { min-height: 40px; }
.inform { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); display: flex; flex-direction: column; gap: 10px; max-width: 520px; background: var(--surface); }
.inform .formact { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
form.inline { display: flex; gap: 8px; align-items: center; }
form.inline input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 10px; color: var(--ink); }
.itable { display: flex; flex-direction: column; }
.irow { display: grid; grid-template-columns: 80px minmax(0, 1fr) 48px minmax(120px, auto); gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--divider); align-items: center; font-size: 0.875rem; }
.irow:first-child { border-top: 0; }
.irow.head { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.hist4 .irow { grid-template-columns: 110px minmax(0, 1fr) 48px 140px; }
.irow .code, .citem .code, .cart .code, .kitl .code, .row .code { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--grey-ink); font-size: 0.8125rem; }
.irow .nm small { display: block; color: var(--muted); font-size: 0.75rem; }
.irow .qty { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.irow > span:last-child { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
@media (max-width: 720px) { .irow, .hist4 .irow { grid-template-columns: 64px minmax(0, 1fr) 40px; } .irow > span:last-child { grid-column: 2 / -1; } .hist4 .irow > span:last-child { grid-column: 2 / -1; } }
.tline { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.tline li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.tline time { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.tline .tday { display: block; font-size: 0.75rem; font-weight: 700; color: var(--grey-ink); padding-top: 10px; }
.tline .tday:first-child { padding-top: 0; }
.thread { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; }
.msg .mb { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--ground); }
.msg.me .mb { background: var(--blue-tint); }
.msg.internal .mb { background: var(--amber-bg); }
.mh { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.mh time { margin-left: auto; }
.tagi { font-size: 0.75rem; font-weight: 700; color: var(--amber); }
.mention { color: var(--blue-ink); }
.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.file { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.8125rem; }
.thumb img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.composer { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--divider); padding-top: 12px; }
.crow { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.fileb { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px dashed var(--input); border-radius: var(--r-ctl); cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--grey-ink); }
.fileb:focus-within { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
.fileb input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.composer .formact { display: flex; justify-content: flex-end; }

/* New request builders */
.step .stepn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-ink); font-size: 0.75rem; font-weight: 800; margin-right: 8px; }
.step .sechead { display: flex; align-items: center; }
.searchbar.big { max-width: none; min-height: 52px; font-size: 1rem; }
.picklist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--divider); border-radius: var(--r-ctl); overflow: hidden; }
.picklist li + li { border-top: 1px solid var(--divider); }
.pick { width: 100%; text-align: left; background: var(--surface); border: 0; padding: 10px 12px; min-height: 52px; cursor: pointer; display: flex; flex-direction: column; color: var(--ink); }
.pick:hover { background: var(--row-hover); } .pick span { font-size: 0.8125rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.cgrp { flex-basis: 100%; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-top: 6px; }
.cchip { min-height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--grey-ink); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.cchip:hover { border-color: var(--input); color: var(--ink); }
.cchip[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue-btn); color: var(--blue-ink); }
.kits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.kit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 8px 12px; border: 1px solid var(--divider); border-radius: var(--r-ctl); }
.kit .small { flex: 1 1 200px; } .kit .link { min-height: 32px; }
.catlist { list-style: none; margin: 0; padding: 0; }
.citem { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--divider); align-items: center; }
.citem:first-child { border-top: 0; }
.citem.off { opacity: 0.7; }
.citem .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.citem .nm small { font-size: 0.75rem; color: var(--muted); }
.cmeta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.75rem; }
.cmeta .kind, .cmeta .flag { font-size: 0.75rem; }
.warnrow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 6px 8px; margin-top: 4px; border-radius: 8px; background: var(--amber-bg); }
.warnrow .kind { white-space: normal; color: var(--amber); }
.stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.stepper .n { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cartcard { position: sticky; top: 16px; align-self: start; }
.cart { list-style: none; margin: 8px 0; padding: 0; }
.cart li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 4px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--divider); font-size: 0.875rem; }
.cart li:first-child { border-top: 0; }
.cart li.off .nm { color: var(--muted); }
.cart .nm small { display: block; font-size: 0.75rem; }
.qtyin { width: 64px; min-height: 36px; border: 1px solid var(--input-strong); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); }
.approvalnote { padding: 8px 10px; border-radius: 8px; background: var(--blue-bg); color: var(--ink); margin-top: 8px; }
.submitbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 0.875rem; font-weight: 500; background: var(--surface); }
.seg input:checked + span { border-color: var(--blue-btn); background: var(--blue-tint); color: var(--blue-ink); font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tcard { position: relative; }
.tcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tcard span { display: flex; align-items: center; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-weight: 600; background: var(--surface); }
.tcard input:checked + span { border-color: var(--blue-btn); background: var(--blue-tint); color: var(--blue-ink); }
.tcard input:focus-visible + span { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
.blindwrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.diagram { width: 100%; max-width: 260px; height: auto; }
.dg-line { stroke: var(--grey-ink); stroke-width: 1; }
.dg-fabric { fill: #E9E3D7; stroke: #CFC6B6; stroke-width: 1; }
.dg-fabric.mesh { fill: #DCD8CF; }
.dg-fold { stroke: #CFC6B6; stroke-width: 1; }
.dg-chain { stroke-width: 2.5; stroke-dasharray: 0.01 4; stroke-linecap: round; fill: none; }
.dg-cord { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.dg-motor { fill: var(--grey-ink); }
.dg-dim { stroke: var(--muted); stroke-width: 1; fill: none; }
.dg-text { fill: var(--muted); font: 600 var(--fs-12) var(--font); text-anchor: middle; }
.dg-text.start { text-anchor: start; }
.spec { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; padding: 12px; border-radius: var(--r-ctl); background: var(--ground); min-width: 0; flex: 1 1 220px; }
.spec b { font-size: 0.8125rem; letter-spacing: 0.04em; margin-bottom: 4px; }
.cols > .stack > .step + .step, .stack > .step { margin: 0; }
.grph { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.catsec { margin-bottom: 12px; }
.row.static { cursor: default; }
.kitl { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.875rem; }
.kitl li { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--divider); }
.kitl li:first-child { border-top: 0; }
.cnrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.cnrow:first-child { border-top: 0; }
.cnrow .what { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cnrow .what span { font-size: 0.8125rem; color: var(--muted); }
.cnrow .lm .ic { width: 18px; height: 18px; }
.prow2 .pdeps { flex: 0 1 220px; } .prow2 .pext { width: 70px; flex: none; font-size: 0.8125rem; } .prow2 .proles { flex: 0 1 200px; }
@media (max-width: 899px) { .prow2 { flex-wrap: wrap; } .prow2 .what { flex-basis: calc(100% - 50px); } .prow2 .pdeps, .prow2 .proles { flex-basis: 100%; } }
.addrow .searchbar { margin-bottom: 0; flex: 1 1 320px; }
.addrow { gap: 8px 16px; margin-bottom: 16px; }
.addrow .link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
@media (max-width: 1099px) { .cartcard { position: static; } }
/* Email Wizard */
button.qabtn { font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.qabtn.on { border-color: var(--blue-btn); background: var(--blue-tint); color: var(--blue-ink); }
.tform.one { grid-template-columns: minmax(0, 1fr); }
.bsubj { margin-bottom: 8px; font-size: 0.875rem; }
@media (min-width: 1100px) { .cols.ew { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.fld .stepper { align-self: flex-start; }

/* Colour behind initials (white text, all at least 4.5:1) */
.av.c-blue, .sw.c-blue { background: #2C5599; } .av.c-green, .sw.c-green { background: #2F6B55; } .av.c-teal, .sw.c-teal { background: #0F6670; }
.av.c-purple, .sw.c-purple { background: #6B3FA0; } .av.c-red, .sw.c-red { background: #A1251B; } .av.c-rust, .sw.c-rust { background: #9A4415; }
.av.c-brown, .sw.c-brown { background: #6E4B1F; } .av.c-charcoal, .sw.c-charcoal { background: #3E4441; }
.av[class*=" c-"] { color: #FFFFFF; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { position: relative; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.sw.none { background: var(--divider); }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.sw:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.sw:has(input:focus-visible) { outline: 2px solid var(--blue-btn); outline-offset: 4px; }
@media (pointer: coarse) { .sw { width: 40px; height: 40px; } }

.maillink { width: 100%; margin-top: 16px; text-align: left; border-top: 1px solid var(--divider); padding-top: 12px; }
.maillink summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--grey-ink); min-height: 32px; }
.maillink form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.maillink label { font-size: 0.8125rem; font-weight: 600; color: var(--grey-ink); }
.maillink input { min-height: 44px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 10px; color: var(--ink); font-size: 0.9375rem; }

.kind.c-blue i { background: #2C5599; } .kind.c-green i { background: #2F6B55; } .kind.c-teal i { background: #0F6670; } .kind.c-purple i { background: #6B3FA0; }
.kind.c-red i { background: #A1251B; } .kind.c-rust i { background: #9A4415; } .kind.c-brown i { background: #6E4B1F; } .kind.c-charcoal i { background: #3E4441; }
.sw.tiny { width: 14px; height: 14px; flex: none; cursor: default; }

/* Team: contact actions show on hover or keyboard focus; on touch they're always there */
.team li { position: relative; }
.team .tl { opacity: 0; transition: opacity 0.1s; }
.team li:hover .tl, .team li:focus-within .tl { opacity: 1; }
.team .tl .iconbtn { width: 32px; height: 32px; }
@media (hover: none), (pointer: coarse) { .team .tl { opacity: 1; } .item > .acts:not(.open) { display: flex; opacity: 1; pointer-events: auto; position: static; padding: 0 12px 8px; background: transparent; } }
.list .pad { padding: 16px; }
.cchip { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Design pass ---------- */
.userbox .who { gap: 10px; }
.userbox .whotxt { flex: 1; }
.umenu { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--divider); border-radius: var(--r-ctl); background: var(--ground); }
.ubrow.col { flex-direction: column; align-items: flex-start; gap: 6px; }
@media (min-width: 1100px) { .qagrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qagrid.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item:has(> .acts) > .row.prow2 { padding-right: 136px; }
@media (hover: none), (pointer: coarse) { .item:has(> .acts) > .row.prow2 { padding-right: 16px; } }
.searchrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.searchrow .searchbar { flex: 1 1 320px; margin-bottom: 0; }
.catsel { min-height: 48px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); padding: 0 10px; font-size: 0.875rem; max-width: 100%; }
.searchrow .catsel { min-height: 52px; flex: 0 1 260px; }
.addrow .catsel { flex: 0 1 260px; }
.kits { margin-top: 4px; }
.emptyhint { padding: 12px 0; }
.copts summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--grey-ink); min-height: 32px; display: flex; align-items: center; }
.copts[open] { display: flex; flex-direction: column; gap: 8px; }
.copts[open] summary { margin-bottom: 0; }

/* Signed-in person and status */
.avwrap { position: relative; display: inline-flex; flex: none; }
.avwrap > .pdot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid var(--surface); }
.pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.pdot.active { background: var(--good); }
.pdot.busy { background: var(--red); }
.pdot.away { background: var(--amber-bar); }
.pdot.offline { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.avwrap > .pdot.offline { background: var(--surface); }
.pdot.leave { background: var(--blue, #4471B8); }
.userbox .pline { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.userbox .pline .pdot { width: 8px; height: 8px; border: 0; }
.umenu .umail { overflow-wrap: anywhere; }
.umenu fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.umenu legend { font-size: 0.8125rem; color: var(--muted); padding: 0; margin-bottom: 6px; }
.pseg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.pbtn { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.pbtn:hover { background: var(--row-hover); }
.pbtn.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 700; }
.umenu input[type=text] { width: 100%; min-height: 34px; border: 1px solid var(--input-strong); border-radius: 8px; background: var(--surface); padding: 0 8px; font: inherit; font-size: 0.8125rem; color: var(--ink); margin-top: 6px; }

/* Remakes & Returns */
.rtable.c .rhead, .rtable.c .rrow { grid-template-columns: 90px 100px minmax(0, 1.4fr) minmax(0, 1.2fr) 170px 100px 110px; }
@media (max-width: 899px) { .rtable.c .rrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lineedit, .caseline, .racard { border: 1px solid var(--divider); border-radius: var(--r-ctl); padding: 12px 14px; margin-top: 10px; background: var(--surface); }
.lineedit .sechd, .caseline .sechd, .racard .sechd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.tform.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
@media (max-width: 599px) { .tform.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .span2 { grid-column: 1 / -1; } }
.changed { color: var(--red); background: var(--red-bg); border-radius: 6px; padding: 4px 8px; }
.ranum { font-size: 1.375rem; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.radlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.evid { margin: 4px 0 8px; color: var(--muted); }
.evid.req { color: var(--amber); background: var(--amber-bg); padding: 6px 10px; border-radius: 6px; }
.inform.wide2 { max-width: 760px; }

/* Profile photos */
.av.pic { background: var(--divider); overflow: hidden; padding: 0; }
.av.pic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.av.xl { width: 64px; height: 64px; font-size: 1.375rem; }
.photopick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.photoacts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.umenu .photopick .av.xl { width: 48px; height: 48px; font-size: 1.0625rem; }

/* =====================================================================
   Service Centre OS pass: sidebar, My Day, command bar, call card, phones
   ===================================================================== */
.m-xs { width: 22px; height: 22px; }
.card { border-color: var(--line); box-shadow: var(--sh-1); }

/* Sidebar */
.side { background: var(--side); border-right-color: var(--line); gap: 10px; }
.navlabel { margin: 16px 10px 4px; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.06em; color: var(--muted); opacity: 0.85; }
#nav > .navlabel:first-child { margin-top: 6px; }
.navlink { min-height: 38px; padding: 0 10px; border-radius: 10px; font-weight: 500; transition: background-color 0.12s ease, color 0.12s ease; }
.navlink svg { color: var(--muted); transition: color 0.12s ease; }
.navlink:hover { background: rgba(22, 35, 29, 0.045); }
.navlink:hover svg { color: var(--grey-ink); }
.navlink[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.navlink[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue-btn); }
.navlink[aria-current="page"] svg { color: var(--blue-btn); }
.navbadge { background: var(--chip-bg); color: var(--grey-ink); font-weight: 700; }
.navlink[aria-current="page"] .navbadge { background: var(--blue-tint); color: var(--blue-ink); }
button.sidesearch { width: 100%; min-height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 10px; color: var(--muted); font: inherit; font-size: 0.875rem; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: var(--sh-1); }
button.sidesearch span { flex: 1; text-align: left; }
button.sidesearch:hover { color: var(--ink); border-color: var(--input); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navlink:hover { background: rgba(255, 255, 255, 0.05); } }
:root[data-theme="dark"] .navlink:hover { background: rgba(255, 255, 255, 0.05); }
@media (min-width: 900px) and (max-width: 1279px) {
  .navlabel { display: block; font-size: 0; width: 24px; margin: 8px auto; border-top: 1px solid var(--line); }
  #nav > .navlabel:first-child { display: none; }
  .navlink[aria-current="page"]::before { left: -8px; }
  button.sidesearch { width: 44px; justify-content: center; padding: 0; }
  button.sidesearch span, button.sidesearch kbd { display: none; }
}

/* My Day layout */
.day { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 28px; max-width: 1240px; margin: 0 auto; padding: 8px 8px 48px; align-items: start; }
.daymain { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1920px) { .day { max-width: 1320px; gap: 36px; padding-top: 20px; } }
@media (max-width: 1099px) { .day { grid-template-columns: minmax(0, 1fr); } }

/* AssistStatus */
.dayhead h1 { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.assist { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--grey-ink); font-size: 0.9375rem; }
.assist b { font-weight: 700; color: var(--ink); margin-right: 2px; }

/* CommandBar */
.cmdbar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.9375rem; cursor: text; box-shadow: var(--sh-1); transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.cmdbar span { flex: 1; text-align: left; }
.cmdbar:hover { border-color: var(--input); box-shadow: var(--sh-2); }
kbd { font: 600 var(--fs-12) var(--font); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--surface2); white-space: nowrap; }

/* StatCard */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.statc { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--sh-1); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; min-width: 0; }
.statc:hover { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--input); }
.statc .sk { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.statc .sk svg { width: 15px; height: 15px; }
.statc b { font-size: 1.75rem; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.statc .sm { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--muted); min-width: 0; }
.statc .sm i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.statc.t-good { background: var(--tint-good); } .statc.t-good .sm i { background: var(--good); }
.statc.t-amber { background: var(--tint-amber); } .statc.t-amber .sm i { background: var(--amber-bar); } .statc.t-amber .sm { color: var(--amber); }
.statc.t-red { background: var(--tint-red); } .statc.t-red .sm i { background: var(--red); } .statc.t-red .sm { color: var(--red); }
.statc.t-blue .sm i { background: var(--blue-btn); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* WorkQueue / QueueItem */
.wq { padding: 0; overflow: hidden; }
.wqh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; }
.wqh h2 { font-size: 1.0625rem; font-weight: 750; color: var(--ink); }
.ql { list-style: none; margin: 0; padding: 0 0 4px; }
.qi { position: relative; display: flex; align-items: center; gap: 8px; padding-right: 16px; border-top: 1px solid var(--divider); transition: background-color 0.12s ease; }
.qi:hover, .qi.sel { background: var(--row-hover); }
.qi.p-red::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.qmain { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 8px 13px 20px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.qic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface2); border: 1px solid var(--divider); color: var(--muted); }
.qic svg { width: 17px; height: 17px; }
.p-red .qic { color: var(--red); background: var(--tint-red); } .p-amber .qic { color: var(--amber); background: var(--tint-amber); } .p-blue .qic { color: var(--blue-ink); background: var(--tint-blue); }
.qtxt { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.qk { font-size: 0.75rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.qk svg { width: 14px; height: 14px; }
.qtxt b { font-size: 0.9375rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs { font-size: 0.8125rem; color: var(--grey-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qw { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.qw.slow { color: var(--amber); } .qw.late { color: var(--red); }
.qdot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }
.qact { flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--sh-1); transition: background-color 0.12s ease, border-color 0.12s ease; }
.qact:hover { border-color: var(--input); background: var(--surface2); }
.qact:active { transform: translateY(1px); }
.qmore { display: block; width: 100%; min-height: 40px; border: 0; border-top: 1px solid var(--divider); background: none; color: var(--grey-ink); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.qmore:hover { background: var(--row-hover); color: var(--ink); }
.empty-sm { display: flex; align-items: center; gap: 14px; padding: 16px 20px 20px; }
.empty-sm b { display: block; font-size: 0.9375rem; }
.empty-sm span { font-size: 0.875rem; }
.card.empty-sm { padding: 18px 20px; }
@media (max-width: 640px) {
  .qmain { grid-template-columns: 30px minmax(0, 1fr); padding-left: 14px; }
  .qmain .qw { grid-column: 2; }
  .qic { width: 30px; height: 30px; }
  .qi { padding-right: 12px; }
}

/* ActivityFeed */
.feed { padding: 0 4px; }
.feed h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.feed ol { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 0.8438rem; color: var(--grey-ink); }
.feed time { color: var(--muted); font-variant-numeric: tabular-nums; }

/* TeamPanel / TeamMember */
.teamp { position: sticky; top: 16px; background: var(--side); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 10px 10px; min-width: 0; }
.tph { display: flex; align-items: baseline; justify-content: space-between; padding: 0 8px 8px; }
.tph h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tml { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.tmb { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) 8px; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color 0.12s ease; }
.tmb:hover { background: rgba(22, 35, 29, 0.045); }
.tm.open .tmb { background: var(--surface); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.tmb .av { width: 26px; height: 26px; font-size: var(--fs-12); }
.tmn { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tmn b { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmn span { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmx { padding: 8px 8px 10px 44px; }
.tmx dl { margin: 0 0 8px; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 3px 8px; font-size: 0.7812rem; }
.tmx dt { color: var(--muted); } .tmx dd { margin: 0; }
.tma { display: flex; flex-wrap: wrap; gap: 6px; }
.tma a { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.7812rem; font-weight: 600; text-decoration: none; }
.tma a:hover { border-color: var(--input); }
.tma svg { width: 14px; height: 14px; }
.teamp .qmore { border: 0; border-radius: 10px; margin-top: 4px; }
.tpl { display: block; padding: 8px 8px 2px; font-size: 0.7812rem; color: var(--muted); text-decoration: none; }
.tpl:hover { color: var(--ink); text-decoration: underline; }
.pdot.oncall { background: var(--blue-btn); }
.pdot.leave { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tmb:hover { background: rgba(255, 255, 255, 0.05); } }
:root[data-theme="dark"] .tmb:hover { background: rgba(255, 255, 255, 0.05); }
@media (max-width: 1099px) { .teamp { position: static; } }

/* Peek panel */
.peekscrim { position: fixed; inset: 0; z-index: 74; }
.peek { position: fixed; z-index: 75; top: 16px; right: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px)); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-pop); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; animation: peekin 0.16s ease-out; }
.peekh { display: flex; align-items: center; justify-content: space-between; }
.peek h2 { font-size: 1.25rem; font-weight: 750; }
.peek .facts { margin-top: 8px; }
.peekf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
@keyframes peekin { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .peek { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 80vh; } }

/* Command bar dialog */
.kscrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); animation: fadein 0.12s ease-out; }
.cmdk { position: fixed; z-index: 91; top: 12vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-pop); overflow: hidden; animation: kin 0.14s ease-out; }
.kin { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--divider); color: var(--muted); }
.kin input { flex: 1; min-width: 0; min-height: 56px; border: 0; outline: none; background: none; font-size: 1.0625rem; color: var(--ink); }
#klist { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 460px); overflow-y: auto; }
.kg { padding: 10px 10px 4px; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ko { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--grey-ink); }
.ko svg { color: var(--muted); }
.ko b { display: block; font-weight: 600; color: var(--ink); font-size: 0.9062rem; }
.ko small { display: block; font-size: 0.7812rem; color: var(--muted); }
.ko.on { background: var(--blue-tint); }
.ko.on svg { color: var(--blue-btn); }
.ko.ask b { font-weight: 500; }
.kempty { padding: 18px 12px; color: var(--muted); font-size: 0.875rem; }
.kfoot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--divider); font-size: 0.75rem; color: var(--muted); }
.kfoot kbd { margin-right: 3px; }
@keyframes kin { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Call card */
#callcard { position: fixed; z-index: 85; right: 20px; bottom: 20px; width: min(460px, calc(100vw - 24px)); }
.callcard { position: relative; color: #FFFFFF; border-radius: 20px; padding: 22px 22px 20px; box-shadow: var(--sh-pop); animation: ccin 0.18s ease-out; }
.callcard.bw { background: #1480C4; }
.callcard.wd { background: #212121; }
.cc-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: #FFFFFF; cursor: pointer; display: grid; place-items: center; }
.cc-x:hover { background: rgba(255, 255, 255, 0.14); }
.cc-top { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
.cc-logo { width: 88px; height: auto; margin-top: 4px; }
span.cc-logo { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.cc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 26px; }
.cc-eye { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.92; }
.cc-line { font-size: 0.9375rem; font-weight: 700; }
.cc-name { font-size: 1.5625rem; font-weight: 750; line-height: 1.2; margin-top: 4px; }
.cc-meta { font-size: 0.875rem; opacity: 0.92; font-variant-numeric: tabular-nums; }
.cc-info { font-size: 0.875rem; line-height: 1.5; margin-top: 8px; opacity: 0.95; }
.cc-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.cc-links a, .cc-links button { display: inline-flex; align-items: center; color: #FFFFFF; font: inherit; font-size: 0.875rem; font-weight: 650; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.55); min-height: 30px; }
.cc-links a:hover, .cc-links button:hover { text-decoration-color: #FFFFFF; }
.cc-form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-start; flex-wrap: wrap; }
.cc-form textarea { flex: 1; min-width: 0; border: 0; border-radius: 10px; padding: 8px 10px; background: #FFFFFF; color: #16231D; }
.cc-form button, .cc-foot button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font: inherit; font-weight: 650; cursor: pointer; }
.cc-form button:hover, .cc-foot button:hover { background: rgba(255, 255, 255, 0.26); }
.cc-rem { align-items: center; font-size: 0.875rem; }
.cc-wrap { margin-top: 16px; }
.cc-q { display: block; font-size: 0.9375rem; font-weight: 700; margin-bottom: 8px; }
.cc-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-reasons button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.14); color: #FFFFFF; font: inherit; font-size: 0.875rem; font-weight: 650; text-align: left; line-height: 1.2; cursor: pointer; }
.callcard.wd .cc-reasons button { background: rgba(255, 255, 255, 0.08); }
.cc-reasons button:hover { background: rgba(255, 255, 255, 0.2); }
.cc-reasons button[aria-pressed="true"] { background: #FFFFFF; color: #16231D; }
.cc-reasons kbd { flex: none; background: rgba(255, 255, 255, 0.2); border: 0; color: inherit; min-width: 22px; text-align: center; padding: 2px 5px; }
.cc-reasons button[aria-pressed="true"] kbd { background: rgba(0, 0, 0, 0.08); }
.cc-foot { display: flex; justify-content: flex-start; margin-top: 14px; padding-left: 106px; }
.callcard :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@keyframes ccin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .cc-top { grid-template-columns: minmax(0, 1fr); } .cc-logo { width: 72px; } .cc-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-foot { padding-left: 0; } }

/* Phones page */
.page.narrow { max-width: 980px; }
.phbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.phacts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.calllist { list-style: none; margin: 0 0 16px; padding: 0; overflow: hidden; }
.crow2 { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.crow2:first-child { border-top: 0; }
.crow2:hover { background: var(--row-hover); }
.crow2.attn::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.cdir { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface2); border: 1px solid var(--divider); color: var(--muted); }
.cdir svg { width: 16px; height: 16px; }
.cdir.out svg { transform: scaleX(-1); }
.cwho { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.cwho b { font-weight: 650; }
.cwhen { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cwhen .due { color: var(--amber); }
.cacts { display: flex; align-items: center; gap: 8px; }
.devlist { list-style: none; margin: 12px 0 0; padding: 0; }
.devlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--divider); }
.devlist li > span:first-child { display: flex; flex-direction: column; }
.keybox { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.keybox code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 0.8125rem; overflow-wrap: anywhere; }
.keybox p code { display: inline; margin: 0; padding: 1px 5px; }
@media (max-width: 720px) {
  .crow2 { grid-template-columns: 30px minmax(0, 1fr); }
  .cwhen { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .cacts { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .peek, .cmdk, .kscrim, .callcard { animation: none; }
  .statc, .statc:hover, .qact:active { transition: none; transform: none; }
  .cmdk { transform: translateX(-50%); }
}

/* Swatching */
.swlist { list-style: none; margin: 0 0 16px; padding: 0; overflow: hidden; }
.swrow { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 190px auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.swrow:first-child { border-top: 0; }
.swrow:hover { background: var(--row-hover); }
.swrow.urgent::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.swchk { display: grid; place-items: center; min-height: 36px; cursor: pointer; }
.swchk input { width: 18px; height: 18px; }
.swmain { min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1.35; }
.swmain b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swmain:hover b { text-decoration: underline; }
.swmeta { display: flex; flex-direction: column; gap: 2px; }
.swmeta .due { color: var(--red); }
@media (max-width: 720px) { .swrow { grid-template-columns: 28px minmax(0, 1fr); } .swmeta, .swrow .cacts { grid-column: 2; } }
a.tab { text-decoration: none; }
.evurls { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evurls li { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.evurls .evn { font-size: 0.8125rem; font-weight: 600; }
.evurls code { margin: 0 !important; font-size: 0.75rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal !important; }
.okc { color: var(--good); font-weight: 600; }
@media (max-width: 720px) { .evurls li { grid-template-columns: minmax(0, 1fr) auto; } .evurls code { grid-column: 1 / -1; grid-row: 2; } }
.stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats.n1 { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   Apple Design pass: response, spatial consistency, type, materials, access
   ===================================================================== */
/* Response: feedback the moment a press starts, and no tap delay on touch */
a, button, [role="button"], .switch, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn, .qact, .link.quiet, .iconbtn, .pbtn, .tab, .qabtn, .tcard, .navlink, .cmdbar, button.sidesearch, .cc-reasons button, .cc-form button, .cc-foot button, .tma a, .switch {
  transition: transform 0.1s ease-out, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.btn:active, .qact:active, .iconbtn:active, .pbtn:active, .qabtn:active, .tcard:active, .cc-reasons button:active, .cc-form button:active, .cc-foot button:active, .tma a:active, button.sidesearch:active { transform: scale(0.97); }
.navlink:active, .cmdbar:active { transform: scale(0.985); }
.statc:active { transform: translateY(0) scale(0.985); box-shadow: var(--sh-1); }
.qmain:active, .tmb:active, .swmain:active, .ko:active, .rrow:active { background: var(--row-sel); }
.link:active { opacity: 0.7; }
.switch:active i { width: 24px; } .switch[aria-checked="true"]:active i { left: 16px; }

/* Typography: tracking and leading by size, hierarchy by weight */
h1, .pagehead h1 { letter-spacing: -0.018em; line-height: 1.15; }
.dayhead h1 { letter-spacing: -0.022em; line-height: 1.12; }
.ohead h1, .peek h2 { letter-spacing: -0.015em; line-height: 1.2; }
.statc b, .ranum { letter-spacing: -0.015em; }
.cc-name { letter-spacing: -0.015em; line-height: 1.15; }
.card h2, .wqh h2, .sechead { letter-spacing: -0.005em; }
.small, .qs, .qk, .sm, .tmn span { letter-spacing: 0.005em; }
body { font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Materials: the phone top bar floats over content, frosted */
@media (max-width: 899px) {
  .topbar { background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom-color: transparent; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent); }
  .topbar b { font-size: 1.0625rem; letter-spacing: -0.01em; }
}

/* Spatial consistency: the side panel is a bottom sheet on a phone, so it rises from the bottom and drags back down by its handle */
.grab { display: none; }
@media (max-width: 640px) {
  .peek { animation-name: sheetin; padding-top: 10px; }
  .grab { display: block; width: 100%; height: 22px; margin: -4px 0 0; cursor: grab; touch-action: none; position: relative; }
  .grab::after { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px; border-radius: 999px; background: var(--input); }
}
@keyframes sheetin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
#callcard .callcard { touch-action: pan-y; cursor: default; }
.peek { touch-action: pan-y; }
.dragging { transition: none !important; cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.dragging * { pointer-events: none; }

/* Light and dark ease into each other instead of flashing */
html.theme-fade, html.theme-fade * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease !important; }

/* Features page */
.featl { list-style: none; margin: 8px 0 0; padding: 0; }
.featl li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--divider); }
.featl li:first-child { border-top: 0; }
.featl li > span { display: flex; flex-direction: column; min-width: 0; }
.featl .switch:disabled { opacity: 0.45; cursor: not-allowed; }
.dayck { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.minihead { font-size: 0.8125rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin: 18px 0 6px; }
.pegl { list-style: none; margin: 0; padding: 0; }
.pegl > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--divider); }
.pegl .pn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pegl .pn > span { display: flex; flex-direction: column; min-width: 0; }
.pegdev { grid-column: 1 / -1; list-style: none; margin: 0 0 0 34px; padding: 0; }
.pegdev li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bigcode { display: inline-block !important; font-size: 1.75rem !important; letter-spacing: 0.18em; padding: 10px 16px !important; font-weight: 700; }
@media (max-width: 640px) { .pegl > li { grid-template-columns: minmax(0, 1fr); } }

/* Accessibility: more contrast, less transparency, reduced motion */
@media (prefers-contrast: more) {
  :root { --line: color-mix(in srgb, var(--ink) 45%, var(--surface)); --divider: color-mix(in srgb, var(--ink) 28%, var(--surface)); --muted: color-mix(in srgb, var(--ink) 82%, var(--surface)); --input: color-mix(in srgb, var(--ink) 60%, var(--surface)); }
  .card, .statc, .wq, .teamp, .peek, .cmdk, .qact, .btn { border-color: var(--line); box-shadow: none; }
  .navlink[aria-current="page"] { box-shadow: 0 0 0 2px var(--ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .kscrim { background: rgba(0, 0, 0, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .qact:active, .iconbtn:active, .pbtn:active, .qabtn:active, .tcard:active, .navlink:active, .cmdbar:active, .statc:active, .tma a:active, .cc-reasons button:active { transform: none; }
  .peek { animation: fadein 0.15s ease-out; }
  html.theme-fade, html.theme-fade * { transition: none !important; }
}
.nopeg summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .nopeg summary::-webkit-details-marker { display: none; } .nopeg summary h2 { display: flex; align-items: center; gap: 8px; } .nopeg summary h2::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: -4px; transition: transform 0.15s ease; } .nopeg[open] summary h2::after { transform: rotate(225deg); margin-top: 4px; }
.fld input[type="password"], .fld input[type="time"], .fld input[type="search"] { width: 100%; min-height: 44px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); padding: 0 10px; font-size: 0.875rem; color: var(--ink); }
a.btn, a.qact { text-decoration: none; color: var(--ink); }
a.btn.primary { color: var(--on-accent); }

/* Email signature */
.sigp { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; color: #212121; font: 0.875rem/1.6 Arial, Helvetica, sans-serif; max-width: 560px; }
.sigshort { font: 1.25rem/1.4 Georgia, "Times New Roman", serif; margin: 2px 0 12px; }
.sigt { font-weight: 700; }
.siglogos { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.siglogos img { height: 34px; width: auto; }
.siglogos .sl-bowranda { height: 40px; }
.sigcard .formact { margin-top: 12px; }

/* ---------- Sidebar top: brand, a live the Assistant, your card ---------- */
.brandrow { position: relative; }
.brandtext b { color: var(--ink); letter-spacing: -0.01em; }
.brandchips { display: flex; gap: 6px; margin-top: 3px; }
.bchip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.bchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--wd-dot); }
.bchip.bw i { background: var(--bowranda); }
.sideassist { margin-left: auto; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background 0.12s ease; }
.sideassist:hover { background: var(--surface2); }
.sideassist .assist, .sideassist svg { display: block; margin: 0; }
.ucard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); }
.ucard .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ucard .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udate { font-size: 0.75rem; color: var(--muted); }
.spill { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-align: left; }
.spill span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spill .ic { width: 14px; height: 14px; color: var(--muted); transition: transform 0.16s ease; }
.spill[aria-expanded="true"] .ic { transform: rotate(180deg); }
.spill.active { background: var(--tint-good); border-color: transparent; }
.spill.busy, .spill.oncall { background: var(--tint-red); border-color: transparent; }
.spill.away { background: var(--tint-amber); border-color: transparent; }
.spick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.spick .pbtn { justify-content: flex-start; }
.vswitch { display: grid; grid-template-columns: auto 1fr auto; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); }
.vswitch button { min-height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vswitch button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.viewbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto 14px; padding: 8px 14px; border-radius: 12px; background: var(--tint-blue); color: var(--blue-ink); font-size: 0.875rem; }
.viewbar .ic { width: 16px; height: 16px; flex: none; }
.viewbar span { flex: 1; min-width: 0; }
@media (min-width: 900px) and (max-width: 1279px) { .ucard { padding: 6px; align-items: center; } .spill span, .spill .ic, .vswitch, .udate, .brandchips, .sideassist { display: none; } .spill { width: 36px; justify-content: center; padding: 0; } }

/* ---------- My Day: calmer when quiet ---------- */
.stats.quiet .statc { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); box-shadow: none; }
.stats.quiet .statc .sk { flex: 1; min-width: 0; }
.stats.quiet .statc b { font-size: 1rem; margin: 0; order: 2; }
.stats.quiet .statc .sm { display: none; }
.wqempty .empty-sm { padding: 14px 16px; }
.feedh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.feedh h2 { margin-bottom: 8px; }
.feedh .link.quiet { font-size: 0.75rem; }
.feedshow { align-self: flex-start; font-size: 0.8125rem; padding: 0 4px; }
.tpoff { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin-top: 6px; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; cursor: pointer; text-align: left; }
.tpoff:hover { background: var(--row-hover); color: var(--ink); }
.tpoff > span:nth-child(2) { flex: 1; }
.tpoff .ic { width: 14px; height: 14px; transition: transform 0.16s ease; }
.tpoff[aria-expanded="true"] .ic { transform: rotate(180deg); }
.avstack { display: inline-flex; }
.avstack > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--side); border-radius: 50%; filter: grayscale(0.6); opacity: 0.8; }
.avstack > *:first-child { margin-left: 0; }
.tmloff { opacity: 0.85; }
.tpnone { padding: 4px 8px; }

/* ---------- Segmented radio row (forms) ---------- */
.segrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.segopt { position: relative; }
.segopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segopt span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--input); border-radius: 999px; background: var(--surface); font-size: 0.875rem; color: var(--grey-ink); }
.segopt input:checked + span { background: var(--blue-tint); border-color: var(--blue-btn); color: var(--blue-ink); font-weight: 600; }
.segopt input:focus-visible + span { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
fieldset.fld { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.fld legend { font-size: 0.875rem; font-weight: 600; padding: 0; }
.brandtext { flex: 1; }
.brandtext b { white-space: nowrap; }
.brandchips { flex-wrap: wrap; gap: 2px 8px; }
.bchip { white-space: nowrap; }
.udate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .stats, .stats.n2, .stats.n3, .stats.n4 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stats .statc { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; }
  .stats .statc .sk { flex: 1; min-width: 0; }
  .stats .statc b { font-size: 1.125rem; margin: 0; order: 3; }
  .stats .statc .sm { order: 2; }
}
.setuphint { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--surface2); color: var(--grey-ink); font-size: 0.8125rem; }
.setuphint .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }

/* ---------- Sidebar v3: lighter ---------- */
.brandtext span { font-size: 0.75rem; color: var(--muted); }
.ucard { padding: 6px 4px; border: 0; background: transparent; box-shadow: none; gap: 6px; }
.sline { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; cursor: pointer; text-align: left; }
.sline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sline .ic { width: 13px; height: 13px; flex: none; transition: transform 0.16s ease; }
.sline[aria-expanded="true"] .ic { transform: rotate(180deg); }
.sline:hover { color: var(--ink); }
.umenu .vswitch { margin-top: 4px; }
/* Stats: only shown when something is waiting, so keep them as proper cards */
.stats.quiet { display: none; }

/* ---------- Call flows designer ---------- */
.cfpage { max-width: none; }
.cfbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cfhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cfname { font: inherit; font-size: 1.125rem; font-weight: 700; color: var(--ink); border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 4px 8px; min-width: 0; width: min(420px, 100%); }
.cfname:hover { border-color: var(--line); } .cfname:focus { border-color: var(--blue-btn); background: var(--surface); outline: none; }
.cfacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cfwrap.withed { grid-template-columns: minmax(0, 1fr) 320px; }
.cfcanvas { overflow: auto; min-height: 420px; padding: 28px 20px 40px; border: 1px solid var(--line); border-radius: 18px; background-color: var(--ground); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.cfcanvas:focus-visible { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
.cftree, .cftree ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.cftree { width: max-content; margin: 0 auto; }
.cftree ul { position: relative; padding-top: 22px; }
.cftree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid var(--input); }
.cftree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; }
.cftree li::before, .cftree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid var(--input); }
.cftree li::after { right: auto; left: 50%; border-left: 2px solid var(--input); }
.cftree li:only-child { padding-top: 0; }
.cftree li:only-child::before, .cftree li:only-child::after { display: none; }
.cftree li:first-child::before, .cftree li:last-child::after { border: 0; }
.cftree li:last-child::before { border-right: 2px solid var(--input); border-top-right-radius: 10px; }
.cftree li:first-child::after { border-top-left-radius: 10px; }
.cftree ul.one { padding-top: 10px; }
.cftree ul.one::before { height: 10px; }
.cfcell { position: relative; z-index: 1; }
.cfb { position: relative; z-index: 1; display: inline-block; margin-top: 0; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--input); font-size: 0.75rem; font-weight: 650; color: var(--grey-ink); white-space: nowrap; }
.cfn { display: flex; align-items: flex-start; gap: 10px; width: 220px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
.cfn:hover { border-color: var(--input); box-shadow: var(--sh-2); }
.cfn.sel { border-color: var(--blue-btn); box-shadow: 0 0 0 3px var(--blue-tint), var(--sh-2); }
.cfi { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface2); color: var(--grey-ink); }
.cfi .ic { width: 16px; height: 16px; }
.cfn.t-blue .cfi, .cfi.t-blue { background: var(--blue-tint); color: var(--blue-ink); }
.cfn.t-amber .cfi, .cfi.t-amber { background: var(--tint-amber); color: var(--amber); }
.cfn.t-good .cfi, .cfi.t-good { background: var(--tint-good); color: var(--good); }
.cft { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cft b { font-size: 0.875rem; }
.cft span { font-size: 0.8125rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.cfadd { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px dashed var(--input); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.cfadd:hover { color: var(--blue-ink); border-color: var(--blue-btn); }
.cfadd .ic { width: 14px; height: 14px; }
.cfend { display: inline-block; padding: 6px 10px; font-size: 0.75rem; color: var(--muted); }
.cfpick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 300px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sh-pop); }
.cfpick button { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.cfpick button:hover { background: var(--surface2); }
.cfpick .ic { width: 15px; height: 15px; color: var(--muted); }
.cfpick .link.quiet { grid-column: 1 / -1; justify-content: center; }
.cfed { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--sh-2); }
.cfedh { display: flex; align-items: center; gap: 10px; }
.cfedh h2 { flex: 1; margin: 0; font-size: 1rem; }
.cfed .fld { margin: 0; }
.cfed input, .cfed textarea, .cfed select { width: 100%; }
.cfkeys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; }
.cfkeys button { min-height: 34px; border: 1px solid var(--input); border-radius: 8px; background: var(--surface); color: var(--grey-ink); font: inherit; font-weight: 650; cursor: pointer; }
.cfkeys button.on { background: var(--blue-tint); border-color: var(--blue-btn); color: var(--blue-ink); }
@media (max-width: 1099px) { .cfwrap.withed { grid-template-columns: minmax(0, 1fr); } .cfed { position: static; } }
@media print {
  .side, .topbar, .cfbar, .cfacts, .cfed, .pagehead .lede, .viewbar, #toast { display: none !important; }
  .cfcanvas { border: 0; background: none; overflow: visible; }
  .cfadd { display: none; }
  .cfname { border: 0; }
}
.stw { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.stdet { font-size: 0.75rem; color: var(--muted); }
.rtable .stw { flex-direction: column; gap: 1px; }
.rtable .stdet { padding-left: 14px; }

/* ---------- Email signature v2 (mirrors the email-safe HTML) ---------- */
.sigblock { border-left: 3px solid #212121; padding: 1px 0 1px 12px; font: 0.8125rem/1.5 Arial, Helvetica, sans-serif; color: #212121; }
.sigblock.bw { border-left-color: #1480C4; }
.sgname { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
.sgrole { color: #5F6461; }
.sgcontact { margin-top: 8px; }
.sgcontact i { font-style: normal; color: #8A908C; }
.sgsep { color: #C4C8C5; font-weight: 400; margin: 0 8px; }
.sgaddr { font-size: 0.75rem; color: #5F6461; }
.sgweb { margin-top: 2px; color: #1A5FA8; }
.sigp .siglogos { margin-top: 16px; padding-top: 14px; border-top: 1px solid #E6E8E6; gap: 22px; }
.sigp .siglogos img { height: auto; }
.sigp .siglogos .sl-mcp { width: 72px; } .sigp .siglogos .sl-windoware { width: 96px; } .sigp .siglogos .sl-bowranda { width: 50px; }
/* Inside a branded email preview the signature sits on the email itself, not in its own box */
.bmail .sigp { margin-top: 18px; padding: 0; border: 0; border-radius: 0; max-width: none; background: transparent; }
/* Branded email: the order details table and the editable parts */
.bm-rows { width: 100%; margin: 4px 0 18px; border-collapse: separate; border-spacing: 0; background: #F6F7F6; border-radius: 8px; font-size: 0.875rem; }
.bm-rows th, .bm-rows td { padding: 9px 14px; text-align: left; vertical-align: top; }
.bm-rows tr + tr th, .bm-rows tr + tr td { border-top: 1px solid #E6E8E6; }
.bm-rows th { width: 38%; font-weight: 400; color: #5F6461; }
.bm-rows td { font-weight: 600; color: #212121; }
.bmail[data-brand="bw"] .bm-logo.bw { height: 48px; }
.bm-ed { white-space: pre-wrap; margin: 0 -6px 14px; padding: 2px 6px; border-radius: 6px; outline: 1px dashed transparent; cursor: text; transition: outline-color 0.12s ease, background 0.12s ease; }
.bm-ed:hover { outline-color: #B9C3D6; background: #F7F9FD; }
.bm-ed:focus { outline: 2px solid #4471B8; background: #FFFFFF; }
.bm-ed:empty::before { content: "Click to write…"; color: #9AA09C; }
.cmail { display: flex; flex-direction: column; gap: 10px; }
.cmail .csubj { display: flex; align-items: center; gap: 8px; }
.cmail .csubj label { font-size: 0.8125rem; color: var(--muted); flex: none; }
.cmail .csubj input { flex: 1; min-width: 0; font-weight: 600; }
.cmail .chint { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--muted); }

/* ---------- KAM request page v2 ---------- */
.ask .eyebrow { display: block; margin-bottom: 2px; }
.ask .asktitle { margin: 0 0 6px; font-size: 1.375rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; }
.asknote { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); color: var(--ink); font-size: 0.9375rem; }
.askgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 12px 0 16px; }
.askc { display: flex; flex-direction: column; min-width: 0; }
.askc span { font-size: 0.75rem; color: var(--muted); }
.askc b { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.kstep { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--divider); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kstep li { position: relative; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; min-width: 0; }
.kstep li::after { content: ""; position: absolute; top: 10px; left: 30px; right: 4px; height: 2px; border-radius: 2px; background: var(--line); }
.kstep li:last-child::after { display: none; }
.kstep li span { position: relative; z-index: 1; display: flex; flex-direction: column; padding-right: 6px; margin-top: 2px; background: var(--surface); }
.kstep li small { font-weight: 500; color: var(--amber); font-size: 0.75rem; line-height: 1.3; margin-top: 1px; }
.kstep li i { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.kstep li i .ic { width: 13px; height: 13px; }
.kstep li.done { color: var(--ink); }
.kstep li.done i { background: var(--good); border-color: var(--good); color: #fff; }
.kstep li.done::after { background: var(--good); }
.kstep li.now { color: var(--ink); }
.kstep li.now i { border-color: var(--blue-btn); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--blue-btn); }
.askstate { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--divider); }
.askact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.ask .altlist { margin-top: 8px; }
.moredet summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.moredet summary::after { content: "Show"; font-weight: 500; font-size: 0.8125rem; color: var(--link); }
.moredet[open] summary::after { content: "Hide"; }
.moredet summary::-webkit-details-marker { display: none; }
.moredet[open] summary { margin-bottom: 10px; }
@media (max-width: 640px) { .kstep { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .kstep li:nth-child(2)::after { display: none; } .ask .asktitle { font-size: 1.1875rem; } }
.sigblock, .sigblock.bw { border-left: 0; padding: 0; }
.sgoff { margin-bottom: 14px; }
.sigp .siglogos { margin: 12px 0 10px; padding-top: 0; border-top: 0; }
.sigblock .sgcontact { margin-top: 0; }

/* ---------- Ask the Assistant (custom email) ---------- */
.pdwrap { display: flex; flex-direction: column; gap: 12px; }
.pdsay { display: flex; align-items: flex-start; gap: 10px; }
.pdsay .mas { flex: none; width: 44px; height: 44px; }
.pdbub { position: relative; margin: 4px 0 0; padding: 9px 13px; border-radius: 14px; border-top-left-radius: 4px; background: var(--blue-tint); color: var(--ink); font-size: 0.9375rem; line-height: 1.45; }
.pdtopics { border: 0; margin: 0 0 0 54px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pdt { position: relative; }
.pdt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pdt span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px; background: var(--surface); font-size: 0.875rem; color: var(--grey-ink); }
.pdt span .ic { width: 15px; height: 15px; color: var(--muted); }
.pdt input:checked + span { background: var(--blue-tint); border-color: var(--blue-btn); color: var(--blue-ink); font-weight: 600; }
.pdt input:checked + span .ic { color: var(--blue-btn); }
.pdt input:focus-visible + span { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
.pdwrap > .fld, .pdwrap > .formact, .pdwrap > p.small { margin-left: 54px; }
@media (max-width: 640px) { .pdtopics, .pdwrap > .fld, .pdwrap > .formact, .pdwrap > p.small { margin-left: 0; } }
.setuphint .btn { margin-left: auto; white-space: nowrap; flex: none; }
.bm-grid { width: 100%; margin: 4px 0 18px; border-collapse: collapse; border: 1px solid #E6E8E6; font-size: 0.875rem; }
.bm-grid th { background: #F6F7F6; padding: 8px 12px; text-align: left; font-weight: 600; color: #5F6461; border-bottom: 1px solid #E6E8E6; }
.bm-grid td { padding: 8px 12px; color: #212121; vertical-align: top; }
.bm-grid tr + tr td { border-top: 1px solid #EEF0EE; }

/* ---------- Bulk updates ---------- */
.bulkstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.bulkstats > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: var(--surface2); }
.bulkstats b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.bulkstats span { font-size: 0.8125rem; color: var(--muted); }
.bulkstats .warn { background: var(--tint-amber); }
.bulkbad .irow { grid-template-columns: 60px 1fr 1fr 2fr; }
.bulknav { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 0.875rem; }
.bulknav > span { flex: 1; min-width: 0; text-align: center; }
.bulkrow { border-bottom: 1px solid var(--divider); }
.bulkrow:last-child { border-bottom: 0; }
.bulkrow .row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bulkrow .row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bulkrow .row .what span { font-size: 0.8125rem; color: var(--muted); }
.bulkrow .xwrap { padding: 4px 16px 16px; }
@media (max-width: 640px) { .bulkstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Settings, Access ---------- */
.accwrap { padding: 0; overflow-x: auto; }
.acct { width: 100%; border-collapse: collapse; min-width: 560px; }
.acct th, .acct td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.acct thead th { font-size: 0.8125rem; font-weight: 700; color: var(--ink); background: var(--surface2); }
.acct thead th small { display: block; font-weight: 500; color: var(--muted); font-size: 0.75rem; }
.acct thead th:not(:first-child), .acct td { width: 150px; text-align: center; }
.acct tbody th { font-weight: 400; }
.acct tbody th b { display: block; font-size: 0.9375rem; }
.acct tbody th small { display: block; color: var(--muted); font-size: 0.8125rem; }
.acct .accg th { padding: 14px 16px 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: transparent; }
.acct tr:last-child td, .acct tr:last-child th { border-bottom: 0; }
.acc-on { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint-good); color: var(--good); }
.acc-on .ic { width: 15px; height: 15px; }
.acc-lock { font-size: 0.75rem; color: var(--muted); }
.acct td .switch { margin: 0 auto; }

/* ---------- Swatching board ---------- */
.swpage { max-width: 1400px; }
.swboard { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.swcol { display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 10px; border-radius: 16px; background: var(--side); border: 1px solid var(--line); transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
.swcol.over { background: var(--blue-tint); border-color: var(--blue-btn); box-shadow: inset 0 0 0 1px var(--blue-btn); }
.swcolh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; }
.swcolh h2 { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-ink); }
.swcolh .n { margin-left: 4px; color: var(--muted); font-weight: 600; }
.swcolh .link.small svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.swcards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.swcard { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-1); cursor: grab; }
.swcard.locked { cursor: default; }
.swcard.urgent { border-left: 3px solid var(--red); }
.swcard.dragging { opacity: 0.5; transform: rotate(1deg); }
.swcard .swmain { display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; min-width: 0; }
.swcard .swmain b { font-size: 0.9375rem; }
.swcard .qk { font-size: 0.75rem; color: var(--muted); }
.swcard .qs { font-size: 0.8125rem; color: var(--grey-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.swfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.swtag { font-size: var(--fs-12); font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--grey-ink); }
.swtag.warn { background: var(--tint-amber); color: var(--amber); }
.swtag.red { background: var(--tint-red); color: var(--red); }
.swacts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swacts .link.small svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.swempty { margin: 0; padding: 18px 8px; border: 1.5px dashed var(--line); border-radius: 12px; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.swscrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); }
.swdlg { position: fixed; z-index: 91; top: 18vh; left: 50%; width: min(420px, calc(100% - 32px)); transform: translateX(-50%); box-shadow: var(--sh-pop); display: flex; flex-direction: column; gap: 10px; }
.swdlg h2 { margin: 0; font-size: 1.125rem; }
@media (max-width: 900px) { .swboard { grid-template-columns: repeat(4, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; } .swcol { scroll-snap-align: start; } }

/* ---------- Reply card: one row of answers ---------- */
.rchoices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rchoice { min-height: 40px; padding: 0 16px; border: 1px solid var(--input); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.rchoice:hover { border-color: var(--blue-btn); background: var(--blue-tint); }
.rchoice.on { background: var(--blue-btn); border-color: var(--blue-btn); color: var(--on-accent); }
.respform { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); }
.respform h3 { margin: 0 0 8px; font-size: 0.9375rem; }
.respmore { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
.respmore .link.small { font-size: 0.8125rem; }
.respond .inform { margin-top: 10px; }
/* File drop zones */
body.filedrag .fileb { outline: 2px dashed var(--blue-btn); outline-offset: 3px; }
.fileb.dropover { background: var(--blue-tint); border-color: var(--blue-btn); color: var(--blue-ink); }
body.filedrag .fileb span::after { content: " (or drop it here)"; font-weight: 500; }
@media (max-width: 640px) {
  .acct { min-width: 0; }
  .acct tbody th small, .acct thead th small { display: none; }
  .acct th, .acct td { padding: 10px 8px; }
  .acct thead th:not(:first-child), .acct td { width: auto; font-size: 0.75rem; }
  .acc-lock { font-size: var(--fs-12); }
}

/* ---------- Review fixes ---------- */
/* Phones: the top bar never stretches on short pages */
@media (max-width: 899px) { .app { align-content: start; grid-template-rows: auto 1fr; } }
/* Switches keep their shape on touch screens; the tap area comes from padding round them */
@media (pointer: coarse) {
  .switch { min-height: 0; width: 52px; height: 30px; border-radius: 999px; box-sizing: border-box; outline-offset: 8px; }
  .switch i { top: 3px; left: 3px; width: 22px; height: 22px; }
  .switch[aria-checked="true"] i { left: 25px; }
  .switch::after { content: ""; position: absolute; inset: -8px -4px; }
  .qact, .pin, .iconbtn, .navlink { min-height: 44px; }
  .iconbtn { min-width: 44px; }
}
/* Tab strips that scroll show a fade on the right */
.tabs { scrollbar-width: none; }
@media (max-width: 640px) { .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; } }
/* Message box: who it goes to */
.msgto { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); margin-bottom: 8px; }
.msgto label { position: relative; }
.msgto input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.msgto span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.msgto input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.msgto input:focus-visible + span { outline: 2px solid var(--blue-btn); }
.composer.internal textarea { background: var(--tint-amber); border-color: var(--amber-bar); }
.swcolh { min-height: 32px; }
@media (pointer: coarse) { .subnav a { min-height: 44px; } }
@media (pointer: coarse) { kbd { display: none !important; } }
/* Toasts sit centred over the page content, not over the menu */
#toast { justify-content: center; }
@media (min-width: 1280px) { #toast { left: 280px; } }
@media (min-width: 900px) and (max-width: 1279px) { #toast { left: 80px; } }

/* Settings fold away in the sidebar */
button.navtog { display: flex; align-items: center; gap: 6px; width: calc(100% - 20px); background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.06em; color: var(--muted); cursor: pointer; text-align: left; border-radius: 6px; }
button.navtog:hover:not(:disabled) { color: var(--ink); }
button.navtog:disabled { cursor: default; }
button.navtog .ic { width: 14px; height: 14px; transition: transform 0.18s ease; }
button.navtog[aria-expanded="false"] .ic { transform: rotate(-90deg); }
button.navtog:focus-visible { outline: 2px solid var(--blue, #1480C4); outline-offset: 2px; }
.navset[hidden] { display: none; }
@media (min-width: 900px) and (max-width: 1279px) {
  button.navtog { font-size: 0; width: 44px; justify-content: center; border-top: 1px solid var(--line); border-radius: 0; padding-top: 6px; margin: 8px auto; }
  button.navtog .ic { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { button.navtog .ic { transition: none; } }

/* New customer entered while raising a request */
.ncbox { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.ncbox .minihead { margin-top: 0; }

/* Hand-off tray (admins and supervisors drag a task onto a person) */
.handtray { position: fixed; top: 12px; left: 50%; transform: translate(-50%, -8px); opacity: 0; transition: opacity 0.15s, transform 0.15s; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); padding: 8px 10px; max-width: calc(100vw - 24px); }
.handtray.on { opacity: 1; transform: translate(-50%, 0); }
.handtray .htl { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin: 0 4px 6px; }
.handtray ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.handtray .htp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 2px dashed transparent; font-size: 0.8125rem; min-width: 64px; }
.handtray .htp.over { border-color: var(--blue-btn); background: var(--blue-bg); }
.handtray .htp * { pointer-events: none; }
[data-hand] { cursor: grab; }
@media (prefers-reduced-motion: reduce) { .handtray { transition: none; } }

/* Team panel: Customer Service as large tiles, Sales team and Management fold away */
.tmgrid { list-style: none; margin: 0; padding: 0 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.tmtile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; min-width: 0; }
.tmtile:hover { background: var(--row-hover); }
.tmtile.open { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-1); }
.tmtile .tmav { position: relative; display: inline-block; line-height: 0; }
.tmtile .av { width: 52px; height: 52px; font-size: 1.0625rem; }
.tmtile .tmav .pdot { position: absolute; right: 0; bottom: 1px; width: 14px; height: 14px; border: 2.5px solid var(--side); }
.tmtile b { font-size: 0.875rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmtile .tmst { font-size: var(--fs-12); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmtile.offline .av, .tmtile.leave .av { opacity: 0.5; filter: grayscale(0.6); }
.tmdetail { margin-top: 6px; }
.tpgroups { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.tpgroup b { color: var(--ink); font-weight: 700; }

.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { filter: brightness(0.93); }

.swnote { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--blue-bg); font-size: 0.875rem; }
.swnote .ic { width: 18px; height: 18px; flex: none; }

/* =====================================================================
   Shell foundations (phase 2): shared header, empty line, dialogs, menus, account menu
   ===================================================================== */
/* Any text field, select or text area: a border you can see (3:1) */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], select, textarea { border-color: var(--input-strong); }
.btn.small, .lede, .hint { font-size: var(--fs-14); }

/* A.pageHead: title and lede left, the one primary button right, tabs underneath */
.pagehead.ph2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ph2 .phtext { min-width: 0; flex: 1 1 320px; }
.ph2 .phact { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 599px) { .ph2 .phact { width: 100%; } .ph2 .phact .btn { flex: 1; justify-content: center; } }

/* A.emptyLine */
.emptyline { margin: 0; padding: 14px 16px; font-size: var(--fs-15); color: var(--muted); }
.card > .emptyline:only-child { padding: 16px 20px; }
.emptyline .link { font-size: inherit; }

/* Page crash */
.state .stateacts { display: flex; align-items: center; justify-content: center; gap: 8px 20px; flex-wrap: wrap; margin-top: 12px; max-width: none; }
.state .stateacts .btn { display: inline-flex; align-items: center; gap: 6px; }
.state .stateacts .link { margin-top: 0; }

/* See the Service Centre as (Settings > Access) */
.lenscard { margin-bottom: 16px; max-width: 640px; }
.lenscard .sechead { margin-bottom: 4px; }
.lenscard .vswitch { display: inline-flex; flex-wrap: wrap; margin-top: 12px; }
.lenscard .vswitch button { min-height: 36px; padding: 0 14px; font-size: var(--fs-14); }

/* Status picker: status buttons and the note, in the card */
.spick .spnote { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: var(--fs-13); color: var(--muted); }
.spick .spnote input { width: 100%; min-height: 36px; border: 1px solid var(--input-strong); border-radius: var(--r-tight); background: var(--surface); padding: 0 8px; font-size: var(--fs-14); color: var(--ink); }
/* Account pop-up: settings first, then links, Sign out last on its own line */
.umenu .ulinks { display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); padding-top: 6px; }
.umenu .ulinks .link.quiet, .umenu .usignout { min-height: 36px; gap: 8px; text-decoration: none; font-size: var(--fs-14); }
.umenu .ulinks .link.quiet .ic, .umenu .usignout .ic { width: 16px; height: 16px; }
.umenu .usignout { border-top: 1px solid var(--line); padding-top: 6px; }
.sline { min-height: 24px; }

/* =====================================================================
   Design pass (layout): page width, header, tabs, empty states, errors, phone top bar, sidebar, assistant button
   ===================================================================== */
/* One page width everywhere. Settings pages that used to be narrower line up with the rest. */
.page, .page.narrow { max-width: 1160px; margin-left: auto; margin-right: auto; }
.backset { display: inline-flex; margin-bottom: 8px; min-height: 32px; }
/* Room at the bottom so the floating assistant button never sits over the last thing on a page */
main { padding-bottom: 96px; }
@media (max-width: 720px) { main { padding-bottom: 88px; } }

/* Header: title and one line, the main button on the right, then the tabs */
.pagehead.ph2 { margin-bottom: 12px; }
.pagehead.ph2 + .tabs, .pagehead.ph2 + .subnav, .pagehead.ph2 + nav.tabs { margin-bottom: 16px; }
.hbar .pagehead { margin-bottom: 0; }

/* Tab strips: one line, scroll sideways when they don't fit, with a fade on the side that has more */
.tabs.tabs, .subnav.subnav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar, .subnav::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .tabs { -webkit-mask-image: none; mask-image: none; padding-right: 0; } }
.tabs.fade-r, .subnav.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tabs.fade-l, .subnav.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.tabs.fade-l.fade-r, .subnav.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
a.tab { text-decoration: none; }
a.tab[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue-btn); }

/* A.emptyLine: the one empty state. Centred, with its action beside it (or under it on a phone). */
.emptyline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; text-align: center; padding: 24px 16px; }
.card > .emptyline:only-child { padding: 24px 20px; }
.emptyline > span { max-width: 60ch; }
.emptyline .btn { min-height: 36px; }

/* Error card: plain message, Try again, and the technical detail for admins only */
.state .errdet { margin: 14px auto 0; max-width: 60ch; text-align: left; font-size: var(--fs-13, 0.8125rem); }
.state .errdet summary { cursor: pointer; color: var(--muted); text-align: center; }
.state .errdet code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--ground); color: var(--grey-ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Phones: the top bar title shows only after the page's own heading has scrolled away */
@media (max-width: 899px) {
  .topbar b { opacity: 0; transition: opacity 0.15s ease; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
  .app.h1gone .topbar b { opacity: 1; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .topbar b { transition: none; } }

/* Sidebar: the dark background runs the full height of long pages */
@media (min-width: 1280px) { .app { background: linear-gradient(90deg, #1B201E 0, #1B201E 264px, transparent 264px); } }
@media (min-width: 900px) and (max-width: 1279px) { .app { background: linear-gradient(90deg, #1B201E 0, #1B201E 64px, transparent 64px); } }

/* Switches keep their size in a row of text (Features, Access) */
.switch { flex: 0 0 auto; }
.featl li .switch { width: 52px; min-width: 52px; }
@media (pointer: fine) { .featl li .switch { width: 44px; min-width: 44px; } }

/* See the Service Centre as: buttons on wide screens, a drop-down on phones */
.lenscard .vselect { display: none; margin-top: 12px; }
.lenscard .vselect select { width: 100%; min-height: 44px; }
@media (max-width: 599px) { .lenscard .vswitch { display: none; } .lenscard .vselect { display: block; } }
.lenscard { max-width: none; }