/* ══════════════════════════════════════════════════════════════════════
   TAVVLO HUB — chat page, matched to the Attio app

   Overrides for the chat panel inside reputation.html. The panel's own
   rules live in that file's inline <style>; this sheet is linked after it,
   so it wins at equal specificity without that 1MB file being edited.

   Values measured off the running Attio app mock: the composer is a
   bordered card floating over the ground rather than a pill on a bar, the
   send control sits inside it at bottom-right, the reading column is 720
   wide, and the user's own turn is a plain grey bubble rather than a
   tinted one.

   The sidebar is handled in css/tavvlo-sidebar.css, which every app page
   already shares.
   ══════════════════════════════════════════════════════════════════════ */

#page-chat{
  --hub-card:#fff;
  --hub-ground:#fff;
  --hub-frame:#f2f3f6;
  --hub-line:#e5e7eb;
  --hub-ink:#1c1d1f;
  --hub-ink-dim:rgba(0,0,0,.55);
  --hub-bubble:rgba(0,0,0,.06);
  --hub-accent:#266df0;
}
html[data-theme="dark"] #page-chat,
html:not([data-theme]) #page-chat{
  --hub-card:rgba(255,255,255,.04);
  --hub-ground:var(--color-palette--secondary);
  --hub-frame:#080909;
  --hub-line:var(--color-palette--strok-1);
  --hub-ink:rgba(var(--ink-rgb),.9);
  --hub-ink-dim:rgba(var(--ink-rgb),.5);
  --hub-bubble:rgba(255,255,255,.08);
}

/* The reference presents the app as one inset, rounded workspace.  Keep the
   treatment on the hub shell so none of Webflow's marketing-page surfaces are
   affected. */
#rep-shell{
  height:calc(100dvh - 8px);
  margin:6px 3px 2px 8px;
  border:1px solid #eeeff1;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  min-height:740px;
}
#rep-shell .rep-grid{height:100%}
/* EMBEDDED (the Desktop page opens each product in a window at ?embed=1).
   The card treatment above is for a full browser tab: the 6px/8px margins, the
   rounded border and — above all — min-height:740px, which forces the shell
   past the bottom of any window shorter than that and crops whatever is at the
   end of the page. Inside a window the frame IS the card, so all of it comes
   off and the shell simply fills what it is given. */
html[data-embed] #rep-shell{
  height:100%;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* One continuous ground across the whole panel. The conversation column used to
   paint itself white while the rail sat transparent over the page grey, which
   drew a hard seam down the middle and made the chat read as a separate pane
   bolted next to a sidebar. Now the panel is the ground and everything with a
   card background — composer, news, prompts — floats on it. */
#rep-shell #page-chat{background:var(--hub-frame)}
#rep-shell #page-chat .wc-main{background:transparent}

/* ── reading column ───────────────────────────────────────────────── */
#page-chat .wc-inner{
  max-width:836px;
  padding:30px 0 39px;
  gap:18px;
}

/* ── composer ─────────────────────────────────────────────────────────
   The bar it sat on is gone: the card is the whole control, and it floats
   over the conversation with its own hairline and lift. */
#page-chat .wc-composer-wrap{
  position:relative;
  border-top:0;
  background:transparent;
  padding-bottom:30px;
}
#page-chat .wc-composer{
  max-width:836px;                 /* reading column less its 24px gutters */
  margin:0 auto;
  padding:12px 10px 10px 15px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0;
  background:var(--hub-card);
  border:1px solid #e7e8ee;
  border-radius:19px;
  /* A hairline shadow hugging all four edges, layered over the existing soft
     lift — the card reads as raised without the lift alone carrying it. */
  box-shadow:0 0 5px #24294a0d, 0 1px 2px #24294a0f, 0 16px 36px #24294a05;
  min-height:145px;
  box-sizing:border-box;
  position:relative;
}
/* The field takes the first row on its own, so the controls fall to a
   second row beneath it — the shape the source uses. */
#page-chat .wc-composer #wc-input{
  flex:1 1 100%;
  min-width:0;
  padding:8px;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:14px;
  line-height:20px;
  color:var(--hub-ink);
  resize:none;
  align-self:stretch;
}
#page-chat .wc-composer #wc-input:focus{outline:none;box-shadow:none}
#page-chat .wc-composer #wc-input::placeholder{color:var(--hub-ink-dim)}

/* 28px square on an 8px radius, in the accent, tucked bottom-right —
   not a 46px circle hanging off the end of a pill. */
/* Black plate, Tavvlo green glyph — the blue was the template's accent and
   belonged to nothing in this product. --color-palette--primary is the brand
   green (#88ef56), taken from the Webflow palette rather than re-typed. */
#page-chat .wc-composer #wc-send{
  width:30px;height:30px;
  flex:0 0 30px;
  /* A dark grey plate rather than near-black, with a plain white glyph. */
  background:#2b2d33;
  color:#fff;
  border-radius:50%;
  border:0;
}
#page-chat .wc-composer #wc-send svg{width:14px;height:14px}
#page-chat .wc-composer #wc-send:disabled{opacity:.35}
#page-chat .wc-composer #wc-send:not(:disabled):hover{filter:brightness(1.08)}

/* The lower row of the composer carries the send action alone. A decorative
   "Auto /" mode hint used to sit to its left; it was removed because it named
   a mode that does not exist. */

#page-chat .wc-foot{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Recent sessions now live in the "Past chats" sheet behind the topbar clock,
   not under the composer. The old empty-state rule — hide them once a thread
   exists — has to go with them: history is most wanted DURING a conversation,
   and keeping it would have made the clock open an empty sheet. */
#page-chat .wc-recents{
  width:100%;
  font-family:'Inter',sans-serif;
}
#page-chat .wc-recents[hidden]{display:none}
#page-chat .wc-recents-title{
  margin:2px 7px 12px 2px;
  color:#808083;
  font-size:12px;
  font-weight:500;
  line-height:18px;
  height:27px;
  display:flex;
  align-items:center;
}
#page-chat .wc-recents-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  max-height:190px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--hub-line) transparent;
}
#page-chat .wc-recent{
  appearance:none;
  min-width:0;
  min-height:45px;
  margin:0;
  padding:0 15px 0 17px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--hub-line);
  border-radius:16px;
  background:var(--hub-card);
  color:var(--hub-ink);
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s;
  letter-spacing:-.2px;
}
#page-chat .wc-recent:hover{
  border-color:rgba(var(--ink-rgb),.2);
  background:rgba(var(--ink-rgb),.025);
  transform:translateY(-1px);
}
#page-chat .wc-recent:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.45);
  outline-offset:2px;
}
/* ── turns ─────────────────────────────────────────────────────────────
   The reader's own message is a quiet grey pill; the assistant's answer
   carries no chrome at all, so the column reads as prose rather than as a
   pair of competing cards. */
#page-chat .wc-bubble{
  font-size:14px;
  line-height:1.6;
  color:var(--hub-ink);
}
#page-chat .wc-bubble.user{
  max-width:85%;
  padding:9px 13px;
  border:0;
  border-radius:13px;
  /* White, not the old #f0f0ef: now that the panel's ground is #f2f3f6 that
     grey sat two shades from the background and the bubble all but vanished.
     White makes the reader's turn a card on the ground, like everything else
     on this page. */
  background:#fff;
  color:var(--hub-ink);
  line-height:20px;
  letter-spacing:-.25px;
}
#page-chat .wc-bubble.ai{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  max-width:100%;
}

/* ── top bar ──────────────────────────────────────────────────────────
   48px to match the workspace row across the rail's border, so the two
   read as one band. */
/* Not a bar any more. The two controls float over the conversation, so the
   panel is one uninterrupted surface from the top of the shell down — no band
   reserving 59px of height and no rule under it. The strip itself ignores the
   pointer so it cannot swallow clicks meant for the thread underneath; only
   the buttons take them back. */
#page-chat .wc-main{position:relative}
#page-chat .wc-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
  height:auto;
  padding:14px 20px;
  gap:2px;
  justify-content:space-between;
  border-bottom:0;
  background:transparent;
  pointer-events:none;
}
#page-chat .wc-topbar > button{pointer-events:auto}
/* Keep a scrolled conversation from running under the floating controls. */
#page-chat .wc-inner{padding-top:58px}
#page-chat .wc-topbar .wc-topbar-btn,
#page-chat .wc-topbar .wc-newchat{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  color:var(--hub-ink);
  cursor:pointer;
  transition:background .15s;
}
#page-chat .wc-topbar .wc-topbar-btn svg,
#page-chat .wc-topbar .wc-newchat svg{width:17px;height:17px}
#page-chat .wc-topbar .wc-topbar-btn:hover,
#page-chat .wc-topbar .wc-newchat:hover{
  border:0;
  background:rgba(0,0,0,.06);
  color:var(--hub-ink);
}
#page-chat .wc-topbar .wc-newchat span{display:none}
/* The base rule gives this margin-left:auto, which would shove it back to the
   right regardless of the bar's justification. */
#page-chat .wc-topbar .wc-newchat{margin-left:0}

/* ── no chrome on a turn ──────────────────────────────────────────────
   The source's turns carry no avatar and no name label: the reader's line
   is a bubble, the answer is bare text, nothing else. Ours injected a "T"
   disc on every AI turn and on the loading row, which is the one thing
   that stopped the column reading like the original. */
#page-chat .wc-avatar{display:none}
#page-chat .wc-row{gap:0}
#page-chat .wc-loadline .wc-glyph{display:none}
#page-chat .wc-loadline{
  font-size:14px;
  line-height:20px;
  color:var(--hub-ink-dim);
}
#page-chat .wc-loading{min-height:20px;align-items:flex-start}

/* ── empty thread: centred composer and recent chats ──────────────────
   With nothing sent, the composer sits at the midpoint of the usable panel
   and recent sessions continue beneath it. Once a turn exists the composer
   drops back to the foot of the column, which is the default below.

   The test is "no message rows", NOT "#wc-inner has no children". Signed
   out, the script drops a "Sign in to use the AI chat." notice in there, so
   :empty was false and the composer stayed welded to the floor — which is
   the state that looked nothing like the reference.

   And it is .wc-row.user, not .wc-row: renderSignedOut() and the "no
   restaurants mapped" notice both render through addAiBubble(), which
   builds a .wc-row. Testing for any row therefore counted a system
   notice as a conversation and dropped the composer to the floor again.
   A thread only really exists once the reader has sent something, so the
   presence of THEIR turn is the signal. */
#page-chat .wc-greet{display:none}

#page-chat:not(:has(.wc-row.user)) #wc-scroll{
  flex:0 0 auto;
  overflow:visible;
}
/* Only drop the padding when the column is genuinely bare — a sign-in
   notice in there still needs its air. */
#page-chat:not(:has(.wc-row.user)) .wc-inner{
  padding:0 24px;
  min-height:0;
}
#page-chat:not(:has(.wc-row.user)) .wc-empty{display:none}
/* Centre the 115px composer in the height below the 48px header. The final
   48px subtraction reserves the greeting immediately above it. */
/* Below centre, not on it: the greeting and composer read better sitting a
   little low in the panel than pinned to the middle of it. */
#page-chat:not(:has(.wc-row.user)) .wc-composer-wrap{
  padding-top:max(24px,calc((100dvh - 48px - 115px) / 2 + 14px));
}
/* Matches the composer's width and its text inset, so "Hey Aditya," starts on
   the same vertical line as the placeholder below it. The old 656px block was
   centred inside the 836px column, which left the greeting indented against
   nothing. */
#page-chat:not(:has(.wc-row.user)) .wc-greet{
  display:block;
  max-width:836px;
  margin:0 auto 20px;
  padding-left:24px;          /* composer border 1 + padding-left 15 + input padding 8 */
  box-sizing:border-box;
  font-size:20px;
  line-height:26px;
  letter-spacing:-.2px;
}
#page-chat .wc-greet-hey,
#page-chat .wc-greet-sub{display:block}
/* Explicit: the display:block above would otherwise beat the hidden attribute. */
#page-chat .wc-greet-hey[hidden]{display:none}
#page-chat .wc-greet-hey{
  font-weight:650;
  color:var(--hub-ink);
}
#page-chat .wc-greet-sub{
  font-weight:500;
  color:var(--hub-ink-dim);
}

@media (max-width:767px){
  #rep-shell{
    height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
  }
  #page-chat .wc-composer-wrap{padding-bottom:calc(6px + 64px + env(safe-area-inset-bottom,0px))}
  #page-chat .wc-composer{min-height:96px;margin:0 14px}
  #page-chat .wc-recents{width:auto;margin:18px 14px 0}
  #page-chat .wc-recents-list{grid-template-columns:1fr;max-height:154px}
  #page-chat:not(:has(.wc-row.user)) .wc-composer-wrap{padding-top:max(24px,calc((100dvh - 48px - 96px) / 2 - 48px))}
  #page-chat:not(:has(.wc-row.user)) .wc-greet{margin-left:14px;margin-right:14px}
}

/* ── news card ────────────────────────────────────────────────────────
   Square, pinned to the top-right of the chat column: the right offset is the
   same centred 836px reading column the composer uses, so the two right edges
   line up. max() stops it sliding off once the panel is narrower than that
   column, and below 1100px it goes entirely — there is no room beside the
   column at that width, and overlapping the composer is worse than absent.

   Empty state only, matching .wc-greet and .wc-recents: once a thread exists
   the messages own this space. */
/* A column beside the conversation, not an overlay on it. #page-chat is
   already a flex row, so .wc-main takes what is left and the 836px reading
   column re-centres inside that on its own — no positioning maths, and
   nothing to redo when the rail's width changes.

   Unlike the greeting and the recents it stays put once a thread starts: it
   is a sidebar, not part of the empty state.

   It goes entirely below 1180px. The conversation column is 836px, and
   fitting both into less than that plus the rail turns the chat into a
   gutter — worse than not having the rail. */
#page-chat .wc-rail,
#page-groups .wc-rail{
  /* ONE knob scales the whole rail. Every size inside it is in em, so cards,
     type, thumbnails, padding and dividers grow together on a bigger screen —
     the proportions are fixed and the thing simply gets larger. Nothing in here
     flexes to fill height: stretching the gaps while the content stayed put was
     exactly what looked wrong. */
  /* Driven by HEIGHT, not width. The stack measures ~43em tall whatever the
     screen, so a base of avail/43 makes it fill the column exactly — measured
     at 2.17–2.24vh from 1400x800 to 2560x1440; 1.95vh leaves headroom. That is what lets
     it fill top-to-bottom WITHOUT any internal gap stretching: the whole block
     is simply drawn bigger.
     The width is in em for the same reason — wider screen, taller rail, wider
     cards, all in step. */
  font-size:clamp(11px,1.95vh,28px);
  flex:0 0 clamp(300px,24em,40vw);
  display:flex;
  flex-direction:column;
  /* Anchored to the top, NOT centred. #rep-shell carries min-height:740px, so on
     a window shorter than that the shell runs past the bottom of the screen —
     and centring inside it pushed the last card below the fold, where it was
     simply cut off. Top-aligned, the cards are always visible; the base is
     sized to fill, so on a tall screen there is nothing left over anyway. */
  justify-content:flex-start;
  gap:1.15em;
  padding:1.3em 1.3em 1.3em .3em;
  overflow:hidden;
}
@media (max-width:1180px){
  #page-chat .wc-rail{display:none}
}

#page-chat .wc-rail-card,
#page-groups .wc-rail-card{
  flex:0 0 auto;
  box-sizing:border-box;
  padding:1em 1.15em;
  background:var(--hub-card);
  border:1px solid var(--hub-line);
  border-radius:1.15em;
  box-shadow:0 0 5px #24294a0d, 0 1px 2px #24294a0f, 0 16px 36px #24294a05;
}

/* ── news ──────────────────────────────────────────────────────────── */
#page-chat .wc-news{display:flex;flex-direction:column;overflow:hidden}
#page-chat .wc-news-head{
  flex:0 0 auto;
  padding-bottom:.72em;
  margin-bottom:.2em;
  border-bottom:1px solid var(--hub-line);
}
#page-chat .wc-news-title{
  font:600 1.02em/1.2 'Geist','Inter',sans-serif;
  letter-spacing:-.01em;
  color:var(--hub-ink);
}
#page-chat .wc-news-list{display:flex;flex-direction:column;overflow:hidden}
#page-chat .wc-news-empty{font:400 .92em/1.55 'Inter',sans-serif;color:var(--hub-ink-dim)}
#page-chat .wc-news-item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.72em;
  padding:.78em 0;
  border-bottom:1px solid var(--hub-line);
  text-decoration:none;
}
#page-chat .wc-news-item:last-child{border-bottom:0}
#page-chat .wc-news-thumb{
  flex:0 0 3.5em;
  width:3.5em;
  height:3.5em;
  object-fit:cover;
  border-radius:.55em;
  background:rgba(0,0,0,.05);
}
#page-chat .wc-news-body{flex:1;min-width:0}
#page-chat .wc-news-item-title{
  /* Two lines, then an ellipsis — a fixed row needs a fixed ceiling. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font:500 .95em/1.4 'Inter',sans-serif;
  color:var(--hub-ink);
}
#page-chat .wc-news-item:hover .wc-news-item-title{color:var(--hub-accent)}
#page-chat .wc-news-item-meta{
  display:block;
  margin-top:.18em;
  font:400 .86em/1.3 'Inter',sans-serif;
  color:var(--hub-ink-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── "Try asking…" ─────────────────────────────────────────────────── */
#page-chat .wc-ask{display:flex;flex-direction:column}
#page-chat .wc-ask-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6em;
  padding-bottom:.72em;
  border-bottom:1px solid var(--hub-line);
}
#page-chat .wc-ask-title{
  font:600 1.02em/1.2 'Geist','Inter',sans-serif;
  letter-spacing:-.01em;
  color:var(--hub-ink);
}
#page-chat .wc-ask-shuffle{
  width:1.7em;height:1.7em;flex:0 0 1.7em;
  display:flex;align-items:center;justify-content:center;
  padding:0;background:none;border:0;border-radius:.45em;
  color:var(--hub-ink-dim);cursor:pointer;
  transition:background .15s,color .15s;
}
#page-chat .wc-ask-shuffle svg{width:1em;height:1em}
#page-chat .wc-ask-shuffle:hover{background:rgba(0,0,0,.05);color:var(--hub-ink)}
#page-chat .wc-ask-list{display:flex;flex-direction:column}
#page-chat .wc-ask-item{
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:center;
  gap:.7em;
  padding:.86em 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--hub-line);
  text-align:left;
  cursor:pointer;
  font:400 .95em/1.4 'Inter',sans-serif;
  color:var(--hub-ink);
}
#page-chat .wc-ask-item:last-child{border-bottom:0}
#page-chat .wc-ask-item-text{flex:1;min-width:0}
#page-chat .wc-ask-chev{
  width:1em;height:1em;flex:0 0 1em;
  color:var(--hub-ink-dim);
  transition:transform .15s,color .15s;
}
#page-chat .wc-ask-item:hover .wc-ask-item-text,
#page-chat .wc-ask-item:hover .wc-ask-chev{color:var(--hub-accent)}
#page-chat .wc-ask-item:hover .wc-ask-chev{transform:translateX(2px)}
#page-chat .wc-ask-more{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.7em;
  width:100%;
  margin-top:.55em;
  padding:.85em 0 .15em;
  background:none;
  border:0;
  border-top:1px solid var(--hub-line);
  text-align:left;
  cursor:pointer;
}
#page-chat .wc-ask-more-icon{width:1.25em;height:1.25em;flex:0 0 1.25em;color:var(--hub-ink-dim)}
#page-chat .wc-ask-more-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.08em}
#page-chat .wc-ask-more-title{font:500 .95em/1.3 'Inter',sans-serif;color:var(--hub-ink)}
#page-chat .wc-ask-more-sub{font:400 .88em/1.3 'Inter',sans-serif;color:var(--hub-ink-dim)}
#page-chat .wc-ask-more-go{
  width:1.05em;height:1.05em;flex:0 0 1.05em;
  color:var(--hub-ink-dim);
  transition:transform .15s,color .15s;
}
#page-chat .wc-ask-more:hover .wc-ask-more-go{color:var(--hub-accent);transform:translateX(2px)}

/* The prompt library sheet reuses these rows but is NOT in the rail, so the em
   base does not reach it — it gets its own fixed size. */
#page-chat #wc-ask-sheet .wc-ask-item{flex:0 0 auto;font-size:13px;padding:13px 0}
#page-chat #wc-ask-sheet .wc-ask-item:last-child{border-bottom:0}

/* ── Today's checklist, on the empty state ────────────────────────────
   Sits between the composer and the older conversations, in its own
   container. Values follow the basepoint shell: a bordered card on an 11px
   radius with a quiet head row above the list.

   Finished work is struck through and dimmed rather than removed. A list
   that empties itself as the day goes on tells you nothing about what has
   already been handled. */
#page-chat .wc-tasks{
  width:100%;
  max-width:836px;
  margin:22px auto 0;
  font-family:'Inter',sans-serif;
}
#page-chat .wc-tasks[hidden],
#page-chat:has(.wc-row.user) .wc-tasks{display:none}

#page-chat .wc-tasks-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:19px 7px 14px 10px;
  color:#808083;
  height:27px;
}
#page-chat .wc-tasks-title{
  color:var(--hub-ink-dim);
  font-size:12px;
  font-weight:500;
  line-height:18px;
}
#page-chat .wc-tasks-count{
  color:var(--hub-ink-dim);
  font-size:12px;
  font-weight:400;
  line-height:18px;
  opacity:.8;
}

#page-chat .wc-tasks-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  border:1px solid var(--hub-line);
  border-radius:11px;
  background:var(--hub-card);
  overflow:hidden;
}
#page-chat .wc-task{
  appearance:none;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:0 15px 0 17px;
  border:0;
  border-top:1px solid var(--hub-line);
  background:transparent;
  color:var(--hub-ink);
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:background .15s;
  min-height:45px;
  letter-spacing:-.2px;
}
#page-chat .wc-task:first-child{border-top:0}
#page-chat .wc-task:hover{background:rgba(var(--ink-rgb),.03)}

/* The tick box is always drawn, so the rows stay on one grid whether or not
   the work is finished. */
#page-chat .wc-task-tick{
  flex:0 0 16px;
  width:16px;height:16px;
  display:grid;
  place-items:center;
  border:1px solid var(--hub-line);
  border-radius:5px;
  color:transparent;
}
#page-chat .wc-task-tick svg{width:11px;height:11px}
#page-chat .wc-task.is-done .wc-task-tick{
  background:var(--hub-ink);
  border-color:var(--hub-ink);
  color:#fff;
}

#page-chat .wc-task-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
#page-chat .wc-task-title,
#page-chat .wc-task-meta{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-chat .wc-task-title{font-size:13px;font-weight:500;line-height:18px}
#page-chat .wc-task-meta{
  font-size:11px;font-weight:400;line-height:16px;color:var(--hub-ink-dim);
}
#page-chat .wc-task.is-done .wc-task-title{
  text-decoration:line-through;
  color:var(--hub-ink-dim);
}
#page-chat .wc-task.is-late .wc-task-meta{color:#c2410c}

@media (max-width:767px){
  #page-chat .wc-tasks{width:auto;margin:18px 14px 0}
}

/* ── Search over older chats ──────────────────────────────────────────
   Rendered only from the fourth chat on; below that the list is quicker to
   read than to search. Shaped like the rail's quick-action pills so the two
   read as the same control. */
#page-chat .wc-recents-search{
  display:block;
  width:100%;
  height:37px;
  margin:0 0 9px;
  padding:0 12px;
  border:1px solid var(--hub-line);
  border-radius:11px;
  background:var(--hub-card);
  box-shadow:0 1px 3px #00000009;
  color:var(--hub-ink);
  font:inherit;
  font-size:13px;
  outline:none;
}
#page-chat .wc-recents-search::placeholder{color:var(--hub-ink-dim)}
#page-chat .wc-recents-search:focus{
  border-color:rgba(var(--ink-rgb),.25);
}
/* The browser's own clear affordance duplicates the caret and sits at a
   different size in every engine. */
#page-chat .wc-recents-search::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
}
#page-chat .wc-recents-empty{
  grid-column:1 / -1;
  padding:14px 2px;
  color:var(--hub-ink-dim);
  font-size:12px;
  line-height:18px;
}

/* The outlet sheet now opens even with nothing to list, so the row that
   explains why needs to read as a message rather than a choice. */
#wc-rest-sheet .rest-option.is-empty{
  cursor:default;
  color:var(--hub-ink-dim);
  font-size:13px;
  line-height:18px;
}
#wc-rest-sheet .rest-option.is-empty:hover{background:transparent}

/* ── Older chats: the template's meeting row ─────────────────────────
   45px, a 10px status dot, the name, and the date pushed to the far right
   by margin-left:auto on the <time> — exactly the shape the template uses
   for its meetings list. */
#page-chat .wc-recent{
  height:45px;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:0 15px 0 17px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:var(--hub-ink);
  letter-spacing:-.2px;
  font:inherit;
  cursor:pointer;
  transform:none;
  transition:background .15s;
}
#page-chat .wc-recent:hover{background:#f0f1f3;border:0;transform:none}
#page-chat .wc-recent-dot{
  height:10px;width:10px;
  flex-shrink:0;
  border-radius:50%;
  background:#64cd85;
}
#page-chat .wc-recent-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-chat .wc-recent-muted{color:#949496}
#page-chat .wc-recent-time{
  margin-left:auto;
  flex-shrink:0;
  color:#969698;
  font-size:14px;
  white-space:nowrap;
  letter-spacing:0;
}
/* One row per line now, so the two-up grid goes. */
#page-chat .wc-recents-list{
  display:flex;
  flex-direction:column;
  gap:0;
  grid-template-columns:none;
}

/* ══════════════════════════════════════════════════════════════════════
   GROUPS — the same room as Chat
   ══════════════════════════════════════════════════════════════════════
   The Groups page was already built out of the chat classes (.wc-main,
   .wc-inner, .wc-composer, .wc-bubble), but every rule that restyled them
   was written as `#page-chat .wc-…`, so none of it reached here. The page
   was left wearing the older inline styles further up this document —
   which is exactly why one looked like the product and the other did not.

   So: the same declarations, extended to #page-groups. Three of the chat
   rules are deliberately NOT extended, and each has a reason below.

   The room list (.gc-*) is untouched — it stays as it is. */

#page-groups{
  --hub-card:#fff;
  --hub-ground:#fff;
  --hub-frame:#f2f3f6;
  --hub-line:#e5e7eb;
  --hub-ink:#1c1d1f;
  --hub-ink-dim:rgba(0,0,0,.55);
  --hub-bubble:rgba(0,0,0,.06);
  --hub-accent:#266df0;
}
html[data-theme="dark"] #page-groups,
html:not([data-theme]) #page-groups{
  --hub-card:rgba(255,255,255,.04);
  --hub-ground:var(--color-palette--secondary);
  --hub-frame:#080909;
  --hub-line:var(--color-palette--strok-1);
  --hub-ink:rgba(var(--ink-rgb),.9);
  --hub-ink-dim:rgba(var(--ink-rgb),.5);
  --hub-bubble:rgba(255,255,255,.08);
}

/* One ground for the whole panel, as on Chat: the room column is transparent
   and the composer, bubbles and room card float on it. */
#rep-shell #page-groups{background:var(--hub-frame)}
#rep-shell #page-groups .wc-main{background:transparent}

/* ── reading column ───────────────────────────────────────────────── */
#page-groups .wc-inner{
  max-width:836px;
  padding:30px 0 39px;
  gap:18px;
}

/* ── composer ─────────────────────────────────────────────────────── */
#page-groups .wc-composer-wrap{
  position:relative;
  border-top:0;
  background:transparent;
  padding-bottom:30px;
}
#page-groups .wc-composer{
  max-width:836px;
  margin:0 auto;
  padding:12px 10px 10px 15px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0;
  background:var(--hub-card);
  border:1px solid #e7e8ee;
  border-radius:19px;
  box-shadow:0 16px 36px #24294a05;
  min-height:145px;
  box-sizing:border-box;
  position:relative;
}
html[data-theme="dark"] #page-groups .wc-composer,
html:not([data-theme]) #page-groups .wc-composer{border-color:var(--hub-line)}

#page-groups .wc-composer #gc-input{
  flex:1 1 100%;
  min-width:0;
  padding:8px;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:14px;
  line-height:20px;
  color:var(--hub-ink);
  resize:none;
  align-self:stretch;
}
#page-groups .wc-composer #gc-input:focus{outline:none;box-shadow:none}
#page-groups .wc-composer #gc-input::placeholder{color:var(--hub-ink-dim)}

#page-groups .wc-composer #gc-send{
  width:28px;height:28px;
  margin-left:auto;
  border-radius:8px;
  background:var(--hub-accent);
  color:#fff;
  border:0;
}
#page-groups .wc-composer #gc-send svg{width:14px;height:14px}
#page-groups .wc-composer #gc-send:disabled{opacity:.35}
#page-groups .wc-composer #gc-send:not(:disabled):hover{filter:brightness(1.08)}

/* NOT extended (1): the composer's decorative "Auto /" hint. It is a mode
   label from the chat source with no meaning in a room, and it would sit
   exactly where the @tavvlo line has to go. */

/* NOT extended (2): .wc-foot is visually hidden on Chat. Here it carries
   the one thing a room needs and a chat does not — that Tavvlo only reads
   the conversation when someone tags it. It is restated in the composer's
   own second row so it reads as part of the control, not as a caption. */
#page-groups .wc-foot{
  max-width:836px;
  margin:0 auto;
  padding:0 4px;
  font-size:12px;
  line-height:1.4;
  text-align:left;
  color:var(--hub-ink-dim);
}
#page-groups .wc-foot strong{color:var(--hub-ink);font-weight:600}

/* ── turns ────────────────────────────────────────────────────────── */
#page-groups .wc-bubble{
  font-size:14px;
  line-height:1.6;
  color:var(--hub-ink);
}

/* The width cap lives on the WRAPPER, never on the bubble.
   A group bubble sits inside .gc-bwrap (it needs one — the sender's name and
   the reaction chips go there too), and .gc-bwrap is shrink-to-fit. A
   percentage max-width on the bubble therefore resolves against a parent whose
   own width depends on the bubble; the browser breaks that loop with
   min-content, and because .wc-bubble sets overflow-wrap:break-word,
   min-content is a BROKEN WORD. That is how "hello" rendered as "hel / oo" in
   an 836px column. Capping the wrapper instead keeps the same 85% look with no
   circularity. */
#page-groups .gc-bwrap{max-width:85%}
#page-groups .wc-bubble.user{
  padding:9px 13px;
  border:0;
  border-radius:13px;
  background:#f0f0ef;
  color:var(--hub-ink);
  line-height:20px;
  letter-spacing:-.25px;
}
html[data-theme="dark"] #page-groups .wc-bubble.user,
html:not([data-theme]) #page-groups .wc-bubble.user{background:var(--hub-bubble)}

/* A colleague's bubble is the SAME pill as your own — .wc-bubble.ai is
   deliberately NOT given Chat's bare-text treatment. Chat can drop the chrome
   because only one voice ever answers; in a room, "mine is a pill and yours is
   loose text" reads as two different kinds of message. One shape, and the side
   plus the name above it says who spoke. */
#page-groups .wc-bubble.ai{
  padding:9px 13px;
  border:0;
  border-radius:13px;
  background:#f0f0ef;
  color:var(--hub-ink);
  line-height:20px;
  letter-spacing:-.25px;
}
html[data-theme="dark"] #page-groups .wc-bubble.ai,
html:not([data-theme]) #page-groups .wc-bubble.ai{background:var(--hub-bubble)}

/* The room's settings button matches Chat's top-bar buttons: an icon, no box. */
#page-groups .wc-topbar .gc-settings{
  height:28px;
  width:28px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--hub-ink-dim);
}
#page-groups .wc-topbar .gc-settings:hover{
  background:rgba(var(--ink-rgb),.06);
  border:0;
  color:var(--hub-ink);
}

/* Tavvlo's bubble must never be mistakable for a colleague's, so it keeps its
   tint — restated in the new accent, because the old green now sits against a
   white ground it was not chosen for. */
#page-groups .wc-bubble.tavvlo{
  background:rgba(38,109,240,.06);
  border:1px solid rgba(38,109,240,.22);
  border-radius:13px;
  border-top-left-radius:6px;
  padding:9px 13px;
}
#page-groups .gc-sender.tavvlo{color:var(--hub-accent)}
#page-groups .gc-mention{
  color:var(--hub-accent);
  background:rgba(38,109,240,.10);
  font-weight:600;
  border-radius:4px;
  padding:0 3px;
}

/* NOT extended (3): Chat hides the avatar and closes the row gap, because
   in a one-to-one thread there is only ever one other speaker and a disc on
   every turn is noise. A room has several, and who said it is the whole
   point — so the avatar and the sender label stay. */

#page-groups .wc-loadline .wc-glyph{display:none}
#page-groups .wc-loadline{
  font-size:14px;
  line-height:20px;
  color:var(--hub-ink-dim);
}
#page-groups .wc-loading{min-height:20px;align-items:flex-start}

/* ── top bar ──────────────────────────────────────────────────────── */
#page-groups .wc-topbar{
  height:59px;
  padding:0 23px 0 20px;
  gap:8px;
}
#page-groups .wc-topbar .wc-rest-btn{
  height:100%;
  padding:0 2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--hub-ink);
  font-size:14px;
}
#page-groups .wc-topbar .wc-rest-btn:hover{
  border:0;
  background:transparent;
  color:var(--hub-ink);
}
/* The room name and its outlets sit where Chat puts the outlet picker, at
   the same size and weight. */
#page-groups .wc-topbar #gc-title{
  font-family:'Geist','Inter',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--hub-ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-groups .wc-topbar .gc-outlets{font-size:12px;color:var(--hub-ink-dim)}

/* ── Checklist: Overview ──────────────────────────────────────────────
   Ported from the Tavvlo Ops reference build. Its palette is light-only —
   an indigo brand on a near-white canvas with pastel band surfaces — so
   every tint here is expressed as an alpha over the current ink/surface
   rather than as a flat hex. That is what lets the same rules render on
   the hub's dark theme without a second copy of the block. */
#page-checklist{
  --ck-brand:#4f46e5;
  --ck-brand-soft:rgba(79,70,229,.10);
  --ck-muted:rgba(var(--ink-rgb),.52);
}
html[data-theme="dark"] #page-checklist,
html:not([data-theme]) #page-checklist{
  /* Indigo at full strength disappears into a dark card; lift it until it
     reads as a link rather than as disabled text. */
  --ck-brand:#9a94f5;
  --ck-brand-soft:rgba(154,148,245,.14);
}

/* The reference card: 14px radius and a single hairline shadow. Scoped to
   this page so the rest of the hub keeps its own card. */
#page-checklist .ors-card{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}

/* Greeting. The reference opens on the date and the reader's first name
   before any number — the page is addressed to someone, not published. */
#page-checklist .ck-hello{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
#page-checklist .ck-hello-date{font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-hello h1{
  margin:4px 0 0;
  font-size:32px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
}
#page-checklist .ck-hello p{
  margin:4px 0 0;
  font-size:15px;
  color:var(--ck-muted);
}

#page-checklist .ck-ov-top{
  display:grid;
  grid-template-columns:3.2fr repeat(5, 1fr);
  gap:16px;
  margin-bottom:16px;
}
#page-checklist .ck-ov-health{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
}
#page-checklist .ck-ov-health .ors-card-sub{font-size:14px;font-weight:500}
#page-checklist .ck-ov-health-num{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:6px;
}
#page-checklist .ck-ov-health-num b{
  font-size:40px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-ov-health-num span{
  font-size:17px;
  font-weight:500;
  color:var(--ck-muted);
}
#page-checklist .ck-ov-move{
  margin-top:8px;
  font-size:13px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-ov-move em{font-style:normal;font-weight:400;color:var(--ck-muted);margin-left:5px}
#page-checklist .ck-ov-move.up{color:#059669}
#page-checklist .ck-ov-move.down{color:#e11d48}
#page-checklist .ck-ov-move.flat{color:var(--ck-muted)}
#page-checklist .ck-spark{margin-left:auto;position:relative;width:50%;min-width:140px}
#page-checklist .ck-spark svg{display:block;width:100%;height:auto}

/* Stat tile. The icon is the reference's main tell: a 36px tinted chip in a
   hue that belongs to the metric, not a generic grey. */
#page-checklist .ck-ov-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px 12px;
  text-align:center;
}
#page-checklist .ck-ov-tile b{
  font-size:26px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-ov-tile span{font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-ov-tile i{
  font-style:normal;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  color:rgba(var(--ink-rgb),.35);
}
#page-checklist .ck-ov-tile i.up{color:#059669}
#page-checklist .ck-ov-tile i.down{color:#e11d48}
#page-checklist .ck-tile-ico{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:10px;
}
#page-checklist .ck-tile-ico svg{width:20px;height:20px;display:block}
/* A solid glyph carries its own colour and needs no plate behind it — the
   reference draws the check, clock and sparkle that way and only plates the
   two outline icons. */
#page-checklist .ck-tile-ico.plain{border-radius:0;background:none}
#page-checklist .ck-tile-ico.plain svg{width:36px;height:36px}
#page-checklist .ck-tile-ico.blue{background:rgba(37,99,235,.10);color:#2563eb}
#page-checklist .ck-tile-ico.violet{background:rgba(124,58,237,.10);color:#7c3aed}
#page-checklist .ck-tile-ico.green{color:#10b981}
#page-checklist .ck-tile-ico.orange{color:#f97316}
#page-checklist .ck-tile-ico.spark{color:#8b5cf6}

#page-checklist .ck-ov-mid{
  display:grid;
  grid-template-columns:2.4fr 1fr;
  gap:16px;
  align-items:start;
}
#page-checklist .ck-ov-bottom{
  display:grid;
  grid-template-columns:2fr 0.95fr 1.75fr;
  gap:16px;
  align-items:start;
}
/* An `fr` track will not shrink below its item's min-content width, so the
   widest card was taking space from the other two and the ratios above were
   decorative — the leaderboard ended up narrower than its own heading. */
#page-checklist .ck-ov-mid > *,
#page-checklist .ck-ov-bottom > *{min-width:0}

/* ── Attention cards ──────────────────────────────────────────────────
   A band is a whole surface here, not a coloured number: the card carries
   the tint, the border and the button outline together, so severity is
   legible from across the room before any figure is read. */
#page-checklist .ck-att{
  display:flex;
  flex-direction:column;
  border-radius:12px;
  border:1px solid;
  padding:16px;
  text-align:left;
  width:100%;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
#page-checklist .ck-att-top{display:flex;align-items:flex-start;gap:10px}
#page-checklist .ck-att-ico{flex:none;width:24px;height:24px;margin-top:2px}
#page-checklist .ck-att-ico svg{width:100%;height:100%;display:block}
#page-checklist .ck-att-id{min-width:0;flex:1}
/* The reference's demo outlets are one word ("Powai"). Real ones read
   "Shiv Sagar — Jogeshwari", which truncates to "Shiv Sagar —…" and names
   nothing. Two lines, then clip. */
#page-checklist .ck-att-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  overflow:hidden;
}
#page-checklist .ck-att-health{display:flex;align-items:baseline;gap:6px;margin-top:2px}
#page-checklist .ck-att-health b{
  font-size:22px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-att-health span{font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-att-chev{flex:none;width:16px;height:16px;color:var(--ck-muted)}
#page-checklist .ck-att-chev svg{width:100%;height:100%;display:block}
#page-checklist .ck-att-why{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.35;
}
#page-checklist .ck-att-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
#page-checklist .ck-att-stats b{
  display:block;
  font-size:19px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-att-stats > span{display:block}
#page-checklist .ck-att-stats b + span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.2;
  color:var(--ck-muted);
}
#page-checklist .ck-att-go{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:16px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid;
  background:var(--surface-1, #fff);
  font-size:13px;
  font-weight:600;
}
#page-checklist .ck-att-go svg{width:16px;height:16px}
#page-checklist .ck-att:hover .ck-att-go{background:rgba(var(--ink-rgb),.04)}

#page-checklist .ck-att.b-critical{background:rgba(225,29,72,.07);border-color:rgba(225,29,72,.22)}
#page-checklist .ck-att.b-critical .ck-att-ico,
#page-checklist .ck-att.b-critical .ck-att-health b,
#page-checklist .ck-att.b-critical .ck-att-stats b{color:#e11d48}
#page-checklist .ck-att.b-critical .ck-att-go{color:#e11d48;border-color:rgba(225,29,72,.3)}

#page-checklist .ck-att.b-serious{background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.24)}
#page-checklist .ck-att.b-serious .ck-att-ico,
#page-checklist .ck-att.b-serious .ck-att-health b,
#page-checklist .ck-att.b-serious .ck-att-stats b{color:#ea7317}
#page-checklist .ck-att.b-serious .ck-att-go{color:#ea7317;border-color:rgba(249,115,22,.32)}

#page-checklist .ck-att.b-warning{background:rgba(var(--ink-rgb),.035);border-color:var(--color-palette--strok-1)}
#page-checklist .ck-att.b-warning .ck-att-ico,
#page-checklist .ck-att.b-warning .ck-att-health b,
#page-checklist .ck-att.b-warning .ck-att-stats b{color:rgba(var(--ink-rgb),.75)}
#page-checklist .ck-att.b-warning .ck-att-go{color:rgba(var(--ink-rgb),.85);border-color:var(--color-palette--strok-1)}

#page-checklist .ck-att.b-good{background:rgba(5,150,105,.07);border-color:rgba(5,150,105,.2)}
#page-checklist .ck-att.b-good .ck-att-ico,
#page-checklist .ck-att.b-good .ck-att-health b,
#page-checklist .ck-att.b-good .ck-att-stats b{color:#059669}
#page-checklist .ck-att.b-good .ck-att-go{color:#059669;border-color:rgba(5,150,105,.28)}

#page-checklist .ck-outlet-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
@media (max-width: 1400px){
  #page-checklist .ck-outlet-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* A count beside the heading, in the same rose as the cards it counts. */
#page-checklist .ck-att-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(225,29,72,.09);
  color:#e11d48;
  font-size:12px;
  font-weight:500;
}
#page-checklist .ck-att-count svg{width:14px;height:14px}

/* ── Insights ─────────────────────────────────────────────────────────
   Numbered because the order is the ranking, and the reference closes the
   card with a way to act on what it just said. */
#page-checklist .ck-ins-card{display:flex;flex-direction:column}
#page-checklist .ck-ins-head{display:flex;align-items:flex-start;gap:10px}
#page-checklist .ck-ins-head > svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--ck-brand)}
#page-checklist .ck-ins-head h2{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
}
#page-checklist .ck-ins-head .ck-more{margin-left:auto;color:var(--ck-muted);flex:none}
#page-checklist .ck-ins-head .ck-more svg{width:16px;height:16px;display:block}
#page-checklist .ck-insights{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}
#page-checklist .ck-insights li{
  display:flex;
  gap:12px;
  font-size:13.5px;
  line-height:1.4;
}
#page-checklist .ck-insights b{
  flex:none;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--ck-brand-soft);
  color:var(--ck-brand);
}
#page-checklist .ck-ask{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:20px;
  padding:12px 16px;
  border-radius:12px;
  border:0;
  background:var(--ck-brand-soft);
  color:var(--ck-brand);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-ask:hover{background:rgba(79,70,229,.18)}
#page-checklist .ck-ask svg{width:16px;height:16px}
#page-checklist .ck-tagline{
  margin:12px 0 0;
  text-align:center;
  font-size:12px;
  font-style:italic;
  line-height:1.35;
  color:var(--ck-muted);
}

/* ── Trend chart ──────────────────────────────────────────────────────
   Hand-drawn SVG rather than a chart library: one series, no legend, and
   the hub already carries enough script weight. */
#page-checklist .ck-chart{margin-top:16px;position:relative}
#page-checklist .ck-chart svg{display:block;width:100%;height:auto}
#page-checklist .ck-chart .grid{stroke:var(--color-palette--strok-1);stroke-width:1}
#page-checklist .ck-chart .axis{
  fill:var(--ck-muted);
  font-size:10px;
  font-family:Inter, sans-serif;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#page-checklist .ck-chart .dot{stroke:var(--surface-1, #fff);stroke-width:2}
#page-checklist .ck-chart .cross{stroke:rgba(var(--ink-rgb),.28);stroke-width:1;stroke-dasharray:3 3}
#page-checklist .ck-chart .hit{fill:transparent;cursor:crosshair}

/* One tooltip style for both the chart and the sparkline. Absolute against
   the plot and translated by half its own width, so it centres on the point
   rather than starting at it. */
#page-checklist .ck-tip{
  position:absolute;
  z-index:3;
  pointer-events:none;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:8px;
  background:#111827;
  color:#fff;
  font-size:11px;
  font-weight:500;
  line-height:1.35;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
#page-checklist .ck-tip b{font-variant-numeric:tabular-nums;font-weight:600}
#page-checklist .ck-tip em{display:block;font-style:normal;color:rgba(255,255,255,.6)}
#page-checklist .ck-spark .ck-tip{transform:none;right:0;left:auto;top:0;padding:3px 7px;font-size:10px}
#page-checklist .ck-spark .ck-tip em{display:inline;margin-left:4px}

/* An info affordance beside a card title, for the one number whose recipe
   is not obvious from its name. */
#page-checklist .ck-info{
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  color:var(--ck-muted);
  cursor:help;
}
#page-checklist .ck-info svg{width:16px;height:16px;display:block}
#page-checklist .ck-card-link{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:0;
  background:none;
  padding:0;
  font-size:13px;
  font-weight:600;
  color:var(--ck-brand);
  cursor:pointer;
}
#page-checklist .ck-card-link:hover{text-decoration:underline}
#page-checklist .ck-card-link svg{width:16px;height:16px}

/* ── Best / needs attention ───────────────────────────────────────────
   Two banded strips rather than one list with a divider: the heading is
   the label for everything under it, so it carries the colour. */
#page-checklist .ck-lead-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
}
#page-checklist .ck-lead-head{white-space:nowrap}
#page-checklist .ck-lead-head svg{width:16px;height:16px;flex:none}
#page-checklist .ck-lead-head.good{background:rgba(5,150,105,.10);color:#047857}
#page-checklist .ck-lead-head.bad{background:rgba(249,115,22,.10);color:#c2410c}
#page-checklist .ck-lead-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 16px;
  font-size:13px;
  border-bottom:1px solid var(--color-palette--strok-1);
}
#page-checklist .ck-lead-row:last-child{border-bottom:0}
#page-checklist .ck-lead-row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-lead-row b{font-weight:600;font-variant-numeric:tabular-nums}
#page-checklist .ck-lead-card{padding:0;overflow:hidden}

/* ── Recent activity ──────────────────────────────────────────────────
   Fixed columns so the eye scans down the outlet names; the verdict is the
   dot, which is why it comes first. */
#page-checklist .ck-activity{margin-top:16px}
#page-checklist .ck-act{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  padding:5px 0;
}
#page-checklist .ck-act-dot{
  flex:none;
  width:8px;
  height:8px;
  margin-top:5px;
  border-radius:50%;
  background:rgba(var(--ink-rgb),.25);
}
#page-checklist .ck-act-dot.good{background:#10b981}
#page-checklist .ck-act-dot.bad{background:#f43f5e}
#page-checklist .ck-act-dot.warn{background:#f59e0b}
#page-checklist .ck-act-time{
  flex:none;
  width:44px;
  text-align:right;
  color:var(--ck-muted);
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-act-outlet{
  flex:none;
  width:96px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-act-msg{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 1400px){
  #page-checklist .ck-ov-bottom{grid-template-columns:1.6fr 1fr}
  #page-checklist .ck-ov-bottom > :nth-child(3){grid-column:1 / -1}
}
@media (max-width: 1180px){
  #page-checklist .ck-ov-top{grid-template-columns:repeat(3, 1fr)}
  #page-checklist .ck-ov-health{grid-column:1 / -1}
  #page-checklist .ck-ov-mid,
  #page-checklist .ck-ov-bottom{grid-template-columns:1fr}
  #page-checklist .ck-ov-bottom > :nth-child(3){grid-column:auto}
  #page-checklist .ck-outlet-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 700px){
  #page-checklist .ck-ov-top{grid-template-columns:repeat(2, 1fr)}
  #page-checklist .ck-spark{display:none}
  #page-checklist .ck-hello h1{font-size:26px}
  #page-checklist .ck-outlet-grid{grid-template-columns:1fr}
}

/* Selecting a single outlet hides the two network-only cards (insights,
   leaderboard). Their columns have to close with them, or the card that is
   left sits at 2.4fr with a third of the row empty beside it. */
#page-checklist .ck-ov-mid:has(> .ors-card[hidden]){
  grid-template-columns:1fr;
}
#page-checklist .ck-ov-bottom:has(> .ors-card[hidden]){
  grid-template-columns:2fr 1.4fr;
}

/* "vs the previous 7 days" reads as a caption under the figure rather than a
   sentence that happens to wrap mid-phrase. */
#page-checklist .ck-ov-move em{display:block;margin-top:2px;margin-left:0}

/* ── Checklist: Team ──────────────────────────────────────────────────
   The Attio People page's records table. Two things carry the look and are
   easy to lose: `table-layout:fixed` with an explicit colgroup (so columns
   do not resize themselves as names change length), and the first column
   painted white against the tinted body — that is what makes the name read
   as the record and the rest as its attributes. */
#page-checklist .tm-toolbar{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:9px 2px;
  border-bottom:1px solid var(--color-palette--strok-1);
  flex-wrap:wrap;
}
#page-checklist .tm-toolbar.tm-smallbar{min-height:46px}
#page-checklist .tm-spacer{flex:1}
#page-checklist .tm-sep{
  width:1px;
  height:20px;
  background:var(--color-palette--strok-1);
}
#page-checklist .tm-note{font-size:12px;color:rgba(var(--ink-rgb),.4)}

#page-checklist .tm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:5px 10px;
  border-radius:9px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
  color:var(--ink-solid);
  font:inherit;
  font-size:13px;
  line-height:1.1;
  cursor:pointer;
  white-space:nowrap;
}
#page-checklist .tm-btn:hover{background:rgba(var(--ink-rgb),.04)}
#page-checklist .tm-btn svg{width:14px;height:14px;flex:none}
#page-checklist .tm-btn .tm-caret{width:12px;height:12px;color:rgba(var(--ink-rgb),.4)}
#page-checklist .tm-btn strong{font-weight:600}
#page-checklist .tm-btn.tm-quiet{
  background:rgba(var(--ink-rgb),.03);
  border-color:transparent;
  color:rgba(var(--ink-rgb),.62);
}
#page-checklist .tm-btn.tm-primary{
  background:var(--color-palette--primary);
  border-color:var(--color-palette--primary);
  color:#fff;
}
#page-checklist .tm-btn.tm-primary:hover{filter:brightness(1.06)}
/* The little square record badge Attio puts before an object name. */
#page-checklist .tm-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:4px;
  background:#0fc27b;
  color:#fff;
  flex:none;
}
#page-checklist .tm-badge svg{width:11px;height:11px}

#page-checklist .tm-scroll{width:100%;overflow-x:auto}
#page-checklist .tm-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:13px;
  white-space:nowrap;
}
#page-checklist .tm-table th{
  height:38px;
  padding:0 13px;
  text-align:left;
  font-weight:400;
  font-size:12.5px;
  color:rgba(var(--ink-rgb),.55);
  border-bottom:1px solid var(--color-palette--strok-1);
  border-right:1px solid var(--color-palette--strok-1);
}
#page-checklist .tm-table td{
  height:36px;
  padding:0 13px;
  overflow:hidden;
  text-overflow:ellipsis;
  border-bottom:1px solid var(--color-palette--strok-1);
  border-right:1px solid var(--color-palette--strok-1);
  background:rgba(var(--ink-rgb),.018);
}
#page-checklist .tm-table td:first-child,
#page-checklist .tm-table th:first-child{background:transparent}
#page-checklist .tm-table th:last-child,
#page-checklist .tm-table td:last-child{border-right:0}
#page-checklist .tm-table tbody tr{cursor:pointer}
#page-checklist .tm-table tbody tr:hover td{background:rgba(var(--ink-rgb),.05)}
#page-checklist .tm-table .num{text-align:right;font-variant-numeric:tabular-nums}
#page-checklist .tm-table tfoot td{
  height:36px;
  background:transparent;
  border-bottom:0;
  border-right:0;
  color:rgba(var(--ink-rgb),.45);
}

/* The separator only earns its keep between two things. With no filter note
   beside it, it reads as a stray tick. */
#page-checklist .tm-smallbar:has(#tm-note:empty) .tm-sep{display:none}
/* One row height, and it is this one. The picker offered three and the other
   two were never the right answer for a roster: compact loses the avatar's
   breathing room, and the default sat between the two doing neither well. */
#page-checklist .tm-table td{height:46px}

#page-checklist .tm-person{display:flex;align-items:center;gap:9px;min-width:0}
#page-checklist .tm-avatar{
  flex:none;
  width:20px;
  height:20px;
  border-radius:6px;
  display:grid;
  place-items:center;
  /* 12px, not 11. Two separate things were pushing the letter off centre:

     1. The line box inherited the table's 1.45 line-height — taller than the
        glyph — so place-items centred a box the letter did not fill.
        line-height:1 collapses the box onto the glyph.

     2. Chrome snaps a text baseline to whole pixels, so once the box was right
        the letter could still only sit 1px high or 1px low, never between.
        Which of the two it picked depends on the glyph's height in device
        pixels — and at 12px it lands centred (measured: 0.25px out, against
        1.00px at 11px). The size is doing the alignment; do not "tidy" it
        back to 11 without re-measuring. */
  font-size:12px;
  font-weight:600;
  line-height:1;
  text-align:center;
  background:rgba(15,194,123,.14);
  color:#0a9c62;
}
/* The name and its chip share a baseline row, so the chip is centred against
   the text rather than hung from the top of the cell. */
#page-checklist .tm-person{align-items:center}
#page-checklist .tm-name{
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:500;
  color:var(--ink-solid);
}
#page-checklist .tm-dim{color:rgba(var(--ink-rgb),.42)}
/* A blank cell and an unassigned person are different facts; the em dash is
   "we have no figure", the words are "nobody has done this yet". */
#page-checklist .tm-none{color:rgba(var(--ink-rgb),.3)}

#page-checklist .tm-wide{width:100%}
#page-checklist .ck-hint{
  margin-top:6px;
  font-size:11.5px;
  line-height:1.45;
  color:rgba(var(--ink-rgb),.42);
}
#page-checklist .tm-assign{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:230px;
  overflow-y:auto;
  border:1px solid var(--color-palette--strok-1);
  border-radius:10px;
  padding:6px;
}
#page-checklist .tm-check{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 7px;
  border-radius:7px;
  font-size:13px;
  cursor:pointer;
}
#page-checklist .tm-check:hover{background:rgba(var(--ink-rgb),.04)}
#page-checklist .tm-check input{flex:none;width:15px;height:15px;accent-color:#0fc27b}
#page-checklist .tm-check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width: 700px){
  #page-checklist .tm-toolbar{gap:6px}
  #page-checklist .tm-btn{font-size:12px;padding:4px 8px}
}

/* Dashboard access. The switch row reads as a statement rather than a field,
   so it sits outside the bordered assign list the checkbox groups use. */
#page-checklist .tm-check.tm-switch{
  padding-left:0;
  font-weight:500;
}
#page-checklist .tm-check.tm-switch:hover{background:transparent}
#page-checklist .tm-check input[type="radio"]{
  flex:none;
  width:15px;
  height:15px;
  accent-color:#0fc27b;
}
#page-checklist .tm-chip{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:99px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.01em;
  background:rgba(15,194,123,.12);
  color:#0a9c62;
  vertical-align:1px;
}

/* ── Handover: assignment and the internal note ───────────────────────
   Mounted inside two detail panels that own their own type scale, so this
   sets its own rather than inheriting two different ones. */
.ho-slot[hidden]{display:none}
.ho-box{
  margin:14px 0;
  padding:13px 14px;
  border:1px solid var(--color-palette--strok-1);
  border-radius:13px;
  background:rgba(var(--ink-rgb),.02);
  font-family:Inter, sans-serif;
}
.ho-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-solid);
}
.ho-chip{
  padding:1px 8px;
  border-radius:99px;
  font-size:10.5px;
  font-weight:600;
  background:rgba(224,138,42,.14);
  color:#b3701f;
}
.ho-chip.done{background:rgba(15,194,123,.14);color:#0a9c62}
/* The instruction the owner left. Quoted, because it is someone's words. */
.ho-brief{
  margin-top:8px;
  padding-left:9px;
  border-left:2px solid var(--color-palette--strok-1);
  font-size:12.5px;
  line-height:1.5;
  color:rgba(var(--ink-rgb),.7);
}
.ho-hint{
  margin-top:7px;
  font-size:11.5px;
  line-height:1.5;
  color:rgba(var(--ink-rgb),.45);
}
.ho-label{
  display:block;
  margin:11px 0 4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(var(--ink-rgb),.45);
}
.ho-input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--color-palette--strok-1);
  border-radius:9px;
  background:var(--surface-1, #fff);
  color:var(--ink-solid);
  font:inherit;
  font-size:13px;
  line-height:1.45;
  resize:vertical;
}
.ho-input:focus{outline:none;border-color:var(--color-palette--primary)}
.ho-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:9px;
  flex-wrap:wrap;
}
.ho-row .ho-input{flex:1;min-width:150px}
.ho-btn{
  flex:none;
  padding:7px 13px;
  border-radius:9px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
  color:var(--ink-solid);
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
}
.ho-btn.primary{
  background:var(--color-palette--primary);
  border-color:var(--color-palette--primary);
  color:#fff;
}
.ho-btn[disabled]{opacity:.5;cursor:not-allowed}
.ho-msg{font-size:11.5px;color:rgba(var(--ink-rgb),.5)}

/* The notes themselves. Cause and prevention are labelled and kept apart,
   because a note that only answers the first half is the failure this whole
   flow exists to prevent — and it should be visible at a glance which half
   somebody actually filled in. */
.ho-notes{
  margin:12px 0;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-family:Inter, sans-serif;
}
.ho-note{
  padding:10px 12px;
  border-radius:11px;
  background:rgba(var(--ink-rgb),.03);
}
.ho-note-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-solid);
}
.ho-note-head time{font-weight:400;color:rgba(var(--ink-rgb),.4)}
.ho-note-line{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(var(--ink-rgb),.72);
}
.ho-note-line b{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(var(--ink-rgb),.4);
  margin-bottom:1px;
}

/* ── Menus, ported from the reference popover ─────────────────────────
   4px of padding around 31px rows on a 6px radius, so the hovered row sits
   inside the card rather than butting against its border. Fixed positioning
   and a body-level host: these open from buttons inside panels that clip
   their overflow, and an absolutely-positioned menu would be cut off.

   Colours are the hub's own — the reference is light-only and this is not. */
.ck-pop-host{position:fixed;inset:0;z-index:120}
.ck-pop-host[hidden]{display:none}
/* Catches the click that dismisses the menu. Transparent, not dimmed: a menu
   is not a modal and darkening the page behind one overstates it. */
.ck-pop-scrim{position:absolute;inset:0}
.ck-pop{
  position:fixed;
  min-width:200px;
  max-width:min(320px, calc(100vw - 16px));
  max-height:70vh;
  overflow-y:auto;
  padding:4px;
  border-radius:11px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
  box-shadow:0 8px 30px rgba(37,35,51,.10), 0 2px 6px rgba(37,35,51,.07);
  animation:ck-pop-in .12s ease-out;
  font-family:Inter, sans-serif;
}
@keyframes ck-pop-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

.ck-pop-search{
  width:100%;
  border:0;
  border-bottom:1px solid var(--color-palette--strok-1);
  border-radius:0;
  padding:9px 7px;
  margin-bottom:3px;
  background:none;
  color:var(--ink-solid);
  font:inherit;
  font-size:13px;
}
.ck-pop-search:focus{outline:none}
.ck-pop-search::placeholder{color:rgba(var(--ink-rgb),.38)}

.ck-pop-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:31px;
  padding:6px 9px;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--ink-solid);
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.ck-pop-row:hover,
.ck-pop-row.selected{background:rgba(var(--ink-rgb),.05)}
.ck-pop-row > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The tick is the only thing that says which option is in effect, so it keeps
   the accent colour rather than the muted one the rest of the row uses. */
.ck-pop-check{margin-left:auto;flex:none;color:#0fc27b;font-size:12px}
.ck-pop-trail{margin-left:auto;flex:none;color:rgba(var(--ink-rgb),.35);font-size:11px}
.ck-pop-label{
  padding:8px 9px 4px;
  font-size:10.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:rgba(var(--ink-rgb),.38);
}
.ck-pop-divider{height:1px;margin:4px 0;background:var(--color-palette--strok-1)}
.ck-pop-empty{padding:12px 9px;font-size:12.5px;color:rgba(var(--ink-rgb),.42)}
/* The square record badge the reference puts before a view's name. */
.ck-pop-badge{
  flex:none;
  width:15px;height:15px;
  border-radius:4px;
  display:grid;place-items:center;
  background:#0fc27b;color:#fff;
  font-size:9px;font-weight:700;
}

/* ── Empty state, ported from the reference ───────────────────────────
   Art, title, two lines, one action — centred in whatever space is left
   rather than pinned to the top, so a nearly-empty page does not read as a
   loading failure. */
#page-checklist .ck-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 20px 72px;
  font-family:Inter, sans-serif;
}
#page-checklist .ck-empty-art{
  width:216px;
  height:184px;
  margin-bottom:6px;
  overflow:visible;
}
/* Three weights of the same ink: the dotted field is nearly invisible, the
   register marks a little firmer, the card firmer still — which is what
   makes a flat line drawing read as having depth. */
/* The field is texture, not an object: barely there, so the card in front of
   it is unambiguously the subject.

   The fill goes on the CIRCLE, not on the rect that references the pattern.
   Pattern contents do not inherit from the element using the pattern — they
   resolve against the pattern's own place in the tree — so `color` set on the
   rect never reached them and every dot was rendering PURE BLACK regardless of
   what the rule above it said. It looked deliberate, which is why it survived
   several passes of being told the grid was too dark. */
#page-checklist .ck-empty-dot{fill:rgba(var(--ink-rgb),.14)}
#page-checklist .ck-empty-tick{
  stroke:rgba(var(--ink-rgb),.08);
  stroke-width:1;
  fill:none;
}
#page-checklist .ck-empty-card{
  stroke:rgba(var(--ink-rgb),.15);
  stroke-width:3;
  fill:none;
  stroke-linejoin:round;
}
/* The two written lines. Heavier and round-capped so they read as content
   inside the card rather than as more of its frame. */
#page-checklist .ck-empty-rule{
  stroke:rgba(var(--ink-rgb),.15);
  stroke-width:4.5;
  fill:none;
  stroke-linecap:round;
}
/* The one filled shape. It masks the dots behind it so the card reads as the
   subject and the field as background, rather than the two interleaving. */
#page-checklist .ck-empty-plate{fill:var(--surface-1, #fff)}
#page-checklist .ck-empty-title{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink-solid);
}
#page-checklist .ck-empty-body{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.55;
  color:rgba(var(--ink-rgb),.5);
}
#page-checklist .ck-empty-actions{
  display:flex;
  gap:9px;
  margin-top:20px;
}

/* ── Team: the object header ──────────────────────────────────────────
   Badge and name above the toolbars, as the reference has it. */
#page-checklist .tm-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:2px 2px 12px;
}
#page-checklist .tm-head-badge{
  flex:none;
  width:20px;height:20px;
  border-radius:5px;
  display:grid;place-items:center;
  background:#5469e5;
  color:#fff;
}
#page-checklist .tm-head-badge svg{width:13px;height:13px}
#page-checklist .tm-head-title{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink-solid);
}

/* The grid. The reference rules every cell, which is what makes an empty table
   still read as a table rather than as a stray header — so the borders live on
   the header and the footer too, not only on populated rows. */
#page-checklist .tm-table thead th{
  border-top:1px solid var(--color-palette--strok-1);
}
#page-checklist .tm-table tfoot td{
  border-top:1px solid var(--color-palette--strok-1);
}
/* An empty body still needs the columns to stand up, so the header's own
   right-hand rules carry the grid down to the count row. */
#page-checklist .tm-scroll{border-radius:0}

/* The empty state now sits UNDER the table rather than replacing it, so it
   needs less of its own top room. */
#page-checklist .tm-scroll + .ck-empty,
#page-checklist #tm-empty .ck-empty{padding-top:40px}

/* ── Team table, matched to the reference ─────────────────────────────
   The differences that made ours read as a different product:

   HEADINGS ARE DARK, NOT GREY. The reference sets its column names at near-full
   ink and normal weight, and greys only the values it has none of. Ours had it
   the other way round, which made the header look like a caption.

   THE TABLE GOES EDGE TO EDGE. The reference runs its rules the full width of
   the pane; ours sat inside the panel's padding, so every rule stopped short
   and the grid looked like a floating card. */
#page-checklist .tm-table thead th{
  height:44px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-solid);
}
#page-checklist .tm-h{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
#page-checklist .tm-table .num .tm-h{justify-content:flex-end}
#page-checklist .tm-h svg{
  flex:none;
  width:14px;height:14px;
  color:rgba(var(--ink-rgb),.38);
}

/* Full-bleed. The pane centres its content in 1040px with 24px of padding,
   which is right for cards and wrong for a table — every rule stopped short of
   both edges and the grid read as a floating box. Team drops the cap while it
   is the visible tab, and the inset is put back on each element instead, so
   the RULES reach the edges while the TEXT still lines up where it did. */
#page-checklist .ors-inner:has(> #ck-tab-team:not([hidden])){
  max-width:none;
  padding:0 0 40px;
}
#page-checklist #ck-tab-team .tm-head,
#page-checklist #ck-tab-team .tm-toolbar{padding-left:24px;padding-right:24px}
#page-checklist #ck-tab-team .tm-table th:first-child,
#page-checklist #ck-tab-team .tm-table td:first-child{padding-left:24px}
#page-checklist #ck-tab-team .tm-table th:last-child,
#page-checklist #ck-tab-team .tm-table td:last-child{padding-right:24px}
#page-checklist #ck-tab-team .ck-empty{padding-left:24px;padding-right:24px}
/* The toolbars are separated by rules that reach both edges, as the reference
   has them — a rule that stops short reads as an underline on the buttons. */
#page-checklist #ck-tab-team .tm-toolbar{
  border-bottom:1px solid var(--color-palette--strok-1);
}
#page-checklist #ck-tab-team .tm-head{
  padding-top:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--color-palette--strok-1);
}

/* The footer calculations. Muted until one is chosen, then it carries a value
   and earns full ink. */
#page-checklist .tm-calc{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-size:12.5px;
  color:rgba(var(--ink-rgb),.38);
  cursor:pointer;
  white-space:nowrap;
}
#page-checklist .tm-calc:hover{color:rgba(var(--ink-rgb),.7)}
#page-checklist .tm-calc.has-value{color:var(--ink-solid);font-weight:500}
#page-checklist .tm-table tfoot td{height:44px}
#page-checklist .tm-table tfoot #tm-count{
  color:var(--ink-solid);
  font-variant-numeric:tabular-nums;
}

/* The refresh control as the loading indicator. */
#page-checklist #ck-refresh-btn.is-busy svg{
  animation:ck-spin .7s linear infinite;
  transform-origin:50% 50%;
}
#page-checklist #ck-refresh-btn.is-busy{
  pointer-events:none;
  opacity:.75;
}
@keyframes ck-spin{to{transform:rotate(360deg)}}

/* A second chip tone, so "can sign in" and "gets escalations" are told apart
   at a glance rather than by reading two identical badges. */
#page-checklist .tm-chip.tm-chip-alt{
  background:rgba(84,105,229,.12);
  color:#4054c8;
}
#page-checklist .tm-check em{font-style:normal;font-size:11px}

/* Escalation groups editor: a name and its two actions on one line. */
#page-checklist .tmg-line{display:flex;gap:8px;align-items:center}
#page-checklist .tmg-line .ck-input{flex:1;min-width:0}
#page-checklist .tmg-line .ck-btn{flex:none}


/* ══ Checklist: the rest of the reference build ═══════════════════════════
   Tasks, Verification, Checklists, Outlets and Insights, carrying the same
   language the Overview already uses: 14px cards, an indigo brand, tinted
   pills, and every colour expressed as an alpha over the current ink so the
   hub's dark theme needs no second copy. */

/* ── Page heading ─────────────────────────────────────────────────────
   Every reference page opens with a title and one sentence saying what it
   is for, before any control. */
#page-checklist .ck-page-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
#page-checklist .ck-page-head h1{
  margin:0;
  font-size:30px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
}
#page-checklist .ck-page-head p{
  margin:5px 0 0;
  font-size:14px;
  color:var(--ck-muted);
}

/* ── Shared: pills ────────────────────────────────────────────────────
   A dot plus a word in a tinted chip. The dot carries the hue at full
   strength; the chip carries it at a tenth, so a row of them reads as a
   column of colours without shouting. */
#page-checklist .ck-dot-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
#page-checklist .ck-dot-pill i{
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
#page-checklist .t-rose{background:rgba(225,29,72,.10);color:#be123c}
#page-checklist .t-amber{background:rgba(245,158,11,.13);color:#b45309}
#page-checklist .t-blue{background:rgba(37,99,235,.10);color:#1d4ed8}
#page-checklist .t-violet{background:rgba(124,58,237,.11);color:#6d28d9}
#page-checklist .t-emerald{background:rgba(5,150,105,.11);color:#047857}
#page-checklist .t-grey{background:rgba(var(--ink-rgb),.07);color:rgba(var(--ink-rgb),.6)}
html[data-theme="dark"] #page-checklist .t-rose,
html:not([data-theme]) #page-checklist .t-rose{color:#fb7185}
html[data-theme="dark"] #page-checklist .t-amber,
html:not([data-theme]) #page-checklist .t-amber{color:#fbbf24}
html[data-theme="dark"] #page-checklist .t-blue,
html:not([data-theme]) #page-checklist .t-blue{color:#60a5fa}
html[data-theme="dark"] #page-checklist .t-violet,
html:not([data-theme]) #page-checklist .t-violet{color:#a78bfa}
html[data-theme="dark"] #page-checklist .t-emerald,
html:not([data-theme]) #page-checklist .t-emerald{color:#34d399}

/* An initials disc, brand-tinted. Sized in one place so the panel's smaller
   copy is a modifier rather than a second set of numbers. */
#page-checklist .ck-avatar{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ck-brand-soft);
  color:var(--ck-brand);
  font-size:10px;
  font-weight:600;
  /* Chrome snaps a glyph baseline to whole pixels, so a disc this small can
     only sit 1px high or 1px low. 10px measures closest to centred. */
  line-height:1;
}
#page-checklist .ck-avatar.sm{width:18px;height:18px;font-size:8px}

/* The hub's other pages are reading surfaces and sit in a 1040px column. This
   one is an operations board — an eight-column table, five stat tiles and a
   detail panel beside them — and the reference lays it out at 1560px. At 1040
   the tiles were 197px wide and "no change vs previous" wrapped three ways. */
#page-checklist .ors-inner{max-width:1560px}

/* An id selector beats [hidden]{display:none}, so the panel's own display:flex
   kept it on screen with nothing in it. */
#page-checklist .ck-tp[hidden]{display:none}

/* ── One outlet ───────────────────────────────────────────────────────
   Health on the left with the four terms that produced it; the trend on the
   right, twice as wide, because a shape needs room and a number does not. */
#page-checklist .ck-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  padding:0;
  border:0;
  background:none;
  color:var(--ck-muted);
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
#page-checklist .ck-back:hover{color:inherit}
#page-checklist .ck-od-top{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:16px;
  align-items:start;
}
#page-checklist .ck-od-top > *{min-width:0}
@media (max-width: 1100px){#page-checklist .ck-od-top{grid-template-columns:1fr}}
#page-checklist .ck-od-num{display:flex;align-items:baseline;gap:6px;margin-top:6px}
#page-checklist .ck-od-num b{
  font-size:44px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-od-num span{font-size:16px;color:var(--ck-muted)}
#page-checklist .ck-od-subs{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--color-palette--strok-1);
}
#page-checklist .ck-od-sub-row .k{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#page-checklist .ck-od-sub-row .k span{font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-od-sub-row .k b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
#page-checklist .ck-od-sub-row .ck-bar-track{display:block;height:6px;margin-top:6px}
#page-checklist .ck-od-sub-row .w{margin-top:4px;font-size:11px;color:var(--ck-muted)}

#page-checklist .ck-od-rec{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--color-palette--strok-1);
  display:flex;
  flex-direction:column;
  gap:8px;
}
#page-checklist .ck-od-rec-head{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ck-muted);
}
#page-checklist .ck-od-rec-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(249,115,22,.09);
}
#page-checklist .ck-od-rec-row svg{flex:none;width:16px;height:16px;margin-top:2px;color:#f97316}
#page-checklist .ck-od-rec-row p{margin:0;font-size:13px;line-height:1.35}
#page-checklist .ck-od-rec-row b{font-weight:600}

#page-checklist .ck-od-acts{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
#page-checklist .ck-od-acts li{display:flex;align-items:flex-start;gap:12px;font-size:13px}
#page-checklist .ck-od-acts time{
  flex:none;
  width:72px;
  color:var(--ck-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#page-checklist .ck-od-acts span{min-width:0}

/* ══════════════════════════════════════════════════════════════════════
   SENTIMENT TREND — three shares over time
   ══════════════════════════════════════════════════════════════════════
   Replaces the single −100..+100 index line and its dashed previous-period
   twin. An index answers "is it up or down"; this answers "what is the mix,
   and which part of it moved" — which is the question the page's own donut,
   issue list and queue are all about.

   Drawn at the element's measured width rather than a stretched viewBox: the
   old chart used preserveAspectRatio="none", which distorts a circle into an
   ellipse and squashes the date labels. */

#page-sentiment .st-head{align-items:flex-start}
#page-sentiment .st-sub{
  margin:5px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
#page-sentiment .st-tools{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
#page-sentiment .st-legend{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  color:var(--muted);
}
#page-sentiment .st-legend span.st-key{
  display:inline-block;
  width:8px;height:8px;
  margin-right:5px;
  border-radius:50%;
  vertical-align:-1px;
}
#page-sentiment .st-key.pos{background:var(--viz-pos)}
#page-sentiment .st-key.neu{background:var(--viz-neu)}
#page-sentiment .st-key.neg{background:var(--viz-neg)}

/* The granularity control. Native select, chevron drawn over it — the same
   pattern the page's other filters use, so it inherits their behaviour. */
#page-sentiment .st-gran{position:relative;display:inline-flex;align-items:center}
#page-sentiment .st-gran select{
  height:32px;
  appearance:none;
  padding:0 30px 0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel);
  color:inherit;
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
}
#page-sentiment .st-gran select:focus{outline:0;border-color:var(--line)}
#page-sentiment .st-gran svg{
  position:absolute;
  right:10px;
  width:13px;height:13px;
  pointer-events:none;
  color:var(--muted);
}

#page-sentiment .trend-chart-wrap{position:relative;height:auto;min-height:230px;margin-top:14px}
#page-sentiment #trendChart{width:100%;height:auto;display:block;overflow:visible}

/* ── the three series ─────────────────────────────────────────────────
   Line plus a soft fill under it. The fills overlap, so each is faint
   enough that three stacked tints stay readable rather than turning to
   mud where the curves cross. */
#page-sentiment .st-line{
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#page-sentiment .st-line.pos{stroke:var(--viz-pos)}
#page-sentiment .st-line.neu{stroke:var(--viz-neu)}
#page-sentiment .st-line.neg{stroke:var(--viz-neg)}
#page-sentiment .st-area.pos{fill:var(--viz-pos);opacity:.10}
#page-sentiment .st-area.neu{fill:var(--viz-neu);opacity:.08}
#page-sentiment .st-area.neg{fill:var(--viz-neg);opacity:.09}
#page-sentiment .st-dot{stroke:var(--panel);stroke-width:1.5}
#page-sentiment .st-dot.pos{fill:var(--viz-pos)}
#page-sentiment .st-dot.neu{fill:var(--viz-neu)}
#page-sentiment .st-dot.neg{fill:var(--viz-neg)}

/* The end pills. Each series names its own last value, which is what makes
   three overlapping curves readable without hovering. */
#page-sentiment .st-pill.pos{fill:var(--viz-pos);opacity:.13}
#page-sentiment .st-pill.neu{fill:var(--viz-neu);opacity:.13}
#page-sentiment .st-pill.neg{fill:var(--viz-neg);opacity:.13}
#page-sentiment .st-pill-text{font-size:12px;font-weight:700}
#page-sentiment .st-pill-text.pos{fill:var(--viz-pos)}
#page-sentiment .st-pill-text.neu{fill:var(--viz-neu)}
#page-sentiment .st-pill-text.neg{fill:var(--viz-neg)}

#page-sentiment .st-grid{stroke:var(--grid);stroke-width:1}
#page-sentiment .st-axis{fill:var(--muted);font-size:11px}
#page-sentiment .st-cross{stroke:var(--border);stroke-width:1;stroke-dasharray:3 3}

#page-sentiment .st-note{
  margin:10px 0 0;
  font-size:11.5px;
  line-height:1.45;
  color:var(--muted);
}
#page-sentiment .st-note[hidden]{display:none}

/* The tooltip lists all three shares for the period under the pointer, so
   the reader never has to pick a curve to read a date. */
#page-sentiment .st-tip-row{display:flex;align-items:center;gap:7px;white-space:nowrap}
#page-sentiment .st-tip-row + .st-tip-row{margin-top:3px}
#page-sentiment .st-tip-row i{width:7px;height:7px;border-radius:50%;flex:none}
#page-sentiment .st-tip-row b{margin-left:auto;font-variant-numeric:tabular-nums}
#page-sentiment .st-tip-row i.pos{background:var(--viz-pos)}
#page-sentiment .st-tip-row i.neu{background:var(--viz-neu)}
#page-sentiment .st-tip-row i.neg{background:var(--viz-neg)}
#page-sentiment .st-tip-when{
  margin-bottom:6px;
  padding-bottom:5px;
  border-bottom:1px solid var(--border);
  font-weight:700;
}
#page-sentiment .st-tip-n{margin-top:6px;color:var(--muted)}

@media (max-width: 900px){
  #page-sentiment .st-tools{gap:10px}
  #page-sentiment .st-legend{gap:10px;font-size:11.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   OFFLINE QR — rebuilt in the Attio language
   ══════════════════════════════════════════════════════════════════════
   Components lifted from the AHBC/Attio recreation: its record table, its
   toolbar, its vertical bar chart, its detail panel and its card grid.

   Its palette is light-only (#fff on #f0f0f1 hairlines), so every value is
   restated here as an alpha over the current ink. That is what lets one set
   of rules serve the hub's light theme, its dark theme, and the system
   default — which sets no attribute at all and must not be forgotten.

   Its root font-size is a clamp() that scales with the viewport. That is NOT
   adopted: it would fight every other page in the hub. Its rem values are
   converted at a 16px base and then trimmed to the hub's smaller type. */

#page-offline{
  --qr-line:var(--color-palette--strok-1);
  --qr-muted:rgba(var(--ink-rgb),.52);
  --qr-faint:rgba(var(--ink-rgb),.35);
  --qr-blue:#5469e5;
  --qr-cell:rgba(var(--ink-rgb),.015);
  --qr-hover:rgba(var(--ink-rgb),.04);
  --qr-card:var(--surface-1, #fff);
}
html[data-theme="dark"] #page-offline,
html:not([data-theme]) #page-offline{
  --qr-blue:#8b9bf0;
  --qr-cell:rgba(255,255,255,.02);
  --qr-hover:rgba(255,255,255,.05);
}

/* ── Offline QR, in the Money Lost visual system ───────────────────────────
   Money floats white cards with a hairline and a soft lift on a grey ground,
   fronted by one solid-colour headline tile and three quiet ones. This page was
   white cards on a white page, so the ground has to move too or the cards
   vanish into it.

   Declared HERE rather than in reputation.html's inline <style> because that
   block is parsed BEFORE this stylesheet is linked, so anything it says about
   #page-offline loses to the 164 rules below. Same reason the KPI classes live
   here: they have to beat #off-kpis's grid rules from the inline block.

   The --mn-* tokens are NOT reused: they are declared on #page-money only, and
   a second page reaching into another page's scope is how a theme quietly
   becomes un-editable. Same values, own names. */
#page-offline{
  /* Apple's system red and green, with their own light and dark values, exactly
     as Money uses them. --viz-pos / --viz-neg are re-pointed so the rating
     distribution and the routing split follow without touching Sentiment,
     Checklist or ORM, which share those two tokens globally. */
  --of-green:#34C759;
  --of-red:#FF3B30;
  /* Solid fills need a darker green than the system one: white on #34C759 is
     about 2.1:1. Fills get the exact green, TEXT and the hero card get this. */
  --of-green-ink:#1c8f42;
  /* Apple's system orange, for the one thing this page rates that is neither
     good nor bad: a 3-star. */
  --of-amber:#FF9500;
  --viz-pos:var(--of-green);
  --viz-neg:var(--of-red);
  --qr-card:#fff;
  --qr-line:#e5e7eb;
  --qr-ground:#f2f3f6;
  --qr-lift:0 0 5px #24294a0d, 0 1px 2px #24294a0f, 0 16px 36px #24294a05;
}
html[data-theme="dark"] #page-offline,
html:not([data-theme]) #page-offline{
  --of-green:#30D158;
  --of-red:#FF453A;
  /* Dark needs no darkened ink: the system green is already legible on a dark
     ground, which is the whole point of the second value. */
  --of-green-ink:#30D158;
  --of-amber:#FF9F0A;
  --qr-card:rgba(255,255,255,.04);
  --qr-line:var(--color-palette--strok-1);
  --qr-ground:#080909;
  --qr-lift:none;
}

#rep-shell #page-offline{background:var(--qr-ground)}
#page-offline .ors-topbar{border-bottom:0}
/* .ors-inner caps content at 1040px and centres it, so the wider the window the
   bigger the empty gutters. This page is charts and a wide records table, both
   of which have something to do with the room. */
#page-offline .ors-inner{
  max-width:1560px;
  padding-left:clamp(18px, 2vw, 36px);
  padding-right:clamp(18px, 2vw, 36px);
}
#page-offline .qr-card{
  border-radius:20px;
  background:var(--qr-card);
  border:1px solid var(--qr-line);
  box-shadow:var(--qr-lift);
}

/* ── KPI row: the headline and its four parts, one grid ─────────────────── */
#page-offline .of-kpis{
  display:grid;
  /* Four, exactly as Money: one headline tile and the three numbers it is drawn
     from. */
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-bottom:18px;
  align-items:stretch;
}
/* So the tiles the renderer writes are cells of the grid above, not of a
   wrapper that would take one column to itself. Also overrides the
   repeat(5,1fr) / repeat(2,1fr) grid the inline <style> puts on #off-kpis. */
#page-offline #off-kpis{display:contents}
#page-offline .of-kpi-hero,
#page-offline .of-kpi{
  box-sizing:border-box;
  padding:16px 18px 15px;
  border-radius:16px;
  font-family:Inter, sans-serif;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#page-offline .of-kpi-hero{
  background:var(--of-green-ink);
  color:#fff;
  border:0;
  box-shadow:0 1px 2px #24294a14, 0 12px 28px #1c8f4226;
}
/* min-height matches the tiles' 34px icon, so every card's value starts at the
   same y. */
#page-offline .of-kpi-hero-top{display:flex;align-items:center;gap:10px;min-height:34px}
#page-offline .of-kpi-hero-label{flex:1;font-size:13px;font-weight:500;opacity:.92}
#page-offline .of-kpi-hero-value{
  font-family:'Geist', Inter, sans-serif;
  font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;
}
#page-offline .of-kpi-hero-note{
  margin-top:auto;font-size:12px;color:rgba(255,255,255,.85);
}
#page-offline .of-kpi-hero-note b{color:#fff;font-weight:600}

#page-offline .of-kpi{
  background:var(--qr-card);
  border:1px solid var(--qr-line);
  box-shadow:var(--qr-lift);
}
#page-offline .of-kpi-top{display:flex;align-items:center;gap:10px}
#page-offline .of-kpi-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--c) 13%, transparent);
  color:var(--c);
}
#page-offline .of-kpi-icon svg{width:17px;height:17px}
#page-offline .of-kpi-label{
  flex:1;min-width:0;
  font-size:12.5px;color:rgba(var(--ink-rgb),.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#page-offline .of-kpi-value{
  font-family:'Geist', Inter, sans-serif;
  font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
  color:var(--ink-solid);font-variant-numeric:tabular-nums;
}
#page-offline .of-kpi-note{
  margin-top:auto;
  font-size:11.5px;line-height:1.5;color:rgba(var(--ink-rgb),.38);
}

/* ── Info marks ───────────────────────────────────────────────────────────
   The same move Money made: the methodology hangs off the number it describes
   instead of sitting in a table at the foot nobody scrolls to. */
#page-offline .of-info{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:help;background:rgba(var(--ink-rgb),.05);
  color:rgba(var(--ink-rgb),.42);
}
#page-offline .of-info:hover,
#page-offline .of-info:focus-visible{
  background:rgba(var(--ink-rgb),.1);
  color:rgba(var(--ink-rgb),.7);
  outline:none;
}
#page-offline .of-info svg{width:12px;height:12px}
#page-offline .of-kpi-top .of-info{margin-left:auto}
/* On the solid green card the muted grey mark disappears. */
#page-offline .of-kpi-hero .of-info{
  background:rgba(255,255,255,.2);color:#fff;
}
#page-offline .of-kpi-hero .of-info:hover,
#page-offline .of-kpi-hero .of-info:focus-visible{background:rgba(255,255,255,.34);color:#fff}
/* Card titles carry one too. h3 is display:flex with gap already. */
#page-offline .qr-card h3 .of-info{margin-left:2px}

/* The same two breakpoints Money uses, so the two pages reflow together. */
@media (max-width: 1180px){
  #page-offline .of-kpis{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 680px){
  #page-offline .of-kpis{grid-template-columns:1fr}
}


/* ── page heading ─────────────────────────────────────────────────── */
#page-offline .qr-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
#page-offline .qr-head h1{
  margin:0;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.15;
}
#page-offline .qr-head p{
  margin:5px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--qr-muted);
  max-width:62ch;
}

/* ── the card ─────────────────────────────────────────────────────
   One border, one radius, no shadow. Everything on this page is this
   shape, which is the template's whole trick: hierarchy comes from
   spacing and type, never from a second card style. */
#page-offline .qr-card{
  border:1px solid var(--qr-line);
  border-radius:14px;
  background:var(--qr-card);
  overflow:hidden;
}
#page-offline .qr-card-pad{padding:14px 16px 18px}
#page-offline .qr-card h3{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
}
#page-offline .qr-card-sub{
  margin:5px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--qr-muted);
}

/* ── stat row ─────────────────────────────────────────────────────── */
#page-offline .qr-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(178px, 1fr));
  gap:12px;
  margin-bottom:16px;
}
#page-offline .qr-stat{
  border:1px solid var(--qr-line);
  border-radius:14px;
  background:var(--qr-card);
  padding:13px 15px 15px;
  min-width:0;
}
#page-offline .qr-stat .l{
  font-size:12.5px;
  color:var(--qr-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-offline .qr-stat .v{
  margin-top:7px;
  font-size:27px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
#page-offline .qr-stat .s{
  margin-top:7px;
  font-size:11.5px;
  line-height:1.35;
  color:var(--qr-faint);
}

#page-offline .qr-row{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:16px;
  /* start, not stretch: the routing card holds two rows and a footnote, so
     matching the chart's height left a large empty white block under it. */
  align-items:start;
  margin-bottom:16px;
}
#page-offline .qr-row > figure{display:flex;flex-direction:column}
#page-offline .qr-note{margin-top:auto;padding-top:16px}
#page-offline .qr-row > *{min-width:0}
@media (max-width: 1180px){#page-offline .qr-row{grid-template-columns:1fr}}

/* ── routing split ────────────────────────────────────────────────
   Two bars, not a donut: the question is "how much went each way",
   and two lengths answer it without a legend. */
#page-offline .qr-split{margin-top:16px;display:flex;flex-direction:column;gap:16px}
#page-offline .qr-split-row .n{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}
#page-offline .qr-split-row .n b{font-weight:600;font-variant-numeric:tabular-nums}
#page-offline .qr-split-row .n span{color:var(--qr-muted)}
#page-offline .qr-split-track{
  height:9px;
  margin-top:7px;
  border-radius:999px;
  background:rgba(var(--ink-rgb),.06);
  overflow:hidden;
}
#page-offline .qr-split-fill{display:block;height:100%;border-radius:999px}
#page-offline .qr-split-fill.google{background:var(--of-green)}
#page-offline .qr-split-fill.private{background:var(--qr-blue)}
#page-offline .qr-note{
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--qr-line);
  font-size:11.5px;
  line-height:1.5;
  color:var(--qr-faint);
}

/* ── vertical bar chart ───────────────────────────────────────────
   The template's chart, converted from rem to px. Dashed gridlines
   behind the bars, the value on hover rather than on every bar. */
#page-offline .qr-chart{
  position:relative;
  height:250px;
  margin-top:14px;
  padding:26px 12px 46px 42px;
}
#page-offline .qr-plot{
  position:relative;
  height:100%;
  border-bottom:1px solid var(--qr-line);
  display:flex;
  align-items:flex-end;
  gap:3.3%;
  padding:0 1.6%;
  isolation:isolate;
}
#page-offline .qr-gridline{
  position:absolute;
  left:0;right:0;
  bottom:calc(var(--tick) * 25%);
  border-top:1px dashed var(--qr-line);
  z-index:-1;
}
#page-offline .qr-gridline span{
  position:absolute;
  right:100%;
  margin-right:9px;
  top:-7px;
  font-size:11px;
  color:var(--qr-faint);
  font-variant-numeric:tabular-nums;
}
#page-offline .qr-bar{
  flex:1;
  min-height:2px;
  height:calc(var(--h) * 1%);
  border-radius:6px 6px 0 0;
  position:relative;
  transition:height .3s, filter .12s;
  cursor:default;
}
#page-offline .qr-bar:hover{filter:brightness(1.08)}
#page-offline .qr-bar.s5,
#page-offline .qr-bar.s4{background:var(--of-green)}
#page-offline .qr-bar.s3{background:var(--of-amber)}
#page-offline .qr-bar.s2,
#page-offline .qr-bar.s1{background:var(--of-red)}
#page-offline .qr-bar-label{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  padding-top:11px;
  white-space:nowrap;
  font-size:12px;
  color:var(--qr-muted);
  letter-spacing:1px;
}
#page-offline .qr-tip{
  display:none;
  position:absolute;
  bottom:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%);
  padding:7px 9px;
  border-radius:8px;
  border:1px solid var(--qr-line);
  background:var(--qr-card);
  box-shadow:0 8px 30px rgba(37,35,51,.10), 0 2px 6px rgba(37,35,51,.08);
  font-size:11.5px;
  white-space:nowrap;
}
#page-offline .qr-bar:hover .qr-tip{display:block}
#page-offline .qr-ylab{display:none}

/* ── horizontal bars (complaints) ─────────────────────────────────── */
#page-offline .qr-hbars{margin-top:14px;display:flex;flex-direction:column;gap:11px}
#page-offline .qr-hbar{display:flex;align-items:center;gap:12px;font-size:13px}
#page-offline .qr-hbar .k{
  flex:none;
  width:132px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-offline .qr-hbar .t{
  flex:1;
  height:9px;
  border-radius:999px;
  background:rgba(var(--ink-rgb),.06);
  overflow:hidden;
}
#page-offline .qr-hbar .t i{display:block;height:100%;border-radius:999px;background:var(--of-amber)}
#page-offline .qr-hbar .v{
  flex:none;
  width:34px;
  text-align:right;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ── toolbar ──────────────────────────────────────────────────────
   The template's filter row: hairline under it, small outlined
   controls, a divider that disappears when the row wraps. */
#page-offline .qr-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  padding:10px 14px;
  border-bottom:1px solid var(--qr-line);
}
#page-offline .qr-toolbar .qr-sep{
  width:1px;
  height:22px;
  flex:none;
  background:var(--qr-line);
}
#page-offline .qr-toolbar .set-select,
#page-offline .qr-toolbar .set-input{
  height:30px;
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  font-size:12.5px;
  color:inherit;
}
#page-offline .qr-toolbar .set-input{flex:1;min-width:170px;max-width:280px}
#page-offline .qr-toolbar .set-select{max-width:190px}
#page-offline .qr-toolbar .set-chip-row{display:flex;gap:5px;flex-wrap:wrap}
#page-offline .qr-toolbar .set-chip{
  height:30px;
  padding:0 10px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  color:var(--qr-muted);
  font-size:12px;
  cursor:pointer;
}
#page-offline .qr-toolbar .set-chip:hover{background:var(--qr-hover)}
/* Selected reads as the template's sort-chip: a tinted outline, not a fill. */
#page-offline .qr-toolbar .set-chip.on{
  border-color:rgba(84,105,229,.42);
  background:rgba(84,105,229,.08);
  color:var(--qr-blue);
}
#page-offline .qr-toolbar .off-fb-clear{
  margin-left:auto;
  flex:none;
  border:0;
  background:none;
  padding:0 2px;
  font-size:12.5px;
  color:var(--qr-blue);
  cursor:pointer;
}
#page-offline .qr-toolbar .off-fb-clear:hover{text-decoration:underline}

/* ── record table ─────────────────────────────────────────────────
   Fixed layout and nowrap cells, as the template has them: a column
   keeps its width whatever lands in it, so the eye can run down one. */
#page-offline .qr-tablewrap{overflow-x:auto}
#page-offline .qr-table{
  width:100%;
  min-width:940px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:13px;
  white-space:nowrap;
  text-align:left;
}
#page-offline .qr-table th{
  height:40px;
  padding:0 14px;
  font-weight:400;
  font-size:12.5px;
  color:var(--qr-muted);
  background:var(--qr-card);
  border-bottom:1px solid var(--qr-line);
  border-right:1px solid var(--qr-line);
}
#page-offline .qr-table td{
  height:38px;
  padding:0 14px;
  overflow:hidden;
  text-overflow:ellipsis;
  border-bottom:1px solid var(--qr-line);
  border-right:1px solid var(--qr-line);
  background:var(--qr-cell);
}
/* The first column is the record's name in the template, and it keeps the
   card's own background so the row reads as anchored to it. */
#page-offline .qr-table td:first-child{background:var(--qr-card)}
#page-offline .qr-table th:last-child,
#page-offline .qr-table td:last-child{border-right:0}
#page-offline .qr-table tbody tr:last-child td{border-bottom:0}
#page-offline .qr-table tbody tr{cursor:pointer}
#page-offline .qr-table tbody tr:hover td{background:var(--qr-hover)}
#page-offline .qr-table tbody tr.on td{background:rgba(84,105,229,.07)}
#page-offline .qr-table .c-stars{width:108px}
#page-offline .qr-table .c-outlet{width:180px}
#page-offline .qr-table .c-who{width:150px}
#page-offline .qr-table .c-route{width:132px}
#page-offline .qr-table .c-state{width:126px}
#page-offline .qr-table .c-when{width:132px}
#page-offline .qr-table .none{color:var(--qr-faint);font-style:italic}
#page-offline .qr-table .link{
  text-decoration:underline;
  text-decoration-color:rgba(var(--ink-rgb),.16);
  text-underline-offset:2px;
}
#page-offline .qr-empty{
  padding:44px 16px;
  text-align:center;
  font-size:13.5px;
  color:var(--qr-muted);
}
#page-offline .qr-foot{
  padding:11px 14px;
  border-top:1px solid var(--qr-line);
  font-size:12px;
  color:var(--qr-faint);
  font-variant-numeric:tabular-nums;
}

/* ── stars and pills ──────────────────────────────────────────────── */
#page-offline .qr-stars{letter-spacing:1.5px;font-size:12.5px;color:#3fa35a}
#page-offline .qr-stars.low{color:#d4574f}
#page-offline .qr-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:5px;
  font-size:11.5px;
  font-weight:500;
  white-space:nowrap;
}
#page-offline .qr-pill.google{background:rgba(63,163,90,.13);color:#2f8a48}
#page-offline .qr-pill.private{background:rgba(84,105,229,.11);color:var(--qr-blue)}
#page-offline .qr-pill.unresolved{background:rgba(212,87,79,.12);color:#c0483f}
#page-offline .qr-pill.in_progress{background:rgba(217,150,20,.15);color:#a5710a}
#page-offline .qr-pill.resolved{background:rgba(63,163,90,.13);color:#2f8a48}
#page-offline .qr-pill.grey{background:rgba(var(--ink-rgb),.06);color:var(--qr-muted)}

/* ── detail panel ─────────────────────────────────────────────────
   Slides over the right of the page rather than expanding the row.
   A drawer inside a table pushes every row below it down, so the row
   you were reading moves the moment you open it. */
#page-offline .qr-panel{
  position:fixed;
  top:0;bottom:0;right:0;
  width:min(520px, 42vw);
  z-index:60;
  display:flex;
  flex-direction:column;
  background:var(--qr-card);
  border-left:1px solid var(--qr-line);
  box-shadow:-10px 0 40px rgba(0,0,0,.07);
}
#page-offline .qr-panel[hidden]{display:none}
@media (max-width: 900px){#page-offline .qr-panel{width:100%}}
#page-offline .qr-panel-scrim{
  position:fixed;
  inset:0;
  z-index:59;
  /* No dim. Attio's panel sits BESIDE the records rather than over them, and
     dimming the table is what turns a panel into a modal. This layer exists
     only to catch a click outside. */
  background:transparent;
}
#page-offline .qr-panel-scrim[hidden]{display:none}
#page-offline .qr-panel-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:53px;
  flex:none;
  border-bottom:1px solid var(--qr-line);
}
#page-offline .qr-panel-head h2{
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
}
#page-offline .qr-panel-x{
  margin-left:auto;
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--qr-muted);
  cursor:pointer;
}
#page-offline .qr-panel-x:hover{background:var(--qr-hover);color:inherit}
#page-offline .qr-panel-x svg{width:16px;height:16px}
#page-offline .qr-panel-body{flex:1;min-height:0;overflow-y:auto;padding:18px 16px 24px}
#page-offline .qr-quote{
  margin:0 0 18px;
  font-size:14.5px;
  line-height:1.6;
}
#page-offline .qr-quote.none{color:var(--qr-faint);font-style:italic;font-size:13.5px}
/* The template's property grid: label left, value right, hairline under. */
#page-offline .qr-prop{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  padding:11px 0;
  border-top:1px solid var(--qr-line);
  font-size:13px;
  align-items:baseline;
}
#page-offline .qr-prop > span:first-child{color:var(--qr-muted)}
#page-offline .qr-prop .v{min-width:0;overflow-wrap:anywhere}
#page-offline .qr-sec{margin-top:22px}
#page-offline .qr-sec h4{
  margin:0 0 9px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--qr-muted);
}
#page-offline .qr-sec .set-chip-row{display:flex;gap:6px;flex-wrap:wrap}
#page-offline .qr-sec .set-chip{
  height:30px;
  padding:0 11px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  color:var(--qr-muted);
  font-size:12px;
  cursor:pointer;
}
#page-offline .qr-sec .set-chip.on{
  border-color:rgba(84,105,229,.42);
  background:rgba(84,105,229,.08);
  color:var(--qr-blue);
}
#page-offline .qr-sec .set-select{
  width:100%;
  height:36px;
  padding:0 11px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  color:inherit;
  font-size:13px;
}
#page-offline .qr-note-box{
  margin-top:9px;
  border:1px solid var(--qr-line);
  border-radius:10px;
  overflow:hidden;
}
#page-offline .qr-note-box:focus-within{border-color:rgba(84,105,229,.5)}
#page-offline .qr-note-box textarea{
  display:block;
  width:100%;
  min-height:74px;
  padding:10px 11px;
  border:0;
  outline:0;
  resize:vertical;
  background:none;
  color:inherit;
  font:inherit;
  font-size:13px;
  line-height:1.5;
}
#page-offline .qr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:34px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--qr-blue);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
#page-offline .qr-btn:hover{filter:brightness(1.06)}
#page-offline .qr-btn:disabled{opacity:.45;cursor:default}
#page-offline .qr-btn.sec{
  background:var(--qr-card);
  border-color:var(--qr-line);
  color:inherit;
}
#page-offline .qr-btn.sec:hover{background:var(--qr-hover);filter:none}
#page-offline .qr-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
#page-offline .qr-status{font-size:12px;color:var(--qr-muted)}

/* drawAction() is reused verbatim from the old drawer — it owns the
   resolution ladder, the team assignment and the internal note, and
   rewriting it to change how it LOOKS would have risked how it WORKS.
   So its markup is restyled where it now lives, inside the panel. */
#page-offline .qr-panel-body h5{
  margin:22px 0 9px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--qr-muted);
}
#page-offline .qr-panel-body h5 span{font-size:11px}
#page-offline .off-fb-steps{display:flex;gap:6px;flex-wrap:wrap}
#page-offline .qr-panel-body .set-chip{
  height:30px;
  padding:0 11px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  color:var(--qr-muted);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
#page-offline .qr-panel-body .set-chip:hover{background:var(--qr-hover)}
#page-offline .qr-panel-body .set-chip.on{
  border-color:rgba(84,105,229,.42);
  background:rgba(84,105,229,.08);
  color:var(--qr-blue);
}
#page-offline .qr-panel-body .set-select{
  width:100%;
  height:36px;
  padding:0 11px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  color:inherit;
  font:inherit;
  font-size:13px;
}
#page-offline .off-fb-note-wrap{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-top:2px;
  padding:8px;
  border:1px solid var(--qr-line);
  border-radius:10px;
}
#page-offline .off-fb-note-wrap:focus-within{border-color:rgba(84,105,229,.5)}
#page-offline .off-fb-note{
  flex:1;
  min-width:0;
  min-height:56px;
  border:0;
  outline:0;
  resize:vertical;
  background:none;
  color:inherit;
  font:inherit;
  font-size:13px;
  line-height:1.5;
}
#page-offline .off-fb-go{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:var(--qr-blue);
  color:#fff;
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
}
#page-offline .off-fb-go:hover{filter:brightness(1.06)}
#page-offline .off-fb-go:disabled{opacity:.5;cursor:default}
#page-offline .off-fb-go svg{width:13px;height:13px}
#page-offline .off-fb-assigned,
#page-offline .qr-panel-body .set-hint{
  display:block;
  margin-top:9px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--qr-faint);
}
#page-offline .qr-panel-body .set-status{
  display:block;
  margin-top:12px;
  font-size:12px;
  color:var(--qr-muted);
}

/* ── QR codes tab ─────────────────────────────────────────────────
   The template's dashboard-card: a tall thumbnail with the artwork,
   the name under it, and the settings behind a click. */
#page-offline .qr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  gap:16px;
}
#page-offline .qr-tile{
  border:1px solid var(--qr-line);
  border-radius:14px;
  background:var(--qr-card);
  overflow:hidden;
  text-align:left;
  display:flex;
  flex-direction:column;
}
#page-offline .qr-thumb{
  height:186px;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(var(--ink-rgb),.02);
  border-bottom:1px solid var(--qr-line);
}
#page-offline .qr-thumb svg,
#page-offline .qr-thumb canvas,
#page-offline .qr-thumb img{
  width:130px;
  height:130px;
  display:block;
  image-rendering:pixelated;
  border-radius:6px;
  background:#fff;
}
#page-offline .qr-thumb .qr-blank{
  text-align:center;
  font-size:12.5px;
  line-height:1.5;
  color:var(--qr-faint);
  max-width:20ch;
}
#page-offline .qr-tile-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
#page-offline .qr-tile-name{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-offline .qr-tile-tags{display:flex;flex-wrap:wrap;gap:6px}
#page-offline .qr-tile-url{
  font-size:11.5px;
  color:var(--qr-faint);
  word-break:break-all;
  line-height:1.4;
}
#page-offline .qr-tile-acts{display:flex;gap:8px;margin-top:auto;padding-top:4px}
#page-offline .qr-tile-acts .qr-btn{height:30px;padding:0 11px;font-size:12px}

/* Fields inside the QR editor panel. */
#page-offline .qr-field{margin-top:14px}
#page-offline .qr-field label{
  display:block;
  margin-bottom:6px;
  font-size:12.5px;
  color:var(--qr-muted);
}
#page-offline .qr-field input,
#page-offline .qr-field select{
  width:100%;
  height:36px;
  padding:0 11px;
  border:1px solid var(--qr-line);
  border-radius:8px;
  background:var(--qr-card);
  color:inherit;
  font:inherit;
  font-size:13px;
}
#page-offline .qr-field input:focus,
#page-offline .qr-field select:focus{outline:0;border-color:rgba(84,105,229,.5)}
#page-offline .qr-field input.invalid{border-color:rgba(212,87,79,.6)}
#page-offline .qr-field .hint{
  display:block;
  margin-top:6px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--qr-faint);
}
#page-offline .qr-field .err{
  display:block;
  margin-top:6px;
  font-size:11.5px;
  color:#c0483f;
}
#page-offline .qr-field .err[hidden]{display:none}

/* ── Period controls ──────────────────────────────────────────────────
   The reference puts a dropdown at the top of a page and a compact segment
   inside the card whose figure it governs. Both drive the same setting. */
#page-checklist .ck-perioddd{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:none;
}
#page-checklist .ck-perioddd select{
  height:40px;
  appearance:none;
  padding:0 38px 0 16px;
  border-radius:12px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
  color:inherit;
  font:inherit;
  font-size:13px;
  font-weight:500;
  outline:none;
  cursor:pointer;
}
#page-checklist .ck-perioddd select:hover{border-color:rgba(var(--ink-rgb),.25)}
#page-checklist .ck-perioddd select:focus{border-color:var(--ck-brand)}
#page-checklist .ck-perioddd .ck-chev{
  position:absolute;
  right:12px;
  width:16px;
  height:16px;
  pointer-events:none;
  color:var(--ck-muted);
}
#page-checklist .ck-ptabs{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border-radius:8px;
  background:rgba(var(--ink-rgb),.05);
}
#page-checklist .ck-ptabs button{
  padding:4px 10px;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--ck-muted);
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-ptabs button:hover{color:inherit}
#page-checklist .ck-ptabs button.on{
  background:var(--surface-1, #fff);
  color:var(--ck-brand);
  box-shadow:0 1px 2px rgba(17,24,39,.08);
}

/* ── Tasks: the filter tabs ───────────────────────────────────────────
   Each carries its own count, and the count is computed against the other
   filters — so switching tabs never shows a number that was true only for
   an unfiltered board. */
#page-checklist .ck-ftabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
#page-checklist .ck-ftab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
  color:inherit;
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-ftab:hover{border-color:rgba(var(--ink-rgb),.2)}
#page-checklist .ck-ftab.on{
  border-color:transparent;
  background:var(--ck-brand-soft);
  color:var(--ck-brand);
}
#page-checklist .ck-ftab b{
  padding:2px 6px;
  border-radius:6px;
  background:rgba(var(--ink-rgb),.06);
  color:var(--ck-muted);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-ftab.on b{background:rgba(255,255,255,.7);color:var(--ck-brand)}
html[data-theme="dark"] #page-checklist .ck-ftab.on b,
html:not([data-theme]) #page-checklist .ck-ftab.on b{background:rgba(0,0,0,.25)}

/* ── Tasks: the filter bar ────────────────────────────────────────────
   Label above value inside the control, so the row reads as six labelled
   settings rather than six anonymous dropdowns. */
#page-checklist .ck-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
  margin-bottom:16px;
}
#page-checklist .ck-fsel{
  position:relative;
  display:flex;
  flex:1 1 150px;
  min-width:0;
  flex-direction:column;
  padding:5px 12px;
  border-radius:12px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
}
#page-checklist .ck-fsel:focus-within{border-color:var(--ck-brand)}
#page-checklist .ck-fsel > span{font-size:11px;color:var(--ck-muted)}
#page-checklist .ck-fsel select{
  width:100%;
  appearance:none;
  border:0;
  outline:none;
  padding:0 18px 0 0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:13px;
  font-weight:500;
  text-overflow:ellipsis;
  cursor:pointer;
}
#page-checklist .ck-fsel .ck-chev{
  position:absolute;
  right:10px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--ck-muted);
}
#page-checklist .ck-fclear{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:center;
  flex:none;
  padding:0 8px;
  border:0;
  background:none;
  color:var(--ck-brand);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-fclear:hover{text-decoration:underline}
#page-checklist .ck-fclear svg{width:16px;height:16px}

/* ── Tasks: the summary strip ─────────────────────────────────────────
   One card divided into five, not five cards: these are five readings of
   the same set of tasks and the shared border says so. */
/* Five across when there is room, fewer when there is not — and the trigger
   is the CARD's width, not the window's. Opening the task panel takes 420px
   out of this row without firing any media query, which is how five tiles
   ended up 138px wide with their labels clipped to "T…".

   The dividers are drawn on every tile and then pulled a pixel outside the
   card, so they land correctly whatever number of columns auto-fit picks. */
#page-checklist .ck-sum{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(184px, 1fr));
  padding:0;
  overflow:hidden;
  margin-bottom:16px;
}
#page-checklist .ck-sum-tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-left:1px solid var(--color-palette--strok-1);
  border-top:1px solid var(--color-palette--strok-1);
  margin-left:-1px;
  margin-top:-1px;
  min-width:0;
}
#page-checklist .ck-sum-ico{
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
}
#page-checklist .ck-sum-ico svg{width:20px;height:20px;display:block}
#page-checklist .ck-sum-ico.plain{background:none;border-radius:0}
#page-checklist .ck-sum-ico.plain svg{width:40px;height:40px}
#page-checklist .ck-sum-ico.blue{background:rgba(37,99,235,.10);color:#2563eb}
#page-checklist .ck-sum-ico.green{color:#10b981}
#page-checklist .ck-sum-ico.orange{color:#f97316}
#page-checklist .ck-sum-ico.rose{color:#f43f5e}
#page-checklist .ck-sum-ico.violet{color:#8b5cf6}
#page-checklist .ck-sum-tile b{
  display:block;
  font-size:22px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-sum-tile > div{min-width:0}
#page-checklist .ck-sum-lbl{
  margin-top:5px;
  font-size:13px;
  color:var(--ck-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-sum-d{margin-top:2px;font-size:12px;color:var(--ck-muted)}
#page-checklist .ck-sum-d.up{color:#059669;font-weight:500}
#page-checklist .ck-sum-d.down{color:#e11d48;font-weight:500}

#page-checklist .ck-sortbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
#page-checklist .ck-sortbar h2{
  margin:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
}
#page-checklist .ck-sortwrap{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-sortwrap .ck-fsel{flex:none;min-width:190px;padding-top:6px;padding-bottom:6px}
#page-checklist .ck-sortwrap .ck-fsel > span{display:none}

/* ── Tasks: the table ─────────────────────────────────────────────────
   Eight columns, so it scrolls sideways inside its own card rather than
   forcing the page to. */
#page-checklist .ck-tbl-card{padding:0;overflow:hidden}
#page-checklist .ck-tbl-scroll{overflow-x:auto}
#page-checklist .ck-tbl{width:100%;min-width:980px;border-collapse:collapse;text-align:left}
#page-checklist .ck-tbl td{white-space:nowrap}
#page-checklist .ck-tbl .t-title{display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis}
#page-checklist .ck-tbl .t-dim{max-width:190px;overflow:hidden;text-overflow:ellipsis}
#page-checklist .ck-tbl th{
  padding:12px 16px;
  border-bottom:1px solid var(--color-palette--strok-1);
  font-size:12px;
  font-weight:500;
  color:var(--ck-muted);
  white-space:nowrap;
}
#page-checklist .ck-tbl td{
  padding:12px 16px;
  border-bottom:1px solid var(--color-palette--strok-1);
  font-size:13px;
  vertical-align:middle;
}
#page-checklist .ck-tbl tbody tr:last-child td{border-bottom:0}
#page-checklist .ck-tbl tbody tr{cursor:pointer;transition:background .12s}
#page-checklist .ck-tbl tbody tr:hover{background:rgba(var(--ink-rgb),.03)}
#page-checklist .ck-tbl tbody tr.on{background:var(--ck-brand-soft)}
#page-checklist .ck-tbl .t-title{font-size:14px;font-weight:500}
#page-checklist .ck-tbl tbody tr:hover .t-title{text-decoration:underline}
#page-checklist .ck-tbl .t-dim{color:var(--ck-muted)}
#page-checklist .ck-tbl .t-who{display:flex;align-items:center;gap:8px}
#page-checklist .ck-tbl .num{font-variant-numeric:tabular-nums}
#page-checklist .ck-tbl .t-more{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  border:0;
  background:none;
  color:var(--ck-muted);
  cursor:pointer;
}
#page-checklist .ck-tbl .t-more:hover{background:rgba(var(--ink-rgb),.07);color:inherit}
#page-checklist .ck-tbl .t-more svg{width:16px;height:16px}
#page-checklist .ck-tbl-none{
  padding:40px 16px;
  text-align:center;
  font-size:14px;
  color:var(--ck-muted);
}

/* ── Tasks: pagination ────────────────────────────────────────────── */
#page-checklist .ck-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
#page-checklist .ck-pager p{margin:0;font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-pager-btns{display:flex;align-items:center;gap:4px}
#page-checklist .ck-pg{
  display:grid;
  place-items:center;
  min-width:32px;
  height:32px;
  padding:0 6px;
  border-radius:8px;
  border:1px solid var(--color-palette--strok-1);
  background:var(--surface-1, #fff);
  color:inherit;
  font:inherit;
  font-size:13px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
#page-checklist .ck-pg:hover{border-color:rgba(var(--ink-rgb),.25)}
#page-checklist .ck-pg.on{border-color:transparent;background:var(--ck-brand);color:#fff}
#page-checklist .ck-pg[disabled]{opacity:.4;pointer-events:none}
#page-checklist .ck-pg-gap{padding:0 4px;font-size:13px;color:var(--ck-muted)}

/* The table and the detail panel share a row; opening one narrows the other
   rather than covering it, so the list you picked from stays readable. */
#page-checklist .ck-tasks-split{display:grid;gap:20px;align-items:start}
#page-checklist .ck-tasks-split.open{grid-template-columns:minmax(0,1fr) 420px}
#page-checklist .ck-tasks-main{min-width:0}
@media (max-width: 1240px){
  #page-checklist .ck-tasks-split.open{grid-template-columns:1fr}
}

/* ── Tasks: the detail panel ──────────────────────────────────────── */
#page-checklist .ck-tp{
  display:flex;
  flex-direction:column;
  position:sticky;
  top:8px;
  max-height:calc(100vh - 120px);
  padding:0;
  overflow:hidden;
}
#page-checklist .ck-tp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--color-palette--strok-1);
}
#page-checklist .ck-tp-head h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
#page-checklist .ck-tp-date{
  padding:4px 10px;
  border-radius:8px;
  border:1px solid var(--color-palette--strok-1);
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--ck-muted);
  white-space:nowrap;
}
#page-checklist .ck-tp-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 20px}
#page-checklist .ck-tp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#page-checklist .ck-tp-top h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
}
#page-checklist .ck-tp-titles{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#page-checklist .ck-tp-sub{margin:3px 0 0;font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-tp-x{
  flex:none;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  border:0;
  background:none;
  color:var(--ck-muted);
  cursor:pointer;
}
#page-checklist .ck-tp-x:hover{background:rgba(var(--ink-rgb),.07);color:inherit}
#page-checklist .ck-tp-x svg{width:18px;height:18px}
#page-checklist .ck-tp-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin-top:16px;
  padding:16px 0;
  border-top:1px solid var(--color-palette--strok-1);
  border-bottom:1px solid var(--color-palette--strok-1);
}
#page-checklist .ck-tp-mi{display:flex;align-items:flex-start;gap:10px;min-width:0}
#page-checklist .ck-tp-mi > svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ck-muted)}
#page-checklist .ck-tp-mi .k{font-size:12px;color:var(--ck-muted)}
#page-checklist .ck-tp-mi .v{
  font-size:13px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-tp-tabs{
  display:flex;
  gap:4px;
  margin-top:16px;
  padding:4px;
  border-radius:12px;
  background:rgba(var(--ink-rgb),.05);
}
#page-checklist .ck-tp-tabs button{
  flex:1;
  padding:6px 8px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--ck-muted);
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-tp-tabs button.on{
  background:var(--surface-1, #fff);
  color:var(--ck-brand);
  box-shadow:0 1px 2px rgba(17,24,39,.08);
}
#page-checklist .ck-tp-sec{margin-top:20px}
#page-checklist .ck-tp-sec h4{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:14px;
  font-weight:700;
}
#page-checklist .ck-tp-sec h4 svg{width:16px;height:16px;color:var(--ck-brand)}
#page-checklist .ck-tp-sec p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ck-muted)}
#page-checklist .ck-tp-rowhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
#page-checklist .ck-tp-crit{
  margin-top:8px;
  padding:14px;
  border-radius:12px;
  background:rgba(var(--ink-rgb),.04);
}
#page-checklist .ck-tp-crit h4{font-size:13px}
#page-checklist .ck-tp-crit ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
#page-checklist .ck-tp-crit li{display:flex;gap:8px;font-size:13px;line-height:1.35}
#page-checklist .ck-tp-crit li:before{
  content:'';
  flex:none;
  width:4px;
  height:4px;
  margin-top:7px;
  border-radius:50%;
  background:rgba(var(--ink-rgb),.35);
}
#page-checklist .ck-tp-empty{
  margin-top:8px;
  padding:16px 12px;
  border:1px dashed var(--color-palette--strok-1);
  border-radius:12px;
  text-align:center;
  font-size:12px;
  color:var(--ck-muted);
}
#page-checklist .ck-tp-shot{
  margin-top:8px;
  width:100%;
  border-radius:12px;
  border:1px solid var(--color-palette--strok-1);
  display:block;
}
#page-checklist .ck-tp-foot{
  padding:12px 20px;
  border-top:1px solid var(--color-palette--strok-1);
}
#page-checklist .ck-tp-open{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:10px 16px;
  border:0;
  border-radius:12px;
  background:var(--ink-solid, #111827);
  color:var(--surface-1, #fff);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-tp-open:hover{opacity:.9}
#page-checklist .ck-tp-open svg{width:16px;height:16px}

/* A verification verdict, as its own tinted block. Same three tones as the
   queues, so a verdict looks identical wherever it is shown. */
#page-checklist .ck-vr{
  margin-top:8px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid;
}
#page-checklist .ck-vr-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#page-checklist .ck-vr-head b{font-size:14px;font-weight:600}
#page-checklist .ck-vr-head span{font-size:11px;color:var(--ck-muted);font-variant-numeric:tabular-nums}
#page-checklist .ck-vr p{margin:6px 0 0;font-size:13px;line-height:1.55}
#page-checklist .ck-vr ul{margin:10px 0 0;padding:0 0 0 14px;font-size:13px;line-height:1.5}
#page-checklist .ck-vr dl{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(var(--ink-rgb),.08);
  font-size:11px;
  color:var(--ck-muted);
}
#page-checklist .ck-vr dl > div{display:flex;gap:6px}
#page-checklist .ck-vr dd{margin:0;font-weight:500;color:inherit;font-variant-numeric:tabular-nums}
#page-checklist .ck-vr.v-verified{background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.25)}
#page-checklist .ck-vr.v-verified .ck-vr-head b,
#page-checklist .ck-vr.v-verified p{color:#047857}
#page-checklist .ck-vr.v-failed{background:rgba(225,29,72,.07);border-color:rgba(225,29,72,.24)}
#page-checklist .ck-vr.v-failed .ck-vr-head b,
#page-checklist .ck-vr.v-failed p{color:#be123c}
#page-checklist .ck-vr.v-needs_review{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.28)}
#page-checklist .ck-vr.v-needs_review .ck-vr-head b,
#page-checklist .ck-vr.v-needs_review p{color:#b45309}
html[data-theme="dark"] #page-checklist .ck-vr.v-verified .ck-vr-head b,
html[data-theme="dark"] #page-checklist .ck-vr.v-verified p,
html:not([data-theme]) #page-checklist .ck-vr.v-verified .ck-vr-head b,
html:not([data-theme]) #page-checklist .ck-vr.v-verified p{color:#34d399}
html[data-theme="dark"] #page-checklist .ck-vr.v-failed .ck-vr-head b,
html[data-theme="dark"] #page-checklist .ck-vr.v-failed p,
html:not([data-theme]) #page-checklist .ck-vr.v-failed .ck-vr-head b,
html:not([data-theme]) #page-checklist .ck-vr.v-failed p{color:#fb7185}
html[data-theme="dark"] #page-checklist .ck-vr.v-needs_review .ck-vr-head b,
html[data-theme="dark"] #page-checklist .ck-vr.v-needs_review p,
html:not([data-theme]) #page-checklist .ck-vr.v-needs_review .ck-vr-head b,
html:not([data-theme]) #page-checklist .ck-vr.v-needs_review p{color:#fbbf24}

/* A timeline, rule down the left, dot per entry. */
#page-checklist .ck-tl{position:relative;margin:12px 0 0;padding:0 0 0 16px;list-style:none}
#page-checklist .ck-tl:before{
  content:'';
  position:absolute;
  left:3px;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--color-palette--strok-1);
}
#page-checklist .ck-tl li{position:relative;display:flex;gap:12px;font-size:13px;padding:5px 0}
#page-checklist .ck-tl li i{
  position:absolute;
  left:-16px;
  top:11px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(var(--ink-rgb),.25);
}
#page-checklist .ck-tl li i.good{background:#10b981}
#page-checklist .ck-tl li i.bad{background:#f43f5e}
#page-checklist .ck-tl li i.warn{background:#f59e0b}
#page-checklist .ck-tl li time{flex:none;width:64px;color:var(--ck-muted);font-variant-numeric:tabular-nums}
#page-checklist .ck-tl li em{font-style:normal;color:var(--ck-muted)}

/* ── Location badge ───────────────────────────────────────────────── */
#page-checklist .ck-loc{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
}
#page-checklist .ck-loc svg{width:12px;height:12px}

/* ── Verification queues ──────────────────────────────────────────────
   A queue row has to carry the evidence for the decision it asks for, so it
   reads top-down: what, why, where, then who and when. */
#page-checklist .ck-queue{margin-bottom:28px}
#page-checklist .ck-queue-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
#page-checklist .ck-queue-head h2{
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
}
#page-checklist .ck-qcount{font-size:13px;color:var(--ck-muted);font-variant-numeric:tabular-nums}
#page-checklist .ck-queue-card{padding:0;overflow:hidden}
#page-checklist .ck-queue-none{
  padding:22px 16px;
  text-align:center;
  font-size:13px;
  color:var(--ck-muted);
}
#page-checklist .ck-qrow{
  display:flex;
  gap:16px;
  width:100%;
  padding:14px 16px;
  border:0;
  border-bottom:1px solid var(--color-palette--strok-1);
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
#page-checklist .ck-qrow:last-child{border-bottom:0}
#page-checklist .ck-qrow:hover{background:rgba(var(--ink-rgb),.03)}
#page-checklist .ck-qthumb{
  flex:none;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:10px;
  border:1px solid var(--color-palette--strok-1);
  background:rgba(var(--ink-rgb),.04);
  color:rgba(var(--ink-rgb),.3);
  overflow:hidden;
}
#page-checklist .ck-qthumb img{width:100%;height:100%;object-fit:cover;display:block}
#page-checklist .ck-qthumb svg{width:20px;height:20px}
#page-checklist .ck-qrow-main{min-width:0;flex:1}
#page-checklist .ck-qrow-title{display:flex;align-items:center;gap:8px;min-width:0}
#page-checklist .ck-qrow-title b{
  font-size:14px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-qrow-title em{
  flex:none;
  font-style:normal;
  font-size:12px;
  color:var(--ck-muted);
}
#page-checklist .ck-qrow-reason{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:3px 0 0;
  font-size:13px;
  line-height:1.35;
  color:var(--ck-muted);
}
#page-checklist .ck-qrow-loc{margin-top:6px}
#page-checklist .ck-qrow > .ck-dot-pill{flex:none;align-self:flex-start}
#page-checklist .ck-qrow-meta{
  margin:5px 0 0;
  font-size:12px;
  color:var(--ck-muted);
  font-variant-numeric:tabular-nums;
}

/* ── Checklists (setup) ───────────────────────────────────────────── */
#page-checklist .ck-setup-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr;align-items:start}
@media (max-width: 1100px){#page-checklist .ck-setup-grid{grid-template-columns:1fr}}
#page-checklist .ck-cl-card{padding:0;overflow:hidden;margin-bottom:16px}
#page-checklist .ck-cl-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--color-palette--strok-1);
  background:rgba(var(--ink-rgb),.025);
}
#page-checklist .ck-cl-head b{font-size:14px;font-weight:600}
#page-checklist .ck-cl-head .ck-qcount{margin-left:auto}
#page-checklist .ck-cl-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 16px;
  border-bottom:1px solid var(--color-palette--strok-1);
}
#page-checklist .ck-cl-row:last-child{border-bottom:0}
#page-checklist .ck-cl-row .m{min-width:0;flex:1}
#page-checklist .ck-cl-row .t{
  font-size:13.5px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-cl-row .s{margin-top:3px;font-size:12px;color:var(--ck-muted)}
#page-checklist .ck-cl-time{
  flex:none;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--ck-muted);
}

/* ── Insights ─────────────────────────────────────────────────────── */
#page-checklist .ck-ins-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
@media (max-width: 1180px){#page-checklist .ck-ins-top{grid-template-columns:1fr 1fr}}
@media (max-width: 700px){#page-checklist .ck-ins-top{grid-template-columns:1fr}}
#page-checklist .ck-oi{display:flex;align-items:center;gap:16px;padding:16px 20px}
#page-checklist .ck-oi .ck-spark{width:34%;min-width:90px}
#page-checklist .ck-oi-head{display:flex;align-items:center;gap:8px}
#page-checklist .ck-oi-head{min-width:0}
/* The reference fits "Operational Intelligence" on one line because its page
   has no sidebar taking 310px off the grid. Truncating it to "Operational
   Intelli…" loses the word that carries the meaning, so it wraps instead —
   same size, same words, two lines when the column is narrow. */
#page-checklist .ck-oi-head{align-items:flex-start}
#page-checklist .ck-oi-head h2{
  margin:0;
  min-width:0;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
}
#page-checklist .ck-oi-head .ck-oi-ico,
#page-checklist .ck-oi-head .ck-info{margin-top:1px}
#page-checklist .ck-oi-ico{
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(5,150,105,.10);
  color:#059669;
}
#page-checklist .ck-oi-ico svg{width:20px;height:20px}
#page-checklist .ck-oi-lbl{margin:10px 0 0;font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-oi-num{display:flex;align-items:baseline;gap:6px;margin-top:2px}
#page-checklist .ck-oi-num b{
  font-size:42px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-oi-num span{font-size:18px;font-weight:500;color:var(--ck-muted)}
#page-checklist .ck-statcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:20px 16px;
  text-align:center;
}
#page-checklist .ck-statcard svg{width:40px;height:40px}
#page-checklist .ck-statcard b{
  margin-top:8px;
  font-size:28px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-statcard .l{margin-top:6px;font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-statcard .d{margin-top:6px;font-size:12px;font-weight:500}
#page-checklist .ck-statcard .d em{font-style:normal;font-weight:400;color:var(--ck-muted)}
#page-checklist .ck-statcard .d.up{color:#059669}
#page-checklist .ck-statcard .d.down{color:#e11d48}

#page-checklist .ck-ins-alerts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width: 1100px){#page-checklist .ck-ins-alerts{grid-template-columns:1fr}}
#page-checklist .ck-alert{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border-radius:16px;
  border:1px solid;
}
#page-checklist .ck-alert.bad{background:rgba(225,29,72,.07);border-color:rgba(225,29,72,.22)}
#page-checklist .ck-alert.warn{background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.24)}
#page-checklist .ck-alert-ico{flex:none;width:32px;height:32px;margin-top:2px}
#page-checklist .ck-alert-ico svg{width:100%;height:100%;display:block}
#page-checklist .ck-alert.bad .ck-alert-ico{color:#f43f5e}
#page-checklist .ck-alert.warn .ck-alert-ico{color:#f97316}
#page-checklist .ck-alert-body{min-width:0;flex:1}
#page-checklist .ck-alert-body h3{margin:0;font-size:15px;font-weight:700}
#page-checklist .ck-alert-where{margin:3px 0 0;font-size:13px;color:var(--ck-muted)}
#page-checklist .ck-alert-body p{margin:8px 0 0;font-size:13px;line-height:1.4}
#page-checklist .ck-alert-body p b{font-weight:600}
#page-checklist .ck-alert-go{
  flex:none;
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  background:none;
  padding:0;
  color:var(--ck-brand);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#page-checklist .ck-alert-go:hover{text-decoration:underline}
#page-checklist .ck-alert-go svg{width:16px;height:16px}

#page-checklist .ck-ins-row{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;margin-bottom:16px}
@media (max-width: 1180px){#page-checklist .ck-ins-row{grid-template-columns:1fr}}
#page-checklist .ck-ins-row > *{min-width:0}
#page-checklist .ck-ins-col{display:flex;flex-direction:column;gap:16px}
#page-checklist .ck-card-head{display:flex;align-items:center;gap:8px}
#page-checklist .ck-card-head h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
#page-checklist .ck-card-head > svg{width:20px;height:20px;flex:none;color:var(--ck-brand)}
#page-checklist .ck-tag{
  margin-left:auto;
  padding:2px 8px;
  border-radius:6px;
  background:var(--ck-brand-soft);
  color:var(--ck-brand);
  font-size:11px;
  font-weight:600;
}

/* A ranked list where the bar IS the number: rank, name, score, bar. */
#page-checklist .ck-rank{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
#page-checklist .ck-rank li{display:flex;align-items:center;gap:12px}
#page-checklist .ck-rank .n{
  flex:none;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:6px;
  background:rgba(var(--ink-rgb),.06);
  color:var(--ck-muted);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
#page-checklist .ck-rank .nm{
  flex:none;
  width:150px;
  font-size:13px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
#page-checklist .ck-rank .nm:hover{text-decoration:underline}
#page-checklist .ck-rank .sc{flex:none;width:28px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
#page-checklist .ck-bar-track{
  flex:1;
  height:10px;
  border-radius:999px;
  background:rgba(var(--ink-rgb),.07);
  overflow:hidden;
}
#page-checklist .ck-bar-fill{display:block;height:100%;border-radius:999px}
#page-checklist .ck-fill-good{background:#10b981}
#page-checklist .ck-fill-warning{background:#fbbf24}
#page-checklist .ck-fill-serious{background:#fb923c}
#page-checklist .ck-fill-critical{background:#f43f5e}
#page-checklist .ck-fill-brand{background:var(--ck-brand)}
#page-checklist .ck-sc-good{color:#059669}
#page-checklist .ck-sc-warning{color:#b45309}
#page-checklist .ck-sc-serious{color:#ea7317}
#page-checklist .ck-sc-critical{color:#e11d48}

#page-checklist .ck-changed{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
#page-checklist .ck-changed li{display:flex;gap:10px;font-size:13px;line-height:1.35}
#page-checklist .ck-changed li:before{
  content:'';
  flex:none;
  width:6px;
  height:6px;
  margin-top:6px;
  border-radius:50%;
  background:#10b981;
}
#page-checklist .ck-sec-note{
  margin:14px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--ck-muted);
}
#page-checklist .ck-bars{margin-top:16px;display:flex;flex-direction:column;gap:12px}
#page-checklist .ck-bars-row{display:flex;align-items:center;gap:12px}
#page-checklist .ck-bar-label{
  flex:none;
  width:96px;
  font-size:13px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-checklist .ck-bar-pct{flex:none;width:40px;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
#page-checklist .ck-bars-empty{font-size:13px;color:var(--ck-muted);margin-top:12px}

/* ── The benchmark table (Outlets) ────────────────────────────────── */
#page-checklist .ck-table-wrap{margin-top:0;overflow-x:auto}
#page-checklist .ck-table{width:100%;border-collapse:collapse;text-align:left}
#page-checklist .ck-table th{
  padding:12px 20px;
  border-bottom:1px solid var(--color-palette--strok-1);
  font-size:12px;
  font-weight:500;
  color:var(--ck-muted);
  white-space:nowrap;
}
#page-checklist .ck-table th.num,
#page-checklist .ck-table td.num{text-align:right;font-variant-numeric:tabular-nums}
#page-checklist .ck-table td{
  padding:12px 20px;
  border-bottom:1px solid var(--color-palette--strok-1);
  font-size:14px;
}
#page-checklist .ck-table tbody tr:last-child td{border-bottom:0}
#page-checklist .ck-table tbody tr{cursor:pointer;transition:background .12s}
#page-checklist .ck-table tbody tr:hover{background:rgba(var(--ink-rgb),.03)}
#page-checklist .ck-table tbody tr:hover td:first-child{text-decoration:underline}
#page-checklist .ck-table-dim{color:rgba(var(--ink-rgb),.35);font-size:12px}
#page-checklist .ck-table-empty{
  padding:32px 20px;
  text-align:center;
  color:var(--ck-muted);
  font-size:14px;
}
#page-checklist .ck-trend{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
#page-checklist .ck-trend.up{color:#059669}
#page-checklist .ck-trend.down{color:#e11d48}
#page-checklist .ck-trend.flat{color:var(--ck-muted)}
#page-checklist .ck-band-good{color:#059669}
#page-checklist .ck-band-warning{color:rgba(var(--ink-rgb),.72)}
#page-checklist .ck-band-serious{color:#ea7317}
#page-checklist .ck-band-critical{color:#e11d48}

@media (max-width: 700px){
  #page-checklist .ck-tp-meta{grid-template-columns:1fr}
}

/* ── outlet picker, inside the composer ───────────────────────────────
   Shares the composer's lower row with Send, which keeps its margin-left:auto
   and so still sits hard right however wide the outlet name runs. */
#page-chat .wc-composer .wc-rest-btn{
  /* Pushed right so it sits directly left of Send. The auto margin lives here
     rather than on #wc-send: whichever control is FIRST in the pair has to
     carry it, or the two separate to opposite ends of the row. */
  margin-left:auto;
  margin-right:8px;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:60%;
  height:30px;
  padding:0 10px;
  border:1px solid var(--hub-line);
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  color:var(--hub-ink-dim);
  font:500 12px/1 'Inter',sans-serif;
  cursor:pointer;
  transition:border-color .15s,color .15s;
}
#page-chat .wc-composer .wc-rest-btn:hover{
  border-color:var(--hub-ink-dim);
  color:var(--hub-ink);
}
#page-chat .wc-composer .wc-rest-btn #wc-rest-display{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── past chats sheet ─────────────────────────────────────────────────
   #wc-recents moved in here wholesale, so its empty-state positioning from
   the composer has to be undone. */
#page-chat #wc-hist-sheet .wc-recents{
  width:auto;
  margin:0;
  max-width:none;
}
#page-chat #wc-hist-sheet .wc-recents-list{max-height:none}
#page-chat .wc-hist-empty{
  padding:18px 2px;
  font:400 13px/1.5 'Inter',sans-serif;
  color:var(--hub-ink-dim);
}

/* ── dictation button ─────────────────────────────────────────────────
   Sits at the far left of the composer's lower row: the outlet picker's
   margin-left:auto pushes itself and Send to the right, leaving this one
   where it starts. Hidden outright where the browser cannot dictate. */
#page-chat .wc-composer .wc-mic{
  width:30px;height:30px;flex:0 0 30px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1px solid var(--hub-line);
  /* Circular, because it stands in the send button's place and the two swap
     under the cursor — a square becoming a circle would read as a glitch. */
  border-radius:50%;
  background:transparent;
  color:var(--hub-ink-dim);
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
#page-chat .wc-composer .wc-mic[hidden]{display:none}
#page-chat .wc-composer .wc-mic svg{width:15px;height:15px}
#page-chat .wc-composer .wc-mic .wc-mic-stop{display:none}
#page-chat .wc-composer .wc-mic:hover{border-color:var(--hub-ink-dim);color:var(--hub-ink)}

/* Recording: the icon becomes a stop square, so the control says how to end it
   rather than only that it is running. */
#page-chat .wc-composer .wc-mic.is-on{
  border-color:#e5484d;
  background:rgba(229,72,77,.10);
  color:#e5484d;
}
#page-chat .wc-composer .wc-mic.is-on .wc-mic-idle{display:none}
#page-chat .wc-composer .wc-mic.is-on .wc-mic-stop{display:block}
#page-chat .wc-composer .wc-mic.is-on{animation:wcMicPulse 1.4s ease-in-out infinite}
@keyframes wcMicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.35)}
  50%{box-shadow:0 0 0 4px rgba(229,72,77,0)}
}
@media (prefers-reduced-motion:reduce){
  #page-chat .wc-composer .wc-mic.is-on{animation:none}
}

/* ── composer collapses once the thread starts ────────────────────────
   On the empty state the composer is a tall box, because it is the only thing
   on the page. The moment the reader sends something it stops being the
   subject and becomes a tool — so it drops to a single line on the same .26s
   the slide-down takes, and the two read as one movement rather than a slide
   followed by a jump. */
#page-chat .wc-composer{
  transition:min-height .26s linear, padding .26s linear, border-radius .26s linear;
}
#page-chat:has(.wc-row.user) .wc-composer{
  min-height:0;
  padding:7px 8px 7px 18px;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  /* A pill once it is a single line — the 19px radius of the tall box reads as
     a rounded rectangle, which is right for a panel and wrong for a toolbar. */
  border-radius:999px;
}
/* The field no longer claims a row of its own, so the controls sit beside it
   instead of under it. */
#page-chat:has(.wc-row.user) .wc-composer #wc-input{
  flex:1 1 auto;
  min-width:0;
  padding:6px 4px;
  /* The tall state sets align-self:stretch on the field. Left in place it beats
     the container's align-items, so autosize()'s `height:auto` measurement
     stretched to the whole composer and pinned the field at its 120px cap. */
  align-self:center;
}
/* Its auto margin has nothing to eat once the textarea grows to fill the row,
   and an 8px gap already separates the controls. */
#page-chat:has(.wc-row.user) .wc-composer .wc-rest-btn{margin-left:0;margin-right:0}
@media (prefers-reduced-motion:reduce){
  #page-chat .wc-composer{transition:none}
}

/* ── short windows ────────────────────────────────────────────────────
   #rep-shell carries min-height:740px. On any window shorter than that the
   shell runs past the bottom of the screen, and anything pinned to its foot
   goes with it — which is how the composer ended up off screen on a 1366x694
   laptop the moment a thread started and it dropped to the bottom.

   Below 760px the shell simply fits the window instead. The panels already
   scroll internally (#wc-scroll and friends), so nothing is lost by it. */
@media (max-height:760px){
  #rep-shell{min-height:0}
}

/* ── mic and send share one slot ──────────────────────────────────────
   Nothing typed yet: there is nothing to send, so the mic holds the position
   and dictation is the obvious next move. The moment there is text the send
   button takes it back. :placeholder-shown is the test — a textarea shows its
   placeholder exactly when it is empty — so the swap needs no JS and cannot
   drift out of step with what is actually in the box. */
#page-chat .wc-composer:has(#wc-input:placeholder-shown) #wc-send{display:none}
#page-chat .wc-composer:has(#wc-input:not(:placeholder-shown)) .wc-mic{display:none}
/* Except while recording: the mic IS the stop control, and dictation fills the
   box, which would otherwise hide the only way to end it. !important because
   the :has() rule above is the more specific of the two. */
#page-chat .wc-composer .wc-mic.is-on{display:flex!important}
/* Unsupported browsers still win over everything above. */
#page-chat .wc-composer .wc-mic[hidden]{display:none!important}

/* ═══════════════════════════════════════════════════════════════════
   GROUPS — Chat's layout: centre column + a right-rail card
   ═══════════════════════════════════════════════════════════════════
   The room list used to be a 300px left sidebar. It is now ONE card in the
   same right rail Chat uses — .wc-rail and .wc-rail-card are shared, so it
   scales off the same height-driven em base and never drifts from Chat. */

/* One card the height of Chat's two stacked (news + gap + prompts).
   Chat's stack is NOT a fixed number of em — it shrinks from ~46.1em on a
   1366x694 window to ~43.8em at 2560x1440 (identical on every reload at a
   given size), because text does not scale perfectly linearly with the base.
   A fixed em can only match one size: 44.05em was dead-on at 1700 and 26px out
   at 1440; 44.8em was 18px short on small screens and 28px long on large.
   Least-squares over six measured sizes gives stack = 41.2 x base + 67px, worst
   residual ~12px and under 1px at 1366x694. Refit if Chat's rail content ever
   changes. The ROOM LIST scrolls inside the card; the rail never does. */
#page-groups .gc-list{
  width:auto;
  height:calc(41.2em + 67px);
  max-height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#page-groups .gc-list-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.6em;
  padding:0 0 .72em;
  border-bottom:1px solid var(--hub-line);
}
#page-groups .gc-list-title{
  margin-right:auto;
  font:600 1.02em/1.2 'Geist','Inter',sans-serif;
  letter-spacing:-.01em;
  color:var(--hub-ink);
}
#page-groups .gc-new{
  display:flex;
  align-items:center;
  gap:.35em;
  padding:.35em .7em;
  border:1px solid var(--hub-line);
  border-radius:999px;
  background:transparent;
  color:var(--hub-ink);
  font:500 .86em/1 'Inter',sans-serif;
}
#page-groups .gc-new:hover{border-color:var(--hub-ink-dim);filter:none}
#page-groups .gc-new svg{width:1em;height:1em}
#page-groups .gc-rooms{
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:none;
  /* A scrolling box clips BOTH axes, so the active room's bar — drawn in the
     card's padding gutter — was cut off. The list reaches into that gutter and
     pads back out: rows sit exactly where they did, and the bar has room. */
  margin:0 -1.15em;
  padding:0 1.15em;
}
#page-groups .gc-rooms::-webkit-scrollbar{width:0;height:0}
#page-groups .gc-room{
  gap:.75em;
  padding:.85em 0;
  border-bottom:1px solid var(--hub-line);
  background:none;
}
#page-groups .gc-room:last-child{border-bottom:0}
#page-groups .gc-room:hover{background:none}
#page-groups .gc-room:hover .gc-room-name{color:var(--hub-accent)}
/* The open room is marked by a bar in the card's padding gutter rather than a
   tint (a tint on a white card reads as a stray selection box). It sits OUTSIDE
   the row's box so the active row's avatar stays in line with the others — an
   inset bar plus padding pushed it ~15px right. */
#page-groups .gc-room{position:relative}
#page-groups .gc-room.active{background:none}
#page-groups .gc-room.active::before{
  content:'';
  position:absolute;
  left:-1.15em;
  top:.7em;
  bottom:.7em;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--hub-accent);
}
#page-groups .gc-room.active .gc-room-name{color:var(--hub-accent)}
#page-groups .gc-room-av{
  width:2.6em;height:2.6em;
  font-size:1em;
  border:0;
  background:rgba(0,0,0,.06);
  color:var(--hub-ink);
}
#page-groups .gc-room-name{font:600 .95em/1.35 'Inter',sans-serif;color:var(--hub-ink)}
#page-groups .gc-room-last{font:400 .86em/1.35 'Inter',sans-serif;color:var(--hub-ink-dim);margin-top:.1em}
#page-groups .gc-room-dot{
  min-width:1.45em;height:1.45em;padding:0 .4em;
  border-radius:999px;
  font-size:.78em;line-height:1.45em;
}
#page-groups .gc-rooms .gc-empty{padding:2em .4em;font-size:.9em;color:var(--hub-ink-dim)}

/* ── the room column ─────────────────────────────────────────────── */
/* The header keeps a band — unlike Chat's floating buttons, it carries the
   room's name, and a title floating over scrolled messages would collide with
   them. It just loses its rule so it sits on the ground like the rest. */
#page-groups .wc-topbar{border-bottom:0;background:transparent}

/* Bubbles stay pills on both sides (a room has several voices), but white:
   the old #f0f0ef sat two shades off the new grey ground and disappeared. */
#page-groups .wc-bubble.user,
#page-groups .wc-bubble.ai{background:#fff}

/* Send matches Chat: a dark grey circle with a white glyph. */
#page-groups .wc-composer #gc-send{
  width:30px;height:30px;flex:0 0 30px;
  border-radius:50%;
  background:#2b2d33;
  color:#fff;
}

/* No room open: the composer is centred with a line above it, as Chat's empty
   state is. A room open: it drops to the foot as a one-line pill — the same
   collapse Chat does on its first message, keyed here on .gc-open because
   openRoom() sets it on every width. */
#page-groups .gc-greet{display:none}
#page-groups:not(.gc-open) .gc-greet{
  display:block;
  max-width:836px;
  margin:0 auto 20px;
  padding-left:24px;
  box-sizing:border-box;
  font:500 20px/26px 'Inter',sans-serif;
  letter-spacing:-.2px;
  color:var(--hub-ink-dim);
}
#page-groups:not(.gc-open) #gc-scroll{flex:0 0 auto;overflow:visible}
#page-groups:not(.gc-open) .wc-composer-wrap{
  padding-top:max(24px,calc((100dvh - 48px - 115px) / 2 + 14px));
}
#page-groups:not(.gc-open) .wc-foot{display:none}

#page-groups .wc-composer{
  transition:min-height .26s linear, padding .26s linear, border-radius .26s linear;
}
#page-groups.gc-open .wc-composer{
  min-height:0;
  padding:7px 8px 7px 18px;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  border-radius:999px;
}
/* Same trap as Chat: the tall state's align-self:stretch would beat the pill's
   align-items and let autosize() measure the whole composer. */
#page-groups.gc-open .wc-composer #gc-input{
  flex:1 1 auto;
  min-width:0;
  padding:6px 4px;
  align-self:center;
}
@media (prefers-reduced-motion:reduce){
  #page-groups .wc-composer{transition:none}
}

/* ── below 1180px: one pane at a time ─────────────────────────────
   Chat simply hides its rail at this width. Groups cannot — the rail IS the
   room list — so it becomes the page instead, and opening a room swaps to the
   room with a back arrow. This is the old ≤900px phone behaviour, widened to
   where the rail stops fitting; left at 900 there was a band from 900 to
   1180px with no list on screen at all. */
@media (max-width:1180px){
  #page-groups .gc-rail{
    flex:1 1 auto;
    font-size:14px;
    padding:18px;
  }
  #page-groups .gc-list{height:auto;flex:1 1 auto;max-height:none}
  #page-groups.gc-open .gc-rail{display:none}
  #page-groups:not(.gc-open) .gc-room-pane{display:none}
  #page-groups.gc-open #gc-back{display:flex}
}