/* ════════════════════════════════════════════════════════════════════════════
   artifacts.css — global stylesheet for every artifact surface in Kit/Artifacts.

   NOT scoped .razor.css. Zybron.UI.Web deliberately links no styles bundle
   (see App.razor comment "nothing in this app links a .styles.css bundle"),
   so a .razor.css beside a component compiles to disk but is never served.
   The initial 2026-09-09 pass at scoped CSS for Brainstorm produced an
   unstyled wall of text for exactly this reason. Corrected here.

   Global stylesheet with an unambiguous per-artifact prefix is the pattern
   this app already uses (canvas.css, tools.css). Each artifact prefixes its
   classes: bs-* for Brainstorm, spec-* for Spec, etc. — a prefix collision
   would be a build-time gap the reader can see, not a runtime style leak.

   Linked from Zybron.UI.Web/Components/App.razor as
     _content/Zybron.UI.Kit/css/artifacts.css
   Minimal v1 shape; the settled v3 visual is a follow-up rewrite.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Brainstorm ────────────────────────────────────────────────────────── */

.bs-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 40px 80px;
    max-width: 820px;
    margin: 0 auto;
    color: var(--ink, #0f1319);
    font-family: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    overflow: auto;
}

/* ── Skeleton / error ───────────────────────────────────────────────────── */
/*  While an artifact opens: the same jade ring the top bar shows while a tenant switches — one
    "working" sign across the app — centred where the artifact is about to be. The grey placeholder
    bars that stood here read as a broken page during the transition (2026-09-24). */
.bs-skeleton { display: grid; place-items: center; min-height: 42vh; padding: 32px 0; }
.bs-skeleton::before {
    content: ""; width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid rgba(15,164,127,.24); border-top-color: var(--jade, #0FA47F);
    animation: bs-spin .8s linear infinite;
}
.bs-skel { display: none; }

.bs-error {
    padding: 14px 16px;
    background: var(--red-bg, rgba(219, 79, 56, .1));
    border: 1px solid var(--red, #db4f38);
    border-radius: 8px;
}
.bs-error-hd   { font-weight: 600; margin-bottom: 4px; }
.bs-error-body { color: var(--ink-2, #3f4a5b); font-size: 13px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.bs-sec { margin-bottom: 28px; }
.bs-lbl {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-4, #9098a6);
    display: block;
    margin-bottom: 8px;
}

.bs-input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 4px 0;
    font: inherit;
    color: var(--ink, #0f1319);
    outline: none;
    resize: vertical;
}
.bs-input::placeholder { color: var(--ink-4, #9098a6); font-style: italic; }
.bs-input:disabled     { color: var(--ink-3, #6b7686); cursor: not-allowed; }
.bs-input-seed         { font-size: 17px; line-height: 1.4; min-height: 42px; }

/* ── Board ──────────────────────────────────────────────────────────────── */
.bs-board-hd    { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.bs-count       { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3, #6b7686); }
.bs-board-empty { padding: 16px; color: var(--ink-3, #6b7686); font-size: 13.5px; font-style: italic; border: 1px dashed var(--line, #e5e8ee); border-radius: 8px; }
.bs-board       { display: flex; flex-direction: column; gap: 20px; }
.bs-theme       { padding-left: 14px; border-left: 2px solid var(--ink-4, #9098a6); }
.bs-theme-hd    { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.bs-theme-name  { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.bs-theme-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-4, #9098a6); }
.bs-ideas       { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bs-idea        { display: flex; gap: 8px; align-items: center; padding: 4px 0; color: var(--ink-2, #3f4a5b); font-size: 14px; }
.bs-idea-star   { color: var(--amber, #B87508); font-size: 15px; line-height: 1; }
.bs-idea--star  { color: var(--ink, #0f1319); font-weight: 500; }
.bs-idea-text   { flex: 1; }

.bs-add {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-2, #d2d7e0);
}
.bs-btn-add {
    padding: 6px 14px;
    background: var(--jade, #0FA47F);
    color: var(--jade-ink, #fff);
    border: none;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.bs-btn-add:disabled { opacity: .35; cursor: not-allowed; }

/* ── Done section ───────────────────────────────────────────────────────── */
.bs-done-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }

/*  Identity block, now at the top. The status sits alone on its row and to the
    RIGHT, so the eye lands on the title first — the status is a property of the
    thing, not its heading. */
.bs-identity-hd { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 2px; }

/*  Export actions. Quiet — they are not what the page is for, and a print icon
    competing with the title would be the reaction-emoji mistake again. */
.bs-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: none; background: none; border-radius: 5px;
    color: var(--ink-4, #9098a6);
    cursor: pointer;
}
.bs-act:hover { background: var(--s1, #f7f8fa); color: var(--ink-2, #3f4a5b); }
.bs-act .material-symbols-outlined { font-size: 17px; }

/*  The title is the artifact's name, so it is typeset as one rather than as the
    first of three form fields that happen to be in the same box. */
.bs-input-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 4px 0;
}
.bs-field   { display: block; margin-bottom: 12px; }
.bs-field-lbl {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-4, #9098a6);
    margin-bottom: 4px;
}
.bs-field .bs-input { border-bottom: 1px solid var(--line, #e5e8ee); padding: 6px 0; }

/*  Auto-growing prose fields. The JS sets an explicit height after every render;
    these rules stop the browser fighting it — a resize grip on a box that sizes
    itself is a control that appears to do nothing, and min-height keeps an EMPTY
    field from collapsing to a line so thin the placeholder has nowhere to sit. */
.art-autogrow {
    resize: none;
    overflow-y: hidden;
    min-height: 2.6em;
}
.bs-field .bs-input:focus { border-bottom-color: var(--jade, #0FA47F); }
.bs-hint    { text-transform: none; letter-spacing: 0; color: var(--ink-4, #9098a6); font-weight: 400; }

/*  A <select> now, not a <span> — styled to keep the pill it already was, minus
    the native chrome, so the change is in what it DOES rather than in how the
    page looks. */
.bs-status {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--jade-bg, rgba(15, 164, 127, .1));
    color: var(--jade, #0FA47F);
}
.bs-status:hover:not(:disabled) { border-color: currentColor; }
.bs-status:disabled { cursor: not-allowed; opacity: .6; }
/*  Closed and parked are not jade — a finished brainstorm and a live one should
    not read the same at a glance. */
.bs-status-closed { background: var(--s1, #f2f4f7); color: var(--ink-3, #6b7686); }
.bs-status-parked { background: rgba(224, 160, 32, .12); color: #a9741a; }

/* ── Save chip ──────────────────────────────────────────────────────────── */
.bs-savechip {
    position: sticky;
    bottom: 12px;
    align-self: flex-end;
    padding: 3px 10px;
    background: var(--s2, #eef0f4);
    color: var(--ink-3, #6b7686);
    border-radius: 12px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px;
    margin: 12px 40px 0 auto;
    animation: bs-pulse 1s ease-in-out infinite;
}
@keyframes bs-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: .95; }
}

/* ── Scrubber (all artifact surfaces via ArtifactSurfaceBase) ───────────── */

.art-scrubber {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px dashed var(--s2, #eef0f4);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.art-scrubber--viewing {
    background: var(--tint-warn-bg, #fff8e6);
    padding: 12px;
    border-top: 1px solid var(--warn, #e0a020);
    border-radius: 6px;
}
.art-scrubber-empty {
    color: var(--ink-3, #6b7686);
    font-size: 12px;
    font-style: italic;
}
.art-scrubber-bar {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.art-scrubber-seg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 30px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 4px;
    background: var(--surface, #fff);
    color: var(--ink-2, #3f4a5b);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    cursor: pointer;
    transition: background .1s, border-color .1s;
}
.art-scrubber-seg:hover {
    background: var(--s1, #f7f8fa);
    border-color: var(--ink-3, #6b7686);
}
.art-scrubber-seg--ai       { border-left: 3px solid var(--accent-ai, #4a7dd0); }
.art-scrubber-seg--human    { border-left: 3px solid var(--accent-human, #6bb46b); }
.art-scrubber-seg--active   {
    background: var(--warn, #e0a020);
    color: #fff;
    border-color: var(--warn, #e0a020);
}
.art-scrubber-seg-icon { font-size: 9px; opacity: .7; }
.art-scrubber-seg-seq  { font-weight: 500; }
.art-scrubber-exit {
    height: 24px;
    padding: 0 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--warn, #e0a020);
    color: var(--warn, #e0a020);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}
.art-scrubber-exit:hover { background: var(--warn, #e0a020); color: #fff; }

/* ── Snapshot overlay (read-only view of a past iteration) ─────────────── */

.art-snapshot-overlay {
    margin-top: 16px;
    padding: 16px;
    background: var(--s1, #f7f8fa);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 6px;
}
.art-snapshot-hd {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--s2, #eef0f4);
}
.art-snapshot-hd-title {
    font-weight: 600;
    color: var(--ink-1, #1a2233);
}
.art-snapshot-hd-sub {
    margin-left: 8px;
    font-weight: 400;
    color: var(--ink-3, #6b7686);
    font-size: 12px;
}
.art-snapshot-cost {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--accent-ai, #4a7dd0);
    color: #fff;
    border-radius: 10px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
}
.art-snapshot-menu { position: relative; }
.art-snapshot-menu-btn {
    background: transparent;
    border: none;
    color: var(--ink-3, #6b7686);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}
.art-snapshot-menu-list {
    position: absolute;
    right: 0;
    top: 24px;
    background: var(--surface, #fff);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    z-index: 10;
    min-width: 200px;
}
.art-snapshot-menu-list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2, #3f4a5b);
    border-radius: 3px;
}
.art-snapshot-menu-list button:hover { background: var(--s1, #f7f8fa); }

.art-snapshot-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.art-snapshot-field {
    background: var(--surface, #fff);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 4px;
    padding: 8px 10px;
}
.art-snapshot-field--changed { border-color: var(--warn, #e0a020); }
.art-snapshot-field-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.art-snapshot-field-name {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-2, #3f4a5b);
    font-weight: 500;
}
.art-snapshot-field-tag {
    padding: 1px 6px;
    background: var(--warn, #e0a020);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
}
.art-snapshot-field-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.art-snapshot-field-btn {
    padding: 2px 8px;
    background: var(--s1, #f7f8fa);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    color: var(--ink-2, #3f4a5b);
}
.art-snapshot-field-btn:hover { background: var(--s2, #eef0f4); }
.art-snapshot-field-btn--forward {
    background: var(--accent-human, #6bb46b);
    color: #fff;
    border-color: var(--accent-human, #6bb46b);
}
.art-snapshot-field-btn--forward:hover { filter: brightness(1.08); }
.art-snapshot-field-value {
    margin: 0;
    padding: 6px 8px;
    background: var(--s1, #f7f8fa);
    border-radius: 3px;
    color: var(--ink-1, #1a2233);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow: auto;
}

/* ── Reaction badge (thumbs-up on artifact items) ──────────────────────── */

.art-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px;
    background: var(--surface, #fff);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 10px;
    color: var(--ink-3, #6b7686);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .1s, border-color .1s, color .1s;
}
.art-reaction:hover { background: var(--s1, #f7f8fa); border-color: var(--ink-3, #6b7686); }
.art-reaction--mine {
    background: var(--accent-human, #6bb46b);
    color: #fff;
    border-color: var(--accent-human, #6bb46b);
}
.art-reaction--mine:hover { filter: brightness(1.05); }
.art-reaction--disabled {
    opacity: .5;
    cursor: not-allowed;
    background: var(--s1, #f7f8fa);
}
.art-reaction-icon  { font-size: 13px; line-height: 1; }

/*  A reaction nobody has used yet is not information. It waits for the row to be
    hovered and then offers itself, so fifteen ideas read as fifteen ideas rather
    than as fifteen ideas and fifteen buttons. Anything with a vote on it — or your
    own vote — stays visible always, because THAT is information.

    The universal parent selector keeps this generic: any artifact whose rows put a
    badge as a direct child gets the behaviour without naming its own classes. */
.art-reaction--empty {
    opacity: 0;
    border-color: transparent;
    background: transparent;
    transition: opacity .12s ease;
}
*:hover > .art-reaction--empty,
.art-reaction--empty:hover,
.art-reaction--empty:focus-visible { opacity: 1; }

/*  Touch has no hover, so a permanently invisible control is an unreachable one.
    Faint rather than absent. */
@media (hover: none) {
    .art-reaction--empty { opacity: .4; }
}
.art-reaction-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }

/* ── Live collaboration strip (presence roster + edit lock indicator) ─── */

.art-collab-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: var(--s1, #f7f8fa);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 12px;
}
.art-collab-roster {
    display: flex;
    gap: -6px;
}
.art-collab-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-human, #6bb46b);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    border: 2px solid var(--s1, #f7f8fa);
    margin-left: -6px;
}
.art-collab-avatar:first-child { margin-left: 0; }
.art-collab-avatar--more {
    background: var(--ink-3, #6b7686);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.art-collab-lock {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.art-collab-lock-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.art-collab-lock-badge--mine  { background: var(--accent-human, #6bb46b); color: #fff; }
.art-collab-lock-badge--other { background: var(--warn, #e0a020); color: #fff; }
.art-collab-lock-badge--free  { background: var(--s2, #eef0f4); color: var(--ink-3, #6b7686); }
.art-collab-lock-btn {
    padding: 3px 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--s2, #eef0f4);
    border-radius: 4px;
    color: var(--ink-2, #3f4a5b);
    font-size: 11px;
    cursor: pointer;
}
.art-collab-lock-btn:hover { background: var(--s1, #f7f8fa); border-color: var(--ink-3, #6b7686); }

/* ── Brainstorm: star and delete are buttons now (one-item edits on the base) ── */
.bs-idea-star { background: none; border: none; cursor: pointer; color: var(--line-2, #D2D7E0); font-size: 13px; padding: 0 4px 0 0; line-height: 1; }
.bs-idea-star.on { color: var(--amber, #B87508); }
.bs-idea-star:hover:not(:disabled) { color: var(--amber, #B87508); }
.bs-idea-del { background: none; border: none; cursor: pointer; color: var(--ink-4, #8A93A3); font-size: 11px; padding: 0 0 0 6px; opacity: 0; line-height: 1; }
.bs-idea:hover .bs-idea-del { opacity: 1; }
.bs-idea-del:hover:not(:disabled) { color: var(--red, #DB4F38); }
.bs-idea-star:disabled, .bs-idea-del:disabled { cursor: default; }
.bs-board-error { color: var(--red, #DB4F38); border-color: var(--red, #DB4F38); }

/* ── Export buttons: running and done states (driven by ArtifactSurfaceBase) ── */
.bs-act.busy { color: var(--jade, #0FA47F); }
.bs-act.busy .material-symbols-outlined { animation: bs-spin 0.9s linear infinite; }
.bs-act.done { color: var(--jade, #0FA47F); background: var(--jade-bg, rgba(15,164,127,.10)); }
.bs-act:disabled { cursor: default; opacity: .9; }
@keyframes bs-spin { to { transform: rotate(360deg); } }

/* ── Brainstorm: starred ideas promoted above the board ── */
.bs-starred { border: 1px solid #e2c97a; background: #fffbea; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.bs-starred .bs-theme-name { color: var(--amber, #B87508); }
.bs-idea-from { font-size: 11px; color: var(--ink-4, #8A93A3); margin-left: 8px; white-space: nowrap; }

/* ── Brainstorm: inline editing of theme names and idea text ── */
.bs-editable { cursor: text; border-bottom: 1px dashed transparent; }
.bs-editable:hover { border-bottom-color: var(--line-2, #D2D7E0); }
.bs-inline { padding: 2px 6px; font-size: inherit; line-height: 1.4; min-height: 0; flex: 1; }
.bs-inline-theme { font-size: 15px; font-weight: 600; width: auto; min-width: 200px; }

/* ── History timeline (replaces the row of segment buttons) ── */
/* The track on its own line, the caption beneath it. The scrubber's container is a
   wrapping row (for the older segment bar), which set the caption beside the dots. */
.art-scrubber.art-tl { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; }
.art-tl-track { position: relative; display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 6px; outline: none; }
.art-tl-track:focus-visible { box-shadow: 0 0 0 2px var(--jade-ring, rgba(15,164,127,.28)); border-radius: 8px; }
.art-tl-line { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: var(--line-2, #D2D7E0); transform: translateY(-50%); }
.art-tl-node { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg, #fff); background: var(--line-2, #D2D7E0); padding: 0; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.art-tl-node.ai    { background: var(--accent-ai, #4a7dd0); }
.art-tl-node.human { background: var(--accent-human, #6bb46b); }
.art-tl-node.live  { background: var(--jade, #0FA47F); width: 14px; height: 14px; }
.art-tl-node:hover { transform: scale(1.35); }
.art-tl-node.active { transform: scale(1.6); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.art-tl-caption { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 11.5px; color: var(--ink-3, #6B7686); flex-wrap: wrap; }
.art-tl-pos  { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.art-tl-key  { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.art-tl-key.ai    { background: var(--accent-ai, #4a7dd0); }
.art-tl-key.human { background: var(--accent-human, #6bb46b); }
.art-tl .art-scrubber-exit { margin-left: auto; }

/* ── A3 Planner ─────────────────────────────────────────────────────────── */
.a3-card { max-width: 1040px; }
.a3-ready { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4, #8A93A3); margin-right: auto; padding: 3px 8px; border: 1px solid var(--line, #E5E8EE); border-radius: 999px; }
.a3-ready--full { color: var(--jade, #0FA47F); border-color: var(--jade, #0FA47F); }
.a3-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .a3-cols { grid-template-columns: 1fr; } }
.a3-colhead { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4, #8A93A3); border-bottom: 1px solid var(--line, #E5E8EE); padding-bottom: 4px; margin: 4px 0 12px; }
.a3-sec { margin-bottom: 18px; }
.a3-sec-label { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.a3-sec-label .n { color: var(--ink-4, #8A93A3); font-weight: 400; }
.a3-sec-label .field { font-size: 11.5px; font-weight: 400; color: var(--ink-4, #8A93A3); }
.a3-text { width: 100%; border-bottom: 1px solid var(--line, #E5E8EE); padding: 6px 0; }
.a3-text:focus { border-bottom-color: var(--jade, #0FA47F); }
.a3-sec-proposal .a3-text { font-size: 15.5px; line-height: 1.5; }
.a3-list-empty { font-size: 12.5px; color: var(--ink-4, #8A93A3); font-style: italic; }
.a3-item-meta { font-size: 11px; color: var(--ink-4, #8A93A3); margin-left: 8px; white-space: nowrap; }
.a3-add { margin-top: 6px; }
/* A wide list runs the full width of the sheet: the sentence, then one cell per column. */
.a3-sec-plan { border-top: 1px solid var(--line, #E5E8EE); padding-top: 14px; }
.a3-list--wide .bs-idea { align-items: baseline; border-bottom: 1px solid var(--line, #E5E8EE); padding: 6px 0; }
.a3-group { list-style: none; font-size: 13px; font-weight: 600; color: var(--ink, #0f1319); padding: 12px 0 4px; border-bottom: 1px solid var(--line-2, #D2D7E0); }
.a3-item-col { font-size: 12px; color: var(--ink-3, #6b7686); flex: 0 0 auto; }
.a3-cell-empty { color: transparent; font-style: italic; }
.bs-idea:hover .a3-cell-empty.bs-editable { color: var(--line-2, #D2D7E0); }
.a3-cell-input { width: 100%; font-size: 12px; }
.a3-colhdr { display: flex; gap: 8px; padding: 0 17px 4px 21px; border-bottom: 1px solid var(--line-2, #D2D7E0); }
.a3-colhdr-text { flex: 1; }
.a3-colhdr .a3-item-col { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
@media (max-width: 720px) { .a3-colhdr { display: none; } .a3-list--wide .bs-idea-text { flex-basis: 80%; } .a3-item-col { width: auto !important; margin-left: 22px; } }
.a3-status-draft { }
.a3-status-review { background: rgba(224,160,32,.12); color: #a9741a; }
.a3-status-approved { background: var(--jade-bg, rgba(15,164,127,.10)); color: var(--jade, #0FA47F); }
.a3-status-closed { background: var(--s1, #f2f4f7); color: var(--ink-3, #6b7686); }

/* ── Launch Configuration ──────────────────────────────────────────────── */
.lc2-card { max-width: 1040px; }
.lc2-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.lc2-unsupported { opacity: .55; }
.lc2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #E5E8EE); margin: 6px 0 16px; overflow-x: auto; }
.lc2-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 10px; font-size: 13px; color: var(--ink-3, #6B7686); cursor: pointer; white-space: nowrap; position: relative; }
.lc2-tab .n { color: var(--ink-4, #8A93A3); margin-right: 4px; }
.lc2-tab.on { color: var(--ink, #0F1319); border-bottom-color: var(--jade, #0FA47F); font-weight: 600; }
.lc2-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber, #B87508); margin-left: 6px; vertical-align: middle; }
.lc2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
@media (max-width: 720px) { .lc2-grid { grid-template-columns: 1fr; } }
.lc2-f { display: block; }
.lc2-f .bs-input { width: 100%; border-bottom: 1px solid var(--line, #E5E8EE); padding: 6px 0; }
.lc2-modes-row { margin: 4px 0; }
.lc2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lc2-kpi { border: 1px solid var(--line, #E5E8EE); border-radius: 8px; padding: 8px 10px; background: var(--s1, #F7F8FA); text-align: left; cursor: pointer; }
.lc2-kpi b { display: block; font-size: 18px; } .lc2-kpi span { font-size: 11px; color: var(--ink-4, #8A93A3); }
.lc2-kpi.missing b { color: var(--amber, #B87508); }
.lc2-sliders { display: grid; gap: 8px; margin: 8px 0; }
.lc2-sliders label { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12.5px; align-items: center; }
.lc2-sliders label input[type=range] { grid-column: 1 / -1; width: 100%; }
.lc2-mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #eef0f3; margin: 8px 0; }
.lc2-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lc2-totals > div { border: 1px solid var(--line, #E5E8EE); border-radius: 8px; padding: 8px 10px; }
.lc2-totals b { display: block; font-size: 16px; } .lc2-totals small { color: var(--ink-4, #8A93A3); font-size: 11px; }
.lc2-gis { min-height: 320px; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; overflow: hidden; }
.lc2-flags { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.lc2-flag code { color: var(--ink-4, #8A93A3); font-size: 11px; margin-left: 4px; }
/* ── One campaign, two Metropia systems (LaunchConfig-Two-Systems.md) ──────────────────────────────
   The Mechanic tabs are OUTPUTS — read-only, computed from the three pages. Page ②'s reward settings and the
   Advanced sections are where everything those outputs hold is set by hand. */
.lc2-sys { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.lc2-sys.mw { background: rgba(37, 99, 235, .10); color: #1D4ED8; }
.lc2-sys.cs { background: rgba(202, 154, 4, .14); color: #8A6A03; }
.lc2-modes-sep { align-self: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); margin: 0 4px 0 8px; }
.lc2-check { display: flex; align-items: flex-start; gap: 8px; grid-column: 1 / -1; font-size: 13px; padding-top: 6px; }
.lc2-check em { color: var(--ink-4, #8A93A3); font-style: normal; }

.lc2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.lc2-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line, #E5E8EE); }
.lc2-table td { padding: 2px 8px 2px 0; border-bottom: 1px dashed var(--line, #E5E8EE); vertical-align: middle; }
.lc2-table td .bs-input { width: 100%; min-width: 58px; padding: 5px 0; border: none; background: none; font-variant-numeric: tabular-nums; }
.lc2-table td.over .bs-input { color: #C6283C; font-weight: 700; }
.lc2-table td.sum { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2, #3F4A5B); }
.lc2-table tr.off { opacity: .45; }
.lc2-x { background: none; border: none; cursor: pointer; color: var(--ink-4, #8A93A3); line-height: 0; padding: 2px; border-radius: 6px; }
.lc2-x:hover:not(:disabled) { color: #C6283C; }
.lc2-x .material-symbols-outlined { font-size: 16px; }

.lc2-adv { margin-top: 14px; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 0 12px; }
.lc2-adv[open] { padding-bottom: 12px; }
.lc2-adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 9px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2, #3F4A5B); }
.lc2-adv > summary::-webkit-details-marker { display: none; }
.lc2-adv > summary .material-symbols-outlined { font-size: 16px; color: var(--ink-4, #8A93A3); }
.lc2-adv-state { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--ink-4, #8A93A3); }
.lc2-adv-foot { display: flex; gap: 14px; margin-top: 8px; }

.lc2-out-state { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 10px; background: var(--surface-2, #F7F8FA); }
.lc2-out-state .material-symbols-outlined { font-size: 18px; }
.lc2-out-state.ok { background: rgba(15, 164, 127, .09); } .lc2-out-state.ok .material-symbols-outlined { color: #0FA47F; }
.lc2-out-state.open .material-symbols-outlined { color: #CA9A04; } .lc2-out-state.na .material-symbols-outlined { color: var(--ink-4, #8A93A3); }
.lc2-out-state em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-4, #8A93A3); }
.lc2-out-issues { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12.5px; }
.lc2-out-issues li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line, #E5E8EE); }
.lc2-out-issues li > span { width: 14px; flex: none; text-align: center; font-weight: 700; color: #DB4F38; }
.lc2-out-issues li.note > span { color: var(--ink-4, #8A93A3); font-style: italic; }
.lc2-out-issues li b { flex: none; } .lc2-out-issues li em { font-style: normal; color: var(--ink-3, #6B7686); flex: 1; }
.lc2-out-src { margin-bottom: 10px; font-size: 12px; }
.lc2-out-src > summary { cursor: pointer; color: var(--ink-3, #6B7686); padding: 4px 0; }
.lc2-out-src table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.lc2-out-src th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); padding: 3px 8px 3px 0; }
.lc2-out-src td { padding: 4px 8px 4px 0; border-top: 1px dashed var(--line, #E5E8EE); vertical-align: top; }
.lc2-out-src code { font-size: 10.5px; color: var(--ink-3, #6B7686); overflow-wrap: anywhere; }
.lc2-out-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bs-act-wide { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer; background: #0FA47F; border: 1px solid #0FA47F; color: #fff; }
.bs-act-wide.quiet { background: none; color: var(--ink-2, #3F4A5B); border-color: var(--line, #E5E8EE); }
.bs-act-wide:disabled { opacity: .45; cursor: default; }
.bs-act-wide .material-symbols-outlined { font-size: 16px; }

.lc2-midway { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; margin-bottom: 10px; width: 100%; }
.lc2-midway > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc2-midway b { font-size: 13px; } .lc2-midway em { font-style: normal; font-size: 12px; color: var(--ink-3, #6B7686); }
.lc2-midway .material-symbols-outlined { font-size: 20px; color: var(--ink-4, #8A93A3); }
.lc2-midway.ok .material-symbols-outlined { color: #0FA47F; } .lc2-midway.off .material-symbols-outlined { color: #CA9A04; }
.lc2-refused { width: 100%; border: 1px solid #DB4F38; background: rgba(219, 79, 56, .05); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; }
.lc2-refused p { margin: 4px 0 0; } .lc2-refused ul { margin: 6px 0 0; padding-left: 16px; } .lc2-refused code { font-size: 11px; }

.lc2-derived { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-size: 12.5px; margin-bottom: 10px; }
.lc2-derived > div { display: flex; gap: 8px; align-items: baseline; border-bottom: 1px dashed var(--line, #E5E8EE); padding: 3px 0; }
.lc2-derived span { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; color: var(--ink-4, #8A93A3); }
.lc2-derived em { margin-left: auto; font-size: 10.5px; color: var(--ink-4, #8A93A3); }
.lc2-json { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; background: var(--s1, #F7F8FA); border: 1px solid var(--line, #E5E8EE); border-radius: 8px; padding: 10px; overflow: auto; max-height: 360px; }
.lc2-checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.lc2-checks li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.lc2-checks li.ok span { color: var(--jade, #0FA47F); } .lc2-checks li.bad span { color: var(--amber, #B87508); }
.lc2-checks em { color: var(--ink-4, #8A93A3); font-style: normal; }
.lc2-launch { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lc2-arm { font-size: 13px; }
.lc2-status-launched { background: var(--jade-bg, rgba(15,164,127,.10)); color: var(--jade, #0FA47F); }
.lc2-status-stopped { background: var(--s1, #f2f4f7); color: var(--ink-3, #6b7686); }

/* ── Launch key + rocket (ported from the canvas card's launch gate) ── */
.lc2-key { display: inline-flex; align-items: center; gap: 8px; background: var(--bg, #fff); border: 1px solid var(--line, #E5E8EE); border-radius: 9999px; padding: 5px 12px 5px 6px; font-size: 12px; font-weight: 700; color: var(--ink-3, #6B7686); cursor: pointer; }
.lc2-key:disabled { cursor: not-allowed; opacity: .6; }
.lc2-key-slot { display: inline-flex; align-items: center; width: 44px; height: 22px; border-radius: 9999px; background: #eef0f3; border: 1px solid var(--line, #E5E8EE); padding: 2px; transition: background .2s; }
.lc2-key-tick { width: 18px; height: 16px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); font-size: 8px; line-height: 16px; text-align: center; color: transparent; transition: transform .2s, color .2s; }
.lc2-key.armed { color: var(--jade, #0FA47F); border-color: var(--jade, #0FA47F); }
.lc2-key.armed .lc2-key-slot { background: var(--jade-bg, rgba(15,164,127,.18)); }
.lc2-key.armed .lc2-key-tick { transform: translateX(20px); color: var(--jade, #0FA47F); }
.lc2-rocket { display: inline-flex; align-items: center; gap: 6px; background: var(--s1, #F7F8FA); border: 1px solid var(--line, #E5E8EE); color: var(--ink-4, #8A93A3); padding: 7px 16px; border-radius: 9999px; font-size: 12.5px; font-weight: 700; cursor: not-allowed; font-family: inherit; }
.lc2-rocket .material-symbols-outlined { font-size: 17px; }
.lc2-rocket.armed { background: linear-gradient(135deg, #0FA47F, #14B8A6); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(15,164,127,.35); cursor: pointer; }
.lc2-rocket.armed:hover { box-shadow: 0 8px 22px rgba(15,164,127,.45); transform: translateY(-1px); }
.lc2-rocket.firing { animation: lc2-shake .09s linear infinite; cursor: default; background: linear-gradient(135deg, #0FA47F, #14B8A6); color: #fff; border-color: transparent; }
.lc2-rocket.firing .material-symbols-outlined { animation: lc2-liftoff 1.15s cubic-bezier(.4,0,.75,0) forwards; }
@keyframes lc2-shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1px,.5px); } 75% { transform: translate(1px,-.5px); } }
@keyframes lc2-liftoff { 0% { transform: translateY(0) scale(1); opacity: 1; } 22% { transform: translateY(3px) scale(.97); opacity: 1; } 100% { transform: translateY(-96px) scale(.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lc2-rocket.firing { animation: none; } .lc2-rocket.firing .material-symbols-outlined { animation: none; } }
/* confetti particles — the JS module creates .lc-confetti > i on body; keep the rule here so it works outside the canvas shell */
.lc-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.lc-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; transform: translate(-50%,-50%); animation: lc2-confetti var(--dur, 2s) cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes lc2-confetti { 0% { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; } }
.a3-item-detail { flex-basis: 100%; font-size: 11.5px; color: var(--ink-4, #8A93A3); padding-left: 22px; margin-top: -2px; }
.bs-idea { flex-wrap: wrap; }

/* ── Launch configuration: the canvas card's budget panel, inside an artifact surface ──
   canvas.css scopes that panel's rules to ".zc-shell .zc-lc". The surface wraps the panel
   in both classes so those rules apply unchanged — one copy of the design — and this
   undoes what .zc-shell means for the CANVAS (a fixed, full-window, flex shell) and maps
   the --zc-* tokens the panel reads onto this surface's own, so it follows the same theme. */
.zc-shell.lc2-shell {
    position: static; inset: auto; z-index: auto; overflow: visible; display: block;
    background: none; color: inherit; font-family: inherit; font-size: inherit;
    --zc-text: var(--ink, #0F1319); --zc-text-2: var(--ink-2, #3F4A5B); --zc-text-3: var(--ink-3, #6B7686); --zc-text-4: var(--ink-4, #8A93A3);
    --zc-border: var(--line, #E5E8EE); --zc-surface: var(--bg, #fff); --zc-surface-2: var(--s1, #F7F8FA); --zc-surface-3: var(--s2, #EEF0F4);
    --zc-jade: var(--jade, #0FA47F); --zc-jade-bg: var(--jade-bg, rgba(15,164,127,.10)); --zc-jade-ring: var(--jade-ring, rgba(15,164,127,.28));
    --zc-tone-jade: var(--jade, #0FA47F); --zc-tone-jade-bg: var(--jade-bg, rgba(15,164,127,.10));
    --zc-tone-teal: #14B8A6; --zc-tone-amber: var(--amber, #B87508); --zc-tone-amber-bg: rgba(184,117,8,.10);
    --zc-tone-red: var(--red, #DB4F38); --zc-tone-red-bg: rgba(219,79,56,.10);
    --zc-tone-blue: #2563EB; --zc-tone-blue-bg: rgba(37,99,235,.08); --zc-tone-violet: #7C3AED; --zc-tone-violet-bg: rgba(124,58,237,.08);
    --zc-mono: var(--mono, ui-monospace, Menlo, monospace);
}
.zc-shell.lc2-shell .zc-lc { min-width: 0; }

/* The Atlas embed inside the surface's Targeting tab. canvas.css gives .gis-map its frame
   and the embed its two-column grid; a full GIS page wants more height than a canvas card.
   atlas.css hides the floating draw toolbar only inside an expanded canvas card, so the same
   is said here: hidden while idle (the panel's tool row is the entry point), back while
   drawing, because it holds Undo point / Finish / Cancel for the shape under the cursor. */
.zc-shell.lc2-shell { --zc-r-sm: 12px; }
.zc-shell.lc2-shell .zc-lc .gis-map.lc2-gis-map { min-height: min(68vh, 640px); }
.zc-shell.lc2-shell .zc-lc .gis-main { min-height: min(68vh, 640px); }
.zc-shell.lc2-shell .atlas-gis-embed .atlas-gis-toolbar { display: none; }
.zc-shell.lc2-shell .atlas-gis-embed.is-drawing .atlas-gis-toolbar { display: flex; }
.zc-shell.lc2-shell .atlas-gis-embed .atlas-gis-hint { display: block; }

/* ── GIS Map: the map IS the page ─────────────────────────────────────────────────
   Every other surface is a column of text and takes a reading width (820-1040px). A map
   in a reading column is a map with two empty margins and a stack of fields on its head.
   This card takes the width of the page; the map starts at the top and takes the height
   of the window (what is left under the app's header and above the composer); and the
   map's name, purpose, status and notes are part of Atlas's own menu at its left — above
   and below the region search and library — so nothing sits over or beside the map. */
.bs-card.gm-card { max-width: none; width: 100%; padding: 10px 16px 72px; }
.zc-shell.lc2-shell .zc-lc .gis-main.lc2-gis-main--page,
.zc-shell.lc2-shell .zc-lc .gis-map.lc2-gis-map.lc2-gis-map--page { min-height: max(520px, calc(100vh - 190px)); }
/* The menu is wider on this page: it carries the map's own attributes as well as the library. */
.zc-shell.lc2-shell .zc-lc .gis-map.lc2-gis-map--page .atlas-gis-embed { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) { .zc-shell.lc2-shell .zc-lc .gis-map.lc2-gis-map--page .atlas-gis-embed { grid-template-columns: minmax(0, 1fr); } }
.atlas-gis-embed-host { padding: 4px 2px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--zc-border, #E5E8EE); }
.atlas-gis-embed-host--foot { margin: 10px 0 0; padding: 10px 2px 4px; border-bottom: none; border-top: 1px solid var(--zc-border, #E5E8EE); }
.gm-menu { display: flex; flex-direction: column; gap: 8px; }
.gm-menu-hd { display: flex; align-items: center; gap: 6px; }
.gm-menu-hd .a3-ready { margin-right: auto; }
.gm-menu-name { font-size: 16px; font-weight: 600; width: 100%; border-bottom: 1px solid var(--line, #E5E8EE); padding: 4px 0; }
.gm-menu-text { font-size: 12.5px; line-height: 1.45; width: 100%; border-bottom: 1px solid var(--line, #E5E8EE); padding: 4px 0; }
.gm-menu-name:focus, .gm-menu-text:focus { border-bottom-color: var(--jade, #0FA47F); }
.gm-menu .bs-status { align-self: flex-start; }
.gm-menu-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #6B7686); }

/* The zone-count badge is pinned to the frame's bottom-left, which is where Atlas's menu
   is, so it covered the end of the region library. It belongs over the MAP: past the
   menu's width. On the GIS Map the menu already says "On this map · N", so it is dropped. */
.zc-shell.lc2-shell .zc-lc .gis-map-badge { left: 250px; }
.zc-shell.lc2-shell .zc-lc .gis-map.lc2-gis-map--page .gis-map-badge { display: none; }
@media (max-width: 900px) { .zc-shell.lc2-shell .zc-lc .gis-map-badge { left: 8px; } }
/* A map's name wraps rather than being cut off: "Downtown Houston boundary (I-45 / I-10 / US-59)". */
textarea.gm-menu-name { resize: none; overflow: hidden; line-height: 1.3; min-height: 0; }

/* ── Image artifact (im-*) — a picture with a history ──────────────────────── */
.im-card { display:flex; flex-direction:column; gap:14px; }
.im-head { display:flex; align-items:flex-start; gap:10px; }
.im-head .bs-input-title { flex:1 1 auto; }
.im-acts { display:flex; gap:4px; flex:0 0 auto; }
.im-body { display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap:20px; align-items:start; }
@media (max-width: 900px) { .im-body { grid-template-columns: 1fr; } }

.im-stage { display:flex; flex-direction:column; gap:10px; min-width:0; }
.im-figure { margin:0; border:1px solid var(--line, #e5e8ee); border-radius:12px; overflow:hidden; background:var(--s1, #f7f8fa); }
.im-figure a { display:block; line-height:0; }
.im-figure img { display:block; width:100%; height:auto; max-height:640px; object-fit:contain; background:var(--s1, #f7f8fa); cursor:zoom-in; }
.im-figure figcaption { display:flex; align-items:center; gap:10px; padding:6px 8px 6px 12px; font-size:12px; color:var(--ink-3, #6b7686); }
.im-ver { font-weight:700; color:var(--ink-2, #3f4a5b); }
.im-meta { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.im-download { text-decoration:none; }
.im-prompt { font-size:13px; color:var(--ink-2, #3f4a5b); }
.im-prompt summary { cursor:pointer; color:var(--ink-3, #6b7686); font-size:12px; }
.im-prompt p { margin:6px 0 0; line-height:1.5; white-space:pre-wrap; }
.im-revised { color:var(--ink-3, #6b7686); }
.im-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:280px;
            border:1px dashed var(--line, #e5e8ee); border-radius:12px; color:var(--ink-3, #6b7686); font-size:13px; }
.im-empty .material-symbols-outlined { font-size:40px; opacity:.5; }

.im-strip { display:flex; gap:8px; flex-wrap:wrap; }
.im-thumb { position:relative; width:84px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden;
            background:var(--s1, #f7f8fa); cursor:pointer; line-height:0; }
.im-thumb img { display:block; width:100%; height:64px; object-fit:cover; }
.im-thumb span { position:absolute; left:4px; bottom:4px; font:600 10px system-ui; color:#fff; background:rgba(0,0,0,.55); padding:1px 5px; border-radius:6px; }
.im-thumb.is-current { border-color:var(--jade, #10b981); cursor:default; }
.im-thumb:disabled:not(.is-current) { opacity:.6; cursor:not-allowed; }

.im-brief { display:flex; flex-direction:column; gap:6px; }
.im-label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3, #6b7686); margin-top:8px; }
.im-text { min-height:60px; }
.im-select { height:36px; }
.im-draw { margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px;
           border:0; border-radius:10px; background:var(--ink, #1a2230); color:#fff; font:600 14px system-ui; cursor:pointer; }
.im-draw:hover:not(:disabled) { filter:brightness(1.12); }
.im-draw:disabled { opacity:.45; cursor:not-allowed; }
.im-draw .material-symbols-outlined { font-size:18px; }
.im-spin { animation: im-spin 1s linear infinite; }
@keyframes im-spin { to { transform: rotate(360deg); } }
.im-draw-error { margin-top:6px; }
.im-hint { margin:4px 0 0; font-size:12px; color:var(--ink-3, #6b7686); }

.im-thumb-wrap { position:relative; }
.im-ref { position:absolute; top:4px; right:4px; width:22px; height:22px; display:grid; place-items:center;
          border-radius:6px; background:rgba(255,255,255,.85); color:var(--ink-3, #6b7686); cursor:pointer; }
.im-ref input { position:absolute; opacity:0; width:0; height:0; }
.im-ref .material-symbols-outlined { font-size:15px; }
.im-ref.is-on { background:var(--jade, #10b981); color:#fff; }

/* ── Document ───────────────────────────────────────────────────────────
   A document a person reads or presents. Flow = the composer wearing the
   document look; Paged = a sorter of Marp thumbnails and ONE slide frame with
   the editor inside it. The slide theme itself is injected by
   document-render.mjs (one theme, emitted for the editor and for Marp), so
   only the chrome lives here. Prefix doc-. */
/* Rides on .bs-card (centred, padded, scrolls) like every other artifact; only the width differs. */
.doc-card { max-width: 1180px; }
.doc-card--saving { opacity: .92; }

/* The bar: one row, 36px, everything the old three rows held. */
.doc-bar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line, #e5e8ee); flex-wrap: wrap; }
.doc-bar-title { flex: 1 1 220px; min-width: 160px; border: 0; background: transparent; color: var(--ink, #0f1319); font-size: 17px; font-weight: 600; letter-spacing: -.01em; padding: 4px 0; outline: none; }
.doc-bar-title::placeholder, .doc-bar-summary::placeholder { color: var(--ink-4, #9098a6); font-weight: 400; font-style: italic; }
.doc-bar-summary { flex: 2 1 260px; min-width: 180px; border: 0; border-left: 1px solid var(--line, #e5e8ee); background: transparent; color: var(--ink-2, #3f4a5b); font-size: 13px; padding: 4px 0 4px 10px; outline: none; }
.doc-bar-title:focus, .doc-bar-summary:focus { box-shadow: inset 0 -1px 0 var(--jade, #0FA47F); }
.doc-bar-title:disabled, .doc-bar-summary:disabled { color: var(--ink-3, #6b7686); }
.doc-bar-spacer { flex: 0 0 4px; }
.doc-status-template { background: rgba(124, 58, 237, .10); color: #6d28d9; }
.doc-status-draft    { background: var(--jade-bg, rgba(15, 164, 127, .1)); color: var(--jade, #0FA47F); }
.doc-status-review   { background: rgba(224, 160, 32, .12); color: #a9741a; }
.doc-status-final    { background: var(--s1, #f2f4f7); color: var(--ink-3, #6b7686); }

.doc-seg { display: inline-flex; border: 1px solid var(--line, #e5e8ee); border-radius: 6px; overflow: hidden; }
.doc-seg button { border: 0; background: var(--s1, #f7f8fa); color: var(--ink-2, #3f4a5b); font: inherit; font-size: 12.5px; padding: 4px 12px; cursor: pointer; }
.doc-seg button + button { border-left: 1px solid var(--line, #e5e8ee); }
.doc-seg button[aria-pressed="true"] { background: var(--jade, #0FA47F); color: #fff; }
.doc-seg button:disabled { cursor: not-allowed; opacity: .6; }
.doc-select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line, #e5e8ee); border-radius: 6px; background: var(--s1, #f7f8fa); color: var(--ink-2, #3f4a5b); }

/* Flow: the document on paper. Overrides the dark editor defaults in tools.css. */
.doc-doc .tiptap-editor-wrapper { background: #fbfbf9; border-color: var(--line, #e5e8ee); }
.doc-doc .tiptap-editor-area .tiptap-content,
.doc-doc .tiptap-rendered-content {
    color: #1d1d1b; background: #fbfbf9;
    font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 16px; line-height: 1.6;
    padding: 32px 56px; max-width: 78ch; margin: 0 auto; min-height: 60vh;
}
.doc-doc .tiptap-content h1, .doc-doc .tiptap-rendered-content h1 { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 28px; color: #2f6f8f; border-bottom: 2px solid #2f6f8f; padding-bottom: 6px; margin: 0 0 14px; }
.doc-doc .tiptap-content h2, .doc-doc .tiptap-rendered-content h2 { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 20px; color: #2f6f8f; margin: 26px 0 8px; }
.doc-doc .tiptap-content h3, .doc-doc .tiptap-rendered-content h3 { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; margin: 18px 0 6px; }
.doc-doc .tiptap-content hr { border: 0; border-top: 1px dashed #2f6f8f; margin: 28px 0; position: relative; }
.doc-doc .tiptap-content hr::after { content: "page break"; position: absolute; right: 0; top: -9px; font: 10.5px "IBM Plex Mono", ui-monospace, monospace; color: #2f6f8f; background: #fbfbf9; padding: 0 6px; }
.doc-doc .tiptap-content table, .doc-doc .tiptap-rendered-content table { border-collapse: collapse; }
.doc-doc .tiptap-content td, .doc-doc .tiptap-content th, .doc-doc .tiptap-rendered-content td, .doc-doc .tiptap-rendered-content th { border: 1px solid #d9d9d3; padding: 4px 8px; }
.doc-doc .tiptap-content th, .doc-doc .tiptap-rendered-content th { background: #eef3f6; }
.doc-doc .tiptap-content img, .doc-doc .tiptap-rendered-content img { max-width: 100%; border-radius: 6px; }
.doc-doc .tiptap-toolbar { background: var(--s1, #f7f8fa); border-bottom: 1px solid var(--line, #e5e8ee); padding: 2px 6px; gap: 0; }
.doc-doc .tiptap-toolbar button { color: var(--ink-2, #3f4a5b); padding: 3px 5px; min-width: 26px; height: 26px; font-size: 11.5px; }
.doc-doc .tiptap-toolbar button .material-symbols-outlined { font-size: 17px; }
.doc-doc .tiptap-separator { height: 16px; margin: 0 3px; }

/* Paged: sorter + stage */
.doc-deck { display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; min-height: 520px; height: 62vh; }
@media (max-width: 760px) { .doc-deck { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; } .doc-sorter { flex-direction: row; overflow-x: auto; } }
.doc-sorter { display: flex; flex-direction: column; gap: 10px; overflow: auto; padding: 2px; }
.doc-thumb { position: relative; flex: none; width: 160px; border: 2px solid var(--line, #e5e8ee); border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; }
.doc-thumb[aria-current="true"] { border-color: var(--jade, #0FA47F); box-shadow: 0 0 0 3px var(--jade-bg, rgba(15, 164, 127, .15)); }
.doc-thumb .marpit { pointer-events: none; }
.doc-thumb::after { content: attr(title); position: absolute; right: 5px; bottom: 3px; font: 10.5px "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-3, #6b7686); background: rgba(255,255,255,.85); padding: 0 5px; border-radius: 3px; }
.doc-thumb-add { flex: none; width: 160px; padding: 8px; border: 1px dashed var(--line, #e5e8ee); border-radius: 6px; background: none; color: var(--ink-4, #9098a6); font: inherit; font-size: 12.5px; cursor: pointer; }
.doc-thumb-add:hover:not(:disabled) { color: var(--ink-2, #3f4a5b); border-color: var(--ink-4, #9098a6); }
.doc-thumb-add:disabled { cursor: not-allowed; opacity: .5; }

.doc-stage-wrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.doc-stage { flex: 1; position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: var(--s1, #f2f4f7); border-radius: 8px; }
.doc-frame { position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.22); transform-origin: center; background: #fbfbf9; overflow: hidden; }
.doc-frame .tiptap-editor-wrapper, .doc-frame .tiptap-viewer-container { height: 100%; background: transparent; border: 0; border-radius: 0; }
.doc-frame .tiptap-editor-area { overflow: hidden; }
.doc-frame .tiptap-editor-area .tiptap-content, .doc-frame .tiptap-rendered-content { min-height: 100%; height: 100%; overflow: hidden; }
.doc-frame .tiptap-content p.is-editor-empty:first-child::before { color: #9a9a93; }
.doc-slide-tools { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 0 0; }
.doc-slide-pos { font: 12px "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-3, #6b7686); padding: 0 6px; }
.doc-slide-sep { width: 1px; height: 16px; background: var(--line, #e5e8ee); margin: 0 6px; }

/* A designed slide on the stage: drawn, not edited. The frame is already scaled. */
.doc-slide-view { width: 100%; height: 100%; overflow: hidden; cursor: default; }
.doc-slide-view .marpit { pointer-events: none; }
.doc-slide-mode { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line, #e5e8ee); background: var(--s1, #f7f8fa); color: var(--ink-2, #3f4a5b); font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer; }
.doc-slide-mode .material-symbols-outlined { font-size: 16px; }
.doc-slide-mode:hover:not(:disabled) { border-color: var(--jade, #0FA47F); color: var(--jade, #0FA47F); }
.doc-slide-mode:disabled { opacity: .5; cursor: not-allowed; }

/* The mode, once chosen: a label with a guarded switch, not a toggle. */
.doc-mode { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border: 1px solid var(--line, #e5e8ee); border-radius: 6px; background: var(--s1, #f7f8fa); color: var(--ink-2, #3f4a5b); font-size: 12.5px; font-weight: 500; }
.doc-mode > .material-symbols-outlined { font-size: 16px; color: var(--jade, #0FA47F); }
.doc-mode-switch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; border: 0; border-radius: 4px; background: none; color: var(--ink-4, #9098a6); cursor: pointer; }
.doc-mode-switch:hover { background: var(--line, #e5e8ee); color: var(--ink-2, #3f4a5b); }
.doc-mode-switch .material-symbols-outlined { font-size: 16px; }

/* ── Value engineering (CostModel · FunctionAnalysis · DecisionMatrix · VeProposal) ── */
/* All four wrap with `bs-card a3-card <prefix>-card`, so every A3 rule applies; below is only what is new. */
.a3-computed { color: var(--ink-2, #3b4453); font-variant-numeric: tabular-nums; }
.a3-colhdr .a3-computed { color: var(--ink-4, #8A93A3); }
.a3-footer { list-style: none; display: flex; gap: 14px; justify-content: flex-end; padding: 8px 17px 0 21px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: .04em; color: var(--ink-3, #6b7686); border-top: 1px solid var(--line-2, #D2D7E0); }
.a3-footer .a3-item-col { width: auto; }
.cm-toggle { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--ink-4, #8A93A3); display: inline-flex; gap: 4px; align-items: center; }
.cm-cats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 12px; color: var(--ink-3, #6b7686); }
.cm-cat b { font-weight: 600; color: var(--ink, #0f1319); margin-right: 4px; }
.cm-cat i { font-style: normal; color: var(--ink-4, #8A93A3); margin-left: 4px; }
.fa-source { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-4, #8A93A3); margin: -8px 0 12px; }
.fa-source .material-symbols-outlined { font-size: 16px; }
.fa-highest { margin-top: 10px; }
.fa-unalloc b { color: #a9741a; }
.dm-order { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; color: var(--ink-4, #8A93A3); margin-top: 6px; }
.vp-change .a3-col:first-child { border-right: 1px dashed var(--line-2, #D2D7E0); padding-right: 20px; }
@media (max-width: 720px) { .vp-change .a3-col:first-child { border-right: 0; padding-right: 0; } }
.vp-lcc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -6px 0 18px; padding: 10px 14px; border: 1px solid var(--line, #E5E8EE); border-radius: 8px; font-size: 12.5px; }
.vp-lcc-note { color: var(--ink-4, #8A93A3); font-style: italic; }
.vp-good b { color: var(--jade, #0FA47F); }
.vp-bad b { color: #b43a2f; }
.a3-status-proposed { background: rgba(224,160,32,.12); color: #a9741a; }
.a3-status-accepted { background: var(--jade-bg, rgba(15,164,127,.10)); color: var(--jade, #0FA47F); }
.a3-status-declined { background: var(--s1, #f2f4f7); color: var(--ink-3, #6b7686); }
/* FAST diagram — inline SVG, read-only; fill intensity follows cost ÷ worth */
.fa-fast { width: 100%; height: auto; max-height: 420px; display: block; margin: 4px 0 6px; }
.fa-fast .fa-axis { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-4, #8A93A3); }
.fa-fast .fa-scope { stroke: var(--line-2, #D2D7E0); stroke-dasharray: 4 4; }
.fa-fast .fa-edge { fill: none; stroke: var(--ink-4, #8A93A3); stroke-width: 1.2; }
.fa-fast .fa-arrowhead { fill: var(--ink-4, #8A93A3); }
.fa-fast .fa-node rect { fill: var(--jade, #0FA47F); stroke: var(--ink-3, #6b7686); stroke-width: 1; }
.fa-fast .fa-node--secondary rect, .fa-fast .fa-node--required rect { stroke: var(--line-2, #D2D7E0); }
.fa-fast .fa-node--unwanted rect { stroke-dasharray: 4 3; }
.fa-fast .fa-node--sel rect { stroke: var(--ink, #0f1319); stroke-width: 2; }
.fa-fast .fa-verb { font-size: 11px; font-weight: 600; fill: var(--ink, #0f1319); }
.fa-fast .fa-noun { font-size: 10.5px; fill: var(--ink-2, #3b4453); }

/* ── Catalog Record (cr-*) — any type drawn from its catalog: sections by GroupKey, a field grid, lists ── */
/* Wraps with `bs-card a3-card cr-card`, so every A3 rule applies; below is only what is new. */
.cr-group { padding-top: 4px; }
.cr-group-hd { font-size: 13.5px; font-weight: 600; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #E5E8EE); }
.cr-group-hd .n { color: var(--ink-4, #8A93A3); font-weight: 400; margin-right: 4px; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 20px; }
.cr-field { margin-bottom: 10px; min-width: 0; }
.cr-field .bs-input { width: 100%; }
.cr-select { background: transparent; }
.cr-num { font-variant-numeric: tabular-nums; }
.cr-req { color: #b43a2f; margin-left: 3px; font-weight: 400; }
.cr-text, .cr-items { margin: 4px 0 14px; }
.a3-status-submitted { background: rgba(224,160,32,.12); color: #a9741a; }
.a3-status-returned { background: rgba(180,58,47,.08); color: #b43a2f; }

/* ══ Artifact workbench — every artifact drawn one way ═══════════════════════
   Artifacts/Workbench/ArtifactWorkbench.razor. The chosen "Tiles that open" layout
   (docs/active/prototypes/artifact-surface-hybrids.html): a to-do rail, compact tiles
   on a grey ground, one section open in full. White tiles on grey is the Bento
   contrast; an empty section is a dashed outline on the grey, so what is missing
   reads as missing. Classes are wb-*. */

/*  The ground is DERIVED — the text colour at 4% over the page — not a surface token:
    a tenant theme may set its surfaces to white, and then the tiles had nothing to sit on. */
.bs-card.wb-card {
    max-width: 1240px;
    padding: 20px 24px 64px;
    background: color-mix(in srgb, var(--ink, #0f1319) 4%, var(--bg, #ffffff));
    border-radius: 14px;
}
.wb {
    --wb-tile: var(--bg, #ffffff);
    --wb-ground: color-mix(in srgb, var(--ink, #0f1319) 4%, var(--bg, #ffffff));
    --wb-line: var(--line, #e5e8ee);
    --wb-line-2: var(--line-2, #d2d7e0);
    --wb-jade: var(--jade, #0fa47f);
    --wb-amber: var(--warn, #b7791f);
    --wb-red: var(--red, #c2412d);
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.wb-lbl { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4, #9098a6); }

/* rail */
.wb-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.wb-ring { display: flex; align-items: center; gap: 12px; background: var(--wb-tile); border: 1px solid var(--wb-line); border-radius: 10px; padding: 10px 12px; }
.wb-ring svg { width: 50px; height: 50px; flex: none; }
.wb-ring-track { stroke: color-mix(in srgb, var(--ink, #0f1319) 12%, var(--bg, #ffffff)); }
.wb-ring-fill { stroke: var(--wb-jade); }
.wb-ring b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-todo button {
    width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px;
    border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
    font: inherit; font-size: 13px; color: var(--ink-2, #3f4a5b);
}
.wb-todo button:hover { background: var(--wb-tile); }
.wb-todo button.on { background: var(--wb-tile); color: var(--ink, #0f1319); font-weight: 500; box-shadow: 0 1px 2px rgba(16,22,32,.06); }
.wb-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--ink-4, #9098a6); min-width: 14px; }
.wb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-c { margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--ink-4, #9098a6); white-space: nowrap; }
.wb-c--gap { color: var(--wb-amber); }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.wb-dot--full { background: var(--wb-jade); }
.wb-dot--part { background: conic-gradient(var(--wb-jade) 0 50%, var(--s3, #dfe3ea) 0); }
.wb-dot--alert { background: var(--wb-red); }
.wb-dot--empty { border: 1.5px solid var(--wb-line-2); }
.wb-next { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--jade-ring, rgba(15,164,127,.28)); background: var(--jade-bg, rgba(15,164,127,.10)); border-radius: 9px; padding: 10px 12px; }
.wb-next b { font-weight: 600; color: var(--ink, #0f1319); font-size: 13px; }
.wb-next-tip { color: var(--ink-2, #3f4a5b); font-size: 12.5px; }
.wb-next-go { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--wb-jade); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.wb-next--done { border-color: var(--wb-line); background: var(--wb-tile); }

/* main */
.wb-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wb-head { background: var(--wb-tile); border: 1px solid var(--wb-line); border-radius: 12px; padding: 12px 16px 4px; }
.wb-head .bs-sec-identity { margin: 0; }
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.wb-tile {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left;
    background: var(--wb-tile); border: 1px solid var(--wb-line); border-radius: 10px; padding: 10px 12px;
    font: inherit; color: inherit; cursor: pointer;
}
.wb-tile:hover { border-color: var(--wb-line-2); }
.wb-tile.on { border-color: var(--wb-jade); box-shadow: 0 0 0 3px var(--jade-ring, rgba(15,164,127,.28)); }
.wb-tile--empty { background: transparent; border-style: dashed; border-color: var(--wb-line-2); }
.wb-tile--alert { background: var(--red-bg, rgba(220,70,50,.08)); border-color: transparent; }
.wb-tile-hd { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; }
.wb-tile-hd .wb-n { min-width: 0; font-weight: 400; }
.wb-sum { font-size: 12px; color: var(--ink-3, #6b7686); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-tile--empty .wb-sum { font-style: italic; color: var(--ink-4, #9098a6); }
.wb-mini { display: block; max-height: 64px; overflow: hidden; pointer-events: none; }
.wb-mini svg { max-width: 100%; height: auto; max-height: 64px; }

.wb-open { background: var(--wb-tile); border: 1px solid var(--wb-line); border-radius: 12px; padding: 14px 18px 16px; min-width: 0; }
.wb-open--empty { border-style: dashed; }
.wb-open-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wb-open-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--wb-jade); border: 1px solid var(--jade-ring, rgba(15,164,127,.28)); border-radius: 5px; padding: 0 5px; }
.wb-open-hd h3 { margin: 0; font-size: 15px; font-weight: 600; }
.wb-open-hint { color: var(--ink-4, #9098a6); font-size: 12.5px; }
.wb-sp { flex: 1; }
.wb-open .a3-sec { margin-bottom: 0; }

/* Narrow (a phone, a split iPad): the rail sits above, as the ring and the Next card; the
   section list is the tiles themselves, so the rail's list goes. */
@media (max-width: 900px) {
    .bs-card.wb-card { padding: 14px 14px 48px; }
    .wb { grid-template-columns: minmax(0, 1fr); }
    .wb-rail { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wb-todo { display: none; }
    .wb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .wb-rail { grid-template-columns: minmax(0, 1fr); }
}
/* A tile's chips (Brainstorm's themes): name and count, on one line, clipped. */
.wb-chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.wb-chip { flex: none; font-size: 11px; color: var(--ink-2, #3f4a5b); background: color-mix(in srgb, var(--ink, #0f1319) 5%, var(--bg, #fff)); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.wb-chip b { font-weight: 600; color: var(--ink-4, #9098a6); margin-left: 3px; }
.wb-open .bs-sec { margin: 0; }