/* Workflow presets gallery (js/workflow-presets-ui.js). Loaded by both editor hosts: the Workflows tab of
   Chat/chat.html (theme variables --bg-*, --text-*, --primary-color, every theme) and Workflows/workflows.html
   (--wf-* variables, dark by default, [data-theme="light"]). Every colour below resolves through one of the two
   sets, so the gallery follows whatever theme the editor is in.

   The idea: a drawer of plan sheets. Each preset is drawn as the node graph it will put on the canvas, on the
   canvas's own dot grid, with each node's colour stripe. That drawing is the one loud thing; the rest is quiet. */

.wfp-overlay, .wfp-note {
    --wfp-ground: var(--wf-bg-secondary, var(--bg-primary, #ffffff));
    --wfp-plate: var(--wf-bg, var(--bg-secondary, #f7f7f8));
    --wfp-raise: var(--wf-bg-tertiary, var(--bg-tertiary, #f1f2f4));
    --wfp-ink: var(--wf-text, var(--text-primary, #2f3640));
    /* Secondary text is mixed from the theme's own text and ground, not taken from the theme's "secondary" colour:
       several of the Verse AI page's themes set that one too faint to read at 12 px (3.6:1 in dark). This keeps
       4.5:1 or better wherever the theme's main text reads. --wfp-ink-3 is for marks, never for words. */
    --wfp-ink-2: color-mix(in srgb, var(--wfp-ink) 74%, var(--wfp-ground));
    --wfp-ink-3: color-mix(in srgb, var(--wfp-ink) 48%, var(--wfp-ground));
    --wfp-rule: var(--wf-border, var(--border-primary, #e5e5e5));
    --wfp-accent: var(--wf-accent, var(--primary-color, #007bff));
    /* The accent as a button ground: the same hue, never lighter than white text can stand on. */
    --wfp-accent-ground: var(--wfp-accent);
    --wfp-node: var(--wf-node-bg, var(--bg-primary, #ffffff));
    --wfp-node-rule: var(--wf-node-border, var(--border-primary, #dee2e6));
    --wfp-wire: color-mix(in srgb, var(--wfp-ink-3) 85%, transparent);
    --wfp-dot: color-mix(in srgb, var(--wfp-ink-3) 38%, transparent);
    /* Meaning colours, each pulled toward the theme's ink so it reads on a light and on a dark ground. */
    --wfp-ai: color-mix(in srgb, #7c3aed 58%, var(--wfp-ink));
    --wfp-ok: color-mix(in srgb, #16a34a 74%, var(--wfp-ink));
    --wfp-warn: color-mix(in srgb, #b45309 66%, var(--wfp-ink));
    --wfp-on-accent: #ffffff;
    --wfp-radius: 12px;
    font-family: inherit;
}
@supports (color: oklch(from red l c h)) {
    .wfp-overlay, .wfp-note { --wfp-accent-ground: oklch(from var(--wfp-accent) min(l, 0.52) c h); }
}

/* ── The dialog ─────────────────────────────────────────────────────────────── */
/* Above the editor's own dialogs and the Verse home pill (99990), below the plan upgrade prompt (100000). */
.wfp-overlay {
    position: fixed; inset: 0; z-index: 99995;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: color-mix(in srgb, #000 58%, transparent);
    color: var(--wfp-ink);
}
.wfp-overlay[hidden] { display: none; }
.wfp-dialog {
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, 100%); height: min(840px, 100%);
    background: var(--wfp-ground); border: 1px solid var(--wfp-rule); border-radius: var(--wfp-radius);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
    overflow: hidden; outline: none;
}
.wfp-overlay.is-opening .wfp-dialog { animation: wfp-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes wfp-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Resets carry no weight of their own (:where), so every class below wins without !important. */
:where(.wfp-overlay, .wfp-note) :where(button, input) { font: inherit; color: inherit; margin: 0; }
:where(.wfp-overlay, .wfp-note) :where(button) { cursor: pointer; }
:where(.wfp-overlay) :where(h2, h3, p, ol, ul, figure) { margin: 0; padding: 0; }
:where(.wfp-overlay, .wfp-note) :where(svg) { flex-shrink: 0; }
.wfp-overlay :focus-visible, .wfp-note :focus-visible { outline: 2px solid var(--wfp-accent); outline-offset: 2px; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.wfp-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) auto; align-items: center; gap: 16px;
    padding: 18px 20px 16px 24px; border-bottom: 1px solid var(--wfp-rule);
}
.wfp-head-text { min-width: 0; grid-column: 1; }
.wfp-close { grid-column: 3; justify-self: end; }
.wfp-title { font-size: 20px; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; color: var(--wfp-ink); outline: none; }
.wfp-sub { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--wfp-ink-2); }
.wfp-sub[hidden] { display: none; }
.wfp-search { position: relative; display: flex; align-items: center; grid-column: 2; }
.wfp-search svg { position: absolute; left: 11px; color: var(--wfp-ink-3); pointer-events: none; }
.wfp-search input {
    width: 100%; height: 36px; padding: 0 12px 0 34px; font-size: 13px;
    background: var(--wfp-plate); color: var(--wfp-ink); border: 1px solid var(--wfp-rule); border-radius: 9px; outline: none;
}
.wfp-search input::placeholder { color: var(--wfp-ink-3); }
.wfp-search input:focus { border-color: var(--wfp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfp-accent) 22%, transparent); }
.wfp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--wfp-ink-2);
}
.wfp-icon-btn:hover { background: var(--wfp-raise); color: var(--wfp-ink); }
.wfp-back {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: -2px 0 6px -8px; padding: 0 10px 0 6px;
    background: transparent; border: 0; border-radius: 8px; font-size: 13px; color: var(--wfp-ink-2);
}
.wfp-back:hover { background: var(--wfp-raise); color: var(--wfp-ink); }
.wfp-back[hidden], .wfp-search[hidden] { display: none; }

.wfp-content { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }

/* ── List view: the rail of groups and the sheets ───────────────────────────── */
.wfp-list { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 0; }
.wfp-list[hidden], .wfp-detail[hidden] { display: none; }
.wfp-rail { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--wfp-rule); background: var(--wfp-plate); overflow-y: auto; }
.wfp-cat {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 8px 10px 8px 12px; text-align: left; font-size: 13px; line-height: 1.3;
    background: transparent; border: 0; border-radius: 8px; color: var(--wfp-ink-2);
    box-shadow: inset 3px 0 0 transparent;
}
.wfp-cat:hover { color: var(--wfp-ink); background: color-mix(in srgb, var(--wfp-ink) 6%, transparent); }
.wfp-cat[aria-current="true"] { color: var(--wfp-ink); font-weight: 600; background: var(--wfp-ground); box-shadow: inset 3px 0 0 var(--wfp-accent); }
.wfp-cat-count { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; color: var(--wfp-ink-2); }
.wfp-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.wfp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 20px; border-bottom: 1px solid var(--wfp-rule); }
.wfp-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--wfp-plate); border: 1px solid var(--wfp-rule); border-radius: 10px; }
.wfp-seg button { height: 28px; padding: 0 12px; font-size: 12.5px; background: transparent; border: 0; border-radius: 7px; color: var(--wfp-ink-2); }
.wfp-seg button:hover { color: var(--wfp-ink); }
.wfp-seg button[aria-checked="true"] { background: var(--wfp-ground); color: var(--wfp-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--wfp-rule); }
.wfp-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; font-size: 12.5px;
    background: transparent; border: 1px solid var(--wfp-rule); border-radius: 10px; color: var(--wfp-ink-2);
}
.wfp-toggle:hover { color: var(--wfp-ink); }
.wfp-toggle-box { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--wfp-ink-3); color: transparent; }
.wfp-toggle[aria-pressed="true"] { color: var(--wfp-ink); border-color: color-mix(in srgb, var(--wfp-accent) 55%, var(--wfp-rule)); }
.wfp-toggle[aria-pressed="true"] .wfp-toggle-box { background: var(--wfp-accent-ground); border-color: var(--wfp-accent-ground); color: var(--wfp-on-accent); }
.wfp-count { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--wfp-ink-2); }

.wfp-scroll { overflow-y: auto; padding: 18px 20px 24px; scrollbar-width: thin; }
.wfp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; list-style: none; }
.wfp-grid > li { display: flex; min-width: 0; }
.wfp-card {
    display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; text-align: left;
    background: var(--wfp-ground); border: 1px solid var(--wfp-rule); border-radius: 10px; overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.wfp-card:hover, .wfp-card:focus-visible { border-color: var(--wfp-accent); box-shadow: 0 0 0 1px var(--wfp-accent); }
/* The plate: the canvas's dot grid, with the preset's graph on it. */
.wfp-plate {
    display: block; position: relative; background-color: var(--wfp-plate);
    background-image: radial-gradient(circle, var(--wfp-dot) 1px, transparent 1.2px); background-size: 12px 12px; background-position: 6px 6px;
}
.wfp-card .wfp-plate { height: 124px; border-bottom: 1px solid var(--wfp-rule); }
.wfp-diagram { display: block; width: 100%; height: 100%; }
.wfp-card .wfp-diagram { padding: 12px 14px; box-sizing: border-box; }
.wfp-d-wire { fill: none; stroke: var(--wfp-wire); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wfp-d-flow { fill: none; stroke: var(--wfp-accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0; }
.wfp-d-body { fill: var(--wfp-node); }
.wfp-d-edge { fill: none; stroke: var(--wfp-node-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wfp-d-bar { fill: var(--wfp-ink-3); opacity: 0.5; }
.wfp-d-bar2 { fill: var(--wfp-ink-3); opacity: 0.26; }
.wfp-d-port { fill: var(--wfp-ground); stroke: var(--wfp-ink-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wfp-d-screen { fill: color-mix(in srgb, #10141f 80%, var(--wfp-node)); }   /* a result screen is dark in every theme */
.wfp-d-field { fill: color-mix(in srgb, var(--wfp-ink) 9%, transparent); }
.wfp-d-go { fill: #22c55e; }
/* Their font-size is set per drawing (js), so a name reads at about 11 px whatever size the drawing is. */
.wfp-d-label { fill: var(--wfp-ink); font-weight: 600; }
.wfp-d-note { fill: var(--wfp-ink-2); }
/* Hover or focus a sheet and its wires light up from the trigger outwards, the way a run does on the canvas. */
.wfp-card:hover .wfp-d-flow, .wfp-card:focus-visible .wfp-d-flow { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: wfp-flow 0.7s ease-out forwards; }
@keyframes wfp-flow { to { stroke-dashoffset: 0; } }

.wfp-card-text { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 0; }
.wfp-card-name { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--wfp-ink); }
.wfp-card-outcome { font-size: 12.5px; line-height: 1.45; color: var(--wfp-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wfp-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; padding: 10px 14px 12px; font-size: 12px; color: var(--wfp-ink-2); }
.wfp-tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wfp-tag-ai { color: var(--wfp-ai); font-weight: 600; }
.wfp-tag-ok { color: var(--wfp-ok); }
.wfp-tag-lock { color: var(--wfp-warn); font-weight: 600; }
.wfp-app { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wfp-app-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.wfp-app-icon svg { width: 14px; height: 14px; }
.wfp-meta-sep { width: 1px; height: 12px; background: var(--wfp-rule); }

.wfp-none { max-width: 420px; margin: 48px auto 0; text-align: center; }
.wfp-none[hidden] { display: none; }
.wfp-none h3 { font-size: 16px; font-weight: 600; }
.wfp-none p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--wfp-ink-2); }
.wfp-none .wfp-btn { margin-top: 16px; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.wfp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
    background: var(--wfp-ground); border: 1px solid var(--wfp-rule); border-radius: 10px; color: var(--wfp-ink);
}
.wfp-btn:hover { border-color: var(--wfp-ink-3); }
.wfp-btn-main { background: var(--wfp-accent-ground); border-color: var(--wfp-accent-ground); color: var(--wfp-on-accent); padding: 0 20px; }
.wfp-btn-main:hover { border-color: var(--wfp-accent-ground); filter: brightness(1.08); }
.wfp-btn-main:focus-visible { outline-offset: 3px; }

/* ── Detail view ────────────────────────────────────────────────────────────── */
.wfp-detail { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.wfp-detail-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); min-height: 0; }
.wfp-figure { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; border-right: 1px solid var(--wfp-rule); }
/* The drawing is given its size in px (js): centred while it fits, scrolled when it does not. */
.wfp-figure .wfp-plate { flex: 1; min-height: 0; display: flex; overflow: auto; scrollbar-width: thin; }
.wfp-figure .wfp-diagram { flex: none; margin: auto; }
.wfp-facts { padding: 12px 24px 14px; font-size: 12.5px; line-height: 1.5; color: var(--wfp-ink-2); border-top: 1px solid var(--wfp-rule); }
.wfp-info { overflow-y: auto; padding: 20px 24px 24px; scrollbar-width: thin; }
.wfp-info section { margin-top: 22px; break-inside: avoid; }
.wfp-info section:first-child { margin-top: 0; }
.wfp-info h3 { font-size: 13px; font-weight: 650; color: var(--wfp-ink); margin-bottom: 8px; }
.wfp-info p, .wfp-info li { font-size: 13px; line-height: 1.55; color: var(--wfp-ink-2); max-width: 62ch; }
.wfp-info .wfp-lead { font-size: 14px; color: var(--wfp-ink); }
.wfp-info .wfp-about { margin-top: 6px; }
/* A preset much wider than tall: the drawing runs across the top, the text in two columns under it. */
.wfp-detail-body[data-shape="wide"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.wfp-detail-body[data-shape="wide"] .wfp-figure { border-right: 0; border-bottom: 1px solid var(--wfp-rule); }
.wfp-detail-body[data-shape="wide"] .wfp-figure .wfp-plate { flex: none; height: clamp(190px, 34vh, 290px); }
.wfp-detail-body[data-shape="wide"] .wfp-info-text { columns: 2; column-gap: 44px; }
.wfp-steps { list-style: none; counter-reset: wfp-step; display: grid; gap: 8px; }
.wfp-steps li { position: relative; padding-left: 30px; counter-increment: wfp-step; }
.wfp-steps li::before {
    content: counter(wfp-step); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--wfp-ink); background: var(--wfp-raise); border: 1px solid var(--wfp-rule);
}
.wfp-checks { list-style: none; display: grid; gap: 8px; }
.wfp-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.wfp-checks li > svg, .wfp-checks li > .wfp-app-icon { margin-top: 3px; color: var(--wfp-ink-3); }
.wfp-need { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.wfp-need-name { color: var(--wfp-ink); font-weight: 600; }
.wfp-state { font-size: 12px; white-space: nowrap; }
.wfp-state-ok { color: var(--wfp-ok); }
.wfp-state-todo { color: var(--wfp-ink-2); }
.wfp-state-lock { color: var(--wfp-warn); font-weight: 600; }
.wfp-plain { list-style: none; display: grid; gap: 6px; }
.wfp-plain li { position: relative; padding-left: 14px; }
.wfp-plain li::before { content: ''; position: absolute; left: 1px; top: 0.72em; width: 5px; height: 1.5px; background: var(--wfp-ink-3); }
.wfp-ai-line { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--wfp-ai) 32%, var(--wfp-rule)); border-radius: 10px; background: color-mix(in srgb, var(--wfp-ai) 7%, transparent); }
.wfp-ai-line svg { margin-top: 2px; color: var(--wfp-ai); }
.wfp-info .wfp-ai-line p { color: var(--wfp-ink); }

.wfp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px 12px 24px; border-top: 1px solid var(--wfp-rule); background: var(--wfp-plate); min-height: 62px; box-sizing: border-box; }
.wfp-foot-text { min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--wfp-ink-2); }
.wfp-foot-text strong { color: var(--wfp-ink); font-weight: 600; }
.wfp-foot-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wfp-foot[data-mode="confirm"] { background: color-mix(in srgb, var(--wfp-warn) 9%, var(--wfp-plate)); }
.wfp-foot[data-mode="confirm"] .wfp-foot-text { color: var(--wfp-ink); }

/* ── The note on the canvas after a preset is placed ────────────────────────── */
.wfp-note {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 14px;
    width: min(620px, calc(100% - 28px)); padding: 12px 12px 12px 16px; box-sizing: border-box;
    background: var(--wfp-ground); color: var(--wfp-ink); border: 1px solid var(--wfp-rule); border-left: 3px solid var(--wfp-accent);
    border-radius: 10px; box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.45);
    font-size: 13px; line-height: 1.5;
}
.wfp-note-title { font-weight: 650; }
.wfp-note-text { grid-column: 1; color: var(--wfp-ink-2); }
.wfp-note-actions { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wfp-note-actions button { height: 28px; padding: 0 10px; font-size: 12.5px; font-weight: 600; background: transparent; border: 1px solid var(--wfp-rule); border-radius: 8px; color: var(--wfp-ink); }
.wfp-note-actions button:hover { border-color: var(--wfp-accent); }
.wfp-note-close { grid-column: 2; grid-row: 1 / span 3; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 8px; color: var(--wfp-ink-2); }
.wfp-note-close:hover { background: var(--wfp-raise); color: var(--wfp-ink); }

/* ── The entries in the editor (toolbar button, empty canvas, phone menu) ───── */
html.wf-system #wfPresetsBtn, html.wf-system .wf-presets-entry { display: none !important; }
.wf-empty .wf-presets-entry { margin-top: -4px; border-radius: 999px; padding: 8px 16px; }
.wf-presets-entry svg, #wfPresetsBtn svg { flex-shrink: 0; }
.wf-mob-action-item.wf-presets-entry, .wf-mob-actions-menu .wf-presets-entry { display: flex; align-items: center; gap: 8px; }

/* ── Phones and narrow windows ──────────────────────────────────────────────── */
@media (max-width: 860px) {
    .wfp-overlay { padding: 0; }
    .wfp-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
    .wfp-head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 12px 12px 16px; }
    .wfp-search { grid-column: 1 / -1; grid-row: 2; }
    .wfp-title { font-size: 18px; }
    .wfp-sub { display: none; }
    .wfp-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .wfp-rail { flex-direction: row; gap: 6px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--wfp-rule); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .wfp-rail::-webkit-scrollbar { display: none; }
    .wfp-cat { width: auto; flex: 0 0 auto; gap: 8px; padding: 0 12px; height: 34px; white-space: nowrap; border: 1px solid var(--wfp-rule); border-radius: 999px; box-shadow: none; background: var(--wfp-ground); }
    .wfp-cat[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--wfp-accent); border-color: var(--wfp-accent); }
    .wfp-bar { padding: 10px 12px; gap: 8px; }
    .wfp-count { width: 100%; margin: 0; }
    .wfp-scroll { padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .wfp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* One column that scrolls as a whole: the drawing, its caption, then the text. */
    .wfp-detail-body, .wfp-detail-body[data-shape="wide"] { display: block; overflow-y: auto; }
    .wfp-figure { display: block; border-right: 0; border-bottom: 1px solid var(--wfp-rule); }
    .wfp-figure .wfp-plate, .wfp-detail-body[data-shape="wide"] .wfp-figure .wfp-plate { height: auto; max-height: 44vh; }
    .wfp-facts { padding: 10px 16px 12px; }
    .wfp-info { overflow: visible; padding: 16px 16px 20px; }
    .wfp-detail-body[data-shape="wide"] .wfp-info-text { columns: auto; }
    .wfp-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .wfp-foot-actions { flex-direction: column-reverse; align-items: stretch; }
    .wfp-foot-actions .wfp-btn { width: 100%; height: 44px; }
    .wfp-icon-btn { width: 40px; height: 40px; }
    .wfp-seg button { height: 32px; }
    .wfp-note { top: 8px; padding: 10px 8px 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .wfp-overlay.is-opening .wfp-dialog { animation: none; }
    .wfp-card { transition: none; }
    .wfp-card:hover .wfp-d-flow, .wfp-card:focus-visible .wfp-d-flow { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}