/* ===== v106 · the shell, two docked states (4 Oct 2026) — the founder at 1920 × 950: "keep the sidebar showing … when collapsed a slim strip with
   the main icons; a section with several pages opens a menu, not the whole sidebar … the control should stay the same … there's no header".
   Builds on v104 (_research/2026-10-shell-polish/01-study.md §4: one continuous list on one pitch, ONE filled row, the quiet nav inks, the group
   guide, the Changes dot). New: the sidebar is expanded (248) or the rail (60) — docked at every width above a phone, never an overlay there;
   ONE toggle (the panel icon) on the same spot in both states; every icon of the sidebar on one column (x = 30) in both states, so collapsing only
   takes the words away; a real header (56px, its own surface, a hairline always); the page fills the width beside the sidebar (--page-x: 32 · 24
   under 1280 · 16 on a narrow page). Only a phone (≤ 760px) opens the sidebar as a drawer, from the header's menu button, with × to close.
   Still never (§5): an inset rounded content frame or darker chrome (v82), a title bar, capsule segmented controls, a separate top-bar pill. ===== */
.app.v89{--sb-w:248px;--rail-w:76px;--top-h:56px;--page-x:32px;--nav-ink:#48484d;--nav-icon:#86868b;grid-template-columns:var(--sb-w) minmax(0,1fr);transition:none}   /* night fix 1 (UX6-03): the column never animates (linear.css .app transitions grid-template-columns) */
:root[data-theme="dark"] .app.v89{--canvas:#0e0e10;--nav-ink:rgba(235,235,245,.70);--nav-icon:rgba(235,235,245,.48)}
.app.v89.is-rail{grid-template-columns:var(--rail-w) minmax(0,1fr)}
.app.v89.sb-hidden{grid-template-columns:minmax(0,1fr)}
@media (max-width:1279px){.app.v89{--page-x:24px}}
/* the toggle, once, on the render right after it (lshell.js): night fix 1 (UX6-03 — only cheap properties animate) — the column switches at once and
   only the sidebar's own content fades in and slides 6px; it animated grid-template-columns, so the whole page re-laid out every frame for 200ms */
@keyframes sb-swap{from{opacity:0;transform:translateX(-6px)}}
.app.v89.sb-anim .sb > *{animation:sb-swap var(--dur-2) var(--ease-out)}
@media (prefers-reduced-motion:reduce){.app.v89.sb-anim .sb > *{animation:none}}

/* ---------- the sidebar: the page's own canvas, one 8% edge, solid (no glass) ---------- */
.app.v89 .sb{background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none;border-right:1px solid var(--line);padding:8px}
/* the top row: the logo (identity v1.0 — the lockup at 24px, the rail's mark at 20px: styles/v119-identity.css), the toggle at the row's end */
.app.v89 .sb-top{height:40px;margin:0 0 4px;gap:4px;padding:0 0 0 4px;flex:none;justify-content:space-between}   /* centred on the header's middle (y 28) */
.app.v89 .sb-brand{height:32px;padding:0 6px;gap:9px;background:none;color:var(--dp-ink)}   /* identity v1.0: the mark + name in the brand's ink, 9 px apart (Oct 15) */
@media (hover:hover){.app.v89 .sb-brand:hover{background:var(--hover)}}
.app.v89 .sb-toggle{width:32px;height:32px;border-radius:var(--r-8);color:var(--text-3);margin-left:0;flex:none}
@media (hover:hover){.app.v89 .sb-toggle:hover{background:var(--hover);color:var(--text-1)}}
/* the switch: no frame, a hover fill; its tile on the icon column */
.app.v89 .sb-pj{height:auto;min-height:44px;padding:4px 8px 4px 10px;gap:10px;margin:0 0 8px;border:0;background:transparent;flex:none}
.app.v89 .sb-pj.is-open{background:var(--hover)}@media (hover:hover){.app.v89 .sb-pj:hover{background:var(--hover)}}
.app.v89 .sb-pj .logo,.app.v89 .sb-wsw .logo{width:24px;height:24px;border-radius:var(--r-6);font-size:12px;line-height:1}
.app.v89 .pj-n{color:var(--text-1)}
.app.v89 .pj-s{font-size:12px;line-height:16px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* night fix 1: one line in every project ("Service business · valeinteriors.co.uk" took 2 and moved the whole list 16px) — the whole line is its title */
.app.v89 .pj-cv{color:var(--text-4)}
/* search: calm — no white fill, the 8% edge; ⌘K in a quiet capsule; its glass on the icon column */
.app.v89 .sb-search{height:32px;flex:none;margin:0 0 12px;padding:0 5px 0 14px;gap:10px;background:transparent;border:1px solid var(--line);color:var(--text-3);font-size:13px;line-height:18px}
@media (hover:hover){.app.v89 .sb-search:hover{background:var(--hover);border-color:var(--line)}}
.app.v89 .sb-search svg{color:var(--text-3)}
.app.v89 .sb-search .kbd{height:20px;padding:0 7px;border:0;border-radius:var(--r-full);background:var(--fill-1);font-size:11px;line-height:20px;font-weight:var(--w-medium);color:var(--text-2)}

/* ---------- the list: one pitch, no block gaps; icons at x 22–38 ---------- */
.app.v89 .sb-nav{flex:1 1 auto;gap:2px;padding-bottom:6px;scrollbar-width:thin;--sb-nf:0px;mask-image:linear-gradient(to bottom,var(--canvas) calc(100% - var(--sb-nf)),transparent);animation:sb-navfade linear both;animation-timeline:scroll(self)}
/* night fix 1: while the list can scroll, its last 24px fade (a row was cut mid-letter above the rules row, with no hint there is more); a scroll-driven
   animation, so a list that fits has no fade and the fade goes as the end is reached. 6px under the list, so 1920×1080 doesn't scroll at all */
@property --sb-nf{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes sb-navfade{from{--sb-nf:24px}to{--sb-nf:0px}}
.app.v89 .sb-nav > button.nav-i:first-of-type{margin-top:0}
.app.v89 .nav-i{height:30px;gap:10px;padding:0 8px 0 14px;border-radius:var(--r-8);color:var(--nav-ink);font-size:13px;line-height:18px;font-weight:var(--w-medium)}
.app.v89 .nav-i > svg{width:16px;height:16px;color:var(--nav-icon)}
@media (hover:hover){.app.v89 .nav-i:hover{background:var(--hover);color:var(--text-1)}}
@media (hover:hover){.app.v89 .nav-i:hover > svg{color:var(--text-1)}}
/* the ONE filled row: the page you are on (aria-current) — full ink, no weight jump */
.app.v89 .nav-i.is-on{background:var(--fill-2);color:var(--text-1)}
.app.v89 .nav-i.is-on > svg{color:var(--text-1)}
/* the group you are in: full ink, never a fill (P1-2) — the rail fills it, as its pages are behind its menu */
.app.v89 .nav-i.is-here,.app.v89 .nav-i.is-here > svg{color:var(--text-1)}
.app.v89 .nav-i .cv{display:grid;margin-left:auto;color:var(--text-4);transition:transform var(--dur-1) var(--ease-out)}
.app.v89 .nav-i .cv svg{color:inherit}
.app.v89 .nav-i.is-open .cv{transform:rotate(90deg)}
/* the open group's pages hang on a 1px guide under the group's icon (Notion / shadcn) — under the current page's translucent fill */
.app.v89 .sb-kids{position:relative;display:flex;flex-direction:column;gap:2px;flex:none}
.app.v89 .sb-kids::before{content:"";position:absolute;left:21px;top:2px;bottom:2px;width:1px;background:var(--line-strong);pointer-events:none}
.app.v89 .nav-i.is-kid{height:30px;padding-left:40px;font-weight:var(--w-regular);color:var(--text-3)}
@media (hover:hover){.app.v89 .nav-i.is-kid:hover{color:var(--text-1)}}
.app.v89 .nav-i.is-kid.is-on{color:var(--text-1);font-weight:var(--w-medium)}
/* counts: one size; colour only for what is for you (the Actions row's one "needs you" number) — never red */
.app.v89 .nav-i .ct{margin-left:auto;font-size:12px;line-height:16px;font-weight:var(--w-medium);color:var(--text-3);font-variant-numeric:tabular-nums}
.app.v89 .nav-i.is-on .ct{color:var(--text-2)}
.app.v89 .nav-i .ct.hot,.app.v89 .nav-i.is-on .ct.hot{display:inline-grid;place-items:center;height:18px;min-width:20px;padding:0 5px;border-radius:var(--r-full);background:var(--st-red-bg);color:var(--st-red-fg);font-weight:var(--w-semibold);line-height:18px;font-size:var(--t-sh)}   /* Oct 7 review (D03): a count is 12px, never 11 */
/* Changes: a dot, never a number — new since your last visit (its tooltip and label say how many and since when) */
.app.v89 .sb-new{display:grid;place-items:center;width:16px;height:16px;margin:0 -2px 0 auto;flex:none}
.app.v89 .sb-new::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.app.v89 .sb-new.is-warn::before{background:var(--warn-ink)}   /* Project settings: a data source needs a person */

/* ---------- the bottom block: no line (one structure line on screen) — the rules' status, Project settings, the account ---------- */
.app.v89 .sb-proj{margin-top:12px;padding-top:0;border-top:0;gap:2px;flex:none}
.app.v89 .sb-proj .nav-i{height:30px}
.app.v89 .sb-run{gap:10px}
.app.v89 .sb-rd{width:16px;display:grid;place-items:center;flex:none}
.app.v89 .sb-rd i{width:7px;height:7px;border-radius:50%;background:var(--st-green);box-shadow:0 0 0 3px var(--st-green-bg)}
.app.v89 .sb-rd i.is-orange{background:var(--st-orange);box-shadow:0 0 0 3px var(--st-orange-bg)}
.app.v89 .sb-rd i.is-gray{background:var(--text-3);box-shadow:none}
.app.v89 .sb-run .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.v89 .sb-rn{margin-left:auto;font-size:12px;line-height:16px;font-weight:400;color:var(--text-3);white-space:nowrap}
.app.v89 .sb-foot{margin-top:6px;padding-top:0;border-top:0;flex:none}
.app.v89 .sb-user{height:40px;padding:0 8px 0 10px;gap:10px}
.app.v89 .sb-user[aria-expanded="true"],.app.v89 .sb-user.is-on{background:var(--hover)}@media (hover:hover){.app.v89 .sb-user:hover{background:var(--hover)}}
.app.v89 .sb-user .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.app.v89 .sb-user .un{color:var(--text-1)}
.app.v89 .sb-user .ur{font-size:12px;line-height:16px;color:var(--text-3)}
.app.v89 .sb-user .su-cv{color:var(--text-4);display:grid;flex:none}

/* the quiet (--text-3) words keep ≥ 4.5:1 on a hover or open fill: one step darker there */
.app.v89 .sb-pj.is-open .pj-s,.app.v89 .sb-user[aria-expanded="true"] .ur,.app.v89 .sb-user.is-on .ur,.app.v89 .sb-run.is-on .sb-rn{color:var(--text-2)}@media (hover:hover){.app.v89 .sb-pj:hover .pj-s,.app.v89 .sb-user:hover .ur,.app.v89 .nav-i:hover .ct:not(.hot),.app.v89 .sb-run:hover .sb-rn,.app.v89 .sb-search:hover,.app.v89 .sb-search:hover svg{color:var(--text-2)}}

/* ---------- the rail (collapsed, 60px): the same icons on the same column (x 30), a tip beside each on hover or focus (ui/tooltip.js), no words.
   The toggle keeps its spot, the D sits under it; groups open their menu beside the rail (lshell.js groupMenu); Actions keeps its one number as a
   badge, Changes and Project settings their dots; the rules' dot, settings and the avatar at the bottom ---------- */
.app.v89 .sb.is-rail .sb-top{flex-direction:row;justify-content:center;align-items:center;height:40px;gap:4px;padding:0;margin:0 0 6px}
.app.v89 .sb.is-rail .sb-brand{width:40px;height:36px;padding:0;justify-content:center;flex:none}
.app.v89 .sb.is-rail .sb-pj{justify-content:center;width:44px;height:36px;min-height:36px;padding:0;margin:0 auto 6px}
.app.v89 .sb.is-rail .sb-search{border:0}
.app.v89 .sb.is-rail .sb-nav{scrollbar-width:none}
.app.v89 .sb.is-rail .nav-i,.app.v89 .sb.is-rail .sb-search{position:relative;flex-direction:column;justify-content:center;align-items:center;width:64px;height:auto;min-height:50px;padding:6px 2px 5px;gap:4px;margin:0 auto}
.app.v89 .sb.is-rail .nav-i.is-here{background:var(--fill-2)}@media (hover:hover){.app.v89 .sb.is-rail .nav-i.is-here:hover{background:var(--fill-2)}}
.app.v89 .sb.is-rail .nav-i.is-open{background:var(--fill-1)}
.app.v89 .sb.is-rail .pj-t,.app.v89 .sb.is-rail .pj-cv,.app.v89 .sb.is-rail .sb-search .kbd,
.app.v89 .sb.is-rail .nav-i .cv,.app.v89 .sb.is-rail .nav-i .ct,.app.v89 .sb.is-rail .sb-rn,.app.v89 .sb.is-rail .sb-user .grow,.app.v89 .sb.is-rail .su-cv{display:none}
.app.v89 .sb.is-rail .nav-i .ct.hot{display:inline-grid;position:absolute;top:2px;left:calc(50% + 4px);right:auto;height:14px;min-width:14px;padding:0 3px;font-size:9.5px;line-height:14px;box-shadow:0 0 0 2px var(--canvas)}   /* night fix 1: anchored on its left at the icon's corner, so "11" grows away from the glyph */
/* the workspace rail keeps its counts (Needs you 35, each project's number) as quiet badges — the project rail shows its one hot count */
.app.v89 .sb.sb-wsv.is-rail .nav-i .ct:not(.hot){display:inline-grid;place-items:center;position:absolute;top:2px;left:calc(50% + 4px);right:auto;height:14px;min-width:14px;padding:0 3px;border-radius:var(--r-full);background:var(--fill-2);color:var(--text-2);font-size:9.5px;line-height:14px;font-weight:var(--w-semibold);box-shadow:0 0 0 2px var(--canvas)}
.app.v89 .sb.is-rail .sb-new{position:absolute;top:5px;right:16px;width:10px;height:10px;margin:0;border-radius:50%;background:var(--canvas)}
.app.v89 .sb.is-rail .sb-user{justify-content:center;width:44px;padding:0}
.app.v89 .sb.is-rail .sb-pl{width:20px;height:20px;border-radius:var(--r-6)}
.sb-sep{display:block;height:1px;margin:6px 10px;background:var(--line);flex:none}

/* ---------- the header: 56px, its own surface (white / #161617) and a hairline always; crumbs on the page's own left edge (--page-x) ---------- */
.app.v89 .topbar{height:var(--top-h);gap:8px;padding:0 16px 0 var(--page-x);background:var(--surface-1);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
@container pg (max-width:760px){.app.v89 .topbar{padding-left:16px}}
@container pg (max-width:480px){.app.v89 .topbar{padding-left:12px}}
.app.v89.is-narrow .topbar{padding-left:8px}
/* a phone: the menu button opens the drawer */
.app.v89 .tb-sbt{width:32px;height:32px;margin:0;border-radius:var(--r-8);color:var(--text-2);flex:none}
@media (hover:hover){.app.v89 .tb-sbt:hover{background:var(--hover);color:var(--text-1)}}
/* the project's tile leads the crumbs when the sidebar shows no name (the rail, a phone) */
.app.v89 .tb-tile{width:20px;height:20px;border-radius:var(--r-6);display:inline-grid;place-items:center;color:var(--on-fill);font-size:11px;line-height:1;font-weight:var(--w-bold);flex:none}
.app.v89 .crumbs{gap:6px;font-size:13px;line-height:18px;min-width:0;flex:0 1 auto}
.app.v89 .crumbs .sep{color:var(--text-3)}
/* HF12: every crumb but the current one is a link */
.app.v89 .crumbs a.cr-a{color:var(--text-3);padding:2px 6px;margin:0 -6px;border-radius:var(--r-6);text-decoration:none;white-space:nowrap}
@media (hover:hover){.app.v89 .crumbs a.cr-a:hover{color:var(--text-1);background:var(--hover)}}
.app.v89 .crumbs a.cr-top{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-weight:var(--w-medium)}
.app.v89 .crumbs a.cr-top:has(.tb-tile){padding-left:4px;margin-left:-4px}
.app.v89 .crumbs .cur{font-size:13px;line-height:18px;font-weight:var(--w-semibold);color:var(--text-1);letter-spacing:0;min-width:0;flex:0 1 auto;white-space:normal;overflow-wrap:break-word;text-wrap:pretty}   /* v105 (no-cut): a long name wraps to a second line, never "…" */
.app.v89 .crumbs > span:first-child:not(.sep):not(.tb-tile){display:inline-flex;align-items:center;gap:8px}   /* night fix 1: never the phone's tile — it took inline-flex and its letter sat in the top-left corner */
/* the phone's crumb (< 480px): the tile + the page you are on, never cut */
.app.v89 .crumbs.cr-ph{display:none}
.app.v89 .topbar .tb-r{gap:2px;margin-left:auto;flex:none}
.app.v89 .tb-ic{width:32px;height:32px;border-radius:var(--r-full);background:transparent;color:var(--text-2)}
.app.v89 .tb-ic.is-on{background:var(--hover);color:var(--text-1)}@media (hover:hover){.app.v89 .tb-ic:hover{background:var(--hover);color:var(--text-1)}}
.app.v89 .tb-ic svg{width:16px;height:16px}
/* the bell's mark: red only when a person is needed now (an overdue reminder, a failing source); any other unread is the same dot in grey */
.app.v89 .tb-ic .badge-dot{top:7px;right:8px;width:7px;height:7px;border:0;box-shadow:0 0 0 2px var(--surface-1)}
.app.v89 .tb-ic .badge-dot.is-urgent{background:var(--c-red)}
.app.v89 .tb-ic .badge-dot.is-quiet{background:var(--text-2)}
/* the chat's count: 16px, quiet — never the largest mark in the bar */
.app.v89 .tb-ic .badge-n{top:2px;right:0;background:var(--st-red-bg);color:var(--st-red-fg);height:14px;min-width:14px;padding:0 3px;border:0;box-sizing:border-box;border-radius:var(--r-full);font-size:9.5px;line-height:14px;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px var(--surface-1)}
.app.v89 .tb-ic .badge-n.is-quiet{background:var(--st-red-bg);color:var(--st-red-fg)}

/* ---------- a phone (≤ 760px): the sidebar is a drawer over the page — 300px, no edge, the one shadow ---------- */
@media (max-width:760px){
  .app.v89{grid-template-columns:minmax(0,1fr)}
  .app.v89 .sb{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:60;border-right:0;box-shadow:var(--sh-high);padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));animation:sb-in var(--dur-3) var(--ease-out)}
}
.app.v89 .sb-bd{position:fixed;inset:0;z-index:55;background:var(--scrim);animation:sb-fade var(--dur-2) var(--ease-out)}
@keyframes sb-in{from{transform:translateX(-12px);opacity:.6}}
@keyframes sb-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.app.v89 .sb,.app.v89 .sb-bd{animation:none}}
/* touch (a phone, or any coarse pointer): 40px targets, 15px labels, 18px icons (Apple 44pt / Material 48dp, within the drawer's room) */
@media (max-width:600px),(pointer:coarse){
  .app.v89 .sb-top{height:40px}
  .app.v89 .sb-brand{height:36px}
  .app.v89 .sb-toggle{width:36px;height:36px}
  .app.v89 .sb-pj{height:auto;min-height:52px}
  .app.v89 .pj-n{font-size:15px;line-height:20px}
  .app.v89 .pj-s{font-size:13px;line-height:18px}
  .app.v89 .sb-search{height:40px;font-size:15px;line-height:20px}
  .app.v89 .sb-search .kbd{display:none}
  .app.v89 .nav-i,.app.v89 .sb-proj .nav-i{height:40px;gap:12px;padding:0 10px 0 12px;font-size:15px;line-height:20px}
  .app.v89 .nav-i > svg{width:18px;height:18px}
  .app.v89 .sb-rd{width:18px}
  .app.v89 .nav-i.is-kid{height:40px;padding-left:42px}
  .app.v89 .sb-kids::before{left:20px}
  .app.v89 .nav-i .ct{font-size:13px}
  .app.v89 .nav-i .ct.hot,.app.v89 .nav-i.is-on .ct.hot{height:22px;min-width:24px;line-height:22px}
  .app.v89 .sb-rn{font-size:13px;line-height:18px}
  .app.v89 .sb-user{height:52px}
  .app.v89 .sb-user .un{font-size:15px;line-height:20px}
  .app.v89 .sb-user .ur{font-size:13px;line-height:18px}
  .app.v89 .tb-ic,.app.v89 .tb-sbt{width:40px;height:40px}
  .app.v89 .tb-ic .badge-dot{top:10px;right:11px}
  .app.v89 .tb-ic .badge-n{top:6px;right:4px}
}
@media (max-width:479px){
  .app.v89 .topbar{padding-right:4px;gap:4px}
  .app.v89 .crumbs:not(.cr-ph){display:none}
  .app.v89 .crumbs.cr-ph{display:flex;align-items:center;gap:8px}
  .app.v89 .crumbs.cr-ph > *{flex:none}
  .app.v89 .crumbs.cr-ph > .cur{overflow:visible}
}

/* the keyboard sheet (ui/keys.js): a heading over each list — this page, everywhere, the loop pages */
.ky-sec + .ky-sec{margin-top:14px;padding-top:10px;border-top:1px solid var(--ln-2)}
.ky-sec.is-off .ky-r{color:var(--fg-3)}
.ky-sec .ky-h{margin:0 0 4px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3)}
.ky-sec .ky-l .ky-k{min-width:20px;height:20px;margin:0 1px;vertical-align:1px}
.ky-go{white-space:nowrap}
.ky-sec .ky-na{color:var(--text-3)}   /* "not on this page" at ≥ 4.5:1 (it was --fg-4) */

/* menus: the account header, a divider, a check at the end of an item (from the v82 block, still used by the menu kit) */
.menu-sep{height:1px;margin:4px 6px;background:var(--bd);flex:none}
.menu-who{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;margin-bottom:2px;border-bottom:1px solid var(--bd)}
.menu-who .mw-n{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);white-space:nowrap}
.menu-who .mw-s{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap}
.menu-ck.is-end{margin-left:auto;padding-left:16px;width:auto}
/* a rail flyout (.menu.is-side) slides out of the rail as it opens — v110-motion.css §3 (the overlay layer; a redraw never replays it) */
.tip-kbd{display:inline-block;margin-left:8px;padding:0 5px;border-radius:var(--r-4);background:var(--tip-kbd-bg);font-variant-numeric:tabular-nums;letter-spacing:.04em}   /* dark: v103-tokens.css */

/* ===== v90 · workspace shell, account menu, sheets, Home, Needs you, Clients (2 Oct 2026, Builder S1 — BRIEF.md HS1–HS4; research §3, §6.1, §7a).
   The workspace state is the SAME sidebar: Home · Needs you · Clients · Starred · Recent · Workspace settings · the account row. ===== */
/* the workspace sidebar: section headings that fold (Notion), project rows with a 16px logo (radius rule: 16px square → 4) */
.app.v89 .sb-sec{display:flex;align-items:center;gap:4px;height:24px;margin-top:12px;padding:0 8px;border-radius:var(--r-6);font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);color:var(--fg-3);width:100%;text-align:left}
@media (hover:hover){.app.v89 .sb-sec:hover{color:var(--fg);background:color-mix(in srgb,var(--bg-4) 60%,transparent)}}
.app.v89 .sb-sec .cv{display:grid;color:var(--fg-4);transition:transform var(--dur-1) var(--ease-out)}
.app.v89 .sb-sec[aria-expanded="false"] .cv{transform:rotate(-90deg)}
.app.v89 .nav-i.sb-pr{font-weight:var(--w-medium)}
.sb-pl{width:16px;height:16px;border-radius:var(--r-4);display:grid;place-items:center;color:var(--on-fill);font-size:11px;line-height:1;font-weight:var(--w-bold);flex:none}
/* v104: the workspace switch's tile and the account row's fill are the v104 shell block's (24px r6 · --fill-1) */
.app.v89 .sb-nav > a.nav-i:first-child{margin-top:0}
/* the account menu's header: name, then the email and the workspace on their own lines */
.menu-who .mw-l{display:block}
.menu-who .av{width:32px!important;height:32px!important;font-size:12px!important}

/* ---------- sheets (keyboard shortcuts, help and what's new, a plain confirm) ---------- */
.hs-sheet{position:fixed;inset:0;z-index:680;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;background:var(--scrim)}
.hs-sh{width:min(520px,100%);max-height:72vh;display:flex;flex-direction:column;background:var(--elev);border:1px solid var(--bd-tl);border-radius:var(--r-card);box-shadow:var(--sh-high);overflow:hidden;animation:hs-in var(--dur-3) var(--ease-out)}
.hs-sh.is-confirm{width:min(440px,100%)}
@keyframes hs-in{from{opacity:0;transform:translateY(4px) scale(.99)}}
@media (prefers-reduced-motion:reduce){.hs-sh{animation:none}}
.hs-sh-h{display:flex;align-items:center;gap:8px;padding:14px 12px 10px 20px}
.hs-sh-h h2{flex:1;margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.hs-sh-x{width:28px;height:28px}
.hs-sh-b{padding:0 20px 18px;overflow-y:auto;min-height:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.hs-sh-p{margin:0}
.hs-sh-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--ln-2)}
.btn.is-danger{background:var(--danger-fill);border-color:transparent}
@media (hover:hover){.btn.is-danger:hover{background:var(--danger-fill-h)}}
/* v103 (Dashboard it.2 · DF-D 8): ONE key column for both lists, so the words start at one x (it jumped 568 → 760); a long chord wraps inside it */
.hs-keys kbd,.hs-sh kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--bd-2);border-bottom-width:2px;border-radius:var(--r-6);background:var(--bg);font:inherit;font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg)}
.hs-sh-k{margin:6px 0 8px;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);color:var(--fg-3)}
.hs-news{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.hs-news li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:baseline}   /* night fix 1: the date on its title's line, not centred beside the description */
.hs-news b{color:var(--fg);font-weight:var(--w-semibold)}
.hs-news p{margin:2px 0 0;color:var(--fg-3);font-size:var(--t-co);line-height:var(--lh-co)}
.hs-help{display:flex;flex-direction:column;gap:2px;margin:0 -8px}
.hs-hl{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:var(--r-8);text-align:left;color:var(--fg-2)}
.hs-hl:focus-visible{background:var(--hover)}@media (hover:hover){.hs-hl:hover{background:var(--hover)}}
.hs-hl > svg{margin-top:2px;color:var(--fg-3);flex:none}
.hs-hl b{display:block;color:var(--fg);font-weight:var(--w-medium)}
.hs-hl span span{display:block;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}

/* ---------- Home (v90; fix round HF1–HF14, 2 Oct night — _reviews/2026-10-02-home-settings/FIX-home.md) ---------- */
.hs-page{gap:0}
.hs-page .pl-hd{margin-bottom:16px}
.hs-page .pl-s{text-wrap:balance}   /* HF13: no lone last word when the status line wraps */
.hs-page .pl-s a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--bd-2);text-underline-offset:3px}
@media (hover:hover){.hs-page .pl-s a:hover{color:var(--fg);text-decoration-color:currentColor}}
.hs-page .pl-hd .btn{flex:none}
.hs-page > .sec.panel{margin-bottom:14px}
.hs-sec-h{display:flex;align-items:baseline;gap:10px;margin:4px 0 10px}
.hs-sec-h h2{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.hs-logo{display:inline-grid;place-items:center;border-radius:var(--r-6);color:var(--on-fill);font-weight:var(--w-bold);line-height:1;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Needs you rows — state · what (the row's one link) · one button · chevron; the whole row also opens on a click (mouse) */
.hs-row.mn-g{grid-template-columns:184px minmax(0,1fr) minmax(148px,max-content) 14px}   /* C-5: the button column is never narrower than its button — the text never runs under it */
.hs-needs .mn-g{min-height:48px}
.hs-row .k{display:block;white-space:normal;text-wrap:pretty}   /* a Needs-you title wraps, never "…" */
@container pg (max-width:760px){.hs-page .sec-hd{flex-wrap:wrap;row-gap:4px}.hs-page .sec-hd > h2{flex:none}}   /* a narrow header wraps its parts; the title is never squeezed */
.hs-row .k .hs-logo{display:inline-grid;vertical-align:-3px;margin-right:6px}
.hs-row .k b{font-weight:var(--w-semibold);color:var(--fg);margin-right:2px}
.hs-rl{color:inherit;text-decoration:none;border-radius:var(--r-4)}
@media (hover:hover){.hs-rl:hover{text-decoration:underline;text-decoration-color:var(--bd-2);text-underline-offset:3px}}
.hs-row .mn-g-b{justify-content:flex-end;align-items:center;gap:8px}
/* P6 H3: what could come next after a verdict — a quiet link beside the row's button ("Undo it ›"), drawn like a head's "See all ›"; it opens the
   result, where the choice is made and waits for approval */
.hs-next{display:inline-flex;align-items:center;gap:2px;padding:3px 6px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3);white-space:nowrap;border-radius:var(--r-full)}
@media (hover:hover){.hs-next:hover{background:var(--hover);color:var(--fg)}}
.hs-next svg{flex:none}
/* P6 H2: a standing rule's last judged runs, small, at the start of its line (the shared .rl-mk colours) */
.hs-row .hs-mks{gap:3px;margin:0 8px 0 0;vertical-align:-3px}
.hs-row .hs-mks .rl-mk{width:15px;height:15px}
/* HF7: at 900px and narrower a Needs-you row keeps its state and its button (the shared rule hides them for the other pages' rows) */
@media (max-width:900px){
  .hs-row.mn-g{grid-template-columns:172px minmax(0,1fr) auto 14px}
  .hs-row.mn-g > .mn-g-st,.hs-row.mn-g > .mn-g-b{display:flex}
}
@media (max-width:640px){
  .hs-row.mn-g{grid-template-columns:minmax(0,1fr) 14px;grid-template-areas:"st st" "k k" "b ch";row-gap:4px}   /* C-13: the reason above the title, the action at the row's end — never above the title · night fix 1 (A12, AT-17): the text takes the full width, the button sits on the row's last line, right-aligned (it squeezed the text into ~180px) */
  .hs-row.mn-g > .mn-g-st{grid-area:st}.hs-row.mn-g > .k2{grid-area:k}.hs-row.mn-g > .mn-g-b{grid-area:b}.hs-row.mn-g > svg{grid-area:ch}
  .hs-row .hs-rs .hs-mks,.hs-row .hs-rs-x{display:none}   /* P6 H4: a standing rule's line keeps its words on a phone; the rest is in its tooltip */
  .hs-row .hs-rs{display:block}.hs-row .hs-rs::first-letter{text-transform:uppercase}   /* "Met the bar 3 of the last 8 weeks" when it starts the line */
}

/* the toolbar: one line, 30px controls; the view switch is two icon buttons, not a segmented capsule */
.hs-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hs-bar .pl-q{width:260px;flex:1 1 200px;min-width:0;max-width:260px}   /* night fix 1 (A9): the search gives way before a control wraps alone (a wrapping row is laid out from the basis) */
.hs-bar .prop{height:30px}
.hs-view{display:inline-flex;gap:2px;margin-left:2px}
.hs-view .ib{width:30px;height:30px;border-radius:var(--r-8);color:var(--fg-3)}
.hs-view .ib.is-on{background:var(--bg-3);color:var(--fg)}
.hs-count{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap}
.hs-count a{color:var(--link);font-weight:var(--w-medium)}
.hs-fchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px}
.hs-fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 11px;border-radius:var(--r-full);background:var(--accent-t);color:var(--fg);font-size:var(--t-co);font-weight:var(--w-medium)}
.hs-fchip svg{color:var(--fg-3)}
@media (hover:hover){.hs-fchip:hover svg{color:var(--fg)}}

/* ---------- project cards: a subgrid, so a row of cards shares its lines — the numbers sit at the same height in every card (HF5) ---------- */
.hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));column-gap:16px;row-gap:16px;align-items:start}   /* F-9: Figma-like — four 16:9 cards a row at 1440, three at 1280 */
.hs-groups{display:flex;flex-direction:column;gap:20px}
.hs-grp > .hs-gh{margin:0 0 8px}
.hs-card{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;min-width:0;border:1px solid var(--bd-tl);border-radius:var(--r-card);background:var(--lvl-0);box-shadow:var(--sh-tiny);overflow:hidden;cursor:pointer;transition:var(--tr-ui)}
@media (hover:hover){.hs-card:hover{border-color:var(--bd-2);box-shadow:var(--sh-low)}}
.hs-card:has(.hs-open:focus-visible){outline:2px solid var(--ring);outline-offset:2px}
.hs-card > *{min-width:0}
/* HF12: the card's text sits 22px in, like a panel's */
.hs-card > :not(.hs-tw){margin-left:18px;margin-right:18px}
.hs-tw{position:relative}
.hs-star{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);color:var(--fg-3);flex:none;transition:var(--tr-ui)}
@media (hover:hover){.hs-star:hover{background:var(--hover);color:var(--fg)}}
.hs-star.is-on{color:var(--star-on)}
.hs-star.is-on svg{fill:currentColor}
/* D11 (7 Oct): the name may wrap to two lines; the star and the menu sit at the end of the footer (pages/lhome.js) */
.hs-acts{display:inline-flex;align-items:center;gap:2px;flex:none;margin:-6px -6px -6px 8px}
.hs-nm{display:flex;align-items:flex-start;gap:8px;min-height:24px;margin-top:10px}
.hs-n{min-width:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);overflow-wrap:break-word;text-wrap:pretty;text-decoration:none;border-radius:var(--r-4)}
@media (hover:hover){.hs-n:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bd-2)}}
.hs-n:focus-visible{outline:none}
.hs-more{width:28px;height:28px}
.hs-meta{margin-top:1px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;margin-top:10px}
/* what changed: the measurement (number · subject · scope · window), then the finding and what it followed */
.hs-what{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.hs-wm{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-wm .hs-mn{font-size:var(--t-body);font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.hs-mn.neg{color:var(--neg)}.hs-mn.pos{color:var(--pos)}
.hs-subj{color:var(--fg-2)}
.hs-few{color:var(--fg-3);font-style:italic}
.hs-wtl{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);text-wrap:pretty}   /* v105 (no-cut): wraps whole */
p.hs-wtl.is-muted{color:var(--fg-3)}
@media (hover:hover){.hs-wtl-a:hover{text-decoration:underline;text-underline-offset:2px}}
.hs-why{color:var(--fg-3)}
/* the three numbers: label · value · change; the change column is a fixed 64px, so a value's right edge is the same in every card */
.hs-st{display:flex;flex-direction:column;border-top:1px solid var(--ln-2);padding-top:8px;margin-top:12px}
.hs-st-h{display:flex;gap:8px;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);margin-bottom:4px}
.hs-st-g{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:baseline;column-gap:10px;row-gap:4px}
.hs-st-r{display:contents}
/* v103 (Dashboard it.2 · DF13): the range word and a source's incomplete days, under the move, the whole width of the card */
.hs-st-w{grid-column:1/-1;margin:-3px 0 2px;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--text-3,var(--fg-3));text-align:right}
.hs-st-l{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-st-v{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hs-st-d{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);font-variant-numeric:tabular-nums;text-align:right}
.hs-st-d.pos,.hs-d.pos{color:var(--pos)}.hs-st-d.neg,.hs-d.neg{color:var(--neg)}
.hs-ft{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:8px;margin-bottom:14px;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg-3);white-space:nowrap}
.hs-ft .neg{color:var(--neg)}
.hs-dt{margin:0 5px;color:var(--fg-4)}
.hs-lead{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------- the mini homepage (HF14): a calm drawing of the front page, with real words and the site's colour — never grey bars ----------
   The page is drawn light in both themes, like a capture of a real site; --pc is the project colour, --pk the same colour deep enough for
   white text and for coloured words on white (≥ 4.5:1). */
.hs-th{height:58px;padding:8px 12px 0;background:color-mix(in srgb,var(--pc) 10%,var(--bg-2));overflow:hidden;border-bottom:1px solid var(--ln-3)}
.hs-pg{height:100%;display:flex;flex-direction:column;gap:5px;padding:7px 10px 0;border-radius:7px 7px 0 0;background:var(--hs-paper);color:var(--fixed-ink);box-shadow:0 0 0 1px var(--fixed-shade-06),0 4px 14px var(--fixed-shade-06);overflow:hidden;--hs-ink-2:var(--fixed-ink-2)}   /* --hs-paper is a touch grey in dark (v103-tokens.css) */
.hs-pg > *{flex:none}
.hs-nav{display:flex;align-items:center;gap:7px;height:12px}
.hs-dot{width:9px;height:9px;border-radius:2px;background:var(--pk);flex:none}
.hs-site{font-size:8px;line-height:12px;font-weight:650;color:var(--fixed-ink);white-space:nowrap;letter-spacing:-.01em}
.t-publisher .hs-site{font-family:Georgia,"Times New Roman",serif;font-size:9px;font-weight:700}
.hs-nw{font-size:7.5px;line-height:12px;color:var(--fixed-ink-2);white-space:nowrap}
.hs-col{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:1}
.hs-h{display:block;font-size:10.5px;line-height:13px;font-weight:650;color:var(--fixed-ink);letter-spacing:-.01em}
.hs-h.is-serif{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:11.5px;line-height:14px}
.hs-tsub{display:block;font-size:8px;line-height:10px;color:var(--hs-ink-2)}   /* the drawn page's sub line — its own class: it took the section .hs-sub's 12px, indent and theme ink (1.05:1 in dark) */
.hs-cta{display:inline-block;padding:0 7px;height:13px;line-height:13px;border-radius:999px;background:var(--pk);color:var(--fixed-white);font-size:7px;font-weight:600;font-style:normal;white-space:nowrap}
.hs-cta.is-o{background:transparent;color:var(--fixed-ink);box-shadow:inset 0 0 0 1px var(--fixed-shade-20)}
.hs-cta.is-w{display:block;text-align:center}
.hs-art{display:block;border-radius:5px;background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 78%,var(--fixed-white)),color-mix(in srgb,var(--pc) 32%,var(--fixed-white)));flex:0 0 34%;min-height:30px}
.hs-art.is-tall{flex:0 0 42%}
.hs-hero{display:flex;gap:8px;padding:5px 5px 5px 8px;border-radius:5px;background:color-mix(in srgb,var(--pc) 9%,var(--fixed-white))}
.hs-split{display:flex;gap:9px;min-height:44px}
.t-service .hs-split{min-height:40px}
.t-service .hs-it.is-card{padding:4px 5px}
.hs-items{display:grid;gap:5px}
.hs-items.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hs-items.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hs-it{display:flex;flex-direction:column;gap:2px;min-width:0}
.hs-img{display:block;height:13px;border-radius:3px;background:color-mix(in srgb,var(--pc) 24%,var(--fixed-white))}
.hs-irow{display:flex;align-items:baseline;justify-content:space-between;gap:4px;min-width:0}
.hs-in{font-size:7px;line-height:9px;color:var(--fixed-ink);white-space:nowrap;overflow:hidden;min-width:0}
.hs-ip{font-size:7px;line-height:9px;font-weight:650;color:var(--fixed-ink)}
.hs-it.is-card{flex-direction:row;align-items:center;gap:4px;padding:5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--fixed-shade-09)}
.hs-dotc{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--pc) 60%,var(--fixed-white));flex:none}
.hs-center{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding-top:1px}
.hs-ctas{display:flex;gap:4px}
.hs-app{display:flex;gap:6px;flex:1 1 auto;margin:0 18px;padding:6px 6px 0;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--pc) 7%,var(--fixed-white));box-shadow:inset 0 0 0 1px var(--fixed-shade-07)}
.hs-app-side{display:block;width:16%;border-radius:3px;background:color-mix(in srgb,var(--pc) 16%,var(--fixed-white))}
.hs-app-main{flex:1;display:flex;align-items:flex-end;gap:4px;padding:4px 4px 0}
.hs-cb{display:block;flex:1;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--pc) 70%,var(--fixed-white))}
.hs-kick{font-size:7px;line-height:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pk)}
.hs-form-m{display:flex;flex-direction:column;gap:4px;flex:0 0 40%;padding:6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--fixed-shade-09)}
.hs-fld{display:block;height:13px;line-height:13px;padding:0 4px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--fixed-shade-14);font-size:7px;color:var(--fixed-ink-2)}

/* the owner's one site: the card at full width, the picture on the left */
.hs-one{display:flex;flex-direction:column;gap:16px}
.hs-card.is-wide{grid-row:auto;grid-template-rows:none;grid-template-columns:300px minmax(0,1fr);grid-auto-rows:auto}
.hs-card.is-wide > .hs-tw{grid-column:1;grid-row:1 / span 6}
.hs-card.is-wide > :not(.hs-tw){grid-column:2}
.hs-card.is-wide .hs-th{height:100%;min-height:200px;padding:22px}
.hs-card.is-wide .hs-pg{height:auto;padding-bottom:10px;border-radius:7px}
.hs-card.is-wide .hs-st{max-width:520px}
.hs-another{display:flex;align-items:center;gap:14px;padding:16px 22px}
.hs-another b{display:block;color:var(--fg);font-weight:var(--w-semibold)}
.hs-another p{margin:2px 0 0;color:var(--fg-3);font-size:var(--t-co);line-height:var(--lh-co)}
.hs-plus{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--bg-4);color:var(--fg-3);flex:none}
.hs-none{display:flex;align-items:center;gap:12px;padding:18px 22px}
.hs-none p{margin:0;flex:1;color:var(--fg-2)}
.hs-none.is-big{flex-direction:column;text-align:center;padding:36px 22px}
.hs-none.is-big p{flex:none;color:var(--fg-3);font-size:var(--t-co)}
.sec.panel.hs-another,.sec.panel.hs-none{flex-direction:row;align-items:center;text-align:left}
.sec.panel.hs-none.is-big{flex-direction:column;text-align:center}
.hs-empty{margin:6px 0;color:var(--fg-3);font-size:var(--t-body)}
.hs-lock{display:flex;align-items:center;gap:6px;margin:-6px 0 18px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-foot{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-foot a{color:var(--link);font-weight:var(--w-medium)}
.hs-foot.hs-arch{margin-top:16px;flex-wrap:wrap}   /* Oct 7 review (§4.1): the archived projects' line under the list */

/* a group heading (client) — on the table, on the card grid and inside Needs you */
.hs-gh,.hs-gh-c{display:flex;align-items:center;gap:10px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-gh{min-height:34px;padding:6px 0;border-bottom:1px solid var(--ln)}
.hs-gh b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.hs-gh .hs-wt{margin-right:2px}
.hs-gh .more{margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:var(--r-full);font-size:var(--t-co);color:var(--fg-3);font-weight:var(--w-medium)}
@media (hover:hover){.hs-gh .more:hover{background:var(--hover);color:var(--fg)}}
.hs-gh.is-in{margin-top:10px;border-bottom:1px solid var(--ln-2)}
.hs-tier{flex-wrap:wrap;row-gap:2px}.hs-tier > b{flex:none}   /* Oct 7 review (§4.1): a kind's name never breaks; its counts wrap under it on a phone */
.hs-gh.is-tr{display:block;padding:12px 0 6px}
.hs-gh-c{width:100%;flex-wrap:wrap;row-gap:2px}
.hs-gh > *,.hs-gh-c > *{white-space:nowrap}

/* counts (HF8): orange = fixes waiting for your approval, nothing else; red = blocked fixes and data sources */
.hs-wt,.hs-rd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:var(--r-full);font-size:var(--t-co);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;line-height:1}
.hs-wt{color:var(--st-orange-fg);background:var(--st-orange-bg)}
.hs-rd{color:var(--st-red-fg);background:var(--st-red-bg)}
.hs-nd{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);white-space:nowrap;color:var(--fg-2)}
.hs-nd-r{color:var(--neg)}
.hs-nd > .hs-nd-r::before{content:"·";margin-right:6px;color:var(--fg-4)}
.hs-nd > .hs-nd-r:first-child::before{content:none;margin:0}

/* ---------- the project table (HF6 · HF7 · HF11) ----------
   Row 1: ☆ · Project · the chosen columns; row 2: What changed, the full width under the project (lined up with its name). The column widths
   are variables, so they tighten at 1380; at 1100 and narrower the table scrolls sideways inside its panel, the project kept in view. */
.hs-tblw{padding-top:6px;overflow:clip}   /* clip, not hidden: the sticky table head (C-19) sticks to the page, not to this panel */
.hs-tscroll{overflow-x:auto;margin:0 -8px;padding:0 8px;scrollbar-width:thin}
.hs-tbl{--w-sel:18px;--w-star:20px;--w-name:150px;--w-cl:minmax(100px,.6fr);--w-grp:minmax(120px,.6fr);--w-state:minmax(170px,1fr);--w-needs:96px;--w-iss:128px;--w-goal:minmax(176px,.8fr);--w-num:88px;--w-ai:88px;--w-meas:64px;--w-data:minmax(136px,.55fr);--w-rep:60px;--w-own:52px;--w-wait:110px;--w-month:120px;--w-health:104px;--w-tags:110px}
.hs-tbl .tbl-h,.hs-tbl .tbl-r{grid-template-columns:var(--tc);column-gap:10px}
.hs-tbl .tbl-h{height:auto;min-height:36px;align-items:end;padding-top:4px;padding-bottom:6px}
.hs-tbl .tbl-h > div{min-width:0;display:flex;align-items:flex-end}
.hs-tbl .tbl-h > div.r{justify-content:flex-end;text-align:right}
.hs-tbl .tbl-h button{white-space:normal;text-align:left;line-height:var(--lh-co);align-items:flex-end}
.hs-tbl .tbl-h button.r{text-align:right;justify-content:flex-end}
.hs-tbl .tbl-h button svg{flex:none;margin-bottom:2px}
.hs-tbl .tbl-r{align-items:center;row-gap:3px;min-height:56px;padding-top:10px;padding-bottom:10px;cursor:pointer}
.hs-tbl .tbl-r > *{grid-row:1;min-width:0}
.hs-tbl .tbl-r > .c-change{grid-row:2;grid-column:2 / -1;padding-left:34px}
@media (hover:hover){.hs-tbl .tbl-r:hover{background:var(--hover-solid)}}
.hs-tbl .tbl-r:has(.hs-rl:focus-visible){outline:2px solid var(--ring);outline-offset:-2px}
.hs-tbl .tbl-r .hs-rl:focus-visible{outline:none}
.hs-tbl .num{text-align:right;justify-content:flex-end}
.hs-tbl .hs-star{width:24px;height:24px;margin-left:-2px}
.hs-pc{display:flex;align-items:center;gap:10px;min-width:0}
.hs-pc-t{display:flex;flex-direction:column;min-width:0;flex:1}
.hs-pc-t .k{color:var(--fg);font-weight:var(--w-medium);white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hs-pc-t .u{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-pc-own{display:none;flex:none}
.hs-chg{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-chg .hs-mn{font-size:var(--t-co);font-weight:var(--w-semibold);color:var(--fg)}
.hs-chg.is-muted{color:var(--fg-3)}
.hs-num{display:flex;flex-direction:column;align-items:flex-end}
.hs-num > span:first-child{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.hs-num b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.hs-d{font-size:var(--t-co);color:var(--fg-3);font-variant-numeric:tabular-nums}
.hs-num .u{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3)}
.hs-0{color:var(--fg-4)}
.hs-dim{color:var(--fg-3)}
.hs-tbl .c-data,.hs-tbl .c-report,.hs-tbl .c-client{font-size:var(--t-co);line-height:var(--lh-co)}
.hs-tbl .tbl-r > .c-measuring{font-variant-numeric:tabular-nums;color:var(--fg)}
.hs-own{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hs-own-n{display:none}
@media (max-width:1380px){
  /* the Owner column folds into the project cell (its avatar beside the name) — nothing is dropped */
  .hs-tbl{--w-needs:88px;--w-iss:112px;--w-goal:minmax(150px,.7fr);--w-state:minmax(150px,.9fr);--w-num:80px;--w-ai:80px;--w-meas:56px;--w-data:minmax(124px,.5fr);--w-rep:56px;--w-own:0px}
  .hs-tbl .tbl-h > .c-owner,.hs-tbl .tbl-r > .c-owner{display:none}
  .hs-tbl.has-own .hs-pc-own{display:inline-flex}
  .hs-nd-w{display:none}
  .hs-nd > .hs-nd-w + .hs-nd-r::before{content:none;margin:0}
}
@media (max-width:1100px){
  .hs-tbl{min-width:880px}
  /* the What-changed line stays in the visible part while the row scrolls sideways */
  .hs-tscroll{container-type:inline-size}
  .hs-tbl .tbl-r > .c-change{position:sticky;left:30px;max-width:calc(100cqw - 46px);z-index:1}
  .hs-tbl .tbl-r > .c-star,.hs-tbl .tbl-r > .c-name,.hs-tbl .tbl-h > .c-star,.hs-tbl .tbl-h > .c-name{position:sticky;z-index:1;background:var(--lvl-0)}
  .hs-tbl .c-star{left:0}.hs-tbl .c-name{left:30px}
  @media (hover:hover){.hs-tbl .tbl-r:hover > .c-star,.hs-tbl .tbl-r:hover > .c-name{background:var(--hover-solid)}}
}

/* Add a website: a centred card, 560px */
.hs-narrow{width:100%;max-width:560px;margin:8px auto 0}
.hs-page.is-new .hs-narrow{margin-top:24px}
.hs-page.is-empty .hs-narrow{margin-left:0}   /* fix round 1: the add-site card starts under the page head, not centred beside a hole */
.hs-add{padding:24px 28px 22px}
.hs-add-t{margin:0;font-size:var(--t-t2);line-height:var(--lh-t2);font-weight:var(--w-semibold);color:var(--fg)}
.hs-add-s{margin:4px 0 18px;color:var(--fg-3)}
.hs-form{display:flex;flex-direction:column;gap:16px}
.hs-f{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.hs-fl{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg);padding:0}
.hs-fh{margin:-2px 0 2px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-f .hs-fh:last-child{margin:0}
/* HF13: the address and the market are the same width */
input.hs-in,.hs-sel{height:32px;width:100%;max-width:320px;padding:0 10px;border-radius:var(--r-8);border:1px solid var(--bd-2);background:var(--bg);font:inherit;font-size:var(--t-body);color:var(--fg)}
input.hs-in[aria-invalid="true"]{border-color:var(--neg)}
.hs-bad{font-size:var(--t-co);line-height:var(--lh-co);color:var(--neg)}
.hs-radios{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.hs-radio{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--r-8);cursor:pointer;border:1px solid transparent}
@media (hover:hover){.hs-radio:hover{background:var(--hover)}}
.hs-radio.is-on{background:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.hs-radio input{margin:2px 0 0;accent-color:var(--accent);flex:none}
.hs-rt{display:flex;flex-direction:column;min-width:0}
.hs-rt b{font-weight:var(--w-medium);color:var(--fg)}
.hs-rt span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-add-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.hs-lnk{font-size:var(--t-body);color:var(--link);font-weight:var(--w-medium)}
.hs-lnk.is-q{font-size:var(--t-co);color:var(--fg-3);font-weight:var(--w-regular)}
@media (hover:hover){.hs-lnk.is-q:hover{color:var(--link)}}
.hs-steps{list-style:none;display:flex;flex-direction:column;gap:6px;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--ln-2);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-steps li{display:flex;align-items:center;gap:8px}
.hs-sn{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-full);background:var(--bg-3);font-size:var(--t-sh);font-weight:var(--w-semibold);color:var(--fg-2);flex:none}

/* ---------- Clients ---------- */
.hs-ctbl .tbl-h,.hs-ctbl .tbl-r{grid-template-columns:minmax(160px,1.2fr) minmax(120px,1fr) 92px 84px 104px 128px 136px 112px;column-gap:12px}
.hs-ctbl .tbl-h{height:auto;min-height:36px;align-items:end;padding-bottom:6px}
.hs-ctbl .tbl-h > div{min-width:0;line-height:var(--lh-co)}
.hs-ctbl .tbl-h > .r{text-align:right}
.hs-ctbl .tbl-r{min-height:56px;cursor:pointer}
.hs-ctbl .tbl-r > *{min-width:0}
@media (hover:hover){.hs-ctbl .tbl-r:hover{background:var(--hover-solid)}}
.hs-ctbl .tbl-r:has(.hs-rl:focus-visible){outline:2px solid var(--ring);outline-offset:-2px}
.hs-ctbl .tbl-r .hs-rl:focus-visible{outline:none}
.hs-ctbl .u{font-size:var(--t-co);color:var(--fg-3)}
.hs-ctbl .c-nd,.hs-ctbl .c-wc{text-align:right;justify-content:flex-end;display:flex}
.hs-ctbl .c-nd .hs-nd{gap:4px}
.hs-ctbl .hs-lead{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-co)}
.hs-ctbl .hs-lead span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-chiprow{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.hs-pchip{display:inline-flex;align-items:center;gap:6px;height:auto;min-height:24px;max-width:100%;padding:4px 9px 4px 4px;border-radius:var(--r-full);background:var(--bg-3);font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.hs-pchip:hover{background:var(--bg-5)}}
.hs-pchip .hs-logo{border-radius:var(--r-4)}
.hs-pchip > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hs-pchip > span:not(.hs-logo){white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:16px}   /* the name wraps (2 lines at most), never "…" */
.hs-portal{display:flex;flex-direction:column;min-width:0;font-size:var(--t-co);line-height:var(--lh-co)}
.hs-portal .u{white-space:normal;overflow:visible;text-overflow:clip}
@media (max-width:1380px){
  /* HF7: Portal and Account lead stay at 1280 — the widths give way instead */
  .hs-ctbl .tbl-h,.hs-ctbl .tbl-r{grid-template-columns:minmax(136px,1fr) minmax(120px,1fr) 76px 72px 88px 112px 112px 104px;column-gap:10px}
}
@media (max-width:1100px){
  .hs-tblw{overflow-x:auto}
  .hs-ctbl{min-width:880px}
  .hs-ctbl .tbl-r > .c-cl,.hs-ctbl .tbl-h > .c-cl{position:sticky;left:0;z-index:1;background:var(--lvl-0)}
  @media (hover:hover){.hs-ctbl .tbl-r:hover > .c-cl{background:var(--hover-solid)}}
}
.hs-addcl{padding:18px 22px}
.hs-addcl h2{margin:0 0 12px;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold)}
.hs-addcl .hs-form.is-row{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
.hs-addcl .hs-f{flex:1 1 200px}
.hs-addcl .hs-add-f{margin:0}
.hs-note{margin:8px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}

/* the client status and the neutral chips (HF8, ui/clientstatus.js): no state or verdict colour — a glyph tells them apart */
.cs-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;border-radius:var(--r-full);background:var(--bg-3);color:var(--fg-2);font-size:var(--t-co);line-height:1;font-weight:var(--w-medium);white-space:nowrap;justify-self:start;flex:none}
.cs-g{display:block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--fg-2)}
.cs-chip.is-onboarding .cs-g{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-2)}
.cs-chip.is-review .cs-g{background:linear-gradient(90deg,var(--fg-2) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--fg-2)}
.cs-chip.is-paused{background:transparent;color:var(--fg-3);box-shadow:inset 0 0 0 1px var(--bd-2)}
.cs-chip.is-paused .cs-g{width:7px;height:8px;border-radius:0;background:linear-gradient(90deg,var(--fg-3) 0 35%,transparent 35% 65%,var(--fg-3) 65%)}
.cs-chip.is-can .cs-g{width:4px;height:7px;margin:0 2px -1px 1px;border-radius:0;background:transparent;border:solid var(--fg-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-1px)}
.cs-chip.is-view .cs-g{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-3)}

/* the client drawer — a dialog (HF3) */
.hs-dw-bd{position:fixed;inset:0;z-index:600;background:var(--scrim-soft);display:flex;justify-content:flex-end}
.hs-dw{width:min(460px,100%);height:100%;display:flex;flex-direction:column;background:var(--elev);border-left:1px solid var(--bd);box-shadow:var(--sh-high);animation:hs-dw var(--dur-3) var(--ease-out)}
@keyframes hs-dw{from{transform:translateX(16px);opacity:.6}}
@media (prefers-reduced-motion:reduce){.hs-dw{animation:none}}
.hs-dw-h{display:flex;align-items:center;gap:10px;padding:16px 14px 14px 22px;border-bottom:1px solid var(--ln-2)}
.hs-dw-h h2{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.hs-dw-h p{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-dw-means{margin:0;padding:10px 22px;border-bottom:1px solid var(--ln-2);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);background:var(--bg-2)}
.hs-dw-means b{font-weight:var(--w-semibold);color:var(--fg)}
.hs-x{width:28px;height:28px}
.hs-dw-b{flex:1;overflow-y:auto;padding:4px 22px 28px}
.hs-dsec{padding:14px 0;border-bottom:1px solid var(--ln-3)}
.hs-dsec:last-child{border-bottom:0}
.hs-dsec h3{margin:0 0 8px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-semibold);color:var(--fg-3)}
.hs-dsec .hs-row.mn-g{grid-template-columns:132px minmax(0,1fr) 0 14px;min-height:42px}
.hs-person{display:flex;align-items:center;gap:10px}
.hs-person b{display:block;font-weight:var(--w-medium);color:var(--fg)}
.hs-person .u{display:block;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-person + .hs-person{margin-top:10px}
.hs-kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;min-height:30px}
.hs-k{font-size:var(--t-co);color:var(--fg-3)}
.hs-v{color:var(--fg)}
.hs-addr{display:inline-flex;align-items:center;gap:4px;min-width:0}
.hs-addr code{font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-co);color:var(--fg-2);min-width:0;overflow-wrap:anywhere}
.hs-addr .ib{width:26px;height:26px}
.hs-p{margin:0;color:var(--fg-2)}
.hs-li{margin:4px 0 0;font-size:var(--t-co);color:var(--fg-3)}
.hs-dl{display:inline-flex;align-items:center;gap:3px;margin-top:8px;font-size:var(--t-co);font-weight:var(--w-medium);color:var(--link)}
.hs-ta{width:100%;min-height:72px;padding:8px 10px;border-radius:var(--r-8);border:1px solid var(--bd-2);background:var(--bg);font:inherit;font-size:var(--t-body);color:var(--fg);resize:vertical}

/* ---------- night build Oct 8 — Home (plan §A1–A15, _research/2026-10-07-chatgpt-home-review.md) ----------
   A2 the three summaries · A3 Needs you's order · A5–A8 the lighter card (scope labels, the goal row, the data line, the fold) · A6 Compact ·
   A9 the toolbar's two rows on a phone · A11 the owner's site · A12 phones · A14 40px touch targets · A15 Work in progress */
.hs-page > .pl-hd + .hs-sums{margin-top:-6px}
.hs-sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 20px}
.hs-sum{display:flex;align-items:flex-start;gap:10px;min-width:0;min-height:44px;padding:9px 12px;border:1px solid var(--ln-2);border-radius:var(--r-12);background:var(--lvl-0);color:var(--fg);text-decoration:none;transition:var(--tr-ui)}
@media (hover:hover){.hs-sum:hover{border-color:var(--bd-2);background:var(--hover-solid)}}
.hs-sum-n{flex:none;min-width:22px;font-size:var(--t-t2);line-height:var(--lh-t2);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;color:var(--fg-3)}
.hs-sum-n.is-or{color:var(--st-orange-fg)}.hs-sum-n.is-rd{color:var(--st-red-fg)}.hs-sum-n.is-gr{color:var(--st-green-fg)}
.hs-sum-t{display:flex;flex-direction:column;min-width:0}
.hs-sum-l{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg)}
.hs-sum-s{font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg-3);overflow-wrap:anywhere}
.hs-sum.is-zero .hs-sum-l{color:var(--fg-2)}
.hs-calm{display:flex;align-items:flex-start;gap:8px;margin:-8px 0 20px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-calm > svg{flex:none;margin-top:2px}
.hs-page > .xs-stop.hs-stop{margin:0 0 16px}
/* Needs you: the one number in words, what needs a person counted apart, the reason of each row first */
.hs-needs.is-top .sec-hd{flex-wrap:wrap;row-gap:2px;padding-bottom:8px}
.hs-needs .sec-hd .sv-i{margin-left:-6px}
.hs-nwords{display:inline-flex;flex-wrap:wrap;gap:2px 10px;min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-nwords > .is-apart{color:var(--neg-ink)}
.hs-whyk{font-weight:var(--w-medium);color:var(--fg-2)}
.hs-showing{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-6px 0 16px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-showing a{color:var(--link);font-weight:var(--w-medium)}
.hs-sec-h .hs-create{flex:none;align-self:center}
/* the toolbar (A9): the search, then filter · sort · view · columns · count — one line on a desk, two rows on a phone */
.hs-bar-t{display:contents}
/* the card (A5): nm · meta · chips · the stop banner · top change · main goal · the tail (fold + footer); Compact has no drawing (A6) */
.hs-card.is-compact{grid-row:span 7}
/* A6: the drawing is the old one at 72% (zoom, so its layout shrinks too) — the whole front page reads smaller, never a line cut through the middle */
.hs-card .hs-th > .hs-pg{zoom:.72;height:84px}
.hs-cntw{display:flex;flex-direction:column;min-width:0}
.hs-card .xs-stop.is-card{margin:10px 0 0;padding:8px 10px;gap:8px;flex-wrap:wrap;font-size:var(--t-co);line-height:var(--lh-co);border-radius:var(--r-8)}
.hs-card .xs-stop.is-card > svg{margin-top:1px}
.hs-card .xs-stop.is-card .grow{flex:1 1 calc(100% - 26px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.hs-card .xs-stop.is-card .btn{margin-left:24px}
.hs-scope{margin:0 0 1px;font-size:var(--t-meta);line-height:var(--lh-meta);font-weight:var(--w-medium);color:var(--fg-3)}
.hs-tag{display:inline-flex;align-items:center;height:18px;margin-right:6px;padding:0 6px;border-radius:var(--r-full);background:var(--bg-4);color:var(--fg-2);font-size:var(--t-sh);font-weight:var(--w-medium);vertical-align:1px}
p.hs-wtl.is-sm{font-size:var(--t-co);line-height:var(--lh-co)}
.hs-goal{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:7px;border-top:1px solid var(--ln-2)}
.hs-gr{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.hs-gl{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.hs-gm{font-size:var(--t-co);color:var(--fg-3)}
.hs-gv{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);font-variant-numeric:tabular-nums}
.hs-gv > b{font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.hs-gd.pos{color:var(--pos)}.hs-gd.neg{color:var(--neg)}
.hs-gdata{display:flex;align-items:flex-start;gap:5px;margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--warn-ink)}
.hs-gdata > svg{flex:none;margin-top:3px}
.hs-gline{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.hs-tail{display:flex;flex-direction:column;align-self:start;margin-top:8px}
.hs-det{margin:0}
.hs-det > summary{margin-left:-6px}
.hs-det-b{display:flex;flex-direction:column;gap:8px;padding:6px 0 2px}
.hs-det-b .hs-st{margin-top:0}
.hs-kvs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:0;font-size:var(--t-co);line-height:var(--lh-co)}
.hs-kvs dt{color:var(--fg-3)}.hs-kvs dd{margin:0;color:var(--fg-2);overflow-wrap:anywhere}
.hs-ft .is-warn{color:var(--warn-ink)}
.hs-ft > .hs-lead{margin-left:0}   /* fix round 1: the lead, star and menu start at the card's content edge, under the freshness line */
.hs-ft > .hs-ft-issue{flex:1 1 100%;min-width:0;white-space:normal}
.hs-chg-s{color:var(--fg-3);font-weight:var(--w-medium)}
/* Latest results and Work in progress (A1 · A15) */
.hs-page > .hs-res{margin-top:24px}
.hs-wip{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.hs-wip-t{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.hs-wip-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.hs-wip-c{display:flex;flex-direction:column;gap:1px;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--ln-2);border-radius:var(--r-12);background:var(--lvl-0);color:var(--fg);text-decoration:none;transition:var(--tr-ui)}
@media (hover:hover){.hs-wip-c:hover{border-color:var(--bd-2);background:var(--hover-solid)}}
.hs-wip-l{font-size:var(--t-meta);line-height:var(--lh-meta);font-weight:var(--w-medium);color:var(--fg-3)}
.hs-wip-v{font-size:var(--t-t2);line-height:var(--lh-t2);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.hs-wip-c.is-zero .hs-wip-v{color:var(--fg-3)}
.hs-wip-s{font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg-3)}
/* the owner's site (A11): the site, its top change beside its main goal, the three numbers, one clear Open Dashboard */
.hs-mine{display:flex;flex-direction:column;gap:10px;padding:16px 16px 6px}
.hs-mine-h{display:flex;align-items:center;gap:12px;min-width:0}
.hs-mine-n{flex:1;min-width:0}
.hs-mine-n h2{margin:0;font-size:var(--t-t2);line-height:var(--lh-t2);font-weight:var(--w-semibold);color:var(--fg);overflow-wrap:anywhere}
.hs-mine-n .hs-meta{margin:1px 0 0;white-space:normal;text-wrap:balance}   /* fix round 1: "… · Canada · UK" never leaves "UK" alone */
.hs-mine-go{flex:none}
.hs-mine .hs-chips{margin-top:0}
.hs-mine-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.hs-mine-g .hs-what,.hs-mine-g .hs-goal{margin-top:0}
.hs-mine-g .hs-goal{border-top:0;padding-top:0}
.hs-mine .hs-st{max-width:620px}
.hs-mine .hs-ft{margin-top:0}
.hs-page.is-owner > .hs-another{margin-top:16px}
/* phones and narrow windows (A9 · A12 · A14) */
@media (max-width:900px){
  .hs-sums{grid-template-columns:minmax(0,1fr)}
  .hs-sum{align-items:center}
  .hs-sum-t{flex-direction:row;flex-wrap:wrap;gap:0 8px;align-items:baseline}
  .hs-mine-g{grid-template-columns:minmax(0,1fr);gap:12px}
  .hs-mine-g .hs-goal{border-top:1px solid var(--ln-2);padding-top:9px}
}
@media (max-width:640px){
  .hs-bar{row-gap:8px}
  .hs-bar-t{display:contents}   /* night fix 1 (A9 · §6.1 at 390): Views joins Filter · Sort · View on the second row; the count and + ride on the heading line */
  .hs-sites-h{position:relative}
  .hs-bar .hs-bar-end{position:absolute;top:0;right:0;height:44px;margin:0}
  .hs-sites-h > h2{display:flex;align-items:center;min-height:44px;margin:0}
  .hs-bar .prop,.hs-bar .pl-q{min-height:40px}
  .hs-bar #hs-filter .mb-l,.hs-bar #hs-sort .mb-l,.hs-bar #hs-view .mb-l,.hs-bar #hs-views .mb-l{display:none}   /* icon + chevron on a phone; each button keeps its full name (aria-label: "Sort: Needs you first") */
  .hs-needs .hs-row.is-p3{display:none}   /* A12: the top 2 on a phone — the head keeps the whole count and See all */
  .hs-card > .hs-tw{display:none}   /* A12: no drawing by default on a phone — the name, the state and the numbers come first */
  .hs-card{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
  .hs-card > .hs-nm{margin-top:14px}
  .hs-star,.hs-more,.hs-card .ib.hs-more{width:40px;height:40px}
  .hs-acts{margin:-10px -10px -10px 4px}
  .hs-det > summary{min-height:40px}
  .hs-row .btn.sm,.hs-mine-go,.hs-bar-end > .hs-create{min-height:44px}   /* night fix 1 (MOB-3, rulebook §8.6): the phone's main buttons are 44px */
  .hs-sum,.hs-wip-c{min-height:44px}
  .hs-mine{padding:16px 16px 4px}
  .hs-mine-h{flex-wrap:wrap}
  .hs-mine-go{width:100%;justify-content:center}
}

/* the workspace bell (HF4): each notification names its project */
.np-pj{display:inline-flex;align-items:center;gap:5px;font-weight:var(--w-medium);color:var(--fg-2)}
.np-pl{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:var(--r-4);color:var(--on-fill);font-size:11px;font-weight:var(--w-bold);line-height:1}
.np-sc{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}

/* a narrow window */
@media (max-width:900px){
  .hs-bar .pl-q{width:100%;flex-basis:100%;max-width:none;order:-1}
  .hs-card.is-wide{grid-template-columns:minmax(0,1fr)}
  .hs-card.is-wide > .hs-tw,.hs-card.is-wide > :not(.hs-tw){grid-column:1;grid-row:auto}
  .hs-card.is-wide .hs-th{height:84px;min-height:0}
  .hs-another{flex-wrap:wrap}
}
/* the account menu holds 13 rows: it may use the window's height (the menu kit caps menus at 440px) */
.menu[aria-label="Account"]{max-height:calc(100vh - 72px)!important}

/* ---------- v103 agency (3 Oct 2026, _research/2026-10-agency/01-study.md): Clients' "This month" column, the drawer's counts, Needs you → Waiting on
   clients, the All-projects pages (Changes, Results) and Workspace → Roles' five roles ---------- */
.hs-ctbl.is-v103 .tbl-h,.hs-ctbl.is-v103 .tbl-r{grid-template-columns:minmax(150px,1.15fr) minmax(112px,.7fr) 80px 84px minmax(128px,1fr) 92px minmax(150px,1fr) 128px 104px;column-gap:12px}   /* night fix 1: Reports gets room for "Sent Sep 5 · August" (it was 116px beside a 254px Projects column) */
.hs-ctbl .c-wd .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-ctbl .c-wd>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-wcq{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.hs-wcq .u{white-space:nowrap}
@media (max-width:1380px){.hs-ctbl.is-v103 .tbl-h,.hs-ctbl.is-v103 .tbl-r{grid-template-columns:minmax(128px,1fr) minmax(100px,.6fr) 64px 72px minmax(112px,1fr) 80px minmax(128px,.9fr) 112px 96px;column-gap:10px}}
@media (max-width:1300px){.hs-tblw:has(.hs-ctbl.is-v103){overflow-x:auto}.hs-ctbl.is-v103{min-width:1000px}.hs-ctbl.is-v103 .tbl-r>.c-cl,.hs-ctbl.is-v103 .tbl-h>.c-cl{position:sticky;left:0;z-index:1;background:var(--lvl-0, var(--bg))}}
.hs-wd{display:grid;grid-template-columns:132px minmax(0,1fr);gap:6px 12px;margin:0;font-size:var(--t-co);line-height:var(--lh-co)}
.hs-wd dt{color:var(--fg-3);font-weight:var(--w-medium)}
.hs-wd dd{margin:0;color:var(--fg);font-variant-numeric:tabular-nums}
.hs-dw-acts{display:flex;align-items:center;gap:8px;margin-top:10px}
.hs-dw-acts .more{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-co);color:var(--fg-3);font-weight:var(--w-medium)}
.hs-sub{display:block;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);margin-left:8px}
#hs-onclient .hs-gh .btn.sm{margin-left:auto}
#hs-onclient .hs-gh .btn.sm+.more{margin-left:0}
/* All projects: Changes and Results */
.ag-tile{display:inline-grid;place-items:center;border-radius:var(--r-4);color:var(--on-fill);font-size:11px;font-weight:var(--w-semibold);flex:none}
.ag-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:4px 0 8px}
.ag-sc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--ln-2);border-radius:var(--r-12);background:var(--bg);text-align:left;min-width:0;cursor:pointer}
@media (hover:hover){.ag-sc:hover{background:var(--hover-solid)}}
.ag-sc.is-on{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 16%,transparent)}
.ag-sc-h{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.ag-sc-h b{font-weight:var(--w-semibold);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-sc-n{font-size:var(--t-co);color:var(--fg-2);font-variant-numeric:tabular-nums}
.ag-sc-v{font-size:var(--t-co);color:var(--fg-3)}
.ag-list{display:flex;flex-direction:column}
.ag-row{display:grid;grid-template-columns:minmax(150px,.9fr) 132px minmax(0,2.4fr) 150px;gap:12px;align-items:center;min-height:48px;padding:6px 8px;border-bottom:1px solid var(--ln-3);border-radius:var(--r-8);cursor:pointer;color:var(--fg)}
.ag-row.is-res{grid-template-columns:132px minmax(150px,.9fr) minmax(0,2.4fr) 96px}
.ag-row.is-h{min-height:30px;cursor:default;font-size:var(--t-co);color:var(--fg-3);font-weight:var(--w-medium);border-radius:0}
@media (hover:hover){.ag-row:not(.is-h):hover{background:var(--hover-solid)}}
.ag-cl{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--t-co);font-weight:var(--w-medium)}
.ag-cl>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-t{display:flex;flex-direction:column;min-width:0}
.ag-t b{font-weight:var(--w-medium);font-size:var(--t-body);line-height:var(--lh-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-t .u,.ag-st .u{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-st,.ag-who{min-width:0}
.ag-d{font-size:var(--t-co);color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums}
.ag-page .f-g{padding:12px 8px 4px;font-size:var(--t-co);font-weight:var(--w-semibold);color:var(--fg-3)}
@media (max-width:1100px){.ag-row{grid-template-columns:minmax(120px,.8fr) minmax(0,2fr) 132px}.ag-row>.ag-who{display:none}.ag-row.is-res{grid-template-columns:120px minmax(110px,.8fr) minmax(0,2fr)}.ag-row.is-res>.ag-d{display:none}}
/* Workspace → Roles: the five agency roles */
.ag-roles .stg-part{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ag-rolep{display:flex;flex-wrap:wrap;gap:6px}
.ag-rolep .stg-uc{white-space:nowrap}
.hs-dw .hs-addr{min-width:0;display:flex;align-items:center;gap:4px}
.hs-dw .hs-addr code{min-width:0;overflow-wrap:anywhere;word-break:break-all}

/* ---------- v107 (his order, Oct 4): logo first + toggle at the row's end; collapsed: the toggle in the header, a labelled rail (short names under the icons), numbered badges ---------- */
.app.v89 .sb-top .sb-brand{padding:0 8px}
.app.v89 .topbar > .sb-toggle{margin:0 6px 0 -6px}
.app.v89 .sb.is-rail{padding:8px 6px}
.app.v89 .sb.is-rail .nav-i .lb,.app.v89 .sb.is-rail .sb-search .lb{display:block;max-width:62px;font-size:10.5px;line-height:13px;font-weight:var(--w-medium);text-align:center;white-space:nowrap;color:inherit}
.app.v89 .sb.is-rail .sb-run{min-height:32px}

/* ===== HOME-SPEC (8 Oct 2026, night — _research/night-home-research/HOME-SPEC.md): one Home for the solo owner, the agency and the large company =====
   the status line · the portfolio strip · Since you last looked · Needs you (segments, the "Also" line, lanes, admin lines, the promise) · the card's
   slot order with a 16:9 frame (F-9) and a trend in its usual band · Compact · the Comfortable / Dense table, sticky header, peek, bulk, pager · the
   solo owner's "Today" with its right rail · health, tags, saved views. Colour: one glyph per state, words in body ink (H3, H4); tokens only. */
.hs-page.is-solo .pl-hd,.hs-page.is-t1 .pl-hd,.hs-page.is-t2 .pl-hd,.hs-page.is-t3 .pl-hd,.hs-page.is-t4 .pl-hd{margin-bottom:8px}
.hs-status{color:var(--fg-2)}
/* the state glyph: the only colour on a state line (H3) — Data problem red · Needs a person orange · Unknown grey, dashed · Waiting grey · Being measured teal · Quiet faint */
.hs-sg{display:inline-grid;place-items:center;flex:none;color:var(--fg-3)}
.hs-sg.is-data{color:var(--neg-ink)}.hs-sg.is-person{color:var(--warn-ink)}.hs-sg.is-unknown{color:var(--fg-3)}.hs-sg.is-unknown svg{stroke-dasharray:3 2.2}.hs-sg.is-others{color:var(--fg-3)}.hs-sg.is-measuring{color:var(--teal-ink)}.hs-sg.is-quiet{color:var(--fg-4)}
.hs-state{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg);min-width:0}
.hs-state > .hs-sg{margin-top:1px}
.hs-state-w{min-width:0;overflow-wrap:anywhere}
.hs-cnt{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-cnt b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.hs-cnt .hs-dt{margin:0 5px}
.hs-stc{display:inline-flex;align-items:flex-start;gap:6px;min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.hs-stc > .hs-sg{margin-top:1px}
.hs-stc-w{min-width:0;overflow-wrap:anywhere}
.hs-new{display:inline-block;width:6px;height:6px;margin:8px 0 0 2px;border-radius:var(--r-full);background:var(--accent);flex:none}
/* F-9: a Figma-like 16:9 frame of the front page — the drawing scaled to fill it; dimmed in dark, never inverted (C-29) */
.hs-tw.is-169{overflow:hidden;container-type:inline-size}
.hs-tw.is-169 > .hs-th{height:auto;aspect-ratio:16 / 9;padding:12px 14px 0}
.hs-card .hs-tw.is-169 .hs-th > .hs-pg,.hs-mine .hs-tw.is-169 .hs-th > .hs-pg{zoom:1;height:auto;min-height:100%;padding-bottom:8px}
@container (min-width:300px){.hs-card .hs-tw.is-169 .hs-th > .hs-pg,.hs-mine .hs-tw.is-169 .hs-th > .hs-pg{zoom:1.22}}
@container (min-width:360px){.hs-card .hs-tw.is-169 .hs-th > .hs-pg{zoom:1.36}}
.hs-mine > .hs-tw.is-169{border:1px solid var(--ln-2);border-radius:var(--r-8)}
:root[data-theme="dark"] .hs-tw.is-169 > .hs-th,:root[data-theme="dark"] .hs-card > .hs-tw > .hs-th{filter:brightness(.8) saturate(.92);border-bottom-color:var(--ln-2)}   /* fix round 1 (C-29/AT-33): the cards' bands are dimmed in dark too — never inverted */
/* the main goal: label · value · move · range word, the trend in its usual band at the right (C-7) */
.hs-gvr{display:flex;align-items:center;gap:10px;min-width:0}
.hs-gvr > .hs-gv{flex:1;min-width:0}
.hs-gws{display:flex;flex-wrap:wrap;gap:0 8px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-gv.is-none > b{color:var(--fg-3)}
.hs-gw{color:var(--fg-3)}
.hs-gst{font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg-2)}
.hs-gst.is-blue{color:var(--blue-ink)}.hs-gst.is-orange{color:var(--warn-ink)}
.hs-goal.is-err{gap:6px}
.hs-err-b{display:flex;gap:6px}
.hs-spark{flex:none;display:block;overflow:visible}
.hs-spark .hs-spark-band{fill:var(--fill-2)}
.hs-spark .hs-spark-l{stroke:var(--fg-3);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.hs-spark .hs-spark-d{fill:var(--fg-2)}
.hs-spark .hs-spark-gap{stroke:var(--fg-4);stroke-width:1.5;stroke-dasharray:2 3;stroke-linecap:round}   /* fix round 1 (B1): days with no data yet — never drawn as zero */
.hs-goal.is-rail .hs-gvr{display:contents}
.hs-goal.is-rail .hs-gv{order:1}.hs-goal.is-rail .hs-gws{order:2}
.hs-card .hs-gvr .hs-spark{width:72px;height:22px}
.hs-goal.is-rail .hs-spark{width:100%;order:3;margin-top:4px}
/* the card's top change: 2 lines at most — the whole sentence is one click away, and in its tooltip */
.hs-card .hs-what .hs-wtl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hs-card .hs-what .hs-mn{font-weight:var(--w-semibold);color:var(--fg)}
.hs-fresh{min-width:0;white-space:normal;color:var(--fg-3)}
.hs-fresh.is-part{color:var(--blue-ink)}
p.hs-fresh{margin:0;font-size:var(--t-meta);line-height:var(--lh-meta)}
.hs-card .hs-ft{row-gap:2px}
.hs-ft > .hs-fresh{flex:1 1 100%;min-width:0}   /* the freshness line takes its own line; the lead, star and menu sit under it at the end */
/* C-22: Compact — no frame, meta on one line, the goal and its trend on one line, the top change on one line */
.hs-card.is-compact .hs-goal.is-line{padding-top:5px;margin-top:6px;gap:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center}   /* fix round 1: the trend on the label line (see below) */
.hs-card.is-compact .hs-goal.is-line .hs-gv{flex-wrap:nowrap;white-space:nowrap;min-width:0;grid-column:1 / -1;grid-row:2}   /* night fix 1: the words cut with "…" in .hs-gwr (an ellipsis on this flex box did nothing); the scope shows (A7) */
.hs-card.is-compact .hs-goal.is-line .hs-gv > b{font-size:var(--t-body);line-height:var(--lh-body)}
.hs-card.is-compact .hs-what{margin-top:2px}
.hs-card.is-compact .hs-what .hs-wtl{-webkit-line-clamp:1;font-size:var(--t-co);line-height:var(--lh-co)}
.hs-card.is-compact .hs-tail{margin-top:0}
.hs-card.is-compact .hs-ft{flex-wrap:nowrap;column-gap:6px;margin-top:2px;margin-bottom:8px}   /* fix round 1 (AT-27): one line — the freshness words cut last */
.hs-card.is-compact > .hs-nm{margin-top:12px}
.hs-card.is-compact .hs-state{margin-top:4px}
.hs-card.is-compact .hs-state-w{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* fix round 1 (AT-27): the state may take 2 lines — "Stripe failing since Sep 11 — numbers 4 days stale" was cut at "nu…" */
/* keyboard: the row J/K reached carries the one ring (ui/keys.js .is-kf) */
.hs-card.is-kf,.hs-row.is-kf,.hs-tr.is-kf{outline:2px solid var(--ring);outline-offset:-2px}
/* R3 · since you last looked — one line, opens to the events */
.hs-since{display:flex;align-items:flex-start;gap:8px;margin:-4px 0 8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-since.is-none{align-items:center;color:var(--fg-3)}
.hs-since-d{flex:1;min-width:0}
.hs-since-d > summary{display:block;cursor:pointer;list-style:none;padding:3px 0 3px 18px;position:relative;border-radius:var(--r-6)}
.hs-since-d > summary::-webkit-details-marker{display:none}
.hs-since-d > summary::before{content:"";position:absolute;left:4px;top:9px;border:4px solid transparent;border-left-color:var(--fg-3);border-right-width:0}
.hs-since-d[open] > summary::before{transform:rotate(90deg);transform-origin:2px 4px}
.hs-since-d > summary b{font-weight:var(--w-semibold);color:var(--fg)}
.hs-since-b{display:flex;flex-direction:column;gap:8px;padding:6px 0 4px 18px}
.hs-ev-g{display:flex;flex-direction:column;gap:2px}
.hs-ev-s{display:flex;align-items:center;gap:6px;margin:0;color:var(--fg)}
.hs-ev-s b{font-weight:var(--w-semibold)}
.hs-ev{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:8px;margin:0 0 0 22px}
.hs-ev-k{color:var(--fg-3)}
.hs-ev a{color:var(--fg-2);text-decoration:none;min-width:0}
@media (hover:hover){.hs-ev a:hover{text-decoration:underline;text-underline-offset:2px}}
.hs-ev-d{color:var(--fg-3);font-variant-numeric:tabular-nums}
.hs-ev-more{margin:0 0 0 22px;color:var(--fg-3)}
.hs-seen{flex:none}
/* R2 at scale: the portfolio strip — counts with a glyph each, every count a filter */
.hs-strip{display:flex;flex-direction:column;gap:2px;margin:-4px 0 12px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-strip-l{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0}
.hs-strip-n{font-weight:var(--w-semibold);color:var(--fg);margin-right:2px}
.hs-strip-k{color:var(--fg-3);margin-right:6px}
.hs-strip-u{margin-left:8px;color:var(--fg-3)}
.hs-strip .sv-i{margin-left:4px}
.hs-sx{display:inline-flex;align-items:center;gap:4px;padding:1px 4px;border-radius:var(--r-6);color:var(--fg-2);text-decoration:none}
.hs-sx b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
@media (hover:hover){.hs-sx:hover{background:var(--hover);color:var(--fg)}}
.hs-sx[aria-current="true"]{text-decoration:underline;text-underline-offset:3px;color:var(--fg)}
/* R4 · Needs you: the head's segments (links), the counted-apart words, the lines under the rows */
.hs-seg{color:var(--fg-2);text-decoration:none;border-radius:var(--r-4)}
@media (hover:hover){.hs-seg:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}}
.hs-apart{color:var(--fg-3)}
.hs-scl{font-size:var(--t-co);color:var(--fg-3);margin-left:-4px}
.hs-needs.is-top .hs-row .k{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hs-needs.is-top .hs-row .u{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.hs-more2,.hs-lane,.hs-promise,.hs-admin,.hs-roll,.hs-vline{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:0;padding:8px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-more2{padding-top:6px}
.hs-mq-p,.hs-more2.is-ph,.hs-lane .is-ph{display:none}
.hs-promise > span{flex:1 1 0;min-width:0}
.hs-needs.is-top.sv-tbl{padding-top:10px;padding-bottom:10px}
.hs-needs.is-top .hs-row.mn-g{padding-top:5px;padding-bottom:5px;min-height:44px}
.hs-needs.is-top .hs-lane{padding-top:6px}
.hs-needs.is-top .hs-promise{padding-top:2px;padding-bottom:0}
.hs-lane a,.hs-admin > a:not(.btn),.hs-vline a{color:var(--fg-2)}
.hs-lane-k{font-weight:var(--w-medium);color:var(--fg-2)}
.hs-lane .hs-dt{margin:0}
.hs-promise > svg,.hs-admin > svg,.hs-roll > svg,.hs-vline > svg{flex:none}
.hs-promise{padding-bottom:4px}
.hs-admin > span{flex:1 1 auto;min-width:0}
.hs-vline > span{flex:1 1 auto;min-width:0}
.hs-vline .more{margin-left:auto;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.hs-needs.is-calm{padding:12px 18px;flex-direction:row;align-items:center;gap:10px}
.hs-needs.is-calm .hs-calm{margin:0;flex:1}
.hs-roll b{font-weight:var(--w-semibold);color:var(--fg)}
/* R5 · the sites */
.hs-sites{display:flex;flex-direction:column;min-width:0}
.hs-sites-h{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:0 0 8px}
.hs-sites-h > h2{margin:4px 4px 0 0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg);flex:none}
.hs-sites-h > .hs-bar{flex:1 1 640px;margin:0;min-width:0}
.hs-bar-end{display:inline-flex;align-items:center;gap:10px;flex:none;margin-left:auto;white-space:nowrap}   /* night fix 1 (A9): the count + Add a website, one group at the row's end */
.hs-foryou{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 10px;font-size:var(--t-co);color:var(--fg-3)}
.hs-fy{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--ln-2);border-radius:var(--r-full);color:var(--fg);text-decoration:none}
@media (hover:hover){.hs-fy:hover{background:var(--hover)}}
.hs-fy-lo{color:var(--fg-2);flex-basis:100%}   /* fix round 1: "Where you left off" is its own line, never beside a wrapped chip */
.hs-bar .sv-i{margin:0 -2px}
.hs-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:8px 10px;border:1px solid var(--bd-2);border-radius:var(--r-12);background:var(--bg-2);font-size:var(--t-co)}
.hs-bulk > b{font-weight:var(--w-semibold);color:var(--fg);margin-right:4px}
.hs-bk-n{color:var(--fg-3)}
.hs-pager{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 0;font-size:var(--t-co);color:var(--fg-3)}
.hs-pg-n{font-variant-numeric:tabular-nums;color:var(--fg-2)}
/* group heads: the state roll-up with a glyph each, health, a collapse toggle at scale */
.hs-gr-st{display:inline-flex;align-items:center;gap:4px}
.hs-gt{width:24px;height:24px;margin-left:-4px;color:var(--fg-3)}
.hs-gh-h{display:inline-flex;align-items:center;gap:6px}
.hs-hc{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-co);color:var(--fg-2);white-space:nowrap}
.hs-hg{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);background:var(--fg-4);flex:none}
.hs-hc.is-on .hs-hg,.hs-hg.is-on{background:var(--fg-3)}
.hs-hc.is-risk .hs-hg,.hs-hg.is-risk{background:var(--warn)}
.hs-hc.is-off .hs-hg,.hs-hg.is-off{background:var(--neg)}
.hs-hc.is-unset .hs-hg,.hs-hc.is-due .hs-hg{background:transparent;box-shadow:inset 0 0 0 1px var(--fg-3)}
.hs-hc.is-due .hs-hg{box-shadow:none;border:1px dashed var(--fg-3);box-sizing:border-box}
/* the table: sticky head (C-19), the State column, Dense rows of one 40px line, the selected and the peeked row */
.hs-tbl .hs-cb{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.hs-tbl .tbl-r.is-sel{background:var(--accent-t)}
.hs-tbl .tbl-r.is-peek{box-shadow:inset 3px 0 0 var(--accent)}
.hs-tbl .hs-pc-t .k{display:flex;align-items:center;gap:4px}
.hs-tbl .hs-num .hs-spark{margin-left:6px;align-self:center}
.hs-tbl.is-comf .tbl-r > .c-change .hs-chg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}   /* C-19: Comfortable rows stay ≤ 80px — the whole line is in its tooltip and the peek */
.hs-tbl.is-comf .tbl-r{padding-top:8px;padding-bottom:8px}
.hs-page .pl-hd > #hs-scope{grid-area:pri;align-self:center}
.hs-tbl.is-dense .tbl-r{min-height:40px;height:40px;padding-top:0;padding-bottom:0;align-items:center}
.hs-tbl.is-dense .tbl-r > *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-tbl.is-dense .hs-pc-t .u,.hs-tbl.is-dense .hs-num .u{display:none}
.hs-tbl.is-dense .hs-pc-t .k{-webkit-line-clamp:1;white-space:nowrap;min-width:0}
.hs-tbl.is-dense .hs-pc-t .k > a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-tbl.is-dense .hs-stc,.hs-tbl.is-dense .hs-stc-w{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-tbl.is-dense .hs-stc{align-items:center;max-width:100%}
.hs-tbl.is-dense .hs-stc > .hs-sg{margin-top:0}
@media (min-width:1101px){
  .hs-tscroll{overflow:visible}
  .hs-tbl .tbl-h{position:sticky;top:var(--top-h);z-index:3;background:var(--lvl-0)}
  .hs-tbl .hs-gh.is-tr{position:relative;z-index:1}
}
/* the peek: a nonmodal panel beside the table — the table keeps its place */
.hs-tblw2{min-width:0}
.hs-tblw2.has-peek{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.hs-peek{position:sticky;top:calc(var(--top-h) + 12px);display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - var(--top-h) - 24px);overflow:auto;padding:14px 16px;border:1px solid var(--bd-tl);border-radius:var(--r-card);background:var(--lvl-0);box-shadow:var(--sh-low)}
.hs-pk-h{display:flex;align-items:flex-start;gap:10px}
.hs-pk-h h2{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.hs-pk-h .hs-meta{white-space:normal}
.hs-pk-s{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--ln-2)}
.hs-pk-s > h3{margin:0;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);color:var(--fg-3)}
.hs-pk-s .hs-state{margin:0}
.hs-pk-s .hs-goal{margin:0;padding:0;border:0}
.hs-pk-s .hs-goal .hs-gvr{flex-direction:column;align-items:stretch}
.hs-pk-s .hs-row.mn-g{grid-template-columns:minmax(0,1fr) 14px;grid-template-areas:"st st" "k k" "b ch";row-gap:4px;margin:0;padding:6px 0}   /* night fix 1: the text takes the panel's width, the button its last line (as on a phone) */
.hs-pk-s .hs-what{margin-top:0}
.hs-pk-s .hs-row.mn-g > .mn-g-st{grid-area:st}.hs-pk-s .hs-row.mn-g > .k2{grid-area:k}.hs-pk-s .hs-row.mn-g > .mn-g-b{grid-area:b;display:flex}.hs-pk-s .hs-row.mn-g > svg{grid-area:ch}
.hs-pk-f{display:flex;justify-content:flex-end;padding-top:6px}
@media (max-width:1100px){.hs-tblw2.has-peek{grid-template-columns:minmax(0,1fr)}.hs-peek{position:static;max-height:none;order:-1}}
/* the solo owner's "Today": the decision column and the site in a right rail (§5.2) */
.hs-solo{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,30vw,368px);gap:16px;align-items:start}
.hs-solo-l{display:flex;flex-direction:column;gap:16px;min-width:0}
.hs-solo-l > .sec.panel{margin:0}
@media (min-width:641px){.hs-solo .hs-row.mn-g{grid-template-columns:136px minmax(0,1fr) minmax(132px,max-content) 14px}}   /* night fix 1 (A12): the reason stays one line (pages/lhome.js shortens "Numbers stale since" to "Stale since" here) */
.hs-solo-r{position:sticky;top:calc(var(--top-h) + 16px);min-width:0}
.hs-solo-r > .hs-mine{margin:0}
.hs-mine .hs-mine-h{align-items:flex-start}
.hs-mine .hs-mine-n h2{font-size:var(--t-t3);line-height:var(--lh-t3)}
.hs-mine .hs-state{margin:0}
.hs-mine .hs-goal{margin:0;padding-top:8px}
.hs-mine .hs-mine-go{justify-content:center}
.hs-mine .hs-det{margin:0 0 4px}
.hs-rns{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--ln-2)}
.hs-rn{display:grid;grid-template-columns:minmax(0,1fr) auto auto 64px;align-items:center;column-gap:8px;font-size:var(--t-co);line-height:var(--lh-co)}
.hs-rn-l{color:var(--fg-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-rn-v{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.hs-rn-d{color:var(--fg-3);font-variant-numeric:tabular-nums}
.hs-rn-d.neg{color:var(--neg)}.hs-rn-d.pos{color:var(--pos)}
.hs-rn-w{grid-column:1 / -1;margin-top:-3px;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3)}
.hs-since.is-solo{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;font-size:inherit;color:inherit}   /* night fix 1: stretch — the head and each row span the panel, as in Needs you (.hs-since above is align-items:flex-start) */
.hs-since-acts{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:auto;white-space:nowrap}   /* Mark as seen · Explain this week stay together at the head's right */
.hs-since.is-solo .hs-calm{margin:4px 0}
.hs-since.is-solo .sec-hd{flex-wrap:wrap;row-gap:4px}
.hs-since.is-solo .hs-mn{font-weight:var(--w-semibold);color:var(--fg)}
.hs-ledger{gap:0}
.hs-led{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--ln-3);font-size:var(--t-co);line-height:var(--lh-co)}
.hs-ledger > .sec-hd + .hs-led{border-top:0}   /* fix round 1: the first row under the header (":first-of-type" never matched — the header is the first div) */
.hs-led-d{color:var(--fg-3);font-variant-numeric:tabular-nums}
.hs-led-t{min-width:0;color:var(--fg)}
.hs-led-t a{color:var(--fg);text-decoration:none}
@media (hover:hover){.hs-led-t a:hover{text-decoration:underline;text-underline-offset:2px}}
.hs-led-w{color:var(--fg-3)}
.hs-led-u{color:var(--link);font-weight:var(--w-medium);white-space:nowrap}
.hs-setup{gap:4px}
.hs-su-l{display:flex;flex-direction:column;gap:2px;margin:4px 0 0;padding:0;list-style:none}
.hs-su{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;min-height:36px;padding:8px 0;border-top:1px solid var(--ln-3);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.hs-su:first-child{border-top:0}
.hs-su-i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-full);flex:none;color:var(--fg-3)}
.hs-su.is-done .hs-su-i{color:var(--teal-ink)}
.hs-su.is-next{color:var(--fg)}.hs-su.is-next .hs-su-i{color:var(--accent-text)}
.hs-su-t{flex:1 1 220px;min-width:0}   /* fix round 1: a 2-line step keeps its icon on its first line (align-items:flex-start above) */
/* R7 · in progress, R9 · the footer */
.hs-inprog{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;margin:18px 0 6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-inprog > b{font-weight:var(--w-semibold);color:var(--fg)}
.hs-inprog .hs-dt{margin:0 6px}
.hs-inprog a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--bd-2);text-underline-offset:3px}
@media (hover:hover){.hs-inprog a:hover{color:var(--fg);text-decoration-color:currentColor}}
.hs-foot-w{display:flex;flex-direction:column;gap:6px;margin:4px 0 0}
.hs-dig{flex-wrap:wrap}
.hs-dig .hs-dt{margin:0}
.hs-dig .lk{font-size:var(--t-co);color:var(--link);font-weight:var(--w-medium)}
.hs-page.is-solo > .hs-another{margin-top:16px}
.hs-std{gap:4px;margin-top:16px}
.hs-std-l{display:flex;flex-direction:column;margin:2px 0 0;padding:0;list-style:none}
.hs-std-l > li{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1.2fr);gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--ln-3);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-std-l > li:first-child{border-top:0}
.hs-std-l b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.hs-std-f{color:var(--fg-3)}
.hs-vk{font-size:var(--t-sh);color:var(--fg-3)}
.hs-note2{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:var(--t-co);color:var(--fg-2)}
.hs-note2 .lk,.hs-empty2 .lk{color:var(--link);font-weight:var(--w-medium)}
.hs-empty2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center;margin:12px 0 0;font-size:var(--t-co);color:var(--fg-3)}
.hs-empty2 a{color:var(--link);font-weight:var(--w-medium)}
.hs-bulkadd{margin-top:12px;padding:16px 18px}
/* the sheets: saved views, Views, a tag, a lead */
.hs-vlist{display:flex;flex-direction:column}
.hs-vrow{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 0;border-top:1px solid var(--ln-3)}
.hs-vrow:first-child{border-top:0}
.hs-vrow .lk{flex:1;text-align:left;color:var(--fg);font-weight:var(--w-medium)}
/* the client's drawer: health (set by a person) with its counted facts, and tags */
.hs-hbtns{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.hs-hbtns .btn[aria-pressed="true"]{background:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.hs-facts{display:flex;flex-direction:column;margin:4px 0;padding:0;list-style:none}
.hs-facts > li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--ln-3);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-facts > li:first-child{border-top:0}
.hs-facts b{font-weight:var(--w-medium);color:var(--fg);text-align:right}
.hs-facts > li.is-warn b{color:var(--warn-ink)}
.hs-tagadd{display:flex;gap:6px;margin-top:8px}
.hs-tagadd input.hs-in{max-width:260px}
.hs-np-t{display:flex;align-items:center;gap:6px}
.hs-szw{display:flex;align-items:center;gap:2px}
.hs-szw > .hs-row{flex:1;min-width:0}
.hs-snz > summary{margin:6px 0 0 -6px}
/* phones and narrow windows */
@media (max-width:1100px){
  .hs-solo{grid-template-columns:minmax(0,1fr)}
  .hs-solo-l{display:contents}
  .hs-solo-l > .hs-needs{order:1}.hs-solo-r{order:2;position:static}.hs-solo-l > .hs-since{order:3}.hs-solo-l > .hs-ledger{order:4}.hs-solo-l > .hs-setup{order:1}
  .hs-solo-l > .hs-solo-tail{order:5}   /* fix round 1 (A12 · L3): being set up, In progress and the summary line come after the checklist and the site, as on a desk */
}
@media (max-width:760px){
  .hs-sites-h > .hs-bar{flex-basis:100%}
  .sec.panel.hs-another{flex-direction:column;align-items:stretch;gap:12px}
  .hs-another .hs-an-t{min-width:0}
  .hs-an-b{display:flex;flex-direction:column;gap:8px}
  .hs-an-b > .btn{width:100%;justify-content:center;min-height:44px}
  .hs-ev{grid-template-columns:minmax(0,1fr);gap:0;margin-left:0}
  .hs-ev-k{font-size:var(--t-sh)}
  .hs-since{flex-wrap:wrap}
  .hs-rn{grid-template-columns:minmax(0,1fr) auto auto}
  .hs-rn > .hs-spark{display:none}
  .hs-std-l > li{grid-template-columns:minmax(0,1fr) auto}
  .hs-std-f{grid-column:1 / -1}
}
@media (max-width:640px){
  .hs-mq-d{display:none}.hs-mq-p{display:inline}.hs-more2.is-ph{display:flex}.hs-lane .is-ph{display:inline}   /* H8: the phone's own count beyond its 2 rows */
  .hs-mine > .hs-tw{display:none}   /* A12: no picture on a phone — the name, the state and the numbers come first */
  .hs-mine .hs-mine-go{width:100%}
  .hs-strip{margin-top:0}
  .hs-led{grid-template-columns:44px minmax(0,1fr)}
  .hs-led-u{grid-column:2}
  .hs-card .hs-spark{display:none}
  .hs-bulk{gap:4px}
  /* §6.1 at 390: sites as compact rows — name, state, the main goal's value and move; the top change and the details are one tap away (the project) */
  .hs-card .hs-what,.hs-card .hs-det{display:none}   /* night fix 1 (MOB-8 · A7): the goal keeps its one-line scope — a bare "993 +12%" meant nothing */
  .hs-card .hs-goal{margin-top:6px;padding-top:6px}
  .hs-card .hs-ft{margin-top:4px;margin-bottom:8px}
  .hs-grid{row-gap:10px}
}

/* ===== night fix round 1 (8 Oct 2026 — the home fixer; the verifiers' findings, each with its rule) ===== */
/* A8 · A12 · HOME-SPEC §6.1 / §7.1 at 390 (MOB-1, MOB-2, MOB-8): the table becomes compact rows — logo + name, the state glyph + its words, the main
   goal's value, move and label, the needs count when there is one. The phone stack (v103-a11y.css) makes one column; `.tbl-r > *{grid-row:1}` above
   put every cell back on row 1 (one implicit 38px column each) — here the cells flow down again. Select and star sit at the row's top right. */
@container pg (max-width:760px){
  .hs-tbl .tbl-r{position:relative;row-gap:4px}
  .hs-tbl .tbl-r > *{grid-row:auto}
  .hs-tbl .tbl-r > .c-name{order:-1;position:static;justify-content:flex-start;padding-right:76px;background:none}
  .hs-tbl .tbl-r > .c-name > .hs-pc{flex:1 1 auto}
  .hs-tbl .tbl-r > .c-sel,.hs-tbl .tbl-r > .c-star{position:absolute;top:6px;display:grid;place-items:center;width:36px;height:36px;margin:0;background:none}
  .hs-tbl .tbl-r > .c-sel{right:42px}.hs-tbl .tbl-r > .c-star{left:auto;right:4px}
  .hs-tbl .hs-cb{width:18px;height:18px}
  .hs-tbl .hs-star{width:36px;height:36px;margin:0}
  .hs-tbl .tbl-r > :is(.c-sel,.c-star,.c-name,.c-state,.c-goal)::before{content:none}
  .hs-tbl .tbl-r > :is(.c-state,.c-goal){justify-content:flex-start;text-align:left}
  .hs-tbl .tbl-r > :not(.c-sel,.c-star,.c-name,.c-state,.c-goal,.c-needs),.hs-tbl .tbl-r > .c-needs:has(> .hs-0){display:none}
  .hs-tbl .tbl-r > .c-needs{order:1}
  .hs-tbl .hs-nd-w{display:inline}
  .hs-tbl .c-needs .hs-nd{gap:4px}
  .hs-tbl.is-dense .hs-pc-t .k,.hs-tbl.is-dense .hs-pc-t .k > a{white-space:normal}
  .hs-tbl .hs-num{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 8px}
  .hs-tbl .hs-num .hs-spark{display:none}
  .hs-tbl.is-dense .hs-num .u,.hs-tbl.is-dense .hs-pc-t .u{display:block}
  .hs-tbl.is-dense .tbl-r > *,.hs-tbl .hs-stc-w{white-space:normal}
  .hs-tbl.is-dense .hs-stc,.hs-tbl.is-dense .hs-stc-w{overflow:visible}
  .hs-tbl .hs-stc{align-items:flex-start}
  .hs-tbl .hs-stc > .hs-sg{margin-top:1px}
}
/* A10 · UX5-05: the Data column — neutral words, room for "Fresh · 12 sources", and 16px between the goal and the data; "partial" beside the number */
.hs-tbl .tbl-r > .c-data,.hs-tbl .tbl-h > .c-data{padding-left:12px}
.hs-dfix{color:var(--fg-2)}
.hs-pmk{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--blue-ink)}
/* A5 · A7 · the card (UX5-02): the scopes keep one line each (the whole scope in the tooltip), so a row's values sit at one height; a count keeps its
   noun; Compact shows its short scopes too and cuts its range words with "…" before the trend, which keeps its own column (UX5-05: "Partial" first) */
.hs-card .hs-scope{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-cpt{white-space:nowrap}
.hs-card.is-compact .hs-goal.is-line .hs-gv > :is(b,.hs-gd){flex:none}
.hs-gwr{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--fg-3)}
.hs-gwr > .hs-gst,.hs-gwr > .hs-gw{display:inline}
.hs-card.is-compact .hs-gvr > .hs-spark{flex:none;width:48px;height:16px}
/* A5: six sites at 1440 fill 3 + 3, not 4 + 2 with half a row empty (six in one row from a 1920 screen) */
@container pg (min-width:900px) and (max-width:1643px){.hs-grid[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A12 · A14: a separated line — each part carries its own "·" on its left; the strip that holds a line's first "·" is clipped, so a wrapped line never
   starts with a dot, never ends with one, and a number never parts from its noun (card counts, In progress, the Monday summary line) */
.hs-sl{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;margin-left:-14px;clip-path:inset(-6px -6px -6px 14px)}
.hs-sl > *{position:relative;padding-left:14px;min-width:0}
.hs-sl > *::before{content:"·";position:absolute;left:5px;color:var(--fg-4);font-weight:var(--w-regular)}   /* no top: the dot keeps its static place, on the item's first line */
.hs-foot.hs-sl > .hs-si > svg{display:inline-block;vertical-align:-2px;margin-right:6px}
.hs-dig.hs-sl .lk{font-size:var(--t-co);line-height:var(--lh-co)}
.hs-inprog.hs-sl{gap:4px 0}
@media (max-width:640px){
  /* §5.2 at 390: In progress, one item a line */
  .hs-page .hs-inprog.hs-sl{flex-direction:column;align-items:flex-start;gap:0;margin-left:0;clip-path:none}
  .hs-inprog.hs-sl > .hs-si > a,.hs-led-u,.hs-dig-a > a,.hs-dig-a > .lk{display:inline-flex;align-items:center;min-height:40px}   /* fix round 1 (A11Y-B6 · MOB-3): each link a 40px target on a phone */
  .hs-inprog.hs-sl > *{padding-left:0}.hs-inprog.hs-sl > *::before{content:none}
  /* A14: a header's sub-line sits under its title at the title's own left edge (it kept an 8px indent), and "Full queue ›" stays on the title line */
  .hs-page .sec-hd > .hs-sub,.hs-page .sec-hd > .hs-nwords{order:2;flex-basis:100%;margin-left:0}
  .hs-strip-u{flex-basis:100%;margin-left:0}
  /* the verdict line: the icon stays with its words, the count with its noun; "See all results" goes under when it must */
  .hs-vline > span{flex:1 1 200px}
}
.hs-roline{display:flex;align-items:flex-start;gap:6px;margin:0 0 4px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-roline > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.hs-roline a{color:var(--link);font-weight:var(--w-medium)}   /* fix round 1: "Reactivate to approve" reads as the link it is */
/* A9: under a 1920 screen the Columns button is its icon (its name stays its accessible name), so the toolbar keeps one row in Table view */
@container pg (max-width:1560px){.hs-bar #hs-cols .mb-l{display:none}}
/* F35: a pager button that can't go further looks it */
.hs-pager .btn[aria-disabled="true"]{opacity:.45;cursor:default}
.hs-gcont{margin:6px 0 0;padding:6px 0 4px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.hs-gcont.is-tr{display:block;padding:8px 0 8px 34px;border-top:1px solid var(--ln-3)}
/* A2 at 390: the phone's own status sentence, the problem first */
.hs-st-ph{display:none}
@media (max-width:640px){.hs-status:has(> .hs-st-ph) > .hs-st-dk{display:none}.hs-status > .hs-st-ph{display:inline}}
.hs-row > .mn-g-st > .lbl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* a reason capsule never wraps into a 2-line blob */
/* MOB-3 (rulebook §8.6): on a phone the header buttons and the drawer's rows are 44px; the team chat's tools 40px */
@media (max-width:760px){
  .app.v89 .tb-ic,.app.v89 .tb-sbt{width:44px;height:44px}
  .app.v89 .tb-ic .badge-dot{top:11px;right:12px}
  .app.v89 .tb-ic .badge-n{top:7px;right:5px}
  .app.v89 .sb .nav-i{height:44px}
  .app.v89 .chat-panel .cp-tools .tb-ic{width:40px;height:40px}
}
/* the bell's focus ring: a ring drawn on the outline's exact line, above the button's badge (the "4" sat on the outline and broke it) */
.app.v89 .tb-ic:focus-visible::after{content:"";position:absolute;inset:-4px;border:2px solid var(--ring);border-radius:var(--r-full);pointer-events:none;z-index:1}
@media (max-width:640px){.hs-bar-end > .hs-create{width:44px;justify-content:center;padding:0}.hs-bar-end > .hs-create > .hs-cr-l{display:none}}
.hs-ctbl .c-rp .u{white-space:nowrap}
.hs-solo-tail{display:flex;flex-direction:column;gap:6px}
.hs-solo-tail > .hs-inprog{margin:2px 0 0 -14px}

/* ===== fix round 1 · the home fixer (8 Oct 2026, round 1 — the verifiers' findings; each rule names its finding) ===== */
/* 1920 · six cards a row (255px): the meta line may take two lines — the cards share their rows (subgrid), so every card's next line still starts at
   one height; Compact keeps one line */
.hs-card:not(.is-compact) .hs-meta{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:pretty}
/* AT-27: Compact ≤ 210px — no scope line over the top change (the window is in its tooltip), the goal's line tighter, the footer one line: the
   freshness words cut last, the lead's face, the star and the menu at the end */
.hs-card.is-compact .hs-what > .hs-scope{display:none}
.hs-card.is-compact .hs-ft > .hs-fresh{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-card.is-compact .hs-ft > .grow{display:none}
.hs-card.is-compact .hs-gst > svg{display:inline-block;vertical-align:-2px}
/* Compact's trend sits on the goal's label line, so the number keeps its range words whole ("above usual" was cut to "above us…" at 1920) */
.hs-card.is-compact .hs-goal.is-line > .hs-gvr{display:contents}
.hs-card.is-compact .hs-goal.is-line .hs-spark{grid-column:2;grid-row:1}
/* the Monday summary: "Preview · Turn on" is one pair — it wraps together and its dot sits on its own baseline (no floating "·") */
.hs-dig-a{display:inline-flex;align-items:baseline;column-gap:6px;white-space:nowrap}
.hs-dig .hs-dig-a > .hs-dt{margin:0;color:var(--fg-4)}
.hs-dig .lk[aria-disabled="true"]{color:var(--fg-3);cursor:not-allowed;text-decoration:none}
/* divider insets: a row keeps its 8px hover bleed, its rule is drawn 8px in — the same edges as its header's rule */
.hs-page .sec.panel .hs-row.mn-g{border-bottom:0;position:relative}
.hs-page .sec.panel .hs-row.mn-g:not(:last-child)::after{content:"";position:absolute;left:8px;right:8px;bottom:0;border-bottom:1px solid var(--ln-2);pointer-events:none}
/* the owner at 1440 (a 744px column): the header's counts go under its title, so "Full queue ›", "Mark as seen" and "Explain this week" keep the
   title line; the reason chip sits over the row's title, which then takes the column's width (3–4 lines became 1–2) */
@container pg (min-width:641px) and (max-width:1400px){
  .hs-solo-l .sec-hd{flex-wrap:wrap;row-gap:2px}
  .hs-solo-l .sec-hd > :is(.hs-nwords,.hs-sub){order:3;flex-basis:100%;margin-left:0}
  .hs-solo .hs-row.mn-g{grid-template-columns:minmax(0,1fr) minmax(120px,max-content) 14px;grid-template-areas:"st b ch" "k b ch";row-gap:4px}
  .hs-solo .hs-row.mn-g > .mn-g-st{grid-area:st;justify-self:start;max-width:100%}
  .hs-solo .hs-row.mn-g > .k2{grid-area:k}
  .hs-solo .hs-row.mn-g > .mn-g-b{grid-area:b}
  .hs-solo .hs-row.mn-g > svg{grid-area:ch}
}
/* the portfolio table at 1440: the Site column keeps the city that tells sites apart (it had 152px — "Acme Home W…"); Groups, State, Main goal and
   Data give up the room */
@media (max-width:1500px){.hs-page.is-company .hs-tbl{--w-name:232px;--w-grp:minmax(72px,.4fr);--w-state:minmax(134px,1fr);--w-needs:84px;--w-data:minmax(118px,.5fr)}}   /* Main goal keeps its 176px: "£94.4K −5.2%" was cut at the left */
/* table alignment: the State cell's words on the row's text line; the unread dot centred beside the name, not 3px low */
.hs-tbl .hs-stc{align-items:center;line-height:var(--lh-body)}
.hs-tbl .tbl-r > .c-state{padding-top:2px}   /* its 13px words share the 14px name's baseline (they sat ~2px high) */
.hs-tbl .hs-pc-t .k .hs-new{display:inline-block;margin:0 0 0 6px;vertical-align:middle}
.hs-tbl .c-goal > .hs-num > .hs-0:first-child{margin-right:62px}   /* an empty Main goal's "—" sits under the numbers, not under the trend (56px + 6px) */
@container pg (max-width:760px){.hs-tbl .c-goal > .hs-num > .hs-0:first-child{margin-right:0}}   /* no trend on a phone */
/* the Needs-you footer at 390: the icon beside its words, the button or link under them; a link looks like one */
.hs-admin > a:not(.btn){color:var(--link);font-weight:var(--w-medium)}
.hs-nwr{display:inline-flex;align-items:center;white-space:nowrap}   /* the strip's last count and its (i) — one unit */
/* the phone table cards (§6.1): the unread dot right after the name's last word (the name wrapped early around a flex dot); the logo and the lead's
   face on the name's first line, with the select box and the star */
@container pg (max-width:760px){
  .hs-tbl .hs-pc{align-items:flex-start}
  .hs-tbl .hs-pc-t .k{display:block;text-wrap:pretty}   /* pretty: the dot never ends up alone on a line */
  .hs-tbl .hs-pc-t .k > .hs-rl{display:inline}
  .hs-tbl .hs-pc-own{margin-top:1px}
}
@media (max-width:640px){
  .hs-admin{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:6px;row-gap:4px;align-items:start}
  .hs-admin > svg{margin-top:2px}
  .hs-admin > :not(svg){grid-column:2;justify-self:start}
  .hs-admin > a:not(.btn){display:inline-flex;align-items:center;min-height:40px}
}
/* #/home/needs at 390 and 320 (MOB-1 · WCAG 1.4.10): a project's or a client's header wraps — the name, then its count, then its links on their own
   line inside the card (they were pushed past the right edge and clipped) */
@media (max-width:760px){
  .hs-gh.is-in{flex-wrap:wrap;row-gap:2px;column-gap:8px}
  .hs-gh.is-in > span:not(.hs-logo):not(.grow){flex:1 1 100%;order:2;white-space:normal;overflow-wrap:anywhere;min-width:0}
  .hs-gh.is-in > .grow{display:none}
  .hs-gh.is-in > :is(.more,.btn),#hs-onclient .hs-gh.is-in .btn.sm,#hs-onclient .hs-gh.is-in .btn.sm + .more{order:3;margin-left:0;min-height:40px}
  .hs-gh.is-in > .more{padding:0 8px 0 0}
  #hs-onclient > .sec-hd > .btn{order:3;min-height:40px}   /* "Remind all 3 clients" under the header's words, not between the title and them */
}
/* #/changes?scope=all and its results at 390: one row is the client and the verdict, then what changed at the full width (the desk grid made "Gu…") */
@media (max-width:640px){
  .ag-row.is-h{display:none}
  .ag-row,.ag-row.is-res{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;column-gap:10px;padding:10px 8px}
  .ag-row > .ag-who{display:none}
  .ag-row > .ag-t{grid-column:1 / -1;order:3}
  .ag-row.is-res > .ag-cl{order:-1}
  .ag-row .ag-t b,.ag-row .ag-t .u{white-space:normal;overflow:visible;text-overflow:clip}
}
/* the rail's drawing fills its frame (a blank band was left under the product row); a setup row's icon sits on its first line */
.hs-mine .hs-tw.is-169 .hs-pg > :is(.hs-hero,.hs-split){flex:1 1 auto}