/* =============================================================================
   figswap.css: FigSwap pages (/figs/, app fig_trading). 2026-11 redesign.
   Loaded site-wide after shell.css. Replaces the old "Fig Trading" block that
   lived at the end of style.css.
   - Inside .figswap raspberry is the only accent: --accent and friends are
     remapped to the --fig tokens, so .btn, links, tags, focus rings and
     checkboxes all turn raspberry with no per-component overrides.
   - One bold element per page: the "needs you" strip (home), the "Next step"
     card (trade page). Everything else is plain sections with hairlines.
   - Variety label: cultivar names in the display serif on a hairline label.
   - Status (unverified true to type, dormant hold, paused) is text + colour.
   - Breakpoints 600 / 840 only. Coarse pointers get 44px targets.
   ============================================================================= */

/* ---------- Accent scope ---------- */
.figswap {
    --accent:      var(--fig);
    --accent-2:    var(--fig-text);
    --accent-deep: var(--fig-text);
    --accent-soft: var(--fig-soft);
    --accent-glow: var(--fig-soft);
    --on-accent:   var(--on-fig);
    --focus:       var(--fig-text);
}
.figswap a { color: var(--fig-text); }
.figswap a:hover { color: var(--fig-text); }
.figswap .btn, .figswap .btn:hover { color: var(--on-fig); }
.figswap .btn-secondary, .figswap .btn-secondary:hover,
.figswap .btn-ghost, .figswap .btn-ghost:hover { color: var(--text); }
.figswap .btn-danger, .figswap .btn-danger:hover { color: var(--danger); }
.figswap .btn > svg, .figswap .btn-link > svg { flex: none; }
.figswap .btn { gap: 0.5rem; }

/* ---------- Page frame ---------- */
.fig-page { width: 100%; }
.fig-prose { max-width: var(--measure); }
.fig-head { margin-bottom: 1rem; }
.fig-head h1 a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.fig-home-head, .fig-lb-hero, .fig-public-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem;
}
.fig-back { margin: 0 0 0.75rem; }
.fig-back a {
    display: inline-flex; align-items: center; gap: 0.375rem; min-height: 32px;
    font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.fig-dim { color: var(--text-2); }
.fig-small { font-size: var(--fs-small); }
.fig-block { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.fig-count { color: var(--text-2); font-weight: 500; }
.fig-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fig-meta {
    list-style: none; margin: 0.625rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem;
    color: var(--text-2); font-size: var(--fs-small);
}
.fig-meta li { max-width: none; }
.fig-trade-state { margin: 0.5rem 0 0; }
.fig-note-line { margin: 0 0 1.25rem; color: var(--text-2); }

/* ---------- Section bar ---------- */
.fig-section-bar {
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.fig-section-bar::-webkit-scrollbar { display: none; }
.fig-section-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 0.25rem; min-width: max-content;
}
.fig-section-list li { max-width: none; }
.figswap .fig-section-list a {
    display: inline-flex; align-items: center;
    min-height: var(--tap); padding: 0 0.875rem;
    color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.figswap .fig-section-list a:hover { color: var(--text); background: var(--surface-hi); text-decoration: none; }
.figswap .fig-section-list a[aria-current] {
    color: var(--fig-text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--fig);
}
@media (max-width: 599.98px) {
    .fig-section-bar { margin-left: -16px; margin-right: -16px; padding: 0 16px; margin-bottom: 1.5rem; }
    .figswap .fig-section-list a { padding: 0 0.75rem; }
}

/* ---------- Sections ---------- */
.fig-card { margin: 0 0 2.25rem; }
.fig-card > h2, .fig-card-head h2, .fig-card > header h2 { font-size: var(--fs-large); margin: 0 0 0.75rem; }
.fig-card h3 { font-size: var(--fs-body); margin: 0 0 0.5rem; }
.fig-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.fig-card-head h2 { margin: 0; }
.fig-card-head > a { font-size: var(--fs-small); font-weight: 600; }
.fig-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; align-items: start; }
@media (max-width: 839.98px) { .fig-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.fig-more-link { margin: 0.75rem 0 0; }
.fig-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.fig-inline-form { display: inline-flex; align-items: center; gap: 0.75rem; margin: 0; }
.fig-hint, .fig-disclaimer { color: var(--text-2); font-size: var(--fs-small); max-width: var(--measure); }
.fig-disclaimer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Shared field helpers */
.fig-stacked { display: flex; flex-direction: column; gap: 0.375rem; font-weight: 600; }
.fig-stacked .field-hint { margin: 0; font-weight: 400; }
.fig-stacked input, .fig-stacked select, .fig-stacked textarea { font-weight: 400; }
.fig-field-label { display: block; font-weight: 600; }
.fig-check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 32px; }
.fig-field { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.fig-field-block { display: flex; flex-direction: column; gap: 0.375rem; }
.fig-field-block label { font-weight: 600; }
.fig-form { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.fig-link-danger, .figswap .fig-link-danger:hover { color: var(--danger); }
@media (pointer: coarse) { .fig-check { min-height: var(--tap); } }

/* ---------- Variety label ----------
   The cultivar name in the display serif on a plain hairline label, like a
   nursery stake tag. Used for haves, wishes and variety pages only. */
.fig-variety {
    display: inline-block;
    padding: 0.0625rem 0.5rem 0.125rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    font-variation-settings: "opsz" 24;
    overflow-wrap: anywhere;
}
.figswap a.fig-variety { color: var(--text); text-decoration: none; }
.figswap a.fig-variety:hover { border-color: var(--fig); color: var(--text); text-decoration: none; }
.fig-variety-lg { font-size: inherit; padding: 0.125rem 0.75rem 0.25rem; border-width: 1px; line-height: 1.15; }
h2 .fig-variety { font-size: var(--fs-large); }

/* ---------- Tags ---------- */
.fig-tag {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent; border-radius: 999px;
    background: var(--surface-hi); color: var(--text-2);
    font-size: var(--fs-caption); font-weight: 600; line-height: 1.5;
    white-space: nowrap; vertical-align: middle;
}
.fig-tag-next { background: var(--fig); color: var(--on-fig); }
.fig-tag-ttt { background: var(--amber-soft); color: var(--amber-text); border-color: transparent; }
.fig-tag-btn { font: inherit; font-size: var(--fs-caption); font-weight: 600; cursor: pointer; min-height: 24px; }
.fig-tag-btn:hover { box-shadow: inset 0 0 0 1px var(--amber-text); }
.fig-tag svg { width: 14px; height: 14px; flex: none; }
.fig-pending { margin-top: 0.375rem; width: fit-content; }
@media (pointer: coarse) {
    .fig-tag-btn { position: relative; }
    .fig-tag-btn::after { content: ""; position: absolute; inset: -10px -2px; }
}

/* ---------- "?" tips (tap, hover or keyboard focus opens; title= never shows on touch) ---------- */
.fig-tip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.fig-tip-btn {
    position: relative;
    width: 24px; height: 24px; min-height: 0; padding: 0;
    border-radius: 12px; border: 1px solid var(--field-border);
    background: var(--surface); color: var(--text-2);
    font: inherit; font-size: var(--fs-caption); font-weight: 700; line-height: 1;
    cursor: pointer;
}
.fig-tip-btn:hover, .fig-tip.open .fig-tip-btn { border-color: var(--fig); color: var(--fig-text); }
@media (pointer: coarse) { .fig-tip-btn::after { content: ""; position: absolute; inset: -10px; } }
.fig-tip-body {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    width: max-content; max-width: min(18rem, 80vw);
    padding: 0.625rem 0.75rem; border-radius: var(--radius-md);
    background: var(--text); color: var(--bg);
    font-size: var(--fs-small); font-weight: 400; line-height: 1.45;
    text-align: left; white-space: normal;
}
.fig-tip:hover > .fig-tip-body, .fig-tip:focus-within > .fig-tip-body, .fig-tip.open > .fig-tip-body { display: block; }
.fig-pause-wrap:has(details[open]) > .fig-tip-body { display: none; }
th .fig-tip-body { right: 0; left: auto; }

/* ---------- Buttons local to FigSwap ---------- */
.fig-link-btn {
    background: none; border: 0; padding: 0.25rem; min-height: 24px;
    color: var(--fig-text); font: inherit; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fig-link-btn:hover { color: var(--text); }
.fig-btn-progress { white-space: nowrap; }

/* ---------- Home ---------- */
.fig-home-head .page-head, .fig-home-head h1 { margin: 0; }
/* FigSwap mark beside the home-page heading only. */
.figswap {
    --fig-logo-green: #7f9c3c; --fig-logo-purple: #6d2a48; --fig-logo-stem: #8a5a3b;
}
[data-theme="dark"] .figswap {
    --fig-logo-green: #a3c25a; --fig-logo-purple: #c0688e; --fig-logo-stem: #b4825a;
}
.fig-home-title { display: flex; align-items: center; gap: 0.625rem; font-size: var(--fs-h2); }
.fig-logo { flex: 0 0 auto; width: 1.5em; height: 1.5em; }
.fig-logo-ring { stroke: var(--fig); }
.fig-logo-head { fill: var(--fig); }
.fig-logo-stem { stroke: var(--fig-logo-stem); }
.fig-logo-green { fill: var(--fig-logo-green); }
.fig-logo-purple { fill: var(--fig-logo-purple); }
.fig-intro { max-width: var(--measure); }
.fig-intro p:first-child { font-size: var(--fs-large); line-height: 1.45; color: var(--text); }
.fig-start {
    padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
}
.fig-start h2 { font-size: var(--fs-h3); margin: 0 0 0.5rem; }
.fig-start p { margin: 0 0 1rem; max-width: var(--measure); }
.fig-start-steps { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
.fig-start-alt { margin: 0; font-size: var(--fs-small); }
@media (max-width: 599.98px) { .fig-start { padding: 1.25rem 1rem; } .fig-start-steps .btn { width: 100%; } }

/* The "needs you" strip: the one bold element on FigSwap home. */
.fig-needs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
    margin: 0 0 2.5rem;
}
.figswap .fig-need {
    display: flex; flex-direction: column; gap: 0.25rem;
    min-height: var(--tap-primary);
    padding: 1rem 1.125rem; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); text-decoration: none;
}
.figswap .fig-need:hover { border-color: var(--fig); color: var(--text); text-decoration: none; }
.fig-need strong { font-size: var(--fs-large); font-weight: 600; line-height: 1.25; }
.fig-need-kicker { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.fig-need-link { font-size: var(--fs-small); font-weight: 600; color: var(--fig-text); text-decoration: underline; text-underline-offset: 3px; }
.figswap .fig-need-hot { background: var(--fig); border-color: var(--fig); color: var(--on-fig); }
.figswap .fig-need-hot:hover { background: var(--fig-text); border-color: var(--fig-text); color: var(--on-fig); }
.fig-need-hot .fig-need-kicker, .fig-need-hot .fig-need-link { color: var(--on-fig); }
@media (max-width: 839.98px) { .fig-needs { grid-template-columns: minmax(0, 1fr); } }

.fig-home-lower { margin-top: 0.5rem; }
.fig-list-counts { margin: 0 0 1rem; display: grid; gap: 0; border-top: 1px solid var(--border); }
.fig-list-counts > div {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    min-height: var(--tap); padding: 0.25rem 0; border-bottom: 1px solid var(--border);
}
.fig-list-counts dt { font-weight: 500; }
.fig-list-counts dd { margin: 0; display: inline-flex; align-items: center; gap: 0.75rem; }
.fig-list-counts dd a { font-weight: 600; }
.fig-list-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.fig-share-wrap { margin: 0; }
.fig-share-wrap[open] { flex-basis: 100%; }
.fig-share-wrap > summary { list-style: none; display: inline-flex; cursor: pointer; }
.fig-share-wrap > summary::-webkit-details-marker { display: none; }
.fig-share-wrap[open] > summary { border-color: var(--fig); }
.fig-invite-note { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: var(--fs-small); }

/* Share and invite panels */
.fig-share {
    margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); display: grid; gap: 0.625rem;
}
.fig-share p { margin: 0; }
.fig-share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.fig-share-row input, .fig-share-row textarea { flex: 1 1 14rem; min-width: 0; width: 100%; }
.fig-share-btns { display: flex; gap: 0.5rem; }
.fig-share-btns .btn { flex: 1; }
.fig-share-sub { margin: 0.5rem 0 0; font-size: var(--fs-body); }
.fig-signature-img { max-width: 100%; height: auto; border: 1px solid var(--border); }
.fig-snippet { flex-direction: column; align-items: stretch; }
.fig-snippet .btn { align-self: flex-start; }
.fig-share-points { font-size: var(--fs-small); }
.fig-public-share { flex: 0 1 26rem; }

/* ---------- Matches ---------- */
.fig-match-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.fig-match {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
    max-width: none; padding: 0.875rem 0; border-bottom: 1px solid var(--border);
}
.fig-match-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 18rem; }
.figswap .fig-match-who { font-weight: 600; color: var(--text); }
.fig-match-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.fig-match-note { color: var(--text-2); font-size: var(--fs-small); }
.fig-match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fig-undo {
    display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem;
    padding: 0.5rem 0.875rem; border-radius: var(--radius-md); background: var(--surface-hi);
}

/* ---------- "..." menus (<details>; placement JS lives in _tip_script.html) ---------- */
.fig-menu { position: relative; display: inline-block; }
.fig-menu > summary { list-style: none; }
.fig-menu > summary::-webkit-details-marker { display: none; }
.fig-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap);
    border-radius: var(--radius-md); border: 1px solid var(--field-border);
    background: var(--surface); color: var(--text-2); cursor: pointer;
}
/* Three dots drawn in CSS (no glyph); the summary carries an aria-label. */
.fig-menu-btn::before {
    content: ""; width: 4px; height: 4px; border-radius: 2px; background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
}
.fig-menu[open] .fig-menu-btn, .fig-menu-btn:hover { border-color: var(--text-3); color: var(--text); background: var(--surface-hi); }
.fig-menu-pop {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
    min-width: 13rem; padding: 0.375rem;
    border-radius: var(--radius-lg); border: 1px solid var(--field-border);
    background: var(--surface);
    display: flex; flex-direction: column;
}
.figswap .fig-menu-pop a, .fig-menu-pop button {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; min-height: var(--tap); padding: 0 0.75rem;
    border: 0; border-radius: var(--radius-md); background: none;
    color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; text-decoration: none; cursor: pointer;
}
.figswap .fig-menu-pop a:hover, .fig-menu-pop button:hover { background: var(--surface-hi); color: var(--text); text-decoration: none; }
.fig-menu-pop .fig-menu-danger { color: var(--danger); }
.fig-menu-pop .fig-menu-danger:hover { color: var(--danger); background: var(--red-soft); }
.fig-menu-pop form { margin: 0; }
.fig-menu-pop svg { width: 16px; height: 16px; flex: none; }
.fig-menu-note {
    padding: 0.5rem 0.75rem; margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-small);
}
.fig-menu-pop .fig-tip-body { left: auto; right: 0; }

/* ---------- Trade rows ---------- */
.fig-trade-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    padding: 0.875rem 0; border-top: 1px solid var(--border);
}
.fig-trade-row:first-of-type { border-top: 0; }
.fig-trade-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 20rem; }
.figswap .fig-trade-who { font-weight: 600; color: var(--text); }
.fig-trade-lines { color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.fig-trade-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; font-size: var(--fs-small); }
.fig-trade-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fig-trade-row.fig-trade-needs {
    margin-top: 0.5rem; padding: 0.875rem 1rem;
    border: 2px solid var(--fig); border-radius: var(--radius-lg);
}
.fig-trade-row.fig-trade-needs + .fig-trade-row { border-top: 0; }
.fig-trade-menu .fig-menu-pop { min-width: 17rem; }

/* ---------- Dormant hold (frost blue, text + icon) ---------- */
.fig-trade-row.fig-trade-held {
    margin-top: 0.5rem; padding: 0.875rem 1rem;
    background: var(--hold-soft); border: 1px solid var(--hold-border); border-radius: var(--radius-lg);
    color: var(--hold-text);
}
.fig-trade-row.fig-trade-held + .fig-trade-row { border-top: 0; }
.figswap .fig-trade-held a, .fig-trade-held .fig-dim, .fig-trade-held .fig-trade-lines { color: var(--hold-text); }
.fig-hold-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.125rem 0.5rem; border-radius: 999px;
    background: var(--hold-fill); color: var(--on-hold);
    font-size: var(--fs-caption); font-weight: 600; line-height: 1.5;
}
.fig-hold-badge svg { width: 12px; height: 12px; }
/* Frost mark leading each held trade row, so held trades read at a glance. */
.fig-trade-frost { display: inline-flex; vertical-align: -4px; margin-right: 0.375rem; color: var(--hold-text); }
.fig-hold-line { flex-basis: 100%; margin: 0; font-size: var(--fs-small); color: var(--hold-text); }
.fig-held {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-start; justify-content: space-between;
    margin: 0 0 1.5rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg);
    background: var(--hold-soft); border: 1px solid var(--hold-border); color: var(--hold-text);
}
.fig-held-text { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 22rem; }
.fig-held-text strong { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-large); }
.fig-held-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.fig-held .btn-secondary { border-color: var(--hold-border); }
.figswap .btn.fig-btn-hold { background: var(--hold-fill); border-color: var(--hold-fill); color: var(--on-hold); }
.figswap .btn.fig-btn-hold:hover { background: var(--hold-text); border-color: var(--hold-text); color: var(--on-hold); }
.fig-hold { margin: 0; }
.fig-hold > summary, .fig-hold-edit > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.fig-hold > summary::-webkit-details-marker, .fig-hold-edit > summary::-webkit-details-marker { display: none; }
.fig-hold > summary.btn-link { color: var(--hold-text); }
.fig-hold-form {
    margin-top: 0.75rem; padding: 1rem 1.125rem;
    border: 1px solid var(--hold-border); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text);
    display: flex; flex-direction: column; gap: 0.75rem; max-width: 32rem;
}
.fig-hold-form .btn { align-self: flex-start; }
.fig-menu-hold > summary {
    list-style: none; display: flex; align-items: center; gap: 0.5rem;
    min-height: var(--tap); padding: 0 0.75rem; border-radius: var(--radius-md);
    cursor: pointer; font-size: var(--fs-small);
}
.fig-menu-hold > summary::-webkit-details-marker { display: none; }
.fig-menu-hold > summary:hover { background: var(--surface-hi); }
.fig-menu-hold > summary svg { width: 16px; height: 16px; }
.fig-menu-pop .fig-hold-form { margin: 0.25rem; padding: 0.75rem; max-width: none; }
.fig-menu-pop .fig-hold-form input { width: 100%; box-sizing: border-box; }
.fig-menu-pop .fig-hold-form button.fig-btn-hold {
    width: auto; justify-content: center; padding: 0 1rem;
    background: var(--hold-fill); color: var(--on-hold); font-weight: 600;
}
.fig-menu-pop .fig-hold-form button.fig-btn-hold:hover { background: var(--hold-text); color: var(--on-hold); }

/* ---------- Pause trading (amber, text + icon) ---------- */
.fig-pause-wrap { display: block; margin: 0 0 1.5rem; }
.fig-pause > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.fig-pause > summary::-webkit-details-marker { display: none; }
.fig-pause[open] > summary { border-color: var(--fig); }
.fig-pause-form {
    margin-top: 0.75rem; padding: 1rem 1.125rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    display: flex; flex-direction: column; gap: 0.75rem; max-width: 34rem;
}
.fig-pause-form ul { margin: 0; padding-left: 1.25rem; color: var(--text-2); }
.fig-pause-form .fig-stacked { max-width: 20rem; }
.fig-pause-form .btn { align-self: flex-start; }
.fig-paused {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-start; justify-content: space-between;
    margin: 0 0 1.5rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg);
    background: var(--amber-soft); border: 1px solid var(--amber-text); color: var(--text);
}
.fig-paused-text { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 22rem; }
.fig-paused-text strong { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--amber-text); font-size: var(--fs-large); }
.fig-paused-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.fig-pause-date > summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; }
.fig-paused .fig-pause-form { color: var(--text); }
.fig-paused-note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin: 0 0 1rem; padding: 0.625rem 0.875rem; border-radius: var(--radius-md);
    background: var(--amber-soft); color: var(--text);
}
.fig-paused-note > svg { flex: none; margin-top: 0.2em; color: var(--amber-text); }
.figswap .fig-paused-note a, .figswap .fig-paused a { color: var(--amber-text); font-weight: 600; text-decoration: underline; }
.fig-confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    margin: 0 0 1.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--surface-hi);
}

/* ---------- Tabs (lists, proposal kind, leaderboard category) and period switch ---------- */
.fig-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.figswap .fig-tabs a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: var(--tap); padding: 0 1rem;
    border: 1px solid var(--field-border); border-radius: 22px;
    background: var(--surface); color: var(--text); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.figswap .fig-tabs a:hover { background: var(--surface-hi); color: var(--text); text-decoration: none; }
.figswap .fig-tabs a[aria-current="page"] { background: var(--fig); border-color: var(--fig); color: var(--on-fig); font-weight: 600; }
.fig-tab-count { font-size: var(--fs-small); font-weight: 500; opacity: 0.9; }
.fig-seg-switch {
    display: inline-flex; gap: 0.25rem; padding: 0.25rem;
    border-radius: 999px; border: 1px solid var(--field-border); background: var(--surface);
}
.figswap .fig-seg-switch a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem;
    border-radius: 999px; color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.figswap .fig-seg-switch a:hover { color: var(--text); background: var(--surface-hi); text-decoration: none; }
.figswap .fig-seg-switch a[aria-current="true"] { background: var(--fig); color: var(--on-fig); font-weight: 600; }
@media (max-width: 599.98px) {
    .fig-lb-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 0.25rem; }
    .fig-lb-tabs::-webkit-scrollbar { display: none; }
}

/* ---------- My lists: add-a-fig ---------- */
.fig-add-card {
    padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.fig-add-card h2 { margin-top: 0; }
.fig-add { display: flex; flex-direction: column; gap: 1.125rem; }
.fig-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; align-items: start; }
@media (max-width: 599.98px) { .fig-add-card { padding: 1rem; } .fig-add-grid { grid-template-columns: minmax(0, 1fr); } }
.fig-add .fig-combobox { display: flex; flex-direction: column; gap: 0.375rem; }
.fig-add .fig-combobox label, .fig-add-label, .fig-pills legend { font-weight: 600; }
.fig-add .fig-combobox input[type="text"], .fig-more input[type="text"], .fig-more input[type="date"] {
    width: 100%; box-sizing: border-box; padding: 0 0.75rem;
}
.fig-add-qty { display: flex; flex-direction: column; gap: 0.375rem; }
.fig-qty-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fig-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--field-border); border-radius: var(--radius-md); overflow: hidden; }
.fig-stepper button {
    width: var(--tap); min-height: var(--tap); border: 0;
    background: var(--surface-hi); color: var(--text); font-size: var(--fs-large); cursor: pointer;
}
.fig-stepper button:hover { background: var(--border); }
.figswap .fig-stepper input {
    width: 3.5rem; min-height: var(--tap); border: 0; border-radius: 0;
    text-align: center; font-weight: 600; background: var(--surface); color: var(--text);
    -moz-appearance: textfield; appearance: textfield;
}
.fig-stepper input::-webkit-inner-spin-button, .fig-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fig-stepper input:disabled { color: var(--text-3); }
.fig-pills { border: 0; padding: 0; margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fig-pills legend { padding: 0; margin-bottom: 0.5rem; }
.fig-pill {
    position: relative; display: inline-flex; align-items: center;
    min-height: var(--tap); padding: 0 1rem;
    border-radius: 22px; border: 1px solid var(--field-border); background: var(--surface); cursor: pointer;
}
.fig-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fig-pill:has(input:checked) { border-color: var(--fig); background: var(--fig-soft); color: var(--fig-text); font-weight: 600; }
.fig-pill:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fig-more > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; color: var(--fig-text); }
.fig-more-body { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.75rem; }
.fig-more .fig-note { display: flex; flex-direction: column; gap: 0.375rem; font-weight: 600; max-width: 32rem; }
.fig-note input { font-weight: 400; }
.fig-add-btn { align-self: flex-start; }
@media (max-width: 599.98px) { .fig-add-btn { align-self: stretch; } }

/* Variety picker: attached under the input, full-width tappable rows. */
.fig-combobox { position: relative; }
.fig-combobox.is-open input[type="text"] { border-color: var(--fig); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fig-combobox-pop {
    margin-top: -1px; border: 1px solid var(--field-border); border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface); overflow: hidden;
}
.fig-combobox-head { margin: 0; padding: 0.5rem 0.875rem 0.25rem; font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); }
.fig-combobox-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.fig-combobox-list:empty { display: none; }
.fig-combobox-option {
    display: flex; align-items: center; gap: 0.625rem;
    min-height: var(--tap-primary); padding: 0.375rem 0.875rem; max-width: none;
    cursor: pointer; color: var(--text);
}
.fig-combobox-option + .fig-combobox-option { border-top: 1px solid var(--border); }
.fig-combobox-option[aria-selected="true"] { background: var(--fig-soft); }
.fig-combobox-name { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.fig-combobox-name strong { font-weight: 700; }
.fig-combobox-aka { font-size: var(--fs-caption); color: var(--text-2); }
.fig-combobox-arrow { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-combobox-option[aria-selected="true"] .fig-combobox-arrow { stroke: var(--fig-text); }
.fig-combobox-option.fig-combobox-option-new { min-height: 52px; background: var(--bg); border-top: 1px solid var(--field-border); }
.fig-combobox-new { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.75rem; }
.fig-combobox-pop[hidden], .fig-combobox-new[hidden] { display: none; }
.fig-combobox-preview {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
}
.fig-combobox-preview-label { font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); }
.fig-combobox-preview strong { font-family: var(--font-display); font-size: var(--fs-large); font-weight: 600; }
.fig-combobox-preview-hint { margin: 0; font-size: var(--fs-caption); color: var(--text-2); }
.fig-combobox-add { align-self: flex-start; }

/* Plant photos field + thumbnails */
.fig-plant-photos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.fig-plant-photos[hidden] { display: none; }
.fig-plant-photos-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.fig-plant-photos .fig-photo-privacy { margin: 0; }
.fig-plant-thumb { display: inline-flex; vertical-align: middle; margin-right: 0.5rem; }
.fig-plant-thumb-btn {
    position: relative; width: var(--tap); height: var(--tap); padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
    background: var(--surface-hi); cursor: zoom-in; flex: none;
}
.fig-plant-thumb-btn[hidden] { display: none; }
.fig-plant-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--photo-dim)); }
.fig-plant-thumb-n {
    position: absolute; right: 2px; bottom: 2px; padding: 0 5px; border-radius: 4px;
    background: var(--scrim); color: var(--surface);
    font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .fig-plant-thumb-n { color: var(--text); }
.fig-name-with-thumb { display: inline-flex; align-items: center; }
.fig-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.5rem; }

/* ---------- My lists: table ---------- */
.fig-list-card { margin-top: 2rem; }
.fig-table-wrap { overflow-x: auto; }
.fig-list-table { width: 100%; border-collapse: collapse; }
.fig-list-table th, .fig-list-table td { text-align: left; vertical-align: top; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--border); }
.fig-list-table th { font-size: var(--fs-small); color: var(--text-2); font-weight: 600; }
.fig-list-table tbody[hidden] { display: none; }
.fig-note-cell { max-width: 28ch; overflow-wrap: anywhere; }
.fig-row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.fig-edit-row td { background: var(--surface-hi); }
.fig-edit-row form { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; padding: 0.5rem 0; }
.fig-edit-row .fig-plant-photos { flex-basis: 100%; }
@media (max-width: 599.98px) {
    .fig-list-table thead { display: none; }
    .fig-list-table, .fig-list-table tbody, .fig-list-table tr, .fig-list-table td { display: block; width: 100%; }
    .fig-list-table tbody { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
    .fig-list-table td { border: 0; padding: 0.25rem 0; }
    .fig-list-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-2); font-size: var(--fs-small); }
    .fig-list-table .fig-cell-name { padding-top: 0.375rem; }
    .fig-note-cell { max-width: none; }
    .fig-row-actions { justify-content: flex-start; padding-top: 0.375rem; }
    .fig-list-table tr[hidden] { display: none; }
    .fig-edit-row td { padding: 0.75rem; border-radius: var(--radius-md); }
}

/* Column sort/filter (built by fig_trading.js "List table sort/filter") */
.fig-col-th { position: relative; white-space: nowrap; }
.fig-col-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 32px; margin: -0.3rem -0.4rem; padding: 0.3rem 0.4rem;
    border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; cursor: pointer;
}
.fig-col-btn:hover, .fig-col-btn[aria-expanded="true"] { background: var(--surface); border-color: var(--field-border); }
.fig-col-caret { font-size: var(--fs-caption); color: var(--text-2); }
.fig-col-mark { color: var(--fig-text); font-size: var(--fs-caption); }
.fig-col-dot::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 0.15rem; border-radius: 50%; background: var(--fig); }
.fig-col-pop {
    position: absolute; left: 0; top: calc(100% + 2px); z-index: 40;
    width: 17rem; max-width: calc(100vw - 32px); padding: 0.375rem;
    border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--field-border);
    display: grid; gap: 0.25rem; font-weight: 400; color: var(--text); white-space: normal; text-align: left;
}
.fig-col-pop-right { left: auto; right: 0; }
.fig-col-pop hr { border: 0; border-top: 1px solid var(--border); margin: 0.15rem 0; width: 100%; }
.fig-col-sort {
    display: flex; align-items: center; gap: 0.45rem; width: 100%; min-height: var(--tap); padding: 0 0.75rem;
    border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer;
}
.fig-col-sort:hover { background: var(--surface-hi); }
.fig-col-sort[aria-pressed="true"] { background: var(--fig-soft); }
.fig-col-pop input[type="search"], .fig-filter-sheet input[type="search"] { width: 100%; margin-bottom: 0.25rem; padding: 0 0.625rem; }
.fig-col-vals { max-height: 15rem; overflow-y: auto; display: grid; }
.fig-col-vals label { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding: 0 0.5rem; border-radius: var(--radius-md); cursor: pointer; overflow-wrap: anywhere; }
.fig-col-vals label:hover { background: var(--surface-hi); }
.fig-col-vals label[hidden] { display: none; }
.fig-col-vals input { flex: none; }
.fig-col-all { font-weight: 600; }
.fig-col-count { margin-left: auto; color: var(--text-2); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.fig-col-need { outline: 2px solid var(--fig); border-radius: var(--radius-md); }
.fig-col-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.3rem; }
.fig-list-tools { margin-bottom: 0.5rem; }
.fig-list-phonebar { display: none; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.fig-list-phonebar select { flex: 1; min-width: 0; padding: 0 0.625rem; }
.fig-list-phonebar .btn { white-space: nowrap; }
.fig-list-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.fig-list-chip { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--fig-soft); color: var(--text); font-size: var(--fs-caption); font-weight: 600; }
.fig-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.fig-filter-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 85vh;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: 0.75rem max(16px, env(safe-area-inset-right, 0px)) calc(0.75rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); color: var(--text);
}
.fig-filter-sheet h2 { font-size: var(--fs-large); margin: 0.25rem 0 0.5rem; }
.fig-filter-groups { overflow-y: auto; }
.fig-filter-groups details { border-bottom: 1px solid var(--border); padding: 0.375rem 0; }
.fig-filter-groups summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap); font-weight: 600; cursor: pointer; }
.fig-filter-groups summary .fig-list-chip { margin-left: auto; }
@media (max-width: 599.98px) { .fig-list-phonebar { display: flex; } .fig-col-pop { display: none; } }

/* Spreadsheet download / upload / review */
.fig-sheet { margin-top: 1rem; }
.fig-sheet-bulk > summary {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap);
    color: var(--text-2); font-weight: 600; cursor: pointer; list-style: none;
}
.fig-sheet-bulk > summary::-webkit-details-marker { display: none; }
.fig-sheet-bulk > summary::after {
    content: ""; width: 7px; height: 7px; margin-left: 0.125rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.fig-sheet-bulk[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fig-sheet-bulk > summary:hover { color: var(--text); }
.fig-sheet-panel {
    margin-top: 0.625rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); display: grid; gap: 0.75rem;
}
.fig-sheet-panel h3 { font-size: var(--fs-body); margin: 0; }
.fig-sheet-panel h4 { font-size: var(--fs-small); margin: 0.25rem 0 0; color: var(--text-2); }
.fig-sheet-panel p, .fig-sheet-panel ul { margin: 0; }
.fig-sheet-panel ul { padding-left: 1.125rem; display: grid; gap: 0.25rem; }
.fig-sheet-cols { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.fig-sheet-cols code { font-size: var(--fs-caption); padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-hi); }
.fig-sheet-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.fig-sheet-actions input[type="file"] { max-width: 100%; min-width: 0; min-height: 0; border: 0; padding: 0; background: none; font-weight: 400; color: var(--text-2); }
.fig-sheet-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.fig-sheet-match { font-size: var(--fs-small); font-style: italic; color: var(--text-2); }
.fig-sheet-remove { padding-top: 0.5rem; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; }
.fig-sheet-remove ul[hidden] { display: none; }

/* ---------- Browse ---------- */
.fig-browse-filter {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
    margin: 0 0 2rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--surface-hi);
}
.fig-browse-filter input[type="search"] { width: 22ch; max-width: 100%; padding: 0 0.75rem; }
.fig-browse-filter select { padding: 0 2rem 0 0.75rem; }
.fig-clear { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
@media (max-width: 599.98px) {
    .fig-browse-filter .fig-stacked, .fig-browse-filter input[type="search"] { width: 100%; }
    .fig-browse-filter .btn { width: 100%; }
}
.fig-result-count { margin: 0 0 0.5rem; }
.fig-browse-group { padding: 1rem 0; border-top: 1px solid var(--border); }
.fig-browse-group h2 { font-size: var(--fs-large); margin: 0 0 0.625rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fig-browse-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fig-browse-offers li { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; max-width: none; }
.figswap .fig-offer-who { font-weight: 600; }
.fig-browse-note { flex-basis: 100%; padding-left: 0.75rem; border-left: 2px solid var(--border); color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.fig-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; }

/* ---------- Upsell (live auctions for a variety) ---------- */
.fig-upsell { margin: 0 0 2rem; }
.fig-upsell p { margin: 0 0 0.375rem; }
.fig-upsell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.fig-upsell-list a { font-weight: 600; }

/* ---------- Trade page ---------- */
.fig-steps {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem;
    font-size: var(--fs-small);
}
.fig-step { display: flex; flex-direction: column; gap: 0.375rem; color: var(--text-2); max-width: none; }
.fig-step strong { display: flex; align-items: baseline; gap: 0.375rem; color: var(--text); font-weight: 600; }
.fig-step-n {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.5rem; height: 1.5rem; border-radius: 0.75rem;
    border: 1px solid var(--field-border); color: var(--text-2);
    font-size: var(--fs-caption); font-weight: 700;
}
.fig-step-bar { height: 6px; border-radius: 3px; background: var(--border); }
.fig-step-done .fig-step-bar { background: var(--fig-soft); box-shadow: inset 0 0 0 1px var(--fig); }
.fig-step-done .fig-step-n { background: var(--fig-soft); border-color: var(--fig); color: var(--fig-text); }
.fig-step-current .fig-step-bar { background: var(--fig); }
.fig-step-current .fig-step-n { background: var(--fig); border-color: var(--fig); color: var(--on-fig); }
.fig-step-current strong { color: var(--fig-text); }
.fig-step-note { font-size: var(--fs-caption); }
@media (max-width: 599.98px) {
    .fig-steps { gap: 0.25rem; }
    .fig-step strong { flex-direction: column; align-items: flex-start; font-size: var(--fs-caption); }
    .fig-step-note { display: none; }
}

/* The "Next step" card: the one bold element on the trade page. */
.fig-next {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem;
    margin: 0 0 2.25rem; padding: 1.25rem 1.5rem;
    border: 2px solid var(--fig); border-radius: var(--radius-lg); background: var(--fig-soft);
}
.fig-next h2 { margin: 0; font-size: var(--fs-h3); }
.fig-next p { margin: 0; max-width: var(--measure); }
.fig-next-kicker { font-size: var(--fs-small); font-weight: 700; color: var(--fig-text); }
.fig-next-after { font-size: var(--fs-small); }
.fig-next-hold > summary { color: var(--hold-text); }
.fig-next-hold > p { margin: 0.5rem 0 0; }
@media (max-width: 599.98px) { .fig-next { padding: 1rem; } .fig-next .btn-lg { width: 100%; } }

.fig-respond .fig-actions { margin-bottom: 0.75rem; }
.fig-counter { margin-top: 0.5rem; }
.fig-counter > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; color: var(--fig-text); }
.fig-counter form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 0.5rem; }
.fig-pick {
    width: 100%; box-sizing: border-box; margin: 0 0 1rem; padding: 0.75rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; gap: 0.25rem;
}
.fig-pick legend { padding: 0 0.25rem; font-weight: 600; }
.fig-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: var(--tap); }
.fig-pick-row + .fig-pick-row { border-top: 1px solid var(--border); padding-top: 0.25rem; }
.fig-pick-row > label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-height: var(--tap); }
.fig-pick-qty { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.fig-stepper-sm button { width: 40px; min-height: 40px; }
.fig-stepper-sm input { width: 2.75rem; }
@media (pointer: coarse) { .fig-stepper-sm button { width: var(--tap); min-height: var(--tap); } }
.fig-review p { margin: 0 0 0.75rem; }
.fig-change { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.fig-terms .fig-grid-2 { margin-bottom: 0.75rem; }
.fig-terms h2 { font-size: var(--fs-body); }
.fig-wish-remove {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
    padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--surface-hi);
}
.fig-other-options { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: center; margin: 0 0 1.5rem; }
.fig-other-options .fig-hold { margin: 0; }
.fig-seg { border: 0; padding: 0; margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fig-seg legend { font-weight: 600; margin-bottom: 0.5rem; padding: 0; }

/* Shipping notes */
.fig-ship-note {
    margin-top: 1rem; padding: 0.75rem 1rem;
    border-left: 3px solid var(--amber-text); background: var(--amber-soft); border-radius: var(--radius-md);
}
.fig-ship-note p { margin: 0.375rem 0 0; max-width: var(--measure); }
.fig-ship-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.fig-ship-title svg { color: var(--amber-text); flex: none; }
.fig-ship-more { margin-top: 1rem; }
.fig-ship-more > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; }

/* ---------- Message threads (trade + direct) ---------- */
.fig-thread .fig-msg {
    max-width: min(78%, 40rem); margin: 0.5rem 0; padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
    background: var(--surface-hi); border: 1px solid var(--border);
}
.fig-thread .fig-msg-mine { margin-left: auto; background: var(--fig-soft); border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); }
@media (max-width: 599.98px) { .fig-thread .fig-msg { max-width: 92%; } }
.fig-msg-meta { margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--fs-caption); color: var(--text-2); }
.fig-msg-from { font-weight: 600; color: var(--text); }
.fig-msg-body { white-space: normal; overflow-wrap: anywhere; }
.fig-msg-form { display: grid; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.fig-msg-form .field-hint { margin: 0; }
.fig-msg-form textarea { width: 100%; box-sizing: border-box; padding: 0.625rem 0.75rem; }
.fig-msg-form-head, .fig-msg-form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.fig-msg-form-foot .btn { flex: none; margin-left: auto; }
.fig-msg-error {
    display: flex; align-items: flex-start; gap: 0.5rem; margin: 0;
    padding: 0.5rem 0.75rem; border: 1px solid var(--danger); border-radius: var(--radius-md);
    color: var(--danger); background: var(--red-soft); font-size: var(--fs-small);
}
.fig-msg-error svg { flex: none; margin-top: 0.15em; }
.fig-report { margin-top: 0.375rem; }
.fig-report summary, .fig-safety summary {
    cursor: pointer; color: var(--text-2); font-size: var(--fs-small);
    min-height: 32px; display: inline-flex; align-items: center;
}
@media (pointer: coarse) { .fig-report summary, .fig-safety summary { min-height: var(--tap); } }
.fig-report-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; margin-top: 0.5rem; }
.fig-report-form .fig-stacked { width: 100%; max-width: 24rem; font-size: var(--fs-small); }
.fig-safety-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; }
.fig-safety { margin: 0; }
.fig-radio-list { border: 0; padding: 0; margin: 0; display: grid; gap: 0.125rem; }
.fig-radio-list legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.fig-dm-trades { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
.fig-dm-trades li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; max-width: none; }

/* Inbox */
.fig-thread-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.fig-thread-item { max-width: none; border-bottom: 1px solid var(--border); }
.figswap .fig-thread-link {
    display: flex; flex-direction: column; gap: 0.25rem;
    min-height: var(--tap-primary); padding: 0.75rem 0.5rem; color: var(--text); text-decoration: none;
}
.figswap .fig-thread-link:hover { background: var(--surface-hi); color: var(--text); text-decoration: none; }
.fig-thread-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fig-thread-top time { margin-left: auto; font-size: var(--fs-small); }
.fig-thread-preview { color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.fig-thread-item.is-unread .fig-thread-preview { color: var(--text); }

/* Trade-thread photos: gallery in a message, composer strip, full-screen viewer. */
.fig-thread-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(260px, 100%); margin: 0.375rem 0; }
.fig-thread-photos-1 { grid-template-columns: minmax(0, 1fr); width: min(220px, 100%); }
.fig-thread-photos-3 > :first-child { grid-column: span 2; }
.fig-photo { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; }
.fig-thread-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); filter: brightness(var(--photo-dim)); }
.fig-thread-photos-1 img, .fig-thread-photos-3 > :first-child img { aspect-ratio: 4 / 3; }
.fig-photo-pending {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0.5rem;
    border: 1px dashed var(--field-border); border-radius: var(--radius-md);
    background: var(--surface-hi); color: var(--text-2); font-size: var(--fs-caption); text-align: center;
}
.fig-photo-privacy { font-size: var(--fs-caption); }
.fig-photo-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fig-photo-tile, .fig-photo-add { position: relative; width: 72px; height: 72px; flex: none; }
.fig-photo-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; }
.fig-photo-tile.is-uploading img { opacity: 0.45; }
.fig-photo-tile .fig-photo-pending { width: 100%; height: 100%; box-sizing: border-box; }
.fig-photo-progress { display: none; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 6px; border-radius: 3px; background: var(--surface); }
.fig-photo-tile.is-uploading .fig-photo-progress { display: block; }
.fig-photo-progress span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--fig); }
.fig-photo-remove {
    position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0;
    border-radius: 50%; border: 2px solid var(--surface); background: var(--text); color: var(--surface);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
@media (pointer: coarse) { .fig-photo-remove::after { content: ""; position: absolute; inset: -8px; } }
.fig-photo-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 1px dashed var(--field-border); border-radius: var(--radius-md); background: var(--bg);
    color: var(--fig-text); font-family: inherit; font-size: var(--fs-caption); font-weight: 600; line-height: 1.1; cursor: pointer;
}
.fig-photo-add:hover { border-color: var(--fig); }
.fig-photo-add[hidden] { display: none; }
.fig-photo-error { margin: 0; color: var(--danger); font-size: var(--fs-small); }
.fig-lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--scrim); color: var(--surface);
}
.fig-lightbox::backdrop { background: var(--scrim); }
.fig-lightbox[open] { display: flex; flex-direction: column; background: var(--lightbox-bg); }
.fig-lightbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.5rem 0.75rem 1rem; color: var(--bg); }
[data-theme="dark"] .fig-lightbox-bar { color: var(--text); }
.fig-lightbox img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.fig-lightbox-btn {
    width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
    background: var(--surface); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fig-lightbox-prev, .fig-lightbox-next { position: absolute; top: 50%; margin-top: -22px; }
.fig-lightbox-prev { left: 0.5rem; }
.fig-lightbox-next { right: 0.5rem; }
.fig-lightbox-btn[hidden] { display: none; }

/* ---------- Completed trades (My FigSwap trades) ---------- */
.fig-completed { margin-bottom: 2.25rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fig-completed[open] { padding-bottom: 1rem; }
.fig-completed-summary { display: flex; align-items: center; gap: 0.75rem; min-height: 60px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.fig-completed-summary::-webkit-details-marker { display: none; }
.fig-completed-summary h2 { margin: 0; font-size: var(--fs-large); }
.fig-completed-chev { color: var(--text-2); transition: transform 0.15s; }
.fig-completed[open] .fig-completed-chev { transform: rotate(90deg); }
.fig-completed-toggle { margin-left: auto; font-size: var(--fs-small); font-weight: 600; color: var(--fig-text); }
.fig-completed-toggle::after { content: "Show"; }
.fig-completed[open] .fig-completed-toggle::after { content: "Hide"; }
.fig-completed-wish {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.75rem 1rem; margin: 0.25rem 0 1rem; border-radius: var(--radius-lg);
    background: var(--fig-soft); border: 1px solid var(--fig);
}
.fig-completed-wish > svg { flex: 0 0 auto; color: var(--fig-text); }
.fig-completed-wish p { margin: 0; flex: 1 1 18rem; }
.fig-completed-wish-actions { display: flex; gap: 0.5rem; }
.fig-completed-wish-actions form { margin: 0; }
.fig-completed-h3 { margin: 1rem 0 0.375rem; font-size: var(--fs-body); font-weight: 600; }
.fig-completed-list { list-style: none; margin: 0 0 0.5rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fig-completed-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 0; max-width: none; }
.fig-completed-row + .fig-completed-row { border-top: 1px solid var(--border); }
.fig-completed-row form { margin: 0; }
.fig-completed-name { flex: 1 1 10rem; }
.figswap .fig-completed-trade { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.125rem; color: var(--text); text-decoration: none; }
.figswap .fig-completed-trade:hover { color: var(--text); text-decoration: none; }
.fig-completed-trade:hover strong { text-decoration: underline; }
.fig-completed-have { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-small); font-weight: 600; color: var(--fig-text); }

/* ---------- Public trader page ---------- */
.fig-public-id { flex: 1 1 24rem; min-width: 0; }
.fig-public-id p { margin: 0.25rem 0 0; }
.fig-stats { font-weight: 600; }
.fig-bestrank { font-weight: 600; }
.fig-item {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem;
    padding: 0.75rem 0; border-top: 1px solid var(--border);
}
.fig-item:first-of-type { border-top: 0; }
.fig-item-main { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.fig-item-note { flex-basis: 100%; color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.fig-item-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fig-item-actions form { margin: 0; }
.fig-feedback-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.fig-feedback-row:first-of-type { border-top: 0; }
.fig-feedback-thumb { flex: none; margin-top: 0.125rem; }
.fig-feedback-up { background: var(--fig-soft); color: var(--fig-text); }
.fig-feedback-meta, .fig-feedback-comment { margin: 0; }
.fig-feedback-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.fig-feedback-comment { margin-top: 0.25rem; overflow-wrap: anywhere; }

/* ---------- Leaderboard ---------- */
.fig-lb-hero { margin-bottom: 1rem; }
.fig-lb-tabs { margin-bottom: 1.5rem; }
.fig-lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2.5rem; align-items: start; }
@media (max-width: 839.98px) { .fig-lb-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.fig-lb-main h2 { margin: 0; font-size: var(--fs-h3); }
.fig-lb-blurb { margin: 0.375rem 0 0; color: var(--text-2); }
.fig-lb-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.fig-lb-side h3 { margin: 0 0 0.75rem; font-size: var(--fs-large); }
.fig-lb-badges { margin: 0; }
.fig-podium {
    list-style: none; margin: 1.75rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end;
}
.fig-pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; max-width: none; }
.fig-pod-1 { order: 2; }
.fig-pod-2 { order: 1; }
.fig-pod-3 { order: 3; }
.fig-av {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); border-radius: 50%;
    font-weight: 700; font-size: var(--fs-small);
}
.fig-av-0 { background: var(--fig); color: var(--on-fig); }
.fig-av-1 { background: var(--text); color: var(--bg); }
.fig-av-2 { background: var(--text-2); color: var(--bg); }
.fig-av-3 { background: var(--amber-text); color: var(--bg); }
.fig-av-lg { width: 66px; height: 66px; font-size: var(--fs-large); border: 4px solid var(--border); }
.fig-pod-2 .fig-av-lg { width: 72px; height: 72px; border-color: var(--field-border); }
.fig-pod-1 .fig-av-lg { width: 92px; height: 92px; font-size: var(--fs-h3); border: 5px solid var(--amber-fill); }
.fig-pod-name { margin-top: 0.625rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.figswap a.fig-pod-name, .figswap a.fig-lb-name { color: var(--text); }
.fig-pod-badges { margin: 0.25rem 0 0.625rem; font-size: var(--fs-caption); color: var(--text-2); }
.fig-pod-step {
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0.75rem 0.25rem; border-radius: var(--radius-lg) var(--radius-lg) 4px 4px;
    background: var(--surface-hi); color: var(--text); min-height: 104px;
}
.fig-pod-2 .fig-pod-step { min-height: 128px; }
.fig-pod-1 .fig-pod-step { background: var(--fig); color: var(--on-fig); min-height: 172px; }
.fig-pod-val { font-weight: 800; font-size: var(--fs-h2); line-height: 1.1; }
.fig-pod-1 .fig-pod-val { font-size: var(--fs-display); }
.fig-pod-unit { font-size: var(--fs-caption); }
.fig-pod-flag { margin-top: 0.375rem; font-size: var(--fs-caption); font-weight: 700; }
.fig-pod-top { padding: 0.125rem 0.75rem; border-radius: 999px; background: var(--amber-fill); color: var(--on-amber); }
.fig-lb-rows { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.fig-lb-rows li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem;
    min-height: var(--tap-primary); padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--border); max-width: none;
}
.fig-lb-rank { width: 2rem; text-align: center; font-weight: 800; font-size: var(--fs-large); color: var(--text-2); }
.fig-lb-name { flex: 1 1 140px; min-width: 0; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.fig-lb-val { min-width: 4rem; text-align: right; font-weight: 800; font-size: var(--fs-large); }
.fig-lb-fine { margin: 1.25rem 0 0; font-size: var(--fs-small); color: var(--text-2); max-width: var(--measure); }
.fig-lb-empty { margin: 1.5rem 0 0; color: var(--text-2); }
.fig-lb-cta { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--fig-soft); border: 1px solid var(--fig); }
.fig-lb-cta h3 { margin: 0; }
.fig-lb-cta p { margin: 0.5rem 0 1rem; }
@media (max-width: 599.98px) {
    .fig-podium { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .fig-pod-1, .fig-pod-2, .fig-pod-3 {
        order: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left;
        gap: 0.25rem 0.75rem; align-items: center; padding: 0.75rem; border-radius: var(--radius-lg); background: var(--surface-hi);
    }
    .fig-pod .fig-av-lg, .fig-pod-1 .fig-av-lg, .fig-pod-2 .fig-av-lg { width: 56px; height: 56px; font-size: var(--fs-body); border-width: 3px; }
    .fig-pod-name { margin: 0; flex: 1 1 8rem; text-align: left; }
    .fig-pod-badges { flex-basis: 100%; margin: 0; padding-left: calc(56px + 0.75rem); }
    .fig-pod-step, .fig-pod-1 .fig-pod-step, .fig-pod-2 .fig-pod-step {
        width: auto; min-height: 0; flex-direction: row; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 999px; margin-left: auto;
    }
    .fig-pod-val, .fig-pod-1 .fig-pod-val { font-size: var(--fs-large); }
    .fig-pod-flag { margin: 0; }
}

/* Compact leaderboard on the FigSwap home card */
.fig-lb-compact { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.fig-lb-compact .fig-card-head { margin: 0; }
.fig-lb-compact .fig-lb-tabs { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
.fig-lb-compact .fig-lb-tabs::-webkit-scrollbar { display: none; }
.figswap .fig-lb-compact .fig-lb-tabs a { min-height: 36px; padding: 0 0.875rem; font-size: var(--fs-small); }
.fig-lb-compact .fig-seg-switch { align-self: flex-start; }
.figswap .fig-lb-compact .fig-seg-switch a { min-height: 32px; padding: 0 0.75rem; font-size: var(--fs-small); }
@media (pointer: coarse) {
    .figswap .fig-lb-compact .fig-lb-tabs a { min-height: var(--tap); }
    .figswap .fig-lb-compact .fig-seg-switch a { min-height: 40px; }
}
.fig-lb-compact .fig-lb-blurb { margin: 0; font-size: var(--fs-small); }
.fig-lb-compact .fig-lb-rows { margin: 0; }
.fig-lb-compact .fig-lb-rows li { min-height: var(--tap); padding: 0.375rem 0; gap: 0.5rem; }
.fig-lb-compact .fig-lb-rank { width: 1.5rem; font-size: var(--fs-body); }
.fig-lb-compact .fig-av { width: 32px; height: 32px; font-size: var(--fs-caption); }
.fig-lb-compact .fig-lb-name { flex-basis: 90px; }
.fig-lb-compact .fig-lb-val { min-width: 0; font-size: var(--fs-body); white-space: nowrap; }
.fig-lb-compact .fig-lb-val .fig-dim { font-size: var(--fs-caption); font-weight: 500; }
.fig-lb-compact .fig-lb-empty { margin: 0; }
.fig-lb-help { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.fig-lb-help h3 { margin: 0; font-size: var(--fs-body); }
.fig-lb-help .fig-lb-fine { margin: 0.5rem 0 0.75rem; }
.fig-leaders { margin: 0; padding-left: 1.25rem; }
.fig-leaders li { margin: 0.375rem 0; }
.fig-leaders .fig-dim { display: block; }

/* Badge chips and the badge explainer */
.fig-chips { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.fig-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.125rem 0.625rem; border-radius: 999px;
    font-size: var(--fs-caption); font-weight: 700; line-height: 1.5;
}
.fig-chip svg { width: 14px; height: 14px; flex: none; }
.fig-chips-lg { gap: 0.5rem; margin-top: 0.75rem; }
.fig-chips-lg .fig-chip { padding: 0.25rem 0.75rem; font-size: var(--fs-small); gap: 0.375rem; }
.fig-chips-lg .fig-chip svg { width: 16px; height: 16px; }
.fig-chip-fairy, .fig-chip-propagator { background: var(--fig-soft); color: var(--fig-text); }
.fig-chip-sprout, .fig-chip-trusted { background: var(--surface-hi); color: var(--text); }
.fig-chip-packer { background: var(--amber-soft); color: var(--amber-text); }
.fig-chip-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); padding: 0; }
.fig-chip-ico svg { width: 22px; height: 22px; }
.fig-badge-help { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.fig-badge-help li { display: flex; gap: 0.75rem; align-items: flex-start; max-width: none; }
.fig-bh-name { margin: 0; font-weight: 700; }
.fig-bh-how { margin: 0.125rem 0 0; font-size: var(--fs-small); color: var(--text-2); }

/* ---------- Variety pages ---------- */
.fig-variety-page h1 { margin: 0; }
.fig-variety-page .page-lede { margin-top: 0.625rem; }

/* ---------- Staff pages ---------- */
.fig-staff { max-width: 54rem; }
.fig-staff-narrow { max-width: 45rem; }
.fig-staff-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--border); }
.figswap .fig-staff-nav a {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.75rem;
    color: var(--text-2); font-weight: 500; text-decoration: none;
}
.figswap .fig-staff-nav a:hover { color: var(--text); background: var(--surface-hi); }
.figswap .fig-staff-nav a[aria-current="page"] { color: var(--fig-text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--fig); }
.fig-staff-settings { display: grid; gap: 1rem; max-width: 24rem; }
.fig-staff-gap { margin-top: 2.5rem; }
.fig-staff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.fig-staff-card { padding: 1rem 1.25rem; margin: 0 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.fig-staff-card > p { margin: 0 0 0.5rem; }
.fig-staff-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.75rem; }
.fig-staff-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin: 0 0 0.75rem; }
.fig-staff-form .fig-combobox { display: flex; flex-direction: column; gap: 0.375rem; min-width: 16rem; }
.fig-staff-form .fig-combobox label { font-weight: 600; }
.fig-staff-quote { margin: 0.5rem 0; padding: 0.5rem 0.875rem; border-left: 3px solid var(--border); background: var(--surface-hi); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.fig-staff-quote footer { margin-top: 0.375rem; font-size: var(--fs-small); }
.fig-staff-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fig-staff-actions form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .fig-completed-chev { transition: none; }
}