/* ════════════════════════════════════════════════════════════
   Crownforge — Deck Editor
   Page-local styling for the full-viewport 3-column editor, ported from the Claude Design prototype
   (editor.css) onto the app's --cf-* tokens. Editor chrome rules are scoped under .cf-editor-root so
   they can't leak onto MainLayout-based pages. The skip-link (`.cf-skip-link`) lives globally in
   app.css and is shared with MainLayout/BoardLayout. The `@keyframes cf-pop-in` animation also stays
   global by necessity (keyframe names aren't scoped). Shared primitives (Button/Chip/badges) +
   shared components (CardTile/CardBrowser/CardDetailPopover/DeckValidationPanel/FactionPicker/Crest)
   keep their own scoped CSS.

   Contents — Cmd-F the ═══ banner text to jump (titles match the banners; no line numbers, which rot).
   The editor is one base layout + alternate layouts / full-screen modes; each is a ═══ section, in order:
     · BASE EDITOR        default 3-column layout — shell · fields · destiny · meters · deck list · stats rail · mobile
     · DECK SPREAD        full-screen cost-cascade analysis view
     · LEDGER 1           ThronesDB-style compact identity bar + dense pool table
     · CURVE              cost-first board layout (pool · curve board · validation rail)
     · SETUP SIMULATOR    full-screen "Test setup" opening-hand analysis
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   BASE EDITOR — the default 3-column layout (left rail · card browser · stats rail) plus the shared rail
   primitives (.cf-editor__block / field / meter / deck-list / stepper) that the alternate layouts reuse.
   ════════════════════════════════════════════════════════════ */

/* ---- viewport root: the editor owns the screen; columns scroll, the page doesn't ---- */
.cf-editor-root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--cf-bg);
}
/* EditorLayout nests the page inside a <main> accessibility landmark, so the banner/grid are NOT direct
   children of the flex-column root. Make that landmark a transparent flex pass-through, otherwise it's a
   plain block: the grid's flex:1/min-height:0 is inert, its minmax(0,1fr) rows have no definite height to
   resolve against, so it grows to content and overflows the overflow:hidden root with no way to scroll.
   (ShareLayout puts .cf-editor-root *inside* its <main>, so this direct-child rule doesn't touch it.) */
.cf-editor-root > main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- App banner (slim production chrome) ---------- */
.cf-editor-root .cf-editor__banner {
    position: relative;
    height: 60px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background:
        radial-gradient(120% 220% at 14% -60%, #c22222 0%, transparent 55%),
        linear-gradient(180deg, #9c1414 0%, #7c0f0f 55%, #650c0c 100%);
    color: var(--cf-cream); /* the banner's crimson is pinned above, so its ink stays cream in every theme */
    border-bottom: 3px solid var(--cf-accent);
    box-shadow: var(--cf-shadow-2);
    z-index: 40;
}
.cf-editor-root .cf-editor__banner .cf-editor__banner-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* keep the standing "Early access" tag tight to the wordmark, before the breadcrumb divider */
.cf-editor-root .cf-editor__banner .cf-editor__wordmark-wrap { display: flex; align-items: center; gap: 10px; }
/* pre-release status chip — the main header's cream-on-crimson chip, mirrored on this crimson editor banner */
.cf-editor-root .cf-editor__banner .cf-editor__brand-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--cf-radius-pill);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 50%, transparent);
    background: rgb(0 0 0 / .22);
    color: var(--cf-cream);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}
.cf-editor-root .cf-editor__banner .cf-editor__wordmark {
    font-family: var(--cf-font-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--cf-accent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 0 rgb(0 0 0 / .45);
    text-decoration: none;
}
.cf-editor-root .cf-editor__banner .cf-editor__wordmark .cf-icon { width: 23px; height: 23px; color: var(--cf-accent); }
/* breadcrumb "Decks" back-link */
.cf-editor-root .cf-editor__banner .cf-editor__crumbs a { color: rgb(253 244 232 / .78); text-decoration: none; }
.cf-editor-root .cf-editor__banner .cf-editor__crumbs a:hover { color: var(--cf-cream); text-decoration: underline; }
.cf-editor-root .cf-editor__banner .cf-editor__crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: rgb(253 244 232 / .78);
    padding-left: 16px;
    border-left: 1px solid rgb(253 244 232 / .22);
    min-width: 0;
}
.cf-editor-root .cf-editor__banner .cf-editor__crumbs-sep { opacity: .5; }
/* the deck name doubles as the page's <h1> (FocusOnNavigate's route-change focus target) — `font: inherit`
   + zero margin strip the heading chrome (UA size, app.css display font/margin) so it stays the 13px crumb */
.cf-editor-root .cf-editor__banner .cf-editor__crumbs-here {
    margin: 0;
    font: inherit;
    color: var(--cf-cream); font-weight: 600;
    display: inline-flex; align-items: center; min-width: 0;
}
/* the NAME truncates (squeezed between the wordmark and the 5-layout toolset it used to wrap
   multi-line inside the fixed 60px banner) — clipping the inner span keeps the dirty dot, which
   sits AFTER it on .cf-editor__crumbs-here, visible even for long names */
.cf-editor-root .cf-editor__banner .cf-editor__crumbs-here-name {
    min-width: 0; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-editor-root .cf-editor__banner .cf-editor__crumbs-here--dirty::after {
    content: "●"; color: var(--cf-accent); margin-left: 8px; font-size: 11px;
}
/* tighter still: the breadcrumb is redundant (every layout shows the deck name in its own chrome), and below
   ~1200px it would truncate to a useless stub — drop it visually. But the deck-name <h1> inside it must stay
   in the accessibility tree (it's the page's only h1 and FocusOnNavigate's focus target, and display:none
   would silently break both), so: the container collapses via display:contents, the link/sep unrender, and
   the h1 falls back to the sr-only clip recipe (app.css) instead of display:none. */
@media (max-width: 1200px) {
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs { display: contents; }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs a,
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs-sep { display: none; }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs-here {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* the toolset never shrinks or wraps mid-label — the left cluster's crumb absorbs the squeeze */
.cf-editor-root .cf-editor__banner .cf-editor__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cf-editor-root .cf-editor__banner-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--cf-radius-md);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgb(253 244 232 / .32);
    background: rgb(0 0 0 / .16);
    color: var(--cf-cream);
    transition: background var(--cf-dur-fast);
}
/* ··· overflow dropdown for low-frequency banner actions (History, Deck Spread) */
.cf-editor-root .cf-editor__banner-more { position: relative; }
.cf-editor-root .cf-editor__banner-more summary { list-style: none; cursor: pointer; letter-spacing: .18em; }
.cf-editor-root .cf-editor__banner-more summary::-webkit-details-marker { display: none; }
.cf-editor-root .cf-editor__banner-more-pop {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px;
    background: var(--cf-surface); border: 1px solid var(--cf-border-strong); border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-3); padding: 6px; z-index: var(--cf-z-dropdown);
    animation: cf-pop-in var(--cf-dur-fast) ease;
}
.cf-editor-root .cf-editor__more-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px;
    border-radius: var(--cf-radius-md); border: 0; background: none; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--cf-text); text-align: left;
}
.cf-editor-root .cf-editor__more-item:hover { background: var(--cf-surface-2); }
.cf-editor-root .cf-editor__more-item:disabled { opacity: .45; cursor: not-allowed; }
.cf-editor-root .cf-editor__more-item .cf-icon { width: 16px; height: 16px; color: var(--cf-text-muted); flex: 0 0 auto; }
.cf-editor-root .cf-editor__more-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }
.cf-editor-root .cf-editor__more-mobile,
.cf-editor-root .cf-editor__mobile-only { display: none; }
.cf-editor-root .cf-editor__more-label {
    padding: 7px 12px 5px; color: var(--cf-text-muted); font-family: var(--cf-font-mono);
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cf-editor-root .cf-editor__more-separator { height: 1px; margin: 5px 8px; background: var(--cf-border); }

/* narrow desktop: compress the banner chrome before the clusters collide. Sits AFTER the base
   .cf-editor__tools/.cf-editor__banner-btn rules — equal specificity, so source order is what makes these declarations win. */
@media (max-width: 1440px) {
    .cf-editor-root .cf-editor__banner { padding: 0 14px; }
    .cf-editor-root .cf-editor__banner .cf-editor__tools { gap: 5px; }
    .cf-editor-root .cf-editor__banner-btn { padding: 0 9px; }
    .cf-editor-root .cf-editor__banner .cf-editor__layout-seg button { padding: 0 7px; }
}
.cf-editor-root .cf-editor__banner-btn .cf-icon { width: 16px; height: 16px; }
.cf-editor-root .cf-editor__banner-btn:hover { background: rgb(0 0 0 / .30); }
.cf-editor-root .cf-editor__banner-btn--gold {
    background: var(--cf-accent); color: var(--cf-accent-contrast); border-color: var(--cf-gold-border); font-weight: 700;
}
.cf-editor-root .cf-editor__banner-btn--gold:hover { background: var(--cf-gold-hover); }
.cf-editor-root .cf-editor__banner :focus-visible {
    /* A thin cream hairline outside the gold gives the focus ring a high-contrast outer boundary against
       the crimson banner — gold-on-crimson alone is ~2.9:1, just under the 3:1 indicator floor (WCAG 1.4.11). */
    outline: none;
    box-shadow: 0 0 0 2px #6d0d0d, 0 0 0 4px var(--cf-accent), 0 0 0 5px var(--cf-cream);
}

/* ---------- loading gate: shown instead of the grid while a saved deck / shared import is read ---------- */
.cf-editor-root .cf-editor__loading {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--cf-text-muted);
    font-size: 16px;
}

/* ---------- shared application shell + Tapestry ---------- */
.cf-editor-root .cf-editor-workspace {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.cf-editor-root [hidden] { display: none !important; }
.cf-editor-root .cf-editor-identity-summary {
    align-items: center;
    background: var(--cf-surface);
    border-bottom: 1px solid var(--cf-border);
    display: flex;
    flex: 0 0 44px;
    gap: 10px;
    min-width: 0;
    padding: 0 20px;
}
.cf-editor-root .cf-editor-identity-summary .cf-crest { flex: 0 0 auto; }
.cf-editor-root .cf-editor-identity-summary__name {
    color: var(--cf-text);
    flex: 0 1 auto;
    font-family: var(--cf-font-display);
    font-size: 15px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-editor-root .cf-editor-identity-summary__name--dirty::after {
    color: var(--cf-accent);
    content: "●";
    font-size: 10px;
    margin-left: 6px;
}
.cf-editor-root .cf-editor-identity-summary__separator {
    background: var(--cf-border);
    flex: 0 0 1px;
    height: 16px;
}
.cf-editor-root .cf-editor-identity-summary__destiny {
    color: var(--cf-text-muted);
    font-size: 13px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-editor-root .cf-editor-identity-summary__format {
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-pill);
    color: var(--cf-text-muted);
    flex: 0 0 auto;
    font-family: var(--cf-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 10px;
    text-transform: uppercase;
}
.cf-editor-root .cf-editor-identity-summary__edit {
    align-items: center;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-brand);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    height: 32px;
    margin-left: auto;
    padding: 0 12px;
}
.cf-editor-root .cf-editor-identity-summary__edit:hover { background: var(--cf-control-hover); border-color: var(--cf-brand); }
.cf-editor-root .cf-editor-identity-summary__edit:focus-visible {
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
    outline: 0;
}
.cf-editor-root .cf-editor-identity-editor {
    background: var(--cf-surface);
    border-bottom: 1px solid var(--cf-border);
    display: grid;
    flex: 0 0 auto;
    gap: 26px;
    grid-template-columns: minmax(320px, 1fr) auto minmax(240px, 320px);
    min-height: 0;
    min-width: 0;
    padding: 10px 24px;
}
.cf-editor-root .cf-editor-identity-editor .cf-editor__id-cluster {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.cf-editor-root .cf-editor-identity-editor .cf-editor__block { border-bottom: 0; padding: 0; }
.cf-editor-root .cf-editor-identity-editor .cf-editor__id-fmt-label { margin-top: 4px; }
.cf-editor-root .cf-editor-identity-editor .cf-editor__fmt-picker { width: fit-content; }
.cf-editor-root .cf-editor-workspace__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
.cf-editor-root .cf-editor-tapestry {
    display: grid;
    grid-template-columns: clamp(300px, 31%, 380px) minmax(0, 1fr);
}
.cf-editor-root .cf-editor-tapestry__rail {
    background: var(--cf-surface);
    border-right: 1px solid var(--cf-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
.cf-editor-root .cf-editor-tapestry__rail-tabs {
    background: var(--cf-surface);
    border-bottom: 1px solid var(--cf-border);
    flex: 0 0 auto;
    padding: 8px 12px;
}
.cf-editor-root .cf-editor-tapestry__rail-tabs .cf-editor-tabs__tab,
.cf-editor-root .cf-editor-workspace__tabs .cf-editor-tabs__tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--cf-text-muted);
    cursor: pointer;
    font: 700 12px/1 var(--cf-font-ui);
    min-height: 36px;
    padding: 0 12px;
}
.cf-editor-root .cf-editor-tapestry__rail-tabs .cf-editor-tabs__tab[aria-selected="true"],
.cf-editor-root .cf-editor-workspace__tabs .cf-editor-tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--cf-brand);
    color: var(--cf-brand);
}
.cf-editor-root .cf-editor-workspace__panel {
    min-height: 0;
    min-width: 0;
    outline: 0;
}
.cf-editor-root .cf-editor-workspace__panel:focus-visible {
    box-shadow: inset 0 0 0 2px var(--cf-brand);
}
.cf-editor-root .cf-editor-tapestry__rail-panel {
    flex: 1 1 auto;
    overflow: hidden auto;
}
.cf-editor-root .cf-editor-tapestry__cards-panel {
    background: var(--cf-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cf-editor-root .cf-editor-tapestry__cards-panel > .cf-browser {
    flex: 1 1 auto;
    min-height: 0;
}
.cf-editor-root .cf-editor-workspace > .cf-deck-status {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--cf-border);
    flex: 0 0 auto;
}
.cf-editor-root .cf-editor-workspace__tabs { display: none; }

/* keep the share-link icon buttons aligned with the 40px url field (not the default 44px) */
.cf-editor-root .cf-editor__share-link .cf-iconbtn { width: 40px; height: 40px; }

/* a labelled block within a rail */
.cf-editor-root .cf-editor__block { padding: 18px 20px; border-bottom: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__block:last-child { border-bottom: 0; }
.cf-editor-root .cf-editor__block-h {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 13px;
}
.cf-editor-root .cf-editor__block-h h3 {
    font-family: var(--cf-font-ui); font-size: 11px; font-weight: 700; margin: 0;
    color: var(--cf-text-muted); letter-spacing: .06em; text-transform: uppercase;
}
.cf-editor-root .cf-editor__block-h .cf-editor__meta { font-family: var(--cf-font-mono); font-size: 11px; color: var(--cf-text-muted); font-weight: 600; }

/* ---------- Field primitives ---------- */
.cf-editor-root .cf-editor__field-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cf-text-muted); margin: 0 0 7px;
}
.cf-editor-root .cf-editor__input,
.cf-editor-root .cf-editor__textarea,
.cf-editor-root .cf-editor__select {
    width: 100%; font-family: var(--cf-font-ui); font-size: 14px; color: var(--cf-text);
    background: var(--cf-surface); border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md); padding: 0 12px; height: 40px;
    transition: border-color var(--cf-dur-fast), box-shadow var(--cf-dur-fast);
}
.cf-editor-root .cf-editor__textarea { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; min-height: 74px; }
.cf-editor-root .cf-editor__input:focus-visible,
.cf-editor-root .cf-editor__textarea:focus-visible,
.cf-editor-root .cf-editor__select:focus-visible {
    outline: none; border-color: var(--cf-brand);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}
.cf-editor-root .cf-editor__input::placeholder, .cf-editor-root .cf-editor__textarea::placeholder { color: var(--cf-text-muted); }

/* deck-name input with trailing dirty dot */
.cf-editor-root .cf-editor__name-field { position: relative; }
.cf-editor-root .cf-editor__name-field .cf-editor__input {
    font-family: var(--cf-font-display); font-size: 22px; font-weight: 700; height: 48px; padding-right: 38px;
}
.cf-editor-root .cf-editor__dirty-dot {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--cf-accent); box-shadow: 0 0 0 3px rgb(201 162 39 / .22);
}

/* checkbox row */
.cf-editor-root .cf-editor__checks { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.cf-editor-root .cf-editor__check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; user-select: none; }
.cf-editor-root .cf-editor__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-editor-root .cf-editor__check-box {
    width: 19px; height: 19px; border-radius: 5px; flex: 0 0 auto;
    border: 1.5px solid var(--cf-border-strong); background: var(--cf-surface);
    display: inline-flex; align-items: center; justify-content: center; color: transparent;
    transition: background var(--cf-dur-fast), border-color var(--cf-dur-fast), color var(--cf-dur-fast);
}
.cf-editor-root .cf-editor__check-box .cf-icon { width: 13px; height: 13px; }
.cf-editor-root .cf-editor__check input:checked + .cf-editor__check-box { background: var(--cf-brand); border-color: var(--cf-brand-hover); color: var(--cf-brand-contrast); }
.cf-editor-root .cf-editor__check input:focus-visible + .cf-editor__check-box { box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }
.cf-editor-root .cf-editor__check--public input:checked + .cf-editor__check-box { background: var(--cf-success); border-color: #155a32; }

/* actions row in the deck header */
.cf-editor-root .cf-editor__deck-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cf-editor-root .cf-editor__deck-actions .cf-editor__fmt {
    font-family: var(--cf-font-mono); font-size: 11px; font-weight: 600; color: var(--cf-text-muted);
    border: 1px solid var(--cf-border); border-radius: var(--cf-radius-pill); padding: 3px 10px;
    background: var(--cf-surface-2); white-space: nowrap;
}
.cf-editor-root .cf-editor__deck-actions .cf-btn { flex: 1 1 auto; }

/* format picker in the validation block header */
.cf-editor-root .cf-editor__fmt-picker { position: relative; }
.cf-editor-root .cf-editor__fmt-picker .cf-editor__select { height: 32px; width: auto; font-size: 12.5px; font-weight: 600; padding-right: 30px; -webkit-appearance: none; appearance: none; }
.cf-editor-root .cf-editor__fmt-picker .cf-editor__chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--cf-text-muted); pointer-events: none; }

/* ---------- Share link block ---------- */
.cf-editor-root .cf-editor__share-link { display: flex; gap: 8px; align-items: stretch; }
.cf-editor-root .cf-editor__url {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: var(--cf-surface-2); border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md); padding: 0 11px; height: 40px;
    font-family: var(--cf-font-mono); font-size: 12px; color: var(--cf-text);
}
.cf-editor-root .cf-editor__url .cf-icon { width: 15px; height: 15px; color: var(--cf-text-muted); flex: 0 0 auto; }
.cf-editor-root .cf-editor__url-tok {
    flex: 1 1 auto; min-width: 0;
    /* Reset the input chrome - the wrapping .cf-editor__url owns the field's visual frame. */
    background: none; border: 0; padding: 0; outline: none;
    color: inherit; font: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Destiny picker ---------- */
.cf-editor-root .cf-editor__destiny-empty {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 64px; border: 1px dashed var(--cf-border-strong); border-radius: var(--cf-radius-md);
    background: var(--cf-surface-2); color: var(--cf-brand); font-weight: 600; font-size: 14px; cursor: pointer;
}
.cf-editor-root .cf-editor__destiny-empty:hover { background: var(--cf-control-hover); border-color: var(--cf-brand); }
.cf-editor-root .cf-editor__destiny-empty:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }
.cf-editor-root .cf-editor__destiny-card {
    position: relative; display: flex; gap: 12px; align-items: center;
    padding: 12px 13px; border-radius: var(--cf-radius-md);
    border: 1px solid var(--fac, var(--cf-border));
    background: color-mix(in srgb, var(--fac, var(--cf-border-strong)) 9%, var(--cf-surface));
}
.cf-editor-root .cf-editor__destiny-card-seal {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--cf-surface); border: 1.5px solid var(--fac, var(--cf-border-strong)); color: var(--fac);
}
.cf-editor-root .cf-editor__destiny-card-seal .cf-crest { width: 26px; height: 26px; }
.cf-editor-root .cf-editor__destiny-card-body { min-width: 0; flex: 1 1 auto; }
.cf-editor-root .cf-editor__destiny-card-nm { font-family: var(--cf-font-display); font-weight: 700; font-size: 15px; color: var(--cf-text); }
.cf-editor-root .cf-editor__destiny-card-ty {
    font-size: 11.5px; color: var(--cf-text-muted); margin-top: 1px; line-height: 1.5;
}
.cf-editor-root .cf-editor__destiny-card-swap {
    font-size: 12px; font-weight: 600; color: var(--cf-brand); cursor: pointer;
    background: none; border: 0; padding: 4px 6px; border-radius: var(--cf-radius-sm);
}
.cf-editor-root .cf-editor__destiny-card-swap:hover { background: rgb(176 24 24 / .08); }

/* ---------- Completeness meters ---------- */
.cf-editor-root .cf-editor__meters { display: flex; flex-direction: column; gap: 11px; }
.cf-editor-root .cf-editor__meter .cf-editor__meter-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cf-editor-root .cf-editor__meter .cf-editor__meter-top .cf-editor__meter-lbl { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__meter .cf-editor__meter-top .cf-editor__meter-ct { font-family: var(--cf-font-mono); font-weight: 700; font-size: 13px; color: var(--cf-text); font-variant-numeric: tabular-nums; }
.cf-editor-root .cf-editor__meter .cf-editor__meter-top .cf-editor__meter-ct .cf-editor__meter-tgt { color: var(--cf-text-muted); font-weight: 600; }
.cf-editor-root .cf-editor__meter .cf-editor__meter-track { height: 8px; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); border: 1px solid var(--cf-border); overflow: hidden; }
.cf-editor-root .cf-editor__meter .cf-editor__meter-fill { height: 100%; border-radius: var(--cf-radius-pill); transition: width var(--cf-dur-slow) ease; background: var(--cf-brand); }
.cf-editor-root .cf-editor__meter--met .cf-editor__meter-fill { background: var(--cf-success); }
.cf-editor-root .cf-editor__meter--over .cf-editor__meter-fill { background: var(--cf-warning); }
.cf-editor-root .cf-editor__meter .cf-editor__meter-top .cf-editor__meter-ct--met { color: var(--cf-success-fg); }
.cf-editor-root .cf-editor__meter .cf-editor__meter-top .cf-editor__meter-ct--over { color: var(--cf-warning-fg); }

/* ---------- Deck list ---------- */
.cf-editor-root .cf-editor__deck-list { display: flex; flex-direction: column; }
.cf-editor-root .cf-editor__deck-section + .cf-editor__deck-section { margin-top: 4px; }
.cf-editor-root .cf-editor__group {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 4px; cursor: pointer; background: none; border: 0;
    border-bottom: 1px solid var(--cf-border); text-align: left;
}
/* Coarse-pointer minimum for the collapsible group header - full-width but only 34px tall. See
   Button.razor.css for why this is gated on the pointer rather than applied everywhere. */
@media (pointer: coarse) {
    .cf-editor-root .cf-editor__group { min-height: 44px; }
}
.cf-editor-root .cf-editor__group:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand); border-radius: var(--cf-radius-sm); }
.cf-editor-root .cf-editor__group .cf-icon { width: 15px; height: 15px; color: var(--cf-text-muted); transition: transform .15s; flex: 0 0 auto; }
.cf-editor-root .cf-editor__group--collapsed .cf-icon { transform: rotate(-90deg); }
.cf-editor-root .cf-editor__group-name { font-family: var(--cf-font-display); font-size: 13.5px; font-weight: 700; color: var(--cf-text); letter-spacing: .02em; }
.cf-editor-root .cf-editor__group-count { margin-left: auto; font-family: var(--cf-font-mono); font-size: 10.5px; font-weight: 700; color: var(--cf-text-muted); font-variant-numeric: tabular-nums; background: var(--cf-surface-2); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-pill); padding: 1px 8px; }

.cf-editor-root .cf-editor__slot-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 22px 22px auto; align-items: center; gap: 8px;
    padding: 4px; border-radius: var(--cf-radius-sm); position: relative;
}
.cf-editor-root .cf-editor__slot-row:hover { background: var(--cf-surface-2); }
/* copy-limit saturation cue: a soft amber inset one below the per-card cap, crimson at/over it — a glance
   signal AT the card so a builder sees a slot saturating without reading the far validation rail (§8). The
   count/limit also rides the row's title, so the cue is never colour-only (the qty just picks up the tone). */
.cf-editor-root .cf-editor__slot-row--near { box-shadow: inset 3px 0 0 var(--cf-warning, #b8860b); }
.cf-editor-root .cf-editor__slot-row--near .cf-editor__slot-row-qty { color: var(--cf-warning, #b8860b); }
.cf-editor-root .cf-editor__slot-row--atmax { box-shadow: inset 3px 0 0 var(--cf-danger); }
.cf-editor-root .cf-editor__slot-row--atmax .cf-editor__slot-row-qty { color: var(--cf-danger); }
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-qty {
    font-family: var(--cf-font-mono); font-size: 13px; font-weight: 700; color: var(--cf-text);
    width: 22px; text-align: center; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-nm {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13.5px; font-weight: 600; color: var(--cf-text);
}
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-nm .cf-editor__slot-row-star { color: var(--cf-faction-saracenenvoy); margin-right: 3px; }
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-nm--off { color: var(--fac); }
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-nm .cf-crest { margin-right: 4px; vertical-align: -1px; }
/* cost/power sit in their own fixed grid columns so values line up row-to-row (ThronesDB-style) */
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-b-cost,
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-b-power { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-controls { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; opacity: 0; transition: opacity var(--cf-dur-fast); }
.cf-editor-root .cf-editor__slot-row:hover .cf-editor__slot-row-controls, .cf-editor-root .cf-editor__slot-row:focus-within .cf-editor__slot-row-controls { opacity: 1; }
/* touch devices can't hover — keep the deck-row steppers visible so they're discoverable */
@media (hover: none) {
    .cf-editor-root .cf-editor__slot-row .cf-editor__slot-row-controls { opacity: 1; }
}
/* steppers: shared by the deck-list rows and the curve board's frame-tile control strips */
.cf-editor-root .cf-editor__slot-row .cf-editor__step-btn, .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn {
    width: 26px; height: 26px; border-radius: var(--cf-radius-sm); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cf-surface); border: 1px solid var(--cf-border-strong); color: var(--cf-brand);
}
.cf-editor-root .cf-editor__slot-row .cf-editor__step-btn:hover, .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn:hover { background: var(--cf-control-hover); border-color: var(--cf-brand); }
.cf-editor-root .cf-editor__slot-row .cf-editor__step-btn .cf-icon, .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn .cf-icon { width: 14px; height: 14px; }
.cf-editor-root .cf-editor__slot-row .cf-editor__step-btn:disabled, .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn:disabled { opacity: .4; cursor: not-allowed; }
.cf-editor-root .cf-editor__slot-row .cf-editor__step-btn:focus-visible, .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand); }
.cf-editor-root .cf-editor__slot-row .cf-editor__step-btn--remove:hover, .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn--remove:hover { border-color: var(--cf-danger); color: var(--cf-danger); }

/* small inline badges in deck rows */
.cf-editor-root .cf-editor__mini-cost, .cf-editor-root .cf-editor__mini-power {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.cf-editor-root .cf-editor__mini-cost {
    width: 22px; height: 22px; border-radius: 50%; font-size: 11px; color: var(--cf-accent-contrast);
    background: radial-gradient(circle at 38% 30%, #f3dd8c, #cda52a 56%, #a07d18); border: 1.5px solid var(--cf-gold-border);
}
.cf-editor-root .cf-editor__mini-power { position: relative; width: 21px; height: 23px; font-size: 11px; color: var(--cf-brand-contrast); }
.cf-editor-root .cf-editor__mini-power svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cf-editor-root .cf-editor__mini-power svg path { fill: var(--cf-brand); stroke: #7c1010; stroke-width: 2.4; }
.cf-editor-root .cf-editor__mini-power span { position: relative; z-index: 1; }

/* small segmented toggle (grouping) */
.cf-editor-root .cf-editor__seg { display: inline-flex; border: 1px solid var(--cf-border-strong); border-radius: var(--cf-radius-sm); overflow: hidden; }
.cf-editor-root .cf-editor__seg button {
    height: 24px; padding: 0 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    background: var(--cf-surface); color: var(--cf-text-muted); border: 0; cursor: pointer; font-family: var(--cf-font-mono);
}
.cf-editor-root .cf-editor__seg button + button { border-left: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__seg button.cf-editor__seg-opt--on { background: var(--cf-brand); color: var(--cf-brand-contrast); }
.cf-editor-root .cf-editor__seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); }

/* Coarse pointers (touch): grow the small deck-building controls to a comfortable ~44px tap target
   (DECK_BUILDER_DESIGN_SYSTEM §8) without inflating them for a precise mouse. */
@media (pointer: coarse) {
    .cf-editor-root .cf-editor__slot-row .cf-editor__step-btn { width: 44px; height: 44px; }
    .cf-editor-root .cf-editor__seg button { height: 44px; padding: 0 14px; }
}

/* ---------- Right rail: stats ---------- */
.cf-editor-root .cf-editor__stat-block { padding: 0 0 16px; border-bottom: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__stat-block + .cf-editor__stat-block { padding-top: 16px; }
.cf-editor-root .cf-editor__stat-block:last-child { border-bottom: 0; }

.cf-editor-root .cf-editor__histo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; align-items: end; height: 92px; }
.cf-editor-root .cf-editor__histo .cf-editor__bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.cf-editor-root .cf-editor__histo .cf-editor__bar { width: 100%; background: var(--cf-accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; transition: height var(--cf-dur-slow) ease; }
/* the tallest bar(s) go crimson — one peak accent, not a wall of crimson; matches the curve board's peak */
.cf-editor-root .cf-editor__histo .cf-editor__bar--peak { background: var(--cf-brand); opacity: 1; }
.cf-editor-root .cf-editor__histo .cf-editor__bx { font-family: var(--cf-font-mono); font-size: 10px; color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__histo .cf-editor__bn { font-size: 10px; color: var(--cf-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-editor-root .cf-editor__histo .cf-editor__bn--zero { color: var(--cf-border-strong); }

.cf-editor-root .cf-editor__sdist { display: flex; flex-direction: column; gap: 9px; }
.cf-editor-root .cf-editor__sdist .cf-editor__srow { display: grid; grid-template-columns: 22px 58px 1fr 24px; gap: 9px; align-items: center; }
.cf-editor-root .cf-editor__sdist .cf-editor__sn { font-size: 12px; font-weight: 600; }
.cf-editor-root .cf-editor__sdist .cf-editor__track { height: 8px; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); overflow: hidden; border: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__sdist .cf-editor__fill { height: 100%; background: var(--sk, var(--cf-text)); border-radius: var(--cf-radius-pill); opacity: .88; transition: width var(--cf-dur-slow) ease; }
.cf-editor-root .cf-editor__sdist .cf-editor__sv { font-family: var(--cf-font-mono); font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.cf-editor-root .cf-editor__tsplit { display: flex; height: 15px; border-radius: var(--cf-radius-pill); overflow: hidden; border: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__tsplit i { height: 100%; transition: width var(--cf-dur-slow) ease; }
.cf-editor-root .cf-editor__tsplit-key { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 11px; }
.cf-editor-root .cf-editor__tsplit-key span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__tsplit-key b { color: var(--cf-text); font-variant-numeric: tabular-nums; }
.cf-editor-root .cf-editor__tsplit-key i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.cf-editor-root .cf-editor__totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cf-editor-root .cf-editor__tot-cell { text-align: center; padding: 11px 4px; background: var(--cf-surface-2); border-radius: var(--cf-radius-md); border: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__tot-cell .cf-editor__tot-n { font-family: var(--cf-font-display); font-size: 23px; font-weight: 700; line-height: 1; }
.cf-editor-root .cf-editor__tot-cell .cf-editor__tot-l { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-text-muted); margin-top: 5px; }

.cf-editor-root .cf-editor__stats-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 20px 14px; color: var(--cf-text-muted); font-size: 12.5px;
}
.cf-editor-root .cf-editor__stats-empty .cf-crest { width: 34px; height: 34px; color: var(--cf-crest-muted); }

/* ---------- Attribute breakdown (qty-weighted bars) ---------- */
.cf-editor-root .cf-editor__attrs { display: flex; flex-direction: column; gap: 8px; }
.cf-editor-root .cf-editor__attrs .cf-editor__arow { display: grid; grid-template-columns: 88px 1fr 26px; gap: 9px; align-items: center; }
.cf-editor-root .cf-editor__attrs .cf-editor__an { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-editor-root .cf-editor__attrs .cf-editor__track { height: 8px; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); overflow: hidden; border: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__attrs .cf-editor__fill { height: 100%; background: var(--cf-accent); border-radius: var(--cf-radius-pill); opacity: .82; transition: width var(--cf-dur-slow) ease; }
.cf-editor-root .cf-editor__attrs .cf-editor__av { font-family: var(--cf-font-mono); font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cf-editor-root .cf-editor__attrs-empty { font-size: 12px; color: var(--cf-text-muted); }

/* ---------- Loyalty advisory strip (off-faction cards carry an in-game Loyalty surcharge, §1.4) ---------- */
.cf-editor-root .cf-editor__loyalty-advisory {
    display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 12px;
    background: var(--cf-surface-2); border: 1px solid var(--cf-border); border-left: 3px solid var(--cf-accent);
    border-radius: var(--cf-radius-md); font-size: 12px; color: var(--cf-text-muted);
}
.cf-editor-root .cf-editor__loyalty-advisory b { color: var(--cf-text); font-variant-numeric: tabular-nums; }
.cf-editor-root .cf-editor__la-coin {
    width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f2d98a, var(--cf-accent)); border: 1px solid var(--cf-border-strong);
}

/* Shared pop-in animation (the dialog scrim + the hover popover). Animation names are global, so the
   scoped CardDetailPopover.razor.css can reference this keyframe. */
@keyframes cf-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* nonessential motion off under reduced-motion (app.css's global clamp already freezes it; this keeps
   the sheet self-guarding, like board/moments/broadcast) */
@media (prefers-reduced-motion: reduce) { .cf-editor-root .cf-editor__banner-more-pop { animation: none; } }

/* ---------- Destiny picker (the scrim/card/head come from the shared Dialog; these style its body) ---------- */
/* The search row spans the full card width: negative margins cancel the shared .cf-modal-body padding (18 20). */
.cf-editor-root .cf-editor__dialog-search { margin: -18px -20px 0; padding: 16px 20px; border-bottom: 1px solid var(--cf-border); }
.cf-editor-root .cf-editor__dialog-body { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cf-editor-root .cf-editor__destiny-opt {
    display: flex; align-items: center; gap: 13px; padding: 12px 14px; cursor: pointer; text-align: left;
    border-radius: var(--cf-radius-md); border: 1px solid var(--cf-border); background: var(--cf-surface);
    border-left: 3px solid var(--fac, var(--cf-border));
}
.cf-editor-root .cf-editor__destiny-opt:hover { background: color-mix(in srgb, var(--fac, var(--cf-border-strong)) 8%, var(--cf-surface)); border-color: var(--fac, var(--cf-border-strong)); }
.cf-editor-root .cf-editor__destiny-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }
.cf-editor-root .cf-editor__destiny-opt--selected { background: color-mix(in srgb, var(--fac, var(--cf-brand)) 10%, var(--cf-surface)); border-color: var(--fac); }
.cf-editor-root .cf-editor__destiny-opt-seal { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--cf-surface-2); border: 1.5px solid var(--fac, var(--cf-border-strong)); color: var(--fac); }
.cf-editor-root .cf-editor__destiny-opt-seal .cf-crest { width: 24px; height: 24px; }
.cf-editor-root .cf-editor__destiny-opt-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cf-editor-root .cf-editor__destiny-opt-nm { font-family: var(--cf-font-display); font-weight: 700; font-size: 15px; }
.cf-editor-root .cf-editor__destiny-opt-desc { font-size: 12px; color: var(--cf-text-muted); margin-top: 2px; }
.cf-editor-root .cf-editor__search-field { position: relative; }
.cf-editor-root .cf-editor__search-field .cf-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__search-field input {
    width: 100%; height: 42px; border-radius: var(--cf-radius-md); border: 1px solid var(--cf-border-strong);
    background: var(--cf-surface); padding: 0 14px 0 40px; font-size: 14px; color: var(--cf-text); font-family: var(--cf-font-ui);
}
.cf-editor-root .cf-editor__search-field input:focus-visible { outline: none; border-color: var(--cf-brand); box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }

/* draw-deck header right side (count + grouping toggle) */
.cf-editor-root .cf-editor__block-aside { display: flex; align-items: center; gap: 9px; }

/* Coarse pointers (touch): text fields hold a 16px font - anything smaller makes iOS Safari auto-zoom the
   viewport on focus (the viewport meta deliberately leaves user scaling enabled). These tie specificity with
   the fine-pointer rules above and sit later in the file, so source order makes them win; the fmt-picker
   select is restated at its own higher specificity so it doesn't re-shrink the generic select bump. */
@media (pointer: coarse) {
    .cf-editor-root .cf-editor__input,
    .cf-editor-root .cf-editor__textarea,
    .cf-editor-root .cf-editor__select,
    .cf-editor-root .cf-editor__search-field input { font-size: 16px; }
    .cf-editor-root .cf-editor__fmt-picker .cf-editor__select { font-size: 16px; }
    .cf-editor-root .cf-editor__banner-btn,
    .cf-editor-root .cf-editor__banner-more summary,
    .cf-editor-root .cf-editor__banner .cf-editor__layout-seg button,
    .cf-editor-root .cf-editor-identity-summary__edit,
    .cf-editor-root .cf-editor-tapestry__rail-tabs .cf-editor-tabs__tab,
    .cf-editor-root .cf-editor__ledger-rail-tabs .cf-editor-tabs__tab,
    .cf-editor-root .cf-editor__curve-dock-control .cf-editor-tabs__tab,
    .cf-editor-root .cf-editor__curve-dock-toggle {
        min-height: 44px;
    }
}

/* ---------- Responsive application shell ---------- */
@media (max-width: 960px) {
    .cf-editor-root { height: 100vh; height: 100dvh; overflow: hidden; }
    .cf-editor-root .cf-editor__banner { padding: 0 10px; }
    .cf-editor-root .cf-editor__banner .cf-editor__banner-left { flex: 1 1 auto; min-width: 0; }
    .cf-editor-root .cf-editor__wordmark-wrap,
    .cf-editor-root .cf-editor__desktop-only { display: none; }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs {
        display: flex; min-width: 0; padding-left: 0; border-left: 0;
    }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs a { display: inline-flex; flex: 0 0 auto; }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs-sep { display: none; }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs-here {
        position: static; width: auto; height: auto; min-width: 0; margin: 0; padding: 0;
        border: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    }
    .cf-editor-root .cf-editor__banner .cf-editor__crumbs-here-name { max-width: min(48vw, 260px); }
    .cf-editor-root .cf-editor__banner .cf-editor__tools { flex: 0 0 auto; gap: 0; }
    .cf-editor-root .cf-editor__banner-more summary {
        width: 44px; height: 44px; padding: 0; justify-content: center;
    }
    .cf-editor-root .cf-editor__banner-more-pop {
        width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 72px); overflow-y: auto;
    }
    .cf-editor-root .cf-editor__more-mobile { display: block; }
    .cf-editor-root .cf-editor__mobile-only { display: flex; }
    .cf-editor-root .cf-editor__more-item { min-height: 44px; }
    .cf-editor-root .cf-editor__mobile-new { margin-top: 5px; border-top: 1px solid var(--cf-border); }
    .cf-editor-root .cf-editor-workspace--viewport-ready {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: 100vh;
        height: 100dvh;
        max-height: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }
    .cf-editor-root .cf-editor-workspace--viewport-ready .cf-editor-identity-summary { grid-row: 1; }
    .cf-editor-root .cf-editor-workspace--viewport-ready .cf-editor-workspace__tabs {
        background: var(--cf-surface);
        border-bottom: 1px solid var(--cf-border-strong);
        display: block;
        grid-row: 2;
        min-width: 0;
        overflow-x: auto;
    }
    .cf-editor-root .cf-editor-workspace__tabs .cf-editor-tabs { min-width: max-content; }
    .cf-editor-root .cf-editor-workspace__tabs .cf-editor-tabs__tab {
        min-height: 44px;
        padding: 0 18px;
    }
    .cf-editor-root .cf-editor-workspace--viewport-ready .cf-editor-workspace__body {
        display: block;
        grid-row: 3;
        min-height: 0;
        overflow: hidden;
    }
    .cf-editor-root .cf-editor-workspace--viewport-ready > .cf-deck-status {
        grid-row: 4;
        padding-bottom: calc(var(--cf-space-2) + env(safe-area-inset-bottom));
    }
    .cf-editor-root .cf-editor-identity-summary { padding: 0 12px; }
    .cf-editor-root .cf-editor-identity-summary__destiny { display: none; }
    .cf-editor-root .cf-editor-identity-editor--sheet {
        border: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
        height: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden auto;
        padding: 14px 16px;
    }
    .cf-editor-root .cf-editor-tapestry__rail { border: 0; display: contents; }
    .cf-editor-root .cf-editor-tapestry__rail-panel,
    .cf-editor-root .cf-editor-tapestry__cards-panel,
    .cf-editor-root .cf-editor-workspace__narrow-specialist > .cf-editor-workspace__panel {
        height: 100%;
        overflow: hidden auto;
    }
    .cf-editor-root .cf-editor-tapestry__cards-panel,
    .cf-editor-root .cf-editor-workspace__narrow-specialist > #cf-editor-cards-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .cf-editor-root .cf-editor-workspace__narrow-specialist > #cf-editor-cards-panel > .cf-browser {
        flex: 1 1 auto;
        min-height: 0;
    }
    /* Until the viewport callback arrives, retain the two-pane Tapestry as an internally scrolling
       fallback. It is denser than the approved mobile shell, but remains operable without JS. */
    .cf-editor-root .cf-editor-workspace:not(.cf-editor-workspace--viewport-ready) .cf-editor-tapestry {
        grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
    }
    .cf-editor-root .cf-editor-workspace:not(.cf-editor-workspace--viewport-ready) .cf-editor-identity-editor--row {
        display: flex;
        max-height: 42vh;
        overflow: auto;
    }
    /* the editor unbounds its height here for the stacked layout; the spread still owns the viewport
       so its body keeps an internal scroll. dvh tracks the mobile toolbar so the lane body isn't
       clipped beneath it, and both the top bar and its stat/toggle cluster may wrap on narrow screens. */
    .cf-editor-root .cf-editor__spread { height: 100vh; height: 100dvh; } /* 100vh floor for engines without dvh */
    .cf-editor-root .cf-editor__spread-top { flex-wrap: wrap; }
    .cf-editor-root .cf-editor__spread-meta { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   DECK SPREAD — full-screen analysis view: the deck laid out as a cost cascade of fanned card columns.
   ════════════════════════════════════════════════════════════ */
.cf-editor-root .cf-editor__spread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--cf-bg); }
.cf-editor-root .cf-editor__spread-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 24px; background: var(--cf-surface); border-bottom: 1px solid var(--cf-border);
    box-shadow: var(--cf-shadow-1); z-index: 5;
}
.cf-editor-root .cf-editor__spread-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cf-editor-root .cf-editor__spread-back { background: var(--cf-surface-2) !important; color: var(--cf-brand) !important; border: 1px solid var(--cf-border-strong) !important; }
.cf-editor-root .cf-editor__spread-back:hover { background: var(--cf-control-hover) !important; }
.cf-editor-root .cf-editor__spread-ttl {
    margin: 0; font-family: var(--cf-font-display); font-size: 19px; font-weight: 700; color: var(--cf-text);
    display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-editor-root .cf-editor__spread-ttl .cf-crest { width: 24px; height: 24px; flex: 0 0 auto; }
.cf-editor-root .cf-editor__spread-ttl-sub { color: var(--cf-text-muted); font-weight: 600; font-size: 15px; }
.cf-editor-root .cf-editor__spread-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cf-editor-root .cf-editor__spread-stat {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: var(--cf-radius-pill);
    background: var(--cf-surface-2); border: 1px solid var(--cf-border);
    font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--cf-text-muted);
}
.cf-editor-root .cf-editor__spread-stat b {
    font-family: var(--cf-font-display); font-size: 16px; font-weight: 700; color: var(--cf-text);
    letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}

.cf-editor-root .cf-editor__spread-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px 28px 56px; scrollbar-width: thin;
    background: radial-gradient(1100px 460px at 50% -8%, var(--cf-editor-glow), transparent 72%), var(--cf-bg);
}
.cf-editor-root .cf-editor__spread-body::-webkit-scrollbar { width: 12px; height: 12px; }
.cf-editor-root .cf-editor__spread-body::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 6px; border: 3px solid var(--cf-bg); }
.cf-editor-root .cf-editor__spread-body::-webkit-scrollbar-track { background: transparent; }
.cf-editor-root .cf-editor__spread-grid { display: flex; flex-direction: column; gap: 34px; width: max-content; }

.cf-editor-root .cf-editor__band-label {
    font-family: var(--cf-font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--cf-text-muted);
    margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.cf-editor-root .cf-editor__band-label::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--cf-brand); }
.cf-editor-root .cf-editor__band-label .cf-editor__bct {
    font-weight: 700; color: var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 10%, var(--cf-surface));
    border: 1px solid color-mix(in srgb, var(--cf-brand) 30%, var(--cf-surface));
    border-radius: var(--cf-radius-pill); padding: 1px 9px;
}
.cf-editor-root .cf-editor__cost-row { display: flex; gap: 14px; align-items: flex-start; }
.cf-editor-root .cf-editor__cost-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }

.cf-editor-root .cf-editor__cost-col-head {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
    margin-bottom: 12px; padding: 9px 12px 10px; border-radius: 12px;
    background: var(--cf-surface); border: 1px solid var(--cf-border); box-shadow: var(--cf-shadow-1);
    min-width: 70px;
}
.cf-editor-root .cf-editor__cost-col-head .cf-editor__coin {
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--cf-font-display); font-weight: 800; font-size: 17px; color: var(--cf-accent-contrast);
    background: radial-gradient(circle at 38% 30%, #f3dd8c, #cda52a 56%, #a07d18);
    border: 2px solid var(--cf-gold-border); box-shadow: inset 0 1px 2px rgb(255 255 255 / .6), inset 0 -3px 5px rgb(110 82 8 / .45);
}
.cf-editor-root .cf-editor__cost-col-head .cf-editor__ct {
    font-family: var(--cf-font-mono); font-size: 13px; font-weight: 700;
    color: var(--cf-text); font-variant-numeric: tabular-nums; line-height: 1;
}
.cf-editor-root .cf-editor__cost-col--empty .cf-editor__cost-col-head { opacity: .6; }
.cf-editor-root .cf-editor__cost-col--empty .cf-editor__cost-col-head .cf-editor__ct { color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__cost-col-head .cf-editor__peak-tag {
    position: absolute; top: -8px; right: -8px;
    font-family: var(--cf-font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cf-brand-contrast); background: var(--cf-brand); border: 1px solid var(--cf-brand-hover);
    border-radius: var(--cf-radius-pill); padding: 2px 7px; box-shadow: var(--cf-shadow-1);
}
.cf-editor-root .cf-editor__cost-col--peak .cf-editor__cost-col-head { border-color: var(--cf-brand); box-shadow: 0 0 0 1px var(--cf-brand), var(--cf-shadow-1); }

.cf-editor-root .cf-editor__cost-lane {
    position: relative; border-radius: 14px; padding: 10px;
    background: linear-gradient(180deg, var(--cf-lane-top) 0%, var(--cf-lane-bottom) 100%);
    border: 1px solid var(--cf-border);
    box-shadow: inset 0 1px 3px rgb(42 32 23 / .07), 0 1px 2px rgb(42 32 23 / .05);
}
.cf-editor-root .cf-editor__cost-col--peak .cf-editor__cost-lane { border-color: #e0c9c9; background: linear-gradient(180deg, #fdf2ee 0%, #f6e3da 100%); }
/* dark theme: the same blush signal dimmed to ember on the leather lanes (the light pinks would glare) */
[data-theme="dark"] .cf-editor-root .cf-editor__cost-col--peak .cf-editor__cost-lane { border-color: #5c3630; background: linear-gradient(180deg, #33231d 0%, #2a1c17 100%); }
.cf-editor-root .cf-editor__cost-col--empty .cf-editor__cost-lane {
    background: repeating-linear-gradient(135deg, transparent, transparent 8px, var(--cf-lane-hatch) 8px, var(--cf-lane-hatch) 16px);
    border-style: dashed; box-shadow: none; display: flex; align-items: center; justify-content: center;
}
.cf-editor-root .cf-editor__lane-empty {
    font-family: var(--cf-font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cf-text-muted);
}

.cf-editor-root .cf-editor__fan { position: relative; }
.cf-editor-root .cf-editor__fan-card {
    position: absolute; left: 0;
    filter: drop-shadow(0 3px 6px rgb(42 32 23 / .28));
    transition: transform .15s ease, filter .15s ease;
    border-radius: 6px;
}
/* Pointer-only: a touch surface reports (hover: none) yet still latches :hover onto the tapped card, which
   would strand it lifted (and at z-index 100) until the next tap lands elsewhere. */
@media (hover: hover) {
    .cf-editor-root .cf-editor__fan-card:hover {
        /* lift above sibling cards in the same lane (their inline z-index runs to the lane's card count);
           100 clears any realistic lane depth, and the lane's own stacking context keeps it under the
           app's sticky/dialog/toast chrome (z 1100–1400) regardless. */
        z-index: 100 !important;
        transform: translateY(-16px) scale(1.05);
        filter: drop-shadow(0 18px 32px rgb(42 32 23 / .5));
    }
}

/* ════════════════════════════════════════════════════════════
   Ledger 1 (ThronesDB-style) layout — a compact 44px identity bar over a dense sortable card-pool table
   (left) and the decklist + stats rail (right). The full identity strip expands from the bar on demand.
   Reuses the base .cf-editor__grid (flex/min-height/grid) and the rail primitives (.cf-editor__col/.cf-editor__block/.cf-editor__seg/.cf-editor__field-label).
   ════════════════════════════════════════════════════════════ */

/* layout switch in the banner — reuses .cf-editor__seg, restyled to sit on the crimson banner */
.cf-editor-root .cf-editor__banner .cf-editor__layout-seg { height: 30px; border-color: rgb(253 244 232 / .32); margin-right: 4px; }
.cf-editor-root .cf-editor__banner .cf-editor__layout-seg button { height: 30px; background: rgb(0 0 0 / .16); color: var(--cf-cream); }
.cf-editor-root .cf-editor__banner .cf-editor__layout-seg button + button { border-left: 1px solid rgb(253 244 232 / .22); }
.cf-editor-root .cf-editor__banner .cf-editor__layout-seg button:hover:not(.cf-editor__seg-opt--on) { background: rgb(0 0 0 / .30); }
.cf-editor-root .cf-editor__banner .cf-editor__layout-seg button.cf-editor__seg-opt--on { background: var(--cf-accent); color: var(--cf-accent-contrast); }
/* keep the banner's gold focus ring on the toggle — the scoped `.cf-editor__seg :focus-visible` (crimson inset) is
   invisible against the crimson banner, and out-specifies the banner default, so restate it here. */
.cf-editor-root .cf-editor__banner .cf-editor__layout-seg button:focus-visible { box-shadow: 0 0 0 2px #7c0f0f, 0 0 0 4px var(--cf-accent), 0 0 0 5px var(--cf-cream); }

/* Ledger is a worksheet: the rich compact pool owns the flexible left pane, while the persistent
   In Deck / Review rail owns a bounded editing surface on the right. Both panes carry their own
   min-size and scrolling boundary so a long table or deck list never pushes the workspace itself. */
.cf-editor-root .cf-editor__ledger-split {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 29%, 380px);
    min-height: 0; min-width: 0; overflow: hidden;
}
.cf-editor-root .cf-editor__ledger-pool {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: var(--cf-bg); border-right: 1px solid var(--cf-border);
}
.cf-editor-root .cf-editor__ledger-pool .cf-browser { flex: 1 1 auto; min-height: 0; }
.cf-editor-root .cf-editor__ledger-pool .cf-card-pool-table-host { container-type: inline-size; }
.cf-editor-root .cf-editor__ledger-pool .cf-card-pool-table__head { position: sticky; top: 0; z-index: 1; }
.cf-editor-root .cf-editor__ledger-rail {
    background: var(--cf-surface); display: flex; flex-direction: column;
    min-height: 0; min-width: 0;
}
.cf-editor-root .cf-editor__ledger-rail-tabs {
    background: var(--cf-surface); border-bottom: 1px solid var(--cf-border);
    flex: 0 0 auto; padding: 8px 12px;
}
.cf-editor-root .cf-editor__ledger-rail-tabs .cf-editor-tabs__tab {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--cf-text-muted); cursor: pointer; font: 700 12px/1 var(--cf-font-ui);
    min-height: 36px; padding: 0 12px;
}
.cf-editor-root .cf-editor__ledger-rail-tabs .cf-editor-tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--cf-brand); color: var(--cf-brand);
}
.cf-editor-root .cf-editor__ledger-rail-panel { flex: 1 1 auto; min-height: 0; overflow: hidden auto; }

/* the compact In Deck pane uses the tighter rail rhythm. */
.cf-editor-root .cf-editor__ledger-rail .cf-editor__block { padding: 12px 16px; }

/* Until the viewport callback replaces Ledger with the mobile workspace, retain a usable stacked fallback. */
@media (max-width: 960px) {
    .cf-editor-root .cf-editor__ledger-split { display: block; overflow: visible; }
    .cf-editor-root .cf-editor__ledger-pool { border-right: 0; border-bottom: 8px solid var(--cf-bg); min-height: 60vh; }
    .cf-editor-root .cf-editor__ledger-pool .cf-browser__scroll { overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════
   Curve layout — the cost-first board where the deck, laid out by wealth cost (the MTG builder's habit),
   is the dominant panel: a compact identity bar over a full-width editable board and bounded Cards /
   Review work dock. It owns the curve board chrome (.cf-editor__curve-bar/.cf-editor__curve-board) and
   the editable lanes (DeckCurve).
   ════════════════════════════════════════════════════════════ */

/* ---- Curve: full-width board over a collapsible work dock ---- */
.cf-editor-root .cf-editor__curve-work {
    display: grid;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.cf-editor-root .cf-editor__curve-dock {
    background: var(--cf-bg);
    border-top: 1px solid var(--cf-border-strong);
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.cf-editor-root .cf-editor__curve-dock-control {
    align-items: center;
    background: var(--cf-surface);
    display: flex;
    height: 48px;
    justify-content: space-between;
    min-width: 0;
    padding: 0 12px;
}
.cf-editor-root .cf-editor__curve-dock-control .cf-editor-tabs__tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--cf-text-muted);
    cursor: pointer;
    font: 700 12px/1 var(--cf-font-ui);
    min-height: 36px;
    padding: 0 12px;
}
.cf-editor-root .cf-editor__curve-dock-control .cf-editor-tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--cf-brand);
    color: var(--cf-brand);
}
.cf-editor-root .cf-editor__curve-dock-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-text-muted);
    cursor: pointer;
    display: inline-flex;
    font: 700 11px/1 var(--cf-font-ui);
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
}
.cf-editor-root .cf-editor__curve-dock-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
    outline: 0;
}
.cf-editor-root .cf-editor__curve-dock-panel {
    min-height: 0;
    min-width: 0;
}
.cf-editor-root .cf-editor__curve-dock-panel[hidden] { display: none; }
.cf-editor-root .cf-editor__curve-dock-cards {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cf-editor-root .cf-editor__curve-dock-cards > .cf-browser {
    flex: 1 1 auto;
    min-height: 0;
}
.cf-editor-root .cf-deck-review--curve {
    align-content: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    min-height: 0;
    min-width: 0;
    overflow: auto;
}
.cf-editor-root .cf-deck-review--curve > .cf-deck-review { display: contents; }

@media (min-width: 961px) and (min-height: 700px) {
    .cf-editor-root .cf-editor__curve-work {
        grid-template-rows: minmax(0, 1fr) clamp(216px, 28vh, 252px);
    }

    .cf-editor-root .cf-editor__curve-dock .cf-browser__scroll {
        min-height: 96px;
    }
}

@media (min-width: 961px) and (max-height: 699px) {
    .cf-editor-root .cf-editor__curve-work {
        grid-template-rows: minmax(0, 1fr) clamp(184px, 31vh, 216px);
    }

    .cf-editor-root .cf-editor__curve-dock .cf-browser__scroll {
        min-height: 72px;
    }
}

.cf-editor-root .cf-editor__curve-work--dock-collapsed {
    grid-template-rows: minmax(0, 1fr) 48px;
}

/* the board column: a slim header bar (title + stat chips + tile-style toggle) over the scrolling lanes */
.cf-editor-root .cf-editor__curve-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cf-bg); }
.cf-editor-root .cf-editor__curve-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 20px; background: var(--cf-surface); border-bottom: 1px solid var(--cf-border);
}
.cf-editor-root .cf-editor__curve-bar h3 {
    font-family: var(--cf-font-display); font-size: 15.5px; font-weight: 700; margin: 0;
    color: var(--cf-text); letter-spacing: .01em;
}
.cf-editor-root .cf-editor__curve-bar .cf-editor__meta { font-family: var(--cf-font-mono); font-size: 11px; color: var(--cf-text-muted); font-weight: 600; }
.cf-editor-root .cf-editor__curve-bar .cf-editor__seg button { height: 28px; padding: 0 10px; } /* optically level with the 30px stat chips */
.cf-editor-root .cf-editor__curve-bar-status { display: inline-flex; align-items: center; gap: 10px; }
/* legality chip in the board header — green when legal, crimson(=danger, not the brand) when not, muted
   while building. Mirrors the validation rail's verdict where the editing eyes actually are. */
.cf-editor-root .cf-editor__curve-legality {
    font-family: var(--cf-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .03em;
    padding: 3px 9px; border-radius: var(--cf-radius-pill); white-space: nowrap;
    border: 1px solid var(--cf-border); background: var(--cf-surface-2); color: var(--cf-text-muted);
}
.cf-editor-root .cf-editor__curve-legality--ok {
    color: var(--cf-success-fg); border-color: color-mix(in srgb, var(--cf-success) 38%, var(--cf-border));
    background: color-mix(in srgb, var(--cf-success) 8%, var(--cf-surface));
}
.cf-editor-root .cf-editor__curve-legality--bad {
    color: var(--cf-danger); border-color: color-mix(in srgb, var(--cf-danger) 42%, var(--cf-border));
    background: color-mix(in srgb, var(--cf-danger) 8%, var(--cf-surface));
}
.cf-editor-root .cf-editor__curve-bar-stats { margin-left: auto; display: inline-flex; gap: 8px; }
.cf-editor-root .cf-editor__curve-board {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding: 48px 22px; scrollbar-width: thin;
    background: radial-gradient(1100px 460px at 50% -8%, var(--cf-editor-glow), transparent 72%), var(--cf-bg);
}
.cf-editor-root .cf-editor__curve-board::-webkit-scrollbar { width: 12px; height: 12px; }
.cf-editor-root .cf-editor__curve-board::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 6px; border: 3px solid var(--cf-bg); }
/* .cf-editor__curve-empty itself is styled in EmptyState.razor.css beside its sibling empties */

/* ---- the editable curve lanes (DeckCurve) ---- */
.cf-editor-root .cf-editor__curve-cols { display: flex; gap: 14px; align-items: flex-start; width: max-content; }
.cf-editor-root .cf-editor__curve-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.cf-editor-root .cf-editor__curve-col .cf-editor__cost-col-head { margin-bottom: 8px; } /* heads sit close to their pile */
.cf-editor-root .cf-editor__curve-col--empty .cf-editor__cost-col-head { opacity: .6; }
.cf-editor-root .cf-editor__curve-col--empty .cf-editor__cost-col-head .cf-editor__ct { color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__curve-col--peak .cf-editor__cost-col-head { border-color: var(--cf-brand); box-shadow: 0 0 0 1px var(--cf-brand), var(--cf-shadow-1); }
.cf-editor-root .cf-editor__curve-divider { flex: 0 0 auto; align-self: stretch; width: 2px; border-radius: 2px; background: var(--cf-border-strong); opacity: .5; margin: 0 6px; }
/* the quest pile's coin is crimson — a different deck, deliberately off the gold curve */
.cf-editor-root .cf-editor__cost-col-head .cf-editor__coin--quest {
    background: radial-gradient(circle at 38% 30%, #e08585, #b01818 56%, #7c0f0f);
    border-color: #5e0a0a; color: var(--cf-cream); /* the coin's crimson is pinned — cream ink in every theme */
}

.cf-editor-root .cf-editor__curve-lane {
    border-radius: 14px;
    background: linear-gradient(180deg, var(--cf-lane-top) 0%, var(--cf-lane-bottom) 100%);
    border: 1px solid var(--cf-border);
    box-shadow: inset 0 1px 3px rgb(42 32 23 / .07), 0 1px 2px rgb(42 32 23 / .05);
}
/* the peak signal is the crimson head ring + "peak" tag alone — the lane body stays the one consistent
   vellum (a third pink-fill signal was visual overkill) */
.cf-editor-root .cf-editor__curve-lane-empty {
    width: 170px; min-height: 132px; display: flex; align-items: center; justify-content: center; /* matches the frame lanes — no width wobble across the curve */
    border-style: dashed; box-shadow: none;
    background: repeating-linear-gradient(135deg, transparent, transparent 8px, var(--cf-lane-hatch) 8px, var(--cf-lane-hatch) 16px);
}
.cf-editor-root .cf-editor__curve-lane-empty span {
    font-family: var(--cf-font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cf-text-muted); /* muted (not faint) — 11px needs the AA 4.5:1 */
}

/* bars tile style: compact slot rows stacked in the lane, with faint type sub-headers between groups
   (Units → Attachments → …) so a tall lane reads as a few composed groups instead of a flat wall. The
   cost circle is hidden (the lane IS the cost) and the steppers float over the row's right edge on hover
   instead of reserving a grid column, so names keep their room in the narrow lanes. */
.cf-editor-root .cf-editor__curve-bars { width: 248px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cf-editor-root .cf-editor__curve-bars .cf-editor__lane-type {
    font-family: var(--cf-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--cf-text-muted);
    margin: 7px 2px 2px; padding-bottom: 3px; border-bottom: 1px solid var(--cf-border);
}
.cf-editor-root .cf-editor__curve-bars .cf-editor__lane-type:first-child { margin-top: 1px; }
.cf-editor-root .cf-editor__curve-bars .cf-editor__slot-row { grid-template-columns: auto minmax(0, 1fr) 22px; }
.cf-editor-root .cf-editor__curve-bars .cf-editor__slot-row .cf-editor__slot-row-b-cost { display: none; }
.cf-editor-root .cf-editor__curve-bars .cf-editor__slot-row:hover { background: var(--cf-surface); }
.cf-editor-root .cf-editor__curve-bars .cf-editor__slot-row .cf-editor__slot-row-controls {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 8px;
    padding: 1px 2px; box-shadow: var(--cf-shadow-1);
}

/* frames tile style: the Deck Spread's cascade, but one frame per title + copy badge + steppers.
   Hover/focus lifts via z-index only (no transform) so the steppers stay where the pointer is. */
.cf-editor-root .cf-editor__curve-frames { padding: 10px; }
.cf-editor-root .cf-editor__curve-fan { position: relative; }
.cf-editor-root .cf-editor__curve-card {
    position: absolute; left: 0; border-radius: 6px;
    filter: drop-shadow(0 3px 6px rgb(42 32 23 / .28));
    transition: filter var(--cf-dur-fast) ease;
}
.cf-editor-root .cf-editor__curve-card:hover, .cf-editor-root .cf-editor__curve-card:focus-within {
    z-index: 100 !important;
    filter: drop-shadow(0 14px 26px rgb(42 32 23 / .45));
}
.cf-editor-root .cf-editor__curve-qty {
    position: absolute; top: 7px; right: 7px; z-index: 2;
    font-family: var(--cf-font-mono); font-size: 11px; font-weight: 700; color: var(--cf-accent-contrast);
    background: var(--cf-accent); border: 1px solid var(--cf-gold-border); border-radius: var(--cf-radius-pill);
    padding: 1px 7px; box-shadow: var(--cf-shadow-1);
}
.cf-editor-root .cf-editor__curve-controls {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: inline-flex; gap: 3px; padding: 2px;
    background: rgb(255 253 248 / .92); border-radius: 8px; box-shadow: var(--cf-shadow-1);
    opacity: 0; transition: opacity var(--cf-dur-fast);
}
.cf-editor-root .cf-editor__curve-card:hover .cf-editor__curve-controls, .cf-editor-root .cf-editor__curve-card:focus-within .cf-editor__curve-controls { opacity: 1; }
/* Touch: controls are permanently visible (no hover), so they must stop overlaying content — bar-tile
   steppers return to the grid (rows grow instead of bleeding over neighbours), and on frame tiles the
   strip right-anchors while the copy badge moves left so the two never cover each other. */
@media (hover: none) {
    .cf-editor-root .cf-editor__curve-controls { opacity: 1; left: auto; right: 4px; transform: none; }
    .cf-editor-root .cf-editor__curve-qty { left: 7px; right: auto; }
    .cf-editor-root .cf-editor__curve-bars .cf-editor__slot-row { grid-template-columns: auto minmax(0, 1fr) 22px auto; }
    .cf-editor-root .cf-editor__curve-bars .cf-editor__slot-row .cf-editor__slot-row-controls {
        position: static; transform: none; background: none; border: 0; padding: 0; box-shadow: none;
    }
}
/* Coarse pointers (these rules tie specificity with their fine-pointer counterparts and sit LATER
   in the file — source order is what makes them win):
   - frame strips: 44px steppers, and remove-all is dropped — the remaining strip reserves a separate
     44px badge track on the 150px card so the controls cannot overlap it; minus reaches zero anyway
   - bar lanes / quest tiles: the in-flow 44px steppers eat ~136px, so the lanes widen to keep names
   - the curve-bar tile toggle honours the §8 ~44px floor like every other seg */
@media (pointer: coarse) {
    .cf-editor-root .cf-editor__curve-controls {
        right: 0;
        max-width: calc(100% - 44px);
    }
    .cf-editor-root .cf-editor__curve-qty {
        box-sizing: border-box;
        max-width: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn { width: 44px; height: 44px; }
    .cf-editor-root .cf-editor__curve-controls .cf-editor__step-btn--remove { display: none; }
    .cf-editor-root .cf-editor__curve-bars { width: 332px; }
    .cf-editor-root .cf-editor__curve-bar .cf-editor__seg button { height: 44px; padding: 0 14px; }
}

@media (max-width: 960px) {
    .cf-editor-root .cf-editor__curve-main--mobile {
        max-width: 100%;
        overflow: hidden;
    }
    .cf-editor-root .cf-editor__curve-main--mobile > .cf-editor__curve-main {
        height: 100%;
    }
    .cf-editor-root .cf-editor__curve-mobile-board {
        flex: 1 1 auto;
        max-width: 100%;
        min-height: 0;
        overflow: auto;
        padding: 12px;
    }
    .cf-editor-root .cf-editor__curve-main--mobile .cf-editor__curve-bar {
        padding: 8px 12px;
    }
    .cf-editor-root .cf-editor__curve-main--mobile .cf-editor__curve-bar-stats {
        margin-left: 0;
    }
}

/* ════════════════════════════════════════════════════════════
   SETUP SIMULATOR — full-screen "Test setup" analysis view (sibling to the Deck Spread): draw an opening
   hand, mark setup placements, read the wealth/curve figures.
   On the editor this fills the viewport flex column (flex:1) and the body scrolls internally; on the share
   page the host .cf-editor-root is content-height, so it flows naturally and the page scrolls.
   ════════════════════════════════════════════════════════════ */
.cf-editor-root .cf-editor__sim { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--cf-bg); }
.cf-editor-root .cf-editor__sim-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 24px; background: var(--cf-surface); border-bottom: 1px solid var(--cf-border);
    box-shadow: var(--cf-shadow-1); z-index: 5;
}
.cf-editor-root .cf-editor__sim-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cf-editor-root .cf-editor__sim-back { background: var(--cf-surface-2) !important; color: var(--cf-brand) !important; border: 1px solid var(--cf-border-strong) !important; }
.cf-editor-root .cf-editor__sim-back:hover { background: var(--cf-control-hover) !important; }
.cf-editor-root .cf-editor__sim-ttl {
    margin: 0; font-family: var(--cf-font-display); font-size: 19px; font-weight: 700; color: var(--cf-text);
    display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-editor-root .cf-editor__sim-ttl .cf-crest { width: 24px; height: 24px; flex: 0 0 auto; }
.cf-editor-root .cf-editor__sim-ttl-sub { color: var(--cf-text-muted); font-weight: 600; font-size: 15px; }
.cf-editor-root .cf-editor__sim-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cf-editor-root .cf-editor__sim-stat {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: var(--cf-radius-pill);
    background: var(--cf-surface-2); border: 1px solid var(--cf-border);
    font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--cf-text-muted);
}
.cf-editor-root .cf-editor__sim-stat b {
    font-family: var(--cf-font-display); font-size: 16px; font-weight: 700; color: var(--cf-text);
    letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}

.cf-editor-root .cf-editor__sim-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 28px 48px; scrollbar-width: thin;
    display: flex; gap: 28px; align-items: flex-start;
    background: radial-gradient(1100px 460px at 50% -8%, var(--cf-editor-glow), transparent 72%), var(--cf-bg);
}
.cf-editor-root .cf-editor__sim-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.cf-editor-root .cf-editor__sim-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cf-editor-root .cf-editor__sim-h { margin: 0; font-family: var(--cf-font-display); font-size: 16px; font-weight: 700; color: var(--cf-text); }
.cf-editor-root .cf-editor__sim-handno { color: var(--cf-text-muted); font-weight: 600; font-size: 13px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cf-editor-root .cf-editor__sim-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* The two non-gold actions reuse .cf-editor__banner-btn, which is skinned for the DARK crimson banner
   (cream-on-black) — unreadable on the light analysis body. Re-skin them like .cf-editor__sim-back
   (crimson-on-surface), and give them the disabled state the banner context never needed. The gold
   "New hand" keeps its own --gold skin. */
.cf-editor-root .cf-editor__sim-actions .cf-editor__banner-btn:not(.cf-editor__banner-btn--gold) {
    background: var(--cf-surface-2); color: var(--cf-brand); border: 1px solid var(--cf-border-strong);
}
.cf-editor-root .cf-editor__sim-actions .cf-editor__banner-btn:not(.cf-editor__banner-btn--gold):hover { background: var(--cf-control-hover); }
.cf-editor-root .cf-editor__sim-actions .cf-editor__banner-btn:disabled { opacity: .45; cursor: not-allowed; }
.cf-editor-root .cf-editor__sim-edited { color: var(--cf-text-muted); font-weight: 600; }
.cf-editor-root .cf-editor__sim-hint { margin: 0; font-size: 12px; color: var(--cf-text-muted); }

.cf-editor-root .cf-editor__sim-hand { display: flex; flex-wrap: wrap; gap: 14px; }
.cf-editor-root .cf-editor__sim-card {
    appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 7px; transition: transform var(--cf-dur-fast);
}
@media (hover: hover) { .cf-editor-root .cf-editor__sim-card:not(:disabled):hover { transform: translateY(-3px); } }  /* pointer-only: a latched touch :hover would strand the lift */
/* Focus is a button-level outline so it composites WITH the inner open/placed ring (a focused placed
   card keeps its crimson ring AND gains the focus ring) rather than replacing it. */
.cf-editor-root .cf-editor__sim-card:focus-visible { outline: 2px solid var(--cf-gold-border); outline-offset: 3px; border-radius: 12px; }
.cf-editor-root .cf-editor__sim-frame { display: block; border-radius: 10px; box-shadow: 0 0 0 1px var(--cf-border); transition: box-shadow var(--cf-dur-fast); }
.cf-editor-root .cf-editor__sim-card--open .cf-editor__sim-frame { box-shadow: 0 0 0 1px var(--cf-border-strong); }
.cf-editor-root .cf-editor__sim-card--open:hover .cf-editor__sim-frame { box-shadow: 0 0 0 2px var(--cf-gold-border); }
.cf-editor-root .cf-editor__sim-card--placed .cf-editor__sim-frame { box-shadow: 0 0 0 3px var(--cf-brand), var(--cf-shadow-1); }
.cf-editor-root .cf-editor__sim-card--off { cursor: default; }
.cf-editor-root .cf-editor__sim-card--off .cf-editor__sim-frame { opacity: .5; filter: grayscale(.4); }

.cf-editor-root .cf-editor__sim-chip { font-family: var(--cf-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.cf-editor-root .cf-editor__sim-chip-on { display: inline-flex; align-items: center; gap: 3px; color: var(--cf-brand-contrast); background: var(--cf-brand); border-radius: var(--cf-radius-pill); padding: 3px 9px; }
.cf-editor-root .cf-editor__sim-chip-on .cf-icon { width: 12px; height: 12px; }
.cf-editor-root .cf-editor__sim-chip-open { color: var(--cf-text-muted); background: var(--cf-surface-2); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-pill); padding: 3px 9px; }
.cf-editor-root .cf-editor__sim-chip-off { color: var(--cf-text-muted); padding: 3px 0; }

.cf-editor-root .cf-editor__sim-summary { display: flex; flex-direction: column; gap: 9px; max-width: 540px; margin-top: 4px; }
.cf-editor-root .cf-editor__sim-verdict { margin: 0; font-size: 13px; font-weight: 600; color: var(--cf-text); }
.cf-editor-root .cf-editor__sim-verdict--bad { color: var(--cf-danger); }

.cf-editor-root .cf-editor__sim-rail {
    flex: 0 0 304px; display: flex; flex-direction: column; gap: 16px;
    background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 14px;
    padding: 16px; box-shadow: var(--cf-shadow-1);
}
.cf-editor-root .cf-editor__sim-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cf-editor-root .cf-editor__sim-rail-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-editor-root .cf-editor__sim-toggle-label { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__sim-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-editor-root .cf-editor__sim-fig { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--cf-surface-2); border: 1px solid var(--cf-border); border-radius: 10px; }
.cf-editor-root .cf-editor__sim-fig b { font-family: var(--cf-font-display); font-size: 22px; font-weight: 800; color: var(--cf-text); font-variant-numeric: tabular-nums; line-height: 1; }
.cf-editor-root .cf-editor__sim-fig span { font-size: 11px; color: var(--cf-text-muted); font-weight: 600; }
.cf-editor-root .cf-editor__sim-fig small { font-weight: 600; }

.cf-editor-root .cf-editor__sim-hist { display: flex; flex-direction: column; gap: 8px; }
.cf-editor-root .cf-editor__sim-hist-h { margin: 0; font-family: var(--cf-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-text-muted); }
.cf-editor-root .cf-editor__sim-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.cf-editor-root .cf-editor__sim-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.cf-editor-root .cf-editor__sim-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cf-brand), color-mix(in srgb, var(--cf-brand) 65%, var(--cf-surface))); }
.cf-editor-root .cf-editor__sim-bar-x { font-family: var(--cf-font-mono); font-size: 10px; color: var(--cf-text-muted); font-variant-numeric: tabular-nums; }

.cf-editor-root .cf-editor__sim-rail-foot { margin: 0; font-size: 11px; line-height: 1.5; color: var(--cf-text-muted); display: flex; flex-direction: column; gap: 6px; }
.cf-editor-root .cf-editor__sim-rail-foot span { display: inline-flex; align-items: center; gap: 5px; color: var(--cf-text); font-weight: 600; }
.cf-editor-root .cf-editor__sim-rail-foot .cf-icon { width: 13px; height: 13px; color: var(--cf-brand); flex: 0 0 auto; }

/* Stack the rail under the hand on narrow viewports; let the top bar wrap. */
@media (max-width: 960px) {
    .cf-editor-root .cf-editor__sim-body { flex-direction: column; }
    .cf-editor-root .cf-editor__sim-rail { flex: 0 0 auto; width: 100%; align-self: stretch; }
    .cf-editor-root .cf-editor__sim-top { flex-wrap: wrap; }
    .cf-editor-root .cf-editor__sim-meta { flex-wrap: wrap; }
}