/* Design refresh (Oct 2026), built from the signed-off design guide (Part C: every element). One layer on top of style.css,
   so it can be switched off by removing one <link>. Neutrals: dark = Slack dark, light = Microsoft Fluent 2 on a very slight grey
   page with white panels. One accent: Royal Navy. Type: Inter. Spacing 4, 8, 12, 16, 24, 32, 40. Corners: 6 small, 8 buttons and
   fields, 12 cards and pop-ups, 16 the message box. style.css's own variable names are mapped onto the guide's tokens, so its
   remaining rules pick up the new palette too. */
:root {
  /* Dark: midnight navy (KBB brand) rather than black; text greys carry a slight blue so they sit on it. */
  --bg: #0e1729; --surface: #142038; --input-bg: #18263f; --input-chip: #22334f; --raised: #1b2a45; --sunk: #0a1222;
  --line: rgba(190,210,255,.09); --line-strong: rgba(190,210,255,.16);
  --text: #d3d9e4; --text-strong: #ffffff; --text-2: #a9b3c4; --text-3: #7c879a;
  --accent: #2f5799; --accent-hover: #3a66b3; --accent-text: #9db8e6; --accent-soft: rgba(53,97,171,.24); --accent-line: rgba(157,184,230,.5); --on-accent: #fff;
  --ok: #3ccf8e; --ok-soft: rgba(60,207,142,.18); --ok-line: rgba(60,207,142,.5);
  --warn: #ecb22e; --warn-soft: rgba(236,178,46,.13); --warn-line: rgba(236,178,46,.4);
  --err: #f0476f; --err-soft: rgba(224,30,90,.16); --err-line: rgba(240,71,111,.45);
  --info: #36c5f0; --info-soft: rgba(54,197,240,.13);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 14px 28px rgba(0,0,0,.45), 0 0 0 1px var(--line-strong);
  --shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  --box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.18);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f7f9; --surface: #ffffff; --input-bg: #ffffff; --input-chip: #f2f3f5; --raised: #f5f5f5; --sunk: #f0f0f0;
  --line: #edebe9; --line-strong: #d1d1d1;
  --text: #242424; --text-strong: #111111; --text-2: #616161; --text-3: #8a8a8a;
  --accent: #1d3461; --accent-hover: #142749; --accent-text: #1d3461; --accent-soft: rgba(29,52,97,.08); --accent-line: rgba(29,52,97,.4); --on-accent: #fff;
  --ok: #0b7a3e; --ok-soft: #dcf3e4; --ok-line: #8fd3a8;
  --warn: #bc4b09; --warn-soft: #fff9f5; --warn-line: #fdcfb4;
  --err: #c50f1f; --err-soft: #fdf3f4; --err-line: #eeacb2;
  --info: #0f6cbd; --info-soft: #ebf3fc;
  --shadow-1: 0 1px 2px rgba(0,0,0,.08); --shadow-pop: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shimmer: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
  --box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  color-scheme: light;
}
/* style.css's names, pointed at the guide's tokens. */
:root, :root[data-theme="light"] {
  --bg-0: color-mix(in srgb, var(--bg) 0%, transparent); --card: var(--surface); --card-hi: var(--input-bg); --edge: var(--line); --edge-hi: var(--line-strong);
  --ink: var(--text); --ink-hi: var(--text-strong); --muted: var(--text-2); --dim: var(--text-3);
  --acc: var(--accent); --acc-hi: var(--accent-text); --acc-deep: var(--accent-hover); --link: var(--accent-text);
  --tag-bg: var(--accent-soft); --tag-edge: var(--accent-line); --tag-ink: var(--accent-text); --panel-acc: var(--accent-soft);
  --g: var(--ok); --w: var(--warn); --b: var(--err); --chip: var(--input-chip);
  --ok-bg: var(--ok-soft); --ok-edge: var(--ok-line); --warn-edge: var(--warn-line); --bad-edge: var(--err-line); --bad-bg: var(--err-soft); --row-ok: var(--ok-soft);
  --info-bg: var(--info-soft); --info-edge: transparent; --info-ink: var(--info);
  --pop: var(--shadow-pop); --lift: var(--shadow-1); --shadow: none; --focus: inset 0 0 0 1px var(--accent);
  --t-task: var(--info); --t-subitem: #5b7fc4; --t-update: #0b9fc7; --t-external: var(--warn); --t-note: var(--text-2);
  --font: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --col: 960px; --gut: 24px;
}
@media (max-width: 860px) { :root, :root[data-theme="light"] { --gut: 16px; } }

html, body { background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em; }
h1, h2, h3 { font-weight: 600; color: var(--text-strong); }
b, strong { font-weight: 600; color: var(--text-strong); }
a { color: var(--accent-text); }
.why { color: var(--text-2); font-size: 13px; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus { outline: none; } :focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.kbd { font: 500 11px var(--font); color: inherit; opacity: .7; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; line-height: 16px; }

/* ===== Layout: one 960px column for the conversation, the status line and the message box ===== */
.shell[data-mode="chat"] .thread { max-width: calc(var(--col) + 48px); }
.thread { gap: 0; padding: 8px var(--gut) 24px; }
.shell[data-mode="chat"] .composer { max-width: var(--col); }
.dock-status { max-width: var(--col); margin-left: auto; margin-right: auto; }
.msg-main { min-width: 0; }
.msg-b .table-wrap, .msg-b .pc-wrap, .msg-b .ta-wrap { max-width: 100%; overflow-x: auto; }

/* ===== Header ===== */
.ostop { height: 56px; min-height: 56px; margin-bottom: 0; padding: 0 var(--gut); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: none; }
.mini-logo img.full { height: 32px; }
/* Narrow screens keep Inspire's logo, just smaller (style.css used to swap it for a mark) */
@media (max-width: 860px) { :root:not([data-theme="light"]) .mini-logo img.full.logo-d, :root[data-theme="light"] .mini-logo img.full.logo-l { display: block !important; height: 26px; } }
.ostop-r { gap: 8px; }
.conns { gap: 8px; }
.conn, .conn.alert, .alerts-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--surface); white-space: nowrap; text-decoration: none; cursor: pointer; }
.conn.alert { color: var(--err); background: var(--err-soft); border-color: transparent; }
.conn i { width: 7px; height: 7px; margin: 0; border-radius: 50%; background: currentColor; }
.conn.alert i { background: currentColor; }
.alerts-pill { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.conn svg.i, .alerts-pill svg.i { width: 14px; height: 14px; }
.bell, :root[data-theme="light"] .bell { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--text-2); }
.bell:hover, .bell-wrap:has(.notes:not([hidden])) .bell { background: var(--raised); color: var(--text-strong); }
.bell svg { width: 16px; height: 16px; stroke-width: 1.75; }
.bell .badge { top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--err); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; box-shadow: 0 0 0 2px var(--bg); }
/* Profile avatars: navy, white initial, centred both ways */
.avatar, :root[data-theme="light"] .avatar, .msg .av:not(.orb), .sk-av { width: 32px; height: 32px; border: 0; border-radius: 8px; background: linear-gradient(140deg, #3a62ad, #1d3461); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(13,26,51,.3); /* people are rounded squares; only InspireOS is round */ color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; font-size: 13px; font-weight: 600; padding: 0; }

/* ===== Pop-ups: account, alerts, menus. One white card, 12px corners, soft shadow; rows highlight pale blue. ===== */
.acct, .notes, .menu { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 4px; }
.acct { width: 320px; max-width: calc(100vw - 32px); }
.acct-me { display: flex; gap: 12px; align-items: center; padding: 8px 8px 12px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
.acct-me > div { min-width: 0; }
.acct-me b { display: block; color: var(--text-strong); font-weight: 600; }
.acct-me small { color: var(--text-2); font-size: 12px; overflow-wrap: anywhere; }
.acct-row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 8px; font-size: 13px; color: var(--text); }
.acct-row:hover { background: var(--accent-soft); }
.acct-row .ic, .menu.scope .ic { width: 28px; height: 28px; border-radius: 6px; background: var(--raised); display: grid; place-items: center; color: var(--text-2); font-size: 11px; font-weight: 600; }
.acct-row b { display: block; font-weight: 500; color: var(--text-strong); }
.acct-row small { display: block; font-size: 12px; color: var(--text-2); }

.notes { width: min(360px, calc(100vw - 32px)); }
.notes-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.notes-head button { border: 0; background: none; padding: 0; color: var(--accent-text); font-size: 11px; font-weight: 500; text-decoration: none; }
.note { display: block; padding: 8px; border-radius: 8px; font-size: 13px; color: var(--text); }
.note:hover { background: var(--accent-soft); }
.note b { display: block; font-weight: 500; color: var(--text-strong); }
.note small { font-size: 12px; color: var(--text-2); margin-top: 0; }
.note.unread { background: var(--accent-soft); }
.note.unread b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 2px; }
.notes-empty, .menu li.empty { padding: 24px 12px; text-align: center; color: var(--text-3); font-size: 13px; cursor: default; background: none !important; display: block; }

/* Command menu and questions: above the box, stacked rows */
.menu { right: auto; width: min(440px, 100%); bottom: calc(100% + 8px); max-height: min(50vh, calc(100vh - 200px)); }
.menu li { border-radius: 8px; padding: 8px; font-size: 13px; cursor: pointer; }
.menu li.on, .menu li:hover { background: var(--accent-soft); }
.menu li.head { display: block; padding: 8px 8px 4px; font-size: 11px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; cursor: default; background: none !important; }
.menu:not(.answers):not(.scope) li[data-i] { display: block; }
.menu:not(.answers):not(.scope) li[data-i] b { display: block; color: var(--accent-text); font-weight: 600; }
.menu:not(.answers):not(.scope) li[data-i] span { display: block; color: var(--text-2); font-size: 12px; }
.menu.answers li[data-i] { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.menu.answers li b { display: block; font-weight: 500; color: var(--text-strong); }
.menu.answers li span, .menu.answers li .tx span { display: block; color: var(--text-2); font-size: 12px; }
.menu.answers li .k, .menu.scope li .k { color: var(--accent-text); display: grid; place-items: center; }
.menu.answers li .k .kbd { display: inline; font-size: 11px; color: var(--accent-text); }

/* Client picker: opens upwards from the client button, 440px wide */
.menu.scope { right: auto; width: min(440px, 100%); max-height: min(60vh, calc(100vh - 200px)); }
.menu.scope li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 8px; }
.menu.scope li.search { position: sticky; top: -4px; z-index: 1; display: flex; gap: 8px; height: 36px; margin: 2px 2px 4px; padding: 0 8px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-3); cursor: text; }
.menu.scope li.search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; color: var(--text-strong); font-size: 13px; box-shadow: none; }
.menu.scope li[data-scope=""] { position: static; background: none; }
.menu.scope li.lbl { display: block; padding: 8px 12px 4px; font-size: 11px; font-weight: 500; color: var(--text-3); cursor: default; background: none !important; }
.menu.scope li.hl, .menu.scope li[data-scope]:hover { background: var(--accent-soft); }
.menu.scope li.cur .ic { background: var(--accent); color: #fff; }
.menu.scope li b { display: block; font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu.scope li b em { font-style: normal; color: var(--accent-text); background: var(--accent-soft); border-radius: 3px; }
.menu.scope li small { display: block; font-size: 12px; color: var(--text-2); }

/* ===== Messages ===== */
.thread .msg { gap: 12px; padding: 12px 0; }
.msg-h { gap: 8px; margin-bottom: 2px; align-items: baseline; font-size: 13px; }
.msg-h b { font-weight: 600; color: var(--text-strong); }
.msg-h time { font-size: 12px; color: var(--text-3); }
.msg-h .app { display: none; }
.msg-b { font-size: 14px; color: var(--text); }
.msg-b > :first-child, .msg-b .card > :first-child { margin-top: 0; }
.msg-b > :last-child, .msg-b .card > :last-child { margin-bottom: 0; }
.msg-b p { margin: 0 0 8px; }
.msg-b code { font-family: var(--mono); font-size: 12.5px; background: var(--raised); border-radius: 4px; padding: 1px 5px; }
.token, .msg-b .token { color: var(--accent-text); font-weight: 600; }
/* The client a message is about: a grey chip with a building (layers for All clients). Drawn from CSS so history replays get it too. */
.scope-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--raised); color: var(--text-2); font-size: 12px; font-weight: 500; margin-right: 6px; vertical-align: 1px; }
.scope-tag::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--m-building) center / contain no-repeat; mask: var(--m-building) center / contain no-repeat; }
.scope-tag.all::before { -webkit-mask-image: var(--m-layers); mask-image: var(--m-layers); }
.src { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-3); margin-top: 8px; }
.src::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--m-list) center / contain no-repeat; mask: var(--m-list) center / contain no-repeat; }
.day-sep { margin: 16px 0 4px; gap: 12px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.day-sep::before, .day-sep::after { background: var(--line); }
.day-sep span { border: 0; background: var(--raised); color: var(--text-3); border-radius: 999px; padding: 2px 10px; }
.typing i { background: var(--text-3); }
.skeleton { gap: 24px; }
.sk-line, .sk-av { position: relative; overflow: hidden; background: var(--raised); animation: none; }
.sk-line::after, .sk-av::after { content: ""; position: absolute; inset: 0; background: var(--shimmer); transform: translateX(-100%); animation: shim 1.4s cubic-bezier(.33,0,.67,1) infinite; }
@keyframes shim { to { transform: translateX(100%); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-1); }
.chip { background: var(--surface); border-color: var(--line-strong); font-weight: 500; font-size: 13px; }
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.saved-note { display: flex; align-items: center; gap: 6px; color: var(--text-2); }

/* The glass orb: InspireOS's voice. Swirls faster and breathes while it's working. */
.orb { --o: 32px; position: relative; display: inline-block; flex: none; width: var(--o); height: var(--o); border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 34% 28%, #e3ebf8 0%, #9db8e6 18%, #3561ab 44%, #1d3461 74%, #0d1a33 100%);
  box-shadow: inset 0 calc(var(--o) * -.12) calc(var(--o) * .22) rgba(0,10,60,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.orb::before { content: ""; position: absolute; inset: -35%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 10%, rgba(170,205,245,.9) 20%, transparent 34%, rgba(110,145,205,.85) 55%, transparent 68%, rgba(200,215,235,.55) 84%, transparent 94%);
  filter: blur(calc(var(--o) * .12)); mix-blend-mode: screen; animation: orb-spin 9s linear infinite; }
.orb > b { position: absolute; z-index: 1; width: 60%; height: 60%; left: 20%; top: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(190,210,255,.8), transparent 65%); filter: blur(calc(var(--o) * .08)); animation: orb-drift 7s ease-in-out infinite; }
.orb::after { content: ""; position: absolute; z-index: 2; left: 17%; top: 9%; width: 46%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); transform: rotate(-18deg); }
.orb.think { animation: orb-glow 1.6s ease-in-out infinite; }
.orb.think::before { animation-duration: 2.2s; } .orb.think > b { animation-duration: 2.4s; }
:root[data-ui] .msg .av.os-av.orb, .msg .av.orb { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #e3ebf8 0%, #9db8e6 18%, #3561ab 44%, #1d3461 74%, #0d1a33 100%); }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-18%, -22%) scale(1.15); } 66% { transform: translate(16%, -8%) scale(.9); } }
@keyframes orb-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .orb, .orb::before, .orb > b, .sk-line::after, .sk-av::after { animation: none !important; } }

/* Choosing from a list: numbered circles; the picked one pale blue with a blue number, the rest fade */
ol.opt-list { list-style: none; counter-reset: opt; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 640px; }
ol.opt-list li { counter-increment: opt; position: relative; padding: 8px 8px 8px 44px; min-height: 38px; border-radius: 8px; font-size: 13px; }
ol.opt-list li::before { content: counter(opt); position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--raised); color: var(--text-2); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
ol.opt-list li:hover { background: var(--raised); }
ol.opt-list li .why { font-size: 12px; color: var(--text-3); }
ol.opt-list li.picked { background: var(--accent-soft); color: var(--text-strong); }
ol.opt-list li.picked::before { background: var(--accent); color: #fff; }
ol.opt-list li.dim { opacity: .45; }
.picked-tag { float: right; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--accent-soft); color: var(--accent-text); }
.picked-tag svg.i { width: 12px; height: 12px; stroke-width: 2.25; }
.inline-acts { gap: 8px; margin-top: 12px; }
.unf-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.unf-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ===== Progress and status ===== */
.working { padding: 16px; }
.steps { gap: 10px; font-size: 13px; }
.steps li { gap: 10px; color: var(--text-3); }
.steps li.done { color: var(--text-2); } .steps li.now { color: var(--text-strong); font-weight: 500; }
.steps .spin { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.steps li.now .spin { border-color: var(--accent); border-right-color: transparent; animation: spin .9s linear infinite; }
.steps li.done .spin { border: 0; background: var(--ok); }
.steps li.done .spin::before { content: ""; position: absolute; inset: 4px; top: 4px; background: #fff; -webkit-mask: var(--m-check) center / contain no-repeat; mask: var(--m-check) center / contain no-repeat; }
/* Progress only ever moves forwards (the scripts never lower it) */
.progress, .md-bar { height: 6px; max-width: 420px; border-radius: 3px; background: var(--track); overflow: hidden; margin: 16px 0 6px; }
.progress i, .md-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.md-bar { margin-top: 8px; }
.progress + .why { font-size: 12px; color: var(--text-3); }
/* Status pills: grey upcoming, blue now, green done, amber needs a look, red blocked */
.stage, .test-pill, .ta-mode, .md-status, .md-ok-by, .md-tag, .pc-rate, .todo-high { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; background: var(--raised); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; vertical-align: 1px; }
.test-pill, .stage.signed_off, .md-status.chg, .pc-rate.rmid { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.stage.pushed, .stage.checked, .md-status.ok, .md-ok-by, .ta-mode.auto, .pc-rate.rhi { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.md-tag { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.todo-high { background: var(--err-soft); color: var(--err); border-color: transparent; }
.test-pill { margin-left: 8px; }
.pc-card .test-pill, .pc-pills ~ p .test-pill { font-size: 11px; }
/* Where a job is up to */
.trail { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.trail span { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); background: none; }
.trail span.on { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.trail span.pc-now, .pc-pills span.pc-now { color: var(--accent-text); border-color: transparent; background: var(--accent-soft); font-weight: 500; }
.trail span.test-pill { height: 20px; margin: 0 4px 0 0; color: var(--warn); background: var(--warn-soft); }
.trail i { display: inline-block; width: 10px; height: 1px; background: var(--line-strong); font-size: 0; color: transparent; }
.pc-pills span.on::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--m-check) center / contain no-repeat; mask: var(--m-check) center / contain no-repeat; }
/* Row flags: amber to check, red blocks pushing */
.flags { gap: 6px; margin: 6px 0 0 7px; }
.flag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; font-size: 11px; font-weight: 500; }
.flag.w { background: var(--warn-soft); color: var(--warn); } .flag.b { background: var(--err-soft); color: var(--err); }
.flag button { font-size: 11px; font-weight: 600; }
/* Inline messages keep their own colour, never a box */
.errline { color: var(--err); font-size: 13px; } .warnline { color: var(--warn); font-size: 13px; }
.ok { color: var(--ok); font-size: 12px; font-weight: 500; }
/* Result list */
.done-list, .msg-b ul.done-list { margin: 8px 0 0; padding-left: 0; font-size: 13px; }
.done-list li { grid-template-columns: 20px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.done-list .mark { color: var(--ok); font-weight: 600; } .done-list li.bad .mark { color: var(--err); }
.done-list a { color: var(--accent-text); font-size: 12px; font-weight: 500; }

/* ===== Tables: one style everywhere. Hairline rows, small grey headings, numbers right-aligned. ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.msg-b :is(table.grid, table.ta, table.pc-table, table.snap-grid) { border-collapse: collapse; font-size: 13px; }
.msg-b :is(table.grid, table.ta, table.pc-table, table.snap-grid) th { position: static; background: var(--surface); text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.msg-b :is(table.grid, table.ta, table.pc-table, table.snap-grid) td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); font-size: 13px; }
.msg-b :is(table.grid, table.ta, table.pc-table, table.snap-grid) tr:last-child td { border-bottom: 0; }
.msg-b :is(table.grid, table.ta, table.pc-table, table.snap-grid) tr:hover > td { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.msg-b :is(table.grid, table.ta, table.pc-table) tr:first-child:has(th):hover > td { background: none; }
.msg-b table.pc-table th, .msg-b table.pc-table td { padding-left: 0; padding-right: 18px; background: none; }
.msg-b table.pc-table td.n, .msg-b table.pc-table th.n, .msg-b table.ta td.n { text-align: right !important; font-variant-numeric: tabular-nums; }
.ta td.save { color: var(--ok); font-weight: 600; }
/* The meeting review grid: inputs sit flat in the row until touched */
.msg-b table.grid td { padding: 6px 8px; }
.msg-b table.grid th { padding: 10px 8px; }
.msg-b table.grid.snap-grid td { padding: 8px 12px; }
.grid tr.row td:first-child { border-left: 0; }
.grid tr.row.accepted > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.grid tr.row:has(> td > input[data-sel]:checked) > td { background: var(--accent-soft); }
.grid tr.row.pushed { opacity: .5; }
.grid tr.row.child td.pulse-cell::before { color: var(--text-3); }
.grid input, .grid select, .grid textarea { background: transparent; border-color: transparent; color: var(--text); box-shadow: none; }
.grid input:hover, .grid select:hover, .grid textarea:hover { border-color: var(--line-strong); }
.grid input:focus, .grid select:focus, .grid textarea:focus { background: var(--input-bg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.grid select option { background: var(--surface); }
.type-sel { font-weight: 500; }
.detail td, .msg-b table.grid tr.detail td, .msg-b table.pc-table tr.pc-more td { background: var(--sunk); }
.quote { color: var(--text-2); }
.tick { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); font-size: 14px; font-weight: 600; display: inline-grid; place-items: center; padding: 0; }
.tick:hover { color: var(--text); border-color: var(--text-3); }
.tick.on { background: var(--accent); border-color: transparent; color: #fff; }
.details-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 500; }
.details-btn:hover, .details-btn.open { background: var(--raised); color: var(--text-strong); border-color: var(--line-strong); }
.del { color: var(--text-3); border-radius: 8px; width: 28px; height: 28px; }
.del:hover { background: var(--raised); color: var(--err); }
.vid { color: var(--accent-text); }

/* ===== Meeting review: one card per action. The name and its controls on top, its fields beneath, its details
   (brief, quote, billable, parent) inside the same card. Fits the 960px column, so nothing scrolls sideways. ===== */
.acts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.act { --tc: var(--t-task); position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 12px 12px 14px; box-shadow: var(--box-shadow); transition: border-color .15s, background .15s; }
.act.accepted { border-color: var(--ok-line); box-shadow: inset 3px 0 0 var(--ok), var(--box-shadow); } /* an inset edge follows the rounded corners; a 3px strip would pinch to points */
.act.sel { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.act.pushed { opacity: .55; }
/* Subitems hang off the task above them */
.act.child { margin-left: 32px; }
.act.child::after { content: ""; position: absolute; left: -20px; top: -9px; height: 30px; width: 14px; border-left: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); border-bottom-left-radius: 8px; }

/* Top line: select, type, task name, then Details / Accept / Delete in the same place on every card */
.act-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.act-sel { margin: 8px 2px 0 0; width: 16px; height: 16px; cursor: pointer; }
.act .type-sel { width: auto; min-width: 0; height: 28px; margin-top: 2px; padding: 0 22px 0 8px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--tc); background-color: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: none; }
.act .type-sel:hover { border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.act-title { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.act-title .pfx { padding-top: 7px; white-space: nowrap; }
.act-ctrl { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.act .tick { width: auto; height: 28px; padding: 0 10px 0 8px; gap: 6px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.act .tick b { font-weight: 500; color: inherit; }
.act .tick span { font-size: 13px; font-weight: 700; }
.act .tick.on { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.act .tick.on b { font-weight: 600; }
.act .ok { display: inline-flex; align-items: center; height: 28px; padding: 0 4px; text-decoration: none; }
.act .del { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; }
.act .details-btn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Inputs sit flat until touched, as in the rest of the review */
.act input:not([type="checkbox"]), .act select, .act textarea { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text); box-shadow: none; font-size: 13px; }
.act input:not([type="checkbox"]):hover, .act select:not(.type-sel):hover, .act textarea:hover { border-color: var(--line-strong); }
.act input:not([type="checkbox"]):focus, .act select:focus, .act textarea:focus { background: var(--input-bg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.act select option { background: var(--surface); color: var(--text); }
.act textarea { resize: none; overflow: hidden; font-family: inherit; line-height: 1.4; }
.act-title textarea { padding: 4px 8px; font-size: 15px; font-weight: 600; color: var(--text-strong); min-height: 32px; }

.act .flags { margin: 4px 0 0 0; padding-left: 26px; }

/* Fields: small grey labels over flat values, in one row that wraps when it must */
.act-fields { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding-left: 26px; }
.act-fields .f { flex: 1 1 auto; }
.f { display: flex; flex-direction: column; min-width: 0; }
.f > span { font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 0 8px; line-height: 16px; white-space: nowrap; }
.act-fields .f input, .act-fields .f select { height: 30px; padding: 0 8px; }
.f-group { width: 140px; }
.k-people { width: 100px; }
.k-date { width: 124px; }
.k-numbers { width: 84px; }
.k-numbers input { font-variant-numeric: tabular-nums; }
.k-status { width: 100px; }
.f-importance { width: 80px; }
.f-status { width: 112px; }
.k-link .vid { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* Details, open by default: a sunk panel inside the card, so it plainly belongs to the action above it */
.act-detail { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px 16px; margin: 10px 0 0 26px; padding: 12px; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; }
.act-detail .act-brief { display: flex; flex-direction: column; min-width: 0; }
.act-detail .act-brief > span { font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 0 8px; line-height: 16px; }
.act-detail textarea { padding: 6px 8px; font-size: 13px; line-height: 1.5; min-height: 64px; }
.act-detail .quote { margin: 6px 8px 0; font-size: 12.5px; font-style: italic; color: var(--text-2); }
.act-detail .quote a, .act-detail .quote .ts { font-style: normal; font-size: 12px; font-weight: 500; color: var(--accent-text); text-decoration: none; margin-left: 4px; }
.act-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.act-side .f { width: auto; }
.act-side .f input, .act-side .f select { height: 30px; padding: 0 8px; }
.act-note { margin: 4px 2px 0; font-size: 12px; color: var(--text-3); }

/* Narrow: the name takes the full width under its type and controls; fields go two to a line */
@media (max-width: 760px) {
  .act { padding: 10px; }
  .act-top { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 4px; }
  .act-ctrl { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .act-title { grid-column: 1 / -1; grid-row: 2; }
  .act .flags, .act-fields { padding-left: 0; }
  .act-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .act-fields .f { width: auto; }
  .act-detail { grid-template-columns: minmax(0, 1fr); margin-left: 0; padding: 10px 8px; }
  .act.child { margin-left: 16px; } .act.child::after { left: -12px; width: 8px; }
  .act .details-btn { padding: 0 8px; }
}
@media (max-width: 420px) { .act .details-btn .chev { display: none; } .act .tick b { display: none; } .act .tick { padding: 0 8px; } }

/* The step line over a meeting (① Checked → ② Pushed to monday): the step being worked on now in the accent */
.trail span.now { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; }
.trail .test-pill { margin: 0 2px 0 0; }
/* /meeting-actions, after sign-off: a firm finished state in place of the table */
.done-state { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border: 1px solid var(--ok-line); border-radius: 12px; background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface)); }
.done-tick { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 24px; font-weight: 700; }
.done-state h3 { margin: 2px 0 6px; font-size: 18px; line-height: 1.3; }
.done-state p { margin: 4px 0; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent-text); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* /meeting-push: meetings waiting to push */
.push-list li { padding: 10px 0; line-height: 1.45; }
@media (max-width: 600px) { .done-state { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; } .done-tick { width: 40px; height: 40px; font-size: 20px; } }

/* ===== Buttons and fields ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 1; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover:not(:disabled) { background: var(--accent-hover); }
/* Stripe-style: the main actions (send, primary buttons) carry the blue-into-violet of the orb */
:root { --accent-grad: linear-gradient(180deg, #142749 0%, #1d3461 45%, #2f5596 100%); } /* darker at the top, lighter at the bottom; dark enough for white text (AA) */
.btn:not(.alt):not(:disabled) { background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(13,26,51,.3); }
.btn:not(.alt):hover:not(:disabled) { background: var(--accent-grad); filter: brightness(.94); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.alt, :root[data-theme="light"] .btn.alt { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-weight: 500; }
.btn.alt:hover:not(:disabled) { background: var(--raised); border-color: var(--line-strong); color: var(--text); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn svg.i { width: 15px; height: 15px; }
#tbPush.pushing::after { border-color: currentColor; border-right-color: transparent; }
.pc-tb { width: auto; min-width: 64px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); }
.pc-tb.alt { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.pc-tb:hover { filter: none; background: var(--accent-hover); } .pc-tb.alt:hover { background: var(--raised); }
.pc-mini { height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 500; }
.pc-mini:hover { background: var(--raised); }
.iconbtn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--text-2); display: inline-grid; place-items: center; padding: 0; flex: none; cursor: pointer; }
.iconbtn:hover { background: var(--raised); color: var(--text-strong); }
input, select, textarea { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--input-bg); color: var(--text-strong); font-size: 13px; transition: border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
input[aria-invalid="true"], textarea[aria-invalid="true"], input.err { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
input:disabled, select:disabled, textarea:disabled { background: var(--sunk); color: var(--text-3); border-color: var(--line); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
.recap-field label, .pc-f > span, .pc-main label { font-size: 12px; font-weight: 500; color: var(--text-2); }
.recap-field input, .recap-field select, .recap-field textarea { background: var(--input-bg); color: var(--text-strong); border-color: var(--line-strong); font-size: 13px; }
/* People to send to */
.rcpts { gap: 6px; }
.rcpt { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border: 0; border-radius: 999px; background: var(--raised); color: var(--text); font-size: 12px; font-weight: 500; }
.rcpt button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--text-3); font-size: 14px; }
.rcpt button:hover { background: var(--line-strong); color: var(--text); }
.rcpt .rcpt-name { width: auto; height: auto; border-radius: 0; color: inherit; font-size: inherit; }
.rcpt .rcpt-name:hover { background: none; }
select.rcpt { width: auto; height: 26px; padding: 0 10px; border: 1px dashed var(--line-strong); background: none; color: var(--text-2); cursor: pointer; }
/* Tabs */
.mview { display: flex; gap: 16px; border-bottom: 1px solid var(--line); font-size: 13px; margin: 0 0 8px; }
.mview button { padding: 8px 0; margin-bottom: -1px; color: var(--text-2); border-bottom: 2px solid transparent; text-decoration: none; }
.mview button.on { color: var(--text-strong); font-weight: 500; text-decoration: none; border-bottom-color: var(--accent); }
.rec-list li { border-bottom: 1px solid var(--line); font-size: 13px; }

/* ===== Drawer ===== */
.drawer { background: var(--surface); color: var(--text); box-shadow: -12px 0 32px rgba(0,0,0,.18); }
.drawer-head { align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--line); gap: 12px; }
.drawer-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.drawer-head .why { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }
.drawer-body { padding: 16px 20px; gap: 12px; }
.drawer-foot { padding: 12px 20px; gap: 8px; border-top: 1px solid var(--line); }
.scrim { background: rgba(10,12,16,.4); }
.op { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.op small { font-size: 11px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; }

/* ===== The footer: the message box in its own solid strip, with the aura rising from the base of the page behind it ===== */
.shell[data-mode="chat"] .composer-wrap { background: var(--bg); padding: 0 var(--gut) 24px; isolation: isolate; } /* 24px from the glow line to the box (status line 16 + 8), 24px below */
.composer-wrap > .composer, .dock-status { position: relative; z-index: 1; }
.composer-wrap { position: relative; }
/* The aura lives in a band ABOVE the footer, as in Granola: it rises from the footer's top edge and fades up into
   the conversation, so the footer and the message box itself stay plain (Si, 22 Oct: nothing moving behind where you type). */
/* Layers, back to front: the page colour, the glow, the conversation, then the solid footer (which cuts the conversation off cleanly). */
.aura { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 104px; z-index: 0; pointer-events: none; display: block; }
.shell[data-mode="chat"] .thread { position: relative; z-index: 1; padding-bottom: 104px; } /* at the bottom, the glow band shows in clear space above the footer */
.dock-status { margin-bottom: 8px; padding-top: 4px; min-height: 22px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.dock-status .orb { --o: 12px; }
.field { min-height: 64px; gap: 12px; padding: 0 12px; border-radius: 16px; background: var(--input-bg); border: 1px solid var(--line-strong); box-shadow: var(--box-shadow); transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#input { font-size: 15px; padding: 10px 4px; color: var(--text-strong); box-shadow: none !important; border: 0 !important; background: none !important; }
#input::placeholder { color: var(--text-3); }
.scope-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; max-width: 240px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--input-chip); color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.scope-btn:hover { border-color: var(--line-strong); }
.scope-btn #scopeLabel { overflow: hidden; text-overflow: ellipsis; }
.scope-btn svg.i { width: 15px; height: 15px; color: var(--text-3); }
.scope-btn .i-set, .scope-btn.set .i-all { display: none; }
.scope-btn.set .i-set { display: block; }
.scope-btn.set { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.scope-btn.set svg.i { color: var(--accent-text); }
.composer:has(#scopeMenu:not([hidden])) .scope-btn { border-color: var(--accent-line); }
.go { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(13,26,51,.3); color: #fff; transition: filter .15s; }
.go:hover { filter: brightness(.94); }
.cmd-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; /* same height and corners as the client button beside it */ background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; flex: none; }
.cmd-chip::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--m-slash) center / contain no-repeat; mask: var(--m-slash) center / contain no-repeat; }
/* The task bar, joined above the box while a meeting review is open */
.taskbar { padding: 10px 12px 10px 16px; border: 1px solid var(--accent-line); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--accent-soft); gap: 12px; }
.taskbar + .field { border-top-left-radius: 0; border-top-right-radius: 0; border-color: var(--accent-line); }
.taskbar[hidden] + .field { border-radius: 16px; border-color: var(--line-strong); }
.taskbar[hidden] + .field:focus-within { border-color: var(--accent); }
.tb-info b { color: var(--text-strong); font-size: 13px; font-weight: 600; }
.tb-info .why { font-size: 12px; color: var(--text-2); }
.tb-actions { gap: 6px; align-items: center; }
.tb-close { width: 28px; height: 28px; }


/* ===== Command screens ===== */
/* /todo: overdue red edge, today amber, later plain */
.todo-list { margin: 4px 0 12px; }
.todo-item { padding: 10px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; font-size: 13px; gap: 12px; }
.todo-item.overdue { border-left-color: var(--err); } .todo-item.today { border-left-color: var(--warn); }
.todo-client { font-size: 11px; font-weight: 600; color: var(--accent-text); letter-spacing: .02em; }
.todo-task { font-size: 13px; color: var(--text-strong); }
.todo-meta { gap: 8px; align-items: center; color: var(--text-3); font-size: 12px; }
.todo-meta a { color: var(--accent-text); }
.ta-h, .todo-more summary { margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; }
/* /meeting-prep */
.prep-state { font-size: 12px; font-weight: 500; }
/* /time-audit: the answer first, big, then ranked commands */
.ta-answer { border: 0; background: none; padding: 0; margin: 8px 0 12px; }
.ta-big { font-size: clamp(22px, 3.2vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--text-strong); }
.ta-note { border-left: 0; background: var(--info-soft); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 13px; }
.ta-cmds { gap: 0; }
.ta-cmd { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; font-size: 13px; }
.ta-cmd-h b { font-weight: 600; color: var(--text-strong); }
.ta-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--raised); color: var(--text-2); font-size: 11px; font-weight: 600; }
.ta-free { color: var(--ok); font-weight: 600; }
/* /page-copy (content lab) */
.pc-gap, .pc-article { border-color: var(--line); background: var(--surface); }
.pc-pri { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pc-h { font-weight: 600; color: var(--text-strong); }
.pc-top { box-shadow: none; }
/* /metadata: the header with Close; a page per box, now beside recommended */
.md-head { display: flex; align-items: flex-start; gap: 12px; }
.md-head > p { flex: 1; margin: 0 0 4px; }
.md-close { margin-top: -6px; }
.md-note { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.md-ask .btn svg.i { width: 14px; height: 14px; }
.md-page { margin: 0 0 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.md-page > .md-pg-head { padding: 12px 16px; align-items: center; gap: 4px 12px; font-size: 13px; }
.md-page[data-approved] > .md-pg-head:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.md-pg-head b { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.md-pg-head a { font-size: 12px; color: var(--text-3); text-decoration: none; }
.md-pg-head a:hover { color: var(--accent-text); }
.md-pg-head .why { font-size: 12px; color: var(--text-3); }
.md-pg-right { gap: 6px; }
.md-ok-by:empty { display: none; }
.md-page.md-approved .md-status { display: none; }
.md-page:not(.md-approved) .md-ok-by { background: var(--warn-soft); color: var(--warn); }
.md-page.md-open { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.md-page.md-approved { border-color: var(--ok-line); }
.md-page.md-approved > .md-pg-head b { color: var(--ok); }
.md-page .md-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.md-page.md-done .md-pg-head b::after { color: var(--ok); }
.md-cmp { font-size: 13px; }
.md-cmp th { font-size: 12px; font-weight: 500; color: var(--text-3); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.md-cmp td { border-top: 0; border-bottom: 1px solid var(--line); }
.md-cmp tr:last-child td { border-bottom: 0; }
.md-cmp .md-f { color: var(--text-2); font-weight: 500; font-size: 13px; }
.md-cmp .md-now { color: var(--text-2); }
.md-cmp textarea { font-size: 13px; color: var(--text-strong); }
.md-keep { color: var(--ok); font-weight: 500; font-size: 13px; }
.md-c { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .md-c.ok { color: var(--ok); font-weight: 500; } .md-c.near { color: var(--warn); } .md-c.over { color: var(--err); font-weight: 500; }
.md-todo { color: var(--text-2); }
.md-sec { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--surface); }
.md .md-t tr.md-on td { background: var(--ok-soft); }
.md-log { font-size: 12px; color: var(--text-3); }
.md-urls { font-family: var(--mono); }

/* Icon masks for CSS-drawn icons (history replays keep their old markup, so these come from CSS rather than the HTML) */
:root {
  --m-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E");
  --m-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
  --m-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4M3 7l2 2 4-4M13 6h8M13 12h8M13 18h8'/%3E%3C/svg%3E");
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --m-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 2 2 22'/%3E%3C/svg%3E");
}

/* ===== Narrow screens ===== */
@media (max-width: 860px) {
  .shell[data-mode="chat"] .composer-wrap { padding: 0 var(--gut) 16px; }
  .field { min-height: 56px; gap: 8px; }
  .scope-btn { height: 36px; max-width: 140px; padding: 0 10px; }
  .go { width: 36px; height: 36px; }
  .tb-info b { max-width: 60vw; }
  .ostop-r { gap: 6px; }
}
@media (max-width: 600px) {
  .scope-btn .i-chev { display: none; }
  .scope-btn { max-width: 112px; }
}

/* /metadata Site step: where the town came from, and other towns on file */
.md-from { color: var(--dim); font-weight: 400; margin-left: 4px; }
.md-towns .pc-tb { width: auto; padding: 0 10px; margin: 0 0 0 6px; }

/* /metadata before and after: struck-through words that go, highlighted words that are new (as in the design guide) */
:root { --diff-add: rgba(60,207,142,.24); --diff-del: #f0476f; }
:root[data-theme="light"] { --diff-add: #c9efd6; --diff-del: #c50f1f; }
.md-cmp del { text-decoration: line-through; text-decoration-color: var(--diff-del); text-decoration-thickness: 1.5px; color: var(--text-3); }
.md-cmp ins { text-decoration: none; background: var(--diff-add); color: var(--text-strong); border-radius: 3px; padding: 0 2px; }
.md-ed { display: block; width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--edge-hi); border-radius: 8px; background: var(--input-bg, var(--card)); color: var(--text-strong); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; cursor: text; }
.md-ed:hover { border-color: var(--text-3); }
.md-ed:focus { border-color: var(--acc); box-shadow: var(--focus); }

/* Progress tracks: a base you can see, so the bar visibly fills something (light mode was near white on white) */
:root { --track: rgba(255,255,255,.12); }
:root[data-theme="light"] { --track: #dfe2e8; }
@media (max-width: 860px) { .cmd-chip { height: 36px; padding: 0 10px; } } /* matches the smaller client button */

/* ===== /metadata, several areas (design guide: "the first step" and "several areas"; the mockup's xs- and xa- parts) ===== */
/* The Site and Keywords steps sit on one card; later steps keep the same header without the card. */
.md.xs-card { max-width: 760px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.md.xs-card > * { padding-left: 20px; padding-right: 20px; }
.md.xs-card > .md-log { padding-bottom: 12px; margin: 0; }
.md.xs-card > .errline { padding-bottom: 12px; }
.xs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.md:not(.xs-card) > .xs-top { padding-top: 0; }
.xs-top .trail { margin: 0; }
.xs-top .r { display: flex; align-items: center; gap: 4px; flex: none; }
.xs-top .test-pill { margin: 0; }
.xs-top .test-pill svg.i { width: 12px; height: 12px; }
.xs-top .md-close { margin: 0; }
.xs-title { padding-top: 16px; }
.md:not(.xs-card) > .xs-title { padding-bottom: 12px; }
.xs-title h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); }
.xs-title h3 span { color: var(--text-3); font-weight: 500; }
.xs-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.xs-facts > span + span::before, .xs-facts > a + span::before { content: "·"; margin: 0 8px; color: var(--text-3); }
.xs-facts a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.xs-facts a:hover { color: var(--accent-text); }
.xs-facts a svg.i { width: 12px; height: 12px; }
.xs-facts .btn { margin-left: 6px; height: 24px; padding: 0 8px; }
.xs-facts .btn svg.i { width: 13px; height: 13px; }
.md .btn.ghost, .md .btn.ghost:not(.alt):not(:disabled) { background: none; border-color: transparent; box-shadow: none; color: var(--accent-text); }
.md .btn.ghost:hover:not(:disabled) { background: var(--accent-soft); filter: none; }

.xs-set { display: grid; grid-template-columns: 252px minmax(0,1fr); gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.x-field > label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.xs-hint { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.xs-hint svg.i { width: 12px; height: 12px; }
.xs-lists { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.x-cb { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--input-bg); font-size: 13px; color: var(--text); cursor: pointer; }
.x-cb input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.x-cb > i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--input-bg); display: grid; place-items: center; color: transparent; }
.x-cb > i svg.i { width: 11px; height: 11px; stroke-width: 3; }
.x-cb:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text-strong); }
.x-cb:has(input:checked) > i { background: var(--accent); border-color: var(--accent); color: #fff; }
.x-cb:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.x-cb.lock { cursor: default; }
.x-cb small { font-size: 11px; color: var(--text-3); }

.xa-in { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 36px; padding: 3px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--input-bg); cursor: text; }
.xa-in:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.xa-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 9px; border-radius: 6px; background: var(--input-chip); color: var(--text-strong); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: default; }
.xa-chip[data-md-main] { cursor: pointer; }
.xa-chip.main { padding-right: 9px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.xa-chip .xa-star { font-size: 11px; line-height: 1; color: var(--accent-text); }
.xa-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.xa-x:hover { background: var(--raised); color: var(--text-strong); }
.xa-x svg.i { width: 12px; height: 12px; stroke-width: 2.25; }
/* The main area's × only shows on hover, so the star reads first (as designed) and a wrong main can still be taken off */
.xa-chip.main .xa-x { display: none; } .xa-chip.main:hover .xa-x, .xa-chip.main:focus-within .xa-x { display: grid; margin-right: -5px; }
input.xa-add, .md input.xa-add { flex: 1; min-width: 96px; width: auto; height: 28px; padding: 0 6px; border: 0; background: none; box-shadow: none; font-size: 13px; color: var(--text-strong); outline: none; }
.xa-in.sm { display: inline-flex; min-height: 30px; padding: 2px; }
.xa-in.sm .xa-chip { height: 24px; font-size: 12px; }
.md .xa-in.sm .xa-add.btn { height: 24px; min-width: 24px; width: 24px; padding: 0; flex: none; color: var(--text-2); }
.xa-in.sm .xa-add svg.i { width: 13px; height: 13px; }
.md input.xa-ra-in { width: 110px; height: 24px; padding: 0 6px; border: 0; background: none; box-shadow: none; font-size: 12px; outline: none; }
/* Info icon: a circled "i"; hover, focus or tap shows one line in a dark tip */
.xa-info { position: relative; width: 18px; height: 18px; padding: 0; margin-left: 2px; border: 0; border-radius: 50%; background: none; color: var(--text-3); display: inline-grid; place-items: center; flex: none; vertical-align: middle; cursor: help; }
.xa-info svg.i { width: 14px; height: 14px; }
.xa-info:hover, .xa-info.on, .xa-info:focus-visible { color: var(--accent-text); background: var(--accent-soft); }
.xs-tip { display: none; position: absolute; z-index: 20; left: -9px; bottom: calc(100% + 8px); width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--text-strong); color: var(--surface); font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: var(--shadow-pop); pointer-events: none; }
.xs-tip::after { content: ""; position: absolute; top: 100%; left: 13px; border: 5px solid transparent; border-top-color: var(--text-strong); }
.xa-info:hover .xs-tip, .xa-info:focus-visible .xs-tip, .xa-info.on .xs-tip { display: block; }
.xs-tip.dn { bottom: auto; top: calc(100% + 8px); }
.xs-tip.dn::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text-strong); }
th .xs-tip { right: -9px; left: auto; } th .xs-tip::after { left: auto; right: 13px; }

.xs-run { padding-top: 16px; padding-bottom: 20px; border-top: 1px solid var(--line); }
.x-lab { font-size: 11px; font-weight: 500; color: var(--text-3); margin: 0 0 8px; }
.xs-modes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.xs-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: auto; padding: 16px; text-align: left; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.xs-mode:hover:not(:disabled) { border-color: var(--text-3); }
.xs-mode.rec { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.xs-mode.rec:hover:not(:disabled) { border-color: var(--accent); }
.xs-mode .hd { display: flex; align-items: center; gap: 8px; width: 100%; }
.xs-mode .hd b { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.xs-mode .hd svg.i { width: 16px; height: 16px; color: var(--accent-text); }
.xs-mode .hd .md-tag { margin-left: auto; }
.xs-mode .meta { font-size: 13px; color: var(--text-2); }
.xs-mode .path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.xs-mode .path i { width: 8px; height: 1px; background: var(--line-strong); }
.xs-mode .xs-go { margin-top: 6px; pointer-events: none; }
.xs-mode:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; border-color: var(--line); }
.md .md-run { position: relative; overflow: hidden; opacity: 1; cursor: progress; }
.md .md-run::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--md-p, 0%); background: currentColor; opacity: .22; transition: width .25s linear; }
.md .md-run > span { position: relative; }

.xs-busy { padding-top: 16px; padding-bottom: 20px; }
.xs-busy .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.xs-busy .row b { font-weight: 600; color: var(--text-strong); }
.xs-busy .row .num { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.xs-bar { height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--track); }
.xs-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1d3461, #2a4f8f 60%, #4a72b8); transition: width .6s ease-out; }
.xs-busy .x-eta { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 12px; color: var(--text-3); }
.xs-busy .x-eta .mono { font-family: var(--mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Keywords: one total per keyword, the split across the areas as a bar, the numbers on tap */
.xa-kwh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 8px; }
.xa-kwh p { margin: 0; font-size: 13px; }
.xa-kwh .why { margin-left: 6px; }
.md-sum { margin: 0 0 8px; }
.xa-key { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-2); }
.xa-key span, .xa-pop span { display: inline-flex; align-items: center; gap: 5px; }
.md { --a1: var(--accent); --a2: color-mix(in srgb, var(--accent) 62%, #fff); --a3: color-mix(in srgb, var(--accent) 34%, #fff); }
.xa-key span::before, .xa-pop span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--a1); }
.xa-key span:nth-child(2)::before, .xa-pop span:nth-child(2)::before { background: var(--a2); }
.xa-key span:nth-child(3)::before, .xa-pop span:nth-child(3)::before { background: var(--a3); box-shadow: inset 0 0 0 1px var(--accent-line); }
.md .xa-kw td { vertical-align: middle; }
.md .xa-kw .tot, .md .md-t .tot { font-weight: 600; color: var(--text-strong); }
.xa-kw tr[data-md-tap] { cursor: pointer; }
.md .xa-kw tr.tap td { background: var(--accent-soft); }
.xa-split { position: relative; width: 140px; }
.xa-bar { display: flex; gap: 2px; height: 8px; }
.xa-bar i { display: block; height: 100%; border-radius: 2px; background: var(--a1); }
.xa-bar i:nth-child(2) { background: var(--a2); } .xa-bar i:nth-child(3) { background: var(--a3); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* The numbers sit under the bar inside the row (the table scrolls sideways, so a floating pop-up would be clipped) */
.xa-pop { display: none; position: relative; margin-top: 10px; gap: 10px; width: max-content; padding: 7px 10px; border-radius: 8px; background: var(--text-strong); color: var(--surface); font-size: 12px; box-shadow: var(--shadow-pop); }
.xa-pop b { font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.xa-pop::before { content: ""; position: absolute; bottom: 100%; left: 14px; border: 5px solid transparent; border-bottom-color: var(--text-strong); }
tr.tap .xa-pop { display: flex; }
.xa-kwf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 16px; border-top: 1px solid var(--line); }
.xa-kwf input { flex: 1; max-width: 320px; min-width: 160px; }
.xa-kwf .sp { margin-left: auto; }
.md.xs-card .pc-wrap { margin: 0; }

/* A page's targets and the removed-area flag */
.md-retarget .xa-in.sm { flex: none; }
.xa-lost { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 6px 6px 6px 10px; border-radius: 8px; background: var(--err-soft); border: 1px solid var(--err-line); }
.x-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--err); font-size: 13px; font-weight: 600; }
.x-flag svg.i { width: 15px; height: 15px; }
.xa-lost .acts { display: flex; gap: 6px; margin-left: auto; }
.md-cmp tr.xa-hit .md-ed, .md-cmp tr.xa-hit textarea { border-color: var(--err-line); background: var(--err-soft); }
.md-status.bad { background: var(--err-soft); color: var(--err); border-color: transparent; }
.md-status svg.i { width: 12px; height: 12px; }
.md-pg-acts { align-items: center; justify-content: flex-end; }
.md-pg-acts .xa-wait { margin-right: auto; font-size: 12px; color: var(--err); }
.md-pg-acts .btn svg.i { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .xs-set, .xs-modes { grid-template-columns: minmax(0,1fr); }
  .xs-top { flex-direction: column-reverse; align-items: stretch; } .xs-top .r { justify-content: space-between; }
  .md.xs-card > * { padding-left: 16px; padding-right: 16px; }
  .xa-split { width: 90px; } .xa-lost .acts { margin-left: 0; }
}
.md.xs-card .md-t tr.md-on td { background: none; } /* on the card the tick says it (as designed); a tapped row is highlighted instead */
.md.xs-card .xa-kw tr.tap td { background: var(--accent-soft); }
.md .md-loc.xa-wide { min-width: 240px; }

/* ===== /metadata flow (design guide: "/metadata: the flow", xf- parts): read, choose, plan, one review screen in four parts ===== */
.md.xs-card.xf-wide { max-width: 960px; }
.xf-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.xf-name > b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); }
.xf-meta { display: inline-flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.xf-meta > * + *::before { content: "·"; margin: 0 8px; color: var(--text-3); }
.xf-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.xf-meta a:hover { color: var(--accent-text); }
.xf-meta a svg.i { width: 12px; height: 12px; }
.xf-quiet { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--text-3); font-size: 12px; font-weight: 500; cursor: pointer; }
.xf-quiet:hover { color: var(--text-strong); background: var(--raised); }
.xf-quiet svg.i { width: 13px; height: 13px; }
.xf-sp { flex: 1; }
/* Progress: forward only, track always visible in both themes */
.xf-busy { padding-top: 16px; padding-bottom: 20px; }
.xf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.xf-row b { font-weight: 600; color: var(--text-strong); }
.xf-row .num { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.xf-bar { height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--track); box-shadow: inset 0 0 0 1px var(--line); }
.xf-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1d3461, #2a4f8f 60%, #4a72b8); transition: width .3s cubic-bezier(.1,.9,.2,1); }
.xf-eta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.xf-eta .mono { font-family: var(--mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md .xf-steps { margin: 16px 0 0; padding: 0; }
/* First screen: one found line (showrooms, location pages, pages read), two cards */
.xf-found { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; padding-top: 16px; font-size: 13px; color: var(--text-2); }
.xf-found > svg.i { width: 15px; height: 15px; margin-right: 6px; color: var(--accent-text); }
.xf-found b { font-weight: 600; color: var(--text-strong); }
.xf-found > span + span::before { content: "·"; margin: 0 8px; color: var(--text-3); }
.xf-found > .xf-warn::before, .xf-found > .xf-addsr::before { content: none; }
.xf-town-q { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 500; }
.xf-town-q input { width: 180px; }
.xf-warn { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; color: var(--warn); font-size: 12px; font-weight: 500; }
.xf-warn > svg.i { width: 13px; height: 13px; }
.xf-addsr { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: 10px; }
.xf-addsr .xa-chip { height: 24px; font-size: 12px; }
.md .xf-addsr input.xa-add { width: 130px; min-height: 0; height: 26px; padding: 0 8px; border: 1px dashed var(--line-strong); border-radius: 6px; background: none; color: var(--text); font-size: 12px; }
.md .xf-addsr input.xa-add:focus { border-style: solid; border-color: var(--accent); }
.xf-modes { padding-top: 16px; padding-bottom: 20px; }
/* Review parts: compact headers, hairline separators */
.xf-part { padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--line); }
.xs-top + .xf-part { border-top: 0; }
.xf-ph { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.xf-ph .n { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 600; flex: none; }
.xf-ph b { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.xf-pr { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
/* (1) Where they are now */
.xf-now { list-style: none; margin: 0; padding: 0; }
.xf-now li { display: grid; grid-template-columns: minmax(0, 220px) 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 32px; font-size: 13px; border-bottom: 1px solid var(--line); }
.xf-now .kw { color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-now .pos { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.xf-now .pos.xf-top { color: var(--ok); }
.xf-now .pos.none { color: var(--text-3); font-weight: 400; }
.xf-now .mono { font-family: var(--mono); color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-now .md-status svg.i { width: 12px; height: 12px; }
.xf-more { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; padding: 0; border: 0; background: none; text-align: left; color: var(--text-2); font-size: 12px; font-weight: 500; cursor: pointer; }
.xf-more:hover { color: var(--text-strong); }
.xf-more .chev { width: 14px; height: 14px; color: var(--text-3); }
/* (2) Targets by area */
.xf-area { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 12px; align-items: start; padding: 6px 0; }
.xf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.xf-chips .xa-chip { height: 24px; font-size: 12px; }
.xf-lab { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.xf-lab .num { color: var(--text-3); }
.xf-kws { display: flex; flex-wrap: wrap; gap: 4px; }
.xf-kws span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--input-chip); color: var(--text-strong); font-size: 12px; white-space: nowrap; }
.xf-kws b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.xf-locs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 20px; }
.xf-locs li { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr) auto; gap: 6px; align-items: baseline; min-height: 24px; font-size: 12px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.xf-locs b { font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-locs span { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-locs .num { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.xf-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; font-size: 12px; color: var(--text-3); }
.xf-left span { color: var(--text-2); cursor: help; border-bottom: 1px dotted var(--line-strong); }
/* (3) Changes */
.xf-notes { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--warn); }
.xf-notes li { margin: 2px 0; }
.xf-town { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 6px; background: var(--input-chip); color: var(--text-strong); font-size: 12px; font-weight: 500; white-space: nowrap; }
.xf-town svg.i { width: 12px; height: 12px; color: var(--text-3); }
.xf-rank { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--text-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xf-kept { justify-content: space-between; }
/* (4) Recommended additions */
.xf-adds { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; }
.xf-adds li { display: grid; grid-template-columns: minmax(0,1fr) 64px auto; gap: 12px; align-items: center; padding: 10px 16px; }
.xf-adds li + li { border-top: 1px solid var(--line); }
.xf-adds .t { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.xf-adds .t b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text-strong); }
.xf-adds .t b svg.i { width: 14px; height: 14px; color: var(--accent-text); }
.xf-adds .why { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-adds .vol { font-size: 13px; font-weight: 600; color: var(--text-strong); text-align: right; }
.xf-adds .t .mono { margin-top: 1px; font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-adds .acts { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.xf-adds .acts svg.i { width: 13px; height: 13px; }
.xf-adds li.on { background: color-mix(in srgb, var(--ok-soft) 45%, transparent); }
.xf-adds li.split { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.xf-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--line); }
/* Step 1 (and Edit areas): areas, lists and location pages filled in */
.xf-set { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 10px 12px; align-items: center; padding-top: 16px; padding-bottom: 12px; }
.xf-in { justify-self: start; }
.xf-in .xa-add { width: 120px; border: 0; background: none; padding: 0 8px; color: var(--text); font-size: 12px; }
.xf-lists { gap: 6px; }
.xf-lists .x-cb { height: 28px; padding: 0 10px; font-size: 12px; }
.xf-towns { display: flex; flex-wrap: wrap; gap: 0; font-size: 13px; color: var(--text-strong); }
.xf-towns span + span::before { content: "·"; margin: 0 7px; color: var(--text-3); }
.xf-kwr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.xf-count { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-2); }
.xf-count b { font-weight: 600; color: var(--text-strong); }
.md .xf-kwt { width: 100%; }
.xf-kwt td, .xf-kwt th { padding-top: 7px; padding-bottom: 7px; }
.xf-kwt .xa-split { width: 160px; }
.xf-replan { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
@media (max-width: 760px) {
  .xf-now li { grid-template-columns: minmax(0,1fr) 36px; }
  .xf-now .mono { grid-column: 1 / -1; margin-top: -8px; }
  .xf-now .md-status { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; }
  .xf-area, .xf-set { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .xf-locs { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .xf-adds li { grid-template-columns: minmax(0,1fr) auto; }
  .xf-adds .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .xf-warn, .xf-addsr { margin-left: 0; }
}
.xf-srs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.xf-srs .xf-warn, .xf-srs .xf-addsr { margin-left: 4px; }
.xf-srs > .xa-chip { height: 24px; font-size: 12px; }

/* /metadata Changes (xc2-): a plain numbered list, one row per page that changes; details only inside an opened page. */
.xc2-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.xc2-list > .pg + .pg { border-top: 1px solid var(--line); }
.xc2-list .pg-row { display: grid; grid-template-columns: 20px minmax(0, 1.5fr) minmax(0, 1fr) auto 16px; gap: 12px; align-items: center; min-height: 52px; padding: 6px 16px; cursor: pointer; }
.xc2-list .pg-row:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.xc2-list .pg.open > .pg-row { background: var(--raised); }
.xc2-n { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.xc2-list .pg.open .xc2-n { color: var(--text-strong); }
.xc2-list .pg-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.xc2-list .pg-name b { font-size: 13px; font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc2-list .pg.approved .pg-name b { color: var(--text-2); }
.xc2-list .pg-name .mono, .xc2-note .mono, .xc2-kept .mono { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc2-tgt { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.xc2-tgt .kw { overflow: hidden; text-overflow: ellipsis; }
.xc2-area { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 6px; border-radius: 6px; background: var(--sunk); color: var(--text-3); font-size: 11.5px; white-space: nowrap; flex: none; }
.xc2-area .xa-star { font-size: 10px; line-height: 1; color: var(--text-3); }
.xc2-area svg.i { width: 11px; height: 11px; }
.xc2-f { display: flex; gap: 3px; justify-content: flex-end; }
.xc2-f span { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--sunk); color: var(--text-2); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.xc2-f span.ok { background: var(--ok-soft); color: var(--ok); padding: 0 4px; }
.xc2-f span.bad { background: var(--err-soft); color: var(--err); }
.xc2-f svg.i { width: 11px; height: 11px; }
.xc2-list .pg-row .chev, .xc2-more .chev, .xc2-alone .chev { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s cubic-bezier(.33,0,.67,1); }
.xc2-list .pg.open > .pg-row .chev, .xc2-alone.open .chev { transform: rotate(90deg); color: var(--text); }
.xc2-list .pg-wrap, .xc2-alone .pg-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(.1,.9,.2,1); }
.xc2-list .pg.open .pg-wrap, .xc2-alone.open .pg-wrap { grid-template-rows: 1fr; }
.xc2-list .pg-wrap > div, .xc2-alone .pg-wrap > div { overflow: hidden; min-height: 0; }
.xc2-list .pg:not(.open) .pg-wrap > div, .xc2-alone:not(.open) .pg-wrap > div { visibility: hidden; }

/* Opened page: the existing compare table, aligned under the page name. */
.xc2-body { padding: 12px 16px 12px 48px; border-top: 1px solid var(--line); background: var(--surface); }
.xc2-body .md-cmp tr:last-child td { border-bottom: 0; }
.xc2-body .md-cmp tr[data-k="url"] .md-now, .xc2-body .md-cmp tr[data-k="url"] textarea { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.xc2-redir, .xc2-note { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 12px; color: var(--text-3); }
.xc2-note { margin: 0 0 12px; }
.xc2-note .mono { color: var(--text-2); }
.xc2-redir .xa-info, .xc2-note .xa-info { width: 16px; height: 16px; margin-left: 0; }
.xc2-redir .xa-info svg, .xc2-note .xa-info svg { width: 13px; height: 13px; }
.xc2-body .md-ok-by:empty { display: none; }
.xc2-body .md-pg-acts .md-ok-by { margin-right: auto; }

/* "N more" and the quiet lines (left as they are, nothing to change). */
.xc2-more { display: grid; grid-template-columns: 20px auto 16px; gap: 12px; align-items: center; width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.xc2-more .xc2-n svg { width: 12px; height: 12px; display: block; margin-left: auto; }
.xc2-more .chev { width: 14px; height: 14px; }
.xc2-more:hover { color: var(--text-strong); background: color-mix(in srgb, var(--raised) 60%, transparent); }
.xc2-alone { margin-top: 8px; }
.xc2-alone + .xc2-alone { margin-top: 0; }
.xc2-alone > .pg-row { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 16px 0 48px; font-size: 12px; color: var(--text-3); border-radius: 6px; cursor: pointer; }
.xc2-alone > .pg-row:hover, .xc2-alone.open > .pg-row { color: var(--text-2); }
.xc2-alone > .pg-row .chev { width: 13px; height: 13px; }
.xc2-kept { margin: 0; padding: 0 16px 0 48px; }
.xc2-k { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) 32px auto; gap: 12px; align-items: center; min-height: 32px; font-size: 12px; border-top: 1px solid var(--line); }
.xc2-k b { font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc2-k .pos { text-align: right; font-weight: 600; color: var(--ok); font-variant-numeric: tabular-nums; }
.xc2-k .xf-quiet { height: 24px; }

@media (max-width: 760px) {
  .xc2-list .pg-row { grid-template-columns: 20px minmax(0, 1fr) 16px; row-gap: 4px; padding: 8px 12px; }
  .xc2-list .pg-row .pg-name { grid-column: 2; }
  .xc2-list .pg-row .chev { grid-column: 3; grid-row: 1; }
  .xc2-tgt, .xc2-f { grid-column: 2; justify-content: flex-start; }
  .xc2-body { padding: 12px; }
  .xc2-alone > .pg-row, .xc2-kept { padding-left: 12px; }
  .xc2-k { grid-template-columns: minmax(0, 1fr) 32px auto; }
  .xc2-k .mono, .xc2-k .xc2-tgt { display: none; }
}
.shell:not([data-mode="chat"]) .aura { display: none; } /* no footer to sit above */


/* /metadata Recommended additions: each row opens to its brief (prefix xb-; ported from design/brief.css). */
.xb-list, .md .xb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.xb-list > .xb + .xb { border-top: 1px solid var(--line); }
.xb.split { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }

/* The row: one line when closed */
.xb .xb-row { display: grid; grid-template-columns: auto minmax(0,1fr) 64px 16px; gap: 12px; align-items: center; min-height: 48px; padding: 0 16px; background: none; }
.xb .xb-row:hover { background: none; }
.xb:hover { background-color: color-mix(in srgb, var(--raised) 50%, transparent); }
.xb.split:hover { background-color: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.xb .xb-row .chev { width: 16px; height: 16px; }
.xb.open .xb-row { background: none; }
.xb-row > b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text-strong); white-space: nowrap; }
.xb-row > b svg { width: 14px; height: 14px; color: var(--accent-text); }
.xb-row .why { min-width: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-row .vol { font-size: 13px; font-weight: 600; color: var(--text-strong); text-align: right; }

/* The brief */
.xb-brief { margin: 0 16px 16px; padding: 4px 16px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.xb-sec { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.xb-lab { display: inline-flex; align-items: center; gap: 2px; align-self: start; min-height: 22px; font-size: 12px; font-weight: 500; color: var(--text-3); }

/* Why: evidence as fact pills */
.xb-why { display: flex; flex-direction: column; gap: 6px; }
.xb-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.xb-facts > span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--input-chip); color: var(--text); font-size: 12px; white-space: nowrap; }
.xb-facts > span b { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.xb-facts > span .mono { font-size: 11px; color: var(--text-2); }
.xb-facts > .gap { flex: none; background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.xb-facts > .win { background: var(--ok-soft); color: var(--ok); }
.xb-facts > .win b { color: inherit; }
.xb-facts > .xb-k { background: none; padding: 0 4px 0 0; color: var(--text-3); font-weight: 500; }

/* The page we'd build: one-column label/value rows */
.xb-spec { display: flex; flex-direction: column; }
.xb-f { display: grid; grid-template-columns: 112px minmax(0,1fr) 64px; gap: 12px; align-items: baseline; padding: 5px 0; }
.xb-f + .xb-f { border-top: 1px solid var(--line); }
.xb-f:first-child { padding-top: 1px; }
.xb-f .k { font-size: 12px; color: var(--text-2); }
.xb-f .v { min-width: 0; font-size: 13px; color: var(--text-strong); line-height: 1.45; overflow-wrap: anywhere; }
.xb-f .v.mono { font-size: 12px; }
.xb-f .len { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* What goes on it */
.xb-outline, .md .xb-outline { margin: 0; padding: 0; list-style: none; counter-reset: xb; columns: 2; column-gap: 20px; }
.xb-outline li { counter-increment: xb; display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--text-strong); line-height: 1.4; padding: 2px 0; break-inside: avoid; }
.xb-outline li::before { content: counter(xb); flex: none; width: 12px; text-align: right; font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Linked from */
.xb-links { display: flex; flex-wrap: wrap; gap: 4px; }
.xb-links > span { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; white-space: nowrap; }
.xb-links b { font-weight: 500; color: var(--text-strong); }
.xb-links .mono { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }

/* Panel footer */
.xb-foot { display: flex; align-items: center; gap: 4px; padding: 12px 0; }
.xb-foot .xf-sp { flex: 1; }

@media (max-width: 760px) {
  .xb .xb-row { grid-template-columns: minmax(0,1fr) auto 16px; }
  .xb-row .why { display: none; }
  .xb-sec { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .xb-f { grid-template-columns: minmax(0,1fr) auto; }
  .xb-f .k { grid-column: 1 / -1; }
  .xb-outline, .md .xb-outline { columns: 1; }
  .xb-row > b { min-width: 0; white-space: normal; }
  .xb-facts > span { height: auto; min-height: 22px; padding-block: 2px; white-space: normal; }
  .xb-links > span { min-width: 0; }
  .xb-links b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Open and close (as the Changes list), the chevron, the row as a button, the brief's own bits */
.xb .xb-row { cursor: pointer; }
.xb .xb-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.xb .xb-row .chev { color: var(--text-3); transition: transform .2s cubic-bezier(.33,0,.67,1); }
.xb.open > .xb-row .chev { transform: rotate(90deg); color: var(--text); }
.xb-foot svg.i { width: 13px; height: 13px; }
.xb-list .pg-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(.1,.9,.2,1); }
.xb-list .pg.open .pg-wrap { grid-template-rows: 1fr; }
.xb-list .pg-wrap > div { overflow: hidden; min-height: 0; }
.xb-list .pg:not(.open) .pg-wrap > div { visibility: hidden; }
.xb-txt { margin: 0; font-size: 13px; color: var(--text-strong); line-height: 1.45; }
.xb-foot .why { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .xb-list .pg-wrap, .xb .xb-row .chev { transition: none; } }

/* SEO brain review card under a chat answer (design guide 4d; prefix xp-). Reuses the /metadata review's card, parts and list. */
.xp-host + .xp-host, .msg-b .xp-slot { margin-top: 12px; }
.md.xp-card > .xs-top .r { min-height: 28px; }
.xp-when { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.xp-load { display: flex; align-items: center; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
.xp-load p { margin: 0 !important; }
.md.xp-card > .xp-work { border-bottom: 1px solid var(--line); }
.xp-card.xp-busy .xf-part, .xp-card.xp-busy .xp-prof { opacity: .55; transition: opacity .2s; }
/* Business line */
.xp-prof { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.xp-fact { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.xp-fact > svg.i { width: 14px; height: 14px; color: var(--text-3); }
.xp-fact > b { font-weight: 600; color: var(--text-strong); }
.xp-fact > span { color: var(--text-3); }
.xp-fact > .xp-wide { color: var(--warn); font-weight: 500; }
.xp-svcs { gap: 4px; flex-wrap: wrap; }
.xp-svc { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; border-radius: 6px; background: var(--ok-soft); color: var(--ok) !important; font-weight: 500; }
.xp-svc svg.i { width: 12px; height: 12px; stroke-width: 2.25; }
.xp-svc.off { background: none; color: var(--text-3) !important; text-decoration: line-through; text-decoration-color: var(--line-strong); padding-left: 3px; }
.xp-prof .xa-info { margin-left: -10px; }
.md.xp-card .xs-top + .xp-prof, .md.xp-card .xp-work + .xp-prof { border-top: 0; }
.md.xp-card .xp-prof + .xf-part { border-top: 0; }
/* Targets table: scrolls inside its box on a phone, keyword column stays put */
.xp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; contain: paint; } /* contain: the sticky keyword column otherwise lets the table widen the page on a phone */
.msg-b table.xp-t, .xp-t { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.xp-t th { font-size: 12px; font-weight: 500; color: var(--text-3); text-align: left; padding: 0 6px 8px; white-space: nowrap; border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.xp-t th .xa-info { width: 16px; height: 16px; margin: -2px 0 0 2px; }
.xp-t th .xa-info svg.i { width: 13px; height: 13px; }
.xp-t td { padding: 0 6px; height: 40px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.xp-t .xp-v, .xp-t .xp-pos { text-align: right; }
.xp-t td.xp-v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); }
.xp-t td.xp-k { color: var(--text-strong); font-weight: 500; }
.xp-t th.xp-k, .xp-t td.xp-k { position: sticky; left: 0; z-index: 1; background: var(--surface); padding-left: 0; }
.xp-t td.xp-pos { color: var(--text-2); font-variant-numeric: tabular-nums; }
.xp-t td.xp-pos.none { color: var(--text-3); }
.xp-t td.xp-pg { white-space: nowrap; }
.xp-t td.xp-pg .mono { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.xp-t td.xp-pg .xp-fill + .xp-new + .mono, .xp-t td.xp-pg .xp-act + .mono, .xp-t td.xp-pg .xp-new + .mono { max-width: 120px; }
.xp-t td.xp-sr { font-size: 12px; color: var(--text-2); }
.xp-t .xp-x { width: 28px; padding: 0 0 0 4px; text-align: right; position: sticky; right: 0; z-index: 1; background: var(--surface); } /* reject always in reach, even mid-scroll on a phone */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xp-xb { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; opacity: .7; }
.xp-xb svg.i { width: 14px; height: 14px; }
.xp-t tr:hover .xp-xb, .xp-xb:focus-visible { opacity: 1; }
.xp-xb:hover:not(:disabled), .xp-t tr.xp-rjon .xp-xb { opacity: 1; color: var(--err); background: var(--err-soft); }
.xp-xb:disabled { cursor: default; }
.xp-t tr.xp-rjon td { border-bottom-color: transparent; }
.xp-t tr.xp-rj td { height: auto; padding: 0 0 10px; }
.xp-rjf { position: sticky; left: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: max-content; max-width: min(100%, calc(100vw - 96px)); padding: 8px 10px; border-radius: 8px; background: var(--err-soft); font-size: 13px; color: var(--text); }
.xp-rjf b { font-weight: 600; }
.xp-rjf input { width: 240px; max-width: 100%; height: 28px; padding: 0 8px; font-size: 13px; }
/* Target number chip: the same in the table and on every change */
.xp-n, .xp-pri > b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-n { min-width: 24px; margin-right: 10px; vertical-align: 1px; }
.xp-n.kp, .xp-pri > b.kp { background: var(--ok-soft); color: var(--ok); }
.xp-n svg.i, .xp-pri svg.i { width: 12px; height: 12px; stroke-width: 2.25; }
.xp-area { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 6px; border-radius: 6px; background: var(--sunk); color: var(--text); font-size: 11.5px; white-space: nowrap; }
.xp-area .xa-star { font-size: 10px; line-height: 1; color: var(--text-3); }
.xp-area small { font-size: 11px; color: var(--text-3); }
.xp-band { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 500; }
.xp-band.k { color: var(--ok); } .xp-band.q { color: var(--accent-text); } .xp-band.s { color: var(--text-3); }
.xp-act, .xp-new, .xp-fill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-right: 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; background: var(--sunk); color: var(--text-2); vertical-align: 1px; }
.xp-new { background: var(--accent-soft); color: var(--accent-text); }
.xp-fill { background: var(--warn-soft); color: var(--warn); }
.xp-hard { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.xp-hard i { display: inline-flex; gap: 2px; }
.xp-hard i b { width: 6px; height: 12px; border-radius: 2px; background: var(--line-strong); }
.xp-hard.e i b:nth-child(1) { background: var(--ok); }
.xp-hard.m i b:nth-child(-n+2) { background: var(--warn); }
.xp-hard.h i b { background: var(--err); }
.xp-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--raised); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
.xp-tag.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.xp-tag.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.xp-t tr.xp-cut td, .xp-t tr.xp-sub td { height: 28px; font-size: 12px; font-weight: 500; }
.xp-t tr.xp-cut td { padding-top: 6px; color: var(--accent-text); }
.xp-t tr.xp-sub td { padding-top: 12px; color: var(--text-3); }
.xp-t tr.xp-cut td span, .xp-t tr.xp-sub td span { position: sticky; left: 0; }
.xp-t tr.hold td.xp-k, .xp-t tr.hold td.xp-v { color: var(--text-2); font-weight: 400; }
/* Left out: not sold (struck through), rejected (with Restore) */
.msg-b p.xp-out, .xp-out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 0; font-size: 12px; color: var(--text-3); }
.xp-out > span:first-child { font-weight: 500; }
/* what a change drops from the page today (engine removed[]), shown in the opened row */
.msg-b p.xp-removed, .xp-removed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
.xp-removed > span:first-child { font-weight: 500; }
.xp-fwhy { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); }
.xp-rm b { font-weight: 500; color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.xp-o { text-decoration: line-through; text-decoration-color: var(--line-strong); white-space: nowrap; }
.xp-o b { font-weight: 600; color: var(--text-2); }
.xp-o small { font-size: 11px; display: inline-block; color: var(--warn); }
.xp-o.rj { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--text-2); }
.xp-o.rj > :first-child { text-decoration: line-through; }
.xp-restore { display: inline-flex; align-items: center; gap: 3px; height: 22px; margin-left: 2px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--accent-text); font-size: 12px; font-weight: 500; cursor: pointer; }
.xp-restore svg.i { width: 12px; height: 12px; }
.xp-restore:hover:not(:disabled) { background: var(--accent-soft); }
/* Changes: target chips in the first column, status before the field tags */
.msg-b ol.xp-chg, ol.xp-chg { list-style: none; margin: 0; padding: 0; }
.xp-chg .pg-row { grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1.2fr) 230px 16px; }
.xp-chg .pg-row > span:last-child:empty { width: 16px; }
.xp-chg .xp-newpg .pg-row, .xp-chg .xp-keep .pg-row { cursor: default; }
.xp-chg .xp-newpg .pg-row:hover, .xp-chg .xp-keep .pg-row:hover { background: none; }
.xp-chg .xc2-tgt .k { overflow: hidden; text-overflow: ellipsis; }
.xp-chg .xc2-tgt .xp-area { color: var(--text-3); }
.xp-pri { display: flex; gap: 3px; flex-wrap: wrap; }
.xp-dot { width: 6px; height: 6px; margin: 0 7px; border-radius: 50%; background: var(--line-strong); }
.xp-more { grid-template-columns: 92px auto 16px; }
.xp-more .xp-pri svg.i { width: 12px; height: 12px; color: var(--text-3); margin-left: 4px; }
.xp-newf, .xc2-f .xp-newf { background: var(--accent-soft) !important; color: var(--accent-text) !important; }
.xp-left, .xc2-f .xp-left { background: var(--ok-soft) !important; color: var(--ok) !important; }
.xc2-f .xp-st, .xp-st { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.xp-st.ok { background: var(--ok-soft); color: var(--ok); }
.xp-st.live { background: var(--ok); color: var(--surface); }
.xp-st svg.i { width: 11px; height: 11px; stroke-width: 2.5; }
.xp-chg .xc2-body { padding-left: 120px; }
.xp-why { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px !important; font-size: 12px; color: var(--text-2); }
.xp-why > span { display: flex; align-items: center; min-width: 0; }
.xp-why .xp-n { min-width: 20px; margin-right: 8px; }
.xp-cmp td { vertical-align: top; }
.xp-rec { color: var(--text-strong); }
.xp-cmp .md-c { display: block; margin-top: 2px; }
.xp-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.xp-acts .xp-st { height: 24px; padding: 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.xp-acts .xp-st small { font-size: 11px; font-weight: 400; opacity: .85; }
.xp-acts .btn svg.i { width: 14px; height: 14px; }
.xp-note { font-size: 12px; color: var(--text-2); }
@media (max-width: 760px) {
  .xp-t td.xp-k { box-shadow: 1px 0 0 var(--line); }
  .xp-prof .xa-info { margin-left: 0; }
  .xp-card .xs-top .r { display: none; }
  .xp-card .xf-foot .xf-sp { display: none; }
  .xp-card .xf-foot .btn:not(.alt) { flex: 1 1 100%; order: -1; }
  .xp-chg .pg-row { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 6px; padding: 10px 12px; }
  .xp-chg .pg-row .xp-pri { grid-column: 1; grid-row: 1; }
  .xp-chg .pg-row .pg-name, .xp-chg .pg-row .xc2-tgt, .xp-chg .pg-row .xc2-f { grid-column: 1; justify-content: flex-start; }
  .xp-chg .pg-row .chev, .xp-chg .pg-row > span:last-child { grid-column: 2; grid-row: 1; }
  .xp-more { grid-template-columns: auto minmax(0, 1fr) 16px; padding: 0 12px; }
  .xp-more .xp-pri { width: 20px; }
  .xp-chg .xc2-body { padding: 12px; }
  .xp-cmp thead { display: none; }
  .xp-cmp tr { display: grid; grid-template-columns: 1fr; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .xp-cmp td { border: 0 !important; padding: 2px 0; }
  .xp-acts { justify-content: flex-start; flex-wrap: wrap; }
}

/* /client-brain: one document, set in mono (guide #x-brain, signed off 23 Oct) */
.bd-sheet { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--sunk); overflow: hidden; }
.bd-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--text-3); background: var(--surface); }
.bd-bar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-bar .bd-sp { flex: 1; }
.bd-bar .btn { flex: none; }
.bd-bar .bd-msg { font-family: var(--sans, inherit); color: var(--ok, var(--text-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bd-page { max-height: 520px; overflow-y: auto; margin: 16px; padding: 40px 48px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text); }
.bd-page .bd-head { margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px dashed var(--line-strong); font: inherit; color: var(--text-2); white-space: pre-wrap; background: none; }
.bd-page .bd-head::first-line { color: var(--accent-text); font-weight: 600; letter-spacing: .08em; }
.bd-page h3 { margin: 24px 0 6px; font: 600 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-strong); }
.bd-page h3::before { content: "## "; color: var(--text-3); }
.bd-page p { margin: 0 0 6px; }
.bd-page .bd-ref, .bd-page .bd-dim { color: var(--text-3); }
.bd-page .bd-ref a { color: inherit; text-decoration: none; } .bd-page .bd-ref a:hover { color: var(--accent-text); text-decoration: underline; }
.bd-page .bd-note { color: var(--text-strong); }
.bd-page .bd-x { border: 0; background: none; color: var(--text-3); font: inherit; cursor: pointer; padding: 0 4px; }
.bd-page .bd-x:hover { color: var(--err, var(--text)); }
.bd-sheet.editing .bd-page { box-shadow: 0 0 0 2px var(--accent); }
.bd-sheet.editing .bd-t { outline: none; caret-color: var(--accent); border-bottom: 1px dotted var(--line-strong); }
.bd-sheet.editing .bd-t:focus { background: var(--accent-soft); }
.bd-foot { margin: 0 16px 14px; }
.bd-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 640px) { .bd-page { margin: 8px; padding: 20px 16px; font-size: 12px; } }

.bd-page .bd-seo { margin-top: 14px; color: var(--text-strong); }
.bd-page .bd-in { padding-left: 2ch; }
/* Meetings part: small labels inside Latest, the owner of an action, one meeting in the history. */
.bd-page .bd-sub { margin: 10px 0 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.bd-page .bd-sub + .bd-sub, .bd-page .bd-sub:first-child { margin-top: 0; }
.bd-page .bd-who { color: var(--text-strong); font-weight: 600; }
.bd-page .bd-mtg { margin-top: 12px; }
.bd-page .bd-mtg b { color: var(--text-strong); }
.bd-page .bd-doc { margin-top: 8px; } .bd-page .bd-doc b, .bd-page .bd-in b { color: var(--text-strong); }
.bd-page .bd-tbl { margin: 4px 0 10px; padding: 0; font: inherit; color: inherit; background: none; border: 0; white-space: pre; overflow-x: auto; max-width: 100%; } /* SEO competitor and gap tables: scroll sideways inside the page on a phone */
.bd-page .bd-todo { display: grid; grid-template-columns: max-content max-content max-content max-content 1fr max-content max-content max-content; gap: 0 2ch; margin: 4px 0 10px; } /* SEO checklist: every page, its priority, its fields, its search, +visits */
.bd-page .bd-todo .h { color: var(--text-3); }
.bd-page .bd-todo .v, .bd-page .bd-todo .g { text-align: right; }
.bd-page .bd-tidy { grid-template-columns: max-content max-content 1fr; } /* SEO tidy-ups: page, fields, search */
.bd-page .bd-cmp { display: grid; grid-template-columns: 11ch 1fr 1fr; gap: 0 2ch; padding: 8px 0 2px 2ch; } /* SEO: a changed field, now on the site | recommended */
.bd-page .bd-cmp-h { padding-top: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.bd-page .bd-now del { color: var(--err, inherit); text-decoration: line-through; background: none; }
.bd-page .bd-new ins { text-decoration: none; background: color-mix(in srgb, var(--ok, #2a7) 18%, transparent); color: var(--text-strong); }
.bd-page .bd-why { color: var(--text-3); padding-left: calc(13ch + 2ch); margin: 2px 0 6px; } /* SEO: what was taken out of a field and why, under it */
@media (max-width: 640px) {
  .bd-page .bd-todo { display: block; } .bd-page .bd-todo .n:not(:empty)::after { content: " "; } .bd-page .bd-todo .pri:not(:empty)::after { content: " "; } .bd-page .bd-todo .pg:not(:empty) { color: var(--text-strong); font-weight: 600; }
  .bd-page .bd-todo .ch:not(:empty)::before { content: ": "; } .bd-page .bd-todo .q { display: block; padding-left: 2ch; }
  .bd-page .bd-todo .q::after { content: " · " attr(data-v) "/mo · " attr(data-pos) " · " attr(data-g); color: var(--text-3); } .bd-page .bd-todo .v, .bd-page .bd-todo .pos, .bd-page .bd-todo .g, .bd-page .bd-todo .h { display: none; } .bd-page .bd-tidy .pg::before { content: ""; display: block; } .bd-page .bd-tidy .q { display: inline; padding-left: 0; } .bd-page .bd-tidy .q::after { content: none; } .bd-page .bd-tidy .q::before { content: " · "; color: var(--text-3); } .bd-page .bd-tidy .q.h { display: none; }
  .bd-page .bd-cmp { grid-template-columns: 1fr; padding-left: 0; } .bd-page .bd-cmp-h { display: none; } .bd-page .bd-now::before { content: "now: "; color: var(--text-3); } .bd-page .bd-new::before { content: "new: "; color: var(--text-3); } .bd-page .bd-why { padding-left: 0; } }

/* Image library card (public/commands/image-library.js; prefix il-): thumbnails grid with room and source filters. */
.il-host + .il-host, .msg-b .il-host { margin-top: 12px; }
.il.card { padding: 14px 16px 16px; }
.il-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-strong); }
.il-sub { font-size: 12px; color: var(--text-3); font-weight: 400; }
.il-filters { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.il-row { display: flex; flex-wrap: wrap; gap: 6px; }
.il-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 500 12px/1 var(--font); text-transform: capitalize; cursor: pointer; }
.il-chip span { color: var(--text-3); font-weight: 400; }
.il-chip:hover:not(:disabled) { background: var(--raised); }
.il-chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); } .il-chip.on span { color: inherit; }
.il-chip:disabled { opacity: .4; cursor: default; }
.il-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-top: 14px; }
.il-cell { display: block; min-width: 0; text-decoration: none; color: var(--text-2); border-radius: 8px; outline: none; }
.il-cell:focus-visible .il-pic { box-shadow: 0 0 0 2px var(--accent); }
.il-pic { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.il-pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.il-pic img[src] { opacity: 1; }
.il-cell:hover .il-pic { border-color: var(--line-strong); }
.il-broken .il-pic { background: var(--err-soft); }
.il-pic { position: relative; }
.il-more-btn { position: absolute; right: 6px; bottom: 6px; height: 22px; padding: 0 7px; border-radius: 999px; border: 0; background: rgba(0,0,0,.62); color: #fff; font: 600 11px/22px var(--font); cursor: pointer; }
.il-more-btn:hover { background: var(--accent); }
.il-sim .il-pic { border-style: dashed; opacity: .85; }
.il-q { flex: none; color: var(--warn); font-size: 10px; font-weight: 600; }
.il-cap { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; font-size: 11px; line-height: 1.3; }
.il-txt { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-cap b { font-weight: 600; color: var(--text); text-transform: capitalize; } .il-cap i { color: var(--text-3); }
.il-more { display: flex; justify-content: center; margin-top: 12px; }
.il-none { margin: 12px 0 0 !important; }
.il-videos { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.il-vbtn { border: 0; background: none; padding: 0; color: var(--accent-text); font: 500 12px/1.4 var(--font); cursor: pointer; }
.il-videos ul { margin: 8px 0 0; padding-left: 18px; } .il-videos li { margin: 2px 0; } .il-videos a { color: var(--text); }
@media (max-width: 640px) { .il.card { padding: 12px; } .il-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .il-row { gap: 5px; } .il-chip { height: 28px; } }

/* The streamed chat answer: a soft caret after the last word while it's still being written. */
.caret { display: inline-block; width: .45em; height: 1.05em; margin-left: 2px; vertical-align: -.18em; border-radius: 1px; background: var(--accent-text); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* /metadata: the SEO plan card in a box that scrolls inside itself, so a long plan doesn't fill the chat. */
.plan-box { max-height: min(68vh, 640px); overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; }
.plan-box > .xp-slot { margin: 0; }

/* The plan card's two parts read as sections, not content: a header band with "Part 1 of 2" above a larger title. */
.xp-card .xf-part { padding-top: 20px; }
.xp-card .xf-ph.xp-sec { flex-wrap: wrap; row-gap: 2px; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); }
.xp-card .xp-sec .xp-step { flex-basis: 100%; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.xp-card .xp-sec > b { font-size: 15px; }
/* The editable recommendation: a draft field, its length and a Copy button. */
.xp-draft { display: grid; gap: 4px; }
.xp-in { width: 100%; box-sizing: border-box; resize: vertical; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--input-bg); color: var(--text-strong); font: inherit; line-height: 1.45; }
.xp-in:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.xp-draft-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.xp-copy { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; }
.xp-copy:hover, .xp-copy.on { color: var(--accent-text); border-color: var(--accent-line); }
.xp-copy svg { width: 13px; height: 13px; }
.xp-count { color: var(--text-2); font-size: 12.5px; }
.pg.done .pg-name b { color: var(--text-2); }
/* Slim navy scroll bar for the boxes that scroll inside the chat (the /metadata plan, the brain document), tight to the right. */
.plan-box, .bd-page { scrollbar-width: thin; scrollbar-color: var(--accent-line) transparent; }
.plan-box::-webkit-scrollbar, .bd-page::-webkit-scrollbar { width: 6px; }
.plan-box::-webkit-scrollbar-track, .bd-page::-webkit-scrollbar-track { background: transparent; }
.plan-box::-webkit-scrollbar-thumb, .bd-page::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 3px; }
.plan-box::-webkit-scrollbar-thumb:hover, .bd-page::-webkit-scrollbar-thumb:hover { background: var(--accent-text); }
/* The same slim navy scroll bar everywhere else (the conversation, menus, the page). */
:root { scrollbar-width: thin; scrollbar-color: var(--accent-line) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-text); }