/* The Hub v4: one page per meeting for the team (docs/PRODUCT-SPEC-v3.md section 6.1). Load after
   tokens.css, base.css and motion.css. Phone first: a slim top bar (the product and who is reading), the
   masthead, notices, the reader's work (Mine or Needs you), then the notes as cards by group, Still open
   from last time, People and the foot. From 1024 px the reader's work sits beside the notes and stays in
   view. Light, dark (data-theme="dark" or "auto") and the Teams side panel (data-embed="side-panel",
   280 px of content) all read from the same tokens. Touch targets are 44 px on coarse pointers. */

:root { --hub-rail: 368px; --hub-max: 1200px; --hub-pad: var(--space-6); }

body { min-height: 100dvh; background: var(--bg); }
#hub { position: relative; }
.hub-page { min-height: 100dvh; }

/* ---------------------------------------------------------------- top bar */
.hub-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.hub-top__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: var(--hub-max); min-height: 52px; margin: 0 auto; padding: 0 var(--hub-pad); }
.hub-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--fg); text-decoration: none; }
a.hub-brand { min-height: var(--target-min); }
a.hub-brand:hover .hub-brand__word { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
/* The way back to the personal Home from a meeting: a quiet top-bar link beside who is reading. */
.hub-home-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 28px; margin-left: auto; padding: 0 var(--space-2) 0 var(--space-1-5); border-radius: var(--radius-sm); color: var(--fg-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.hub-home-link:hover { background: var(--bg-hover); color: var(--fg); }
.hub-home-link .icon { width: 16px; height: 16px; color: var(--fg-subtle); }
.hub-brand__word { white-space: nowrap; }
/* A narrow bar wraps rather than scrolls: company sign-in adds a fourth part to it (hub.mjs). */
@media (max-width: 760px) { .hub-top__inner { flex-wrap: wrap; padding-block: var(--space-2-5); } }
@media (max-width: 480px) { .hub-home-link { padding-inline: 0; } .hub-home-link:hover { background: none; } .hub-home-link .icon { display: none; } }
.hub-logo { width: 22px; height: 22px; flex: none; }
.hub-logo__body { fill: var(--fg); }
.hub-logo__dot { fill: var(--ok-mark); }
.hub-logo--small { width: 16px; height: 16px; }
.hub-me { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--fg); }
.hub-me__name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-me__role { padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-sunk); color: var(--fg-muted); font-size: var(--text-xs); line-height: 18px; font-weight: var(--weight-medium); white-space: nowrap; }
.hub-me--guest { gap: var(--space-1-5); color: var(--fg-muted); }
.hub-me--guest .icon { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- the sheet */
.hub-sheet {
  max-width: var(--hub-max);
  margin: 0 auto;
  padding: var(--space-8) var(--hub-pad) var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mast" "notices" "rail" "body";
  gap: var(--space-6);
}
.hub-mast { grid-area: mast; }
.hub-notices { grid-area: notices; display: flex; flex-direction: column; gap: var(--space-2); }
.hub-rail { grid-area: rail; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hub-rail:empty { display: none; }
.hub-body { grid-area: body; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

@media (min-width: 1024px) {
  .hub-sheet {
    grid-template-columns: minmax(0, 1fr) var(--hub-rail);
    grid-template-areas: "mast mast" "notices notices" "body rail";
    column-gap: var(--space-8);
  }
  .hub-rail { position: sticky; top: calc(52px + var(--space-5)); align-self: start; max-height: calc(100dvh - 52px - var(--space-10)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: var(--space-1); }
  .hub-page--guest .hub-sheet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mast" "notices" "body"; max-width: 880px; }
}
@media (min-width: 1600px) {
  :root { --hub-rail: 400px; --hub-max: 1320px; }
}

/* ---------------------------------------------------------------- masthead */
.hub-mast { display: flex; flex-direction: column; gap: var(--space-3); }
.hub-mast__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.hub-mast__template { color: var(--fg-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.hub-mast__title { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); text-wrap: balance; overflow-wrap: anywhere; }
.hub-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--fg-muted); }
.hub-status .stamp { min-height: 26px; padding: 0 10px; font-size: var(--text-sm); }
.hub-status .stamp .icon { width: 14px; height: 14px; }
.hub-status .stamp--live::before { width: 7px; height: 7px; animation: dg-pulse 1.6s var(--ease-standard) infinite; }
.stamp--checking, .stamp--paused { --pill-fg: var(--advisory-fg); --pill-bg: var(--advisory-bg); --pill-border: var(--advisory-border); --pill-mark: var(--advisory-mark); }
.stamp--behind { --pill-fg: var(--attention-fg); --pill-bg: var(--attention-bg); --pill-border: var(--attention-border); --pill-mark: var(--attention-mark); }
.hub-status__item { display: inline-flex; align-items: center; gap: var(--space-1-5); font-variant-numeric: var(--figures-data); }
.hub-status__item .icon { width: 15px; height: 15px; color: var(--fg-subtle); }
.hub-status__counter { font-size: var(--text-sm); }
.hub-mast__checked { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--fg-muted); font-size: var(--text-sm); }
.hub-mast__checked .icon { width: 15px; height: 15px; color: var(--ok-mark); }

/* ---------------------------------------------------------------- notices */
.hub-quiet { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.hub-quiet .icon { width: 15px; height: 15px; color: var(--fg-subtle); }
.hub-waiting { display: flex; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.hub-waiting__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--advisory-bg); color: var(--advisory-fg); box-shadow: inset 0 0 0 1px var(--advisory-border); }
.hub-waiting__icon .icon { width: 20px; height: 20px; }
.hub-waiting__body { display: flex; flex-direction: column; gap: var(--space-1); color: var(--fg-muted); font-size: var(--text-sm); }
.hub-waiting__title { color: var(--fg); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.hub-waiting__notice { color: var(--fg-subtle); }

/* ---------------------------------------------------------------- cards and sections */
.hub-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs), var(--ring-highlight); min-width: 0; }
.hub-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 48px; }
.hub-card__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); color: var(--fg); }
.hub-card__title .icon { width: 16px; height: 16px; color: var(--fg-subtle); }
.hub-card > .rule { margin: 0; }
.hub-card__body { padding: var(--space-1) var(--space-4) var(--space-2); }
.hub-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg-active); color: var(--fg-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: var(--figures-data); }
.hub-count--small { min-width: 20px; height: 20px; font-size: var(--text-xs); }
.hub-section--needs.has-items { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-bg), var(--shadow-sm); }
.hub-section--needs.has-items .hub-card__title .icon { color: var(--accent); }
.hub-section--needs .hub-count { background: var(--accent); color: var(--on-accent); }
.hub-section--mine .hub-card__title .icon { color: var(--fg); }
.hub-bucket { display: flex; flex-direction: column; padding-top: var(--space-2); }
.hub-bucket + .hub-bucket { margin-top: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.hub-bucket__title { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); }
.hub-empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.hub-empty .icon { width: 16px; height: 16px; color: var(--ok-mark); }
.hub-empty--notes { padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface); justify-content: center; }

/* ---------------------------------------------------------------- notes */
.hub-notes { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hub-notes:focus { outline: none; }
.hub-notes__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.hub-notes__title .icon { width: 18px; height: 18px; color: var(--fg-subtle); }
.hub-group__head { border-bottom: 1px solid var(--border); background: light-dark(#fcfcfd, #17171a); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.hub-group__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.hub-group__title::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--fg); flex: none; }
.hub-group--general .hub-group__title::before { background: var(--fg-subtle); }
.hub-group--staffing .hub-group__title::before, .hub-group--site .hub-group__title::before, .hub-group--economics .hub-group__title::before { background: var(--border-strong); }
.hub-group > .hub-items { padding: 0 var(--space-4); }
.hub-group--economics .hub-item__text { color: var(--fg-muted); font-style: italic; }
.hub-items { list-style: none; margin: 0; padding: 0; }
.hub-items > li + li { border-top: 1px solid var(--border); }
.hub-items--plain .hub-item__text { font-size: var(--text-md); }

/* ---------------------------------------------------------------- items */
.hub-item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3-5, 14px) 0; min-width: 0; scroll-margin-top: calc(var(--sticky-offset, 0px) + 72px); }
.hub-item:focus { outline: none; }
.hub-item:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hub-item__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.hub-item__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); min-width: 0; }
.hub-item__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hub-item__group { color: var(--fg-subtle); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); }
.hub-item__text { max-width: 70ch; font-size: var(--text-md); line-height: var(--leading-md); color: var(--fg); overflow-wrap: anywhere; text-wrap: pretty; letter-spacing: -0.006em; }
.hub-item__earlier { color: var(--fg-subtle); font-size: var(--text-sm); line-height: var(--leading-sm); }
.hub-item__earlier del { text-decoration-line: line-through; }
.hub-item__owner { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.hub-item__owner-name { color: var(--fg); font-weight: var(--weight-medium); }
.hub-item__owner[data-owner="none"] { color: var(--fg-subtle); }
.hub-item__line { display: flex; flex-wrap: wrap; gap: 0 5px; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-variant-numeric: var(--figures-data); }
.hub-item__part { min-width: 0; }
.hub-item__dot { color: var(--fg-subtle); }
.hub-item__new { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.hub-item__new .dot { width: 6px; height: 6px; }
.hub-item__note { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-sunk); color: var(--fg); font-size: var(--text-sm); line-height: var(--leading-sm); overflow-wrap: anywhere; }
.hub-item__note-by { color: var(--fg-muted); font-weight: var(--weight-medium); }
.hub-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hub-item__actions .btn--claim { min-width: 96px; }
.hub-item__form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-sunk); }
.hub-item__form .cluster { gap: var(--space-2); }
.hub-item--done .hub-item__text { color: var(--fg-muted); }
.hub-item--void { display: none; }
.hub-item--new::before { content: ""; position: absolute; left: calc(-1 * var(--space-4)); top: 16px; bottom: 16px; width: 2px; border-radius: 0 2px 2px 0; background: var(--ok-mark); }
.hub-rail .hub-item--new::before { display: none; }

/* Kind chips: To do blue, Blocked red, Decided violet, Question amber, the rest neutral. */
.chip--kind { --pill-fg: var(--neutral-fg); border-radius: var(--radius-sm); }
.chip--kind[data-kind="action"] { --pill-fg: var(--accent-fg); --pill-bg: var(--accent-bg); --pill-border: var(--accent-border); }
.chip--kind[data-kind="blocker"] { --pill-fg: var(--attention-fg); --pill-bg: var(--attention-bg); --pill-border: var(--attention-border); }
.chip--kind[data-kind="decision"] { --pill-fg: var(--decision-fg); --pill-bg: var(--decision-bg); --pill-border: var(--decision-border); }
.chip--kind[data-kind="question"] { --pill-fg: var(--advisory-fg); --pill-bg: var(--advisory-bg); --pill-border: var(--advisory-border); }

@media (min-width: 640px) {
  .hub-item__text { font-size: var(--text-lg); line-height: 25px; }
  .hub-rail .hub-item__text { font-size: var(--text-md); line-height: var(--leading-md); }
}

/* ---------------------------------------------------------------- still open */
.hub-still__summary { cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.hub-still__summary::-webkit-details-marker { display: none; }
.hub-still__summary .hub-card__title { flex: 1; }
.hub-still__chevron { width: 16px; height: 16px; color: var(--fg-subtle); transition: transform var(--dur-base) var(--ease-standard); }
.hub-still[open] .hub-still__chevron { transform: rotate(180deg); }
.hub-still__source { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.hub-still__source:hover { color: var(--fg); text-decoration-color: currentColor; }
.hub-still:not([open]) > .rule { display: none; }

/* ---------------------------------------------------------------- people */
.hub-people { list-style: none; margin: 0; padding: var(--space-1) 0; display: flex; flex-direction: column; }
.hub-person { display: flex; align-items: center; gap: var(--space-2-5); min-height: 44px; padding: var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-md); }
.hub-person--me { background: var(--bg-sunk); }
.hub-person__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hub-person__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.hub-person__you { color: var(--fg-subtle); font-weight: var(--weight-regular); }
.hub-person__rung { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--fg-subtle); font-size: var(--text-xs); }
.hub-person__rung .icon { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- foot */
.hub-foot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) 0 0; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.hub-foot__coverage { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--fg); font-weight: var(--weight-medium); }
.hub-foot__coverage .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--ok-mark); }
.hub-foot__line { max-width: 72ch; }
.hub-fingerprint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.hub-fingerprint__label { color: var(--fg-subtle); font-size: var(--text-xs); }
.hub-fingerprint__value { padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-sunk); color: var(--fg); font-family: var(--font-mono); font-size: var(--text-xs); user-select: all; }
.hub-fingerprint__note { color: var(--ok-fg); font-size: var(--text-xs); }

/* ---------------------------------------------------------------- page-level states */
.hub-state { display: grid; place-items: center; align-content: center; gap: var(--space-5); min-height: 100dvh; padding: var(--space-6) var(--hub-pad); }
.hub-state__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 440px; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-lg); }
.hub-state__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--border); color: var(--fg-muted); }
.hub-state__icon .icon { width: 22px; height: 22px; }
.hub-state[data-state="revoked"] .hub-state__icon, .hub-state[data-state="error"] .hub-state__icon { background: var(--attention-bg); color: var(--attention-fg); box-shadow: inset 0 0 0 1px var(--attention-border); }
.hub-state__title { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); }
.hub-state__body { color: var(--fg-muted); }
.hub-state__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg-subtle); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.hub-state[data-state="loading"] .hub-quiet { gap: var(--space-3); }

/* ---------------------------------------------------------------- landing (a personal link with no meeting id) */
.hub-landing { max-width: 640px; margin: 0 auto; padding: var(--space-12) var(--hub-pad) var(--space-16); display: flex; flex-direction: column; gap: var(--space-3); }
.hub-landing__title { font-size: clamp(26px, 3vw, 32px); line-height: 1.2; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.hub-landing__title:focus { outline: none; }
.hub-landing__lead { color: var(--fg-muted); font-size: var(--text-base); line-height: var(--leading-base); margin-bottom: var(--space-3); }
.hub-landing__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.hub-landing__list > li + li { border-top: 1px solid var(--border); }
.hub-landing__item { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-4); color: var(--fg); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-standard); }
.hub-landing__item:hover { background: var(--bg-hover); }
.hub-landing__item:focus-visible { outline-offset: -2px; border-radius: 0; }
.hub-landing__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--border); color: var(--fg-muted); }
.hub-landing__icon .icon { width: 18px; height: 18px; }
.hub-landing__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hub-landing__name { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.hub-landing__date { color: var(--fg-subtle); font-size: var(--text-sm); font-variant-numeric: var(--figures-data); }
.hub-landing__chevron { width: 16px; height: 16px; color: var(--fg-subtle); }
.hub-landing__empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--fg-muted); font-size: var(--text-sm); }
.hub-landing__empty .icon { width: 16px; height: 16px; color: var(--fg-subtle); }
.hub-noscript { padding: var(--space-6) var(--hub-pad); }

/* ---------------------------------------------------------------- phones */
@media (pointer: coarse), (max-width: 480px) {
  .hub-page .btn, .hub-state .btn { min-height: var(--target-touch); }
  .hub-page .btn--small, .hub-state .btn--small { min-height: var(--target-touch); padding-inline: var(--space-3); }
  .hub-page .input, .hub-page .select { min-height: var(--target-touch); }
  a.hub-brand, .hub-home-link { min-height: var(--target-touch); }
  .hub-still__summary { min-height: var(--target-touch); }
}
@media (max-width: 640px) {
  :root { --hub-pad: var(--space-4); }
  .hub-sheet { padding-top: var(--space-5); gap: var(--space-5); }
  .hub-me__role { display: none; }
  .hub-item__actions .btn--claim, .hub-item__actions .btn--primary { flex: 1 1 auto; }
  .hub-card__body, .hub-group > .hub-items { padding-inline: var(--space-3); }
  .hub-card__head { padding-inline: var(--space-3); }
  .hub-item--new::before { left: calc(-1 * var(--space-3)); }
}

/* ---------------------------------------------------------------- embedded (the Teams side panel) */
[data-embed="side-panel"] .hub-top { display: none; }
[data-embed="side-panel"] .hub-sheet { padding: var(--space-3) var(--space-3) var(--space-8); gap: var(--space-4); max-width: none; }
[data-embed="side-panel"] .hub-mast {
  position: sticky; top: 0; z-index: 5;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  gap: var(--space-1);
}
[data-embed="side-panel"] .hub-mast__kicker, [data-embed="side-panel"] .hub-mast__date, [data-embed="side-panel"] .hub-mast__checked { display: none; }
[data-embed="side-panel"] .hub-mast__title { font-size: var(--text-md); line-height: var(--leading-md); letter-spacing: var(--tracking-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
[data-embed="side-panel"] .hub-status { gap: var(--space-1) var(--space-2); flex-wrap: nowrap; overflow: hidden; font-size: var(--text-xs); }
[data-embed="side-panel"] .hub-status .stamp { min-height: 20px; padding: 0 7px; font-size: var(--text-xs); }
[data-embed="side-panel"] .hub-status__after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-embed="side-panel"] .hub-body { gap: var(--space-4); }
[data-embed="side-panel"] .hub-item__actions .btn { flex: 1 1 auto; }
[data-embed="side-panel"] .hub-item__text { font-size: var(--text-base); line-height: 21px; }
[data-embed="side-panel"] .hub-card__head { padding: var(--space-2) var(--space-3); min-height: 40px; }
[data-embed="side-panel"] .hub-card__body, [data-embed="side-panel"] .hub-group > .hub-items { padding-inline: var(--space-3); }
[data-embed="side-panel"] .hub-notes__title { font-size: var(--text-sm); }
[data-embed="side-panel"] .hub-item--new::before { display: none; }

/* A sheet on a dark host (Teams' chrome): the page keeps its own surface. */
[data-host="teams"] body { background: light-dark(#ebebef, #0a0a0c); }
[data-host="teams"] .hub-sheet { margin: var(--space-3) auto; }
[data-host="teams"][data-embed="side-panel"] .hub-sheet { margin: 0; }
[data-host="zoom"] body { background: var(--bg); }

/* ---------------------------------------------------------------- Windows contrast themes */
@media (forced-colors: active) {
  .hub-card, .hub-waiting, .hub-state__card, .hub-item__form, .hub-item__note, .hub-fingerprint__value, .hub-me__role { border: 1px solid CanvasText; }
  .hub-person--me { outline: 1px solid CanvasText; outline-offset: -1px; }
  .hub-item__new { color: Highlight; }
  .hub-item--new::before, .hub-group__title::before { forced-color-adjust: none; background: CanvasText; }
  .hub-logo__body { fill: CanvasText; }
  .hub-logo__dot { fill: Highlight; }
  .hub-count { border: 1px solid CanvasText; }
  [data-embed="side-panel"] .hub-mast { border-bottom-color: CanvasText; }
  .hub-foot { border-top-color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-still__chevron { transition: none; }
  .hub-status .stamp--live::before { animation: none; }
}