/* AI Helper panel v2 (2026-11-06, Hal: "this chat box needs to be much better"). Loaded after wf-help*.css + wf-ai-helper.css.
   Tokens only (Day / Night), --space rhythm (4/8/12/16/24), pill buttons, Apple standard: answer first, detail behind a tap.
   Sections: (1) the page answer card + deep-link chips + "How I know". */
:root { --wfh-s1: var(--space-1, 4px); --wfh-s2: var(--space-2, 8px); --wfh-s3: var(--space-3, 12px); --wfh-s4: var(--space-4, 16px); --wfh-s6: var(--space-6, 24px); }

/* (1) "On this page: what needs you": an inset grouped list, one row per group, each with its own Start pill. */
/* R2 (11-06): ONE inset grouped list, Settings-style. The card loses its own border and fill (no box in a box); its title is the
   section label above the list; rows are separated by inset hairlines; the whole row is the tap target, with a quiet chevron. */
.wf-aih-card.is-screen { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: var(--wfh-s2); }
.wf-aih-card.is-screen .wf-aih-card-head { padding: 0 var(--wfh-s1); gap: 2px; }
.wf-aih-card.is-screen .wf-aih-card-title { font-size: 14px; }
.wf-aih-card.is-screen .wf-aih-lines { gap: 0; border-radius: var(--radius-lg, 12px); background: var(--bg-raised); overflow: hidden; }
.wf-aih-card.is-screen .wf-aih-line.is-text + .wf-aih-line.is-text { box-shadow: none; }
.wf-aih-card.is-screen .wf-aih-line.is-text + .wf-aih-line.is-text::before { content: ''; position: absolute; top: 0; left: var(--wfh-s3); right: 0; height: 1px; background: color-mix(in srgb, var(--border) 80%, transparent); }
.wf-aih-card.is-screen .wf-aih-line { position: relative; }
.wf-aih-line.is-go { width: 100%; min-height: 44px; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wf-aih-line.is-go:hover { background: var(--bg-hover, color-mix(in srgb, var(--white) 4%, transparent)); }
.wf-aih-line.is-go:active { background: var(--bg-hover, color-mix(in srgb, var(--white) 8%, transparent)); }
.wf-aih-line.is-go:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: -2px; }
.wf-aih-line-chev { flex: 0 0 auto; font: 400 20px/1 var(--font-body); color: var(--muted); opacity: .75; }
.wf-aih-line.is-text { border: 0; border-radius: 0; background: transparent; padding: var(--wfh-s3); gap: var(--wfh-s3); align-items: center; }
.wf-aih-line.is-text + .wf-aih-line.is-text { box-shadow: inset 0 1px 0 var(--border); }
.wf-aih-line.is-text .wf-aih-line-title { font-size: 13.5px; }
.wf-aih-line.is-text .wf-aih-line-sub { margin-top: 2px; line-height: 1.4; }
.wf-aih-line-meta { margin-top: var(--wfh-s1); font-size: 11.5px; font-weight: 600; color: var(--off-white, var(--muted)); font-variant-numeric: tabular-nums; }
.wf-aih-line-go { flex: 0 0 auto; min-height: 36px; min-width: 64px; padding: 0 var(--wfh-s4); border-radius: var(--radius-pill, 999px); border: 0;
  background: var(--bg-hover, var(--bg-raised)); color: var(--white); font: 600 13px var(--font-body); cursor: pointer; }
.wf-aih-line-go:hover { background: var(--accent, var(--gold)); color: var(--on-accent, #0a0a0b); }
.wf-aih-line-go:focus-visible, .wf-aih-chip:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }
.wf-aih-chip.is-go { border-color: transparent; background: var(--accent, var(--gold)); color: var(--on-accent, #0a0a0b); font-weight: 700; }
.wf-aih-chip.is-go:hover { filter: brightness(1.06); }
.wf-aih-src { font-size: 12px; color: var(--muted); }
.wf-aih-src summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; font-weight: 600; color: var(--off-white, var(--muted)); list-style: none; }
.wf-aih-src summary::-webkit-details-marker { display: none; }
.wf-aih-src summary::after { content: '›'; margin-left: 6px; transition: transform .15s ease; }
.wf-aih-src[open] summary::after { transform: rotate(90deg); }
.wf-aih-src ul { margin: var(--wfh-s1) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--wfh-s1); line-height: 1.4; }
@media (max-width: 768px) { .wf-aih-line-go { min-height: 44px; } .wf-aih-src summary { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .wf-aih-src summary::after { transition: none; } }

/* (2) The window: soft material, clean header, a quiet grab handle, collapse / expand (dock), resize edges. */
.wf-help-panel {
  background: var(--bg-base);
  background: color-mix(in srgb, var(--bg-base) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(24px); backdrop-filter: saturate(1.5) blur(24px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.22);
  min-width: 0;
}
.wf-help-panel:not([hidden]) { animation: wfhIn .18s cubic-bezier(.2,.8,.2,1); }
@keyframes wfhIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
body.acs-lock .wf-help-panel, body.acs-lock .wf-help-btn, html.wf-help-docked .wf-help-panel { z-index: 2450; } /* beside / over the To check screen, never under it */
.wf-help-head { position: relative; padding: var(--wfh-s4) var(--wfh-s3) var(--wfh-s3) var(--wfh-s4); border-bottom: 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wf-help-panel.is-dragging .wf-help-head, html.wf-help-dragging, html.wf-help-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.wf-help-panel.is-docked .wf-help-head { cursor: default; }
.wf-help-grip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 56px; height: 16px; min-height: 16px; padding: 0; border: 0; background: transparent; cursor: grab; display: flex; align-items: center; justify-content: center; }
.wf-help-grip-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .35; transition: opacity .15s ease; }
.wf-help-head:hover .wf-help-grip-bar, .wf-help-grip:focus-visible .wf-help-grip-bar { opacity: .7; }
.wf-help-grip:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: -2px; border-radius: 8px; }
.wf-help-panel.is-docked .wf-help-grip { display: none; }
.wf-help-tools { margin-left: auto; display: inline-flex; align-items: center; gap: var(--wfh-s1); flex: 0 0 auto; }
.wf-help-tools .wf-help-x { margin-left: 0; }
.wf-help-tool, .wf-help-tools .wf-help-x { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wf-help-tool:hover, .wf-help-tools .wf-help-x:hover { background: var(--bg-hover, var(--bg-raised)); color: var(--white); }
.wf-help-tool:focus-visible, .wf-help-tools .wf-help-x:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 1px; }
.wf-help-tool[hidden] { display: none !important; }
.wf-help-tool[aria-pressed="true"] { color: var(--accent, var(--gold)); }
/* resize edges (invisible; the cursor says it) */
.wf-help-rz { position: absolute; z-index: 6; touch-action: none; }
.wf-help-rz.is-n, .wf-help-rz.is-s { left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.wf-help-rz.is-n { top: -4px; } .wf-help-rz.is-s { bottom: -4px; }
.wf-help-rz.is-e, .wf-help-rz.is-w { top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.wf-help-rz.is-e { right: -4px; } .wf-help-rz.is-w { left: -4px; }
.wf-help-rz.is-ne, .wf-help-rz.is-nw, .wf-help-rz.is-se, .wf-help-rz.is-sw { width: 16px; height: 16px; }
.wf-help-rz.is-ne { top: -4px; right: -4px; cursor: nesw-resize; } .wf-help-rz.is-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.wf-help-rz.is-nw { top: -4px; left: -4px; cursor: nwse-resize; } .wf-help-rz.is-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.wf-help-panel.is-min .wf-help-rz:not(.is-e):not(.is-w), .wf-help-panel.is-docked .wf-help-rz:not(.is-w) { display: none; }
.wf-help-panel.is-docked .wf-help-rz.is-w { top: 0; bottom: 0; left: -4px; cursor: col-resize; }
/* collapsed: just the header */
.wf-help-panel.is-min { height: auto !important; }
.wf-help-panel.is-min > .wf-help-pane, .wf-help-panel.is-min > [role="tabpanel"] { display: none !important; }
.wf-help-panel.is-min .wf-help-head { box-shadow: none; }
/* docked: a sidebar at half the page; the page reflows beside it */
.wf-help-panel.is-docked { border-radius: 0; border-width: 0 0 0 1px; box-shadow: -12px 0 40px rgba(0,0,0,.12); max-height: none !important; }
.wf-help-panel.is-animating { transition: left .24s cubic-bezier(.2,.8,.2,1), top .24s cubic-bezier(.2,.8,.2,1), width .24s cubic-bezier(.2,.8,.2,1), height .24s cubic-bezier(.2,.8,.2,1), border-radius .24s ease; }
html.wf-help-docked .main-content { margin-right: var(--wf-help-dock-w, 50vw); width: calc(100% - var(--sidebar-w, 0px) - var(--wf-help-dock-w, 50vw)); transition: margin-left .28s cubic-bezier(.4,0,.2,1), margin-right .24s cubic-bezier(.2,.8,.2,1), width .24s cubic-bezier(.2,.8,.2,1); }
html.wf-help-docked .acs-check { right: var(--wf-help-dock-w, 50vw); }
html.wf-help-docked #unified-fab { right: calc(var(--wf-help-dock-w, 50vw) + 20px); }
html.wf-help-docked #page-reports { padding-right: 0 !important; }

/* (3) Messages-style chat: bubbles, a pill composer pinned at the bottom (attach inside it, send fills only with text). */
.wf-help-log { padding: var(--wfh-s4); gap: var(--wfh-s3); }
.wf-help-msg.is-bot .wf-help-bubble { border: 0; background: var(--bg-raised); border-radius: 18px; border-bottom-left-radius: 6px; }
.wf-help-msg.is-user .wf-help-bubble { border-radius: 18px; border-bottom-right-radius: 6px; padding: 10px 14px; }
.wf-aih-reply { align-self: flex-start; max-width: 92%; padding: 10px 14px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--bg-raised); font-weight: 500; }
.wf-help-msg.is-bot .wf-help-typing { width: auto !important; padding: 12px 14px; }
.wf-help-compose { flex: 0 0 auto; margin: var(--wfh-s2) var(--wfh-s3) var(--wfh-s2); padding: 4px; gap: 4px; align-items: flex-end;
  border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 24px; background: var(--bg-raised); transition: border-color .15s ease; }
.wf-help-compose:focus-within { border-color: var(--accent, var(--gold)); }
.wf-help-compose .wf-help-input { min-height: 36px; padding: 8px 8px 8px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.wf-help-compose .wf-help-input:focus { border: 0; outline: none; }
.wf-help-compose .wf-help-send { flex: 0 0 36px; width: 36px; height: 36px; background: transparent; color: var(--muted); transition: background .15s ease, color .15s ease, transform .15s ease; }
.wf-help-compose.has-text .wf-help-send { background: var(--accent, var(--gold)); color: var(--on-accent, #0a0a0b); }
.wf-help-compose.has-text .wf-help-send:active { transform: scale(.94); }
.wf-help-compose .wf-aih-attach-btn { flex: 0 0 36px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); }
.wf-help-compose .wf-aih-attach-btn:hover { color: var(--white); background: var(--bg-hover, var(--bg-base)); }
.wf-help-foot { flex-wrap: wrap; row-gap: var(--wfh-s2); padding: 0 var(--wfh-s4) var(--wfh-s3); }
.wf-aih-foot-r { gap: var(--wfh-s2); flex-wrap: wrap; }
.wf-help-pill-btn { flex: 0 0 auto; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill, 999px); border: 0; background: var(--bg-raised); color: var(--white); font: 600 12.5px/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.wf-help-pill-btn:hover { background: var(--bg-hover, var(--bg-raised)); }
.wf-help-pill-btn:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }

/* (4) Phone: a full-height sheet with a pull-down handle; no free drag, no dock, no collapse. */
@media (max-width: 768px) {
  .wf-help-panel { top: calc(env(safe-area-inset-top, 0px) + 8px) !important; bottom: 0 !important; height: auto !important; max-height: none !important; border-radius: 16px 16px 0 0; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .wf-help-panel.is-pulling { transition: none; }
  .wf-help-panel:not([hidden]) { animation: wfhUp .24s cubic-bezier(.2,.8,.2,1); }
  .wf-help-head { cursor: default; padding-top: 20px; }
  .wf-help-head::before { content: ''; position: absolute; left: 50%; top: 7px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--muted); opacity: .45; pointer-events: none; }
  .wf-help-grip { display: none !important; }
  .wf-help-rz, .wf-help-tool { display: none !important; }
  .wf-help-tools .wf-help-x { width: 44px; height: 44px; flex-basis: 44px; }
  .wf-help-compose { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding-bottom: 4px; }
  .wf-help-compose .wf-help-send, .wf-help-compose .wf-aih-attach-btn { flex-basis: 44px; width: 44px; height: 44px; }
  .wf-help-pill-btn { min-height: 44px; padding: 0 16px; }
  html.wf-help-docked .main-content { margin-right: 0; width: auto; }
  /* R4 (2026-11-06) keyboard-safe: while the keyboard is open the sheet is pinned to the visible part of the page
     (window.visualViewport, set by wf-help-kbd.js), so the composer sits just above the keyboard like Messages. */
  .wf-help-panel { overscroll-behavior: contain; }
  .wf-help-panel.is-kbd { top: calc(var(--wf-vv-top, 0px) + env(safe-area-inset-top, 0px) + 8px) !important; bottom: auto !important;
    height: calc(var(--wf-vv-h, 100vh) - env(safe-area-inset-top, 0px) - 8px) !important; }
  .wf-help-panel.is-kbd .wf-help-compose { margin-bottom: 8px; } /* the keyboard covers the home indicator: no safe-area gap */
  .wf-help-panel.is-kbd .wf-help-foot { display: none; } /* Messages-style: only the thread and the composer above the keyboard */
  html.wf-help-sheet-lock, html.wf-help-sheet-lock body { overflow: hidden !important; overscroll-behavior: none; } /* the page behind never scrolls */
}
/* R5 (2026-11-07) keyboard-safe FLOATING panel on touch screens (landscape phone, tablet; wf-help-kbd.js mode 'float'):
   its bottom sits 8px above the keyboard and it never grows taller than the visible area, so the header stays on screen. */
.wf-help-panel.is-kbd-float { top: auto !important; bottom: calc(var(--wf-vv-bottom, 0px) + 8px) !important; max-height: calc(var(--wf-vv-h, 100vh) - 16px) !important; animation: none; }
.wf-help-panel.is-kbd-float .wf-help-foot { display: none; }
.wf-help-panel.is-kbd-float .wf-help-compose { margin-bottom: 8px; }
.wf-help-panel.is-kbd-float.is-kbd-short .wf-aih-ctx,
.wf-help-panel.is-kbd-float.is-kbd-short .wf-help-tabs, .wf-help-panel.is-kbd-float.is-kbd-short .wf-help-grip, .wf-help-panel.is-kbd-float.is-kbd-short .wf-help-tool { display: none !important; }
.wf-help-panel.is-kbd-float.is-kbd-short .wf-help-head { display: flex; align-items: center; padding: 0 4px 0 16px; min-height: 44px; }
.wf-help-panel.is-kbd-float.is-kbd-short .wf-help-tools .wf-help-x { width: 44px; height: 44px; flex-basis: 44px; }
/* R7 (VERIFY-7): 8 typed lines pushed Send under the keyboard at 844x390. In the slim state the text box stops at 2 lines
   and scrolls inside (max-height beats the inline height the composer sets as it grows), so Send always stays visible. */
.wf-help-panel.is-kbd-float.is-kbd-short .wf-help-compose .wf-help-input { box-sizing: content-box; line-height: 1.4; padding-top: 0; padding-bottom: 0; margin: 10px 0;
  min-height: 1.4em; max-height: 2.8em; overflow-y: auto; } /* R9: exactly 2 whole lines; the space above / below is margin, so it never scrolls away and the top line never touches the border */ /* landscape phone + keyboard: one slim row (title + close); the tabs come back with the keyboard down */ /* under 360px of visible height the 'Looking at …' line gives way to the thread */
@keyframes wfhUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (pointer: coarse) { .wf-help-compose .wf-help-send, .wf-help-compose .wf-aih-attach-btn { min-width: 44px; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .wf-help-panel:not([hidden]), .wf-help-panel { animation: none !important; }
  .wf-help-panel.is-animating, .wf-help-panel, html.wf-help-docked .main-content, .wf-help-compose .wf-help-send, .wf-help-grip-bar { transition: none !important; }
}

/* (5) Pasted attachments: a small grid preview the person (and the AI) can read; text as a short quote. */
.wf-aih-attach { display: flex; flex-direction: column; gap: var(--wfh-s2); padding: var(--wfh-s2) var(--wfh-s3) 0; max-height: 40%; overflow-y: auto; }
.wf-aih-attach-note { padding: var(--wfh-s1) var(--wfh-s4) 0; }
.wf-aih-paste { display: flex; flex-direction: column; gap: var(--wfh-s2); padding: var(--wfh-s2) var(--wfh-s3); border-radius: 14px; background: var(--bg-raised); min-width: 0; }
.wf-help-msg.is-user .wf-aih-paste { background: color-mix(in srgb, var(--on-accent, #0a0a0b) 10%, transparent); color: inherit; }
.wf-aih-paste-h { display: flex; align-items: center; gap: var(--wfh-s2); min-width: 0; }
.wf-aih-paste-l { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.wf-aih-paste-x { position: relative; flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%; border: 0; background: var(--bg-hover, var(--bg-base)); color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wf-aih-paste-x::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.wf-aih-paste-t { font-size: 12.5px; line-height: 1.45; color: var(--off-white, var(--muted)); white-space: pre-wrap; overflow-wrap: anywhere; }
.wf-aih-grid-wrap { overflow-x: auto; max-width: 100%; border-radius: 8px; }
.wf-aih-grid { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 100%; }
.wf-aih-grid th, .wf-aih-grid td { padding: 4px 8px; text-align: left; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
.wf-aih-grid th { font-weight: 700; color: var(--muted); }
.wf-help-msg.is-user .wf-aih-grid th { color: inherit; opacity: .75; }
.wf-aih-attach-box img { border: 0; }
@media (max-width: 768px) { .wf-aih-paste-x { flex-basis: 44px; width: 44px; height: 44px; background: transparent; } .wf-aih-paste-x::after { inset: 0; } }
/* (5b, Hal 2026-11-08) A pasted table wider than its bubble scrolls sideways inside it (never widens the panel), with a
   quiet "Swipe to see all 5 columns ›" line and a soft right-edge fade until the end is reached (wf-ai-helper.js syncGrid). */
/* index.html's phone rule `table th:nth-child(n+4), table td:nth-child(n+4) { display: none }` (list tables) hid the
   4th column (Serial) of a pasted table; every pasted column stays, the wrap scrolls instead. */
.wf-help-panel table.wf-aih-grid th, .wf-help-panel table.wf-aih-grid td { display: table-cell; }
.wf-aih-grid-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.wf-aih-grid-wrap::-webkit-scrollbar { display: none; }
.wf-aih-grid-wrap.is-over:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.wf-aih-grid-wrap:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }
.wf-aih-grid-hint { font-size: 11.5px; line-height: 16px; font-weight: 600; color: var(--muted); }
.wf-aih-grid-hint[hidden] { display: none; }
/* the bubble that carries a table takes the full row (like Messages with a wide attachment), so more columns fit before it scrolls */
.wf-help-msg.is-user.has-table .wf-help-bubble { max-width: 100%; min-width: 0; }
.wf-help-msg.is-user .wf-aih-paste { max-width: 100%; }
/* (3) the table inside the user bubble reads in the bubble's own ink (--on-accent), day and night: no pale grey on light blue */
.wf-help-msg.is-user .wf-aih-grid th, .wf-help-msg.is-user .wf-aih-grid td, .wf-help-msg.is-user .wf-aih-grid-hint, .wf-help-msg.is-user .wf-aih-fine { color: var(--on-accent, #0a0a0b); }
.wf-help-msg.is-user .wf-aih-grid th { opacity: 1; letter-spacing: .02em; color: var(--on-accent, #0a0a0b) !important; } /* beats the app-wide `thead th { color: var(--off-white) !important }` (index.html, readability pass) */
.wf-help-msg.is-user .wf-aih-grid th, .wf-help-msg.is-user .wf-aih-grid td { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--on-accent, #0a0a0b) 18%, transparent); }

/* (6) "Looking at …": what the helper sees, kept live. A quiet line under the header; the dot pulses on a live change. */
.wf-aih-ctx { flex: 0 0 auto; display: flex; align-items: center; gap: var(--wfh-s2); min-width: 0; padding: var(--wfh-s2) var(--wfh-s4); font-size: 12px; color: var(--muted); }
.wf-aih-ctx-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-aih-ctx-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--green, #1d7a52); box-shadow: 0 0 0 0 rgba(29,122,82,.45); }
.wf-aih-ctx.is-pulse .wf-aih-ctx-dot { animation: wfhPulse 1.2s ease-out 1; }
@keyframes wfhPulse { 0% { box-shadow: 0 0 0 0 rgba(29,122,82,.5); } 100% { box-shadow: 0 0 0 10px rgba(29,122,82,0); } }
@media (prefers-reduced-motion: reduce) { .wf-aih-ctx.is-pulse .wf-aih-ctx-dot { animation: none; } }
/* the To check answer card: before → after reads as QuickBooks → WatchFlow */
.wf-aih-card.is-acct .wf-aih-ba-v { overflow-wrap: anywhere; }

/* (7) Docked beside a narrow page: To check uses its own narrow layout (the same rules as its <=760px media query),
   because the page, not the window, is narrow now. Generated from public/css/acct-simple.css. */
html.wf-help-dock-narrow .acs { gap: 24px; }
html.wf-help-dock-narrow .acs-cards { gap: 8px; }
html.wf-help-dock-narrow .acs-card { padding: 12px; }
html.wf-help-dock-narrow .acs-card-v { font-size: 22px; line-height: 28px; }
html.wf-help-dock-narrow .acs-card-l { white-space: normal; line-height: 16px; }
html.wf-help-dock-narrow .acs-card-s { display: none; }
html.wf-help-dock-narrow .acs-need { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
html.wf-help-dock-narrow .acs-start { grid-column: 1 / -1; width: 100%; }
html.wf-help-dock-narrow .acs-rec { align-items: flex-start; }
html.wf-help-dock-narrow .acs-ck-body { padding-bottom: 32px; }
html.wf-help-dock-narrow .acs-ck-top { padding: 10px 14px; gap: 10px; }
html.wf-help-dock-narrow .acs-ck-tt { flex-direction: column; align-items: flex-end; gap: 4px; }
html.wf-help-dock-narrow .acs-ck-t { font-size: 15px; line-height: 20px; max-width: 100%; }
html.wf-help-dock-narrow .acs-ck-prog { margin-left: 0; gap: 8px; }
html.wf-help-dock-narrow .acs-ck-pos { font-size: 13.5px; }
html.wf-help-dock-narrow .acs-ck-bar { width: 80px; }
html.wf-help-dock-narrow .acs-ck-body { padding: 14px 14px 20px; gap: 12px; }
html.wf-help-dock-narrow .acs-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html.wf-help-dock-narrow .acs-side { padding: 14px 16px; }
html.wf-help-dock-narrow .acs-side-t { font-size: 18px; line-height: 24px; }
html.wf-help-dock-narrow .acs-in { font-size: 16px; }
html.wf-help-dock-narrow .acs-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
html.wf-help-dock-narrow .acs-act { height: 46px; padding: 0 10px; font-size: 14.5px; }
html.wf-help-dock-narrow .acs-act.is-yes { grid-column: 1 / -1; min-width: 0; }
html.wf-help-dock-narrow .acs-act[data-acs="skip"] { margin-left: 0; grid-column: 1 / -1; height: 40px; }
html.wf-help-dock-narrow .acs-check .acs-toast-host { top: 76px; bottom: auto; } /* under the header: never over the buttons or an open panel */
html.wf-help-dock-narrow .acs .acs-toast-host { bottom: 16px; }
html.wf-help-dock-narrow .acs-catrow { flex-direction: column; }

/* (8) Header: when the tabs need their own row, it is "Help ……… tools" then the tabs (never the tools before the title). */
.wf-help-head.is-stacked .wf-help-title { order: 1; }
.wf-help-head.is-stacked .wf-help-tools { order: 2; margin-left: auto; }
.wf-help-head.is-stacked .wf-help-tabs { order: 3; }
.wf-aih-more { align-self: flex-start; min-height: 32px; padding: 0 var(--wfh-s3); border: 0; border-radius: var(--radius-pill, 999px); background: transparent; color: var(--accent, var(--gold)); font: 600 12.5px var(--font-body); cursor: pointer; }
@media (max-width: 768px) { .wf-aih-more { min-height: 44px; } }
.wf-aih-line[hidden] { display: none !important; }
/* large text (200%): the composer grows with the text and its hint stays on one line */
.wf-help-compose .wf-help-input { min-height: max(36px, calc(1.4em + 16px)); }
/* touch screens: the text box is a full 44px tap target (it must come after the rule above, which otherwise wins) */
@media (max-width: 768px), (pointer: coarse) { .wf-help-compose .wf-help-input { min-height: max(44px, calc(1.4em + 16px)); } }
.wf-help-compose .wf-help-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* D3 (2026-11-07) a short window with the keyboard CLOSED (landscape phone, 375-499px tall): wf-help.js gives the floating
   panel the full height; here the composer stops growing at 3 whole lines and scrolls inside, so it, Send and the footer
   always fit and the message list takes the squeeze (it scrolls). The keyboard-up 2-line cap (is-kbd-short) is more
   specific and still wins. Under 400px the "Looking at ..." line gives way to the thread, as it does with the keyboard up. */
@media (max-height: 499px) {
  .wf-help-panel .wf-help-compose .wf-help-input { max-height: calc(4.2em + 16px); overflow-y: auto; }
}
@media (max-height: 400px) {
  .wf-help-panel:not(.is-docked) .wf-aih-ctx { display: none; }
}

/* ═══ (8) Help button footprint (Hal 2026-11-08 review) ═══
   --wf-help-clear = the round Help button's footprint from the bottom of the screen (its offset above the bottom nav and
   safe area + its height + 16px), set by wf-help.js; 0 when the button is hidden.
   Kept here (not in acct-simple.css) so it never collides with the To check work in acct-simple.*. */
/* the Accounting page ends above the Help button, so it never sits on the last line (phone + tablet only; desktop keeps
   its own padding, no extra empty space) */
@media (max-width: 768px) {
  /* `html body` = one step above acct-simple.css / index.html's same rules, which load after this file */
  html body .main-content > #page-accounting > .page-content { padding-bottom: max(100px, var(--wf-help-clear, 0px)); }
  html body .acs .acs-toast-host { bottom: max(16px, var(--wf-help-clear, 0px)); }
}
/* "All done here." (nothing left to answer): the Saved / Answer saved toast moves from under the header, where it covered
   the headline, to the bottom, above the Help button and the home indicator. While an item is on screen it stays under
   the header (never over the answer buttons). */
@media (max-width: 768px) {
  .acs-check .acs-ck-body:has(> .acs-clear.is-big) ~ .acs-toast-host { top: auto; bottom: max(calc(24px + env(safe-area-inset-bottom, 0px)), var(--wf-help-clear, 0px)); }
}
/* R9: phone / tablet, the round button never rests on text or a control (wf-help.js rest()). While the page scrolls it
   tucks to an 18px sliver at the screen edge; when scrolling stops it springs back to the first clear spot at or just
   above its home, or stays tucked when nothing nearby is clear (still one tap to open Help). */
@media (max-width: 768px) {
  .wf-help-btn { transition: transform .38s cubic-bezier(.22, 1.2, .36, 1), bottom .38s cubic-bezier(.22, 1.2, .36, 1), box-shadow .2s ease, opacity .2s ease; }
  .wf-help-btn.is-tucked { transform: translateX(calc(100% + 16px - 18px)); box-shadow: -2px 4px 14px rgba(0, 0, 0, .18); }
  /* the tucked sliver shows 18px but keeps a 44 x 44 tap area (26px of it reaches left, invisible) */
  .wf-help-btn.is-tucked::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 26px; }
  /* last resort (no clear height for a 44px tap area): the tap area is only what is visible, so it never covers a control */
  .wf-help-btn.is-tucked.is-narrow::before { display: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .wf-help-btn { transition: none; } }