/* /Components/Advisor/AdvisorHoursNote.razor.rz.scp.css */
/* As the Dashboard's advisor card says it. */
.advisor-hours-note[b-io8uyck8m9] {
    color: var(--amber);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0 0 12px;
}

.advisor-hours-note a[b-io8uyck8m9] {
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
}

.advisor-hours-note a:hover[b-io8uyck8m9] {
    text-decoration: underline;
}
/* /Components/Advisor/BusinessAdvisor.razor.rz.scp.css */
/* The business advisor. A column: the heading, the conversation, then the question box pinned
   under it. On its page it fills the content area's height; in the Studio's Ask panel it fills
   the panel under the tabs. */
.ba[b-5kfeoktcjb] {
    color: var(--text);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.ba-head[b-5kfeoktcjb] {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 0 0 18px;
}

.ba-head h1[b-5kfeoktcjb] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin: 0;
}

.ba-head p[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 6px 0 0;
    max-width: 62ch;
}

/* ---- the conversation ---------------------------------------------------- */

.ba-thread[b-5kfeoktcjb] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 0;
    /* Holds the hidden "Answer copied" status inside the thread. Without it that 1px box sat
       at its place far down the scrolled answers and made the whole page scroll on a phone. */
    position: relative;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

/* A short conversation sits by the question box, as in any chat. The things to ask stay at the
   top: at the foot of an empty page they sat under a tall blank space that read as broken. That
   came back when the conversation did not load, as its warning comes first and was pushed down
   with the things to ask under it. */
.ba-thread:not(:has(> .ba-empty)) > :first-child[b-5kfeoktcjb] {
    margin-top: auto;
}

.ba-empty[b-5kfeoktcjb] {
    display: grid;
    gap: 12px;
}

.ba-empty-label[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.ba-empty p[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin: 0;
}

.ba-starters[b-5kfeoktcjb] {
    display: grid;
    gap: 8px;
    /* Four questions: two rows of two, not three and one left over. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.compact .ba-starters[b-5kfeoktcjb] {
    grid-template-columns: 1fr;
}

.ba-starters button[b-5kfeoktcjb] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    height: 100%;
    line-height: 1.4;
    padding: 10px 14px;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    width: 100%;
}

.ba-starters button:hover:not(:disabled)[b-5kfeoktcjb] {
    background: var(--tint-blue);
    border-color: var(--blue);
}

.ba-turn[b-5kfeoktcjb] {
    display: grid;
    gap: 8px;
    max-width: 72ch;
    min-width: 0;
}

/* The thread is a flex column, so the side is align-self; justify-self did nothing there. */
.ba-turn.user[b-5kfeoktcjb] {
    align-self: flex-end;
    justify-items: end;
}

.ba-question[b-5kfeoktcjb] {
    background: var(--tint-blue);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 10px 14px;
    white-space: pre-wrap;
}

.ba-who[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.ba-answer[b-5kfeoktcjb] {
    border-left: 2px solid var(--line);
    display: grid;
    font-size: var(--fs-sm);
    gap: 10px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    padding-left: 14px;
}

.ba-answer[b-5kfeoktcjb]  .ba-text-para,
.ba-answer[b-5kfeoktcjb]  .ba-text-list {
    margin: 0;
}

.ba-answer[b-5kfeoktcjb]  .ba-text-list {
    display: grid;
    gap: 4px;
    padding-left: 20px;
}

.ba-answer[b-5kfeoktcjb]  a,
.ba-sources a[b-5kfeoktcjb] {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ba-note[b-5kfeoktcjb] {
    color: var(--amber);
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin: 0;
}

.ba-note-link[b-5kfeoktcjb] {
    color: var(--blue);
    font-weight: 600;
    margin-left: 4px;
}

.ba-sources[b-5kfeoktcjb] {
    display: grid;
    gap: 4px;
    padding-left: 16px;
}

.ba-sources span[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.ba-sources ul[b-5kfeoktcjb] {
    display: grid;
    font-size: var(--fs-xs);
    gap: 0;
    line-height: 1.4;
    margin: 0;
    padding-left: 18px;
}

/* Each source a 24px target: at 15px tall and 3px apart, a finger meant for one could open the
   next. */
.ba-sources li a[b-5kfeoktcjb] {
    display: inline-block;
    padding: 4px 0;
}

/* The post the answer suggests, with the way to make it. */
.ba-idea[b-5kfeoktcjb] {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    margin-left: 16px;
    padding: 12px 14px;
}

.ba-idea div[b-5kfeoktcjb] {
    display: grid;
    flex: 1 1 220px;
    gap: 2px;
    min-width: 0;
}

.ba-idea span[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.ba-idea p[b-5kfeoktcjb] {
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
}

/* Two classes, so the text column's rule above (.ba-idea div) does not reach it. */
.ba-idea .ba-idea-actions[b-5kfeoktcjb] {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 6px;
}

.ba-simple[b-5kfeoktcjb] {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 2px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ba-turn-actions[b-5kfeoktcjb] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-left: 16px;
}

.ba-copy[b-5kfeoktcjb] {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    gap: 6px;
    margin-left: -6px;
    min-height: 28px;
    padding: 4px 6px;
}

@media (hover: hover) {
    .ba-copy:hover[b-5kfeoktcjb] {
        background: var(--tint-blue);
        color: var(--blue);
    }
}

.ba-copy:focus-visible[b-5kfeoktcjb] {
    color: var(--blue);
}

.ba-copy-failed[b-5kfeoktcjb] {
    color: var(--amber);
    font-size: var(--fs-xs);
}

.compact .ba-turn-actions[b-5kfeoktcjb] {
    padding-left: 0;
}

.ba-working[b-5kfeoktcjb],
.ba-state[b-5kfeoktcjb] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    gap: 8px;
}

.ba-state.warning[b-5kfeoktcjb] {
    border-left: 2px solid var(--amber);
    color: var(--text);
    padding-left: 10px;
}

.ba-dot[b-5kfeoktcjb] {
    animation: ba-pulse-b-5kfeoktcjb 1.2s ease-in-out infinite;
    background: var(--green-ink);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

@keyframes ba-pulse-b-5kfeoktcjb {
    50% { opacity: 0.35; }
}

.ba-confirm[b-5kfeoktcjb] {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 10px 16px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 12px 14px;
}

.ba-confirm div[b-5kfeoktcjb] {
    display: flex;
    gap: 8px;
}

/* ---- the question box ------------------------------------------------------- */

.ba-form[b-5kfeoktcjb] {
    border-top: 1px solid var(--border-light);
    padding-top: 14px;
}

.ba-well[b-5kfeoktcjb] {
    align-items: end;
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 8px 8px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ba-well:focus-within[b-5kfeoktcjb] {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.14);
}

/* The well rings for the field inside it, so the keyboard ring is not drawn twice. With only the
   border and glow above, High Contrast (which drops both) showed no focus at all; an outline
   stays, as in the Studio's Ask box. */
.ba-well:has(.ba-input:focus-visible)[b-5kfeoktcjb] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.ba-input:focus-visible[b-5kfeoktcjb] {
    outline: none !important;
    box-shadow: none !important;
}

.ba-input[b-5kfeoktcjb] {
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-note);
    line-height: 1.5;
    max-height: 160px;
    min-height: 44px;
    padding: 4px 0;
    resize: none;
}

.ba-input:focus[b-5kfeoktcjb] {
    outline: none;
}

.ba-input[b-5kfeoktcjb]::placeholder {
    color: var(--text-secondary);
}

.ba-send[b-5kfeoktcjb] {
    align-items: center;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-xs);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.ba-send:hover:not(:disabled)[b-5kfeoktcjb] {
    background: var(--accent-dark);
}

.ba-form-foot[b-5kfeoktcjb] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 8px;
}

.ba-hint[b-5kfeoktcjb] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin: 0;
}

/* ---- buttons -------------------------------------------------------------- */

.ba-quiet[b-5kfeoktcjb],
.ba-stop[b-5kfeoktcjb],
.ba-danger[b-5kfeoktcjb],
.ba-primary[b-5kfeoktcjb] {
    border-radius: var(--radius-xs);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    min-height: 36px;
    padding: 6px 14px;
    white-space: nowrap;
}

.ba-quiet[b-5kfeoktcjb],
.ba-stop[b-5kfeoktcjb] {
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--blue);
}

.ba-quiet:hover:not(:disabled)[b-5kfeoktcjb],
.ba-stop:hover[b-5kfeoktcjb] {
    border-color: var(--blue);
}

.ba-primary[b-5kfeoktcjb] {
    background: var(--accent);
    border: none;
    color: #ffffff;
}

.ba-primary:hover:not(:disabled)[b-5kfeoktcjb] {
    background: var(--accent-dark);
}

.ba-danger[b-5kfeoktcjb] {
    background: #ffffff;
    border: 1px solid var(--red-ink);
    color: var(--red-ink);
}

.ba button:disabled[b-5kfeoktcjb],
.ba-input:disabled[b-5kfeoktcjb] {
    cursor: default;
    opacity: 0.58;
}

.ba button:focus-visible[b-5kfeoktcjb] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* ---- in the Studio's Ask panel ---------------------------------------------- */

/* No page heading here, so the conversation is the first row and takes the height. */
.ba.compact[b-5kfeoktcjb] {
    grid-template-rows: minmax(0, 1fr) auto auto;
}

.compact .ba-hint .ba-hint-keys[b-5kfeoktcjb] {
    display: none;
}

.compact .ba-thread[b-5kfeoktcjb] {
    gap: 18px;
    padding: 14px 0;
}

.compact .ba-answer[b-5kfeoktcjb],
.compact .ba-question[b-5kfeoktcjb] {
    font-size: var(--fs-sm);
}

.compact .ba-idea[b-5kfeoktcjb] {
    margin-left: 0;
}

/* A phone has no Enter key to explain, but the dates warning still applies there. */
@media (hover: none) and (pointer: coarse) {
    .ba-hint .ba-hint-keys[b-5kfeoktcjb] {
        display: none;
    }
}

/* High Contrast drops the fill, and with no border "Make a post from this" read as a plain line
   beside the idea, quieter than the Simple mode link under it. */
@media (forced-colors: active) {
    .ba-primary[b-5kfeoktcjb] {
        border: 1px solid ButtonText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ba-dot[b-5kfeoktcjb] {
        animation: none;
    }

    .ba-starters button[b-5kfeoktcjb],
    .ba-well[b-5kfeoktcjb] {
        transition: none;
    }
}

@media (max-width: 640px) {
    .ba-starters[b-5kfeoktcjb] {
        grid-template-columns: 1fr;
    }

    .ba-head[b-5kfeoktcjb] {
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
    }

    .ba-head h1[b-5kfeoktcjb] {
        font-size: var(--fs-xl);
    }

    /* Once there is a conversation, the line about what it does gives the phone's height to it. */
    .ba.has-turns .ba-head p[b-5kfeoktcjb] {
        display: none;
    }

    .ba-input[b-5kfeoktcjb] {
        font-size: var(--fs-md);
    }
}

/* On a short screen the Advisor page scrolls as a whole, so the conversation grows with its
   answers rather than scrolling inside a box one line tall. */
@media (max-height: 520px) {
    .ba:not(.compact) .ba-thread[b-5kfeoktcjb] {
        overflow-y: visible;
    }

    .ba:not(.compact).has-turns .ba-head p[b-5kfeoktcjb] {
        display: none;
    }
}
/* /Components/AnalysisProgressPanel.razor.rz.scp.css */
.analysis-progress-host[b-u0ca0ofx68] {
    --modal-radius: var(--radius); --modal-mobile-radius: var(--radius); --modal-mobile-align: center;
    --modal-panel-border: 1px solid var(--border-light); color: var(--text);
}
.analysis-progress-host[b-u0ca0ofx68]  .analysis-progress-dialog { width: min(520px, 100%); background: #fff; }
.analysis-progress-host[b-u0ca0ofx68]  * { letter-spacing: 0; box-sizing: border-box; }
.analysis-progress-header[b-u0ca0ofx68] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-light); }
.analysis-progress-label[b-u0ca0ofx68] { font-size: var(--fs-note); font-weight: 600; }
.analysis-progress-close[b-u0ca0ofx68] { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-control); background: #fff; color: var(--text-secondary); cursor: pointer; }
.analysis-progress-close:hover[b-u0ca0ofx68] { background: var(--bg-canvas); color: var(--text); }
.analysis-progress-body[b-u0ca0ofx68] { padding: 24px; overflow-wrap: anywhere; }
.analysis-progress-symbol[b-u0ca0ofx68] { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--blue); background: var(--pill); margin-bottom: 16px; }
.analysis-progress-symbol.is-complete[b-u0ca0ofx68] { color: var(--green-ink); background: var(--tint-green); }
.analysis-progress-symbol.is-error[b-u0ca0ofx68] { color: var(--red-ink); background: var(--tint-red); }
.analysis-progress-body h2[b-u0ca0ofx68] { margin: 0 0 12px; font-size: var(--fs-heading); line-height: 1.3; font-weight: 600; }
.analysis-progress-body p[b-u0ca0ofx68] { margin: 0; color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.6; }
.analysis-progress-body .analysis-progress-error[b-u0ca0ofx68] { margin-top: 20px; padding: 12px; border: 1px solid var(--tint-red-line); border-radius: var(--radius-xs); background: var(--tint-red); color: var(--red-ink); }
.analysis-progress-body .analysis-progress-status[b-u0ca0ofx68] { margin-top: 20px; }
.analysis-progress-readout[b-u0ca0ofx68] { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 24px 0 10px; font-size: var(--fs-note); line-height: 1.5; }
.analysis-progress-readout strong[b-u0ca0ofx68] { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.analysis-progress-track[b-u0ca0ofx68] { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.analysis-progress-fill[b-u0ca0ofx68] { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.analysis-progress-stages[b-u0ca0ofx68] { list-style: none; display: grid; gap: 10px; margin: 20px 0 0; padding: 0; font-size: var(--fs-note); line-height: 1.4; }
.analysis-progress-stage[b-u0ca0ofx68] { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.analysis-progress-stage-mark[b-u0ca0ofx68] { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; }
.analysis-progress-stage.is-done[b-u0ca0ofx68] { color: var(--text-secondary); }
.analysis-progress-stage.is-done .analysis-progress-stage-mark[b-u0ca0ofx68] { border-color: var(--tint-green); background: var(--tint-green); color: var(--green-ink); }
.analysis-progress-stage.is-now[b-u0ca0ofx68] { color: var(--text); font-weight: 600; }
.analysis-progress-stage.is-now .analysis-progress-stage-mark[b-u0ca0ofx68] { border-color: var(--blue); }
.analysis-progress-stage.is-now .analysis-progress-stage-mark[b-u0ca0ofx68]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.analysis-progress-stage-now[b-u0ca0ofx68] { margin-left: auto; flex: none; color: var(--blue); font-size: var(--fs-xs); font-weight: 600; }
.analysis-progress-actions[b-u0ca0ofx68] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 20px 24px; border-top: 1px solid var(--border-light); }
.analysis-progress-actions button[b-u0ca0ofx68], .analysis-progress-actions a[b-u0ca0ofx68] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-control); font: inherit; font-size: var(--fs-note); font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.analysis-progress-secondary[b-u0ca0ofx68] { background: #fff; color: var(--text); }
.analysis-progress-secondary:hover[b-u0ca0ofx68] { background: var(--bg-canvas); }
.analysis-progress-actions .analysis-progress-primary[b-u0ca0ofx68] { background: var(--accent); color: #fff; border-color: var(--accent); }
.analysis-progress-primary:hover[b-u0ca0ofx68] { background: var(--accent-dark); }
.analysis-progress-host[b-u0ca0ofx68]  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 520px) {
    .analysis-progress-header[b-u0ca0ofx68] { padding-inline: 16px; }
    .analysis-progress-body[b-u0ca0ofx68] { padding: 20px 16px; }
    .analysis-progress-body h2[b-u0ca0ofx68] { font-size: var(--fs-heading-sm); }
    .analysis-progress-actions[b-u0ca0ofx68] { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .analysis-progress-fill[b-u0ca0ofx68] { transition: none; } }
/* /Components/Chat/ChatPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   Image Studio — Chat-first design
   ══════════════════════════════════════════════ */

.studio-root[b-8nas4si2cy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--surface);
    border-radius: var(--analyze-inner-radius, 16px);
}

/* ── Header ── */
.studio-header[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    flex-shrink: 0;
}

.studio-header-left[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-icon[b-8nas4si2cy] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow);
}

.studio-title[b-8nas4si2cy] {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.studio-quota[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-quota-dots[b-8nas4si2cy] {
    display: flex;
    gap: 4px;
}

.studio-dot[b-8nas4si2cy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.studio-dot.available[b-8nas4si2cy] {
    background: var(--blue);
    box-shadow: 0 0 6px rgba(77, 157, 224, 0.3);
}

.studio-dot.used[b-8nas4si2cy] {
    background: rgba(0, 0, 0, 0.1);
}

.studio-quota-text[b-8nas4si2cy] {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--muted);
    letter-spacing: -0.01em;
}

/* ── Gallery strip ── */
.studio-gallery[b-8nas4si2cy] {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    overflow-x: auto;
    flex-shrink: 0;
}

.studio-gallery[b-8nas4si2cy]::-webkit-scrollbar { height: 4px; }
.studio-gallery[b-8nas4si2cy]::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 2px; }

.studio-thumb-wrap[b-8nas4si2cy] {
    position: relative;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.studio-thumb-wrap:hover[b-8nas4si2cy] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.studio-thumb[b-8nas4si2cy] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.studio-thumb-hover[b-8nas4si2cy] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: var(--radius-sm);
}

.studio-thumb-wrap:hover .studio-thumb-hover[b-8nas4si2cy] {
    opacity: 1;
}

/* ── Messages area ── */
.studio-messages[b-8nas4si2cy] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    scroll-behavior: smooth;
}

.studio-messages[b-8nas4si2cy]::-webkit-scrollbar { width: 5px; }
.studio-messages[b-8nas4si2cy]::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
.studio-messages[b-8nas4si2cy]::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.14); }

/* ── Welcome state ── */
.studio-welcome[b-8nas4si2cy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px 16px;
    position: relative;
    animation: studioFadeIn-b-8nas4si2cy 0.5s ease;
    margin: auto 0; /* vertically center in flex container */
}

.studio-welcome-glow[b-8nas4si2cy] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(77, 157, 224, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.studio-welcome-icon[b-8nas4si2cy] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(77, 157, 224, 0.08), rgba(123, 111, 212, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
}

.studio-welcome-title[b-8nas4si2cy] {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
}

.studio-welcome-sub[b-8nas4si2cy] {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin: 0 0 20px;
    line-height: 1.5;
    max-width: 280px;
}

.studio-suggestions[b-8nas4si2cy] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-width: 340px;
}

.studio-suggestion[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    /* A suggestion is a button, and no button on the landing page carries a
       stripe down one edge. The 1px boundary is the whole boundary. */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-control);
    background: rgba(0, 0, 0, 0.015);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    line-height: 1.4;
}

.studio-suggestion:hover[b-8nas4si2cy] {
    border-color: rgba(77, 157, 224, 0.15);
    border-left-color: var(--blue);
    background: rgba(77, 157, 224, 0.04);
    color: var(--blue);
    transform: translateY(-1px);
    box-shadow: var(--glow);
}

.studio-suggestion svg[b-8nas4si2cy] {
    flex-shrink: 0;
    opacity: 0.5;
}

.studio-suggestion:hover svg[b-8nas4si2cy] {
    opacity: 1;
}

/* ── Message bubbles ── */
.studio-msg[b-8nas4si2cy] {
    display: flex;
    flex-direction: column;
    max-width: 95%;
    animation: studioMsgIn-b-8nas4si2cy 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-msg.user[b-8nas4si2cy] {
    align-self: flex-end;
    max-width: 80%;
}

.studio-msg.assistant[b-8nas4si2cy] {
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
}

.studio-msg.assistant.image-msg[b-8nas4si2cy] {
    flex-direction: column;
    max-width: 90%;
}

.studio-msg-avatar[b-8nas4si2cy] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: var(--radius-xs);
    background: linear-gradient(135deg, rgba(77, 157, 224, 0.1), rgba(123, 111, 212, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.studio-msg-bubble[b-8nas4si2cy] {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.55;
    word-wrap: break-word;
}

.studio-msg.user .studio-msg-bubble[b-8nas4si2cy] {
    background: var(--blue);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: var(--glow);
}

.studio-msg.assistant .studio-msg-bubble[b-8nas4si2cy] {
    background: var(--report-diagnostic-bg, var(--ground));
    color: var(--ink);
    border-bottom-left-radius: 6px;
    padding: 12px 16px;
}

/* Streaming cursor */
.studio-msg-bubble.streaming[b-8nas4si2cy]::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 14px;
    background: var(--blue);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: studioBlink-b-8nas4si2cy 0.7s infinite;
}

.studio-msg-bubble.streaming-complete[b-8nas4si2cy]::after {
    display: none;
}

/* ── Inline generated image ── */
.studio-inline-image[b-8nas4si2cy] {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    animation: studioImageIn-b-8nas4si2cy 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-inline-image:hover[b-8nas4si2cy] {
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.studio-inline-image img[b-8nas4si2cy] {
    width: 100%;
    display: block;
    border-radius: var(--radius);
    max-height: 280px;
    object-fit: cover;
}

.studio-inline-image-overlay[b-8nas4si2cy] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: var(--radius);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: white;
}

.studio-inline-image:hover .studio-inline-image-overlay[b-8nas4si2cy] {
    opacity: 1;
}

/* ── Generation in progress ── */
.studio-generating[b-8nas4si2cy] {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    height: 180px;
    background: var(--ground);
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-generating-shimmer[b-8nas4si2cy] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(77, 157, 224, 0.06) 30%,
        rgba(123, 111, 212, 0.08) 50%,
        rgba(77, 157, 224, 0.06) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: studioShimmer-b-8nas4si2cy 2s ease infinite;
}

.studio-generating-content[b-8nas4si2cy] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.studio-generating-spinner[b-8nas4si2cy] {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(77, 157, 224, 0.15);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: studioSpin-b-8nas4si2cy 0.8s linear infinite;
}

/* Prompt highlight — rendered via @((MarkupString)...) so needs global scope.
   Styles are in a <style> block in the razor file to avoid scoping issues. */

/* ── Generate sticky bar ── */
.studio-generate-bar[b-8nas4si2cy] {
    display: flex;
    justify-content: center;
    padding: 10px 16px 0;
    flex-shrink: 0;
    animation: studioFadeIn-b-8nas4si2cy 0.3s ease;
}

.studio-generate-bar .studio-generate-btn[b-8nas4si2cy] {
    width: 100%;
    justify-content: center;
    padding: 11px 20px;
    font-size: var(--fs-note);
    border-radius: var(--radius-control);
}

/* ── Action buttons on messages ── */
.studio-msg-actions[b-8nas4si2cy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-left: 30px; /* align with bubble, past avatar */
}

.studio-generate-btn[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--glow);
}

.studio-generate-btn:hover:not(:disabled)[b-8nas4si2cy] {
    transform: translateY(-1px);
    box-shadow: var(--glow);
}

.studio-generate-btn:disabled[b-8nas4si2cy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.studio-action-btn[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--blue);
    border-radius: var(--radius-control);
    background: rgba(77, 157, 224, 0.06);
    color: var(--blue);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.studio-action-btn:hover[b-8nas4si2cy] {
    background: var(--blue);
    color: #fff;
}

/* ── Exhausted CTA ── */
.studio-exhausted[b-8nas4si2cy] {
    padding: 4px 0;
    animation: studioFadeIn-b-8nas4si2cy 0.5s ease;
}

.studio-exhausted-inner[b-8nas4si2cy] {
    text-align: center;
    padding: 20px 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(77, 157, 224, 0.04), rgba(123, 111, 212, 0.06));
    border: 1px solid rgba(123, 111, 212, 0.08);
}

.studio-exhausted-text[b-8nas4si2cy] {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin: 0 0 14px;
    line-height: 1.5;
}

.studio-cta-btn[b-8nas4si2cy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--glow);
    transition: all 0.2s ease;
}

.studio-cta-btn:hover[b-8nas4si2cy] {
    transform: translateY(-1px);
    box-shadow: var(--glow);
}

/* ── Input area ── */
.studio-input-area[b-8nas4si2cy] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(250, 250, 252, 0.8);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.studio-input-area.disabled[b-8nas4si2cy] {
    opacity: 0.6;
}

.studio-input[b-8nas4si2cy]{
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-sm);
    line-height: 1.45;
    resize: none;
    outline: none;
    background: #fff;
    max-height: 80px;
    overflow-y: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.studio-input:focus[b-8nas4si2cy] {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}

.studio-input:disabled[b-8nas4si2cy] {
    cursor: not-allowed;
    background: var(--ground);
}

.studio-send[b-8nas4si2cy] {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: var(--glow);
}

.studio-send:disabled[b-8nas4si2cy] {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.studio-send:not(:disabled):hover[b-8nas4si2cy] {
    transform: translateY(-1px);
    box-shadow: var(--glow);
}

/* ── Image Overlay (reused from ImagePlayground) ── */
.studio-preview-host[b-8nas4si2cy]  .studio-preview-backdrop {
    --modal-z: 2100;
    --modal-overlay-padding: 24px;
    --modal-mobile-overlay-padding: 8px;
    --modal-mobile-align: center;
    --modal-radius: var(--radius);
    --modal-mobile-radius: var(--radius);
    --modal-max-height: calc(100dvh - 48px);
    --modal-mobile-max-height: calc(100dvh - 16px);
    --ydy-modal-width: 960px;
}

.studio-preview-host[b-8nas4si2cy]  .studio-preview-panel {
    display: flex;
    flex-direction: column;
    height: min(800px, calc(100dvh - 48px));
    overflow: hidden;
    background: #fff;
    color: var(--ink);
}

.studio-preview-host.maximized[b-8nas4si2cy]  .studio-preview-backdrop {
    --modal-overlay-padding: 0;
    --modal-mobile-overlay-padding: 0;
    --modal-radius: 0;
    --modal-mobile-radius: 0;
    --modal-max-height: 100dvh;
    --modal-mobile-max-height: 100dvh;
    --ydy-modal-width: 100%;
}

.studio-preview-host.maximized[b-8nas4si2cy]  .studio-preview-panel { height: 100dvh; }
.studio-preview-host[b-8nas4si2cy], .studio-preview-host *[b-8nas4si2cy] { box-sizing: border-box; letter-spacing: 0; }
.studio-preview-host :focus-visible[b-8nas4si2cy] { outline: 2px solid var(--blue); outline-offset: 3px; }

.ip-overlay-toolbar[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    gap: 12px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--line);
}

.ip-overlay-counter[b-8nas4si2cy] {
    font-size: var(--fs-note);
    color: var(--ink);
    font-weight: 600;
}

.ip-overlay-actions[b-8nas4si2cy] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ip-overlay-btn[b-8nas4si2cy] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ip-overlay-btn:hover:not(:disabled)[b-8nas4si2cy] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink);
}
.ip-overlay-btn:disabled[b-8nas4si2cy] { opacity: .35; cursor: default; }

.ip-overlay-image-wrap[b-8nas4si2cy] {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--ground);
}

.ip-overlay-image[b-8nas4si2cy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
}

.ip-overlay-footer[b-8nas4si2cy] {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.ip-overlay-navigation[b-8nas4si2cy] { display: flex; gap: 4px; margin-right: auto; }

.ip-overlay-generate[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: #fff;
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
}
.ip-overlay-generate:hover[b-8nas4si2cy] { background: var(--accent-dark); }
.studio-preview-error[b-8nas4si2cy] { padding: 24px; text-align: center; overflow: auto; max-height: 100%; }
.studio-preview-error p[b-8nas4si2cy] { margin: 12px 0; font-size: var(--fs-note); }
.studio-preview-retry[b-8nas4si2cy] { min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-control); background: #fff; color: var(--text); font: inherit; cursor: pointer; }
@media (max-width: 520px) {
    .studio-preview-host[b-8nas4si2cy]  .studio-preview-panel { height: calc(100dvh - 16px); }
    .ip-overlay-toolbar[b-8nas4si2cy], .ip-overlay-footer[b-8nas4si2cy] { padding-inline: 12px; }
    .ip-overlay-footer[b-8nas4si2cy] { gap: 8px; }
    .ip-overlay-generate[b-8nas4si2cy] { flex: 1; justify-content: center; padding-inline: 12px; }
    .ip-overlay-image[b-8nas4si2cy] { padding: 8px; }
}

/* ── Animations ── */
@keyframes studioFadeIn-b-8nas4si2cy {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes studioMsgIn-b-8nas4si2cy {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes studioImageIn-b-8nas4si2cy {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes studioSlideUp-b-8nas4si2cy {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes studioShimmer-b-8nas4si2cy {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes studioSpin-b-8nas4si2cy {
    to { transform: rotate(360deg); }
}

@keyframes studioBlink-b-8nas4si2cy {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ══════════════════════════════════════════════
   Compact Chat Assistant (legacy mode)
   ══════════════════════════════════════════════ */

.chat-panel[b-8nas4si2cy] {
    margin-top: 16px;
}

.chat-panel.collapsed[b-8nas4si2cy] {
    display: flex;
    justify-content: center;
}

.chat-toggle[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

.chat-toggle:hover[b-8nas4si2cy] {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(77, 157, 224, 0.04);
}

.chat-container[b-8nas4si2cy] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 320px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.chat-header[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.chat-title[b-8nas4si2cy] {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.chat-minimize[b-8nas4si2cy] {
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-minimize:hover[b-8nas4si2cy] {
    background: rgba(0, 0, 0, 0.06);
}

.chat-messages[b-8nas4si2cy] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-welcome[b-8nas4si2cy] {
    text-align: left;
    padding: 14px;
    background: var(--ground);
    border-radius: var(--radius);
    color: var(--muted);
}

.chat-welcome p[b-8nas4si2cy] {
    font-size: var(--fs-sm);
    margin: 0 0 12px;
}

.quick-actions[b-8nas4si2cy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.quick-action[b-8nas4si2cy] {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
}

.quick-action:hover[b-8nas4si2cy] {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(77, 157, 224, 0.04);
}

.chat-msg[b-8nas4si2cy] {
    max-width: 85%;
}

.chat-msg.user[b-8nas4si2cy] {
    align-self: flex-end;
}

.chat-msg.assistant[b-8nas4si2cy] {
    align-self: flex-start;
}

.msg-content[b-8nas4si2cy] {
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-msg.user .msg-content[b-8nas4si2cy] {
    background: var(--blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg.assistant .msg-content[b-8nas4si2cy] {
    background: var(--ground);
    color: var(--ink);
    border-bottom-left-radius: 4px;
}

.msg-content.streaming[b-8nas4si2cy]::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 14px;
    background: var(--blue);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: studioBlink-b-8nas4si2cy 0.7s infinite;
}

.msg-content.streaming-complete[b-8nas4si2cy]::after {
    display: none;
}

.msg-actions[b-8nas4si2cy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.action-btn[b-8nas4si2cy] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--blue);
    border-radius: var(--radius-control);
    background: rgba(77, 157, 224, 0.06);
    color: var(--blue);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.action-btn:hover[b-8nas4si2cy] {
    background: var(--blue);
    color: #fff;
}

.action-btn:disabled[b-8nas4si2cy],
.studio-action-btn:disabled[b-8nas4si2cy],
.studio-generate-btn:disabled[b-8nas4si2cy] {
    cursor: default;
    opacity: 0.55;
    transform: none;
}

.chat-input-area[b-8nas4si2cy] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: var(--ground);
}

.chat-input[b-8nas4si2cy]{
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-sm);
    line-height: 1.4;
    resize: none;
    outline: none;
    background: #fff;
    max-height: 80px;
    overflow-y: auto;
}

.chat-input:focus[b-8nas4si2cy] {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}

.chat-send[b-8nas4si2cy] {
    padding: 8px;
    border: none;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.chat-send:disabled[b-8nas4si2cy] {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-send:not(:disabled):hover[b-8nas4si2cy] {
    opacity: 0.85;
}

@media (max-width: 760px) {
    .chat-container[b-8nas4si2cy] {
        height: 280px;
        border-radius: var(--radius);
    }

    .chat-header[b-8nas4si2cy],
    .chat-messages[b-8nas4si2cy] {
        padding: 10px 12px;
    }

    .chat-welcome[b-8nas4si2cy] {
        padding: 12px;
    }

    .chat-welcome p[b-8nas4si2cy],
    .msg-content[b-8nas4si2cy] {
        font-size: var(--fs-xs);
    }

    .quick-action[b-8nas4si2cy] {
        font-size: var(--fs-2xs);
        padding: 6px 10px;
    }

    .chat-input-area[b-8nas4si2cy] {
        padding: 8px 10px;
    }
}

/* Shared Image Studio surfaces use the landing/workspace visual language. */
.studio-root[b-8nas4si2cy], .studio-root *[b-8nas4si2cy] { letter-spacing: 0; box-sizing: border-box; }
.studio-root :focus-visible[b-8nas4si2cy] { outline: 2px solid var(--blue); outline-offset: 3px; }
.studio-root[b-8nas4si2cy] { height: 100%; width: 100%; min-width: 0; border-radius: 0; }
.studio-header[b-8nas4si2cy] { padding: 20px 24px 16px; gap: 12px; flex-wrap: wrap; }
.studio-title[b-8nas4si2cy] { font-size: var(--fs-md); font-weight: 600; }
.studio-icon[b-8nas4si2cy] { background: var(--accent); border-radius: var(--radius-xs); box-shadow: none; }
.studio-quota[b-8nas4si2cy] { flex-wrap: wrap; }
.studio-quota-text[b-8nas4si2cy] { font-size: var(--fs-sm); }
.studio-dot.available[b-8nas4si2cy] { background: var(--green-ink); box-shadow: none; }
.studio-messages[b-8nas4si2cy] { padding: 8px 24px 20px; overscroll-behavior: contain; }
.studio-welcome[b-8nas4si2cy] { align-items: flex-start; text-align: left; padding: 24px 0; margin: 0; }
.studio-welcome-glow[b-8nas4si2cy] { display: none; }
.studio-welcome-icon[b-8nas4si2cy] { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--pill); }
.studio-welcome-title[b-8nas4si2cy] { font-size: var(--fs-heading-sm); font-weight: 600; }
.studio-welcome-sub[b-8nas4si2cy] { font-size: var(--fs-note); max-width: 40ch; }
.studio-suggestions[b-8nas4si2cy] { max-width: none; gap: 8px; }
.studio-suggestion[b-8nas4si2cy] { min-height: 44px; border: 1px solid var(--border-light); border-radius: var(--radius-control); background: #fff; font-size: var(--fs-note); padding: 10px 12px; }
.studio-suggestion:hover[b-8nas4si2cy] { background: var(--pill); border-color: var(--accent); box-shadow: none; transform: none; }
.studio-input-area[b-8nas4si2cy] { gap: 8px; padding: 16px 24px; align-items: flex-end; }
.studio-input[b-8nas4si2cy] { min-width: 0; min-height: 44px; max-height: 120px; border-radius: var(--radius-control); padding: 10px 12px; font-size: var(--fs-md); }
.studio-send[b-8nas4si2cy] { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-control); background: var(--accent); box-shadow: none; }
.studio-msg-bubble[b-8nas4si2cy] { border-radius: var(--radius-sm); font-size: var(--fs-note); }
.studio-msg.user .studio-msg-bubble[b-8nas4si2cy] { background: var(--pill); color: var(--text); }
.studio-msg-bubble[b-8nas4si2cy]  .studio-prompt-highlight, .msg-content[b-8nas4si2cy]  .studio-prompt-highlight { margin: 8px 0 4px; padding: 10px 14px; border: 1px solid var(--border-light); border-left: 2px solid var(--accent); background: var(--tint-blue); border-radius: 4px; color: var(--text); font-size: var(--fs-note); font-style: normal; }
.studio-generate-btn[b-8nas4si2cy], .studio-cta-btn[b-8nas4si2cy] { min-height: 44px; border-radius: var(--radius-control); background: var(--accent); box-shadow: none; font-size: var(--fs-note); white-space: normal; }
.studio-exhausted-inner[b-8nas4si2cy] { border-radius: var(--radius-xs); background: var(--tint-blue); }
.studio-gallery[b-8nas4si2cy] { padding: 4px 24px 12px; scrollbar-color: var(--line-field) var(--tint-blue); scrollbar-width: thin; }
.studio-generate-bar[b-8nas4si2cy] { padding-inline: 24px; }
.studio-gallery[b-8nas4si2cy]::-webkit-scrollbar { height: 8px; }
.studio-gallery[b-8nas4si2cy]::-webkit-scrollbar-thumb { background: var(--line-field); }
.studio-thumb-wrap[b-8nas4si2cy] { width: 64px; height: 64px; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-xs); background: var(--ground); }
.studio-thumb[b-8nas4si2cy] { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.studio-thumb-wrap:hover[b-8nas4si2cy] { transform: none; box-shadow: none; border-color: var(--accent); }
.studio-thumb-hover[b-8nas4si2cy] { border-radius: 0; }
.studio-thumb-wrap:focus-visible .studio-thumb-hover[b-8nas4si2cy] { opacity: 1; }
.studio-inline-image[b-8nas4si2cy] { width: 100%; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-shadow: none; background: var(--ground); }
.studio-inline-image:hover[b-8nas4si2cy] { transform: none; box-shadow: none; }
.studio-inline-image img[b-8nas4si2cy] { width: 100%; height: 240px; object-fit: contain; border-radius: 0; }
/* Dark enough under the label: at half black it was about 3.4:1 over a light photo. */
.studio-inline-image-overlay[b-8nas4si2cy] { border-radius: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.6) 25%, transparent 55%); }
.studio-inline-image:focus-visible .studio-inline-image-overlay[b-8nas4si2cy] { opacity: 1; }
/* A phone never hovers, so it never learned a tap opens the picture full size. A small pill at
   the foot: the hover band over the whole lower half, always on, darkened every picture the
   owner was judging. */
@media (hover: none) {
    .studio-inline-image-overlay[b-8nas4si2cy] {
        opacity: 1;
        inset: auto 0 10px 0;
        width: max-content;
        height: auto;
        margin: 0 auto;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.7);
    }
}
.studio-msg.assistant.image-msg[b-8nas4si2cy] { width: 100%; max-width: 100%; }
.studio-generating[b-8nas4si2cy] { width: 100%; min-width: 0; height: 112px; padding: 16px; border-radius: var(--radius-sm); background: var(--ground); }
.studio-generating-shimmer[b-8nas4si2cy] { display: none; }
.studio-generating-content[b-8nas4si2cy] { font-size: var(--fs-note); text-align: center; }
.studio-msg[b-8nas4si2cy] { flex-shrink: 0; min-width: 0; overflow-wrap: anywhere; }
.studio-msg.assistant[b-8nas4si2cy] { flex-wrap: wrap; width: 100%; }
.studio-msg.assistant .studio-msg-bubble[b-8nas4si2cy] { min-width: 0; flex: 1 1 0; }
.studio-msg.assistant .studio-msg-actions[b-8nas4si2cy] { flex: 1 0 calc(100% - 30px); }
.studio-msg-avatar[b-8nas4si2cy] { background: var(--pill); }
.studio-msg.user .studio-msg-bubble[b-8nas4si2cy] { box-shadow: none; }
.studio-msg.assistant .studio-msg-error[b-8nas4si2cy] { background: var(--ground); color: var(--red-ink); border: 1px solid var(--tint-red-line); }
.studio-action-btn[b-8nas4si2cy] { min-height: 44px; font-size: var(--fs-note); border-radius: var(--radius-control); }
.studio-cta-btn:hover[b-8nas4si2cy], .studio-generate-btn:hover:not(:disabled)[b-8nas4si2cy] { transform: none; box-shadow: none; }
.studio-exhausted-inner[b-8nas4si2cy] { padding: 16px 0; border: 0; border-top: 1px solid var(--border-light); border-radius: 0; background: #fff; text-align: left; }
.chat-panel[b-8nas4si2cy], .chat-panel *[b-8nas4si2cy] { box-sizing: border-box; letter-spacing: 0; }
.chat-panel :focus-visible[b-8nas4si2cy] { outline: 2px solid var(--blue); outline-offset: 3px; }
.chat-container[b-8nas4si2cy] { border-radius: var(--radius-sm); box-shadow: none; min-width: 0; max-height: calc(100dvh - 24px); }
.chat-toggle[b-8nas4si2cy], .quick-action[b-8nas4si2cy], .action-btn[b-8nas4si2cy] { min-height: 44px; border-radius: var(--radius-control); font-size: var(--fs-note); }
.chat-minimize[b-8nas4si2cy], .chat-send[b-8nas4si2cy] { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-control); }
.chat-welcome[b-8nas4si2cy] { background: #fff; padding: 0; border-radius: 0; }
.chat-welcome p[b-8nas4si2cy], .msg-content[b-8nas4si2cy] { font-size: var(--fs-note); }
.chat-msg[b-8nas4si2cy] { min-width: 0; overflow-wrap: anywhere; }
.msg-content[b-8nas4si2cy] { border-radius: var(--radius-sm); }
.chat-msg.user .msg-content[b-8nas4si2cy] { background: var(--pill); color: var(--text); }
.chat-input[b-8nas4si2cy] { min-width: 0; min-height: 44px; font-size: var(--fs-md); border-radius: var(--radius-control); }
.chat-messages[b-8nas4si2cy] { min-height: 0; overscroll-behavior: contain; }
@media (max-width: 800px) {
    .chat-container[b-8nas4si2cy] { height: 340px; }
    .studio-header[b-8nas4si2cy] { padding: 16px; }
    .studio-gallery[b-8nas4si2cy], .studio-generate-bar[b-8nas4si2cy] { padding-inline: 16px; }
    .studio-messages[b-8nas4si2cy] { padding-inline: 16px; }
    .studio-welcome[b-8nas4si2cy] { padding: 12px 0; }
    .studio-input-area[b-8nas4si2cy] { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
    .studio-input[b-8nas4si2cy] { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    .studio-root *[b-8nas4si2cy], .studio-root *[b-8nas4si2cy]::before, .studio-root *[b-8nas4si2cy]::after, .chat-panel *[b-8nas4si2cy], .chat-panel *[b-8nas4si2cy]::after, .studio-preview-host *[b-8nas4si2cy] { animation: none; transition: none; scroll-behavior: auto; }
    /* Still turning, slowly: a spinner standing still reads as stuck. */
    .studio-generating-spinner[b-8nas4si2cy] { animation: studioSpin-b-8nas4si2cy 1.6s linear infinite; }
}

/* High Contrast drops both fills, so every dot vanished. Left ones are filled, used ones are rings. */
@media (forced-colors: active) {
    .studio-dot[b-8nas4si2cy] {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
        box-shadow: none;
    }

    .studio-dot.available[b-8nas4si2cy] { background: CanvasText; }
    .studio-dot.used[b-8nas4si2cy] { background: Canvas; }
}
/* /Components/LiveAnalysisCard.razor.rz.scp.css */
.analyze-card[b-69qzjq5drv], .analyze-card.revealed[b-69qzjq5drv], .analyze-card.skeleton-state[b-69qzjq5drv] {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px;
    align-items: center; padding: 20px 0; background: transparent; border-radius: 0;
    border-top: 1px solid var(--border-light); box-shadow: none; opacity: 1;
    transform: none; transition: none; min-width: 0; letter-spacing: 0;
}
/* One quiet tint for every phase, as in the landing's analysis panel. Each card used to carry
   its own saturated colour (blue, cyan, orange, green, purple, pink). */
.analyze-card-icon[b-69qzjq5drv] { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: var(--radius-xs); margin: 0; background: var(--pill); color: var(--blue); }
.analyze-card-icon svg[b-69qzjq5drv] { width: 18px; height: 18px; stroke: currentColor; }
.analyze-card-icon svg [fill="white"][b-69qzjq5drv] { fill: currentColor; }
.analyze-card-title[b-69qzjq5drv] { grid-column: 2; display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; letter-spacing: 0; }
.analyze-card-title svg[b-69qzjq5drv] { flex: none; }
.analyze-card-diagnostic[b-69qzjq5drv] { grid-column: 2; margin: 0; font-size: var(--fs-note); line-height: 1.55; color: var(--text-secondary); overflow-wrap: anywhere; }
.analysis-card-pending[b-69qzjq5drv] { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
/* Still to come: named but quiet, so the running and finished steps stay the ones that stand out. */
.skeleton-state .analyze-card-icon[b-69qzjq5drv] { background: var(--ground); color: var(--muted); }
.skeleton-state .analyze-card-title[b-69qzjq5drv] { color: var(--text-secondary); font-weight: 500; }
/* /Components/ReportPopup.razor.rz.scp.css */
.rpt[b-dx614016xm],
.rpt *[b-dx614016xm] {
    box-sizing: border-box;
    letter-spacing: 0;
}

.report-popup-host[b-dx614016xm]  .report-popup-backdrop { padding: 24px; overflow: hidden; }
.report-popup-host[b-dx614016xm]  .report-popup-panel {
    width: min(1040px, 100%);
    max-height: min(860px, calc(100dvh - 48px));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.rpt[b-dx614016xm] {
    width: 100%;
    min-width: 0;
    max-width: 1040px;
    padding: 0 32px 40px;
    background: #fff;
    color: var(--text);
}

.rpt-hero-name[b-dx614016xm],
.rpt-card-title[b-dx614016xm],
.rpt-card-narrative[b-dx614016xm],
.rpt-finding-chip[b-dx614016xm],
.rpt-cta-headline[b-dx614016xm],
.rpt-cta-lead[b-dx614016xm],
.rpt-cta-card p[b-dx614016xm],
.rpt-edge[b-dx614016xm] {
    overflow-wrap: anywhere;
}

.rpt-topbar[b-dx614016xm] {
    gap: 12px;
    margin: 0 -32px;
    padding: 12px 32px;
    background: #fff;
    border-color: var(--border-light);
    border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

.rpt-topbar-actions[b-dx614016xm] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rpt-topbar-subscribe[b-dx614016xm],
.rpt-topbar-close[b-dx614016xm],
.rpt-cta-btn[b-dx614016xm] {
    min-height: 44px;
}

/* The chevron is the Icon the analysis page's View your report uses; a typed arrow sat on
   the text's baseline, lower than the words beside it. */
.rpt-topbar-subscribe[b-dx614016xm] {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-note);
    font-weight: 600;
    padding: 10px 12px;
    border-radius: var(--radius-control);
}

.rpt-topbar-close[b-dx614016xm] {
    width: 44px;
    border-radius: var(--radius-control);
}

.rpt-menu-grid[b-dx614016xm],
.rpt-filter-grid[b-dx614016xm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rpt-menu-category[b-dx614016xm],
.rpt-filter-card[b-dx614016xm] {
    min-width: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: #fff;
    padding: 16px;
}

.rpt-menu-category-head[b-dx614016xm],
.rpt-filter-head[b-dx614016xm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.rpt-menu-category-name[b-dx614016xm],
.rpt-filter-name[b-dx614016xm] {
    min-width: 0;
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rpt-menu-category-count[b-dx614016xm],
.rpt-filter-intensity[b-dx614016xm] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.rpt-menu-category-count[b-dx614016xm] { flex-shrink: 0; white-space: nowrap; }
.rpt-filter-intensity[b-dx614016xm] { max-width: 45%; overflow-wrap: anywhere; text-align: right; }

.rpt-menu-category-description[b-dx614016xm],
.rpt-filter-copy[b-dx614016xm],
.rpt-filter-use[b-dx614016xm],
.rpt-filter-meta[b-dx614016xm] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.rpt-menu-items[b-dx614016xm] {
    display: grid;
    gap: 0;
    margin-top: 12px;
}

.rpt-menu-item[b-dx614016xm] {
    display: flex;
    max-width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
    color: var(--text);
    font-size: var(--fs-sm);
    padding: 8px 0;
    overflow-wrap: anywhere;
}

/* Ink, not the link blue: nothing in the menu is clickable. A long price as the site words it
   ("$7.90 per burger 7cm DIA") wraps on the right rather than squeezing the dish name. */
.rpt-menu-item-name[b-dx614016xm] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rpt-menu-item-name small[b-dx614016xm] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.rpt-menu-item-price[b-dx614016xm] {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    max-width: 50%;
    text-align: right;
    /* Beside a long item name it shrank until "$12.50" broke at the point on a phone. It keeps
       its own width now, up to half the row. A longer price wraps between words, and one with no
       spaces that is wider still breaks rather than spill out of the card. */
    flex-shrink: 0;
    overflow-wrap: break-word;
}

.rpt-menu-item-more[b-dx614016xm] {
    justify-self: start;
    min-height: 32px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
}

.rpt-menu-item-more:hover[b-dx614016xm] {
    text-decoration: underline;
}

.rpt-menu-more[b-dx614016xm] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 12px 0 0;
}

.rpt-competitor-chip[b-dx614016xm] {
    gap: 12px;
    align-items: flex-start;
}

.rpt-competitor-name[b-dx614016xm] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rpt-competitor-meta[b-dx614016xm] {
    min-width: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rpt-filter-meta[b-dx614016xm] {
    margin-bottom: 8px;
    font-weight: 700;
}

.rpt-filter-copy[b-dx614016xm] {
    color: var(--text);
    margin-bottom: 8px;
}

.rpt-filter-use[b-dx614016xm] {
    font-style: italic;
}

.rpt-cta-btn[b-dx614016xm] {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.rpt-topbar-label[b-dx614016xm] { font-size: var(--fs-note); color: var(--text-secondary); }
.rpt-topbar-close[b-dx614016xm] { color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.rpt button:focus-visible[b-dx614016xm] { outline: 2px solid var(--blue); outline-offset: 3px; }
.rpt-topbar-subscribe:hover[b-dx614016xm], .rpt-topbar-close:hover[b-dx614016xm] { background: var(--bg-canvas); }
.rpt-hero[b-dx614016xm] { background: transparent; border-radius: 0; padding: 40px 0 28px; margin: 0; border-bottom: 1px solid var(--border-light); }
.rpt-hero-name[b-dx614016xm] { font-size: var(--fs-3xl); line-height: 1.2; color: var(--text); margin-bottom: 12px; }
.rpt-hero-meta[b-dx614016xm], .rpt-hero-sub[b-dx614016xm] { color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.6; }
.rpt-card[b-dx614016xm], .rpt-strategy[b-dx614016xm], .rpt-findings[b-dx614016xm], .rpt-cta-block[b-dx614016xm] { padding: 28px 0; margin: 0; border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0; box-shadow: none; background: transparent; }
.rpt-card[b-dx614016xm], .rpt-row[b-dx614016xm], .rpt-strategy[b-dx614016xm], .rpt-findings[b-dx614016xm], .rpt-cta-block[b-dx614016xm] { scroll-margin-top: 84px; }
/* "On this page": the sections the report shows, under its title. */
.rpt-jump[b-dx614016xm] { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
.rpt-jump a[b-dx614016xm] { align-items: center; background: var(--pill); border-radius: 999px; color: var(--text); display: inline-flex; flex: 0 0 auto; font-size: var(--fs-note); font-weight: 600; min-height: 36px; padding: 0 14px; text-decoration: none; }
.rpt-jump a:hover[b-dx614016xm] { text-decoration: underline; text-underline-offset: 2px; }
.rpt-section-title[id][b-dx614016xm], .rpt-card-title[id][b-dx614016xm] { scroll-margin-top: 24px; }
/* Under the sticky "Your report" bar the page's scroll padding (app.css) clears the bar. */
.rpt:has(.rpt-topbar) :is(.rpt-section-title, .rpt-card-title)[id][b-dx614016xm] { scroll-margin-top: 12px; }
/* One row to swipe on a phone, so it does not stack four lines deep above the findings. */
@media (max-width: 640px) {
    .rpt-jump[b-dx614016xm] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .rpt-jump a[b-dx614016xm] { min-height: 44px; }
}
.rpt-card-title[b-dx614016xm], .rpt-section-title[b-dx614016xm] { font-size: var(--fs-heading-sm); line-height: 1.3; color: var(--text); margin: 0 0 16px; }
.rpt-card-narrative[b-dx614016xm], .rpt-brand-essence[b-dx614016xm] { font-size: var(--fs-base); line-height: 1.65; color: var(--text); }
.rpt-card-meta[b-dx614016xm], .rpt-card-empty[b-dx614016xm], .rpt-brand-aesthetic[b-dx614016xm], .rpt-brand-voice[b-dx614016xm] { color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.6; }
/* The brand in a line, its own thought: 4px under "Voice: ..." it read as the end of the voice. */
.rpt-brand-details .rpt-brand-essence[b-dx614016xm] { margin-top: 16px; }
.rpt-findings-grid[b-dx614016xm] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* By the width the findings have, not the screen's (the report also sits beside the sidebar):
   on a tablet three columns were about 190px, four or five words a line. */
.rpt-findings[b-dx614016xm] { container-type: inline-size; }
@container (max-width: 800px) { .rpt-findings-grid[b-dx614016xm] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rpt-finding-chip[b-dx614016xm] { padding: 0 0 0 12px; border-left: 2px solid var(--tint-blue); border-radius: 0; box-shadow: none; background: transparent; color: var(--text); font-size: var(--fs-note); }
.rpt-row[b-dx614016xm] { gap: 24px; margin: 0; }
.rpt-row--halves[b-dx614016xm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpt-row > *[b-dx614016xm] { min-width: 0; }
.rpt-callout[b-dx614016xm] { padding: 12px 16px; border-radius: 0; border-left: 2px solid var(--accent); font-size: var(--fs-note); color: var(--text); background: var(--pill); }
.rpt-callout--green[b-dx614016xm] { border-color: var(--green-ink); background: var(--tint-green); }
/* Review themes are sentences, not links; accent-blue text read as something to click. */
.rpt-tag[b-dx614016xm] { border-radius: 4px; color: var(--text); background: var(--pill); font-size: var(--fs-xs); overflow-wrap: anywhere; }
/* One sentence a row, each the full width: wrapped as tags, a theme that fit on one line came
   out shorter than the two-line ones under it and left a ragged right edge. */
.rpt-tag-row[b-dx614016xm] { flex-direction: column; }
.rpt-card-meta + .rpt-card-narrative[b-dx614016xm] { margin-top: 8px; }
.rpt-competitor-chip[b-dx614016xm] { padding: 12px 0; border-bottom: 1px solid var(--border-light); background: transparent; border-radius: 0; }
.rpt-competitor-name[b-dx614016xm] { font-size: var(--fs-note); color: var(--text); }
.rpt-competitor-meta[b-dx614016xm] { font-size: var(--fs-xs); color: var(--text-secondary); }
.rpt-edge[b-dx614016xm] { font-size: var(--fs-note); line-height: 1.5; color: var(--green-ink); }
.rpt-brand-row[b-dx614016xm] { flex-direction: column; gap: 16px; }
.rpt-brand-swatches[b-dx614016xm] { flex-wrap: wrap; max-width: 100%; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.rpt-swatch-item[b-dx614016xm] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 36px; }
.rpt-swatch-item .rpt-swatch[b-dx614016xm] { display: block; }
.rpt-swatch-code[b-dx614016xm] { color: var(--text-secondary); font-family: monospace; font-size: var(--fs-xs); line-height: 1.2; }
.rpt-swatch[b-dx614016xm], .rpt-swatch--lg[b-dx614016xm] { width: 36px; height: 36px; border-radius: var(--radius-xs); border-color: var(--line-strong); }
.rpt-image-grid[b-dx614016xm] { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.rpt-image[b-dx614016xm] { border-radius: var(--radius-xs); object-fit: contain; background: var(--bg-canvas); }
.rpt-cta-block[b-dx614016xm] { border-image: none; border-bottom: 0; }
.rpt-cta-header[b-dx614016xm] { text-align: left; }
.rpt-cta-headline[b-dx614016xm] { font-size: var(--fs-heading); line-height: 1.3; color: var(--text); }
.rpt-cta-lead[b-dx614016xm] { max-width: 70ch; margin: 0; font-size: var(--fs-base); color: var(--text-secondary); }
/* Four cards: two by two, as four across left each a narrow column of text. */
.rpt-cta-grid[b-dx614016xm] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.rpt-cta-card[b-dx614016xm] { padding: 0; border-radius: 0; background: transparent; }
.rpt-cta-card h3[b-dx614016xm] { font-size: var(--fs-md); line-height: 1.4; color: var(--text); }
.rpt-cta-card p[b-dx614016xm] { font-size: var(--fs-note); line-height: 1.6; color: var(--text-secondary); }
.rpt-cta-bottom[b-dx614016xm] { text-align: left; }
.rpt-cta-btn[b-dx614016xm] { padding: 12px 20px; border-radius: var(--radius-control); background: var(--accent); font-family: inherit; }
.rpt-cta-btn:hover[b-dx614016xm] { transform: none; box-shadow: none; background: var(--accent-hover, var(--blue)); opacity: 1; }
/* The subscriber panel uses a link rather than a button, so it needs the button's own box. */
.rpt-cta-link[b-dx614016xm] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; color: #fff; font-size: var(--fs-note); font-weight: 600; text-decoration: none; border: 0; }
.rpt-cta-link:hover[b-dx614016xm] { color: #fff; text-decoration: none; }
.rpt-cta-link:focus-visible[b-dx614016xm] { outline: 2px solid var(--blue); outline-offset: 3px; }
/* The second way on from the subscriber panel, quieter than the button beside it. */
.rpt-cta-quiet[b-dx614016xm] { display: inline-flex; align-items: center; min-height: 44px; margin-left: 20px; color: var(--blue); font-size: var(--fs-note); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rpt-cta-quiet:focus-visible[b-dx614016xm] { outline: 2px solid var(--blue); outline-offset: 3px; }
/* High Contrast drops the fill and there is no border, so the report's last step read as loose,
   indented words rather than a button. */
@media (forced-colors: active) { .rpt-cta-link[b-dx614016xm] { border: 1px solid LinkText; } }
/* The blue was all that marked "Show 5 more" as something to press; it read as a plain note. */
@media (forced-colors: active) { .rpt-menu-item-more[b-dx614016xm] { text-decoration: underline; } }
.rpt-cta-note[b-dx614016xm] { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.rpt-cta-icon[b-dx614016xm] { color: var(--accent); }
.rpt-edge-icon[b-dx614016xm] { display: inline-flex; vertical-align: middle; }
/* The slide-up-delay classes start the blocks at opacity 0 and rely on the animation's end
   state, so taking the animation away must also put them in that end state. Without it a
   visitor with reduced motion on saw the report heading and nothing else, not even Subscribe. */
@media (prefers-reduced-motion: reduce) { .rpt .slide-up[b-dx614016xm] { animation: none; opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .report-popup-host[b-dx614016xm]  .report-popup-backdrop { padding: 8px; }
    .report-popup-host[b-dx614016xm]  .report-popup-panel { max-height: calc(100dvh - 16px); }
    .rpt[b-dx614016xm] { padding: 0 16px 24px; }
    .rpt-hero[b-dx614016xm] { padding: 28px 0; }
    .rpt-hero-name[b-dx614016xm] { font-size: var(--fs-2xl); }
    .rpt-card[b-dx614016xm], .rpt-strategy[b-dx614016xm], .rpt-findings[b-dx614016xm], .rpt-cta-block[b-dx614016xm] { padding: 24px 0; }
    .rpt-cta-grid[b-dx614016xm], .rpt-row--halves[b-dx614016xm] { grid-template-columns: 1fr; }
    /* The report's one step on, the width of the thumb that presses it, as the app's own are. */
    .rpt-cta-btn[b-dx614016xm], .rpt-cta-link[b-dx614016xm] { width: 100%; }
    .rpt-cta-quiet[b-dx614016xm] { display: flex; margin: 8px 0 0; }
    .rpt-row[b-dx614016xm] { gap: 0; }
    .rpt-findings-grid[b-dx614016xm],
    .rpt-menu-grid[b-dx614016xm],
    .rpt-filter-grid[b-dx614016xm] {
        grid-template-columns: 1fr;
    }

    .rpt-topbar[b-dx614016xm] {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .rpt-topbar-actions[b-dx614016xm] {
        gap: 8px;
    }

    .rpt-competitor-chip[b-dx614016xm] {
        flex-direction: column;
    }

    .rpt-competitor-meta[b-dx614016xm] {
        text-align: left;
        white-space: normal;
    }
}

/* Folded dishes and competitors are hidden on screen only, so a printed report has them all. */
@media screen {
    .rpt-menu-item--folded[b-dx614016xm],
    .rpt-competitor-chip--folded[b-dx614016xm] {
        display: none;
    }
}

/* Printing, or saving as PDF. Owners keep and pass on this report, so it prints as a document:
   no Subscribe or close buttons, no sales block, every block visible even if the page is printed
   mid-fade, cards kept whole across page breaks, and the brand swatches keep their colour
   (browsers drop background colours in print unless told otherwise). */
@media print {
    .rpt-topbar[b-dx614016xm], .rpt-cta-block[b-dx614016xm], .rpt-jump[b-dx614016xm], .rpt-menu-item-more[b-dx614016xm] { display: none; }
    .rpt .slide-up[b-dx614016xm] { animation: none; opacity: 1; transform: none; }
    .rpt-section-title[b-dx614016xm], .rpt-card-title[b-dx614016xm] { break-after: avoid; }
    .rpt-hero[b-dx614016xm], .rpt-callout[b-dx614016xm], .rpt-finding-chip[b-dx614016xm], .rpt-menu-category[b-dx614016xm], .rpt-filter-card[b-dx614016xm],
    .rpt-competitor-chip[b-dx614016xm], .rpt-cta-card[b-dx614016xm], .rpt-image[b-dx614016xm] { break-inside: avoid; }
    .rpt-swatch[b-dx614016xm], .rpt-swatch--lg[b-dx614016xm], .rpt-tag[b-dx614016xm], .rpt-callout[b-dx614016xm] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* /Components/Settings/AiSettings.razor.rz.scp.css */
.ai-settings[b-yf2vohwxil] {
    display: grid;
    gap: 20px;
}

.ai-heading h3[b-yf2vohwxil] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 700;
}

.ai-heading p[b-yf2vohwxil],
.ai-status[b-yf2vohwxil] {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.ai-alert[b-yf2vohwxil] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.ai-alert-error[b-yf2vohwxil] {
    border-color: rgba(var(--red-rgb), 0.24);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
}

.ai-alert-success[b-yf2vohwxil] {
    border-color: rgba(52, 199, 89, 0.24);
    background: rgba(52, 199, 89, 0.06);
    color: var(--green-ink);
}

.ai-group[b-yf2vohwxil] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ai-group legend[b-yf2vohwxil] {
    padding: 0 0 10px;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.ai-grid[b-yf2vohwxil] {
    /* Fields keep their own height, so a note under one box hangs below the row instead of
       stretching its neighbours' boxes out of line. */
    align-items: start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* The model box gets the room "Automatic (recommended)" needs: in equal thirds beside the
   sidebar at 1024 it read "Automatic (recommendec". Shape and length are short. */
.ai-grid-3[b-yf2vohwxil] {
    grid-template-columns: minmax(260px, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}


.ai-toggle[b-yf2vohwxil] {
    align-items: flex-start;
}

.ai-toggle input[b-yf2vohwxil] {
    margin-top: 3px;
}

.ai-toggle-label[b-yf2vohwxil],
.ai-toggle-hint[b-yf2vohwxil] {
    display: block;
}

.ai-toggle-hint[b-yf2vohwxil] {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.ai-field[b-yf2vohwxil] {
    display: grid;
    gap: 6px;
}

/* Inside a group the group name carries the weight, so the field labels step back. */
.ai-field label[b-yf2vohwxil] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.ai-model-gone[b-yf2vohwxil] {
    margin: 0;
    color: var(--amber-ink);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.ai-model-note[b-yf2vohwxil] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.ai-behaviour legend[b-yf2vohwxil] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.ai-behaviour[b-yf2vohwxil] {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ai-behaviour legend[b-yf2vohwxil] {
    padding: 0 0 8px;
}

.settings-actions[b-yf2vohwxil] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 700px) {
    .ai-grid[b-yf2vohwxil] {
        grid-template-columns: 1fr;
    }
}

/* While it loads, hold about the form's own height (about 600px, 930px on a phone), not a whole
   screen. Held a screen high, the shorter form pulled the sections under it up when it arrived. */
.ai-status.settings-loading-tall[b-yf2vohwxil] {
    min-height: 600px;
}

@media (max-width: 700px) {
    .ai-status.settings-loading-tall[b-yf2vohwxil] {
        min-height: 930px;
    }
}
/* /Components/Settings/BrandLoraTraining.razor.rz.scp.css */
.brand-training[b-19gs8j089x] {
    display: grid;
    gap: 12px;
}

.brand-training-heading[b-19gs8j089x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.brand-training-heading h3[b-19gs8j089x] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 700;
}

.brand-training-heading > span[b-19gs8j089x],
.brand-training-status[b-19gs8j089x],
.brand-training-actions > span[b-19gs8j089x],
.brand-training-row span[b-19gs8j089x] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.brand-training-status[b-19gs8j089x] {
    margin: 0;
}

.brand-training-intro[b-19gs8j089x] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    max-width: 60ch;
}

.brand-training-alert[b-19gs8j089x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--red-rgb), 0.24);
    border-radius: var(--radius-sm);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
    font-size: var(--fs-sm);
}

.brand-training-list[b-19gs8j089x] {
    display: grid;
    gap: 8px;
}

.brand-training-row[b-19gs8j089x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}

.brand-training-row > div[b-19gs8j089x] {
    display: grid;
    gap: 2px;
}

.brand-training-row strong[b-19gs8j089x] {
    color: var(--text);
    font-size: var(--fs-sm);
}

.brand-training-actions[b-19gs8j089x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-lora-train-btn[b-19gs8j089x] {
    min-height: 44px;
}

@media (max-width: 640px) {
    .brand-training-heading[b-19gs8j089x],
    .brand-training-actions[b-19gs8j089x] {
        align-items: stretch;
        flex-direction: column;
    }

    .brand-lora-train-btn[b-19gs8j089x] {
        width: 100%;
    }
}
/* /Components/Settings/BrandSettings.razor.rz.scp.css */
/* The brand form: a head, then three groups in the order the AI leans on them. */
.brand-form[b-fc87p7qzdj] {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.brand-form-head h3[b-fc87p7qzdj] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 700;
}

.brand-form-head p[b-fc87p7qzdj] {
    margin: 4px 0 0;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.brand-form-head a[b-fc87p7qzdj],
.brand-group-note a[b-fc87p7qzdj] {
    color: var(--accent);
    font-weight: 600;
}

.brand-group[b-fc87p7qzdj] {
    margin-top: 28px;
}

.brand-group + .brand-group[b-fc87p7qzdj] {
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.brand-group h4[b-fc87p7qzdj] {
    margin: 0 0 14px;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 700;
}

.brand-group > .form-group:last-child[b-fc87p7qzdj] {
    margin-bottom: 0;
}

.brand-group-note[b-fc87p7qzdj] {
    margin: -6px 0 12px;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.brand-field-hint[b-fc87p7qzdj] {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.brand-settings-shortcuts[b-fc87p7qzdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

.brand-settings-shortcuts a[b-fc87p7qzdj] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--accent);
    background: var(--card-bg);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}

.brand-settings-shortcuts a:hover[b-fc87p7qzdj] {
    background: var(--accent-light);
    border-color: var(--accent);
}

/* Content pillars */
.brand-pillars[b-fc87p7qzdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.brand-pillar[b-fc87p7qzdj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 5px 4px 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--tint-blue);
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.brand-pillar button[b-fc87p7qzdj] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: currentColor;
    cursor: pointer;
}

.brand-pillar button:hover[b-fc87p7qzdj] {
    background: rgba(77, 157, 224, 0.14);
}

/* 2px from the theme's words, a ring outside the x sat over their last letter. */
.brand-pillar button:focus-visible[b-fc87p7qzdj] {
    outline-offset: -2px !important;
}

.brand-pillar svg[b-fc87p7qzdj] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.brand-pillar-add[b-fc87p7qzdj] {
    display: flex;
    gap: 8px;
}

.brand-pillar-add input[b-fc87p7qzdj] {
    flex: 1;
    min-width: 0;
}

/* Under the box, not tucked into it as the group note's negative margin would put it. */
.brand-pillar-taken[b-fc87p7qzdj] {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.brand-add-btn[b-fc87p7qzdj],
.brand-lora-train-btn[b-fc87p7qzdj] {
    background: var(--accent);
}

.brand-add-btn:hover[b-fc87p7qzdj],
.brand-lora-train-btn:hover[b-fc87p7qzdj] {
    background: var(--accent-dark);
}

.brand-add-btn:disabled[b-fc87p7qzdj] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Colours: a swatch with its name and value beside it, two or four to a row. */
.brand-color-grid[b-fc87p7qzdj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    max-width: 720px;
}

.brand-color-field[b-fc87p7qzdj] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    cursor: pointer;
}

.brand-color-field input[b-fc87p7qzdj] {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    background: transparent;
    cursor: pointer;
}

.brand-color-name[b-fc87p7qzdj] {
    align-self: end;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.brand-color-hex[b-fc87p7qzdj] {
    align-self: start;
    color: var(--text-secondary);
    font-family: monospace;
    font-size: var(--fs-xs);
}


/* Logo */
.brand-logo[b-fc87p7qzdj] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.brand-logo-current[b-fc87p7qzdj] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}

.brand-logo-current img[b-fc87p7qzdj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-logo-current span[b-fc87p7qzdj] {
    padding: 0 8px;
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: center;
}

.brand-logo-side[b-fc87p7qzdj] {
    min-width: 0;
}

.brand-logo-side .brand-group-note[b-fc87p7qzdj] {
    margin: 0 0 10px;
}

.brand-logo-choices[b-fc87p7qzdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.brand-logo-choice[b-fc87p7qzdj] {
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-xs);
    background: var(--card-bg);
    cursor: pointer;
}

.brand-logo-choice img[b-fc87p7qzdj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-logo-choice.chosen[b-fc87p7qzdj] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}

/* The page's scroll-padding-top (app.css) already clears the app bar. 84px here on top of it
   landed links from Brand Hub 160px down, with Workspace details' greyed Save over Brand. */
.settings-anchor[b-fc87p7qzdj] {
    scroll-margin-top: 8px;
}

.brand-voice-controls[b-fc87p7qzdj] { max-width: 520px; }
.brand-voice-row[b-fc87p7qzdj] { display: grid; grid-template-columns: 60px minmax(0, 1fr) 66px; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.brand-voice-row > span:last-child[b-fc87p7qzdj] { text-align: right; }
.brand-voice-row input[type="range"][b-fc87p7qzdj] {
    appearance: none; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
}
.brand-voice-row input[type="range"][b-fc87p7qzdj]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.brand-voice-row input[type="range"][b-fc87p7qzdj]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.brand-voice-row input[type="range"][b-fc87p7qzdj]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.brand-voice-row input[type="range"][b-fc87p7qzdj]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.brand-voice-row input[type="range"]:focus-visible[b-fc87p7qzdj] { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.brand-load-error[b-fc87p7qzdj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--red-rgb), 0.24);
    border-radius: var(--radius-sm);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
    font-size: var(--fs-sm);
}

/* At 390 'Try again' broke onto two lines inside its button. */
.brand-load-error .btn-sm[b-fc87p7qzdj] {
    flex-shrink: 0;
    white-space: nowrap;
}

.brand-save-actions[b-fc87p7qzdj] {
    align-items: center;
    margin-top: 28px;
}

/* While there is something to save the bar stays on screen, inside the brand form only. */
.brand-save-actions.has-changes[b-fc87p7qzdj] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ground);
}

.brand-save-message[b-fc87p7qzdj] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.brand-save-message.error[b-fc87p7qzdj] {
    color: var(--red-ink);
}

.brand-save-message.success[b-fc87p7qzdj] {
    color: var(--green-ink);
}

@media (max-width: 960px) {
    /* Above the phone tab bar. */
    .brand-save-actions.has-changes[b-fc87p7qzdj] {
        bottom: calc(57px + env(safe-area-inset-bottom));
        padding-bottom: 12px;
    }
}

/* The tab bar steps aside while typing on a short screen (workspace.css, both of its rules), so
   the bar sits on the bottom edge then instead of 57px above nothing. A laptop at 200% zoom was
   left out, and the bar floated over a strip of the page. */
@media (max-width: 960px) and (pointer: coarse) and (max-height: 520px), (max-width: 960px) and (max-height: 500px) {
    .brand-form:has(textarea:focus, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]):focus) .brand-save-actions.has-changes[b-fc87p7qzdj] {
        bottom: 0;
    }
}

/* Below 380 the pinned bar had no room for both buttons and the state beside them: "Save brand
   settings" and "Not saved yet" each broke over two lines. The state sits above the buttons. */
@media (max-width: 380px) {
    .brand-save-actions[b-fc87p7qzdj] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .brand-save-message[b-fc87p7qzdj] {
        flex-basis: 100%;
        order: -1;
    }

    .brand-save-actions .btn-sm[b-fc87p7qzdj] {
        white-space: nowrap;
    }

    /* Beside Add the theme box read "For example: behind the cou". Add goes under it. */
    .brand-pillar-add[b-fc87p7qzdj] {
        flex-wrap: wrap;
    }

    .brand-pillar-add input[b-fc87p7qzdj] {
        flex-basis: 100%;
    }
}

@media (max-width: 760px) {
    .brand-color-grid[b-fc87p7qzdj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The shortcuts keep their own widths on a phone too. Two equal columns broke
   "Facts about your business" over two lines and left "AI training" alone under it. */

/* The form while it cannot be changed: a plain wrapper that only disables what is inside. */
.brand-locked[b-fc87p7qzdj] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
/* /Components/Settings/BrandVisualLibrary.razor.rz.scp.css */
.bvl-root[b-ohyr9261ov] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.bvl-head[b-ohyr9261ov],
.bvl-group-head[b-ohyr9261ov],
.bvl-actions[b-ohyr9261ov],
.bvl-upload-row[b-ohyr9261ov],
.bvl-url-row[b-ohyr9261ov] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bvl-head[b-ohyr9261ov],
.bvl-group-head[b-ohyr9261ov] {
    justify-content: space-between;
    flex-wrap: wrap;
}

.bvl-title[b-ohyr9261ov] {
    /* A heading now, so screen readers can jump to it; it keeps the look it had as a div. */
    margin: 0;
    line-height: inherit;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}

.bvl-subtitle[b-ohyr9261ov],
.bvl-hint[b-ohyr9261ov],
.bvl-asset-desc[b-ohyr9261ov],
.bvl-empty-line[b-ohyr9261ov] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.bvl-readonly[b-ohyr9261ov],
.bvl-primary-pill[b-ohyr9261ov],
.bvl-candidate-type[b-ohyr9261ov],
.bvl-tags span[b-ohyr9261ov] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.bvl-readonly[b-ohyr9261ov] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
    padding: 5px 10px;
}

.bvl-notice[b-ohyr9261ov],
.bvl-state[b-ohyr9261ov] {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.bvl-notice[b-ohyr9261ov] {
    background: rgba(77, 157, 224, 0.08);
    color: var(--accent-dark);
}

/* Same as "What the AI knows" above it when that cannot load. */
.bvl-load-failed[b-ohyr9261ov] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
}

.bvl-notice-error[b-ohyr9261ov] {
    border-color: rgba(var(--red-rgb), 0.24);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
}

.bvl-delete-confirm[b-ohyr9261ov] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.bvl-delete-confirm span[b-ohyr9261ov] {
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.bvl-create[b-ohyr9261ov] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: #fff;
    position: relative;
}

/* Files dragged over the form: the whole form takes the drop. */
.bvl-drop[b-ohyr9261ov] {
    align-items: center;
    background: rgba(var(--blue-rgb), 0.08);
    border: 2px dashed var(--blue);
    border-radius: var(--radius-sm);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 2;
}

.bvl-drop > strong[b-ohyr9261ov] {
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    padding: 14px 20px;
    pointer-events: none;
}

.bvl-candidates[b-ohyr9261ov],
.bvl-group[b-ohyr9261ov] {
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    padding: 20px 0 0;
    background: transparent;
}

.bvl-form-grid[b-ohyr9261ov] {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr);
    gap: 12px;
}

.bvl-field[b-ohyr9261ov] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.bvl-field span[b-ohyr9261ov] {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-secondary);
}

.bvl-url-row input[b-ohyr9261ov] {
    flex: 1;
    min-width: 0;
}

.bvl-upload-btn[b-ohyr9261ov] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

[b-ohyr9261ov] .bvl-file-input,
.bvl-file-input[b-ohyr9261ov] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 100px;
}

.bvl-section-title[b-ohyr9261ov] {
    margin: 0;
    line-height: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text);
}

.bvl-candidate-grid[b-ohyr9261ov],
.bvl-asset-grid[b-ohyr9261ov] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 10px;
    margin-top: 12px;
}

.bvl-candidate-grid[b-ohyr9261ov] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

.bvl-candidate[b-ohyr9261ov],
.bvl-asset[b-ohyr9261ov] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
}

.bvl-candidate[b-ohyr9261ov] {
    position: relative;
    display: grid;
    grid-template-rows: 112px auto auto;
    cursor: pointer;
}

.bvl-candidate.selected[b-ohyr9261ov] {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.bvl-candidate input[b-ohyr9261ov] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.bvl-candidate img[b-ohyr9261ov],
.bvl-thumb[b-ohyr9261ov] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg);
}

.bvl-thumb.whole[b-ohyr9261ov] {
    object-fit: contain;
    padding: 12px;
}

.bvl-candidate-name[b-ohyr9261ov],
.bvl-candidate-type[b-ohyr9261ov] {
    margin: 8px 10px 0;
}

.bvl-candidate-name[b-ohyr9261ov] {
    min-height: 34px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bvl-candidate-name:last-child[b-ohyr9261ov] {
    margin-bottom: 10px;
}

.bvl-candidate-type[b-ohyr9261ov] {
    margin-bottom: 10px;
    padding: 3px 8px;
    background: rgba(77, 157, 224, 0.1);
    color: var(--accent-dark);
}

.bvl-groups[b-ohyr9261ov] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bvl-thumb-wrap[b-ohyr9261ov] {
    position: relative;
    height: 132px;
}

.bvl-primary-pill[b-ohyr9261ov] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    /* White on --green was 2.2:1, too faint for 12px text; --green-ink is 5.8:1. */
    background: var(--green-ink);
    color: #fff;
}

.bvl-asset-body[b-ohyr9261ov],
.bvl-edit[b-ohyr9261ov] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.bvl-asset-title[b-ohyr9261ov] {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.bvl-tags[b-ohyr9261ov] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 20px;
}

.bvl-tags span[b-ohyr9261ov] {
    padding: 3px 7px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

.bvl-actions[b-ohyr9261ov] {
    flex-wrap: wrap;
    gap: 8px;
}

.bvl-edit-hint[b-ohyr9261ov] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.bvl-candidates > .bvl-actions[b-ohyr9261ov] { margin-top: 12px; }
/* An add's result, under the button that was pressed. */
.bvl-create > .bvl-notice[b-ohyr9261ov],
.bvl-candidates > .bvl-notice[b-ohyr9261ov] { margin-top: 12px; }
/* A picture's own result, across the foot of its card. */
.bvl-asset > .bvl-notice[b-ohyr9261ov] { margin: 0 10px 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.bvl-upload-btn:focus-within[b-ohyr9261ov] { outline: 2px solid var(--blue); outline-offset: 3px; }
.bvl-asset-desc[b-ohyr9261ov], .bvl-tags span[b-ohyr9261ov] { overflow-wrap: anywhere; }

@media (max-width: 720px) {
    .bvl-form-grid[b-ohyr9261ov],
    .bvl-url-row[b-ohyr9261ov],
    .bvl-upload-row[b-ohyr9261ov] {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .bvl-asset-grid[b-ohyr9261ov] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    }

    .bvl-candidate-grid[b-ohyr9261ov] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
}
/* /Components/Settings/BusinessFactsPanel.razor.rz.scp.css */
.bf-root[b-49qnm4gng5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.bf-head[b-49qnm4gng5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.bf-title[b-49qnm4gng5] {
    /* A heading now, so screen readers can jump to it; it keeps the look it had as a div. */
    margin: 0;
    line-height: inherit;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}

.bf-subtitle[b-49qnm4gng5] {
    margin: 4px 0 0;
    max-width: 640px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

.bf-readonly[b-49qnm4gng5],
.bf-chip[b-49qnm4gng5] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 3px 9px;
    background: rgba(0, 0, 0, 0.06);
    /* Grey on this grey pill measured 4.16:1 on the Brand Hub page. */
    color: var(--ink-soft);
}

.bf-chip-hidden[b-49qnm4gng5] {
    background: rgba(var(--red-rgb), 0.08);
    color: var(--red-ink);
}

.bf-notice[b-49qnm4gng5],
.bf-state[b-49qnm4gng5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.bf-notice[b-49qnm4gng5] {
    background: rgba(77, 157, 224, 0.08);
    color: var(--accent-dark);
}

.bf-notice-error[b-49qnm4gng5] {
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
}

/* Loading and "No facts yet" sit on the page's own grey in Brand Hub and Settings, so their
   side padding only pushed the words in from the heading above. */
.bf-state:not(.bf-notice-error)[b-49qnm4gng5] {
    padding-inline: 0;
}

/* A fact's own result, under the fact. */
.bf-notice-row[b-49qnm4gng5] {
    margin-top: 10px;
    padding: 8px 12px;
}

.bf-add[b-49qnm4gng5] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: #fff;
}

.bf-field[b-49qnm4gng5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.bf-field span[b-49qnm4gng5] {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-secondary);
}

/* InputFile renders the input, so only ::deep reaches it. It stays in the tab order but out of
   sight; the face is the button, as on the Studio's file buttons. */
.bf-upload[b-49qnm4gng5] {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}
.bf-upload[b-49qnm4gng5]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.bf-upload-face[b-49qnm4gng5] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 14px;
    color: var(--text);
    background: var(--bg-canvas);
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.bf-upload:hover:not(:has(input:disabled)) .bf-upload-face[b-49qnm4gng5] { border-color: var(--accent); }
.bf-upload:focus-within .bf-upload-face[b-49qnm4gng5] { outline: 2px solid var(--blue); outline-offset: 3px; }
.bf-upload:has(input:disabled)[b-49qnm4gng5] { cursor: not-allowed; opacity: 0.62; }

.bf-actions[b-49qnm4gng5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bf-count[b-49qnm4gng5],
.bf-confirm[b-49qnm4gng5] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.bf-confirm[b-49qnm4gng5] {
    flex-basis: 100%;
}

.bf-latest[b-49qnm4gng5] {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.bf-search[b-49qnm4gng5] {
    max-width: 360px;
}

/* Product photos still to check: the step after onboarding. */
.bf-photo-check[b-49qnm4gng5] {
    align-items: center;
    background: rgba(77, 157, 224, 0.08);
    border-radius: var(--radius-sm);
    color: var(--accent-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 4px 12px;
    justify-content: space-between;
    line-height: 1.45;
    padding: 6px 6px 6px 14px;
}

/* Hours and an address the advisor always reads; same note shape as the photo check. */
.bf-pinned[b-49qnm4gng5] {
    align-items: center;
    background: rgba(77, 157, 224, 0.08);
    border-radius: var(--radius-sm);
    color: var(--accent-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 4px 12px;
    justify-content: space-between;
    line-height: 1.45;
    padding: 6px 6px 6px 14px;
}

.bf-pinned > span[b-49qnm4gng5] {
    flex: 1;
    min-width: 260px;
}

.bf-pinned-actions[b-49qnm4gng5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.bf-photo-check > span[b-49qnm4gng5] {
    flex: 1;
    /* On a phone the button drops under the line instead of squeezing it into a column. */
    min-width: 260px;
}

.bf-list[b-49qnm4gng5] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-light);
}

.bf-item[b-49qnm4gng5] {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.bf-item-hidden .bf-item-title[b-49qnm4gng5],
.bf-item-hidden .bf-item-text[b-49qnm4gng5] {
    color: var(--text-secondary);
}

.bf-item-hidden .bf-item-text[b-49qnm4gng5] {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}

.bf-row[b-49qnm4gng5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
}

.bf-item-view[b-49qnm4gng5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
}

.bf-item-view.bf-has-photo[b-49qnm4gng5] {
    grid-template-columns: 56px minmax(0, 1fr) auto;
}

.bf-photo[b-49qnm4gng5] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg);
}

.bf-item-group[b-49qnm4gng5] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.bf-picker[b-49qnm4gng5] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

/* Choose photo moves focus to the picker. It is a group, not a control, so the global ring
   skips it and Chrome drew its own black box flush against the text. */
.bf-picker:focus-visible[b-49qnm4gng5] {
    outline: 2px solid var(--blue);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}

.bf-picker:focus:not(:focus-visible)[b-49qnm4gng5] {
    outline: none;
}

.bf-picker-grid[b-49qnm4gng5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    max-width: 640px;
}

.bf-picker-option[b-49qnm4gng5] {
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    aspect-ratio: 1;
    overflow: hidden;
}

.bf-picker-option img[b-49qnm4gng5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-picker-option:hover[b-49qnm4gng5],
.bf-picker-option:focus-visible[b-49qnm4gng5] {
    border-color: var(--text-secondary);
}

.bf-picker-option.bf-picker-current[b-49qnm4gng5] {
    border-color: var(--accent);
}

/* Row actions are quiet text buttons that keep their 44px tap height; pull
   them up so their labels sit on the title line instead of adding a row
   under every fact. */
.bf-item-actions[b-49qnm4gng5] {
    flex-wrap: nowrap;
    gap: 2px;
    margin: -10px 0;
}

.bf-item-actions .btn-ghost[b-49qnm4gng5] {
    padding: 7px 10px;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
}

.bf-item-actions .btn-ghost:hover[b-49qnm4gng5] {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}

.bf-confirm-row[b-49qnm4gng5] {
    grid-column: 1 / -1;
    margin-top: 8px;
}

/* Sits among the row's buttons at their size; it read as body text beside them. */
.bf-photo-ok[b-49qnm4gng5] {
    align-items: center;
    color: var(--green-ink);
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 4px;
    padding: 7px 10px;
    white-space: nowrap;
}

.bf-photo-ok[b-49qnm4gng5]::before {
    content: "\2713" / "";
}

.bf-item-head[b-49qnm4gng5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bf-item-title[b-49qnm4gng5] {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
}

.bf-recheck[b-49qnm4gng5] {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.bf-item-text[b-49qnm4gng5] {
    margin: 4px 0 0;
    max-width: 720px;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.bf-more[b-49qnm4gng5] {
    align-self: flex-start;
}

@media (max-width: 600px) {
    .bf-add[b-49qnm4gng5] {
        padding: 12px;
    }

    /* Three rows cut the example fact off mid word on a phone ("baked roll. $7.90" was half a
       line), and a written fact is usually longer than the example. */
    .bf-field textarea[b-49qnm4gng5] {
        min-height: calc(5lh + 24px);
    }

    .bf-search[b-49qnm4gng5] {
        max-width: none;
    }

    .bf-row[b-49qnm4gng5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bf-item-view[b-49qnm4gng5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bf-item-view.bf-has-photo[b-49qnm4gng5] {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
    }

    .bf-has-photo .bf-photo[b-49qnm4gng5] {
        width: 48px;
        height: 48px;
    }

    .bf-has-photo .bf-item-actions[b-49qnm4gng5] {
        grid-column: 1 / -1;
    }

    /* Under the fact the labels line up with its text; the button's own padding and border
       had pushed "Edit" 11px in from the left edge of everything above it. */
    .bf-item-actions[b-49qnm4gng5] {
        flex-wrap: wrap;
        margin: 4px 0 -8px -11px;
    }
}

/* Show all moves focus to the first fact it reveals. A list item is not a control, so the
   global ring skips it. */
.bf-item:focus-visible[b-49qnm4gng5] {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.bf-item:focus:not(:focus-visible)[b-49qnm4gng5] {
    outline: none;
}
/* /Components/Settings/ProfileSettings.razor.rz.scp.css */
.profile-loading[b-o5e9w5a39p] {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.profile-load-error[b-o5e9w5a39p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(215, 48, 39, 0.24);
    border-radius: var(--radius-sm);
    background: rgba(215, 48, 39, 0.04);
    color: var(--ink);
    font-size: var(--fs-sm);
}

.profile-message[b-o5e9w5a39p] {
    /* In line with the 44px buttons beside it, not along their top edge. */
    align-self: center;
    font-size: var(--fs-sm);
}

.profile-message.error[b-o5e9w5a39p] {
    /* --red measured 4.44:1 on the grey page. */
    color: var(--red-ink);
}

.profile-message.success[b-o5e9w5a39p] {
    color: var(--green, var(--green-ink));
}

.profile-delete-confirmation[b-o5e9w5a39p] {
    max-width: 560px;
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(215, 48, 39, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(215, 48, 39, 0.04);
}

.profile-delete-confirmation strong[b-o5e9w5a39p] {
    color: var(--ink);
    font-size: var(--fs-note);
}

.profile-delete-confirmation p[b-o5e9w5a39p] {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.profile-delete-list[b-o5e9w5a39p] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.profile-delete-confirmation .form-input[b-o5e9w5a39p] {
    max-width: 260px;
}

.profile-delete-actions[b-o5e9w5a39p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* The email is read only, so it is plain text at the height of the field beside it. */
.profile-email[b-o5e9w5a39p] {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    color: var(--text);
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
}

.profile-field-hint[b-o5e9w5a39p] {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.profile-email + .profile-field-hint[b-o5e9w5a39p] {
    margin-top: -6px;
}

/* The eye button inside a password field. */
.profile-password-field[b-o5e9w5a39p] {
    position: relative;
}

.profile-password-field .form-input[b-o5e9w5a39p] {
    padding-right: 48px;
    width: 100%;
}

.profile-password-toggle[b-o5e9w5a39p] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
}

.profile-password-toggle:hover[b-o5e9w5a39p] {
    color: var(--text);
}

.profile-password-toggle:focus-visible[b-o5e9w5a39p] {
    outline: 2px solid var(--blue);
    outline-offset: -6px !important;
}

.profile-password-toggle svg[b-o5e9w5a39p] {
    height: 18px;
    width: 18px;
}

/* On a phone each email label wraps to two lines, and the two rows ran together with the box
   floating between its lines. The box sits on the first line, as in AI settings, with room
   between the rows. */
.toggle-row[b-o5e9w5a39p] {
    align-items: flex-start;
}

.toggle-row input[b-o5e9w5a39p] {
    margin-top: 3px;
}

.toggle-row + .toggle-row[b-o5e9w5a39p] {
    margin-top: 8px;
}
/* /Components/Settings/TeamSettings.razor.rz.scp.css */
.team-settings[b-1uddf4haoh] {
    display: grid;
    gap: 20px;
}

.team-header[b-1uddf4haoh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.team-header h3[b-1uddf4haoh] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 700;
}

.team-header p[b-1uddf4haoh],
.field-help[b-1uddf4haoh] {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.settings-status[b-1uddf4haoh],
.settings-empty[b-1uddf4haoh] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.settings-alert[b-1uddf4haoh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.settings-alert-error[b-1uddf4haoh] {
    border-color: rgba(var(--red-rgb), 0.24);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
}

.settings-alert-success[b-1uddf4haoh] {
    border-color: rgba(52, 199, 89, 0.24);
    background: rgba(52, 199, 89, 0.06);
    color: var(--green-ink);
}

.invite-panel[b-1uddf4haoh] {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}

.invite-fields[b-1uddf4haoh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
    gap: 12px;
}

/* start: with a line under the email box the Access column grew to match, and its select
   stretched taller than the box beside it. */
.settings-field[b-1uddf4haoh] {
    display: grid;
    gap: 6px;
    align-content: start;
}

.invite-email-problem[b-1uddf4haoh] {
    margin: 0;
    color: var(--red-ink);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.settings-field label[b-1uddf4haoh] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.settings-actions[b-1uddf4haoh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* One bordered list with rules between rows, the same as Connected accounts in the
   section above. */
.member-list[b-1uddf4haoh] {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.member-row[b-1uddf4haoh] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
}

.member-row + .member-row[b-1uddf4haoh] {
    border-top: 1px solid var(--line);
}

.member-avatar[b-1uddf4haoh] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.member-copy[b-1uddf4haoh] {
    min-width: 0;
}

.member-name[b-1uddf4haoh] {
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.member-email[b-1uddf4haoh] {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.member-you[b-1uddf4haoh] {
    margin-left: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.member-confirm[b-1uddf4haoh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.member-confirm span[b-1uddf4haoh] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

/* Its own line under the name. Beside it, the question took the row and squeezed the name and
   address into a column 58px wide. */
.member-row .member-confirm[b-1uddf4haoh] {
    grid-column: 2 / -1;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Quiet until pointed at. A red button on every member read as a warning about each one. */
.member-remove[b-1uddf4haoh],
.member-leave[b-1uddf4haoh],
.invited-cancel[b-1uddf4haoh] {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.member-remove:hover[b-1uddf4haoh],
.member-remove:focus-visible[b-1uddf4haoh],
.member-leave:hover[b-1uddf4haoh],
.member-leave:focus-visible[b-1uddf4haoh],
.invited-cancel:hover[b-1uddf4haoh],
.invited-cancel:focus-visible[b-1uddf4haoh] {
    border-color: transparent;
    background: var(--tint-red);
    color: var(--red-ink);
}

.member-list .settings-empty[b-1uddf4haoh] {
    display: grid;
    gap: 4px;
    padding: 20px 16px;
}

.settings-empty strong[b-1uddf4haoh] {
    color: var(--text);
    font-size: var(--fs-base);
}

@media (max-width: 700px) {
    .team-header[b-1uddf4haoh],
    .member-confirm[b-1uddf4haoh] {
        align-items: stretch;
        flex-direction: column;
    }

    .team-header .btn-primary[b-1uddf4haoh] {
        width: 100%;
    }

    .invite-fields[b-1uddf4haoh] {
        grid-template-columns: 1fr;
    }

    .member-row[b-1uddf4haoh] {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    /* Under the name, its word lined up with the text rather than stretched across. */
    .member-row .member-remove[b-1uddf4haoh],
    .member-row .member-leave[b-1uddf4haoh] {
        grid-column: 2 / -1;
        justify-self: start;
        margin-left: -14px;
    }

    .member-confirm .danger-btn[b-1uddf4haoh],
    .member-confirm .btn-ghost[b-1uddf4haoh] {
        flex: 1;
    }
}

/* Access for a member an admin can change, where the others show a badge. */
.member-role[b-1uddf4haoh] {
    width: auto;
    min-width: 7.5rem;
}

/* Invitations not yet accepted, under the team: the address stands in for the name. */
.invited[b-1uddf4haoh] {
    display: grid;
    gap: 8px;
}

.invited-title[b-1uddf4haoh] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 700;
}

.invited-avatar[b-1uddf4haoh] {
    background: var(--bg-pill);
    color: var(--text-secondary);
}

.invited-expired[b-1uddf4haoh] {
    color: var(--red-ink);
}

.invited-actions[b-1uddf4haoh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

@media (max-width: 700px) {
    .invited-row .invited-actions[b-1uddf4haoh] {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}
/* /Components/Settings/WorkspaceDeleteSettings.razor.rz.scp.css */
.workspace-danger[b-5kk650c9ui] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.workspace-danger h4[b-5kk650c9ui] {
    margin: 0;
    color: var(--red-ink);
    font-size: var(--fs-base);
    font-weight: 700;
}

.workspace-danger p[b-5kk650c9ui] {
    margin: 4px 0 0;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* As the account's delete question under Profile. */
.workspace-danger > .danger-btn[b-5kk650c9ui] {
    margin-top: 12px;
}

.workspace-delete-confirmation[b-5kk650c9ui] {
    max-width: 560px;
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid rgba(215, 48, 39, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(215, 48, 39, 0.04);
}

.workspace-delete-confirmation strong[b-5kk650c9ui] {
    color: var(--ink);
    font-size: var(--fs-note);
    overflow-wrap: anywhere;
}

.workspace-delete-confirmation p[b-5kk650c9ui] {
    margin: 0;
    overflow-wrap: anywhere;
}

.workspace-delete-confirmation .form-input[b-5kk650c9ui] {
    max-width: 260px;
}

.workspace-delete-actions[b-5kk650c9ui] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-danger p.workspace-delete-error[b-5kk650c9ui] {
    color: var(--red-ink);
}
/* /Components/Settings/WorkspaceSettings.razor.rz.scp.css */
.workspace-settings[b-wk5zw8yq90],
.workspace-settings-form[b-wk5zw8yq90] {
    display: grid;
    gap: 20px;
}

.workspace-heading h3[b-wk5zw8yq90] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 700;
}

.workspace-heading p[b-wk5zw8yq90] {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.workspace-status[b-wk5zw8yq90] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.workspace-alert[b-wk5zw8yq90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.workspace-alert-error[b-wk5zw8yq90] {
    border-color: rgba(var(--red-rgb), 0.24);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
}

.workspace-alert .btn-sm[b-wk5zw8yq90] {
    flex-shrink: 0;
    white-space: nowrap;
}

.workspace-alert-success[b-wk5zw8yq90] {
    border-color: rgba(52, 199, 89, 0.24);
    background: rgba(52, 199, 89, 0.06);
    color: var(--green-ink);
}

.workspace-form[b-wk5zw8yq90] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.workspace-field[b-wk5zw8yq90] {
    display: grid;
    align-content: start;
    gap: 6px;
}

.workspace-field-wide[b-wk5zw8yq90] {
    grid-column: 1 / -1;
}

.workspace-field label[b-wk5zw8yq90],
.field-label-row[b-wk5zw8yq90] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.field-label-row[b-wk5zw8yq90] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.field-label-row span[b-wk5zw8yq90] {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.workspace-field textarea[b-wk5zw8yq90] {
    min-height: 104px;
    resize: vertical;
}

.field-error[b-wk5zw8yq90] {
    color: var(--red-ink);
    font-size: var(--fs-xs);
}

.field-hint[b-wk5zw8yq90] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.settings-actions[b-wk5zw8yq90] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 700px) {
    .workspace-form[b-wk5zw8yq90] {
        grid-template-columns: 1fr;
    }

    .workspace-field-wide[b-wk5zw8yq90] {
        grid-column: auto;
    }
}

/* While it loads, hold about the form's own height (468px, 615px on a phone), not a whole screen.
   Held a screen high, the shorter form pulled everything under it up the page when it arrived. */
.workspace-status.settings-loading-tall[b-wk5zw8yq90] {
    min-height: 470px;
}

@media (max-width: 700px) {
    .workspace-status.settings-loading-tall[b-wk5zw8yq90] {
        min-height: 615px;
    }
}
/* /Components/Shared/ConnectedAccounts.razor.rz.scp.css */
.connections[b-f9g5uyb412] {
  align-content: start;
  display: grid;
  gap: 32px;
  min-width: 0;
}

.connections-group[b-f9g5uyb412] {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.connections-group[hidden][b-f9g5uyb412] {
  display: none;
}

.connections-heading[b-f9g5uyb412] {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
}

/* Inside a Settings section, under its own h2. */
.connections-heading.is-nested[b-f9g5uyb412] {
  font-size: var(--fs-md);
}

/* One bordered list with rules between rows, rather than a card per account
   and a two-column grid of cards per platform. */
.connections-list[b-f9g5uyb412] {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.connection-row[b-f9g5uyb412] {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-width: 0;
}

.connection-row + .connection-row[b-f9g5uyb412] {
  border-top: 1px solid var(--line);
}

.connection-copy[b-f9g5uyb412] {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.connection-name[b-f9g5uyb412] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}

.connection-name strong[b-f9g5uyb412] {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
}

.connection-handle[b-f9g5uyb412] {
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.connection-description[b-f9g5uyb412] {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* The single status signal: a dot and its words, in one colour per state. */
.connection-status-line[b-f9g5uyb412] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* Under the status words, past its dot (8px) and gap (8px). */
.connection-booked[b-f9g5uyb412] {
  margin: 0;
  padding-left: 16px;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.connection-dot[b-f9g5uyb412] {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-ink);
  transform: translateY(-1px);
}

.connection-state[b-f9g5uyb412] {
  color: var(--green-ink);
  font-weight: 600;
}

.is-expiring .connection-dot[b-f9g5uyb412] { background: var(--amber); }
.is-expiring .connection-state[b-f9g5uyb412] { color: var(--amber-ink); }
.is-blocked .connection-dot[b-f9g5uyb412] { background: var(--red); }
.is-blocked .connection-state[b-f9g5uyb412] { color: var(--red-ink); }

/* display: flex beat the browser's own rule for [hidden], so an editor or viewer saw Connect,
   Refresh and Disconnect under the line saying only the owner or an admin can use them. */
.connection-actions[hidden][b-f9g5uyb412] {
  display: none;
}

.connection-actions[b-f9g5uyb412] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Disconnect and Dismiss stay quiet until pointed at. A red word on every card
   read as a warning about each one. */
.connections-quiet-btn[b-f9g5uyb412] {
  appearance: none;
  min-height: 44px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.connections-quiet-btn:hover[b-f9g5uyb412] {
  background: var(--ground);
  color: var(--ink);
}

.connection-disconnect:hover[b-f9g5uyb412],
.connection-disconnect:focus-visible[b-f9g5uyb412] {
  background: var(--tint-red);
  color: var(--red-ink);
}

.connections-quiet-btn:disabled[b-f9g5uyb412] {
  opacity: .55;
  cursor: not-allowed;
}

.connections-status[b-f9g5uyb412] {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.connections-alert[b-f9g5uyb412] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 6px 8px 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.connections-alert > span[b-f9g5uyb412] {
  flex: 1 1 240px;
  padding: 6px 0;
}

.connections-alert.is-success[b-f9g5uyb412] {
  border-color: rgba(52, 199, 89, 0.24);
  background: var(--tint-green);
  color: var(--green-ink);
}

.connections-alert.is-error[b-f9g5uyb412] {
  border-color: var(--tint-red-line);
  background: var(--tint-red);
  color: var(--red-ink);
}

.connections-alert .connections-quiet-btn[b-f9g5uyb412] {
  color: inherit;
}

@media (max-width: 640px) {
  /* The buttons go under the words. Beside them, "Needs reconnecting" left the
     handle about 110px and "@burgerwichnation" broke mid-word. */
  .connection-row[b-f9g5uyb412] {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
  }

  .connection-actions[b-f9g5uyb412] {
    grid-column: 2;
    justify-content: flex-start;
  }

  /* A lone Disconnect lines its word up with the text above, not its padding. */
  .connection-actions > .connections-quiet-btn:first-child[b-f9g5uyb412] {
    margin-left: -12px;
  }
}

/* High Contrast drops the hover ground, so Disconnect and Dismiss read as plain words
   beside the account. Underlined, they read as things to press. */
@media (forced-colors: active) {
  .connections-quiet-btn:not(:disabled)[b-f9g5uyb412] {
    text-decoration: underline;
  }

  /* The dot is a fill, which High Contrast drops, leaving a gap before the words. A broken
     account's dot is a ring, so it differs by shape where the colours are gone. */
  .connection-dot[b-f9g5uyb412] {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .is-blocked .connection-dot[b-f9g5uyb412] {
    background: Canvas;
    border: 2px solid CanvasText;
  }
}
/* /Components/Shared/ModalShell.razor.rz.scp.css */
.ydy-modal-shell[b-eld26bktip] {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z, 2000);
    display: flex;
    align-items: var(--modal-align, center);
    justify-content: var(--modal-justify, center);
    padding: var(--modal-overlay-padding, clamp(16px, 3vw, 28px));
    background: var(--modal-overlay, rgba(15, 23, 42, 0.52));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overflow-y: auto;
    animation: ydy-modal-shell-fade-b-eld26bktip 0.2s ease;
}

.ydy-modal-shell:focus[b-eld26bktip] {
    outline: none;
}

.ydy-modal-shell__panel[b-eld26bktip] {
    width: min(100%, var(--ydy-modal-width, 520px));
    max-height: var(--modal-max-height, min(860px, calc(100dvh - 32px)));
    overflow: auto;
    background: var(--surface);
    border: var(--modal-panel-border, 1px solid var(--modal-border, rgba(255, 255, 255, 0.72)));
    border-left: var(--modal-panel-border-left, var(--modal-panel-border, 1px solid var(--modal-border, rgba(255, 255, 255, 0.72))));
    border-radius: var(--modal-radius, 8px);
    box-shadow: var(--modal-shadow, 0 24px 70px rgba(15, 23, 42, 0.26));
    animation: ydy-modal-shell-enter-b-eld26bktip 0.24s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Focus lands on the dialog as it opens, so screen readers announce it; no ring around the whole panel. */
.ydy-modal-shell__panel:focus[b-eld26bktip] {
    outline: none;
}

.ydy-modal-shell__panel--small[b-eld26bktip] {
    --ydy-modal-width: 420px;
}

.ydy-modal-shell__panel--medium[b-eld26bktip] {
    --ydy-modal-width: 560px;
}

.ydy-modal-shell__panel--large[b-eld26bktip] {
    --ydy-modal-width: 860px;
}

.ydy-modal-shell__panel--fullscreen[b-eld26bktip] {
    --ydy-modal-width: min(1440px, calc(100vw - 32px));
    min-height: min(920px, calc(100dvh - 32px));
}

@keyframes ydy-modal-shell-fade-b-eld26bktip {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ydy-modal-shell-enter-b-eld26bktip {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 520px) {
    .ydy-modal-shell[b-eld26bktip] {
        align-items: var(--modal-mobile-align, flex-end);
        justify-content: var(--modal-mobile-justify, var(--modal-justify, center));
        padding: var(--modal-mobile-overlay-padding, 12px);
    }

    .ydy-modal-shell__panel[b-eld26bktip] {
        width: 100%;
        max-height: var(--modal-mobile-max-height, calc(100dvh - 24px));
        border-radius: var(--modal-mobile-radius, var(--modal-radius, 8px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ydy-modal-shell[b-eld26bktip],
    .ydy-modal-shell__panel[b-eld26bktip] { animation: none; }
}
/* /Components/Shared/RecoveryShell.razor.rz.scp.css */
.recovery-page[b-xbhzh7d8o2] { min-height: 100dvh; background: #fff; color: var(--ink); font-family: Inter, sans-serif; }
.recovery-page[b-xbhzh7d8o2], .recovery-page[b-xbhzh7d8o2]  * { box-sizing: border-box; letter-spacing: 0; }
.recovery-mast[b-xbhzh7d8o2] { max-width: 1200px; margin: 0 auto; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
/* The same wordmark as the sidebar and the app header, so it stays one mark. */
.recovery-brand[b-xbhzh7d8o2] { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-size: var(--fs-xl); font-weight: 700; text-decoration: none; }
.recovery-mast span[b-xbhzh7d8o2] { font-size: var(--fs-note); color: var(--muted); }
.recovery-main[b-xbhzh7d8o2] { width: min(100%, 496px); margin: 0 auto; padding: 64px 24px 48px; }
.recovery-icon[b-xbhzh7d8o2] { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--pill); color: var(--blue); margin-bottom: 24px; }
.recovery-icon.success[b-xbhzh7d8o2] { background: var(--tint-green); color: var(--green-ink); }
.recovery-icon.error[b-xbhzh7d8o2] { background: var(--ground); color: var(--red-ink); }
.recovery-icon--busy[b-xbhzh7d8o2] { background: var(--pill); }
.recovery-spinner[b-xbhzh7d8o2] { width: 22px; height: 22px; border: 3px solid var(--tint-blue); border-top-color: var(--blue); border-radius: 50%; animation: recovery-spin-b-xbhzh7d8o2 0.8s linear infinite; }
@keyframes recovery-spin-b-xbhzh7d8o2 { to { transform: rotate(360deg); } }
.recovery-content[b-xbhzh7d8o2]  .recovery-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.recovery-content[b-xbhzh7d8o2]  .recovery-actions .recovery-primary { width: auto; min-width: 160px; }
@media (max-width: 520px) { .recovery-content[b-xbhzh7d8o2]  .recovery-actions { display: grid; grid-template-columns: minmax(0, 1fr); } }
h1[b-xbhzh7d8o2] { font-size: var(--fs-2xl); line-height: 1.2; font-weight: 600; margin: 0 0 12px; overflow-wrap: anywhere; }
h1:focus[b-xbhzh7d8o2] { outline: none; }
.recovery-content[b-xbhzh7d8o2]  p { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); margin: 0 0 24px; overflow-wrap: anywhere; }
.recovery-content[b-xbhzh7d8o2]  .recovery-form { display: flex; flex-direction: column; gap: 12px; }
.recovery-content[b-xbhzh7d8o2]  label { font-size: var(--fs-note); font-weight: 600; display: block; }
.recovery-content[b-xbhzh7d8o2]  input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 12px; border: 1.5px solid var(--line-field); border-radius: var(--radius-control); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-md); }
.recovery-content[b-xbhzh7d8o2]  input:is(:disabled, [readonly]) { background: var(--ground); color: var(--muted); }
.recovery-content[b-xbhzh7d8o2]  input[aria-invalid=true] { border-color: var(--red); }
.recovery-content[b-xbhzh7d8o2]  .recovery-password { position: relative; }
.recovery-content[b-xbhzh7d8o2]  .recovery-password input { padding-right: 56px; }
.recovery-content[b-xbhzh7d8o2]  .recovery-toggle { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; border-radius: var(--radius-control); display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.recovery-content[b-xbhzh7d8o2]  .recovery-toggle svg { width: 20px; height: 20px; }
.recovery-content[b-xbhzh7d8o2]  .recovery-help { font-size: var(--fs-sm); margin: 0 0 8px; }
.recovery-content[b-xbhzh7d8o2]  .recovery-error { color: var(--red-ink); background: var(--ground); border: 1px solid var(--tint-red-line); border-radius: var(--radius-xs); font-size: var(--fs-note); line-height: 1.5; padding: 12px; overflow-wrap: anywhere; }
.recovery-content[b-xbhzh7d8o2]  .recovery-primary, .recovery-primary[b-xbhzh7d8o2] { display: flex; justify-content: center; align-items: center; min-height: 48px; width: 100%; border: 0; border-radius: var(--radius-control); padding: 12px 16px; background: var(--blue); color: #fff; font-family: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.recovery-content[b-xbhzh7d8o2]  .recovery-primary:hover:not(:disabled, [aria-disabled="true"]), .recovery-primary:hover[b-xbhzh7d8o2] { background: var(--accent-dark); }
/* High Contrast drops the fill and there is no border, so the page's one action read as a
   line of text. */
@media (forced-colors: active) {
    .recovery-content[b-xbhzh7d8o2]  .recovery-primary, .recovery-primary[b-xbhzh7d8o2] { border: 1px solid ButtonText; }
}
.recovery-content[b-xbhzh7d8o2]  button:is(:disabled, [aria-disabled="true"]) { opacity: .6; cursor: default; }
.recovery-content[b-xbhzh7d8o2]  .recovery-email { font-size: var(--fs-md); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.recovery-content[b-xbhzh7d8o2]  .recovery-secondary { display: inline-flex; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-note); text-decoration: none; align-items: center; justify-content: center; cursor: pointer; }
.recovery-footer[b-xbhzh7d8o2] { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.recovery-login:not(.recovery-primary)[b-xbhzh7d8o2] { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; border: 0; padding: 8px 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-note); cursor: pointer; }
.recovery-page[b-xbhzh7d8o2]  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 520px) {
    .recovery-mast[b-xbhzh7d8o2] { padding: 16px; flex-wrap: wrap; gap: 8px 16px; }
    .recovery-mast span[b-xbhzh7d8o2] { font-size: var(--fs-sm); }
    .recovery-main[b-xbhzh7d8o2] { padding: 40px 20px 32px; }
    h1[b-xbhzh7d8o2] { font-size: var(--fs-heading); }
}
@media (max-height: 600px) { .recovery-main[b-xbhzh7d8o2] { padding-top: 24px; } }
/* /Components/SplitPanelModal.razor.rz.scp.css */
.spm-host[b-o7bkmzi73n] {
    --modal-radius: var(--radius);
    --modal-mobile-radius: var(--radius);
    --modal-overlay-padding: 24px;
    --modal-mobile-overlay-padding: 8px;
    --modal-mobile-align: center;
    --modal-panel-border: 1px solid var(--border-light);
    color: var(--text);
}
.spm-host[b-o7bkmzi73n]  *, .spm-host[b-o7bkmzi73n]  *::before, .spm-host[b-o7bkmzi73n]  *::after { box-sizing: border-box; letter-spacing: 0; }
.spm-host[b-o7bkmzi73n]  .spm-container {
    display: flex; flex-direction: column; width: min(1280px, 100%);
    height: calc(100dvh - 48px); max-height: 900px; min-height: 0;
    overflow: hidden; background: #fff;
}
.spm-header[b-o7bkmzi73n] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-light); flex: none; }
.spm-header-left[b-o7bkmzi73n] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spm-header-icon[b-o7bkmzi73n], .spm-section-icon[b-o7bkmzi73n] { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--accent); }
.spm-header-title[b-o7bkmzi73n] { margin: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.spm-close[b-o7bkmzi73n] { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-control); background: #fff; color: var(--text-secondary); cursor: pointer; }
.spm-close:hover[b-o7bkmzi73n] { color: var(--text); background: var(--bg-canvas); }
.spm-host[b-o7bkmzi73n]  button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.spm-view-switch[b-o7bkmzi73n] { display: none; }
.spm-columns[b-o7bkmzi73n] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; }
.spm-left[b-o7bkmzi73n], .spm-right[b-o7bkmzi73n] { min-width: 0; min-height: 0; margin: 0; background: #fff; }
.spm-left[b-o7bkmzi73n] { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.spm-left-inner[b-o7bkmzi73n] { width: 100%; max-width: 680px; margin-inline: auto; padding: 24px; overflow-wrap: anywhere; }
.spm-right[b-o7bkmzi73n] { display: flex; overflow: hidden; border-left: 1px solid var(--border-light); }
.spm-section-header[b-o7bkmzi73n] { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.spm-section-title[b-o7bkmzi73n] { margin: 0; font-size: var(--fs-heading-sm); font-weight: 600; line-height: 1.3; }
.spm-section-sub[b-o7bkmzi73n] { margin: 8px 0 0; font-size: var(--fs-note); line-height: 1.55; color: var(--text-secondary); }
.spm-form[b-o7bkmzi73n] { display: flex; flex-direction: column; gap: 16px; }
.spm-form--highlight[b-o7bkmzi73n] { outline: 2px solid var(--blue); outline-offset: 3px; }
.spm-trust[b-o7bkmzi73n] { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; color: var(--text-secondary); font-size: var(--fs-sm); }
.spm-trust span[b-o7bkmzi73n] { display: flex; align-items: center; gap: 6px; }
.spm-info[b-o7bkmzi73n], .spm-error[b-o7bkmzi73n] { padding: 16px; font-size: var(--fs-note); line-height: 1.5; border-radius: var(--radius-xs); }
.spm-info[b-o7bkmzi73n] { color: var(--blue); background: var(--pill); }
/* --red on --tint-red measures 4.39:1, under AA. --red-ink is 6.58:1 there. */
.spm-error[b-o7bkmzi73n] { margin-bottom: 20px; background: var(--tint-red); color: var(--red-ink); border: 1px solid var(--tint-red-line); }
.spm-error p[b-o7bkmzi73n] { margin: 8px 0 12px; }
.spm-check-btn[b-o7bkmzi73n] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; background: #fff; color: var(--text); border: 1px solid var(--border-light); border-radius: var(--radius-control); font: inherit; font-size: var(--fs-note); font-weight: 600; cursor: pointer; }
.spm-check-btn:hover:not([aria-disabled="true"])[b-o7bkmzi73n] { background: var(--bg-canvas); }
.spm-check-btn:is(:disabled, [aria-disabled="true"])[b-o7bkmzi73n] { cursor: default; color: var(--text-secondary); }
.spm-step-text:focus[b-o7bkmzi73n] { outline: none; }
.spm-progress-track[b-o7bkmzi73n] { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 20px 0 8px; }
.spm-progress-fill[b-o7bkmzi73n] { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.spm-step-text[b-o7bkmzi73n] { margin: 0 0 20px; color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.5; }
.lac-identity-bar[b-o7bkmzi73n] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lac-biz-hero-name[b-o7bkmzi73n] { font-size: var(--fs-heading); line-height: 1.3; font-weight: 600; margin: 0; }
.lac-hero[b-o7bkmzi73n] { position: relative; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.lac-hero-img[b-o7bkmzi73n] { display: block; width: 100%; height: 220px; object-fit: contain; object-position: top; background: var(--bg-canvas); }
.lac-hero-overlay[b-o7bkmzi73n] { position: absolute; left: 12px; top: 12px; }
.lac-hero-badge[b-o7bkmzi73n] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px; background: #fff; color: var(--text); border: 1px solid var(--border-light); font-size: var(--fs-sm); }
.lac-insight-stream[b-o7bkmzi73n] { display: flex; flex-direction: column; }
.lac-insight-card[b-o7bkmzi73n] { padding: 20px 0; border-top: 1px solid var(--border-light); }
.lac-insight-card--skeleton .lac-insight-icon[b-o7bkmzi73n] { background: var(--bg-canvas); color: var(--text-secondary); }
.lac-insight-card--skeleton .lac-insight-title[b-o7bkmzi73n] { color: var(--text-secondary); font-weight: 500; }
.lac-insight-header[b-o7bkmzi73n] { display: flex; align-items: center; gap: 12px; }
/* One quiet tint for every phase, like the icons on the recovery pages. Each phase had its own
   saturated colour (blue, pink, purple, red, orange, green), louder than the landing it follows. */
.lac-insight-icon[b-o7bkmzi73n] { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-xs); background: var(--pill); color: var(--blue); }
.lac-insight-icon[b-o7bkmzi73n]  svg { width: 16px; height: 16px; stroke: currentColor; }
.lac-insight-icon[b-o7bkmzi73n]  svg [fill="white"] { fill: currentColor; }
.lac-insight-title-group[b-o7bkmzi73n] { min-width: 0; }
.lac-insight-title[b-o7bkmzi73n] { display: flex; align-items: center; gap: 4px; margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.lac-insight-sub[b-o7bkmzi73n] { margin: 4px 0 0; font-size: var(--fs-note); line-height: 1.5; color: var(--text-secondary); }
.spm-pulse[b-o7bkmzi73n] { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }
.spm-phase-detail[b-o7bkmzi73n] { margin-top: 12px; }
.lac-diagnostic[b-o7bkmzi73n] { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 8px; color: var(--green-ink); font-size: var(--fs-note); line-height: 1.5; }
.lac-diagnostic-icon[b-o7bkmzi73n] { flex: none; margin-top: 2px; }
.lac-narrative[b-o7bkmzi73n] { margin: 8px 0; color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.6; }
.lac-callout[b-o7bkmzi73n] { display: flex; align-items: flex-start; gap: 8px; border-left: 2px solid var(--accent); padding-left: 12px; margin: 12px 0; font-size: var(--fs-note); line-height: 1.5; }
.lac-nudge[b-o7bkmzi73n] { padding-top: 16px; border-top: 1px solid var(--border-light); }
.lac-nudge-text[b-o7bkmzi73n] { margin: 0; color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.5; }
.spm-completion[b-o7bkmzi73n] { padding-top: 20px; border-top: 1px solid var(--border-light); }
.lac-complete-title[b-o7bkmzi73n] { font-size: var(--fs-heading-sm); font-weight: 600; margin: 0 0 8px; }
.lac-complete-sub[b-o7bkmzi73n] { font-size: var(--fs-note); line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px; }
.spm-report-btn[b-o7bkmzi73n] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius-control); font: inherit; font-size: var(--fs-note); font-weight: 600; cursor: pointer; }
.spm-report-btn:hover[b-o7bkmzi73n] { background: var(--accent-dark); }

/* Phase details are encoded HTML, so their descendants do not carry a Razor scope attribute. */
.spm-left[b-o7bkmzi73n]  .lac-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.spm-left[b-o7bkmzi73n]  .lac-tag { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 8px; border-radius: 4px; font-size: var(--fs-sm); line-height: 1.4; background: var(--tint-blue); color: var(--muted); }
.spm-left[b-o7bkmzi73n]  .lac-tag-accent { background: var(--pill); color: var(--blue); }
.spm-left[b-o7bkmzi73n]  .lac-tag-green { background: var(--tint-green); color: var(--green-ink); }
.spm-left[b-o7bkmzi73n]  .lac-tag-orange { background: var(--tint-amber); color: var(--amber); }
.spm-left[b-o7bkmzi73n]  .lac-tag-voice { background: var(--tint-purple); color: var(--purple-ink); }
.spm-left[b-o7bkmzi73n]  .lac-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--fs-note); }
.spm-left[b-o7bkmzi73n]  .lac-star, .spm-left[b-o7bkmzi73n]  .lac-comp-rating { color: var(--amber); }
.spm-left[b-o7bkmzi73n]  .lac-desc, .spm-left[b-o7bkmzi73n]  .lac-aesthetic, .spm-left[b-o7bkmzi73n]  .lac-essence { font-size: var(--fs-note); line-height: 1.55; color: var(--text-secondary); margin: 10px 0; }
.spm-left[b-o7bkmzi73n]  .lac-social-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-note); }
.spm-left[b-o7bkmzi73n]  .lac-social-icon { display: flex; flex: none; }
.spm-left[b-o7bkmzi73n]  .lac-social-name { font-weight: 600; }
.spm-left[b-o7bkmzi73n]  .lac-social-handle { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.spm-left[b-o7bkmzi73n]  .lac-theme-group { margin-top: 12px; }
.spm-left[b-o7bkmzi73n]  .lac-theme-label, .spm-left[b-o7bkmzi73n]  .lac-sentiment-label, .spm-left[b-o7bkmzi73n]  .lac-more, .spm-left[b-o7bkmzi73n]  .lac-stat-label { font-size: var(--fs-sm); color: var(--text-secondary); }
.spm-left[b-o7bkmzi73n]  .lac-sentiment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spm-left[b-o7bkmzi73n]  .lac-competitor-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-note); }
.spm-left[b-o7bkmzi73n]  .lac-comp-name { flex: 1 1 150px; font-weight: 600; }
.spm-left[b-o7bkmzi73n]  .lac-comp-distance { color: var(--text-secondary); }
.spm-left[b-o7bkmzi73n]  .lac-strategy-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; }
.spm-left[b-o7bkmzi73n]  .lac-stat-num { display: block; font-size: var(--fs-heading); font-weight: 600; }
.spm-left[b-o7bkmzi73n]  .lac-color-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.spm-left[b-o7bkmzi73n]  .lac-color-swatch { width: 28px; height: 28px; flex: none; border: 1px solid var(--line-strong); border-radius: 4px; }
.spm-left[b-o7bkmzi73n]  .lac-essence { border-left: 2px solid var(--purple-ink); padding-left: 12px; }

.spm-form[b-o7bkmzi73n]  .bid-input, .spm-form[b-o7bkmzi73n]  .bid-textarea { min-height: 44px; border-radius: var(--radius-control); border: 1.5px solid var(--line-field); font-size: var(--fs-md); }
/* The intake form's own button is 700. The landing page sets 600 on it, and so
   do the other two dialogs the landing page opens, so this one matches them
   rather than standing a weight heavier than its neighbours. The weight is set
   here rather than on the form's base, which the scrollcraft landing variants
   still read. */
.spm-form[b-o7bkmzi73n]  .bid-primary, .spm-form[b-o7bkmzi73n]  .bid-secondary { min-height: 44px; border-radius: var(--radius-control); font-weight: 600; }
.spm-form[b-o7bkmzi73n]  .bid-primary { background: var(--accent); box-shadow: none; }

@media (max-width: 800px) {
    .spm-host[b-o7bkmzi73n] { --modal-overlay-padding: 8px; }
    .spm-host[b-o7bkmzi73n]  .spm-container { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
    .spm-header[b-o7bkmzi73n] { padding: 10px 16px; }
    .spm-header-title[b-o7bkmzi73n] { font-size: var(--fs-md); }
    .spm-header-icon[b-o7bkmzi73n] { display: none; }
    .spm-view-switch[b-o7bkmzi73n] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border-light); flex: none; }
    .spm-view-switch button[b-o7bkmzi73n] { min-height: 44px; padding: 10px 8px; border: 1px solid transparent; border-radius: var(--radius-control); font: inherit; font-size: var(--fs-note); font-weight: 600; background: transparent; color: var(--text-secondary); cursor: pointer; }
    .spm-view-switch button[aria-pressed="true"][b-o7bkmzi73n] { color: var(--blue); background: var(--pill); border-color: var(--tint-blue); }
    .spm-columns[b-o7bkmzi73n] { grid-template-columns: minmax(0, 1fr); }
    .spm-right[b-o7bkmzi73n] { display: none; border-left: 0; }
    .spm-columns--studio .spm-left[b-o7bkmzi73n] { display: none; }
    .spm-columns--studio .spm-right[b-o7bkmzi73n] { display: flex; }
    .spm-left-inner[b-o7bkmzi73n] { padding: 20px 16px; }
    .spm-section-icon[b-o7bkmzi73n] { display: none; }
    .lac-biz-hero-name[b-o7bkmzi73n] { font-size: var(--fs-heading-sm); }
}
@media (prefers-reduced-motion: reduce) {
    .spm-host[b-o7bkmzi73n]  *, .spm-host[b-o7bkmzi73n]  *::before, .spm-host[b-o7bkmzi73n]  *::after { animation: none; transition: none; scroll-behavior: auto; }
}
/* /Components/Studio/FullyAutomatedView.razor.rz.scp.css */
.auto-shell[b-r50ggou0p0] {
    box-sizing: border-box;
    color: var(--text);
    margin: 0 auto;
    max-width: 1220px;
    min-width: 0;
    padding: 32px 28px 56px;
    width: 100%;
}

.auto-shell *[b-r50ggou0p0],
.auto-shell *[b-r50ggou0p0]::before,
.auto-shell *[b-r50ggou0p0]::after {
    box-sizing: border-box;
}

.auto-header[b-r50ggou0p0] {
    align-items: flex-start;
    display: grid;
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    margin-bottom: 28px;
}

.auto-title-block[b-r50ggou0p0] {
    min-width: 0;
}

.auto-title-line[b-r50ggou0p0] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auto-title-block h1[b-r50ggou0p0],
.auto-title-block p[b-r50ggou0p0],
.auto-section-heading h2[b-r50ggou0p0],
.auto-section-heading p[b-r50ggou0p0],
.auto-form-heading h3[b-r50ggou0p0],
.auto-form-heading p[b-r50ggou0p0],
.auto-rail-heading h2[b-r50ggou0p0],
.auto-empty-copy[b-r50ggou0p0],
.auto-attention-item p[b-r50ggou0p0],
.auto-run-row p[b-r50ggou0p0] {
    margin: 0;
}

.auto-title-block h1[b-r50ggou0p0] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

.auto-title-block > p[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin-top: 3px;
    max-width: 68ch;
}

.auto-header-actions[b-r50ggou0p0] {
    align-items: center;
    display: flex;
    gap: 8px;
}

.auto-icon-button[b-r50ggou0p0],
.auto-row-icon-button[b-r50ggou0p0] {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.auto-row-icon-button[b-r50ggou0p0] {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    height: 44px;
    width: 44px;
}

.auto-icon-button:hover:not(:disabled)[b-r50ggou0p0],
.auto-row-icon-button:hover:not(:disabled)[b-r50ggou0p0] {
    background: var(--tint-blue);
    border-color: var(--line-strong);
    color: var(--ink);
}

.auto-icon-button:focus-visible[b-r50ggou0p0],
.auto-row-icon-button:focus-visible[b-r50ggou0p0],
.auto-primary-action:focus-visible[b-r50ggou0p0],
.auto-secondary-action:focus-visible[b-r50ggou0p0],
.auto-tertiary-action:focus-visible[b-r50ggou0p0],
.auto-text-action:focus-visible[b-r50ggou0p0],
.auto-small-action:focus-visible[b-r50ggou0p0],
.auto-upload-action:focus-visible[b-r50ggou0p0],
.auto-field input:focus[b-r50ggou0p0],
.auto-field textarea:focus[b-r50ggou0p0],
.auto-field select:focus[b-r50ggou0p0],
.auto-schedule-row input:focus[b-r50ggou0p0],
.auto-schedule-row select:focus[b-r50ggou0p0],
.auto-retry-time input:focus[b-r50ggou0p0] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* The field a refused save was about. */
.auto-field input[aria-invalid="true"][b-r50ggou0p0],
.auto-field textarea[aria-invalid="true"][b-r50ggou0p0],
.auto-field select[aria-invalid="true"][b-r50ggou0p0],
.auto-schedule-row input[aria-invalid="true"][b-r50ggou0p0] {
    border-color: var(--red);
}

/* The refused save's reason, repeated under the field it is about. Two classes, so the field
   caption rule (.auto-field > span) does not restyle it as a caption. */
.auto-field .auto-field-error[b-r50ggou0p0],
.auto-schedule-row .auto-field-error[b-r50ggou0p0] {
    color: var(--red-ink);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    margin: 6px 0 0;
}

.auto-schedule-row .auto-slot-error[b-r50ggou0p0] {
    grid-column: 1 / -1;
    margin-top: -2px;
}

.auto-icon-button:disabled[b-r50ggou0p0],
.auto-row-icon-button:disabled[b-r50ggou0p0],
.auto-primary-action:disabled[b-r50ggou0p0],
.auto-secondary-action:disabled[b-r50ggou0p0],
.auto-tertiary-action:disabled[b-r50ggou0p0],
.auto-small-action:disabled[b-r50ggou0p0] {
    cursor: not-allowed;
    opacity: .48;
}

.auto-icon-button[b-r50ggou0p0]  svg,
.auto-row-icon-button[b-r50ggou0p0]  svg,
.auto-primary-action[b-r50ggou0p0]  svg,
.auto-secondary-action[b-r50ggou0p0]  svg,
.auto-tertiary-action[b-r50ggou0p0]  svg,
.auto-text-action[b-r50ggou0p0]  svg,
.auto-small-action[b-r50ggou0p0]  svg,
.auto-alert[b-r50ggou0p0]  svg,
.auto-clear-state[b-r50ggou0p0]  svg,
.auto-upload-action[b-r50ggou0p0]  svg {
    height: 1em;
    width: 1em;
}

.auto-primary-action[b-r50ggou0p0],
.auto-secondary-action[b-r50ggou0p0],
.auto-tertiary-action[b-r50ggou0p0],
.auto-small-action[b-r50ggou0p0],
.auto-text-action[b-r50ggou0p0] {
    align-items: center;
    border-radius: var(--radius-control);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-note);
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    text-decoration: none;
}

.auto-primary-action[b-r50ggou0p0] {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
}

.auto-primary-action:hover:not(:disabled)[b-r50ggou0p0] {
    background: var(--accent-dark);
    border-color: var(--blue);
}

.auto-secondary-action[b-r50ggou0p0],
.auto-small-action[b-r50ggou0p0] {
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--text);
}

.auto-secondary-action:hover:not(:disabled)[b-r50ggou0p0],
.auto-small-action:hover:not(:disabled)[b-r50ggou0p0] {
    background: var(--ground);
    border-color: var(--line-field);
}

.auto-tertiary-action[b-r50ggou0p0] {
    background: var(--pill);
    border: 1px solid var(--tint-blue);
    color: var(--blue);
    min-height: 44px;
    padding: 7px 11px;
}

.auto-tertiary-action:hover:not(:disabled)[b-r50ggou0p0] {
    background: var(--tint-blue);
}

.auto-small-action[b-r50ggou0p0] {
    font-size: var(--fs-sm);
    min-height: 44px;
    padding: 6px 10px;
}

.auto-small-action.primary[b-r50ggou0p0] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.auto-text-action[b-r50ggou0p0] {
    background: transparent;
    border: 0;
    color: var(--accent);
    min-height: 44px;
    padding: 4px 2px;
}

.auto-text-action:hover:not(:disabled)[b-r50ggou0p0] {
    color: var(--blue);
    text-decoration: underline;
}

.auto-status-badge[b-r50ggou0p0] {
    align-items: center;
    background: var(--line);
    border-radius: var(--radius-xs);
    color: var(--ink-soft);
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 700;
    gap: 7px;
    line-height: 1;
    padding: 7px 10px;
}

.auto-status-badge > span[b-r50ggou0p0] {
    background: currentColor;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.auto-status-badge.active[b-r50ggou0p0] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.auto-status-badge.paused[b-r50ggou0p0] {
    background: var(--ground);
    color: var(--amber);
}

.auto-status-badge.disabled[b-r50ggou0p0] {
    background: var(--tint-red);
    color: var(--red-ink);
}

.auto-announcements[b-r50ggou0p0] {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

/* Focused only to bring a notice into view after Save or Turn on. */
.auto-announcements:focus[b-r50ggou0p0] {
    outline: none;
}

.auto-alert[b-r50ggou0p0] {
    align-items: flex-start;
    border-radius: var(--radius-sm);
    display: flex;
    font-size: var(--fs-note);
    gap: 9px;
    line-height: 1.45;
    padding: 10px 12px;
}

.auto-alert.success[b-r50ggou0p0] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.auto-alert.error[b-r50ggou0p0] {
    background: var(--tint-red);
    color: var(--red-ink);
}

.auto-alert.warning[b-r50ggou0p0] {
    background: var(--ground);
    color: var(--amber);
}

.auto-page-state[b-r50ggou0p0] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 42vh;
    padding: 32px;
}

.auto-page-error[b-r50ggou0p0] {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    justify-content: flex-start;
    margin: 8vh auto 0;
    max-width: 560px;
    min-height: 0;
}

.auto-page-error strong[b-r50ggou0p0] {
    display: block;
    font-size: var(--fs-md);
}

.auto-page-error p[b-r50ggou0p0] {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 5px 0 14px;
}

.auto-layout[b-r50ggou0p0] {
    align-items: start;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

/* A set-up plan puts the status rail first in the page (for a phone); it stays on the right here. */
.auto-layout.status-first > .auto-rail[b-r50ggou0p0] {
    grid-column: 2;
    grid-row: 1;
}

.auto-layout.status-first > .auto-config-surface[b-r50ggou0p0] {
    grid-column: 1;
    grid-row: 1;
}

.auto-config-surface[b-r50ggou0p0],
.auto-rail[b-r50ggou0p0],
.auto-activity-surface[b-r50ggou0p0],
.auto-history-surface[b-r50ggou0p0] {
    background: transparent;
    min-width: 0;
}

.auto-config-surface[b-r50ggou0p0] {
    padding: 0;
}

.auto-section-heading[b-r50ggou0p0] {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.auto-section-heading h2[b-r50ggou0p0],
.auto-rail-heading h2[b-r50ggou0p0] {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.auto-section-heading p[b-r50ggou0p0],
.auto-form-heading p[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-top: 4px;
}

.auto-read-only[b-r50ggou0p0] {
    background: var(--line);
    border-radius: var(--radius-xs);
    color: var(--ink-soft);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 6px 9px;
}

.auto-permission-note[b-r50ggou0p0] {
    background: var(--tint-blue);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 16px 0 0;
    padding: 10px 12px;
}

.auto-form-section[b-r50ggou0p0] {
    border-top: 1px solid var(--border-light);
    margin-top: 20px;
    padding-top: 20px;
}

.auto-form-heading h3[b-r50ggou0p0] {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.auto-form-heading-action[b-r50ggou0p0],
.auto-reference-heading[b-r50ggou0p0] {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.auto-form-heading-action > div[b-r50ggou0p0] { min-width: 0; }
.auto-form-heading-action > button[b-r50ggou0p0] { flex: 0 0 auto; white-space: nowrap; }

.auto-field-grid[b-r50ggou0p0] {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.auto-field-grid.two-column[b-r50ggou0p0] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auto-field[b-r50ggou0p0] {
    display: block;
    min-width: 0;
}

.auto-field > span[b-r50ggou0p0],
.auto-reference-heading strong[b-r50ggou0p0],
.auto-retry-time > span[b-r50ggou0p0] {
    color: var(--ink-soft);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-bottom: 7px;
}

.auto-field input[b-r50ggou0p0], .auto-field textarea[b-r50ggou0p0], .auto-field select[b-r50ggou0p0], .auto-schedule-row input[b-r50ggou0p0], .auto-schedule-row select[b-r50ggou0p0], .auto-retry-time input[b-r50ggou0p0]{
    background: #fff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-note);
    min-height: 44px;
    padding: 9px 11px;
    width: 100%;
}

.auto-field textarea[b-r50ggou0p0] {
    line-height: 1.5;
    min-height: 104px;
    resize: vertical;
}

.auto-field input[b-r50ggou0p0]::placeholder,
.auto-field textarea[b-r50ggou0p0]::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.auto-field input:disabled[b-r50ggou0p0],
.auto-field textarea:disabled[b-r50ggou0p0],
.auto-field select:disabled[b-r50ggou0p0],
.auto-schedule-row input:disabled[b-r50ggou0p0],
.auto-schedule-row select:disabled[b-r50ggou0p0] {
    background: var(--line);
    color: var(--text-secondary);
    opacity: 1;
}

.auto-brief-field[b-r50ggou0p0] {
    margin-top: 14px;
    position: relative;
}

.auto-brief-foot[b-r50ggou0p0] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin-top: 5px;
}

.auto-brief-foot small[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-left: auto;
}

.auto-brief-ask[b-r50ggou0p0] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 600;
    gap: 6px;
    min-height: 28px;
    text-decoration: none;
}

.auto-brief-ask:hover span[b-r50ggou0p0] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auto-brief-ask:focus-visible[b-r50ggou0p0] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.auto-schedule-list[b-r50ggou0p0] {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.auto-schedule-row[b-r50ggou0p0] {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(120px, .75fr) 44px;
    min-width: 0;
}

.auto-schedule-row label[b-r50ggou0p0] { min-width: 0; }
.auto-summary-list dd[b-r50ggou0p0], .auto-activity-main strong[b-r50ggou0p0] { overflow-wrap: anywhere; }

.auto-zone-note[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: -6px 0 0;
}

.auto-zone-use[b-r50ggou0p0] {
    background: none;
    border: 0;
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    margin-left: 4px;
    min-height: 24px;
    padding: 2px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auto-zone-use:focus-visible[b-r50ggou0p0] {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Under both fields on a wide screen; the phone column keeps it right under the zone. */
.auto-field-grid.schedule-options .auto-zone-note[b-r50ggou0p0] {
    grid-column: 1 / -1;
    grid-row: 2;
}

.auto-field-grid.schedule-options[b-r50ggou0p0] {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr);
    margin-top: 14px;
}

.auto-image-settings > summary[b-r50ggou0p0] {
    align-items: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    list-style: none;
    min-height: 44px;
    margin: -8px;
    padding: 8px;
}

.auto-image-settings > summary[b-r50ggou0p0]::-webkit-details-marker {
    display: none;
}

.auto-image-settings > summary:hover[b-r50ggou0p0] {
    background: var(--tint-blue);
}

.auto-image-settings > summary:focus-visible[b-r50ggou0p0] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.auto-image-settings > summary > span[b-r50ggou0p0] {
    min-width: 0;
}

.auto-image-settings > summary strong[b-r50ggou0p0],
.auto-image-settings > summary small[b-r50ggou0p0] {
    display: block;
}

.auto-image-settings > summary strong[b-r50ggou0p0] {
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.35;
}

.auto-image-settings > summary small[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.auto-image-settings > summary[b-r50ggou0p0]  svg {
    color: var(--text-secondary);
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.auto-image-settings[open] > summary[b-r50ggou0p0]  svg {
    transform: rotate(90deg);
}

.auto-image-settings-body[b-r50ggou0p0] {
    padding-top: 16px;
}

.auto-image-settings-intro[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 0;
}

.auto-reference-heading[b-r50ggou0p0] {
    margin-top: 18px;
}

.auto-reference-heading > div[b-r50ggou0p0] {
    min-width: 0;
}

.auto-reference-heading strong[b-r50ggou0p0] {
    margin-bottom: 3px;
}

.auto-reference-heading > div > span[b-r50ggou0p0] {
    color: var(--text-secondary);
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.auto-upload-action[b-r50ggou0p0] {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    gap: 7px;
    min-height: 44px;
    padding: 7px 10px;
    position: relative;
}

.auto-upload-action:hover:not(:disabled)[b-r50ggou0p0] {
    background: var(--tint-blue);
    border-color: var(--line-field);
}

.auto-upload-action:disabled[b-r50ggou0p0] {
    cursor: not-allowed;
    opacity: .5;
}

.auto-reference-list[b-r50ggou0p0] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.auto-reference-list figure[b-r50ggou0p0] {
    aspect-ratio: 1;
    background: var(--line);
    border-radius: var(--radius-sm);
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 96px;
}

.auto-reference-list img[b-r50ggou0p0] {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.auto-reference-list button[b-r50ggou0p0] {
    align-items: center;
    background: rgba(20, 22, 26, .82);
    border: 0;
    border-radius: var(--radius-control);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 44px;
}

.auto-reference-empty[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-top: 10px;
    padding: 2px 0;
}

.auto-quality-details[b-r50ggou0p0] {
    border-top: 1px solid var(--border-light);
    margin-top: 18px;
    padding-top: 14px;
}

.auto-quality-details > summary[b-r50ggou0p0] {
    align-items: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    list-style: none;
    margin-inline: -8px;
    min-height: 44px;
    padding: 6px 8px;
}

.auto-quality-details > summary[b-r50ggou0p0]::-webkit-details-marker {
    display: none;
}

.auto-quality-details > summary:hover[b-r50ggou0p0] {
    background: var(--tint-blue);
}

.auto-quality-details > summary:focus-visible[b-r50ggou0p0] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.auto-quality-details > summary strong[b-r50ggou0p0],
.auto-quality-details > summary small[b-r50ggou0p0] {
    display: block;
}

.auto-quality-details > summary strong[b-r50ggou0p0] {
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.35;
}

.auto-quality-details[open] > summary strong[b-r50ggou0p0] {
    color: var(--ink);
}

.auto-quality-details > summary small[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin-top: 2px;
}

.auto-quality-details > summary[b-r50ggou0p0]  svg {
    color: var(--text-secondary);
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.auto-quality-details[open] > summary[b-r50ggou0p0]  svg {
    transform: rotate(90deg);
}

.auto-quality-details > .auto-field-grid[b-r50ggou0p0] {
    margin-top: 10px;
}

.auto-inline-error[b-r50ggou0p0],
.auto-item-error[b-r50ggou0p0],
.auto-rail-warning[b-r50ggou0p0] {
    background: var(--tint-red);
    border-radius: var(--radius-sm);
    color: var(--red-ink);
    font-size: var(--fs-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
    padding: 9px 11px;
}

.auto-inline-error[b-r50ggou0p0] {
    margin-top: 16px;
}

.auto-form-actions[b-r50ggou0p0] {
    align-items: center;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
}

.auto-form-actions-note[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.45;
    margin: 0 auto 0 0;
}

.auto-rail[b-r50ggou0p0] {
    max-height: calc(100dvh - 32px);
    border-left: 1px solid var(--border-light);
    overflow: hidden;
    overflow-y: auto;
    position: sticky;
    top: 16px;
}

.auto-rail-section[b-r50ggou0p0] {
    padding: 20px 0 20px 24px;
}

.auto-rail-section:first-child[b-r50ggou0p0] { padding-top: 0; }

.auto-rail-section + .auto-rail-section[b-r50ggou0p0] {
    border-top: 1px solid var(--border-light);
}

.auto-summary-section[b-r50ggou0p0] {
    background: transparent;
}

.auto-rail-heading[b-r50ggou0p0] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.auto-rail-heading > span[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.auto-empty-copy[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-top: 12px;
}

.auto-summary-list[b-r50ggou0p0] {
    display: grid;
    gap: 10px;
    margin: 15px 0 0;
}

.auto-activity-jump[b-r50ggou0p0] {
    align-items: center;
    color: var(--accent);
    display: inline-flex;
    font-size: var(--fs-note);
    font-weight: 600;
    gap: 4px;
    margin-top: 6px;
    min-height: 44px;
    text-decoration: none;
}

.auto-activity-jump:hover[b-r50ggou0p0] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auto-activity-jump svg[b-r50ggou0p0] {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}

.auto-summary-list > div[b-r50ggou0p0] {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.auto-summary-list dt[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.auto-summary-list dd[b-r50ggou0p0] {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 0;
    text-align: end;
}

.auto-platform-list[b-r50ggou0p0] {
    display: grid;
    gap: 13px;
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
}

.auto-platform-list li[b-r50ggou0p0] {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    grid-template-columns: 9px minmax(0, 1fr);
}

.auto-platform-dot[b-r50ggou0p0] {
    border-radius: 50%;
    height: 8px;
    margin-top: 5px;
    width: 8px;
}

.auto-platform-dot.eligible[b-r50ggou0p0] {
    background: var(--green-ink);
}

.auto-platform-dot.ineligible[b-r50ggou0p0] {
    background: var(--amber);
}

.auto-platform-list strong[b-r50ggou0p0],
.auto-platform-list span[b-r50ggou0p0],
.auto-platform-list small[b-r50ggou0p0] {
    display: block;
    overflow-wrap: anywhere;
}

.auto-platform-list strong[b-r50ggou0p0] {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
}

.auto-platform-list span[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 1px;
}

/* The dot is a span too, so the rule above took its margin and it sat above the name. Centred on
   the name's line, whatever size the name's text is. */
.auto-platform-list .auto-platform-dot[b-r50ggou0p0] {
    margin-top: calc((var(--fs-sm) * 1.4 - 8px) / 2);
}

.auto-platform-list small[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.35;
    margin-top: 3px;
}

.auto-empty-block[b-r50ggou0p0],
.auto-clear-state[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin-top: 14px;
}

.auto-empty-block p[b-r50ggou0p0] {
    margin: 0 0 4px;
}

.auto-clear-state[b-r50ggou0p0] {
    align-items: center;
    color: var(--green-ink);
    display: flex;
    gap: 8px;
}

.auto-rail-warning[b-r50ggou0p0] {
    background: var(--ground);
    color: var(--amber);
    margin-top: 12px;
}

.auto-rail-warning .auto-text-action[b-r50ggou0p0] {
    color: inherit;
    margin-top: 4px;
}

/* The words and Try again on one line where they fit, the button under them where not. */
.auto-inline-error[b-r50ggou0p0] {
    align-items: center;
    column-gap: 12px;
    display: flex;
    flex-wrap: wrap;
}

.auto-inline-error .auto-text-action[b-r50ggou0p0] {
    color: inherit;
}

.auto-attention-list[b-r50ggou0p0] {
    display: grid;
    margin-top: 8px;
}

.auto-attention-item[b-r50ggou0p0] {
    min-width: 0;
    padding: 14px 0;
}

.auto-attention-item + .auto-attention-item[b-r50ggou0p0] {
    border-top: 1px solid var(--border-light);
}

.auto-attention-topline[b-r50ggou0p0] {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.auto-attention-topline strong[b-r50ggou0p0] {
    font-size: var(--fs-sm);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.auto-attention-topline > span[b-r50ggou0p0] {
    color: var(--amber);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* Whole, as it is what to do: cut at three lines, a post out on some platforms lost "Reconnect it
   in Integrations, then schedule it again" at 320. The reasons are capped at the server. */
.auto-attention-item p[b-r50ggou0p0] {
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.auto-attention-item p.auto-attention-finding[b-r50ggou0p0] {
    color: var(--ink-soft);
}

.auto-attention-meta[b-r50ggou0p0] {
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    gap: 5px 10px;
    margin-top: 8px;
}

.auto-retry-time[b-r50ggou0p0] {
    display: block;
    margin-top: 11px;
}

.auto-retry-time > span[b-r50ggou0p0] {
    font-size: var(--fs-xs);
    margin-bottom: 5px;
}

.auto-retry-time input[b-r50ggou0p0] {
    font-size: var(--fs-sm);
    min-height: 44px;
}

.auto-item-error[b-r50ggou0p0] {
    margin-top: 9px;
}

/* The rail is narrow at every width, so the link gets its own row and the two buttons share one. */
/* Two buttons side by side when "Check my changes" fits on one line, one above the
   other in the narrow tablet side column instead of wrapping the label. */
.auto-attention-actions[b-r50ggou0p0] {
    align-items: stretch;
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
    margin-top: 11px;
}

.auto-attention-actions .auto-text-action[b-r50ggou0p0] {
    grid-column: 1 / -1;
    justify-content: flex-start;
    justify-self: start;
}

.auto-activity-surface[b-r50ggou0p0],
.auto-history-surface[b-r50ggou0p0] {
    margin-top: 32px;
    padding: 24px 0 0;
    border-top: 1px solid var(--border-light);
}

.auto-activity-list[b-r50ggou0p0] {
    display: grid;
    margin-top: 14px;
}

/* Top aligned: a row with a preview is taller, and centring put the status dot and the time
   beside the picture rather than the status they belong to. */
.auto-activity-row[b-r50ggou0p0] {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 10px minmax(0, 1fr) minmax(160px, auto) 44px;
    min-width: 0;
    padding: 12px 0;
}

.auto-activity-row + .auto-activity-row[b-r50ggou0p0] {
    border-top: 1px solid var(--border-light);
}

.auto-activity-dot[b-r50ggou0p0] {
    background: var(--line-field);
    border-radius: 50%;
    height: 8px;
    margin-top: 6px;
    width: 8px;
}

.auto-activity-dot.goingout[b-r50ggou0p0],
.auto-activity-dot.generatingcaption[b-r50ggou0p0],
.auto-activity-dot.generatingimages[b-r50ggou0p0],
.auto-activity-dot.evaluating[b-r50ggou0p0],
.auto-activity-dot.readytoschedule[b-r50ggou0p0] {
    background: var(--blue);
}

/* A post being worked on right now pulses, so "Writing caption" reads as under way and not as
   one more still dot beside the finished ones. Ready to schedule is waiting, so it stays still. */
.auto-activity-dot.goingout[b-r50ggou0p0],
.auto-activity-dot.generatingcaption[b-r50ggou0p0],
.auto-activity-dot.generatingimages[b-r50ggou0p0],
.auto-activity-dot.evaluating[b-r50ggou0p0] {
    animation: auto-working-b-r50ggou0p0 1.6s ease-out infinite;
}

@keyframes auto-working-b-r50ggou0p0 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--blue-rgb), 0.45);
    }

    100% {
        box-shadow: 0 0 0 7px rgba(var(--blue-rgb), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auto-activity-dot.goingout[b-r50ggou0p0],
    .auto-activity-dot.generatingcaption[b-r50ggou0p0],
    .auto-activity-dot.generatingimages[b-r50ggou0p0],
    .auto-activity-dot.evaluating[b-r50ggou0p0] {
        animation: none;
    }
}

.auto-activity-dot.scheduled[b-r50ggou0p0],
.auto-activity-dot.published[b-r50ggou0p0] {
    background: var(--green-ink);
}

.auto-activity-dot.needsattention[b-r50ggou0p0],
.auto-activity-dot.publishedwithissues[b-r50ggou0p0],
.auto-activity-dot.failed[b-r50ggou0p0] {
    background: var(--amber);
}

.auto-activity-dot.cancelled[b-r50ggou0p0] {
    background: var(--red);
}

.auto-activity-main[b-r50ggou0p0] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.auto-activity-main strong[b-r50ggou0p0] {
    font-size: var(--fs-sm);
    line-height: 1.35;
}

.auto-activity-main span[b-r50ggou0p0],
.auto-activity-main small[b-r50ggou0p0],
.auto-activity-row time[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.auto-activity-main small[b-r50ggou0p0] {
    color: var(--amber);
    overflow-wrap: anywhere;
}

.auto-activity-preview[b-r50ggou0p0] {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    margin: 6px 0 2px;
    min-width: 0;
}

.auto-activity-preview img[b-r50ggou0p0] {
    aspect-ratio: 1;
    background: var(--ground);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    flex: 0 0 auto;
    height: 48px;
    object-fit: cover;
    width: 48px;
}

.auto-activity-preview p[b-r50ggou0p0] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--ink-soft);
    display: -webkit-box;
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    max-width: 62ch;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.auto-activity-row time[b-r50ggou0p0] {
    text-align: right;
    white-space: nowrap;
}

.auto-run-list[b-r50ggou0p0] {
    display: grid;
    margin-top: 14px;
}

.auto-run-row[b-r50ggou0p0] {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(150px, .8fr) minmax(300px, 1fr) minmax(0, 1.2fr);
    min-width: 0;
    padding: 13px 0;
}

.auto-run-row + .auto-run-row[b-r50ggou0p0] {
    border-top: 1px solid var(--border-light);
}

.auto-run-date strong[b-r50ggou0p0],
.auto-run-date span[b-r50ggou0p0] {
    display: block;
}

.auto-run-date strong[b-r50ggou0p0] {
    font-size: var(--fs-sm);
}

.auto-run-date span[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 3px;
}

.auto-run-row dl[b-r50ggou0p0] {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.auto-run-row dl > div[b-r50ggou0p0] {
    min-width: 0;
}

.auto-run-row dt[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.auto-run-row dd[b-r50ggou0p0] {
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 3px 0 0;
}

.auto-run-row p[b-r50ggou0p0] {
    color: var(--red-ink);
    font-size: var(--fs-xs);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .auto-shell[b-r50ggou0p0] {
        padding-inline: 22px;
    }

    .auto-layout[b-r50ggou0p0] {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 310px);
    }

    .auto-config-surface[b-r50ggou0p0] {
        padding-inline: 0;
    }

    .auto-field-grid.two-column[b-r50ggou0p0] {
        grid-template-columns: 1fr;
    }

    .auto-run-row[b-r50ggou0p0] {
        grid-template-columns: minmax(130px, .7fr) minmax(280px, 1fr);
    }

    .auto-run-row p[b-r50ggou0p0] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .auto-field input[b-r50ggou0p0], .auto-field textarea[b-r50ggou0p0], .auto-field select[b-r50ggou0p0],
    .auto-schedule-row input[b-r50ggou0p0], .auto-schedule-row select[b-r50ggou0p0], .auto-retry-time input[b-r50ggou0p0] { font-size: var(--fs-md); }
    .auto-shell[b-r50ggou0p0] {
        padding: 16px 14px 48px;
    }

    .auto-header[b-r50ggou0p0] {
        align-items: start;
        gap: 10px;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .auto-header-actions[b-r50ggou0p0] {
        display: contents;
    }

    .auto-header-actions > .auto-icon-button[b-r50ggou0p0] {
        grid-column: 3;
        grid-row: 1;
    }

    /* Under the title, from its left edge. Pushed to the right it floated alone in the corner
       below Refresh, with nothing beside it once the line under the title is hidden. */
    .auto-header-actions > .auto-primary-action[b-r50ggou0p0],
    .auto-header-actions > .auto-secondary-action[b-r50ggou0p0] {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: start;
    }

    .auto-title-block h1[b-r50ggou0p0] {
        font-size: var(--fs-heading);
    }

    .auto-layout[b-r50ggou0p0] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Clip, with room at the edges: hidden cut the left side off the ring on a focused
       "See post activity", which sits flush with the column's edge here. */
    .auto-rail[b-r50ggou0p0] {
        max-height: none;
        overflow: clip;
        overflow-clip-margin: 8px;
        position: static;
        border-left: 0;
        border-top: 1px solid var(--border-light);
        padding-top: 24px;
    }

    /* A set-up plan: status and anything needing help come before the form, as in the page. */
    .auto-layout.status-first > .auto-rail[b-r50ggou0p0] {
        border-bottom: 1px solid var(--border-light);
        border-top: 0;
        grid-column: auto;
        grid-row: auto;
        padding-top: 0;
    }

    .auto-layout.status-first > .auto-config-surface[b-r50ggou0p0] {
        grid-column: auto;
        grid-row: auto;
    }

    .auto-config-surface[b-r50ggou0p0] {
        padding: 0;
    }

    .auto-form-heading-action[b-r50ggou0p0],
    .auto-reference-heading[b-r50ggou0p0] {
        align-items: stretch;
        flex-direction: column;
    }

    .auto-form-heading-action .auto-tertiary-action[b-r50ggou0p0],
    .auto-reference-heading .auto-upload-action[b-r50ggou0p0] {
        align-self: flex-start;
    }

    .auto-schedule-row[b-r50ggou0p0] {
        grid-template-columns: minmax(0, 1.25fr) minmax(142px, .8fr) 44px;
    }

    .auto-field-grid.schedule-options[b-r50ggou0p0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .auto-field-grid.schedule-options .auto-zone-note[b-r50ggou0p0] {
        grid-row: auto;
    }

    .auto-form-actions[b-r50ggou0p0] {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .auto-form-actions .auto-primary-action[b-r50ggou0p0],
    .auto-form-actions .auto-secondary-action[b-r50ggou0p0],
    .auto-form-actions .auto-text-action[b-r50ggou0p0] {
        width: 100%;
    }

    /* The column is reversed, so a high order puts the note on top. */
    .auto-form-actions-note[b-r50ggou0p0] {
        margin: 0;
        order: 10;
    }

    .auto-rail-section[b-r50ggou0p0] {
        padding: 20px 0;
    }

    /* Under the form, the rail's last section ran into Post activity's own top margin and
       left twice the usual space above its line. */
    .auto-layout:not(.status-first) .auto-rail-section:last-child[b-r50ggou0p0] {
        padding-bottom: 0;
    }

    .auto-activity-surface[b-r50ggou0p0],
    .auto-history-surface[b-r50ggou0p0] {
        padding: 24px 0 0;
    }

    .auto-activity-row[b-r50ggou0p0] {
        align-items: start;
        grid-template-columns: 10px minmax(0, 1fr) 44px;
    }

    .auto-activity-row time[b-r50ggou0p0] {
        grid-column: 2;
        text-align: left;
    }

    .auto-activity-row .auto-row-icon-button[b-r50ggou0p0] {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .auto-run-row[b-r50ggou0p0] {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .auto-run-row dl[b-r50ggou0p0] {
        max-width: 360px;
    }
}

@media (max-width: 430px) {
    .auto-header[b-r50ggou0p0] {
        align-items: center;
    }

    .auto-title-line[b-r50ggou0p0] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .auto-title-block h1[b-r50ggou0p0] {
        font-size: var(--fs-heading);
        white-space: nowrap;
    }

    .auto-title-block > p[b-r50ggou0p0] {
        display: none;
    }

    .auto-status-badge[b-r50ggou0p0] {
        display: inline-flex;
    }

    .auto-header-actions .auto-secondary-action[b-r50ggou0p0],
    .auto-header-actions .auto-primary-action[b-r50ggou0p0] {
        width: auto;
    }

    /* Day and time stay on one line, so the remove button is plainly for the whole time
       and not for the time box beside it. 142px still shows "09:00 AM" and its clock. */
    .auto-schedule-row[b-r50ggou0p0] {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) 142px 40px;
    }

    .auto-schedule-row input[b-r50ggou0p0],
    .auto-schedule-row select[b-r50ggou0p0] {
        padding-inline: 10px;
    }

    .auto-schedule-row .auto-row-icon-button[b-r50ggou0p0] {
        width: 40px;
    }

    .auto-run-row dl[b-r50ggou0p0] {
        gap: 5px;
    }
}

/* Under 360px the day box was 98px wide and cut "Wednesday" to "Wednes". Day goes over time,
   and the remove button sits beside both, so it still removes the whole time. */
@media (max-width: 359px) {
    .auto-schedule-list[b-r50ggou0p0] {
        gap: 14px;
    }

    .auto-schedule-row[b-r50ggou0p0] {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .auto-schedule-row > label:first-child[b-r50ggou0p0] {
        grid-column: 1;
        grid-row: 1;
    }

    .auto-schedule-row > label:nth-child(2)[b-r50ggou0p0] {
        grid-column: 1;
        grid-row: 2;
    }

    .auto-schedule-row .auto-row-icon-button[b-r50ggou0p0] {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auto-shell *[b-r50ggou0p0] {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .auto-platform-dot[b-r50ggou0p0],
    .auto-status-badge > span[b-r50ggou0p0] {
        border: 1px solid CanvasText;
    }
}

/* In place of Fix connections for someone who cannot connect accounts. */
.auto-rail-note[b-r50ggou0p0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 10px 0 0;
}
/* /Components/Studio/ImageEditor/ImageEditor.razor.rz.scp.css */
/*  Inline AI image editor, laid out like a design tool.

    Layout: a top bar (Cancel · title · Done), then three columns. A narrow
    rail picks the tool (AI edit, Crop, Text, Logo); the panel next to it
    holds that tool's settings. The right is a grey stage: for the AI edit a
    floating toolbar for marking the part to change, then the photo as a
    lifted page with its crop frame and layers, and the versions strip under
    it. Below 900px everything stacks: photo, the rail as tabs, the panel.

    Mask colours are drawn by drawing-canvas.js and match these tokens:
        mask fill        rgba(77, 157, 224, 0.4)
        mask outline     var(--blue-lt)
*/
.ie-shell[b-8re36sj15c] {
    --ie-stage: #eceef2;
    --ie-rail-width: 72px;
    --ie-panel-width: 344px;
    --ie-lift: 0 1px 2px rgba(16, 24, 40, 0.08), 0 6px 18px rgba(16, 24, 40, 0.10);
    --ie-page-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 14px 36px rgba(16, 24, 40, 0.18);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 0;
    color: var(--text);
    min-height: 0;
    overflow: hidden;
    /* Sprint 11 pass-2 (A1) — `position: relative` so the FE-11-9 discard
       dialog's `position: absolute; inset: 0` resolves to the editor shell,
       not whichever ancestor up the tree happens to be positioned. */
    position: relative;
}

/* ── Top bar (FE-9-9) ── */
.ie-topbar[b-8re36sj15c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
    flex-shrink: 0;
}

.ie-cancel[b-8re36sj15c] { justify-self: start; }
.ie-done[b-8re36sj15c] { justify-self: end; }

.ie-topbar-title[b-8re36sj15c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.ie-title[b-8re36sj15c] {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.ie-pending-pill[b-8re36sj15c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--amber);
    white-space: nowrap;
}

.ie-btn[b-8re36sj15c] {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.ie-btn-ghost[b-8re36sj15c] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-light);
}
.ie-btn-ghost:hover:not(:disabled)[b-8re36sj15c] { background: var(--bg-canvas); color: var(--text); }
/* Crop's Reset is off until the frame moves, but looked ready beside Apply crop. */
.ie-btn-ghost:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }

.ie-btn-primary[b-8re36sj15c] {
    background: var(--accent);
    color: #fff;
}
.ie-btn-primary:hover:not(:disabled)[b-8re36sj15c] { background: var(--accent-dark); }
.ie-btn-primary:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }

/* ── Body: tool rail · tool panel · stage ── */
.ie-body[b-8re36sj15c] {
    display: grid;
    grid-template-columns: var(--ie-rail-width) var(--ie-panel-width) minmax(0, 1fr);
    /* The single row fills the shell and no more, so the panel and the
       stage scroll or shrink inside it instead of pushing Apply out of
       sight on short screens. */
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

/* ── Tool rail ── */
.ie-rail[b-8re36sj15c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    border-right: 1px solid var(--border-light);
    background: var(--surface);
    overflow-y: auto;
    min-height: 0;
}
.ie-rail-btn[b-8re36sj15c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 60px;
    padding: 8px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}
@media (hover: hover) {
    .ie-rail-btn:hover:not(:disabled)[b-8re36sj15c] { background: var(--ground); color: var(--text); }
}
.ie-rail-btn-active[b-8re36sj15c],
.ie-rail-btn-active:hover:not(:disabled)[b-8re36sj15c] { background: var(--pill); color: var(--accent); }
.ie-rail-btn:disabled[b-8re36sj15c] { opacity: 0.45; cursor: not-allowed; }

/* ── Tool panel ── */
.ie-panel[b-8re36sj15c] {
    border-right: 1px solid var(--border-light);
    background: var(--surface);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    min-width: 0;
    scrollbar-width: thin;
}

.ie-section[b-8re36sj15c] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.ie-section-head[b-8re36sj15c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ie-section-title[b-8re36sj15c] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
}
.ie-section-title svg[b-8re36sj15c] { color: var(--accent); }

.ie-section-note[b-8re36sj15c] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* Describe card: the main action, so it gets the only boxed treatment. */
.ie-describe[b-8re36sj15c] {
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.ie-desc-input[b-8re36sj15c] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-field);
    background: #ffffff;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-note);
    line-height: 1.5;
    min-height: 84px;
    max-height: 180px;
    resize: vertical;
    outline: none;
}
.ie-desc-input[b-8re36sj15c]::placeholder { color: var(--text-secondary); }
.ie-desc-input:focus[b-8re36sj15c] { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ie-desc-input:disabled[b-8re36sj15c] { cursor: not-allowed; opacity: 0.62; }

/* Product photo choice under the describe box: a 44px row each, wrapping on a phone. */
.ie-product-photo-option[b-8re36sj15c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.ie-product-photo-option input[type="checkbox"][b-8re36sj15c] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}
.ie-product-photo-option input[type="checkbox"]:focus-visible[b-8re36sj15c] { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The file input stays in the tab order but out of sight; the face is the button. */
.ie-product-photo-upload[b-8re36sj15c]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.ie-product-photo-upload[b-8re36sj15c] { position: relative; align-self: flex-start; }
/* The same face as the video window's sound file button. */
.ie-product-photo-face[b-8re36sj15c] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    color: var(--text);
    background: var(--bg-canvas);
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    font-weight: 600;
}
.ie-product-photo-upload:hover:not(:has(input:disabled)) .ie-product-photo-face[b-8re36sj15c] { border-color: var(--accent); }
.ie-product-photo-upload:focus-within .ie-product-photo-face[b-8re36sj15c] { outline: 2px solid var(--blue); outline-offset: 3px; }
.ie-product-photo-option:has(input:disabled)[b-8re36sj15c] { cursor: not-allowed; opacity: 0.62; }
.ie-product-photo-item[b-8re36sj15c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    font-size: var(--fs-xs);
}
.ie-product-photo-item > span[b-8re36sj15c] { min-width: 0; overflow-wrap: anywhere; }

.ie-scope[b-8re36sj15c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
}
.ie-scope-label[b-8re36sj15c] { color: var(--text-secondary); font-weight: 600; }
.ie-scope-value[b-8re36sj15c] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--pill);
    color: var(--accent);
    font-weight: 700;
}

.ie-link[b-8re36sj15c] {
    min-height: 28px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ie-link:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }

.ie-pick[b-8re36sj15c] { display: flex; flex-direction: column; gap: 6px; }
.ie-pick-label[b-8re36sj15c] { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.ie-pick-note[b-8re36sj15c] {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--text-secondary);
}

.ie-generate[b-8re36sj15c] {
    width: 100%;
    min-height: 44px;
    padding: 9px 17px;
    /* Transparent, so High Contrast, which drops the fill, still draws Apply as a button. */
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-note);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
}
.ie-generate:hover:not(:disabled)[b-8re36sj15c] { background: var(--accent-dark); }
.ie-generate:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }

.ie-error[b-8re36sj15c] {
    padding: 8px 12px;
    background: var(--tint-red);
    border: 1px solid var(--tint-red-line);
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--red-ink);
}

.ie-notice[b-8re36sj15c] {
    padding: 8px 12px;
    background: var(--tint-green);
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--green-ink);
}

/* Sprint 10 FE-10-5 — Smart Select chips (auto-derived from detection). */
.ie-smart-chips[b-8re36sj15c],
.ie-suggestion-chips[b-8re36sj15c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ie-smart-chip[b-8re36sj15c],
.ie-suggestion-chip[b-8re36sj15c] {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    background: #ffffff;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
@media (hover: hover) {
    .ie-smart-chip:hover:not(:disabled)[b-8re36sj15c],
    .ie-suggestion-chip:hover:not(:disabled)[b-8re36sj15c] {
        background: var(--pill);
        border-color: var(--accent);
        color: var(--accent);
    }
}
.ie-smart-chip-active[b-8re36sj15c] {
    background: var(--pill);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.ie-smart-chip:disabled[b-8re36sj15c],
.ie-suggestion-chip:disabled[b-8re36sj15c] { opacity: 0.45; cursor: not-allowed; }

/* Quick fixes (FE-9-8) as tiles that preview the fix on the photo itself.
   The filters only suggest the direction; the AI does the real edit. */
.ie-tiles[b-8re36sj15c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
}
.ie-tile[b-8re36sj15c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ie-tile-thumb[b-8re36sj15c] {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--ground);
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
    transition: box-shadow 0.12s, transform 0.12s;
}
.ie-tile-thumb img[b-8re36sj15c] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ie-tile-thumb[b-8re36sj15c]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ie-tile-label[b-8re36sj15c] {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}
/* Hover only where there is a hover: on a phone a tapped tile kept its highlight. */
@media (hover: hover) {
    .ie-tile:hover:not(:disabled) .ie-tile-thumb[b-8re36sj15c] { box-shadow: 0 0 0 2px var(--accent); }
    .ie-tile:hover:not(:disabled) .ie-tile-label[b-8re36sj15c] { color: var(--accent); }
}
.ie-tile:disabled[b-8re36sj15c] { cursor: not-allowed; opacity: 0.5; }

.ie-tile-brighter img[b-8re36sj15c] { filter: brightness(1.3) contrast(0.95) saturate(1.05); }
.ie-tile-more-vibrant img[b-8re36sj15c] { filter: saturate(1.85) contrast(1.08); }
.ie-tile-warmer-light img[b-8re36sj15c] { filter: saturate(1.2) brightness(1.04); }
.ie-tile-warmer-light[b-8re36sj15c]::after { background: rgba(255, 146, 43, 0.32); mix-blend-mode: soft-light; }
.ie-tile-cooler-light img[b-8re36sj15c] { filter: saturate(0.8) brightness(1.04); }
.ie-tile-cooler-light[b-8re36sj15c]::after { background: rgba(64, 132, 255, 0.4); mix-blend-mode: soft-light; }
.ie-tile-remove-bg[b-8re36sj15c] {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #dfe2e7 25%, transparent 25%),
        linear-gradient(-45deg, #dfe2e7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #dfe2e7 75%),
        linear-gradient(-45deg, transparent 75%, #dfe2e7 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.ie-tile-remove-bg img[b-8re36sj15c] {
    -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 54%, #000 62%, transparent 76%);
    mask-image: radial-gradient(ellipse 46% 50% at 50% 54%, #000 62%, transparent 76%);
}

/* Sprint 17 — what the understanding pass saw. */
.ie-manifest-scene[b-8re36sj15c] { padding-top: 16px; border-top: 1px solid var(--border-light); }
.ie-manifest-scene-meta[b-8re36sj15c] { color: var(--text-secondary); font-size: var(--fs-xs); }

/* ── Crop, Text and Logo panels ── */
.ie-prop-label[b-8re36sj15c] { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.ie-prop-hint[b-8re36sj15c] {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.ie-link-danger[b-8re36sj15c] { color: var(--red); }

.ie-action-row[b-8re36sj15c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.ie-action-row .ie-btn[b-8re36sj15c] { min-height: 44px; }

/* Crop shapes: a small drawing of each shape above its name. */
.ie-ratio-grid[b-8re36sj15c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ie-ratio[b-8re36sj15c] {
    display: grid;
    grid-template-rows: 26px auto auto;
    justify-items: center;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 10px 4px 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}
.ie-ratio-glyph[b-8re36sj15c] {
    display: block;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 3px;
    color: var(--text-secondary);
}
.ie-ratio-glyph-free[b-8re36sj15c] { border-style: dashed; }
.ie-ratio-label[b-8re36sj15c] {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text);
}
.ie-ratio-note[b-8re36sj15c] {
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
    white-space: nowrap;
}
@media (hover: hover) {
    .ie-ratio:hover:not(:disabled)[b-8re36sj15c] { border-color: var(--accent); }
}
.ie-ratio-active[b-8re36sj15c] {
    border-color: var(--accent);
    background: var(--pill);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.ie-ratio-active .ie-ratio-glyph[b-8re36sj15c],
.ie-ratio-active .ie-ratio-label[b-8re36sj15c] { color: var(--accent); }
.ie-ratio:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }

/* Text styles, each shown in its own size, like a design tool's text panel. */
.ie-text-presets[b-8re36sj15c] { display: flex; flex-direction: column; gap: 8px; }
.ie-text-preset[b-8re36sj15c] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
}
.ie-text-preset-heading[b-8re36sj15c] { font-size: 22px; font-weight: 800; }
.ie-text-preset-subheading[b-8re36sj15c] { font-size: 16px; font-weight: 700; }
.ie-text-preset-body[b-8re36sj15c] { font-size: 13px; font-weight: 500; }
@media (hover: hover) {
    .ie-text-preset:hover:not(:disabled)[b-8re36sj15c] { border-color: var(--accent); background: var(--pill); }
}
.ie-text-preset:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }

/* The picked layer's settings: a label column and a control column. */
.ie-layer-props[b-8re36sj15c] {
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.ie-text-input[b-8re36sj15c] { min-height: 64px; }
.ie-prop-row[b-8re36sj15c] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.ie-prop-row > .ie-prop-label[b-8re36sj15c] { line-height: 1.3; }
.ie-seg-fill[b-8re36sj15c] { display: flex; min-width: 0; }
.ie-seg-fill .ie-prop-pill[b-8re36sj15c] {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ie-seg .ie-prop-pill-icon[b-8re36sj15c] { padding: 0 10px; }
.ie-prop-slider-row[b-8re36sj15c] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ie-size-slider-fill[b-8re36sj15c] { flex: 1 1 auto; width: auto; min-width: 0; }
.ie-prop-value[b-8re36sj15c] {
    min-width: 42px;
    text-align: right;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ie-prop-swatches[b-8re36sj15c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ie-prop-swatch[b-8re36sj15c] {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid rgba(16, 24, 40, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.12s;
}
.ie-prop-swatch-active[b-8re36sj15c] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.ie-prop-swatch:disabled[b-8re36sj15c] { opacity: 0.45; cursor: not-allowed; }
/* Any colour: a colour wheel over the browser's own picker. */
.ie-prop-swatch-custom[b-8re36sj15c] {
    display: inline-block;
    overflow: hidden;
    background: conic-gradient(#ff4d4d, #ffd84d, #4dff88, #4dd2ff, #7a4dff, #ff4dd8, #ff4d4d);
}
.ie-prop-swatch-custom input[b-8re36sj15c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.ie-prop-swatch-custom:focus-within[b-8re36sj15c] { outline: 2px solid var(--blue); outline-offset: 3px; }
/* High Contrast: app.css keeps every colour swatch's colour (the inline --swatch). */

/* Logos on a see-through check, so a PNG's clear parts read as clear. */
.ie-logo-picks[b-8re36sj15c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ie-logo-pick[b-8re36sj15c] {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #eef0f3 25%, transparent 25%),
        linear-gradient(-45deg, #eef0f3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef0f3 75%),
        linear-gradient(-45deg, transparent 75%, #eef0f3 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ie-logo-pick img[b-8re36sj15c] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
@media (hover: hover) {
    .ie-logo-pick:hover:not(:disabled)[b-8re36sj15c] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
}
.ie-logo-pick:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }
.ie-logo-upload[b-8re36sj15c] {
    border-style: dashed;
    background: var(--surface);
    color: var(--accent);
}
.ie-logo-upload:focus-within[b-8re36sj15c] { outline: 2px solid var(--blue); outline-offset: 3px; }
.ie-logo-upload-disabled[b-8re36sj15c] { opacity: 0.5; pointer-events: none; }
/* The file input stays in the tab order but out of sight; the tile is its face. */
.ie-logo-upload[b-8re36sj15c]  input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Nine spots for a logo, laid out like the photo. */
.ie-place-grid[b-8re36sj15c] {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 4px;
    width: max-content;
    padding: 5px;
    border-radius: var(--radius-sm);
    background: var(--ground);
}
.ie-place-spot[b-8re36sj15c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--surface);
    cursor: pointer;
}
.ie-place-spot span[b-8re36sj15c] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--line-strong);
}
@media (hover: hover) {
    .ie-place-spot:hover:not(:disabled) span[b-8re36sj15c] { background: var(--accent); }
}
.ie-place-spot:disabled[b-8re36sj15c] { opacity: 0.45; cursor: not-allowed; }

/* ── Stage ── */
.ie-workspace[b-8re36sj15c] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ie-stage);
}

/* The toolbar row. The toolbar is pinned left so the mode buttons never move
   when Brush adds its size controls; the hint takes the rest of the row. */
.ie-workspace-head[b-8re36sj15c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 14px 28px 0;
    flex-shrink: 0;
}

/* Floating toolbar for marking the part to change (FE-10-1). */
.ie-toolbar[b-8re36sj15c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ie-lift);
}

.ie-toolbar-divider[b-8re36sj15c] {
    width: 1px;
    align-self: stretch;
    margin: 6px 2px;
    background: var(--border-light);
}

.ie-seg[b-8re36sj15c] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    /* High Contrast drops the grey ground, so the edge says the options belong together. */
    border: 1px solid transparent;
    background: var(--ground);
    border-radius: var(--radius-sm);
}

.ie-pill[b-8re36sj15c],
.ie-seg .ie-prop-pill[b-8re36sj15c] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
    white-space: nowrap;
}
.ie-pill:hover:not(:disabled)[b-8re36sj15c],
.ie-seg .ie-prop-pill:hover:not(:disabled)[b-8re36sj15c] { color: var(--text); }
.ie-pill-active[b-8re36sj15c],
.ie-seg .ie-prop-pill-active[b-8re36sj15c] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.14), inset 0 0 0 1px rgba(11, 92, 202, 0.22);
}
.ie-pill:disabled[b-8re36sj15c],
.ie-pill-disabled[b-8re36sj15c],
.ie-seg .ie-prop-pill:disabled[b-8re36sj15c] { opacity: 0.45; cursor: not-allowed; }
/* Sprint 17 — "loading" reads as waiting for detection, not unavailable. */
.ie-pill-loading[b-8re36sj15c] { opacity: 0.85 !important; cursor: progress; color: var(--amber); animation: ie-pill-pulse-b-8re36sj15c 1.4s ease-in-out infinite; }
@keyframes ie-pill-pulse-b-8re36sj15c { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.ie-seg-compact .ie-prop-pill[b-8re36sj15c] { padding: 0 10px; font-size: var(--fs-xs); }

.ie-size[b-8re36sj15c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    min-height: 36px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-secondary);
}
.ie-size-slider[b-8re36sj15c] {
    -webkit-appearance: none;
    appearance: none;
    width: 96px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.ie-size-slider[b-8re36sj15c]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
}
.ie-size-slider[b-8re36sj15c]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
}
.ie-size-slider[b-8re36sj15c]::-moz-range-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
}
.ie-size-slider[b-8re36sj15c]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
}
.ie-size-slider:focus-visible[b-8re36sj15c] { outline: none; }
.ie-size-slider:focus-visible[b-8re36sj15c]::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(11, 92, 202, 0.35); }
.ie-size-slider:focus-visible[b-8re36sj15c]::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(11, 92, 202, 0.35); }
.ie-size-slider:disabled[b-8re36sj15c] { opacity: 0.5; cursor: not-allowed; }
/* A fixed box, so the toolbar does not shift as the dot grows. */
.ie-size-dot[b-8re36sj15c] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle closest-side,
        rgba(77, 157, 224, 0.9) calc(var(--dot, 12px) / 2),
        transparent calc(var(--dot, 12px) / 2 + 0.75px));
}

.ie-toolbar-actions[b-8re36sj15c] { display: inline-flex; gap: 2px; }
.ie-tool-action[b-8re36sj15c] {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ie-tool-action:hover:not(:disabled)[b-8re36sj15c] { background: var(--ground); color: var(--text); }
.ie-tool-action:disabled[b-8re36sj15c] { cursor: not-allowed; opacity: 0.42; }

.ie-mode-hint[b-8re36sj15c] {
    flex: 1 1 180px;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.4;
    /* --text-secondary is 4.45:1 on the grey stage; this is about 5.4:1. */
    color: #5d6069;
}

.ie-stage[b-8re36sj15c] {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 16px 28px 18px;
}

/* The overlays (brush canvas, SVGs) sit at inset 0 of .ie-canvas and letterbox
   to the photo's own ratio, so .ie-canvas must stay unpadded: the photo is
   centred in exactly the box the overlays cover. */
.ie-canvas[b-8re36sj15c] {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ie-canvas-img[b-8re36sj15c] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    background: var(--surface);
    box-shadow: var(--ie-page-shadow);
    pointer-events: none; /* the canvas overlay receives the strokes */
    transition: filter 0.3s;
}
.ie-canvas-busy .ie-canvas-img[b-8re36sj15c] { filter: saturate(0.55) brightness(0.92); }

.ie-drawing-canvas[b-8re36sj15c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: crosshair;
    touch-action: none;
    --mask-fill: rgba(77, 157, 224, 0.4);
    --mask-stroke: var(--blue-lt);
}

/* Sprint 10 — Click + Box modes hand input to overlay SVGs, so the brush
   canvas under them must not eat pointer events. The Razor inline style
   does that; this class hook changes the cursor. */
.ie-drawing-canvas-click[b-8re36sj15c],
.ie-drawing-canvas-box[b-8re36sj15c] { cursor: default; }

/* Sprint 10 FE-10-2/3 — bbox overlay for Click mode. */
.ie-bbox-overlay[b-8re36sj15c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}
.ie-bbox-overlay g[b-8re36sj15c] { cursor: pointer; }
.ie-bbox-overlay g rect[b-8re36sj15c] {
    fill: rgba(77, 157, 224, 0.0);
    stroke: rgba(77, 157, 224, 0.55);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    transition: fill 0.12s, stroke 0.12s;
    pointer-events: all;
}
.ie-bbox-overlay g.ie-bbox-hover rect[b-8re36sj15c] {
    fill: rgba(77, 157, 224, 0.18);
    stroke: var(--blue-lt);
}
.ie-bbox-overlay g.ie-bbox-selected rect[b-8re36sj15c] {
    /* Sprint 10 LBL (A3) — the canvas already holds the selection paint in
       the same blue, so only the stroke shows here or the two stack. */
    fill: transparent;
    stroke: var(--blue-lt);
    stroke-dasharray: none;
    stroke-width: 3;
}

/* Sprint 10 FE-10-4 — drag overlay for Box mode. */
.ie-box-overlay[b-8re36sj15c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}
.ie-box-drag-rect[b-8re36sj15c] {
    fill: rgba(77, 157, 224, 0.25);
    stroke: var(--blue-lt);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}
.ie-box-capture[b-8re36sj15c] {
    fill: transparent;
    pointer-events: all;
}

/* Sprint 10 FE-10-7 — what the marks cover. */
.ie-spatial-callout[b-8re36sj15c] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    background: rgba(26, 29, 32, 0.78);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    font-weight: 600;
    pointer-events: none;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ie-spatial-dot[b-8re36sj15c] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue-lt);
    flex-shrink: 0;
}
.ie-spatial-text[b-8re36sj15c] { overflow-wrap: anywhere; }

/* An edit in progress: a status pill over the photo. */
.ie-working[b-8re36sj15c] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 32px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: rgba(26, 29, 32, 0.84);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: var(--ie-lift);
    pointer-events: none;
}

.ie-spinner[b-8re36sj15c] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    animation: ie-spin-b-8re36sj15c 0.8s linear infinite;
}
@keyframes ie-spin-b-8re36sj15c { to { transform: rotate(360deg); } }

.ie-canvas-empty[b-8re36sj15c] {
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ie-canvas-empty p[b-8re36sj15c] { font-size: var(--fs-sm); margin: 0; }

/* ── Versions strip ── */
.ie-versions[b-8re36sj15c] {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 16px 14px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}
.ie-version[b-8re36sj15c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    flex: 0 0 auto;
}
.ie-version-thumb[b-8re36sj15c] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--surface);
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.12);
    transition: box-shadow 0.12s;
}
.ie-version-thumb img[b-8re36sj15c] { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-version-label[b-8re36sj15c] {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
@media (hover: hover) {
    .ie-version:hover:not(:disabled) .ie-version-thumb[b-8re36sj15c] { box-shadow: 0 0 0 2px var(--line-strong); }
}
.ie-version-active .ie-version-thumb[b-8re36sj15c],
.ie-version-active:hover:not(:disabled) .ie-version-thumb[b-8re36sj15c] { box-shadow: 0 0 0 2px var(--accent); }
.ie-version-active .ie-version-label[b-8re36sj15c] { color: var(--accent); }
.ie-version:disabled[b-8re36sj15c] { cursor: not-allowed; opacity: 0.55; }
.ie-version-pending[b-8re36sj15c] { cursor: default; }
.ie-version-pending .ie-version-thumb[b-8re36sj15c] { background: rgba(26, 29, 32, 0.78); }

/* The photo's own box. photo-compose.js keeps it exactly over the photo, so the crop frame and
   the layers are placed in percent of the photo. A size container, so text can be sized in
   cqh: a share of the photo's height, the same unit the finished photo is drawn in. */
.ie-photo-box[b-8re36sj15c] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    container-type: size;
}

/* Marks belong to the AI edit; the other tools hide them without clearing them. */
.ie-drawing-canvas-idle[b-8re36sj15c] { visibility: hidden; }

/* ── Crop frame ── */
.ie-crop-layer[b-8re36sj15c] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ie-crop-frame[b-8re36sj15c] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    /* Dims everything the crop cuts away; the layer's overflow keeps it on the photo. */
    box-shadow: 0 0 0 9999px rgba(16, 18, 22, 0.55);
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    outline: none;
}
/* Keeps the dimming shadow (the global focus ring's shadow replaced it, so the arrow keys
   moved a frame over an undimmed photo) and draws the ring inside, where the layer cannot clip it. */
.ie-crop-frame:focus-visible[b-8re36sj15c] {
    border-color: var(--blue-lt);
    outline: 2px solid var(--blue) !important;
    outline-offset: -5px !important;
    box-shadow: 0 0 0 9999px rgba(16, 18, 22, 0.55) !important;
}
.ie-crop-grid[b-8re36sj15c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.5) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.5) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.667% - 0.5px), rgba(255, 255, 255, 0.5) calc(66.667% - 0.5px), rgba(255, 255, 255, 0.5) calc(66.667% + 0.5px), transparent calc(66.667% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.5) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.5) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.667% - 0.5px), rgba(255, 255, 255, 0.5) calc(66.667% - 0.5px), rgba(255, 255, 255, 0.5) calc(66.667% + 0.5px), transparent calc(66.667% + 0.5px));
}
.ie-crop-handle[b-8re36sj15c] {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 4px solid #ffffff;
    pointer-events: auto;
    touch-action: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
/* A bigger target than the corner mark itself. */
.ie-crop-handle[b-8re36sj15c]::before {
    content: "";
    position: absolute;
    inset: -12px;
}
.ie-crop-handle-nw[b-8re36sj15c] { left: -2px; top: -2px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.ie-crop-handle-ne[b-8re36sj15c] { right: -2px; top: -2px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.ie-crop-handle-sw[b-8re36sj15c] { left: -2px; bottom: -2px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.ie-crop-handle-se[b-8re36sj15c] { right: -2px; bottom: -2px; border-left: 0; border-top: 0; cursor: nwse-resize; }

/* ── Text and logo layers ──
   The centre sits at left/top; --s is the size. Line height, padding and the label's rounding
   match the numbers photo-compose.js draws with, so the saved photo looks like the screen. */
.ie-layer[b-8re36sj15c] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    outline: none;
}
.ie-photo-box-live .ie-layer[b-8re36sj15c] { pointer-events: auto; cursor: move; }
.ie-layer-text[b-8re36sj15c] {
    font-size: calc(var(--s, 0.05) * 100cqh);
    line-height: 1.2;
    padding: 0.22em 0.5em;
    border-radius: 0.18em;
    white-space: nowrap;
}
.ie-layer-words[b-8re36sj15c] { white-space: pre; }
.ie-layer-fx-shadow[b-8re36sj15c] { text-shadow: 0 0.04em 0.15em rgba(0, 0, 0, 0.5); }
.ie-layer-fx-band[b-8re36sj15c] { background: var(--band, #111111); }
.ie-layer-logo[b-8re36sj15c] {
    width: calc(var(--s, 0.2) * 100%);
    line-height: 0;
}
.ie-layer-logo img[b-8re36sj15c] {
    display: block;
    width: 100%;
    height: auto;
    opacity: var(--o, 1);
    pointer-events: none;
}
@media (hover: hover) {
    .ie-photo-box-live .ie-layer:hover[b-8re36sj15c] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(11, 92, 202, 0.55); }
}
.ie-layer-selected[b-8re36sj15c],
.ie-photo-box-live .ie-layer-selected:hover[b-8re36sj15c] { box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--accent); }
.ie-layer:focus-visible[b-8re36sj15c] { box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--blue); }
.ie-layer-handle[b-8re36sj15c] {
    position: absolute;
    right: -9px;
    bottom: -9px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: nwse-resize;
}
.ie-layer-handle[b-8re36sj15c]::before {
    content: "";
    position: absolute;
    inset: -10px;
}

/* Sprint 11 FE-11-9 — Discard confirm dialog. Mounts inside the editor
   shell so it doesn't leak modal styles into the parent layout. */
.ie-dialog-host[b-8re36sj15c]  .ie-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 16px;
}
.ie-dialog-host[b-8re36sj15c]  .ie-dialog {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    width: min(380px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.ie-dialog-title[b-8re36sj15c] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.ie-dialog-body[b-8re36sj15c] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 18px;
}
.ie-dialog-actions[b-8re36sj15c] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.ie-btn-danger[b-8re36sj15c] {
    background: var(--red);
    color: #fff;
    border-color: transparent;
}
.ie-btn-danger:hover:not(:disabled)[b-8re36sj15c] { background: var(--red-hover); }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ie-shell[b-8re36sj15c] { --ie-panel-width: 300px; --ie-rail-width: 64px; }
    .ie-stage[b-8re36sj15c] { padding: 14px 18px 16px; }
    .ie-workspace-head[b-8re36sj15c] { padding: 14px 18px 0; }
    .ie-size-label[b-8re36sj15c],
    .ie-size-dot[b-8re36sj15c] { display: none; }
    .ie-size-slider[b-8re36sj15c] { width: 72px; }
    .ie-pill[b-8re36sj15c] { padding: 0 10px; }
}

/* Below 900px the panel and the stage share too little width, so they stack. */
@media (max-width: 900px) {
    .ie-topbar[b-8re36sj15c] {
        padding: 8px 10px;
        gap: 8px;
    }

    .ie-btn[b-8re36sj15c] { padding: 8px 12px; }

    /* The toolbar becomes two rows: modes with undo and redo, then the brush settings. */
    .ie-toolbar[b-8re36sj15c] { width: 100%; }
    .ie-toolbar-divider[b-8re36sj15c] { display: none; }
    .ie-edit-mode-controls[b-8re36sj15c] { order: 1; flex: 1 1 auto; }
    .ie-edit-mode-controls .ie-pill[b-8re36sj15c] { flex: 1 1 0; padding: 0 8px; }
    .ie-toolbar-actions[b-8re36sj15c] { order: 2; margin-left: auto; }
    .ie-size[b-8re36sj15c] { order: 3; flex: 1 1 120px; padding: 0 4px; }
    .ie-size-slider[b-8re36sj15c] { flex: 1 1 auto; width: auto; min-width: 72px; }
    /* The brush settings have a row of their own here, so the slider gets its name and its
       size dot back rather than standing as a bare line. */
    .ie-size-label[b-8re36sj15c],
    .ie-size-dot[b-8re36sj15c] { display: block; }
    .ie-seg-compact[b-8re36sj15c] { order: 4; }
    .ie-mode-hint[b-8re36sj15c] { flex-basis: 100%; }

    /* The panel is full width here, so tiles keep a tile's size instead of stretching. */
    .ie-tiles[b-8re36sj15c] { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

    /* One scrolling column: the photo and its tools first, then the AI panel. */
    .ie-body[b-8re36sj15c] {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .ie-workspace[b-8re36sj15c] {
        order: -1;
        flex: 0 0 auto;
    }

    /* Text and logos are placed by eye, so while those tools are open the photo stays in view
       above the panel as it scrolls, a little shorter to leave the panel room. */
    .ie-shell-tool-text .ie-workspace[b-8re36sj15c],
    .ie-shell-tool-logo .ie-workspace[b-8re36sj15c] {
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: 0 8px 14px -12px rgba(16, 24, 40, 0.45);
    }
    .ie-shell-tool-text .ie-stage[b-8re36sj15c],
    .ie-shell-tool-logo .ie-stage[b-8re36sj15c] { height: clamp(200px, 38dvh, 380px); }

    /* The rail turns into a row of tabs between the photo and its panel. */
    .ie-rail[b-8re36sj15c] {
        flex-direction: row;
        flex: 0 0 auto;
        padding: 6px 8px;
        border-right: 0;
        border-top: 1px solid var(--border-light);
        overflow: visible;
    }
    .ie-rail-btn[b-8re36sj15c] {
        flex: 1 1 0;
        min-height: 52px;
        font-size: var(--fs-xs);
    }

    .ie-workspace-head[b-8re36sj15c] { padding: 10px 10px 0; }

    .ie-stage[b-8re36sj15c] {
        flex: none;
        height: clamp(240px, 46dvh, 440px);
        padding: 12px;
    }

    .ie-panel[b-8re36sj15c] {
        border-right: 0;
        border-top: 1px solid var(--border-light);
        overflow: visible;
        flex: 0 0 auto;
        padding: 14px 12px 20px;
        gap: 22px;
    }

    .ie-desc-input[b-8re36sj15c] {
        font-size: var(--fs-md);
        resize: none;
    }
}

/* Coarse pointers get the full 44px targets. */
@media (pointer: coarse) {
    .ie-btn[b-8re36sj15c],
    .ie-pill[b-8re36sj15c],
    .ie-seg .ie-prop-pill[b-8re36sj15c],
    .ie-size[b-8re36sj15c],
    .ie-size-slider[b-8re36sj15c] { min-height: 44px; }
    .ie-tool-action[b-8re36sj15c] { width: 44px; height: 44px; }
    .ie-smart-chip[b-8re36sj15c],
    .ie-suggestion-chip[b-8re36sj15c] { min-height: 44px; }
    .ie-link[b-8re36sj15c] { min-height: 44px; }
}

@media (max-width: 480px) {
    /* The panel's own Clear sits next to what is marked, so a phone keeps undo and redo only. */
    .ie-tool-clear[b-8re36sj15c] { display: none; }
}

@media (max-width: 400px) {
    .ie-title[b-8re36sj15c] { font-size: var(--fs-note); }
    .ie-pending-pill[b-8re36sj15c] { display: none; }
    /* The size dot would push Paint and Erase onto a row of their own; the label stays. */
    .ie-size-dot[b-8re36sj15c] { display: none; }

    /* Equal side columns were narrower than "Use this photo" at 320, which ran over the title
       ("Edit phot"). The buttons take their own width and the title the rest. */
    .ie-topbar[b-8re36sj15c] { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ie-title[b-8re36sj15c] { overflow: hidden; text-overflow: ellipsis; }
}

.ie-shell button:focus-visible[b-8re36sj15c],
.ie-shell a:focus-visible[b-8re36sj15c],
.ie-shell textarea:focus-visible[b-8re36sj15c],
.ie-shell input:focus-visible[b-8re36sj15c],
.ie-shell select:focus-visible[b-8re36sj15c] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.ie-prop-group[b-8re36sj15c],
.ie-smart-chip[b-8re36sj15c],
.ie-suggestion-chip[b-8re36sj15c],
.ie-error[b-8re36sj15c],
.ie-notice[b-8re36sj15c] { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .ie-shell *[b-8re36sj15c], .ie-shell *[b-8re36sj15c]::before, .ie-shell *[b-8re36sj15c]::after {
        animation: none !important;
        transition: none !important;
    }
    /* Still turning, slowly: a spinner standing still reads as stuck. */
    .ie-shell .ie-spinner[b-8re36sj15c] { animation: ie-spin-b-8re36sj15c 1.6s linear infinite !important; }
}
/* /Components/Studio/ImageLibraryModal.razor.rz.scp.css */
/* ═══ Image Library Modal — scoped styles ═══ */

.ilm-backdrop[b-bw4v6rxsq7] {
    position: fixed; inset: 0; z-index: calc(var(--modal-z, 2000) + 20);
    background: var(--modal-overlay, rgba(15,23,42,0.52)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    animation: ilmFadeIn-b-bw4v6rxsq7 0.2s ease;
    outline: none;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: auto;
}

/* Focused on open on a phone, so the keyboard stays shut; it is not a control to ring. */
.ilm-modal:focus[b-bw4v6rxsq7] {
    outline: none;
}

.ilm-modal[b-bw4v6rxsq7] {
    /* A modal panel is a card, and every card in the product is 12px. */
    background: #fff; border-radius: var(--radius);
    width: min(94vw, 960px); max-width: 960px; max-height: calc(100dvh - 32px);
    height: min(760px, calc(100dvh - 32px));
    display: flex; flex-direction: column;
    border: 1px solid var(--modal-border, rgba(255,255,255,0.72));
    box-shadow: var(--modal-shadow, 0 20px 60px rgba(0,0,0,0.18));
    animation: ilmSlideUp-b-bw4v6rxsq7 0.25s cubic-bezier(0.16,1,0.3,1);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.ilm-modal.drag-over[b-bw4v6rxsq7] {
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), var(--focus-ring);
}

/* ── Header ── */
.ilm-header[b-bw4v6rxsq7] {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 24px 14px; flex-shrink: 0;
    gap: 16px;
}
.ilm-header > div[b-bw4v6rxsq7] { min-width: 0; overflow-wrap: anywhere; }
.ilm-title[b-bw4v6rxsq7] {
    font-size: var(--fs-heading-sm); font-weight: 700; color: var(--text);
    margin: 0 0 2px; letter-spacing: 0;
}
.ilm-subtitle[b-bw4v6rxsq7] { font-size: var(--fs-xs); color: var(--text-secondary); }
/* The Studio's close button, as on its other dialogs. A 14px hairline cross on a pale tint read
   as a disabled control beside them. */
.ilm-close[b-bw4v6rxsq7] {
    width: 44px; height: 44px; border-radius: var(--radius-control); flex: 0 0 44px;
    background: var(--surface); border: 1px solid var(--border-light); cursor: pointer;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.ilm-close:hover[b-bw4v6rxsq7] { background: var(--ground); }
.ilm-close svg[b-bw4v6rxsq7] {
    width: 18px; height: 18px; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; fill: none;
}

/* ── Toolbar ── */
.ilm-toolbar[b-bw4v6rxsq7] {
    padding: 0 24px 12px; flex-shrink: 0;
}
.ilm-search[b-bw4v6rxsq7] {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-canvas); border-radius: var(--radius-control); padding: 0 12px;
    /* A search box is a field you type into, so it gets a real boundary the way
       landing's .hero-ask shell does, not a transparent one. */
    border: 1.5px solid var(--line-field); transition: border-color 0.15s, background 0.15s;
}
.ilm-search:focus-within[b-bw4v6rxsq7] { border-color: var(--accent); background: #fff; }
.ilm-search .ilm-search-input:focus[b-bw4v6rxsq7] { outline: none; box-shadow: none; }
.ilm-search:focus-within[b-bw4v6rxsq7] { outline: 2px solid var(--blue); outline-offset: 3px; }
/* The box rings for the field inside it. app.css's keyboard ring is !important, and on the field
   too it drew a second box inside the first, cutting the clear button off. */
.ilm-search .ilm-search-input:focus-visible[b-bw4v6rxsq7] { outline: none !important; box-shadow: none !important; }
.ilm-search-icon[b-bw4v6rxsq7] {
    width: 14px; height: 14px; stroke: var(--text-secondary); flex-shrink: 0;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ilm-search-input[b-bw4v6rxsq7] {
    min-width: 0; min-height: 44px;
    flex: 1; border: none; background: none; outline: none;
    font-size: var(--fs-sm); padding: 10px 0; font-family: inherit; color: var(--text);
}
.ilm-search-input[b-bw4v6rxsq7]::placeholder { color: var(--text-secondary); }
.ilm-search-clear[b-bw4v6rxsq7] {
    min-width: 44px; min-height: 44px;
    background: none; border: none; cursor: pointer; padding: 4px;
    display: flex; align-items: center; justify-content: center;
}
.ilm-search-clear svg[b-bw4v6rxsq7] {
    width: 12px; height: 12px; stroke: var(--text-secondary);
    stroke-width: 2; stroke-linecap: round; fill: none;
}

/* ── Body (rail + grid) ── */
.ilm-body[b-bw4v6rxsq7] {
    flex: 1; display: flex; min-height: 0;
    border-top: 1px solid var(--bg-pill);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ── Rail ── */
.ilm-rail[b-bw4v6rxsq7] {
    width: 180px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 10px; border-right: 1px solid var(--bg-pill);
    background: var(--bg-canvas);
}
.ilm-rail-item[b-bw4v6rxsq7] {
    min-height: 44px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border: none; background: none;
    font-size: var(--fs-xs); font-weight: 600; color: var(--text);
    cursor: pointer; font-family: inherit;
    border-radius: var(--radius-control);
    transition: background 0.12s, color 0.12s;
    text-align: left;
}
.ilm-rail-item:hover[b-bw4v6rxsq7] { background: var(--bg-pill); }
.ilm-rail-item.active[b-bw4v6rxsq7] { background: rgba(77,157,224,0.12); color: var(--accent); }
.ilm-rail-label[b-bw4v6rxsq7] { flex: 1; }
.ilm-rail-count[b-bw4v6rxsq7] {
    /* The unselected count sits on a 5% wash over the grey ground, where
       --text-secondary measured 4.25:1, under the 4.5:1 this 12px number needs.
       The selected one is white on --accent at 6.18:1 and is left alone. */
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
    background: rgba(0,0,0,0.05); border-radius: var(--radius-sm); padding: 1px 6px;
    min-width: 18px; text-align: center;
}
.ilm-rail-item.active .ilm-rail-count[b-bw4v6rxsq7] { background: var(--accent); color: #fff; }
.ilm-rail-spacer[b-bw4v6rxsq7] { flex: 1; min-height: 8px; }
.ilm-rail-upload[b-bw4v6rxsq7] {
    min-height: 44px;
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-control);
    background: #fff; border: 1px dashed var(--line-strong);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text);
    cursor: pointer; font-family: inherit;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ilm-rail-upload:hover:not(.is-busy)[b-bw4v6rxsq7] { border-color: var(--accent); color: var(--accent); }
.ilm-rail-upload.is-busy[b-bw4v6rxsq7] { cursor: wait; opacity: 0.7; }
.ilm-rail-upload svg[b-bw4v6rxsq7] {
    width: 14px; height: 14px; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
/* Visually hidden, still focusable — label click reaches the inner input so the
   file picker opens without any JS. Works across browsers. */
[b-bw4v6rxsq7] .ilm-file-input {
    position: absolute; inset: 0;
    opacity: 0; width: 100%; height: 100%;
    cursor: pointer;
}
.ilm-rail-upload.is-busy[b-bw4v6rxsq7]  .ilm-file-input { pointer-events: none; }

/* ── Sprint 16 FE-16-5 (§10c) — URL tab ── */
.ilm-rail-add-url[b-bw4v6rxsq7] {
    min-height: 44px;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-control);
    background: #fff; border: 1px dashed var(--line-strong);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text);
    cursor: pointer; font-family: inherit;
    transition: border-color 0.12s, color 0.12s;
}
.ilm-rail-add-url:hover[b-bw4v6rxsq7] { border-color: var(--accent); color: var(--accent); }
.ilm-rail-add-url svg[b-bw4v6rxsq7] {
    width: 14px; height: 14px; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ilm-rail-url[b-bw4v6rxsq7] {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px; border-radius: var(--radius-sm);
    background: var(--bg-canvas); border: 1px solid var(--line-strong);
}

.ilm-rail-url-input[b-bw4v6rxsq7]{
    min-width: 0; min-height: 44px;
    border: 1.5px solid var(--line-field); border-radius: var(--radius-control);
    padding: 6px 8px; font-size: var(--fs-xs); font-family: inherit;
}
.ilm-rail-url-input:focus[b-bw4v6rxsq7] { outline: none; border-color: var(--accent); }
.ilm-rail-url-actions[b-bw4v6rxsq7] { display: flex; gap: 6px; }
.ilm-rail-url-add[b-bw4v6rxsq7], .ilm-rail-url-cancel[b-bw4v6rxsq7] {
    min-height: 44px;
    flex: 1; padding: 6px 8px; border-radius: var(--radius-control);
    font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
    border: 1px solid var(--line-strong); background: #fff;
}
.ilm-rail-url-add[b-bw4v6rxsq7] {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.ilm-rail-url-add:disabled[b-bw4v6rxsq7] {
    background: var(--line-strong); border-color: var(--line-strong); cursor: not-allowed;
}
.ilm-rail-url-cancel:hover[b-bw4v6rxsq7] { border-color: var(--text); }

/* ── Grid wrap ── */
.ilm-grid-wrap[b-bw4v6rxsq7] {
    flex: 1; position: relative;
    overflow-y: auto; padding: 16px 20px;
    min-height: 0;
    min-width: 0;
    transition: background 0.15s;
}
.ilm-grid-wrap.drag-over[b-bw4v6rxsq7] { background: rgba(77,157,224,0.06); }

.ilm-grid[b-bw4v6rxsq7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* ── Thumbnail ── */
.ilm-thumb[b-bw4v6rxsq7] {
    position: relative; border-radius: var(--radius-xs); overflow: hidden;
    aspect-ratio: 1; cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    background: var(--bg-pill);
}
.ilm-thumb:hover[b-bw4v6rxsq7] { transform: scale(1.02); }
.ilm-thumb.selected[b-bw4v6rxsq7] { border-color: var(--accent); }
.ilm-thumb:focus-visible[b-bw4v6rxsq7] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.ilm-load-more[b-bw4v6rxsq7] {
    display: block;
    margin: 16px auto 4px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.ilm-load-more:hover:not([aria-disabled="true"])[b-bw4v6rxsq7] { background: var(--bg-canvas); }
.ilm-load-more:focus-visible[b-bw4v6rxsq7] { outline: 2px solid var(--blue); outline-offset: 3px; }
.ilm-load-more:is(:disabled, [aria-disabled="true"])[b-bw4v6rxsq7] { cursor: default; color: var(--text-secondary); }

/* Load failure: a full-panel state when nothing loaded, an inline notice above the grid when
   only part of the library failed. Same retry action in both. */
.ilm-notice[b-bw4v6rxsq7] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--tint-red-line);
    border-radius: var(--radius-xs);
    background: var(--tint-red);
    color: var(--red-ink);
    font-size: var(--fs-sm); line-height: 1.5;
}
.ilm-notice span[b-bw4v6rxsq7] { flex: 1 1 200px; min-width: 0; }
.ilm-retry[b-bw4v6rxsq7] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
.ilm-retry:hover[b-bw4v6rxsq7] { background: var(--bg-canvas); }
.ilm-retry:focus-visible[b-bw4v6rxsq7] { outline: 2px solid var(--blue); outline-offset: 3px; }
.ilm-state[role="alert"][b-bw4v6rxsq7] { color: var(--text); text-align: center; padding: 0 16px; }
.ilm-state[role="alert"] .ilm-empty-icon[b-bw4v6rxsq7] { stroke: var(--red); }
.ilm-thumb img[b-bw4v6rxsq7] {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Check overlay */
.ilm-check[b-bw4v6rxsq7] {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: 2px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.15s;
    z-index: 2;
}
.ilm-thumb:hover .ilm-check[b-bw4v6rxsq7] { opacity: 1; }
.ilm-check.visible[b-bw4v6rxsq7] {
    opacity: 1; background: var(--accent); border-color: var(--accent);
}
.ilm-check svg[b-bw4v6rxsq7] {
    width: 14px; height: 14px; stroke: #fff;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none;
}

/* Category badge */
.ilm-badge[b-bw4v6rxsq7] {
    position: absolute; bottom: 8px; left: 8px;
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0; padding: 3px 8px; border-radius: var(--radius-xs);
    background: rgba(0,0,0,0.6); color: #fff;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}

/* In-tile metadata overlay — fades in on hover from the bottom, never clips. */
.ilm-overlay[b-bw4v6rxsq7] {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 10px 8px;
    /* Dark under all of the text: the fade reached the first line of the description, which
       was about 2.7:1 over a light photo. The padding above the text still fades in. */
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.7) calc(100% - 10px),
        rgba(0,0,0,0) 100%);
    color: #fff;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
    display: flex; flex-direction: column; gap: 6px;
}
.ilm-thumb:hover .ilm-overlay[b-bw4v6rxsq7] { opacity: 1; transform: translateY(0); }
.ilm-overlay-desc[b-bw4v6rxsq7] {
    margin: 0; font-size: var(--fs-xs); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ilm-overlay-meta[b-bw4v6rxsq7] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ilm-overlay-colors[b-bw4v6rxsq7] { display: flex; gap: 3px; flex-shrink: 0; }
.ilm-swatch[b-bw4v6rxsq7] {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.3);
}
.ilm-overlay-source[b-bw4v6rxsq7] {
    font-size: var(--fs-xs); color: rgba(255,255,255,0.85);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}

/* ── Empty / Loading ── */
.ilm-state[b-bw4v6rxsq7] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px;
    height: 100%; min-height: 240px;
    color: var(--text-secondary); font-size: var(--fs-sm);
}
.ilm-state-hint[b-bw4v6rxsq7] { font-size: var(--fs-xs); color: var(--text-secondary); }
.ilm-empty-icon[b-bw4v6rxsq7] {
    width: 36px; height: 36px; stroke: var(--line-strong);
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ilm-spinner[b-bw4v6rxsq7] {
    width: 24px; height: 24px; border: 3px solid var(--line);
    border-top-color: var(--accent); border-radius: 50%;
    animation: ilmSpin-b-bw4v6rxsq7 0.6s linear infinite;
}

/* ── Drop overlay ── */
.ilm-drop-overlay[b-bw4v6rxsq7] {
    position: absolute; inset: 12px; border-radius: var(--radius);
    border: 2px dashed var(--accent); background: rgba(77,157,224,0.08);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; pointer-events: none;
    color: var(--accent); font-size: var(--fs-note); font-weight: 600;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.ilm-drop-overlay svg[b-bw4v6rxsq7] {
    width: 32px; height: 32px; stroke: var(--accent);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}

/* ── Error toast ── */
.ilm-toast[b-bw4v6rxsq7] {
    position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--radius-xs);
    background: var(--ground); border: 1px solid var(--amber);
    color: var(--amber); font-size: var(--fs-xs); font-weight: 500;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    animation: ilmToastIn-b-bw4v6rxsq7 0.2s ease;
    max-width: 80%;
}
.ilm-toast svg[b-bw4v6rxsq7] {
    width: 14px; height: 14px; stroke: var(--amber);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
    flex-shrink: 0;
}
.ilm-toast-close[b-bw4v6rxsq7] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: -8px -8px -8px 0;
    border: 0; border-radius: var(--radius-xs);
    background: transparent; cursor: pointer; flex-shrink: 0;
}
.ilm-toast-close:hover[b-bw4v6rxsq7] { background: rgba(0, 0, 0, 0.05); }
.ilm-toast-close:focus-visible[b-bw4v6rxsq7] { outline: 2px solid var(--blue); outline-offset: 0; }

/* ── Selected tray ── */
.ilm-tray[b-bw4v6rxsq7] {
    position: relative;
    z-index: 2;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px; border-top: 1px solid var(--bg-pill);
    background: var(--bg-canvas); flex-shrink: 0;
    overflow: hidden;
}
.ilm-tray-label[b-bw4v6rxsq7] {
    font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0;
    flex-shrink: 0;
}
.ilm-tray-items[b-bw4v6rxsq7] {
    display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto;
    scrollbar-width: thin;
}
.ilm-tray-thumb[b-bw4v6rxsq7] {
    position: relative; width: 44px; height: 44px;
    border-radius: var(--radius-xs); overflow: hidden; flex-shrink: 0;
    cursor: pointer; border: 2px solid var(--accent);
    transition: transform 0.15s;
    padding: 0;
    background: transparent;
    font: inherit;
}
.ilm-tray-thumb:hover[b-bw4v6rxsq7] { transform: scale(1.05); }
.ilm-tray-thumb:focus-visible[b-bw4v6rxsq7] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}
.ilm-tray-thumb img[b-bw4v6rxsq7] {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ilm-tray-x[b-bw4v6rxsq7] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); opacity: 0;
    transition: opacity 0.15s;
}
.ilm-tray-thumb:hover .ilm-tray-x[b-bw4v6rxsq7],
.ilm-tray-thumb:focus-visible .ilm-tray-x[b-bw4v6rxsq7] { opacity: 1; }
.ilm-tray-x svg[b-bw4v6rxsq7] {
    width: 14px; height: 14px; stroke: #fff;
    stroke-width: 2.5; stroke-linecap: round; fill: none;
}
/* A phone never hovers, so it never learned a tap takes the picture out: a small corner cross
   says so without darkening every picture in the tray. After the base rule, or its 14px icon
   overflowed the 16px circle. */
@media (hover: none) {
    .ilm-tray-x[b-bw4v6rxsq7] {
        inset: 2px 2px auto auto; width: 16px; height: 16px;
        border-radius: 50%; opacity: 1;
    }
    .ilm-tray-x svg[b-bw4v6rxsq7] { width: 10px; height: 10px; }
    /* The empty circle says the grid takes several; it only showed on hover. A picker that
       takes one picture has nothing to tick, so it keeps the circle for the one chosen. */
    .ilm-multi .ilm-check[b-bw4v6rxsq7] { opacity: 1; }
    /* A picture's description, colours and source page showed only on hover. A tap selects
       the tile, so the one picked shows them. */
    .ilm-thumb.selected .ilm-overlay[b-bw4v6rxsq7] { opacity: 1; transform: none; }
}
.ilm-tray-clear[b-bw4v6rxsq7] {
    min-height: 44px;
    flex: 0 0 auto;
    background: #fff; border: 1px solid var(--line); cursor: pointer;
    font-size: var(--fs-xs); font-weight: 700; color: var(--text);
    padding: 7px 12px; border-radius: var(--radius-control);
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ilm-tray-clear:hover[b-bw4v6rxsq7] { background: var(--bg-pill); border-color: var(--line-strong); color: var(--text); }

/* ── Footer ── */
.ilm-footer[b-bw4v6rxsq7] {
    gap: 16px;
    position: relative;
    z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-top: 1px solid var(--bg-pill);
    background: #fff; flex-shrink: 0;
}
.ilm-footer-hint[b-bw4v6rxsq7] {
    font-size: var(--fs-xs); color: var(--text-secondary);
}
.ilm-footer-actions[b-bw4v6rxsq7] { display: flex; gap: 8px; }

.ilm-btn-cancel[b-bw4v6rxsq7] {
    min-height: 44px;
    padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-control);
    background: #fff; color: var(--text); font-size: var(--fs-xs); font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.ilm-btn-cancel:hover[b-bw4v6rxsq7] { background: var(--bg-canvas); }

.ilm-btn-confirm[b-bw4v6rxsq7] {
    min-height: 44px;
    padding: 8px 20px; border: none; border-radius: var(--radius-control);
    background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 700;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ilm-btn-confirm:hover[b-bw4v6rxsq7] { background: var(--accent-dark); }
.ilm-btn-confirm.secondary[b-bw4v6rxsq7] {
    background: var(--bg-pill); color: var(--text);
}
.ilm-btn-confirm.secondary:hover[b-bw4v6rxsq7] { background: var(--line); }

/* ── Animations ── */
@keyframes ilmFadeIn-b-bw4v6rxsq7 { from { opacity: 0; } to { opacity: 1; } }
@keyframes ilmSlideUp-b-bw4v6rxsq7 {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ilmSpin-b-bw4v6rxsq7 { to { transform: rotate(360deg); } }
@keyframes ilmToastIn-b-bw4v6rxsq7 {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .ilm-backdrop[b-bw4v6rxsq7] {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .ilm-modal[b-bw4v6rxsq7] {
        /* Still inset by the backdrop's 8px padding, so it stays a floating
           card and keeps the card corner rather than going edge to edge. */
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        width: 100%;
    }

    .ilm-header[b-bw4v6rxsq7] {
        padding: 16px 16px 12px;
    }

    .ilm-toolbar[b-bw4v6rxsq7] {
        padding: 0 16px 10px;
    }

    .ilm-body[b-bw4v6rxsq7] {
        flex-direction: column;
    }

    .ilm-rail[b-bw4v6rxsq7] {
        align-items: center;
        border-bottom: 1px solid var(--bg-pill);
        border-right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        flex-shrink: 0;
        gap: 6px;
        overflow-x: visible;
        padding: 8px 12px;
        width: auto;
    }

    .ilm-rail-item[b-bw4v6rxsq7],
    .ilm-rail-add-url[b-bw4v6rxsq7],
    .ilm-rail-upload[b-bw4v6rxsq7] {
        flex: 0 0 auto;
        gap: 6px;
        min-height: 44px;
        padding-inline: 8px;
        white-space: nowrap;
    }

    .ilm-rail-url[b-bw4v6rxsq7] {
        flex: 1 0 100%;
    }

    .ilm-rail-spacer[b-bw4v6rxsq7] {
        display: none;
    }

    .ilm-grid-wrap[b-bw4v6rxsq7] {
        padding: 12px;
    }

    .ilm-grid[b-bw4v6rxsq7] {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ilm-tray[b-bw4v6rxsq7] {
        gap: 8px;
        padding: 8px 12px;
    }

    .ilm-footer[b-bw4v6rxsq7] {
        justify-content: flex-end;
        padding: 10px 12px;
    }

    .ilm-footer-actions[b-bw4v6rxsq7] { width: 100%; }
    .ilm-btn-cancel[b-bw4v6rxsq7] { padding-inline: 12px; }
    .ilm-btn-confirm[b-bw4v6rxsq7] { flex: 1; padding-inline: 12px; }
    .ilm-search-input[b-bw4v6rxsq7], .ilm-rail-url-input[b-bw4v6rxsq7] { font-size: var(--fs-md); }

    .ilm-footer-hint[b-bw4v6rxsq7] {
        display: none;
    }
}

.ilm-modal button:focus-visible[b-bw4v6rxsq7], .ilm-rail-upload:focus-within[b-bw4v6rxsq7] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}
.ilm-thumb:focus-visible .ilm-overlay[b-bw4v6rxsq7] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ilm-backdrop[b-bw4v6rxsq7], .ilm-modal[b-bw4v6rxsq7], .ilm-toast[b-bw4v6rxsq7] { animation: none; }
    .ilm-thumb[b-bw4v6rxsq7], .ilm-tray-thumb[b-bw4v6rxsq7], .ilm-overlay[b-bw4v6rxsq7] { transition: none; }
    .ilm-thumb:hover[b-bw4v6rxsq7], .ilm-tray-thumb:hover[b-bw4v6rxsq7] { transform: none; }
}
/* /Components/Studio/ProductPhotoControls.razor.rz.scp.css */
.product-photo-controls[b-wna3vb9f03] { display: grid; gap: 8px; margin-block: 12px; }
.product-photo-controls > label[b-wna3vb9f03] { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
.product-photo-controls input[b-wna3vb9f03] { accent-color: var(--accent); }
.fs-modal-note[b-wna3vb9f03] { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 8px; }
.fs-secondary-button[b-wna3vb9f03] {
    justify-self: start;
    min-height: 44px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    background: var(--bg-surface, #fff);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 8px 14px;
}
.fs-secondary-button:hover:not(:disabled)[b-wna3vb9f03] { border-color: var(--accent); }
.fs-secondary-button:focus-visible[b-wna3vb9f03], input:focus-visible[b-wna3vb9f03] { outline: 2px solid var(--accent); outline-offset: 3px; }
.fs-secondary-button:disabled[b-wna3vb9f03] { cursor: default; opacity: .5; }
/* /Components/Studio/SimpleCreateModal.razor.rz.scp.css */
/* ═══ Simple Create — matches Image Studio chat design ═══ */

/* Root */
.sc-root[b-x7j1uwq9vy] {
    position: fixed; inset: 0; background: var(--modal-overlay, rgba(15,23,42,0.52));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex;
    align-items: center; justify-content: center; z-index: var(--modal-z, 2000);
    overflow: hidden;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.sc-frame[b-x7j1uwq9vy] {
    background: var(--surface); border-radius: var(--radius);
    width: min(1360px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
    height: min(94dvh, 920px); max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column;
    border: 1px solid var(--modal-border, rgba(255,255,255,0.72));
    box-shadow: var(--modal-shadow, 0 20px 60px rgba(0,0,0,0.12));
    overflow: hidden;
}
.sc-frame:focus[b-x7j1uwq9vy] { outline: none; }
/* A step heading takes focus as the step opens, for screen readers; no ring around it. */
.sc-frame h2[tabindex="-1"]:focus[b-x7j1uwq9vy] { outline: none; }

/* Header */
.sc-header[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sc-header-left[b-x7j1uwq9vy] { display: flex; align-items: center; gap: 10px; }
.sc-badge[b-x7j1uwq9vy] {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: var(--blue);
    color: #fff; font-size: var(--fs-note); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--glow);
}
.sc-header-title[b-x7j1uwq9vy] {
    font-size: var(--fs-md); font-weight: 700;
    color: var(--ink); letter-spacing: -0.02em;
}
.sc-phase-pill[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 600; padding: 3px 10px;
    /* --muted measured 4.06:1 on --line, short of the 4.5:1 an 11px status word
       needs. --ink-soft is 8.03:1 on the same grey. */
    border-radius: var(--radius-sm); background: var(--line); color: var(--ink-soft);
}
.sc-phase-pill.generating[b-x7j1uwq9vy] { background: rgba(77,157,224,0.1); color: var(--blue); }
/* The bright green read 2:1 on its tint. */
.sc-phase-pill.review[b-x7j1uwq9vy] { background: rgba(52,199,89,0.1); color: var(--green-ink); }
.sc-phase-pill.ready[b-x7j1uwq9vy] { background: rgba(52,199,89,0.15); color: var(--green-ink); }
.sc-close-btn[b-x7j1uwq9vy] {
    width: 28px; height: 28px; border-radius: 50%; background: var(--line);
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.sc-close-btn:hover[b-x7j1uwq9vy] { background: rgba(0,0,0,0.06); }
.sc-close-btn:disabled[b-x7j1uwq9vy] { opacity: 0.42; cursor: not-allowed; }
.sc-close-btn svg[b-x7j1uwq9vy] { width: 14px; height: 14px; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }

/* Layout */
.sc-layout[b-x7j1uwq9vy] { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
.sc-sidebar[b-x7j1uwq9vy] {
    width: 260px; min-width: 260px; background: var(--tint-blue);
    border-right: 1px solid rgba(0,0,0,0.06); padding: 16px 18px;
    overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
.sc-sidebar[b-x7j1uwq9vy]::-webkit-scrollbar { width: 4px; }
.sc-sidebar[b-x7j1uwq9vy]::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 2px; }
.sc-sidebar.locked[b-x7j1uwq9vy] { opacity: 0.6; pointer-events: none; }
.sc-section-label[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.8px;
    color: var(--muted); margin-top: 8px;
    text-transform: uppercase;
}
.sc-chip-row[b-x7j1uwq9vy] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sc-chip[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 600; padding: 4px 12px;
    border-radius: var(--radius-pill); border: 1px solid rgba(0,0,0,0.06); background: none;
    color: var(--muted); cursor: pointer; font-family: inherit;
    /* 11px text and 4px of padding landed these at 23px, one pixel under the
       24px WCAG 2.5.8 asks of a target. The floor does the work now, so the
       padding can stay as drawn. */
    display: inline-flex; align-items: center; min-height: 24px;
    transition: all 0.15s;
}
.sc-chip.active[b-x7j1uwq9vy] { background: rgba(77,157,224,0.1); border-color: var(--blue); color: var(--blue); }

.sc-select[b-x7j1uwq9vy]{
    width: 100%; padding: 7px 12px; border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control); font-size: var(--fs-2xs); font-family: inherit; background: #fff;
    appearance: none; margin-top: 4px;
}
.sc-defaults-hint[b-x7j1uwq9vy] {
    /* Sitting on a 1.5% darkening over the blue panel put --muted at 4.46:1,
       a hair under AA. On the white card surface it is 5.14:1, and the note
       reads as a card on the panel rather than a smudge in it. */
    font-size: var(--fs-2xs); color: var(--muted); background: var(--surface);
    padding: 8px 10px; border-radius: var(--radius-sm); margin-top: 4px;
    border: 1px solid rgba(0,0,0,0.04);
}
/* --line-field is a border grey, 3.34:1 on white. That clears the 3:1 a control
   boundary needs and fails the 4.5:1 body text needs, so text uses --muted. */
.sc-locked-text[b-x7j1uwq9vy] { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.sc-locked-banner[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); color: var(--amber); background: var(--tint-amber);
    padding: 5px 10px; border-radius: var(--radius-xs); border: 0.5px solid var(--orange);
    margin-top: 8px;
}
.sc-divider[b-x7j1uwq9vy] { height: 1px; background: rgba(0,0,0,0.05); margin: 12px 0; flex-shrink: 0; }

/* Selected image thumbnail in sidebar */
.sc-selected-thumb[b-x7j1uwq9vy] {
    position: relative; border-radius: var(--radius-sm); overflow: hidden;
    cursor: pointer; margin-top: 4px; border: 2px solid var(--blue);
    transition: transform 0.2s, box-shadow 0.2s;
    aspect-ratio: 16 / 9;
    min-height: 128px;
}
.sc-selected-thumb:hover[b-x7j1uwq9vy] { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.sc-selected-thumb img[b-x7j1uwq9vy] {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.sc-change-image-btn[b-x7j1uwq9vy] {
    position: absolute; bottom: 6px; right: 6px;
    font-size: var(--fs-2xs); font-weight: 600; color: #fff;
    background: rgba(0,0,0,0.6); border: none; border-radius: var(--radius-control);
    padding: 3px 10px; cursor: pointer; font-family: inherit;
}
.sc-select-image-btn[b-x7j1uwq9vy] {
    width: 100%; padding: 8px; border: 1.5px dashed rgba(0,0,0,0.1);
    border-radius: var(--radius-control); background: rgba(0,0,0,0.015);
    font-size: var(--fs-2xs); color: var(--muted); cursor: pointer; font-family: inherit;
    margin-top: 4px; transition: all 0.15s;
}
.sc-select-image-btn:hover[b-x7j1uwq9vy] { border-color: var(--blue); color: var(--blue); }

/* Finish buttons */
.sc-gate-msg[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); color: var(--amber); background: var(--tint-amber);
    padding: 4px 8px; border-radius: var(--radius-xs); border: 0.5px solid var(--orange);
    margin-bottom: 6px;
}
.sc-finish-btn[b-x7j1uwq9vy] {
    width: 100%; padding: 10px; border: none; border-radius: var(--radius-control);
    font-size: var(--fs-xs); font-weight: 600; font-family: inherit; cursor: pointer;
    transition: all 0.2s;
}
.sc-finish-btn.primary[b-x7j1uwq9vy] {
    background: var(--blue);
    color: #fff; box-shadow: var(--e1);
}
.sc-finish-btn.primary:hover:not(:disabled)[b-x7j1uwq9vy] { transform: translateY(-1px); box-shadow: var(--glow); }
/* --line-strong on --line measured 1.26:1, so the label was gone rather than
   dimmed. --ink-soft is 8.03:1 on the same grey and clears AA outright. The
   flat grey fill is what says the button is off, not an unreadable label. */
.sc-finish-btn.disabled[b-x7j1uwq9vy] { background: var(--line); color: var(--ink-soft); cursor: not-allowed; box-shadow: none; }
/* A text button under the primary, the same shape as the recovery pages' own
   text button, so it gets the same 44px target and the same body-text grey.
   It had been drawing at 15px tall in a border grey that measured 1.44:1 on
   the panel behind it, which is below anything readable. */
.sc-finish-link[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; width: 100%; text-align: center; background: none;
    border: none; font-size: var(--fs-2xs); color: var(--muted); cursor: pointer;
    text-decoration: underline; margin-top: 6px; font-family: inherit;
}
/* Same body grey as the enabled state, which clears AA on the blue panel at
   4.62:1. Dropping the underline is what marks it as off. */
.sc-finish-link.disabled[b-x7j1uwq9vy] { color: var(--muted); text-decoration: none; cursor: not-allowed; }
.sc-finish-reason[b-x7j1uwq9vy] { margin: 8px 0 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--muted); text-align: center; }
.sc-preview-btn[b-x7j1uwq9vy] {
    width: 100%; padding: 8px; border: 1.3px solid var(--purple);
    border-radius: var(--radius-control); background: none; color: var(--purple);
    font-size: var(--fs-2xs); font-weight: 600; font-family: inherit; cursor: pointer;
}
.sc-quota-text[b-x7j1uwq9vy] { font-size: var(--fs-2xs); color: var(--muted); }
.sc-quota-bar-track[b-x7j1uwq9vy] { width: 100%; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.06); margin-top: 6px; overflow: hidden; }
.sc-quota-bar-fill[b-x7j1uwq9vy] { height: 100%; border-radius: 3px; background: var(--blue); transition: width 0.3s ease; }
.sc-quota-bar-fill.warn[b-x7j1uwq9vy] { background: var(--orange); }
.sc-quota-bar-fill.danger[b-x7j1uwq9vy] { background: var(--red); }
.sc-schedule-picker[b-x7j1uwq9vy] { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* Above Confirm, the time sat on the button's top edge. */
.sc-finish-shell > .sc-schedule-picker:first-child[b-x7j1uwq9vy] { margin: 0 0 12px; }
.sc-schedule-label[b-x7j1uwq9vy] { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 600; }

.sc-schedule-input[b-x7j1uwq9vy]{
    width: 100%; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control); font-size: var(--fs-sm); font-family: inherit; background: #fff; color: var(--ink); outline: none;
}
.sc-schedule-input:focus[b-x7j1uwq9vy] { border-color: var(--blue); }

/* ═══ Main area — full height chat ═══ */
.sc-main[b-x7j1uwq9vy] { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.sc-primary-layout .sc-main[b-x7j1uwq9vy] { background: #fff; }
.sc-primary-sidebar[b-x7j1uwq9vy] { gap: 8px; }
.sc-step-rail[b-x7j1uwq9vy] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sc-step-rail-item[b-x7j1uwq9vy] {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid rgba(0,0,0,0.06); background: #fff;
    color: var(--muted); font: inherit;
    font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
    text-align: left; transition: all 0.15s ease;
}
.sc-step-rail-item.active[b-x7j1uwq9vy] {
    border-color: rgba(77,157,224,0.3);
    background: rgba(77,157,224,0.08);
    color: var(--blue);
}
.sc-step-rail-item.complete[b-x7j1uwq9vy] {
    color: var(--green-ink); border-color: rgba(47,133,90,0.18);
    background: rgba(47,133,90,0.05);
}
/* On the grey disc a done step's number came to 4.4:1. */
.sc-step-rail-item.complete .sc-step-index[b-x7j1uwq9vy] { background: rgba(255,255,255,0.8); }
.sc-step-rail-item.locked[b-x7j1uwq9vy],
.sc-step-rail-item:disabled[b-x7j1uwq9vy] {
    color: var(--muted); cursor: not-allowed; background: rgba(0,0,0,0.015);
}
.sc-step-index[b-x7j1uwq9vy] {
    width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.05); font-size: var(--fs-2xs); font-weight: 700;
}
.sc-primary-flow[b-x7j1uwq9vy] {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: #fff;
}
.sc-primary-content[b-x7j1uwq9vy] {
    flex: 1; min-height: 0; overflow-y: auto; padding: 32px;
    display: flex; flex-direction: column;
}
.sc-primary-section[b-x7j1uwq9vy] { width: 100%; max-width: 760px; margin: auto; }
.sc-primary-kicker[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.8px;
    color: var(--blue); margin-bottom: 8px;
    text-transform: uppercase;
}
.sc-primary-section h2[b-x7j1uwq9vy] {
    font-size: var(--fs-xl); line-height: 1.2; margin: 0 0 18px;
    color: var(--ink); letter-spacing: 0;
}
.sc-start-grid[b-x7j1uwq9vy],
.sc-platform-grid[b-x7j1uwq9vy] { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-platform-grid[b-x7j1uwq9vy] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-start-option[b-x7j1uwq9vy],
.sc-platform-option[b-x7j1uwq9vy] {
    border: 1px solid rgba(0,0,0,0.08); background: #fff;
    border-radius: var(--radius-sm); padding: 14px; min-height: 88px;
    text-align: left; font-family: inherit; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    transition: all 0.15s ease;
}
.sc-platform-option[b-x7j1uwq9vy] {
    min-height: 52px; align-items: center; justify-content: center;
    text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}
.sc-platform-option small[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
}
.sc-platform-option.studio-route[b-x7j1uwq9vy] {
    border-style: dashed;
    color: var(--amber);
    background: rgba(255,184,77,0.08);
}
.sc-platform-option.studio-route:hover[b-x7j1uwq9vy] {
    border-color: rgba(224,120,0,0.42);
    background: rgba(255,184,77,0.14);
}
.sc-start-option:hover[b-x7j1uwq9vy],
.sc-platform-option:hover[b-x7j1uwq9vy] {
    border-color: rgba(77,157,224,0.3); background: rgba(77,157,224,0.04);
}
.sc-start-option.selected[b-x7j1uwq9vy],
.sc-platform-option.selected[b-x7j1uwq9vy] {
    border-color: var(--blue);
    background: rgba(77,157,224,0.08);
    box-shadow: var(--focus-ring);
}
.sc-start-title[b-x7j1uwq9vy] { font-size: var(--fs-note); font-weight: 800; color: var(--ink); }
.sc-start-detail[b-x7j1uwq9vy] { font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }

.sc-primary-textarea[b-x7j1uwq9vy]{
    width: 100%; min-height: 180px; resize: vertical; border-radius: var(--radius-control);
    border: 1.5px solid var(--line-field); padding: 14px 16px;
    font-size: var(--fs-note); line-height: 1.55; font-family: inherit;
    color: var(--ink); background: #fff; outline: none;
}
.sc-primary-textarea:focus[b-x7j1uwq9vy] {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}
.sc-caption-loading[b-x7j1uwq9vy] {
    margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
    background: rgba(77,157,224,0.08); color: var(--blue);
    font-size: var(--fs-xs); font-weight: 700;
}
.sc-caption-candidates[b-x7j1uwq9vy] {
    display: grid; gap: 10px; margin-bottom: 14px;
}
.sc-caption-candidate[b-x7j1uwq9vy] {
    width: 100%; border: 1px solid rgba(0,0,0,0.08);
    background: #fff; border-radius: var(--radius-sm); padding: 12px 14px;
    text-align: left; font: inherit; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    transition: all 0.15s ease;
}
.sc-caption-candidate span[b-x7j1uwq9vy] {
    font-size: var(--fs-sm); line-height: 1.45; color: var(--ink);
}
.sc-caption-candidate small[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); line-height: 1.35; color: var(--muted);
}
.sc-caption-candidate:hover[b-x7j1uwq9vy] {
    border-color: rgba(77,157,224,0.3); background: rgba(77,157,224,0.04);
}
.sc-caption-candidate.selected[b-x7j1uwq9vy] {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}
.sc-source-placeholder[b-x7j1uwq9vy] {
    border: 1.5px dashed rgba(0,0,0,0.14); border-radius: var(--radius-sm);
    min-height: 160px; padding: 20px; display: flex;
    flex-direction: column; justify-content: center; align-items: center;
    text-align: center; gap: 6px; background: rgba(0,0,0,0.015);
}
.sc-primary-warning[b-x7j1uwq9vy] {
    margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid rgba(224,120,0,0.22);
    background: rgba(255,184,77,0.12); color: var(--amber);
    font-size: var(--fs-xs); line-height: 1.45;
}
.sc-source-picker[b-x7j1uwq9vy] {
    margin-top: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-source-picker.required .sc-source-placeholder[b-x7j1uwq9vy] {
    border-color: rgba(224,120,0,0.35);
    background: rgba(255,184,77,0.08);
}
.sc-source-preview[b-x7j1uwq9vy] {
    display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 10px;
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm);
    background: #fff;
}
.sc-source-preview img[b-x7j1uwq9vy] {
    width: 74px; height: 56px; object-fit: cover; border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.04);
}
.sc-source-meta[b-x7j1uwq9vy] {
    min-width: 0; display: flex; flex-direction: column; gap: 3px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}
.sc-source-meta small[b-x7j1uwq9vy],
.sc-source-required[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 500; color: var(--muted);
}
.sc-source-action[b-x7j1uwq9vy] {
    border: 1px solid rgba(77,157,224,0.24); border-radius: var(--radius-control);
    background: rgba(77,157,224,0.08); color: var(--blue);
    padding: 8px 12px; font-size: var(--fs-xs); font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.sc-source-action:hover[b-x7j1uwq9vy] {
    border-color: var(--blue);
    background: rgba(77,157,224,0.12);
}
.sc-source-action.secondary[b-x7j1uwq9vy] {
    background: #fff;
    color: var(--muted);
    border-color: rgba(0,0,0,0.1);
}
.sc-source-generate[b-x7j1uwq9vy] {
    width: 100%; min-width: 0;
    padding: 12px;
    border: 1px solid rgba(77,157,224,0.16); border-radius: var(--radius-sm);
    background: rgba(77,157,224,0.04);
    display: flex; flex-direction: column; gap: 10px;
}
.sc-source-generate-heading[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: var(--fs-sm); font-weight: 800; color: var(--ink);
}
.sc-source-generate-heading small[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
}

.sc-source-generate-input[b-x7j1uwq9vy]{
    display: block; width: 100%; max-width: 100%; min-height: 76px;
    resize: vertical; border-radius: var(--radius-control);
    border: 1.5px solid var(--line-field); padding: 10px 12px;
    font-size: var(--fs-sm); line-height: 1.45; font-family: inherit;
    color: var(--ink); background: #fff; outline: none;
}
.sc-source-generate-input:focus[b-x7j1uwq9vy] {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}
.sc-image-edit-panel[b-x7j1uwq9vy] {
    margin-top: 12px; padding: 12px;
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm);
    background: rgba(250,250,252,0.82);
    display: flex; flex-direction: column; gap: 10px;
}
.sc-image-edit-heading[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: var(--fs-sm); font-weight: 800; color: var(--ink);
}
.sc-image-edit-heading small[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 700; color: var(--blue);
    background: rgba(77,157,224,0.08); border-radius: var(--radius-pill); padding: 4px 8px;
}

.sc-image-edit-input[b-x7j1uwq9vy]{
    width: 100%; min-height: 82px; resize: vertical; border-radius: var(--radius-control);
    border: 1.5px solid var(--line-field); padding: 10px 12px;
    font-size: var(--fs-sm); line-height: 1.45; font-family: inherit;
    color: var(--ink); background: #fff; outline: none;
}
.sc-image-edit-input:focus[b-x7j1uwq9vy] {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}
.sc-image-edit-actions[b-x7j1uwq9vy] { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-image-edit-status[b-x7j1uwq9vy] {
    border-radius: var(--radius-sm); padding: 9px 10px;
    display: flex; justify-content: space-between; gap: 10px;
    font-size: var(--fs-xs); line-height: 1.35;
    background: rgba(77,157,224,0.08); color: var(--blue);
}
.sc-image-edit-status.failed[b-x7j1uwq9vy],
.sc-image-edit-status.cancelled[b-x7j1uwq9vy],
.sc-image-edit-status.rejected[b-x7j1uwq9vy] {
    background: rgba(255,184,77,0.12); color: var(--amber);
}
.sc-image-edit-status.completed[b-x7j1uwq9vy],
.sc-image-edit-status.accepted[b-x7j1uwq9vy] {
    background: rgba(47,133,90,0.08); color: var(--green-ink);
}
.sc-image-edit-status small[b-x7j1uwq9vy] { font-weight: 800; white-space: nowrap; }
.sc-image-edit-compare[b-x7j1uwq9vy] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sc-image-edit-compare-item[b-x7j1uwq9vy] {
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm);
    background: #fff; padding: 8px;
    display: flex; flex-direction: column; gap: 6px;
    font-size: var(--fs-2xs); font-weight: 800; color: var(--muted);
}
.sc-image-edit-compare-item img[b-x7j1uwq9vy] {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xs);
    background: rgba(0,0,0,0.04);
}
.sc-image-edit-result[b-x7j1uwq9vy] {
    display: grid; grid-template-columns: 74px minmax(0, 1fr);
    align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 700;
    color: var(--ink);
}
.sc-image-edit-result img[b-x7j1uwq9vy] {
    width: 74px; height: 56px; object-fit: cover; border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.04);
}
.sc-review-toolbar[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px; font-size: var(--fs-xs); color: var(--muted);
}
.sc-review-stack[b-x7j1uwq9vy] { display: flex; flex-direction: column; gap: 10px; }
.sc-review-row[b-x7j1uwq9vy] {
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm);
    padding: 14px; display: flex; justify-content: space-between; gap: 14px;
}
.sc-review-copy[b-x7j1uwq9vy] { min-width: 0; }
.sc-review-platform[b-x7j1uwq9vy] { font-size: var(--fs-xs); font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.sc-review-caption[b-x7j1uwq9vy] { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); white-space: pre-wrap; }
.sc-review-hashtags[b-x7j1uwq9vy] {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.sc-review-hashtags span[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 700; color: var(--green-ink);
    background: rgba(47,133,90,0.08); border-radius: var(--radius-pill); padding: 3px 7px;
}
.sc-review-status-stack[b-x7j1uwq9vy] {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.sc-review-status[b-x7j1uwq9vy] {
    align-self: flex-start; font-size: var(--fs-2xs); font-weight: 700;
    color: var(--blue); background: rgba(77,157,224,0.08);
    border-radius: var(--radius-pill); padding: 4px 8px; white-space: nowrap;
}
.sc-review-status.secondary[b-x7j1uwq9vy] {
    color: var(--muted); background: rgba(0,0,0,0.05);
}
.sc-finish-shell[b-x7j1uwq9vy] { max-width: 320px; }
.sc-primary-save-note[b-x7j1uwq9vy] {
    margin: 0; padding: 8px 18px; flex-shrink: 0;
    border-top: 1px solid rgba(224,120,0,0.22);
    background: rgba(255,184,77,0.12); color: var(--amber);
    font-size: var(--fs-xs); line-height: 1.45;
}
.sc-primary-footer[b-x7j1uwq9vy] {
    border-top: 1px solid rgba(0,0,0,0.06); padding: 14px 18px;
    display: flex; justify-content: space-between; gap: 10px;
    background: rgba(250,250,252,0.88); flex-shrink: 0;
}
.sc-primary-nav[b-x7j1uwq9vy] {
    border-radius: var(--radius-control); padding: 10px 18px; min-width: 120px;
    font-size: var(--fs-sm); font-weight: 700; font-family: inherit;
    cursor: pointer; border: 1px solid rgba(0,0,0,0.08);
}
.sc-primary-nav.primary[b-x7j1uwq9vy] {
    background: var(--blue); color: #fff; border-color: var(--blue);
}
.sc-primary-nav.secondary[b-x7j1uwq9vy] { background: #fff; color: var(--ink); }
.sc-primary-nav:disabled[b-x7j1uwq9vy] {
    background: var(--line); color: var(--muted); cursor: not-allowed; border-color: transparent;
}

.sc-chat-area[b-x7j1uwq9vy] {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0; overflow: hidden;
}
.sc-messages[b-x7j1uwq9vy] {
    flex: 1; overflow-y: auto; padding: 4px 20px 16px;
    display: flex; flex-direction: column; gap: 14px;
    min-height: 0; scroll-behavior: smooth;
}
/* The guide chat's own list (ChatPanel) already jumps instead of gliding under reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .sc-messages[b-x7j1uwq9vy] { scroll-behavior: auto; }
}
.sc-messages[b-x7j1uwq9vy]::-webkit-scrollbar { width: 5px; }
.sc-messages[b-x7j1uwq9vy]::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
.sc-messages[b-x7j1uwq9vy]::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.14); }

/* Welcome */
.sc-chat-welcome[b-x7j1uwq9vy] {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 32px 16px 16px;
    margin: auto 0; position: relative;
    animation: scFadeIn-b-x7j1uwq9vy 0.5s ease;
}
.sc-chat-welcome-title[b-x7j1uwq9vy] {
    font-size: var(--fs-lg); font-weight: 800;
    color: var(--ink); letter-spacing: -0.03em; margin: 0 0 6px;
}
.sc-chat-welcome-desc[b-x7j1uwq9vy] {
    font-size: var(--fs-sm); color: var(--muted);
    margin: 0 0 20px; line-height: 1.5; max-width: 360px;
}
.sc-suggestions[b-x7j1uwq9vy] {
    display: flex; flex-direction: column; gap: 7px;
    padding: 0 20px; max-width: 420px; margin: 0 auto; width: 100%;
}
.sc-suggestion-pill[b-x7j1uwq9vy] {
    display: flex; align-items: center; gap: 10px;
    text-align: left; padding: 11px 16px; border-radius: var(--radius-pill);
    /* This is a pill, and a straight 3px stripe down the left edge of a 999px
       corner does not follow the shape. The 1px boundary is the boundary. */
    background: rgba(0,0,0,0.015); border: 1px solid rgba(0,0,0,0.06);
    font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
    cursor: pointer; font-family: inherit; line-height: 1.4;
    transition: all 0.2s ease;
}
.sc-suggestion-pill:hover[b-x7j1uwq9vy] {
    border-color: rgba(77,157,224,0.15); border-left-color: var(--blue);
    background: rgba(77,157,224,0.04); color: var(--blue);
    transform: translateY(-1px); box-shadow: var(--glow);
}

/* Messages */
.sc-msg[b-x7j1uwq9vy] {
    display: flex; flex-direction: column; max-width: 95%;
    animation: scMsgIn-b-x7j1uwq9vy 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-msg.user[b-x7j1uwq9vy] { align-self: flex-end; max-width: 80%; }
.sc-msg.assistant[b-x7j1uwq9vy] {
    align-self: flex-start; display: flex;
    flex-direction: row; align-items: flex-start; gap: 8px; max-width: 100%;
}
.sc-msg-avatar[b-x7j1uwq9vy] {
    width: 22px; height: 22px; min-width: 22px; border-radius: var(--radius-xs);
    background: linear-gradient(135deg, rgba(77,157,224,0.1), rgba(123,111,212,0.1));
    display: flex; align-items: center; justify-content: center;
    color: var(--blue); flex-shrink: 0; margin-top: 2px;
}
.sc-msg-bubble[b-x7j1uwq9vy] {
    padding: 10px 14px; border-radius: var(--radius);
    font-size: var(--fs-sm); line-height: 1.55; word-wrap: break-word;
}
.sc-msg.user .sc-msg-bubble[b-x7j1uwq9vy] {
    background: var(--blue);
    color: #fff; border-bottom-right-radius: 6px;
    box-shadow: var(--e1);
}
.sc-msg.assistant .sc-msg-bubble[b-x7j1uwq9vy] {
    background: var(--report-diagnostic-bg, var(--ground));
    color: var(--ink); border-bottom-left-radius: 6px;
    padding: 12px 16px;
}

/* Streaming cursor */
.sc-msg-bubble.streaming[b-x7j1uwq9vy] { min-height: 20px; }
.sc-msg-bubble.streaming[b-x7j1uwq9vy]::after {
    content: ''; display: inline-block; width: 2px; height: 14px;
    background: var(--blue); margin-left: 2px; vertical-align: text-bottom;
    animation: scBlink-b-x7j1uwq9vy 0.7s infinite;
}

/* Caption bubble */
.sc-caption-bubble[b-x7j1uwq9vy] {
    background: var(--report-diagnostic-bg, var(--ground)); border: 1.5px solid var(--blue);
    border-radius: var(--radius); padding: 20px 22px; border-bottom-left-radius: 6px;
    width: 100%;
}
.sc-caption-bubble-label[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.8px;
    color: var(--blue); margin-bottom: 10px;
    text-transform: uppercase;
}
.sc-caption-bubble-edit[b-x7j1uwq9vy] {
    width: 100%; min-height: 100px; border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-sm); padding: 14px 16px;
    font-size: var(--fs-note); color: var(--ink); line-height: 1.65;
    resize: none; overflow: hidden;
    font-family: inherit; background: #fff; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sc-caption-bubble-edit:focus[b-x7j1uwq9vy] { border-color: var(--blue); box-shadow: var(--focus-ring); }

/* Image direction (collapsible in caption bubble) */
.sc-image-direction[b-x7j1uwq9vy] { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); }
.sc-image-direction-toggle[b-x7j1uwq9vy] {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted); background: none; border: none;
    cursor: pointer; font-family: inherit; padding: 0;
}
/* 13px tall on a phone. */
@media (pointer: coarse) {
    .sc-image-direction-toggle[b-x7j1uwq9vy] { min-height: 36px; }
}
.sc-toggle-arrow[b-x7j1uwq9vy] { font-size: var(--fs-2xs); transition: transform 0.15s; display: inline-block; }
.sc-toggle-arrow.open[b-x7j1uwq9vy] { transform: rotate(90deg); }
.sc-image-direction-edit[b-x7j1uwq9vy] {
    width: 100%; min-height: 80px; border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 8px;
    font-size: var(--fs-note); color: var(--ink); line-height: 1.65;
    resize: none; overflow: hidden;
    font-family: inherit; background: #fff; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sc-image-direction-edit:focus[b-x7j1uwq9vy] { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(123,111,212,0.1); }

/* Shortcut chips (inside caption bubble) */
.sc-shortcut-row-inline[b-x7j1uwq9vy] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); align-items: center; }
.sc-refining-hint[b-x7j1uwq9vy] { font-size: var(--fs-xs); color: var(--blue); font-weight: 500; font-style: italic; }

/* Generate Images button (inside caption bubble) */
.sc-generate-images-btn[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 18px; padding: 12px 20px;
    border: none; border-radius: var(--radius-control); font-size: var(--fs-note); font-weight: 600;
    font-family: inherit; cursor: pointer; color: #fff;
    background: var(--blue);
    box-shadow: var(--e1);
    transition: all 0.2s ease;
}
.sc-generate-images-btn:hover[b-x7j1uwq9vy] { transform: translateY(-1px); box-shadow: var(--glow); }

/* Generate Caption bar */
.sc-generate-caption-bar[b-x7j1uwq9vy] {
    display: flex; justify-content: center; padding: 10px 16px 0;
    flex-shrink: 0; animation: scFadeIn-b-x7j1uwq9vy 0.3s ease;
}
.sc-generate-caption-btn[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 32px; border: none; border-radius: var(--radius-control);
    font-size: var(--fs-note); font-weight: 600; font-family: inherit;
    cursor: pointer; color: #fff;
    /* --green is #34c759: white on it measures 2.2:1, well under AA. The ink
       green carries the same meaning and passes. */
    background: var(--green-ink);
    box-shadow: var(--e1);
    transition: all 0.2s ease;
}
.sc-generate-caption-btn:hover[b-x7j1uwq9vy] { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(52,199,89,0.35); }

/* Shortcut chips */
.sc-shortcut[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); color: var(--muted); padding: 5px 12px;
    border-radius: var(--radius-pill); background: rgba(0,0,0,0.015); border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.sc-shortcut:hover[b-x7j1uwq9vy] { border-color: var(--blue); color: var(--blue); background: rgba(77,157,224,0.04); }

/* Chat input */
.sc-chat-input-row[b-x7j1uwq9vy] {
    display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 16px;
    border-top: 1px solid rgba(0,0,0,0.05);
    background: rgba(250,250,252,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-shrink: 0;
}

.sc-chat-input[b-x7j1uwq9vy]{
    flex: 1; padding: 10px 14px; border-radius: var(--radius-control);
    border: 1.5px solid var(--line-field); font-size: var(--fs-sm); line-height: 1.45;
    font-family: inherit; outline: none; background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sc-chat-input:focus[b-x7j1uwq9vy] { border-color: var(--blue); box-shadow: var(--focus-ring); }
.sc-chat-input:disabled[b-x7j1uwq9vy] { background: var(--ground); cursor: not-allowed; }
.sc-send-btn[b-x7j1uwq9vy] {
    width: 38px; height: 38px; border-radius: var(--radius-control);
    background: var(--blue);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
    box-shadow: var(--e1);
}
.sc-send-btn:disabled[b-x7j1uwq9vy] { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.sc-send-btn:not(:disabled):hover[b-x7j1uwq9vy] { transform: translateY(-1px); box-shadow: var(--glow); }
.sc-send-btn svg[b-x7j1uwq9vy] { width: 14px; height: 14px; fill: #fff; stroke: none; }

/* Cancel button */
.sc-cancel-btn[b-x7j1uwq9vy] {
    width: 38px; height: 38px; border-radius: var(--radius-control);
    background: #fff; border: 1.5px solid var(--red);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.15s;
}
.sc-cancel-btn:hover[b-x7j1uwq9vy] { background: rgba(var(--red-rgb), 0.05); }
.sc-cancel-btn svg[b-x7j1uwq9vy] { width: 12px; height: 12px; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }

/* Hashtags */
.sc-hashtag-row[b-x7j1uwq9vy] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); }
/* A 10px x at half strength sat against the tag's last letter. Tags, their x and + now share one
   28px height, the x a 24px target in the tag's own colour, as on Brand settings' themes. */
.sc-hashtag[b-x7j1uwq9vy] {
    font-size: var(--fs-xs); font-weight: 500; color: var(--blue);
    background: rgba(77,157,224,0.08); min-height: 28px; padding: 2px 2px 2px 10px;
    border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 2px;
}
.sc-hashtag-remove[b-x7j1uwq9vy] {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; color: currentColor; background: none;
    border: none; border-radius: var(--radius-xs); cursor: pointer;
}
.sc-hashtag-remove:hover[b-x7j1uwq9vy] { background: rgba(77,157,224,0.14); }
.sc-hashtag-remove:focus-visible[b-x7j1uwq9vy] { outline-offset: -2px !important; }
.sc-hashtag-remove svg[b-x7j1uwq9vy] {
    width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2;
}
.sc-hashtag-add[b-x7j1uwq9vy] {
    width: 28px; height: 28px; border-radius: var(--radius-control);
    border: 1px solid var(--line-field); background: none;
    font-size: var(--fs-md); color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sc-hashtag-add:hover[b-x7j1uwq9vy] { color: var(--blue); border-color: var(--blue); }

.sc-hashtag-input[b-x7j1uwq9vy]{
    height: 28px; padding: 0 8px; border: 1.5px solid var(--line-field); border-radius: var(--radius-control);
    font-size: var(--fs-xs); font-family: inherit; outline: none;
    width: 110px; background: #fff; color: var(--ink);
}
.sc-hashtag-input:focus[b-x7j1uwq9vy] { border-color: var(--blue); }
.sc-section-hint[b-x7j1uwq9vy] { font-weight: 400; font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 0; }
.sc-section-hint.active[b-x7j1uwq9vy] { color: var(--blue); font-weight: 500; }

/* ═══ Image Selection Overlay ═══ */
.sc-img-overlay[b-x7j1uwq9vy] {
    position: fixed; inset: 0; background: var(--modal-overlay, rgba(15,23,42,0.52));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: calc(var(--modal-z, 2000) + 20); padding: 24px; animation: scFadeIn-b-x7j1uwq9vy 0.2s ease-out;
}
.sc-img-overlay-panel[b-x7j1uwq9vy] {
    background: #fff; border-radius: var(--radius); width: 100%; max-width: 800px;
    max-height: calc(100dvh - 48px); display: flex; flex-direction: column;
    border: 1px solid var(--modal-border, rgba(255,255,255,0.72));
    box-shadow: var(--modal-shadow, 0 24px 80px rgba(0,0,0,0.3));
    overflow: hidden; animation: scSlideUp-b-x7j1uwq9vy 0.25s ease-out;
}
.sc-img-overlay-header[b-x7j1uwq9vy] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sc-img-overlay-title[b-x7j1uwq9vy] { font-size: var(--fs-md); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.sc-img-overlay-grid[b-x7j1uwq9vy] {
    display: flex; gap: 12px; padding: 20px;
    flex: 1; overflow-y: auto;
}
.sc-img-overlay-footer[b-x7j1uwq9vy] {
    padding: 12px 20px; border-top: 1px solid rgba(0,0,0,0.05);
    display: flex; justify-content: flex-end;
}
.sc-img-overlay-footer .sc-finish-btn[b-x7j1uwq9vy] { width: auto; padding: 10px 28px; }

/* Image slots */
.sc-image-slot[b-x7j1uwq9vy] {
    flex: 1; aspect-ratio: 1; border-radius: var(--radius);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; position: relative;
    overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.sc-image-slot.empty[b-x7j1uwq9vy] {
    background: var(--ground);
    border: 1px dashed rgba(0,0,0,0.08);
    font-size: var(--fs-2xs); color: var(--muted); cursor: default;
}
.sc-image-slot.generating[b-x7j1uwq9vy] { background: var(--ground); cursor: default; }
.sc-image-slot.generating span[b-x7j1uwq9vy] { font-size: var(--fs-2xs); color: var(--blue); font-weight: 500; }
.sc-shimmer[b-x7j1uwq9vy] {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(77,157,224,0.06) 30%, rgba(123,111,212,0.08) 50%, rgba(77,157,224,0.06) 70%, transparent 100%);
    background-size: 200% 100%;
    animation: scShimmer-b-x7j1uwq9vy 2s ease infinite;
}
.sc-image-slot.ready img[b-x7j1uwq9vy] { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.sc-image-slot.ready[b-x7j1uwq9vy] { border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.sc-image-slot.ready:hover[b-x7j1uwq9vy] { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.sc-image-slot.selected[b-x7j1uwq9vy] { border: 3px solid var(--blue); }
.sc-image-slot.selected[b-x7j1uwq9vy]::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(77,157,224,0.06), transparent);
    border-radius: var(--radius); pointer-events: none;
}
.sc-image-slot.failed[b-x7j1uwq9vy] { background: var(--ground); border: 1.5px solid var(--red); cursor: default; }
.sc-fail-text[b-x7j1uwq9vy] { font-size: var(--fs-2xs); color: var(--red-ink); font-weight: 500; }
.sc-retry-btn[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); color: var(--red-ink); font-weight: 500;
    padding: 4px 16px; border: 1px solid var(--red);
    border-radius: var(--radius-control); background: none; cursor: pointer; font-family: inherit;
}
.sc-fail-hint[b-x7j1uwq9vy] { font-size: var(--fs-2xs); color: var(--muted); }
.sc-img-selected-badge[b-x7j1uwq9vy] {
    position: absolute; top: 8px; left: 8px;
    font-size: var(--fs-2xs); font-weight: 600; color: #fff;
    background: var(--blue); padding: 2px 10px; border-radius: var(--radius-sm);
}
.sc-img-check[b-x7j1uwq9vy] {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px; border-radius: 50%; background: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.sc-img-check svg[b-x7j1uwq9vy] { width: 14px; height: 14px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.sc-img-actions[b-x7j1uwq9vy] {
    position: absolute; bottom: 8px; left: 8px; right: 8px;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.6); opacity: 0;
    transition: opacity 0.15s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sc-image-slot.ready:hover .sc-img-actions[b-x7j1uwq9vy],
.sc-image-slot.ready:focus-within .sc-img-actions[b-x7j1uwq9vy] { opacity: 1; }
/* Select, Zoom and Regenerate only showed on hover, so a phone never saw them and a keyboard
   tabbed through buttons it could not see. */
@media (hover: none) {
    .sc-image-slot.ready .sc-img-actions[b-x7j1uwq9vy] { opacity: 1; }
}
.sc-img-actions button[b-x7j1uwq9vy] {
    font-size: var(--fs-2xs); color: #fff; font-weight: 500;
    background: none; border: none; cursor: pointer; font-family: inherit;
}
.sc-img-actions span[b-x7j1uwq9vy] { font-size: var(--fs-2xs); color: rgba(255,255,255,0.4); }
/* On a touch screen the three were 15px tall words inside a tile that selects the photo, so a
   near miss on Regenerate (which spends a picture) selected it instead. Each takes a share of the
   bar at a tappable height. */
@media (pointer: coarse) {
    .sc-img-actions[b-x7j1uwq9vy] { padding: 2px; gap: 2px; }
    .sc-img-actions span[b-x7j1uwq9vy] { display: none; }
    .sc-img-actions button[b-x7j1uwq9vy] {
        flex: 1 1 auto; min-height: 40px; padding: 0 4px; white-space: nowrap;
        font-size: var(--fs-sm); border-radius: var(--radius-sm);
    }
}

/* ═══ Zoom overlay ═══ */
.sc-zoom-overlay[b-x7j1uwq9vy] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center;
    z-index: calc(var(--modal-z, 2000) + 40); cursor: pointer; animation: scFadeIn-b-x7j1uwq9vy 0.2s ease-out;
}
.sc-zoom-content[b-x7j1uwq9vy] { position: relative; max-width: 90vw; max-height: 90vh; cursor: default; }
.sc-zoom-content img[b-x7j1uwq9vy] {
    max-width: 90vw; max-height: 90vh; border-radius: var(--radius);
    object-fit: contain; box-shadow: 0 20px 80px rgba(0,0,0,0.4);
}
.sc-zoom-close[b-x7j1uwq9vy] {
    position: absolute; top: -12px; right: -12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sc-zoom-close svg[b-x7j1uwq9vy] { width: 16px; height: 16px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* ═══ Animations ═══ */
@keyframes scFadeIn-b-x7j1uwq9vy { from { opacity: 0; } to { opacity: 1; } }
@keyframes scMsgIn-b-x7j1uwq9vy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scSlideUp-b-x7j1uwq9vy { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scShimmer-b-x7j1uwq9vy { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes scBlink-b-x7j1uwq9vy { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@media (max-width: 768px) {
    .sc-root[b-x7j1uwq9vy] {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    /* The desktop max-height (100dvh - 32px) still held, so a phone saw a strip of blurred page
       under the window. Full bleed means no frame edge either. */
    .sc-frame[b-x7j1uwq9vy] {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .sc-header[b-x7j1uwq9vy] {
        padding: 12px 14px;
    }

    .sc-header-left[b-x7j1uwq9vy] {
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .sc-layout[b-x7j1uwq9vy] {
        flex-direction: column;
        min-height: 0;
    }

    .sc-sidebar[b-x7j1uwq9vy] {
        width: 100%;
        min-width: 0;
        max-height: min(60dvh, 520px);
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        padding: 12px 14px;
        flex-shrink: 0;
    }

    .sc-primary-layout .sc-sidebar[b-x7j1uwq9vy] {
        max-height: 126px;
        overflow: hidden;
        padding: 10px 14px 8px;
        gap: 6px;
    }

    .sc-primary-sidebar .sc-step-rail[b-x7j1uwq9vy] {
        flex-direction: row;
        overflow-x: auto;
        margin: 0 -2px;
        padding: 0 2px 4px;
        scrollbar-width: thin;
    }

    .sc-primary-sidebar .sc-step-rail-item[b-x7j1uwq9vy] {
        width: auto;
        min-width: 104px;
        flex: 0 0 auto;
        padding: 7px 8px;
        gap: 7px;
        font-size: var(--fs-2xs);
    }

    .sc-primary-sidebar .sc-step-index[b-x7j1uwq9vy] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: var(--fs-2xs);
    }

    .sc-primary-sidebar .sc-divider[b-x7j1uwq9vy],
    .sc-primary-sidebar > .sc-section-label:not(:first-child)[b-x7j1uwq9vy],
    .sc-primary-sidebar > .sc-locked-text[b-x7j1uwq9vy],
    .sc-primary-sidebar > .sc-quota-text[b-x7j1uwq9vy],
    .sc-primary-sidebar > .sc-quota-bar-track[b-x7j1uwq9vy] {
        display: none;
    }

    .sc-main[b-x7j1uwq9vy] {
        min-height: 0;
    }

    .sc-primary-content[b-x7j1uwq9vy] {
        padding: 18px 14px;
    }

    .sc-primary-section[b-x7j1uwq9vy] {
        margin: 0;
    }

    .sc-start-grid[b-x7j1uwq9vy],
    .sc-platform-grid[b-x7j1uwq9vy] {
        grid-template-columns: 1fr;
    }

    .sc-primary-footer[b-x7j1uwq9vy] {
        padding: 12px;
    }

    .sc-primary-nav[b-x7j1uwq9vy] {
        min-width: 0;
        flex: 1;
    }

    .sc-source-preview[b-x7j1uwq9vy] {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .sc-source-preview .sc-source-action[b-x7j1uwq9vy] {
        grid-column: 1 / -1;
        width: 100%;
    }

    .sc-source-generate-heading[b-x7j1uwq9vy] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .sc-image-edit-compare[b-x7j1uwq9vy] {
        grid-template-columns: 1fr;
    }

    .sc-review-toolbar[b-x7j1uwq9vy] {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-review-toolbar .sc-source-action[b-x7j1uwq9vy] {
        width: 100%;
    }

    .sc-review-row[b-x7j1uwq9vy] {
        flex-direction: column;
    }

    .sc-review-status-stack[b-x7j1uwq9vy] {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sc-finish-shell[b-x7j1uwq9vy] {
        width: 100%;
        max-width: none;
    }

    .sc-messages[b-x7j1uwq9vy] {
        padding: 12px 14px;
    }

    .sc-chat-welcome[b-x7j1uwq9vy] {
        margin: 0;
        padding: 18px 4px 8px;
    }

    .sc-suggestions[b-x7j1uwq9vy] {
        padding: 0;
    }

    .sc-chat-input-row[b-x7j1uwq9vy] {
        padding: 10px 12px 12px;
    }

    .sc-img-overlay[b-x7j1uwq9vy] {
        padding: 12px;
    }

    .sc-img-overlay-panel[b-x7j1uwq9vy] {
        max-height: 92dvh;
        border-radius: var(--radius);
    }

    .sc-img-overlay-grid[b-x7j1uwq9vy] {
        flex-direction: column;
        padding: 14px;
        overflow-y: auto;
    }

    .sc-image-slot[b-x7j1uwq9vy] {
        width: 100%;
        min-height: 112px;
        aspect-ratio: 16 / 9;
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .sc-badge[b-x7j1uwq9vy] {
        width: 30px;
        height: 30px;
    }

    .sc-header-title[b-x7j1uwq9vy] {
        font-size: var(--fs-base);
    }

    .sc-phase-pill[b-x7j1uwq9vy] {
        padding: 3px 8px;
    }

    .sc-sidebar[b-x7j1uwq9vy] {
        max-height: 60dvh;
    }

    .sc-primary-layout .sc-sidebar[b-x7j1uwq9vy] {
        max-height: 96px;
        padding: 9px 14px 7px;
    }

    .sc-primary-sidebar .sc-step-rail[b-x7j1uwq9vy] {
        overflow-x: visible;
    }

    .sc-primary-sidebar .sc-step-rail-item[b-x7j1uwq9vy] {
        min-width: 0;
        flex: 1 1 0;
        justify-content: center;
        padding: 8px 4px;
        position: relative;
    }

    .sc-primary-sidebar .sc-step-rail-item > span:not(.sc-step-index)[b-x7j1uwq9vy] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sc-caption-bubble[b-x7j1uwq9vy] {
        padding: 16px;
    }
}

/* Every field here was 11 to 14px, so an iPhone zoomed the page on each tap and left it zoomed.
   16px on touch screens stops that. */
@media (pointer: coarse) {
    .sc-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"])[b-x7j1uwq9vy],
    .sc-root textarea[b-x7j1uwq9vy],
    .sc-root select[b-x7j1uwq9vy] {
        font-size: var(--fs-md);
    }
}
/* /Components/Studio/StudioAiOverlay.razor.rz.scp.css */
/* Studio guide.

   A chat is a column: who is talking at the top, the thread in the middle, the
   composer pinned at the bottom. The old panel was none of those. It sized
   itself to its blurb and left the rest of the column empty, so the field ended
   up floating in the middle of nothing with a blue square beside it.

   Rows here are auto / 1fr / auto. The thread takes whatever height is left,
   which is what makes the composer sit at the bottom of the column instead of
   wherever the text above it happened to stop. */

/* A pane, not a margin. On the same white as the step spine beside it, with the
   edge on the working side, so the left of the screen reads as one instrument
   and the post sits on the canvas to its right. A 1px hairline in the page
   ground was what made this read as a footnote. */
.fs-ai-overlay[b-8a59vxlfxq] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    background: #ffffff;
    border-right: 1px solid var(--border-light);
    box-sizing: border-box;
    color: var(--text);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    overflow: clip;
    padding: 28px 24px 20px;
}

/* The rule belongs to the heading, not to the thread. On the thread it floated
   in the middle of nothing whenever the conversation was short, because the
   thread area is tall and its content sits at the bottom. */
.fs-ai-header[b-8a59vxlfxq] {
    border-bottom: 1px solid var(--border-light);
    display: grid;
    gap: 10px;
    max-height: min(280px, 38dvh);
    overflow-y: auto;
    padding-bottom: 14px;
}

.fs-ai-pill[b-8a59vxlfxq],
.fs-ai-chips[b-8a59vxlfxq],
.fs-ai-state[b-8a59vxlfxq] {
    align-items: center;
    display: flex;
}

.fs-ai-pill[b-8a59vxlfxq] {
    color: var(--accent);
    font-size: var(--fs-xs);
    gap: 8px;
}

.fs-ai-pill span[b-8a59vxlfxq],
.fs-ai-state-dot[b-8a59vxlfxq] {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    flex: 0 0 auto;
}

.fs-ai-pill span.streaming[b-8a59vxlfxq],
.fs-ai-state-dot.streaming[b-8a59vxlfxq] {
    background: var(--green-ink);
}

.fs-ai-pill strong[b-8a59vxlfxq] {
    font-weight: 600;
}

.fs-ai-heading[b-8a59vxlfxq] {
    display: grid;
    gap: 6px;
}

.fs-ai-overlay h2[b-8a59vxlfxq] {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.fs-ai-overlay p[b-8a59vxlfxq] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Step navigation, not chat. Quiet text buttons so they stop competing with the
   thread for the eye the way bordered white chips did. */
.fs-ai-chips[b-8a59vxlfxq] {
    flex-wrap: wrap;
    gap: 4px;
    margin-left: -6px;
}

.fs-ai-chips button[b-8a59vxlfxq] {
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 6px;
}

.fs-ai-chips button:hover:not(:disabled)[b-8a59vxlfxq] {
    text-decoration: underline;
}

.fs-ai-chips button.warning[b-8a59vxlfxq] {
    color: var(--amber);
}

.fs-ai-state[b-8a59vxlfxq] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    gap: 8px;
    min-height: 28px;
}

.fs-ai-status-list[b-8a59vxlfxq] {
    display: grid;
    gap: 8px;
}

.fs-ai-status-row[b-8a59vxlfxq] {
    border-left: 2px solid var(--tint-blue);
    display: grid;
    gap: 4px;
    padding-left: 10px;
    overflow-wrap: anywhere;
}

.fs-ai-status-row.warning[b-8a59vxlfxq] {
    border-color: var(--amber);
}

.fs-ai-status-row span[b-8a59vxlfxq] {
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.fs-ai-status-row small[b-8a59vxlfxq] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

/* The way back from a change the chat made, on the line that reports it. */
.fs-ai-status-action[b-8a59vxlfxq] {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    justify-self: start;
    margin-top: 2px;
    min-height: 32px;
    padding: 4px 12px;
}

.fs-ai-status-action:hover:not(:disabled)[b-8a59vxlfxq] {
    border-color: var(--blue);
}

.fs-ai-status-action:disabled[b-8a59vxlfxq] {
    cursor: default;
    opacity: 0.58;
}

/* ---- the thread -------------------------------------------------------- */

.fs-ai-messages[b-8a59vxlfxq] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 0;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

/* A short thread sits at the foot of the column, by the field, as in any chat.
   Left at the top it put about 450px of white between the last prompt and the
   field, which read as a hole; centred, the thread and the starters floated
   with white above and below. The auto resolves to zero once the thread is
   long enough to scroll, so a real conversation still fills the column.
   Before the first message the starters stay under the intro, as on the
   "Your business" tab beside it: at the foot, switching tabs moved them from
   one end of the drawer to the other. */
.fs-ai-messages:not(:has(> .fs-ai-empty)) > :first-child[b-8a59vxlfxq] {
    margin-top: auto;
}

.fs-ai-empty[b-8a59vxlfxq] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
}

/* Three things worth asking, in the reader's own words, so the first message
   is a click rather than a blank field to invent something for. */
.fs-ai-starters[b-8a59vxlfxq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-ai-starters button[b-8a59vxlfxq] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.4;
    padding: 9px 12px;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    width: 100%;
}

.fs-ai-starters button:hover:not(:disabled)[b-8a59vxlfxq] {
    background: var(--tint-blue);
    border-color: var(--blue);
}

.fs-ai-starters button:disabled[b-8a59vxlfxq] {
    cursor: default;
    opacity: 0.55;
}

.fs-ai-message[b-8a59vxlfxq] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fs-ai-message span[b-8a59vxlfxq] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.fs-ai-message p[b-8a59vxlfxq] {
    max-width: 100%;
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: 1.55;
    white-space: pre-wrap;
}

.fs-ai-message.user[b-8a59vxlfxq] {
    justify-items: end;
}

.fs-ai-message.user p[b-8a59vxlfxq] {
    background: var(--tint-blue);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
}

.fs-ai-message.assistant p[b-8a59vxlfxq] {
    border-left: 2px solid var(--line);
    padding-left: 12px;
}

.fs-ai-message.system p[b-8a59vxlfxq] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.fs-ai-message.system.warning p[b-8a59vxlfxq] {
    color: var(--amber);
}

.fs-ai-attachments[b-8a59vxlfxq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-ai-attachments img[b-8a59vxlfxq] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xs);
    object-fit: cover;
}

/* ---- the composer ------------------------------------------------------ */

.fs-ai-form[b-8a59vxlfxq] {
    border-top: 1px solid var(--border-light);
    padding-top: 14px;
}

/* The field and its send button share one border, so the pair reads as a single
   place to write rather than a box with a separate blue square next to it. */
.fs-ai-well[b-8a59vxlfxq] {
    align-items: end;
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 6px 6px 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fs-ai-well:focus-within[b-8a59vxlfxq] {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.14);
}

/* The well rings for the field inside it. app.css's keyboard ring is !important, and on the
   field too it drew a second box inside the well, pressed against the send button. */
.fs-ai-well:has(.fs-ai-textarea:focus-visible)[b-8a59vxlfxq] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.fs-ai-textarea:focus-visible[b-8a59vxlfxq] {
    outline: none !important;
    box-shadow: none !important;
}

/* Script-free auto-grow: the mirrored copy of the text sets the row height and
   the textarea is laid over it in the same grid cell. */
.fs-ai-grow[b-8a59vxlfxq] {
    display: grid;
    min-width: 0;
}

.fs-ai-grow[b-8a59vxlfxq]::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

.fs-ai-grow > textarea[b-8a59vxlfxq],
.fs-ai-grow[b-8a59vxlfxq]::after {
    grid-area: 1 / 1;
    font: inherit;
    font-size: var(--fs-note);
    line-height: 1.5;
    max-height: 132px;
    min-height: 32px;
    padding: 6px 0;
}

.fs-ai-textarea[b-8a59vxlfxq] {
    background: none;
    border: none;
    color: var(--text);
    overflow-y: auto;
    resize: none;
}

.fs-ai-textarea:focus[b-8a59vxlfxq] {
    outline: none;
}

.fs-ai-textarea[b-8a59vxlfxq]::placeholder {
    color: var(--text-secondary);
}

/* Clear of the box's focus ring, which stands 5px out from it. On the class alone it lost to
   .fs-ai-overlay p, which sets every paragraph's margin, so the ring touched the line. */
.fs-ai-overlay .fs-ai-hint[b-8a59vxlfxq] {
    margin: 10px 0 0;
}

/* A phone keyboard has no Shift and Enter, so the line only told it about keys it lacks.
   The send arrow says the rest. */
@media (hover: none) and (pointer: coarse) {
    .fs-ai-hint[b-8a59vxlfxq] {
        display: none;
    }
}

.fs-ai-send[b-8a59vxlfxq] {
    height: 32px;
    width: 32px;
    align-items: center;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-xs);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease;
}

.fs-ai-send:hover:not(:disabled)[b-8a59vxlfxq] {
    background: var(--accent-dark);
}

/* 32px, 6px from the box a near miss focuses instead. */
@media (pointer: coarse) {
    .fs-ai-send[b-8a59vxlfxq] {
        height: 40px;
        width: 40px;
    }
}

.fs-ai-chips button:disabled[b-8a59vxlfxq],
.fs-ai-send:disabled[b-8a59vxlfxq],
.fs-ai-textarea:disabled[b-8a59vxlfxq] {
    cursor: default;
    opacity: 0.58;
}

.fs-ai-overlay button:focus-visible[b-8a59vxlfxq] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .fs-ai-starters button[b-8a59vxlfxq],
    .fs-ai-well[b-8a59vxlfxq],
    .fs-ai-send[b-8a59vxlfxq] {
        transition: none;
    }
}

@media (max-width: 900px) {
    .fs-ai-overlay[b-8a59vxlfxq] {
        border-right: 0;
        border-bottom: 1px solid var(--border-light);
        padding: 20px 24px 16px;
        height: auto;
        grid-template-rows: auto auto auto;
    }

    .fs-ai-header[b-8a59vxlfxq] {
        max-height: none;
        padding-bottom: 12px;
    }

    .fs-ai-overlay h2[b-8a59vxlfxq] {
        font-size: var(--fs-md);
    }

    .fs-ai-heading > p[b-8a59vxlfxq] {
        display: none;
    }

    .fs-ai-messages[b-8a59vxlfxq] {
        max-height: min(300px, 40dvh);
        padding: 12px 0;
    }

    .fs-ai-form[b-8a59vxlfxq] {
        padding-top: 12px;
    }

    .fs-ai-grow > textarea[b-8a59vxlfxq],
    .fs-ai-grow[b-8a59vxlfxq]::after {
        font-size: var(--fs-md);
    }
}

/* Short windows. A half-height window, or a full screen at 200% scale, left the
   column too short for the heading, the prompts and the field together, so the
   prompts were cut through the middle by the composer. The heading gives up its
   second line and some padding first, because the prompts and the field are the
   parts you act on. */
@media (max-height: 700px) {
    .fs-ai-overlay[b-8a59vxlfxq] {
        padding: 16px 20px 14px;
    }

    .fs-ai-heading > p[b-8a59vxlfxq] {
        display: none;
    }

    .fs-ai-header[b-8a59vxlfxq] {
        max-height: min(170px, 32dvh);
        gap: 8px;
        padding-bottom: 10px;
    }

    .fs-ai-messages[b-8a59vxlfxq] {
        gap: 12px;
        padding: 12px 0;
    }

    .fs-ai-form[b-8a59vxlfxq] {
        padding-top: 10px;
    }

    .fs-ai-hint[b-8a59vxlfxq] {
        display: none;
    }
}
/* /Components/Studio/StudioAskDrawer.razor.rz.scp.css */
/* The Ask drawer. Over the post on anything narrower than 1200px, with a scrim
   that closes it; a column of its own beside the post from 1200px, where there
   is room for both without the post giving up its width.

   The drawer sets display, which beats the browser's own [hidden] rule, so the
   closed state has to be said here too. */
.fs-ask-drawer[b-bxeajv81ej] {
    inset: 0;
    position: fixed;
    z-index: 1200;
}

.fs-ask-drawer[hidden][b-bxeajv81ej] {
    display: none;
}

.fs-ask-scrim[b-bxeajv81ej] {
    background: rgba(20, 24, 28, 0.32);
    inset: 0;
    position: absolute;
}

.fs-ask-panel[b-bxeajv81ej] {
    width: min(420px, 100%);
    background: #ffffff;
    bottom: 0;
    box-shadow: -12px 0 32px rgba(25, 33, 38, 0.14);
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    position: absolute;
    right: 0;
    top: 0;
}

/* The guide's own pane drew its edge on the right, where the post used to be. */
.fs-ask-panel[b-bxeajv81ej]  .fs-ai-overlay {
    border-right: 0;
    padding-top: 24px;
}

/* Room for the close button beside the title only. Kept down the whole header, it held the
   line under the title to two thirds of the drawer, with the corner beside it empty. */
.fs-ask-panel[b-bxeajv81ej]  .fs-ai-heading > h2 {
    padding-right: 52px;
}

/* The drawer is always full height, so the thread takes what the header and the field leave at
   every width. The guide's own narrow-screen rules capped the thread at 300px for when it sat
   above the post, which left the drawer half empty on a phone with the field floating mid-screen. */
.fs-ask-panel[b-bxeajv81ej]  .fs-ai-overlay {
    border-bottom: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
}

.fs-ask-panel[b-bxeajv81ej]  .fs-ai-messages {
    max-height: none;
}

/* The guide also dropped its title size and its one line of explanation at 900px and under, to
   keep the post high when it sat above it. In the drawer that only cost the line that says the AI
   sees and changes the whole post. Short windows still drop it, by the guide's max-height rule. */
@media (max-width: 900px) and (min-height: 701px) {
    .fs-ask-panel[b-bxeajv81ej]  .fs-ai-heading > p {
        display: block;
    }

    .fs-ask-panel[b-bxeajv81ej]  .fs-ai-overlay h2 {
        font-size: var(--fs-lg);
    }
}

/* Sits over the top right of the guide's header, clear of its title. */
.fs-ask-close[b-bxeajv81ej] {
    width: 44px;
    height: 44px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 1;
}

.fs-ask-close:hover[b-bxeajv81ej] {
    color: var(--text);
}

.fs-ask-close:focus-visible[b-bxeajv81ej] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.fs-ask-close svg[b-bxeajv81ej] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

@media (pointer: fine) {
    .fs-ask-close[b-bxeajv81ej] {
        width: 36px;
        height: 36px;
    }
}

@media (min-width: 1200px) {
    .fs-ask-drawer[b-bxeajv81ej] {
        inset: auto;
        min-height: 0;
        position: relative;
        z-index: auto;
    }

    .fs-ask-scrim[b-bxeajv81ej] {
        display: none;
    }

    .fs-ask-panel[b-bxeajv81ej] {
        width: auto;
        height: 100%;
        border-left: 1px solid var(--border-light);
        box-shadow: none;
        min-height: 0;
        position: relative;
    }
}

@media (max-width: 600px) {
    .fs-ask-panel[b-bxeajv81ej] {
        width: 100%;
    }
}

/* With the advisor beside the guide: the tabs, then whichever conversation is chosen. Last in
   the file, so these win over the single-conversation rules above. */
.fs-ask-panel.has-tabs[b-bxeajv81ej] {
    grid-template-rows: auto minmax(0, 1fr);
}

.fs-ask-tabs[b-bxeajv81ej] {
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 4px;
    padding: 16px 68px 0 24px;
}

.fs-ask-tab[b-bxeajv81ej] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: -1px;
    min-height: 44px;
    padding: 8px 10px;
}

.fs-ask-tab:hover[b-bxeajv81ej] {
    color: var(--text);
}

.fs-ask-tab.active[b-bxeajv81ej] {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.fs-ask-tab:focus-visible[b-bxeajv81ej] {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

.fs-ask-pane[b-bxeajv81ej] {
    min-height: 0;
}

.fs-ask-pane[hidden][b-bxeajv81ej] {
    display: none;
}

.fs-ask-pane.business[b-bxeajv81ej] {
    padding: 0 24px 20px;
}

/* Under the tabs, the guide's header no longer needs the room the close button took. */
.fs-ask-panel.has-tabs[b-bxeajv81ej]  .fs-ai-heading > h2 {
    padding-right: 0;
}

.fs-ask-panel.has-tabs[b-bxeajv81ej]  .fs-ai-overlay {
    padding-top: 16px;
}
/* A reply to this post that came while the business tab showed. */
.fs-ask-tab-dot[b-bxeajv81ej] {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    vertical-align: middle;
    background: var(--accent);
    border-radius: 50%;
}
/* /Components/Studio/StudioCaptionAssist.razor.rz.scp.css */
/* The AI under the caption being edited. It sits inside the frame, under the
   edit box, so it reads as that caption's tools. */
/* Inset like the frame's other rules. Its line ran to the card's edges while the one
   over the caption moves below stopped at the text, two dividers out of line. */
.fs-caption-assist[b-7caccq6hso] {
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 12px;
    margin: 0 14px;
    padding: 12px 0 14px;
}

.fs-caption-chips[b-7caccq6hso] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-caption-chip[b-7caccq6hso] {
    min-height: 40px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

.fs-caption-chip:not(:disabled):hover[b-7caccq6hso] {
    border-color: var(--text);
}

.fs-caption-chip:disabled[b-7caccq6hso],
.fs-caption-ask input:disabled[b-7caccq6hso],
.fs-caption-ask button:disabled[b-7caccq6hso],
.fs-caption-actions button:disabled[b-7caccq6hso] {
    cursor: default;
    opacity: 0.5;
}

.fs-caption-ask[b-7caccq6hso] {
    display: grid;
    gap: 6px;
}

.fs-caption-ask label[b-7caccq6hso] {
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-caption-ask-row[b-7caccq6hso] {
    display: flex;
    gap: 8px;
}

/* width 0: the field grows into the row. Left at its built-in width it set the row's
   smallest size, and at 320px the strip pushed past the frame. */
.fs-caption-ask input[b-7caccq6hso] {
    min-height: 44px;
    min-width: 0;
    width: 0;
    background: #ffffff;
    /* The field token: the hairline was 1.27:1 on white, too faint to see as a box. */
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    flex: 1 1 auto;
    font: inherit;
    font-size: var(--fs-sm);
    padding: 0 12px;
}

.fs-caption-ask button[b-7caccq6hso] {
    min-height: 44px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 16px;
}

.fs-caption-assist-note[b-7caccq6hso] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0;
}

.fs-caption-assist-note.warning[b-7caccq6hso] {
    color: var(--amber);
    font-weight: 700;
}

/* The other caption moves for this platform: plain links under the AI. */
.fs-caption-actions[b-7caccq6hso] {
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding-top: 10px;
}

.fs-caption-actions button[b-7caccq6hso] {
    min-height: 36px;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 0;
}

.fs-caption-chip:focus-visible[b-7caccq6hso],
.fs-caption-ask input:focus-visible[b-7caccq6hso],
.fs-caption-ask button:focus-visible[b-7caccq6hso],
.fs-caption-actions button:focus-visible[b-7caccq6hso] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

@media (pointer: fine) {
    .fs-caption-chip[b-7caccq6hso],
    .fs-caption-ask input[b-7caccq6hso],
    .fs-caption-ask button[b-7caccq6hso] {
        min-height: 36px;
    }
}

/* High Contrast drops the accent colour, which was all that marked these as buttons. */
@media (forced-colors: active) {
    .fs-caption-actions button:not(:disabled)[b-7caccq6hso] {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Two by two on a phone, as the photo menu's row is. Wrapping freely put "3 new versions"
   alone on a second row under the other three. */
@media (max-width: 480px) {
    .fs-caption-chips[b-7caccq6hso] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fs-caption-chip[b-7caccq6hso] {
        justify-content: center;
        line-height: 1.25;
        padding: 6px 10px;
        text-align: center;
    }
}

/* An iPhone zooms the page into any field under 16px when it is tapped, and leaves it zoomed
   after. Every other field in the app is 16px on a touch screen already. */
@media (pointer: coarse) {
    .fs-caption-ask input[b-7caccq6hso] {
        font-size: 16px;
    }
}
/* /Components/Studio/StudioComposer.razor.rz.scp.css */
.fs-shell[b-uc23kkhm1g] {
    min-height: 100dvh;
    background: var(--bg-canvas);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    overflow: visible;
    letter-spacing: 0;
}

.fs-header[b-uc23kkhm1g] {
    min-height: 66px;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px 24px;
    background: #ffffff;
}

.fs-brand[b-uc23kkhm1g],
.fs-header-status[b-uc23kkhm1g],
.fs-header-actions[b-uc23kkhm1g],
.fs-ai-pill[b-uc23kkhm1g],
.fs-ai-chips[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
}

.fs-brand[b-uc23kkhm1g] {
    gap: 12px;
}

/* The draft's save state. It sat at the foot of the step rail; with the rail
   gone it is the one thing between the brand and the way out. */
.fs-header-status[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    gap: 6px;
    justify-self: start;
    min-width: 0;
}

/* Cut short rather than run on under the buttons beside it. */
.fs-status-label[b-uc23kkhm1g] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-status-dot[b-uc23kkhm1g] {
    width: 6px;
    height: 6px;
    background: var(--green-ink);
    border-radius: 50%;
    flex: 0 0 auto;
}

.fs-status-dot.warning[b-uc23kkhm1g] {
    background: var(--amber);
}

.fs-status-dot.pending[b-uc23kkhm1g] {
    background: var(--text-secondary);
}

/* After a refused save, the way to send it again, beside the words that say so. */
.fs-save-retry[b-uc23kkhm1g] {
    min-height: 44px;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.fs-save-retry:hover[b-uc23kkhm1g] {
    color: var(--accent-dark);
}

.fs-save-retry:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Narrower than this it ran under Ask (measured at 500px). The warning by the caption has
   its own Try again. */
@media (max-width: 600px) {
    .fs-save-retry[b-uc23kkhm1g] {
        display: none;
    }
}

.fs-brand-mark[b-uc23kkhm1g] {
    width: 30px;
    height: 30px;
    align-items: center;
    background: var(--accent);
    border-radius: var(--radius-xs);
    color: #ffffff;
    display: inline-flex;
    font-size: var(--fs-note);
    font-weight: 700;
    justify-content: center;
}

.fs-brand-name[b-uc23kkhm1g] {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.fs-icon-button[b-uc23kkhm1g],
.fs-ai-chips button[b-uc23kkhm1g],
.fs-ai-send[b-uc23kkhm1g] {
    border: 1px solid var(--border-light);
    cursor: pointer;
    font: inherit;
}

.fs-ai-chips button:disabled[b-uc23kkhm1g],
.fs-ai-send:disabled[b-uc23kkhm1g],
.fs-ai-textarea:disabled[b-uc23kkhm1g],
.fs-start-option:disabled[b-uc23kkhm1g],
.fs-start-option.disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.58;
}

.fs-schedule-panel input:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-header-actions[b-uc23kkhm1g] {
    gap: 10px;
}

/* Leaving for Auto Mode is a way out, not the work, so it is set as a quiet
   link. The bordered button it replaced was the heaviest thing in the header. */
.fs-mode-link[b-uc23kkhm1g] {
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0 8px;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    white-space: nowrap;
}

.fs-mode-link:hover[b-uc23kkhm1g] {
    color: var(--text);
    text-decoration-color: currentColor;
}

/* The question before leaving for Auto Mode, hung from the link that asks it. */
.fs-mode-switch[b-uc23kkhm1g] {
    position: relative;
}

.fs-auto-confirm-scrim[b-uc23kkhm1g] {
    inset: 0;
    position: fixed;
    z-index: 30;
}

.fs-auto-confirm[b-uc23kkhm1g] {
    width: min(320px, calc(100vw - 32px));
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(25, 33, 38, 0.14);
    display: grid;
    gap: 8px;
    padding: 16px;
    position: absolute;
    right: 0;
    text-align: left;
    top: calc(100% + 8px);
    z-index: 31;
}

.fs-auto-confirm strong[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.fs-auto-confirm p[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin: 0;
}

.fs-auto-confirm-actions[b-uc23kkhm1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.fs-auto-confirm-actions button[b-uc23kkhm1g] {
    min-height: 40px;
    border-radius: var(--radius-control);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 0 14px;
}

.fs-auto-confirm-go[b-uc23kkhm1g] {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

.fs-auto-confirm-go:hover[b-uc23kkhm1g] {
    background: var(--accent-dark);
}

.fs-auto-confirm-stay[b-uc23kkhm1g] {
    background: #ffffff;
    border: 1px solid var(--border-light);
    color: var(--text);
}

.fs-auto-confirm-stay:hover[b-uc23kkhm1g] {
    border-color: var(--text);
}

.fs-auto-confirm-actions button:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.fs-icon-button[b-uc23kkhm1g] {
    width: 44px;
    height: 44px;
    align-items: center;
    background: #ffffff;
    border-radius: var(--radius-control);
    display: inline-flex;
    justify-content: center;
    flex: 0 0 44px;
    color: var(--text-secondary);
}

.fs-icon-button svg[b-uc23kkhm1g] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.fs-icon-button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.45;
}

.fs-session-banner[b-uc23kkhm1g] {
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    font-size: var(--fs-sm);
    gap: 16px;
    justify-content: space-between;
    padding: 12px 28px;
    flex-wrap: wrap;
}

.fs-session-banner.info[b-uc23kkhm1g] {
    background: var(--tint-blue);
    color: var(--accent);
}

.fs-session-banner.warning[b-uc23kkhm1g] {
    background: var(--tint-amber);
    color: var(--amber);
}

.fs-session-banner-actions[b-uc23kkhm1g] {
    display: flex;
    gap: 8px;
}

.fs-session-banner-actions button[b-uc23kkhm1g] {
    height: 44px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-control);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

/* Ask: questions about the whole post, in a drawer. A button, not a link like
   the way out beside it, because it opens part of this editor. The dot says a
   reply came in while the drawer was closed. */
.fs-ask-placeholder[b-uc23kkhm1g] {
    visibility: hidden;
}

.fs-ask-toggle[b-uc23kkhm1g] {
    min-height: 44px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    gap: 8px;
    padding: 0 14px;
    position: relative;
}

.fs-ask-toggle:hover:not(:disabled)[b-uc23kkhm1g] {
    border-color: var(--text);
}

/* Off while the post cannot be opened: there is no post to ask about. */
.fs-ask-toggle:disabled[b-uc23kkhm1g] {
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: .55;
}

.fs-ask-toggle.open[b-uc23kkhm1g] {
    background: var(--tint-blue);
    border-color: var(--accent);
    color: var(--accent);
}

.fs-ask-toggle svg[b-uc23kkhm1g] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.fs-ask-dot[b-uc23kkhm1g] {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    right: -4px;
    top: -4px;
}

@media (pointer: fine) {
    .fs-ask-toggle[b-uc23kkhm1g] {
        min-height: 36px;
    }
}

/* One column: the post. The guide used to be a pane down the left that every
   edit went through. The AI now sits on the part of the post being edited, and
   the guide waits in the Ask drawer, which takes a column of its own beside the
   post only where the window has room for both (the drawer's own stylesheet
   lays it over the post on anything narrower). */
.fs-body[b-uc23kkhm1g] {
    min-height: 0;
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
}

/* A saved post on its way: a quiet line where the post will be, not an empty post. */
.fs-opening[b-uc23kkhm1g] {
    margin: clamp(24px, 8vh, 72px) auto;
}

/* The post could not be opened: .fs-unavailable takes its place, says why and offers the way on. */
.fs-body.unavailable[b-uc23kkhm1g] {
    display: none;
}

.fs-unavailable[b-uc23kkhm1g] {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin: clamp(24px, 8vh, 72px) auto;
    max-width: 480px;
    padding: 28px;
    width: calc(100% - 32px);
}

.fs-unavailable h2[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 8px;
}

.fs-unavailable p[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 20px;
}

.fs-unavailable p.fs-unavailable-links[b-uc23kkhm1g] {
    align-items: center;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    margin-bottom: 8px;
    margin-top: -20px;
}

.fs-unavailable p.fs-unavailable-error[b-uc23kkhm1g] {
    color: var(--red-ink);
    margin-bottom: 12px;
}

/* The post that went out, small: what Post it again starts from. */
.fs-unavailable-post[b-uc23kkhm1g] {
    align-items: flex-start;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 12px;
    margin: 12px 0 20px;
    padding: 12px;
}

.fs-unavailable-post img[b-uc23kkhm1g] {
    /* Not a white hole while it loads. */
    background: var(--bg-canvas);
    border-radius: 6px;
    flex-shrink: 0;
    height: 64px;
    object-fit: cover;
    width: 64px;
}

.fs-unavailable p.fs-unavailable-caption[b-uc23kkhm1g] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--text);
    display: -webkit-box;
    line-clamp: 3;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Tall enough to tap; the line under the words was 20px. */
.fs-unavailable-links a[b-uc23kkhm1g] {
    color: var(--blue);
    font-weight: 600;
    min-height: 44px;
    text-decoration: none;
}

.fs-unavailable-actions[b-uc23kkhm1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-unavailable-actions a[b-uc23kkhm1g] {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

/* On a phone two buttons shared a row and the third sat alone under them. One to a row. */
@media (max-width: 480px) {
    .fs-unavailable-actions > *[b-uc23kkhm1g] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    .fs-body.ask-open[b-uc23kkhm1g] {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 420px);
    }
}

/* The work area holds only the post. The drawer is its own column of .fs-body
   so it carries its own surface instead of floating in this one's padding.

   No bottom padding. The next bar is the last thing in the work area and sits
   on its bottom edge, and a sticky box stops at its scroller's padding edge, so
   bottom padding here held the bar 32px off the foot of the frame. */
/* Positioned so it holds its absolutely placed children, the screen reader
   text among them. Without it they are placed against the page, outside the
   work area's scroll and the shell's clip, and make the whole page scroll. */
.fs-workspace[b-uc23kkhm1g] {
    --fs-work-pad-top: 32px;
    --fs-work-pad-x: 32px;
    min-height: 0;
    background: var(--bg-canvas);
    display: flex;
    flex-direction: column;
    padding: var(--fs-work-pad-top) var(--fs-work-pad-x) 0;
    position: relative;
}

/* Mid-size windows get tighter padding along with their tighter columns. This
   has to come after the rule above: it sat in the mid-size block earlier in
   the file, where the base rule overrode it and it never applied. */
@media (min-width: 901px) and (max-width: 1200px) {
    .fs-workspace[b-uc23kkhm1g] {
        --fs-work-pad-top: 24px;
        --fs-work-pad-x: 24px;
    }
}

/* Grows to fill a short step, so the next bar sits at the foot of the work
   area instead of straight under the content. */
.fs-artifact[b-uc23kkhm1g] {
    flex: 1 0 auto;
    min-width: 0;
    /* Room to scroll the last row out from under the offline notice (connection-notice.js). */
    padding-bottom: var(--connection-notice-room, 0px);
}

/* Where do I go next. Pinned to the bottom of the work area on every step:
   what the post still needs on the left, the one move forward on the right.
   The negative side margins take it to the edges of the padded work area, so
   it reads as the area's own footer rather than a card floating in it. */
.fs-next-bar[b-uc23kkhm1g] {
    align-items: center;
    background: #ffffff;
    border-top: 1px solid var(--border-light);
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    margin: 32px calc(-1 * var(--fs-work-pad-x)) 0;
    /* The bar spans the area, its contents do not: on a wide screen "2 of 3 ready" sat at the
       far left and Schedule at the far right, 1400px apart around a 640px post. They keep to an
       880px column over the post; on narrower areas this is the area's own padding. */
    padding: 12px max(var(--fs-work-pad-x), calc((100% + 2 * var(--fs-work-pad-x) - 880px) / 2));
    position: sticky;
    z-index: 3;
}

/* Where the keyboard shrinks the page (Firefox on Android, a phone held sideways), the pinned
   bar took a third of what was left and covered the caption tools being typed under. While a
   box has focus it sits at the end of the post instead. A laptop zoomed to 200% is as short
   (1280 by 800 is 640 by 400), and there the bar took two rows of it, so any pointer. */
@media (max-height: 520px) {
    .fs-shell:has(textarea:focus, input:focus) .fs-next-bar[b-uc23kkhm1g] {
        position: static;
    }
}

/* Zoomed to 400% (1280 by 1024 is 320 by 256) the pinned bar wrapped to three rows and covered
   more than half the window, leaving the post a strip. There it always sits at the end. */
@media (max-height: 320px) {
    .fs-next-bar[b-uc23kkhm1g] {
        position: static;
    }
}

/* One line: how many platforms could go out, the first thing holding one
   back, and the way to fix it. The tabs say the same per platform. */
.fs-next-summary[b-uc23kkhm1g] {
    align-items: center;
    container: fs-next-summary / inline-size;
    color: var(--text);
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 4px 10px;
    margin: 0;
    min-height: 44px;
    min-width: 0;
}

.fs-next-count[b-uc23kkhm1g] {
    font-weight: 700;
    white-space: nowrap;
}

.fs-next-issue[b-uc23kkhm1g] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* "Next:", the step and its fix flow as one run of text rather than three flex
   items, so a wrap cannot leave "Next:" at the end of a line on its own. */
.fs-next-step[b-uc23kkhm1g] {
    min-width: 0;
}

.fs-next-step .fs-ready-fix[b-uc23kkhm1g] {
    margin-left: 2px;
}

.fs-ready-fix[b-uc23kkhm1g] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    min-height: 44px;
    padding: 0 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.fs-ready-fix:disabled[b-uc23kkhm1g],
.fs-ready-fix[aria-disabled='true'][b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-ready-fix:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* 44px rows are for fingers. With a mouse they only make the bar tall when
   the list wraps, and 32px stays well clear of the 24px target minimum. */
@media (pointer: fine) {
    .fs-next-summary[b-uc23kkhm1g],
    .fs-ready-fix[b-uc23kkhm1g] {
        min-height: 32px;
    }
}

.fs-glyph[b-uc23kkhm1g] {
    width: 16px;
    height: 16px;
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 16px;
    justify-content: center;
}

.fs-glyph svg[b-uc23kkhm1g] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fs-glyph.done[b-uc23kkhm1g] {
    background: var(--tint-green);
    color: var(--green-ink);
}

/* Still to do, not wrong: an open ring, the way an unticked box reads. */
.fs-glyph.needed[b-uc23kkhm1g] {
    box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}

.fs-glyph.problem[b-uc23kkhm1g] {
    background: var(--tint-amber);
    box-shadow: inset 0 0 0 1.5px var(--amber);
    color: var(--amber);
}

/* High Contrast drops box-shadow, so the open ring went blank and the problem mark was a
   lone "!" smaller than the words beside it. A border stays. */
@media (forced-colors: active) {
    .fs-glyph.needed[b-uc23kkhm1g],
    .fs-glyph.problem[b-uc23kkhm1g] {
        border: 1.5px solid CanvasText;
        box-shadow: none;
    }
}

.fs-next-action[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    gap: 14px;
    margin-left: auto;
    min-width: 0;
}

.fs-next-primary[b-uc23kkhm1g] {
    min-height: 44px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 0 20px;
    white-space: nowrap;
}

.fs-next-primary:not(:disabled):hover[b-uc23kkhm1g] {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

.fs-next-primary:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

/* ── When it goes out ────────────────────────────────────────────────────────
   The footer carries the time as a chip; it opens every platform's time over
   the bar. What is booked reads as a link to the same place. */

.fs-next-scheduled[b-uc23kkhm1g] {
    min-height: 32px;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: var(--border-light);
    text-underline-offset: 3px;
    white-space: nowrap;
}

.fs-next-scheduled:hover[b-uc23kkhm1g] {
    text-decoration-color: currentColor;
}

.fs-next-scheduled:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.fs-next-label[b-uc23kkhm1g] {
    color: var(--text-secondary);
}

/* The dot trails the part it follows. It led the next part, so when the bar wrapped (a tablet,
   or a long reason) the second line began with a stray dot. */
.fs-next-scheduled:has(+ .fs-next-count)[b-uc23kkhm1g]::after,
.fs-next-scheduled:has(+ .fs-next-step)[b-uc23kkhm1g]::after,
.fs-next-scheduled:has(+ .fs-next-calendar)[b-uc23kkhm1g]::after,
.fs-next-count:has(+ .fs-next-step)[b-uc23kkhm1g]::after {
    color: var(--text-secondary);
    content: "·";
    content: "·" / "";
    display: inline-block;
    font-weight: 400;
    margin-left: 10px;
}

/* Too narrow for one line, so what is next gets a line of its own under the count, lined up
   with its text, and needs no separator. It goes by the summary's own width, not the screen's:
   where the time and the button take a row of their own (a laptop at 200% zoom, 720 by 450)
   the summary has the whole row for one line, and a third row took a fifth of the screen. */
@container fs-next-summary (max-width: 480px) {
    .fs-next-count + .fs-next-step[b-uc23kkhm1g],
    .fs-next-scheduled + .fs-next-step[b-uc23kkhm1g] {
        flex: 1 0 100%;
        padding-left: 26px;
    }

    /* The link keeps a target the size of its words; the indent lines it up with the text. */
    .fs-next-scheduled + .fs-next-calendar[b-uc23kkhm1g] {
        margin-right: 100%;
        margin-left: 22px;
    }

    .fs-next-count:has(+ .fs-next-step)[b-uc23kkhm1g]::after,
    .fs-next-scheduled:has(+ .fs-next-step)[b-uc23kkhm1g]::after,
    .fs-next-scheduled:has(+ .fs-next-calendar)[b-uc23kkhm1g]::after {
        content: none;
    }
}

.fs-next-time[b-uc23kkhm1g] {
    flex: 0 0 auto;
    position: relative;
}

.fs-time-chip[b-uc23kkhm1g] {
    min-height: 44px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 8px;
    padding: 0 14px;
    white-space: nowrap;
}

.fs-time-chip svg[b-uc23kkhm1g] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.fs-time-chip:not(:disabled):hover[b-uc23kkhm1g] {
    background: var(--bg-canvas);
}

.fs-time-chip[aria-expanded='true'][b-uc23kkhm1g],
.fs-next-time.focused .fs-time-chip[b-uc23kkhm1g] {
    border-color: var(--accent);
}

.fs-time-chip:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-time-chip:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.fs-time-scrim[b-uc23kkhm1g] {
    inset: 0;
    position: fixed;
    z-index: 4;
}

.fs-time-popover[b-uc23kkhm1g] {
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 620px);
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    bottom: calc(100% + 10px);
    box-shadow: 0 12px 32px rgba(25, 33, 38, 0.14);
    display: grid;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    position: absolute;
    right: 0;
    text-align: left;
    z-index: 5;
}

.fs-time-head[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.fs-time-head h2[b-uc23kkhm1g] {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
}

.fs-time-hint[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0;
}

/* As the Dashboard's Coming up marks an occasion. */
.fs-time-occasion[b-uc23kkhm1g] {
    color: var(--amber-ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
}

.fs-time-rows[b-uc23kkhm1g] {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-time-row-head[b-uc23kkhm1g] {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.fs-time-row-name[b-uc23kkhm1g] {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.fs-time-row-state[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-left: auto;
    text-align: right;
}

/* Beside "Scheduled for Fri 9:30 AM", the way off the schedule. */
.fs-time-row-head .fs-link-button[b-uc23kkhm1g] {
    min-height: 32px;
    font-size: var(--fs-xs);
}

.fs-platform-time[data-state='booked'] .fs-time-row-state[b-uc23kkhm1g],
.fs-platform-time[data-state='sending'] .fs-time-row-state[b-uc23kkhm1g],
.fs-platform-time[data-state='posted'] .fs-time-row-state[b-uc23kkhm1g] {
    color: var(--green-ink);
    font-weight: 600;
}

.fs-platform-time[data-state='held'] .fs-time-row-state[b-uc23kkhm1g],
.fs-platform-time[data-state='off'] .fs-time-row-state[b-uc23kkhm1g],
.fs-platform-time[data-state='failed'] .fs-time-row-state[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 600;
}

.fs-platform-time p.fs-time-moves[b-uc23kkhm1g] {
    color: var(--accent);
    font-weight: 600;
}

.fs-time-save[b-uc23kkhm1g] {
    display: flex;
    justify-content: flex-end;
}

.fs-time-calendar[b-uc23kkhm1g] {
    justify-self: start;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.fs-time-calendar:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.fs-time-save button[b-uc23kkhm1g] {
    min-height: 40px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 0 16px;
}

.fs-time-save button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

/* Where this platform stands on the schedule, under the frame's header. */
.fs-frame-banner[b-uc23kkhm1g] {
    align-items: center;
    background: var(--tint-blue);
    border-block: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 14px;
}

.fs-frame-banner.warning[b-uc23kkhm1g] {
    background: var(--tint-amber);
}

.fs-frame-banner p[b-uc23kkhm1g] {
    flex: 1 1 260px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
}

.fs-frame-banner-reason[b-uc23kkhm1g] {
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.fs-frame-banner a[b-uc23kkhm1g] {
    color: var(--accent);
    font-weight: 700;
    margin-left: 4px;
}

/* "See the post" opens the live post in a new tab, so it carries the opens-elsewhere mark,
   kept on the line with the words. */
.fs-posted-link[b-uc23kkhm1g] {
    align-items: center;
    display: inline-flex;
    gap: 3px;
    vertical-align: bottom;
}

/* A real space sits before it now, so the words copy and read as a sentence and a link; the
   margin the banner gives its links would double that gap. */
.fs-frame-banner a.fs-posted-link[b-uc23kkhm1g] {
    margin-left: 0;
}

/* A fix beside the line, not inside it, sits with the buttons at their size. It inherited the
   body size and outweighed the button next to it. */
.fs-frame-banner > a[b-uc23kkhm1g] {
    align-items: center;
    display: inline-flex;
    font-size: var(--fs-xs);
    margin-left: 0;
    min-height: 36px;
}

.fs-frame-banner button[b-uc23kkhm1g] {
    min-height: 36px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 12px;
    white-space: nowrap;
}

.fs-frame-banner button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-frame-remove[b-uc23kkhm1g] {
    min-height: 32px;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-frame-remove:not(:disabled):hover[b-uc23kkhm1g] {
    color: var(--text);
}

.fs-frame-remove:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-frame-posted .fs-frame-caption-posted[b-uc23kkhm1g] {
    font-size: var(--fs-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
    padding: 12px 14px 14px;
}

/* Hung off the time's own right edge, the 420px box ran 15px off the left of a 640px screen
   (a laptop at 200% zoom), past "When it goes out". It hangs off the row's right edge instead,
   which is the button's. */
@media (max-width: 760px) {
    .fs-next-time[b-uc23kkhm1g] {
        position: static;
    }

    .fs-next-action[b-uc23kkhm1g] {
        position: relative;
    }
}

@media (max-width: 600px) {
    /* On a phone it opens as a sheet over the bar, the width of the screen. */
    .fs-time-popover[b-uc23kkhm1g] {
        width: 100%;
        left: 0;
        right: 0;
    }

    .fs-time-chip[b-uc23kkhm1g] {
        height: 100%;
    }
}
/* The desktop app-frame rules that make this shell hold still while the work
   area scrolls inside it live in Pages/StudioCreate.razor.css, the page that
   hosts this composer. They are there rather than here because the page's own
   rules turn the frame off at a specificity this stylesheet cannot beat. The
   next bar's sticky position depends on them: on desktop the work area is its
   scroller, on a phone the page is. */

.fs-eyebrow[b-uc23kkhm1g] {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    margin: 0 0 12px;
}

/* ── The post ────────────────────────────────────────────────────────────────
   Tabs for the platforms along the top. Under them, the tab's platform shown
   the way it will look, and edited there. One post wide: about the width a
   feed shows a post at, centred in the work area. */

.fs-post[b-uc23kkhm1g] {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
}

.fs-post-tabs[b-uc23kkhm1g] {
    align-items: flex-end;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
}

/* The list, not each tab, drops over the row's rule. A tab that did it was
   clipped by the list's own scrolling, which also showed a scrollbar for the
   pixel it hid. */
.fs-tablist[b-uc23kkhm1g] {
    display: flex;
    gap: 4px;
    margin-bottom: -1px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Windows drew a full scrollbar with arrow buttons under the tabs. The strip still
       scrolls by touch, wheel and keyboard; the faded edge says there is more. */
    scrollbar-width: none;
}

.fs-tablist[b-uc23kkhm1g]::-webkit-scrollbar {
    display: none;
}

/* The edge fades only on a side with more tabs past it, driven by the strip's own scroll.
   A strip that fits has no scroll timeline, so the fades stay at zero and nothing fades. */
@property --fs-tab-fade-start {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --fs-tab-fade-end {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@keyframes fs-tab-fade-b-uc23kkhm1g {
    0% {
        --fs-tab-fade-start: 0px;
        --fs-tab-fade-end: 32px;
    }

    8%,
    92% {
        --fs-tab-fade-start: 32px;
        --fs-tab-fade-end: 32px;
    }

    100% {
        --fs-tab-fade-start: 32px;
        --fs-tab-fade-end: 0px;
    }
}

@supports (animation-timeline: scroll()) {
    .fs-tablist[b-uc23kkhm1g] {
        animation: fs-tab-fade-b-uc23kkhm1g linear both;
        animation-timeline: scroll(self inline);
        mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--fs-tab-fade-start),
            #000 calc(100% - var(--fs-tab-fade-end)),
            transparent 100%);
    }
}

/* Taking a platform off says so under the tabs, with the one click that puts it back. */
.fs-platform-removed[b-uc23kkhm1g] {
    align-items: center;
    background: var(--bg-canvas);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 4px 12px;
    justify-content: space-between;
    margin: 0 0 16px;
    padding: 6px 6px 6px 12px;
}

.fs-platform-removed button[b-uc23kkhm1g] {
    min-height: 36px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

.fs-platform-removed button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

/* A platform's tab reads as its name with what it needs, or when it goes, under
   it. On one line the notes pushed a fourth platform out of sight; stacked,
   four platforms and Add fit the post's width. */
.fs-tablist .fs-post-tab[b-uc23kkhm1g] {
    min-height: 52px;
    align-content: center;
    column-gap: 8px;
    display: inline-grid;
    grid-template-areas:
        "glyph name"
        "glyph note";
    grid-template-columns: auto auto;
    margin-bottom: 0;
    row-gap: 1px;
    text-align: left;
}

.fs-tablist .fs-post-tab > .fs-glyph[b-uc23kkhm1g] {
    grid-area: glyph;
}

.fs-tablist .fs-post-tab-name[b-uc23kkhm1g] {
    grid-area: name;
}

.fs-tablist .fs-post-tab-note[b-uc23kkhm1g] {
    grid-area: note;
    line-height: 1.2;
}

/* An underline tab. The bottom border sits on the row's rule, so the active
   one reads as the page it opens rather than a button beside it. */
.fs-post-tab[b-uc23kkhm1g] {
    min-height: 48px;
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 8px;
    margin-bottom: -1px;
    padding: 0 12px;
    white-space: nowrap;
}

.fs-post-tab:not(:disabled):hover[b-uc23kkhm1g] {
    color: var(--text);
}

.fs-post-tab.active[b-uc23kkhm1g] {
    border-bottom-color: var(--accent);
    color: var(--text);
    font-weight: 700;
}

.fs-post-tab:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

/* The tab list scrolls sideways, which clips anything drawn outside it, so the
   focus ring sits inside the tab. */
.fs-post-tabs .fs-post-tab:focus-visible[b-uc23kkhm1g] {
    outline-offset: -3px !important;
}

.fs-post-tab-note[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.fs-post-tab[data-readiness='problem'] .fs-post-tab-note[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 600;
}

.fs-post-tab[data-schedule='booked'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-schedule='sending'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-schedule='posted'] .fs-post-tab-note[b-uc23kkhm1g] {
    color: var(--green-ink);
}

.fs-post-tab[data-schedule='held'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-schedule='off'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-schedule='failed'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-words='same'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-connection='problem'] .fs-post-tab-note[b-uc23kkhm1g],
.fs-post-tab[data-schedule='booked'][data-readiness='problem'] .fs-post-tab-note[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 600;
}

.fs-add-platform[b-uc23kkhm1g] {
    flex: 0 0 auto;
    position: relative;
}

.fs-add-platform-toggle[b-uc23kkhm1g] {
    color: var(--accent);
}

/* The tabs' hover darkens their names to the text colour, which turned the blue Add
   sign black under the pointer, as if it had gone dead. */
.fs-post-tab.fs-add-platform-toggle:not(:disabled):hover[b-uc23kkhm1g] {
    color: var(--accent-dark);
}

.fs-add-platform-scrim[b-uc23kkhm1g] {
    inset: 0;
    position: fixed;
    z-index: 4;
}

.fs-add-platform-toggle svg[b-uc23kkhm1g] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.fs-add-platform-menu[b-uc23kkhm1g] {
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(25, 33, 38, 0.14);
    display: grid;
    gap: 2px;
    /* Add sits at the end of the row, so the menu opens back over the tabs. Anchored on
       the left it hung past a narrow window and made the whole page scroll sideways. */
    right: 0;
    padding: 6px;
    position: absolute;
    top: calc(100% + 6px);
    z-index: 5;
}

.fs-add-platform-menu button[b-uc23kkhm1g] {
    min-height: 40px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    padding: 0 12px;
    text-align: left;
}

.fs-add-platform-menu button:not(:disabled):hover[b-uc23kkhm1g] {
    background: var(--bg-canvas);
}

/* The platform's name, then whether it can post yet, on one row. */
.fs-add-platform-menu button[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.fs-add-platform-note[b-uc23kkhm1g] {
    color: var(--amber);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.fs-add-platform-menu button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-post-body[b-uc23kkhm1g] {
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* ── The platform's frame ────────────────────────────────────────────────────
   The media box takes the platform's shape from --fs-ratio (width over
   height) and is capped in height, so a tall Reel does not push the caption
   off the screen. The image is contained, not cropped: it posts as it is, so
   a band either side is the honest sign it does not fill that shape, which is
   what "Crop for" is there to fix. */

.fs-frame[b-uc23kkhm1g] {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    scroll-margin-top: 16px;
}

.fs-frame.focused[b-uc23kkhm1g] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint-blue);
}

.fs-frame-head[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
}

.fs-frame-avatar[b-uc23kkhm1g] {
    width: 32px;
    height: 32px;
    align-items: center;
    background: var(--tint-blue);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    flex: 0 0 32px;
    font-size: var(--fs-xs);
    font-weight: 700;
    justify-content: center;
    object-fit: cover;
}

.fs-frame-name[b-uc23kkhm1g] {
    flex: 1 1 auto;
    font-size: var(--fs-sm);
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-frame-format[b-uc23kkhm1g] {
    color: var(--text-secondary);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.fs-frame-own[b-uc23kkhm1g] {
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    padding: 1px 8px;
    white-space: nowrap;
}

.fs-frame-media[b-uc23kkhm1g] {
    --fs-frame-max-h: min(52vh, 480px);
    width: min(100%, calc(var(--fs-frame-max-h) * var(--fs-ratio, 1)));
    aspect-ratio: var(--fs-ratio, 1);
    background: var(--bg-canvas);
    margin-inline: auto;
    overflow: hidden;
    position: relative;
}

.fs-frame-media img[b-uc23kkhm1g],
.fs-frame-media video[b-uc23kkhm1g] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.fs-frame-media video[b-uc23kkhm1g] {
    background: #000000;
}

.fs-frame-placeholder[b-uc23kkhm1g] {
    position: absolute;
    inset: 0;
    align-content: center;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    display: grid;
    font: inherit;
    font-size: var(--fs-xs);
    gap: 6px;
    justify-items: center;
    line-height: 1.4;
    padding: 24px;
    text-align: center;
}

.fs-frame-placeholder strong[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-sm);
}

button.fs-frame-placeholder[b-uc23kkhm1g] {
    cursor: pointer;
}

button.fs-frame-placeholder:not(:disabled):hover[b-uc23kkhm1g] {
    background: var(--tint-blue);
}

button.fs-frame-placeholder:disabled[b-uc23kkhm1g] {
    cursor: default;
}

/* The media box clips, so the ring goes inside it. */
.fs-frame-media button.fs-frame-placeholder:focus-visible[b-uc23kkhm1g] {
    outline-offset: -4px !important;
}

.fs-frame-caption[b-uc23kkhm1g] {
    display: grid;
    gap: 6px;
    padding: 12px 14px 4px;
}

.fs-frame-caption-name[b-uc23kkhm1g] {
    font-weight: 700;
}

/* The caption keeps the owner's line breaks. Only the caption: on the whole
   paragraph it also kept the markup's own line break and indent after the
   name, which pushed the caption onto the next line. */
.fs-frame-caption-text[b-uc23kkhm1g] {
    white-space: pre-wrap;
}

.fs-frame-more[b-uc23kkhm1g] {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    padding: 0 2px;
}

.fs-frame-more:hover[b-uc23kkhm1g] {
    color: var(--text);
}

.fs-frame-meta[b-uc23kkhm1g] {
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    gap: 4px 8px;
    padding: 8px 14px 12px;
}

/* "Main caption · Click the text to edit" reads as one note, the count sits apart. */
.fs-caption-hint[b-uc23kkhm1g]::before {
    content: "\00B7";
    margin-right: 8px;
}

.fs-frame-count[b-uc23kkhm1g] {
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.fs-frame-count.over[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 700;
}

/* ── The caption, edited in place ────────────────────────────────────────────
   The caption is the way into editing it, so it is a button that reads as the
   feed's text until it is hovered or focused. The edit box, the preview and
   the AI under them all stay inside the frame. */

.fs-caption-read[b-uc23kkhm1g] {
    width: calc(100% + 12px);
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: text;
    display: grid;
    font: inherit;
    font-size: var(--fs-sm);
    gap: 6px;
    line-height: 1.45;
    margin: -4px -6px;
    overflow-wrap: anywhere;
    padding: 4px 6px;
    text-align: left;
}

.fs-caption-read:not(:disabled):hover[b-uc23kkhm1g] {
    background: var(--bg-canvas);
}

.fs-caption-read:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.fs-caption-read:disabled[b-uc23kkhm1g] {
    cursor: default;
}

.fs-frame-caption .fs-frame-caption-empty[b-uc23kkhm1g] {
    color: var(--text-secondary);
}

.fs-frame-caption .fs-frame-caption-empty.writing[b-uc23kkhm1g] {
    animation: fs-writing-pulse-b-uc23kkhm1g 1.6s ease-in-out infinite;
    color: var(--accent);
    font-weight: 600;
}

@keyframes fs-writing-pulse-b-uc23kkhm1g {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.fs-caption-read .fs-frame-tags[b-uc23kkhm1g],
.fs-caption-preview .fs-frame-tags[b-uc23kkhm1g] {
    color: var(--accent);
}

.fs-caption-read .fs-frame-more[b-uc23kkhm1g] {
    margin-left: 4px;
}

.fs-caption-editor[b-uc23kkhm1g] {
    display: grid;
    gap: 10px;
    padding: 12px 14px 4px;
}

.fs-caption-editor .fs-caption-box[b-uc23kkhm1g] {
    min-height: 120px;
    font-size: var(--fs-sm);
}

.fs-caption-tags[b-uc23kkhm1g] {
    min-height: 40px;
    max-height: 160px;
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-xs);
    color: var(--accent);
    /* Grows with the tags where the browser can; elsewhere it scrolls and can be pulled taller. */
    field-sizing: content;
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.45;
    padding: 8px 12px;
    resize: vertical;
}

.fs-caption-box:focus-visible[b-uc23kkhm1g],
.fs-caption-tags:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.fs-caption-scope[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0;
}

.fs-caption-scope.warning[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 700;
}

.fs-caption-region > .fs-caption-edit-actions[b-uc23kkhm1g] {
    margin: -2px 14px 14px;
}

.fs-caption-edit-actions[b-uc23kkhm1g],
.fs-caption-preview-actions[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.fs-caption-edit-actions button[b-uc23kkhm1g],
.fs-caption-preview-actions button[b-uc23kkhm1g] {
    min-height: 36px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

.fs-caption-edit-actions button.primary[b-uc23kkhm1g],
.fs-caption-preview-actions button.primary[b-uc23kkhm1g] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.fs-caption-edit-actions button:disabled[b-uc23kkhm1g],
.fs-caption-preview-actions button:disabled[b-uc23kkhm1g],
.fs-caption-preview-actions button[aria-disabled="true"][b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

.fs-caption-edit-actions button:focus-visible[b-uc23kkhm1g],
.fs-caption-preview-actions button:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* What the AI wrote, where the caption goes, until it is kept or undone. */
.fs-caption-preview[b-uc23kkhm1g] {
    background: var(--tint-blue);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 8px;
    margin: 12px 14px 4px;
    padding: 40px 14px 12px;
    position: relative;
}

.fs-caption-preview p[b-uc23kkhm1g] {
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.fs-caption-preview-text[b-uc23kkhm1g] {
    white-space: pre-wrap;
}

.fs-caption-preview p.fs-caption-preview-note[b-uc23kkhm1g] {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-caption-preview-step[b-uc23kkhm1g] {
    align-items: center;
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 700;
    gap: 6px;
    margin-right: auto;
}

.fs-caption-preview-actions .fs-caption-preview-step button[b-uc23kkhm1g] {
    width: 36px;
    display: inline-grid;
    padding: 0;
    place-items: center;
}

.fs-caption-preview-step svg[b-uc23kkhm1g] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fs-caption-region > .fs-variant-message[b-uc23kkhm1g],
.fs-caption-region > .fs-caption-drafts[b-uc23kkhm1g] {
    margin: 0 14px 12px;
}

/* ── The frame's media, edited in place ──────────────────────────────────────
   The photo is the way into its tools, so it is a button that says so on
   hover and focus. What the tools say, and any preview the AI made, sit right
   under it, inside the frame. */

.fs-frame-region[b-uc23kkhm1g] {
    display: grid;
    min-width: 0;
    scroll-margin-top: 16px;
}

.fs-frame-region.focused .fs-frame-media[b-uc23kkhm1g] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.fs-photo-region[b-uc23kkhm1g],
.fs-video-region[b-uc23kkhm1g] {
    display: grid;
    min-width: 0;
}

.fs-photo-open[b-uc23kkhm1g] {
    position: absolute;
    inset: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0;
}

.fs-photo-hint[b-uc23kkhm1g] {
    background: rgba(20, 24, 28, 0.72);
    border-radius: var(--radius-pill);
    bottom: 12px;
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: 6px 12px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 120ms ease;
    white-space: nowrap;
}

.fs-photo-open:hover .fs-photo-hint[b-uc23kkhm1g],
.fs-photo-open:focus-visible .fs-photo-hint[b-uc23kkhm1g],
.fs-photo-open[aria-expanded='true'] .fs-photo-hint[b-uc23kkhm1g] {
    opacity: 1;
}

/* A touch screen has no hover, so the way in stays said. */
@media (hover: none) {
    .fs-photo-hint[b-uc23kkhm1g] {
        opacity: 1;
    }
}

/* Nothing to change while this tab cannot edit, so nothing says there is. */
.fs-photo-open:disabled[b-uc23kkhm1g] {
    cursor: default;
}

.fs-photo-open:disabled .fs-photo-hint[b-uc23kkhm1g] {
    display: none;
}

.fs-frame-media .fs-photo-open:focus-visible[b-uc23kkhm1g] {
    outline-offset: -4px !important;
}

/* On a video the whole box is the player, so the way into the menu is a corner
   button beside its controls rather than the box itself. */
.fs-photo-corner[b-uc23kkhm1g] {
    min-height: 32px;
    background: rgba(20, 24, 28, 0.72);
    /* Transparent, so High Contrast, which drops the dark pill, draws an edge instead. */
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 11px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
}

.fs-preview-tag[b-uc23kkhm1g] {
    background: var(--accent);
    border-radius: var(--radius-pill);
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: 700;
    left: 10px;
    padding: 4px 10px;
    position: absolute;
    top: 10px;
}

.fs-media-busy[b-uc23kkhm1g] {
    align-content: center;
    background: rgba(255, 255, 255, 0.86);
    display: grid;
    font-size: var(--fs-xs);
    gap: 6px;
    inset: 0;
    justify-items: center;
    padding: 24px;
    position: absolute;
    text-align: center;
}

.fs-media-busy strong[b-uc23kkhm1g] {
    font-size: var(--fs-sm);
}

.fs-media-busy button[b-uc23kkhm1g],
.fs-frame-button[b-uc23kkhm1g] {
    min-height: 40px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

.fs-frame-button.primary[b-uc23kkhm1g] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.fs-frame-button.warning[b-uc23kkhm1g] {
    border-color: var(--tint-amber-line);
    color: var(--amber);
}

.fs-media-busy button:disabled[b-uc23kkhm1g],
.fs-frame-button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

/* What the AI made, waiting on Keep or Undo. It changes nothing until Keep. */
.fs-preview-bar[b-uc23kkhm1g] {
    align-items: center;
    background: var(--tint-blue);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 8px 12px;
    justify-content: space-between;
    padding: 10px 14px;
}

.fs-preview-bar > span[b-uc23kkhm1g] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-preview-actions[b-uc23kkhm1g] {
    display: flex;
    gap: 8px;
}

.fs-preview-actions button[b-uc23kkhm1g] {
    min-height: 36px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

.fs-preview-actions button.primary[b-uc23kkhm1g] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.fs-preview-actions button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

.fs-frame-note[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    padding: 8px 14px 0;
}

.fs-frame-note.warning[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 700;
}

.fs-frame-note-action[b-uc23kkhm1g] {
    min-height: 32px;
    margin-left: 6px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0 10px;
}

.fs-frame-note-action:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

/* A video platform with no video yet says so in the frame, with the two ways
   to make one. */
.fs-frame-video-choices[b-uc23kkhm1g] {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    width: min(100%, 220px);
}

.fs-frame-progress[b-uc23kkhm1g] {
    width: min(100%, 200px);
    height: 6px;
    background: var(--border-light);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.fs-frame-progress span[b-uc23kkhm1g] {
    height: 100%;
    background: var(--accent);
    display: block;
}

.fs-video-toolbar[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    font-weight: 700;
    gap: 8px 12px;
    justify-content: space-between;
    padding: 10px 14px 0;
}

.fs-video-toolbar > div[b-uc23kkhm1g] {
    display: flex;
    gap: 8px;
}

.fs-video-toolbar button[b-uc23kkhm1g] {
    min-height: 36px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 12px;
}

.fs-video-toolbar button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

.fs-video-toolbar .fs-video-warning[b-uc23kkhm1g] {
    color: var(--amber);
    display: block;
}

/* Making a video in the frame: what it shows, how long and the sound, with the
   rest under More options. */
.fs-video-form[b-uc23kkhm1g] {
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 12px;
    padding: 14px;
}

.fs-video-form-field[b-uc23kkhm1g] {
    display: grid;
    gap: 6px;
}

.fs-video-form-field span[b-uc23kkhm1g],
.fs-video-choice legend[b-uc23kkhm1g],
.fs-video-form-options label > span[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-video-form textarea[b-uc23kkhm1g],
.fs-video-form-options input[b-uc23kkhm1g],
.fs-video-form-options select[b-uc23kkhm1g] {
    min-width: 0;
    min-height: 44px;
    background: #ffffff;
    /* The field token: the hairline was 1.27:1 on white, too faint to see as a box. */
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    padding: 8px 12px;
}

.fs-video-form textarea[b-uc23kkhm1g] {
    line-height: 1.45;
    resize: vertical;
}

.fs-video-form-choices[b-uc23kkhm1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.fs-video-choice[b-uc23kkhm1g] {
    align-items: center;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fs-video-choice legend[b-uc23kkhm1g] {
    float: left;
    margin-right: 6px;
    padding: 0;
}

/* On a phone "Length" beside its choices left "8 seconds" alone on a second row. The legend goes
   above them, as Shape and Camera do, and the lengths wrap in rows under it. */
@media (max-width: 560px) {
    .fs-video-choice legend[b-uc23kkhm1g] {
        margin: 0 0 2px;
        width: 100%;
    }
}

.fs-video-choice label[b-uc23kkhm1g] {
    min-height: 36px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 600;
    gap: 6px;
    padding: 0 12px;
}

.fs-video-choice label:has(input:checked)[b-uc23kkhm1g] {
    background: var(--tint-blue);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.fs-video-choice input[b-uc23kkhm1g] {
    accent-color: var(--accent);
    margin: 0;
}

.fs-video-form-more[b-uc23kkhm1g] {
    min-height: 32px;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    justify-self: start;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-video-form-options[b-uc23kkhm1g] {
    display: grid;
    gap: 10px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fs-video-form-options label[b-uc23kkhm1g] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fs-video-form-options .wide[b-uc23kkhm1g] {
    grid-column: 1 / -1;
}

.fs-video-form-options small[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.fs-video-form-note[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0;
}

.fs-video-form-note.warning[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 700;
}

.fs-video-form-actions[b-uc23kkhm1g] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.fs-video-form-actions button[b-uc23kkhm1g] {
    min-height: 44px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 0 16px;
}

.fs-video-form-actions button.primary[b-uc23kkhm1g] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.fs-video-form-actions button:disabled[b-uc23kkhm1g],
.fs-video-form textarea:disabled[b-uc23kkhm1g],
.fs-video-form-options input:disabled[b-uc23kkhm1g],
.fs-video-form-options select:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

@media (max-width: 600px) {
    .fs-video-form-options[b-uc23kkhm1g] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Under 16px, an iPhone zooms the page when a field is tapped and leaves it zoomed. */
@media (max-width: 600px), (pointer: coarse) {
    .fs-video-form textarea[b-uc23kkhm1g],
    .fs-video-form-options input[b-uc23kkhm1g],
    .fs-video-form-options select[b-uc23kkhm1g] {
        font-size: var(--fs-md);
    }
}

/* A model that makes set shapes: fill the frame or fit the whole photo, with how it will start. */
.fs-video-fit[b-uc23kkhm1g] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    margin: 0;
    min-width: 0;
    padding: 10px 12px 12px;
}

.fs-video-fit legend[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 4px;
}

.fs-video-fit-body[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 16px;
}

.fs-video-fit-choices[b-uc23kkhm1g] {
    display: grid;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
}

.fs-video-fit-choices label[b-uc23kkhm1g] {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 8px;
    min-height: 32px;
}

/* The form's text-box rule (44px high, padded, bordered) would otherwise reach these radios. */
.fs-video-fit .fs-video-fit-choices input[type="radio"][b-uc23kkhm1g] {
    accent-color: var(--accent);
    background: none;
    border: 0;
    margin: 0;
    min-height: 0;
    padding: 0;
}

.fs-video-fit .fs-video-fit-choices label > span[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.fs-video-fit-choices small[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.fs-video-fit-preview[b-uc23kkhm1g] {
    background: #1b1b1b;
    border-radius: 6px;
    flex: 0 0 auto;
    max-height: 132px;
    max-width: 132px;
    overflow: hidden;
    position: relative;
    width: 132px;
}

/* A portrait frame is limited by its height, so it narrows instead of growing tall. */
.fs-video-fit-preview[style*="9 / 16"][b-uc23kkhm1g],
.fs-video-fit-preview[style*="4 / 5"][b-uc23kkhm1g] {
    height: 132px;
    width: auto;
}

.fs-video-fit-preview img[b-uc23kkhm1g] {
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.fs-video-fit-preview.fill .fs-video-fit-photo[b-uc23kkhm1g] {
    object-fit: cover;
}

.fs-video-fit-preview.whole .fs-video-fit-photo[b-uc23kkhm1g] {
    object-fit: contain;
}

.fs-video-fit-backdrop[b-uc23kkhm1g] {
    filter: blur(8px) brightness(0.95);
    object-fit: cover;
    transform: scale(1.15);
}

/* The post's video, under the photo on a tab that posts the photo. */
.fs-video-strip[b-uc23kkhm1g] {
    padding: 0 14px;
}

.fs-video-strip .fs-video-panel[b-uc23kkhm1g] {
    width: 100%;
}

/* The frame above already plays the video, so the strip is its line and buttons. */
.fs-video-panel.no-preview[b-uc23kkhm1g] {
    grid-template-columns: minmax(0, 1fr);
}

/* The three ways in sit where the photo will go, inside the frame, so they
   drop the card they had as a panel of their own. */
.fs-frame-region .fs-start-section[b-uc23kkhm1g] {
    background: var(--bg-canvas);
    border: 0;
    border-block: 1px solid var(--border-light);
    border-radius: 0;
}

/* An empty post is all start box, so marking it as where things are happening says
   nothing and reads as keyboard focus around the whole post. */
.fs-frame-region .fs-start-section.focused[b-uc23kkhm1g] {
    border-color: var(--border-light);
    box-shadow: none;
}

.fs-start-more[b-uc23kkhm1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

/* ── Sections of the panel ───────────────────────────────────────────────── */

.fs-section[b-uc23kkhm1g] {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    scroll-margin-top: 16px;
}

/* Where the guide is working, or what a fix in the footer brought up. */
.fs-section.focused[b-uc23kkhm1g] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint-blue);
}

.fs-section-head h2[b-uc23kkhm1g] {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
}

.fs-section-head p[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

/* The calendar day the post was started on, above the heading. */
.fs-section-head .fs-start-planned[b-uc23kkhm1g] {
    align-items: center;
    color: var(--accent-dark);
    display: flex;
    font-weight: 700;
    gap: 6px;
    margin: 0 0 8px;
}

/* The section's grid gap spaces its parts, so the margins these carried as
   steps of their own would double it. */
.fs-section > .fs-reference-strip[b-uc23kkhm1g],
.fs-section > .fs-video-panel[b-uc23kkhm1g],
.fs-section > .fs-caption-drafts[b-uc23kkhm1g],
.fs-section > .fs-start-intake[b-uc23kkhm1g],
.fs-section > .fs-start-error[b-uc23kkhm1g] {
    margin: 0;
}

.fs-section > .fs-video-panel[b-uc23kkhm1g] {
    width: 100%;
    padding-bottom: 0;
}

/* The part of each section that is this tab's platform alone. */
.fs-platform-time[b-uc23kkhm1g] {
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-top: 14px;
}

.fs-platform-time p[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.fs-platform-time p.warning[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 600;
}

.fs-platform-time a[b-uc23kkhm1g] {
    color: var(--accent);
    font-weight: 700;
    margin-left: 4px;
}

/* Inside a sentence the space before it is enough; the margin indented it where the line wrapped. */
.fs-platform-time p.warning a[b-uc23kkhm1g] {
    margin-left: 0;
}

/* Photo or Reel on Instagram. Two pills with the radio kept visible, so it
   reads as a choice of one. */
.fs-format-choice[b-uc23kkhm1g] {
    align-items: center;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fs-format-choice legend[b-uc23kkhm1g] {
    color: var(--text-secondary);
    float: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-right: 4px;
    padding: 0;
}

.fs-format-choice label[b-uc23kkhm1g] {
    min-height: 40px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-sm);
    gap: 8px;
    padding: 0 14px;
}

.fs-format-choice label:has(input:checked)[b-uc23kkhm1g] {
    background: var(--tint-blue);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.fs-format-choice label:has(input:disabled)[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-format-choice input[b-uc23kkhm1g] {
    accent-color: var(--accent);
    margin: 0;
}

/* A quiet action that sits under what it acts on. */
.fs-link-button[b-uc23kkhm1g] {
    min-height: 44px;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    justify-self: start;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}

.fs-link-button:not(:disabled):hover[b-uc23kkhm1g] {
    text-decoration-color: currentColor;
}

.fs-link-button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

@media (pointer: fine) {
    .fs-link-button[b-uc23kkhm1g] {
        min-height: 32px;
    }
}

.fs-start-options[b-uc23kkhm1g] {
    display: grid;
    gap: 12px;
}

.fs-start-option[b-uc23kkhm1g] {
    min-height: 88px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px;
    position: relative;
    text-align: left;
}

.fs-start-option:not(.disabled):hover[b-uc23kkhm1g],
.fs-start-option:not(:disabled):hover[b-uc23kkhm1g] {
    border-color: var(--text);
}

/* A photo dragged over the Studio: the whole window takes the drop. */
.fs-photo-drop[b-uc23kkhm1g] {
    align-items: center;
    background: rgba(var(--blue-rgb), 0.08);
    border: 2px dashed var(--blue);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 90;
}

.fs-photo-drop.refused[b-uc23kkhm1g] {
    background: rgba(15, 23, 42, 0.12);
    border-color: var(--line-strong);
}

/* Only the label and its input are drop targets, so moving over the card does not end the drag. */
.fs-photo-drop > .fs-photo-drop-card[b-uc23kkhm1g] {
    align-items: center;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    display: flex;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 18px 22px;
    pointer-events: none;
}

.fs-photo-drop-card svg[b-uc23kkhm1g] {
    fill: none;
    flex: 0 0 auto;
    height: 26px;
    stroke: var(--blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 26px;
}

.fs-photo-drop-card strong[b-uc23kkhm1g] {
    text-wrap: balance;
}

.fs-photo-drop.refused .fs-photo-drop-card svg[b-uc23kkhm1g] {
    stroke: var(--text-secondary);
}

.fs-photo-drop[b-uc23kkhm1g]  .fs-photo-drop-file {
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

[b-uc23kkhm1g] .fs-start-file,
.fs-start-file[b-uc23kkhm1g] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 100px;
    z-index: 2;
}

.fs-option-icon[b-uc23kkhm1g] {
    width: 44px;
    height: 44px;
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    justify-content: center;
}

.fs-start-option.photo .fs-option-icon[b-uc23kkhm1g] {
    background: var(--tint-blue);
    color: var(--accent);
}

.fs-start-option.idea .fs-option-icon[b-uc23kkhm1g] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.fs-start-option.recommendations .fs-option-icon[b-uc23kkhm1g] {
    background: var(--tint-amber);
    color: var(--amber);
}

.fs-option-icon svg[b-uc23kkhm1g] {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fs-start-option strong[b-uc23kkhm1g] {
    display: block;
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 5px;
}

.fs-start-option small[b-uc23kkhm1g] {
    color: var(--text-secondary);
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.fs-start-intake[b-uc23kkhm1g] {
    max-width: 620px;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: 14px;
    margin-top: 24px;
    padding: 0;
}

.fs-start-intake label[b-uc23kkhm1g] {
    display: grid;
    gap: 8px;
}

.fs-start-intake label span[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-start-intake textarea[b-uc23kkhm1g]{
    min-height: 118px;
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.5;
    padding: 14px;
    resize: vertical;
}

.fs-start-intake button[b-uc23kkhm1g] {
    height: 44px;
    background: var(--text);
    border: 1px solid var(--text);
    border-radius: var(--radius-control);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    justify-self: start;
    padding: 0 16px;
}

.fs-start-intake button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

/* Said while a start is under way: the upload, then the AI drafting. */
.fs-start-progress[b-uc23kkhm1g] {
    align-items: center;
    color: var(--accent);
    display: flex;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 10px;
    margin: 14px 0 0;
}

.fs-start-progress-dot[b-uc23kkhm1g] {
    width: 8px;
    height: 8px;
    animation: fs-writing-pulse-b-uc23kkhm1g 1.6s ease-in-out infinite;
    background: var(--accent);
    border-radius: 50%;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .fs-frame-caption .fs-frame-caption-empty.writing[b-uc23kkhm1g],
    .fs-start-progress-dot[b-uc23kkhm1g] {
        animation: none;
    }
}

.fs-start-error[b-uc23kkhm1g] {
    max-width: 620px;
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-sm);
    color: var(--amber);
    font-size: var(--fs-sm);
    margin-top: 14px;
    padding: 12px 14px;
}

.fs-caption-drafts[b-uc23kkhm1g] {
    display: grid;
    gap: 12px;
    margin: 16px 0 22px;
    max-width: 720px;
}

.fs-caption-drafts header[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.fs-caption-drafts header span[b-uc23kkhm1g] {
    color: var(--accent);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.fs-caption-drafts h2[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.fs-caption-drafts header button[b-uc23kkhm1g],
.fs-caption-draft-card button[b-uc23kkhm1g] {
    height: 44px;
    background: var(--text);
    border: 1px solid var(--text);
    border-radius: var(--radius-control);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 15px;
    white-space: nowrap;
}

.fs-caption-drafts header button[b-uc23kkhm1g] {
    background: #ffffff;
    color: var(--text);
}

.fs-caption-drafts button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.55;
}

.fs-caption-draft-list[b-uc23kkhm1g] {
    display: grid;
    gap: 10px;
}

.fs-caption-draft-card[b-uc23kkhm1g],
.fs-caption-draft-state[b-uc23kkhm1g] {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 8px;
    padding: 16px;
}

.fs-caption-draft-card > span[b-uc23kkhm1g] {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-caption-draft-card h4[b-uc23kkhm1g],
.fs-caption-draft-state strong[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.fs-caption-draft-card p[b-uc23kkhm1g],
.fs-caption-draft-state p[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.45;
    margin: 0;
    white-space: pre-line;
}

.fs-caption-draft-card button[b-uc23kkhm1g] {
    justify-self: start;
    margin-top: 2px;
}

.fs-caption-draft-state.warning[b-uc23kkhm1g] {
    background: var(--tint-amber);
    border-color: var(--tint-amber-line);
}

.fs-media-current[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 12px;
}

.fs-media-current img[b-uc23kkhm1g] {
    width: 56px;
    height: 56px;
    background: var(--bg-canvas);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    flex: 0 0 56px;
    object-fit: cover;
}

.fs-media-current span[b-uc23kkhm1g] {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.fs-secondary-button[b-uc23kkhm1g],
.fs-primary-button[b-uc23kkhm1g],
.fs-history-heading button[b-uc23kkhm1g],
.fs-history-list button[b-uc23kkhm1g] {
    min-height: 44px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 14px;
}

.fs-secondary-button[b-uc23kkhm1g],
.fs-history-heading button[b-uc23kkhm1g],
.fs-history-list button[b-uc23kkhm1g] {
    background: #ffffff;
}

.fs-primary-button[b-uc23kkhm1g] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    border-radius: var(--radius-control);
}

.fs-secondary-button.warning[b-uc23kkhm1g] {
    border-color: var(--amber);
    color: var(--amber);
}

.fs-secondary-button:disabled[b-uc23kkhm1g],
.fs-primary-button:disabled[b-uc23kkhm1g],
.fs-history-heading button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

.fs-reference-strip[b-uc23kkhm1g] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.fs-reference-strip img[b-uc23kkhm1g] {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.fs-reference-strip.compact[b-uc23kkhm1g] {
    width: 100%;
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

/* Set as the notes beside it ("Comes out 4:5 to suit Instagram."), which it sat between
   a size smaller. */
.fs-reference-strip.compact span[b-uc23kkhm1g] {
    align-self: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.fs-video-panel[b-uc23kkhm1g] {
    width: min(100%, 420px);
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: 104px minmax(0, 1fr);
    margin-top: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
}

.fs-video-preview[b-uc23kkhm1g] {
    aspect-ratio: 9 / 16;
    background: var(--bg-canvas);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fs-video-preview img[b-uc23kkhm1g],
.fs-video-preview video[b-uc23kkhm1g] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.fs-video-preview video[b-uc23kkhm1g] {
    background: #000000;
    object-fit: contain;
}

.fs-video-preview span[b-uc23kkhm1g] {
    height: 100%;
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: var(--fs-xs);
    justify-content: center;
    text-align: center;
}

.fs-video-status[b-uc23kkhm1g] {
    min-width: 0;
    align-content: start;
    display: grid;
    gap: 8px;
}

.fs-video-status strong[b-uc23kkhm1g] {
    font-size: var(--fs-note);
}

.fs-video-status > span[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.35;
}

.fs-video-status > .fs-video-warning[b-uc23kkhm1g] {
    color: var(--amber);
    font-weight: 700;
}

.fs-video-progress[b-uc23kkhm1g] {
    height: 6px;
    background: var(--bg-canvas);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.fs-video-progress span[b-uc23kkhm1g] {
    height: 100%;
    background: var(--accent);
    display: block;
}

.fs-video-actions[b-uc23kkhm1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-video-actions button[b-uc23kkhm1g] {
    min-height: 44px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 11px;
}

.fs-video-actions button.warning[b-uc23kkhm1g] {
    border-color: var(--tint-amber-line);
    color: var(--amber);
}

.fs-video-actions button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

/* Stop making the video asks first, in place of the button. */
.fs-video-stop[b-uc23kkhm1g] {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.fs-video-actions .fs-video-stop[b-uc23kkhm1g] {
    justify-content: flex-start;
}

.fs-video-stop-ask[b-uc23kkhm1g] {
    color: var(--text);
    flex-basis: 100%;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.fs-modal-host[b-uc23kkhm1g]  .fs-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(29, 29, 31, 0.52);
    display: grid;
    place-items: center;
    padding: 24px;
}

.fs-modal-host[b-uc23kkhm1g]  .fs-modal {
    width: min(760px, 100%);
    max-height: calc(100dvh - 48px);
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 60px rgba(25, 33, 38, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fs-modal-header[b-uc23kkhm1g],
.fs-modal-actions[b-uc23kkhm1g],
.fs-history-heading[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.fs-modal-header[b-uc23kkhm1g],
.fs-modal-actions[b-uc23kkhm1g] {
    padding: 18px 20px;
}

.fs-modal-header[b-uc23kkhm1g] {
    border-bottom: 1px solid var(--border-light);
}

.fs-modal-header h2[b-uc23kkhm1g] {
    font-size: var(--fs-heading-sm);
    margin: 4px 0 0;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.fs-modal-body[b-uc23kkhm1g],
.fs-source-grid[b-uc23kkhm1g],
.fs-history-panel[b-uc23kkhm1g],
.fs-inspection-body[b-uc23kkhm1g] {
    padding: 20px;
}

.fs-modal-body[b-uc23kkhm1g] {
    display: grid;
    gap: 14px;
    overflow: auto;
    min-height: 0;
    overscroll-behavior: contain;
}

.fs-modal-actions[b-uc23kkhm1g] {
    border-top: 1px solid var(--border-light);
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-modal-field[b-uc23kkhm1g] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.fs-modal-field span[b-uc23kkhm1g],
.fs-inspection-body span[b-uc23kkhm1g],
.fs-history-heading strong[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-modal-field textarea[b-uc23kkhm1g]{
    width: 100%;
    min-height: 148px;
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.5;
    padding: 12px;
    resize: vertical;
}

.fs-modal-field.compact[b-uc23kkhm1g] {
    gap: 6px;
}

.fs-modal-field.compact input[b-uc23kkhm1g], .fs-image-settings select[b-uc23kkhm1g], .fs-video-settings select[b-uc23kkhm1g]{
    width: 100%;
    min-height: 44px;
    background: var(--bg-canvas);
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    padding: 0 12px;
}

.fs-video-generate-body[b-uc23kkhm1g] {
    gap: 16px;
}

.fs-video-reference-row[b-uc23kkhm1g] {
    align-items: center;
    background: transparent;
    border-radius: 0;
    display: flex;
    gap: 8px;
    min-height: 64px;
    overflow-x: auto;
    padding: 0;
}

.fs-video-reference-row img[b-uc23kkhm1g] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
    object-fit: cover;
}

.fs-video-reference-empty[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.fs-image-settings[b-uc23kkhm1g],
.fs-video-settings[b-uc23kkhm1g],
.fs-video-prompt-fields[b-uc23kkhm1g] {
    display: grid;
    gap: 10px;
}

.fs-image-settings[b-uc23kkhm1g] {
    grid-template-columns: minmax(0, 1fr);
}

.fs-video-settings[b-uc23kkhm1g] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fs-video-prompt-fields[b-uc23kkhm1g] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fs-image-settings label[b-uc23kkhm1g],
.fs-video-settings label[b-uc23kkhm1g] {
    display: grid;
    gap: 6px;
}

.fs-image-settings label span[b-uc23kkhm1g],
.fs-video-settings label span[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* A hint under the picker, read like the shape line below it; at 600 it outweighed the label. */
.fs-model-note[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 400;
}

.fs-modal-error[b-uc23kkhm1g] {
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-sm);
    color: var(--amber);
    font-size: var(--fs-sm);
    padding: 10px 12px;
}

/* margin 0: the dialog body's gap spaces it. A paragraph's own margins on top set the
   notes under Make a photo three times further apart than the fields above them. */
.fs-modal-note[b-uc23kkhm1g] {
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    padding: 9px 11px;
}

.fs-modal-note.warning[b-uc23kkhm1g] {
    background: var(--tint-amber);
    color: var(--amber);
}

/* A plain note is helper text for the field above it, so it lines up with that field.
   The padding is for the tinted warning box; without a tint it only indented the text. */
.fs-modal-note:not(.warning)[b-uc23kkhm1g] {
    color: var(--text-secondary);
    padding: 0;
}

/* A link inside a note, such as See plans when no AI images are left. */
.fs-modal-note a[b-uc23kkhm1g],
.fs-modal-error a[b-uc23kkhm1g],
.fs-video-form-note a[b-uc23kkhm1g] {
    color: inherit;
    font-weight: 700;
    text-underline-offset: 3px;
}

.fs-modal-host[b-uc23kkhm1g]  .fs-confirm-modal {
    width: min(440px, 100%);
}

.fs-confirm-copy[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.55;
    margin: 0;
}

.fs-inspection-body[b-uc23kkhm1g] {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1fr);
    overflow: auto;
}

.fs-inspection-preview img[b-uc23kkhm1g] {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #ffffff;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.fs-inspection-detail[b-uc23kkhm1g] {
    min-width: 0;
}

.fs-candidate-grid[b-uc23kkhm1g] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.fs-candidate-card[b-uc23kkhm1g] {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: 7px;
    padding: 8px;
    text-align: left;
}

.fs-candidate-card.selected[b-uc23kkhm1g] {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.fs-candidate-card img[b-uc23kkhm1g] {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-canvas);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.fs-candidate-card span[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-inspection-body p[b-uc23kkhm1g],
.fs-history-panel p[b-uc23kkhm1g],
.fs-source-tile span[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 6px 0 0;
}

.fs-source-grid[b-uc23kkhm1g] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fs-source-tile[b-uc23kkhm1g] {
    min-height: 112px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: 16px;
    position: relative;
    text-align: left;
}

.fs-source-tile.passive[b-uc23kkhm1g],
.fs-source-tile.disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.62;
}

.fs-source-tile strong[b-uc23kkhm1g] {
    font-size: var(--fs-base);
}

.fs-history-panel[b-uc23kkhm1g] {
    border-top: 1px solid var(--border-light);
}

.fs-history-list[b-uc23kkhm1g] {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.fs-history-list article[b-uc23kkhm1g] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 8px;
    padding: 12px;
}

.fs-history-hint[b-uc23kkhm1g] {
    margin: 10px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.fs-history-meta[b-uc23kkhm1g] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fs-history-meta span[b-uc23kkhm1g] {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-history-meta time[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.fs-history-list div[b-uc23kkhm1g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-image-editor-host[b-uc23kkhm1g]  .fs-image-editor-backdrop,
.fs-video-editor-host[b-uc23kkhm1g]  .fs-video-editor-backdrop {
    padding: 24px;
    align-items: center;
    overflow: hidden;
}

.fs-image-editor-host[b-uc23kkhm1g]  .fs-image-editor-panel,
.fs-video-editor-host[b-uc23kkhm1g]  .fs-video-editor-panel {
    width: min(1180px, 100%);
    height: min(820px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* The photo editor is laid out like a design tool (panel, stage, versions),
   so it takes most of the window rather than a dialog-sized box. */
.fs-image-editor-host[b-uc23kkhm1g]  .fs-image-editor-panel {
    width: min(1440px, 100%);
    height: calc(100dvh - 48px);
}

@media (max-width: 760px) {
    .fs-image-editor-host[b-uc23kkhm1g]  .fs-image-editor-backdrop,
    .fs-video-editor-host[b-uc23kkhm1g]  .fs-video-editor-backdrop {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .fs-image-editor-host[b-uc23kkhm1g]  .fs-image-editor-panel,
    .fs-video-editor-host[b-uc23kkhm1g]  .fs-video-editor-panel {
        height: 100%;
        max-height: 100%;
    }
}

.fs-caption-box[b-uc23kkhm1g] {
    width: 100%;
    min-height: 140px;
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-xs);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.5;
    padding: 14px;
    resize: vertical;
}

.fs-variant-message button:disabled[b-uc23kkhm1g] {
    cursor: default;
    opacity: 0.5;
}

.fs-variant-message[b-uc23kkhm1g] {
    background: var(--tint-blue);
    border: 1px solid var(--tint-blue);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: var(--fs-xs);
    line-height: 1.4;
    padding: 9px 10px;
}

.fs-variant-message.warning[b-uc23kkhm1g] {
    background: var(--tint-amber);
    border-color: var(--tint-amber-line);
    color: var(--amber);
}

/* "Platform versions need a refresh" carries its own button. */
.fs-variant-message:has(button)[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
}

.fs-variant-message button[b-uc23kkhm1g] {
    min-height: 36px;
    background: #ffffff;
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 12px;
}

/* Date beside time where there is room for both. A date field under about
   164px runs its digits into the calendar button, so the pair wraps first. */
.fs-schedule-fields[b-uc23kkhm1g] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 164px), 180px));
}

.fs-schedule-panel label[b-uc23kkhm1g] {
    display: grid;
    gap: 8px;
}

.fs-schedule-panel label span[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-schedule-panel input[b-uc23kkhm1g]{
    height: 44px;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-xs);
    font: inherit;
    padding: 0 12px;
    width: 100%;
    min-width: 0;
    background: #ffffff;
    color: var(--text);
    font-size: var(--fs-md);
}

.fs-schedule-panel input:focus[b-uc23kkhm1g] {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* "Give Instagram its own time". A tick box and its words on one line, not
   the stacked label and full-width field the date and time use. */
.fs-schedule-panel .fs-check[b-uc23kkhm1g] {
    min-height: 44px;
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    justify-self: start;
}

.fs-schedule-panel .fs-check span[b-uc23kkhm1g] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.fs-schedule-panel .fs-check input[b-uc23kkhm1g] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    border: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.fs-schedule-panel .fs-check input:focus[b-uc23kkhm1g] {
    box-shadow: none;
}

@media (pointer: fine) {
    .fs-schedule-panel .fs-check[b-uc23kkhm1g] {
        min-height: 32px;
    }
}

/* A schedule the server refused, said beside the button that asked. */
.fs-schedule-feedback[b-uc23kkhm1g] {
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    max-width: 360px;
    padding: 8px 12px;
}

.fs-schedule-feedback.error[b-uc23kkhm1g] {
    background: var(--ground);
    color: var(--red-ink);
}

/* Connect or Reconnect after a connection the schedule check found broken, drawn as the
   footer's own Connect is. */
.fs-schedule-feedback a[b-uc23kkhm1g] {
    color: var(--accent);
    font-weight: 700;
    text-underline-offset: 3px;
}

.fs-schedule-feedback a[aria-disabled='true'][b-uc23kkhm1g] {
    opacity: 0.55;
}

/* Why the Schedule button is held when the readiness list does not say it
   (someone else editing, work still running, no date or time). A disabled
   button is not focusable, so its title is unreachable by keyboard and by
   screen readers. This says it in the page, next to the button. */
.fs-schedule-blocked[b-uc23kkhm1g] {
    margin: 0;
    max-width: 260px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--muted);
    text-align: right;
}

@media (max-width: 900px) {
    .fs-shell[b-uc23kkhm1g] {
        min-height: 100dvh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        background: var(--bg-canvas);
        overflow: visible;
        letter-spacing: 0;
    }

    .fs-header[b-uc23kkhm1g] {
        background: #ffffff;
        gap: 12px;
        padding: 12px 24px;
    }

    /* The page scrolls here, not the work area, and the drawer lays over it.
       Both stay columns that fill the screen, so a short post (a landscape photo)
       leaves the next bar at the foot of the screen. As blocks they stopped under
       the post and left an empty band below the bar. */
    .fs-body[b-uc23kkhm1g] {
        display: flex;
        flex-direction: column;
    }

    .fs-workspace[b-uc23kkhm1g] {
        flex: 1 0 auto;
    }

    .fs-artifact[b-uc23kkhm1g] {
        width: 100%;
    }

    /* 48vh keeps the caption above the footer on a phone. The 420px cap stopped a 4:3 photo
       filling the frame on a portrait tablet, with half the screen free under it. */
    .fs-frame-media[b-uc23kkhm1g] {
        --fs-frame-max-h: min(48vh, 520px);
    }

    .fs-post-tabs[b-uc23kkhm1g] {
        margin-bottom: 16px;
    }

    .fs-section[b-uc23kkhm1g] {
        padding: 16px;
    }

    .fs-start-options[b-uc23kkhm1g] {
        gap: 8px;
    }

    .fs-start-option[b-uc23kkhm1g] {
        min-height: 88px;
        border-radius: var(--radius-sm);
        gap: 14px;
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 16px;
    }

    .fs-start-option strong[b-uc23kkhm1g] {
        font-size: var(--fs-md);
        margin-bottom: 5px;
    }

    .fs-start-option small[b-uc23kkhm1g] {
        font-size: var(--fs-xs);
        line-height: 1.35;
    }

    .fs-caption-drafts[b-uc23kkhm1g] {
        gap: 10px;
        max-width: none;
    }

    .fs-caption-drafts header[b-uc23kkhm1g] {
        align-items: flex-start;
    }

    .fs-caption-drafts h2[b-uc23kkhm1g] {
        font-size: var(--fs-lg);
    }

    .fs-caption-draft-card[b-uc23kkhm1g],
    .fs-caption-draft-state[b-uc23kkhm1g] {
        border-radius: var(--radius-sm);
        gap: 7px;
        padding: 14px;
    }

    .fs-caption-draft-card p[b-uc23kkhm1g],
    .fs-caption-draft-state p[b-uc23kkhm1g] {
        font-size: var(--fs-sm);
        line-height: 1.4;
    }

    .fs-caption-box[b-uc23kkhm1g] {
        min-height: 160px;
    }

    .fs-video-panel[b-uc23kkhm1g] {
        width: 100%;
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .fs-video-actions[b-uc23kkhm1g] {
        gap: 5px;
    }

    .fs-video-actions button[b-uc23kkhm1g] {
        min-height: 44px;
        padding: 0 9px;
    }

    .fs-video-settings[b-uc23kkhm1g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fs-video-model-setting[b-uc23kkhm1g] {
        grid-column: 1 / -1;
    }

    .fs-inspection-body[b-uc23kkhm1g] {
        grid-template-columns: 1fr;
    }

    .fs-inspection-preview img[b-uc23kkhm1g] {
        max-height: 42vh;
    }

    .fs-candidate-grid[b-uc23kkhm1g] {
        gap: 8px;
    }

    .fs-candidate-card[b-uc23kkhm1g] {
        padding: 6px;
    }

    .fs-candidate-card span[b-uc23kkhm1g] {
        font-size: var(--fs-xs);
    }

    .fs-option-icon[b-uc23kkhm1g] {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
    }

    .fs-option-icon svg[b-uc23kkhm1g] {
        width: 24px;
        height: 24px;
    }

}

@media (min-width: 901px) and (max-width: 1200px) {
    .fs-section[b-uc23kkhm1g] {
        padding: 16px;
    }
}

@media (min-width: 721px) and (max-width: 900px) {
    .fs-video-settings[b-uc23kkhm1g] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fs-video-model-setting[b-uc23kkhm1g] {
        grid-column: auto;
    }
}

@media (max-height: 700px) {
    .fs-modal-host[b-uc23kkhm1g]  .fs-modal-backdrop {
        padding: 12px;
    }

    .fs-modal-host[b-uc23kkhm1g]  .fs-modal {
        max-height: calc(100dvh - 48px);
        border-radius: var(--radius-sm);
        box-shadow: 0 20px 60px rgba(25, 33, 38, 0.18);
    }

    .fs-modal-header[b-uc23kkhm1g],
    .fs-modal-actions[b-uc23kkhm1g] {
        padding: 14px 18px;
    }

    .fs-modal-body[b-uc23kkhm1g] {
        gap: 10px;
        padding: 16px 18px;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .fs-modal-field textarea[b-uc23kkhm1g] {
        height: 104px;
        min-height: 104px;
        background: #ffffff;
        border-radius: var(--radius-control);
        padding: 12px;
        font-size: var(--fs-md);
    }

    .fs-video-reference-row[b-uc23kkhm1g] {
        min-height: 48px;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .fs-video-prompt-fields[b-uc23kkhm1g],
    .fs-schedule-fields[b-uc23kkhm1g] {
        grid-template-columns: 1fr;
    }
}

.fs-modal-host[b-uc23kkhm1g] {
    --modal-mobile-align: center;
    --modal-radius: var(--radius);
    --modal-mobile-radius: var(--radius);
}

.fs-modal-header[b-uc23kkhm1g],
.fs-modal-actions[b-uc23kkhm1g] {
    flex: 0 0 auto;
}

.fs-modal-header > div[b-uc23kkhm1g],
.fs-schedule-fields > label[b-uc23kkhm1g] {
    min-width: 0;
}

.fs-modal-host[b-uc23kkhm1g]  .fs-replace-modal {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fs-modal-host[b-uc23kkhm1g]  .fs-replace-modal > .fs-modal-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fs-modal-host[b-uc23kkhm1g]  .fs-modal-backdrop {
    z-index: var(--modal-z, 2000);
    display: flex;
}

/* ── One platform's crop ─────────────────────────────────────────────────────
   The stage is exactly the size the image is shown at, because image-crop.js
   places the frame in fractions of the stage and reads it back the same way.
   Everything outside the frame is dimmed by the frame's own shadow, which the
   stage clips. */

.fs-modal-host[b-uc23kkhm1g]  .fs-crop-modal {
    width: min(720px, 100%);
}

.fs-crop-body[b-uc23kkhm1g] {
    justify-items: center;
}

.fs-crop-hint[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    justify-self: stretch;
    line-height: 1.45;
    margin: 0;
}

/* The stage takes the picture's own shape (image-crop.js sets the ratio once
   it loads), so the frame's fractions of the stage are fractions of the
   picture. Sized by the picture alone, fit-content came out wider than the
   picture it held and the picture stretched to fill it. */
.fs-crop-stage[b-uc23kkhm1g] {
    /* What is left of the window once the modal's header, hint, size slider
       and buttons are counted, so the whole crop fits without scrolling. */
    --fs-crop-max-h: clamp(240px, calc(100dvh - 380px), 520px);
    width: min(100%, calc(var(--fs-crop-max-h) * var(--fs-crop-ratio, 1)));
    aspect-ratio: var(--fs-crop-ratio, 1);
    background: var(--bg-canvas);
    line-height: 0;
    /* Clip, not hidden: hidden made the stage a scroll container, which let
       the modal's grid squeeze its row and lay the slider over the picture. */
    overflow: clip;
    position: relative;
    touch-action: none;
    user-select: none;
}

.fs-crop-stage img[b-uc23kkhm1g] {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
}

.fs-crop-frame[b-uc23kkhm1g] {
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 9999px rgba(20, 24, 28, 0.55);
    box-sizing: border-box;
    cursor: move;
    position: absolute;
    touch-action: none;
}

/* The shadow is what dims the part the crop cuts away. The global focus ring's shadow took
   its place, so moving the frame with the arrow keys showed the whole photo undimmed. */
.fs-crop-frame:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: -5px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 9999px rgba(20, 24, 28, 0.55) !important;
}

.fs-crop-size[b-uc23kkhm1g] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-self: stretch;
}

.fs-crop-size span[b-uc23kkhm1g] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* The app's slider paints its 16px of padding as track; only the track
   itself is grey here, and the padding stays as reach for a finger. */
.fs-crop-size input[b-uc23kkhm1g] {
    flex: 1 1 auto;
    background-clip: content-box;
    accent-color: var(--accent);
}

.fs-crop-body .fs-modal-error[b-uc23kkhm1g] {
    justify-self: stretch;
}

.fs-start-intake button[b-uc23kkhm1g],
.fs-caption-draft-card button[b-uc23kkhm1g] {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-xs);
}

.fs-modal-field.compact input[b-uc23kkhm1g],
.fs-image-settings select[b-uc23kkhm1g],
.fs-video-settings select[b-uc23kkhm1g] {
    min-width: 0;
    min-height: 44px;
    border-radius: var(--radius-control);
    background: #ffffff;
}

.fs-caption-draft-card p[b-uc23kkhm1g],
.fs-caption-draft-state p[b-uc23kkhm1g],
.fs-inspection-body p[b-uc23kkhm1g],
.fs-history-panel p[b-uc23kkhm1g],
.fs-video-status > span[b-uc23kkhm1g] {
    overflow-wrap: anywhere;
}

.fs-reference-strip img[b-uc23kkhm1g] {
    flex: 0 0 54px;
}

.fs-shell button:focus-visible[b-uc23kkhm1g],
.fs-modal-host button:focus-visible[b-uc23kkhm1g],
.fs-shell input:focus-visible[b-uc23kkhm1g],
.fs-shell textarea:focus-visible[b-uc23kkhm1g],
.fs-modal-host input:focus-visible[b-uc23kkhm1g],
.fs-modal-host textarea:focus-visible[b-uc23kkhm1g],
.fs-modal-host select:focus-visible[b-uc23kkhm1g],
.fs-start-option:focus-within[b-uc23kkhm1g],
.fs-source-tile:focus-within[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .fs-header[b-uc23kkhm1g] {
        padding: 10px 12px;
        align-items: center;
    }

    .fs-workspace[b-uc23kkhm1g] {
        --fs-work-pad-top: 24px;
        --fs-work-pad-x: 16px;
    }

    .fs-next-bar[b-uc23kkhm1g] {
        margin-top: 24px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* On a phone the header had no room left for the save state, which slid under
   Ask. The link keeps its full name for screen readers and shows "Auto mode". */
@media (max-width: 480px) {
    .fs-brand-name[b-uc23kkhm1g] {
        display: none;
    }

    .fs-header[b-uc23kkhm1g] {
        gap: 8px;
    }

    .fs-header-actions[b-uc23kkhm1g] {
        gap: 6px;
    }

    .fs-mode-link-lead[b-uc23kkhm1g] {
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }
}

/* The tab above the frame already names the platform, so the frame's format
   label drops it here and the account name keeps its room. */
@media (max-width: 480px) {
    .fs-frame-format-lead[b-uc23kkhm1g] {
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    /* "feed · 4:5" reads as "Feed · 4:5" once it starts the label. */
    .fs-frame-format-rest[b-uc23kkhm1g] {
        display: inline-block;
    }

    .fs-frame-format-rest[b-uc23kkhm1g]::first-letter {
        text-transform: uppercase;
    }
}

/* Three platforms and Add ran past a phone's width, so the third tab showed as
   "Li" over "no". Snugger tabs and Add as its plus sign keep the third name in view;
   Add keeps its name for screen readers. */
@media (max-width: 480px) {
    /* 21px too wide at 390 still cut "not connected" to "not connect", and with a
       note on every tab ("posted", "did not post") it was 6px over and read
       "not connecte". The underline still marks each tab without a gap. */
    .fs-tablist[b-uc23kkhm1g] {
        gap: 0;
    }

    .fs-tablist .fs-post-tab[b-uc23kkhm1g] {
        column-gap: 4px;
        padding: 0 5px;
    }

    .fs-add-platform-toggle[b-uc23kkhm1g] {
        min-width: 44px;
        justify-content: center;
        padding: 0 8px;
    }

    .fs-add-platform-toggle > span[b-uc23kkhm1g] {
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }
}

/* The readiness line over the button already names what waits, so on a phone the
   button says "Schedule Facebook now" on one line rather than three. */
@media (max-width: 400px) {
    .fs-next-rest[b-uc23kkhm1g] {
        display: none;
    }
}

/* Narrower still, Ask keeps its icon and its name for screen readers. */
@media (max-width: 360px) {
    .fs-ask-toggle[b-uc23kkhm1g] {
        min-width: 44px;
        justify-content: center;
        padding: 0 12px;
    }

    .fs-ask-toggle > span:not(.fs-ask-dot)[b-uc23kkhm1g] {
        display: none;
    }
}

@media (max-width: 600px) {
    .fs-modal-host[b-uc23kkhm1g]  .fs-modal-backdrop {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .fs-modal-host[b-uc23kkhm1g]  .fs-modal {
        max-height: calc(100dvh - 16px);
    }

    .fs-modal-header[b-uc23kkhm1g],
    .fs-modal-actions[b-uc23kkhm1g],
    .fs-modal-body[b-uc23kkhm1g],
    .fs-source-grid[b-uc23kkhm1g],
    .fs-history-panel[b-uc23kkhm1g],
    .fs-inspection-body[b-uc23kkhm1g] {
        padding: 16px;
    }

    .fs-modal-actions[b-uc23kkhm1g] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fs-modal-actions > button[b-uc23kkhm1g] {
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
        line-height: 1.3;
    }

    .fs-modal-actions > button:last-child:nth-child(odd)[b-uc23kkhm1g] {
        grid-column: 1 / -1;
    }

    .fs-source-grid[b-uc23kkhm1g] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fs-source-tile[b-uc23kkhm1g] {
        min-height: 72px;
    }

    .fs-image-settings select[b-uc23kkhm1g],
    .fs-video-settings select[b-uc23kkhm1g],
    .fs-modal-field.compact input[b-uc23kkhm1g] {
        font-size: var(--fs-md);
    }

    .fs-caption-drafts header[b-uc23kkhm1g] {
        flex-wrap: wrap;
    }

    /* On a phone the bar covers the post while it is pinned, so it stacks its
       one line over a full-width button and carries nothing else. */
    .fs-next-bar[b-uc23kkhm1g] {
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        padding-top: 8px;
    }

    /* The width is set, not stretched: the summary measures itself for its container query,
       and without a width Chrome sized its height as if it had none, a word to a line. */
    .fs-next-summary[b-uc23kkhm1g] {
        flex: 0 0 auto;
        width: 100%;
    }

    /* The time and the button share a row; a reason, when there is one, sits over them. */
    .fs-next-action[b-uc23kkhm1g] {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 6px 8px;
        margin-left: 0;
    }

    .fs-next-action > .fs-schedule-blocked[b-uc23kkhm1g],
    .fs-next-action > .fs-schedule-feedback[b-uc23kkhm1g] {
        flex: 1 0 100%;
    }

    .fs-next-primary[b-uc23kkhm1g] {
        flex: 1 1 auto;
    }

    .fs-schedule-blocked[b-uc23kkhm1g],
    .fs-next-action .fs-schedule-feedback[b-uc23kkhm1g] {
        max-width: none;
        text-align: left;
    }
}

/* On a small phone "Schedule 2 now, rest later" did not fit beside the time, so the button
   dropped under it and the bar, which stays over the post, grew by a row. Its words wrap
   to two lines instead and the time keeps its place beside it. */
@media (max-width: 400px) {
    .fs-next-primary[b-uc23kkhm1g] {
        flex: 1 1 0;
        line-height: 1.25;
        min-width: 0;
        padding: 6px 12px;
        white-space: normal;
    }
}

@media (max-width: 380px) {
    .fs-video-settings[b-uc23kkhm1g] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-shell *[b-uc23kkhm1g],
    .fs-modal-host *[b-uc23kkhm1g] {
        scroll-behavior: auto;
        transition: none;
    }
}

/* The label and the button tile lined their words up differently: a button centres its content
   and keeps the browser's own font and line height. Both start at the top, in the page's type. */
.fs-source-tile[b-uc23kkhm1g] {
    align-content: start;
    font: inherit;
}

/* Past images show the pictures, not "Preview image 1, 2, 3". */
.fs-history-list .fs-history-preview.has-thumb[b-uc23kkhm1g] {
    width: 88px;
    height: 88px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg-canvas);
}

.fs-history-preview.has-thumb img[b-uc23kkhm1g] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fs-history-list .fs-history-preview.has-thumb:hover:not(:disabled)[b-uc23kkhm1g],
.fs-history-list .fs-history-preview.has-thumb:focus-visible[b-uc23kkhm1g] {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* An iPhone zooms the page into any field under 16px when it is tapped, and leaves it zoomed
   after. Every other field in the app is 16px on a touch screen already. */
@media (pointer: coarse) {
    .fs-caption-editor .fs-caption-box[b-uc23kkhm1g],
    .fs-caption-tags[b-uc23kkhm1g] {
        font-size: 16px;
    }
}

/* Optional generation inputs follow the existing editor form vocabulary. */
.fs-video-creative[b-uc23kkhm1g] { min-width: 0; border-top: 1px solid var(--line-field); padding-top: 12px; }
.fs-video-creative summary[b-uc23kkhm1g] { cursor: pointer; min-height: 44px; font-weight: 600; color: var(--text); }
.fs-video-creative > .fs-video-prompt-fields[b-uc23kkhm1g] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fs-video-creative fieldset[b-uc23kkhm1g] { min-width: 0; margin: 0; border: 1px solid var(--line-field); border-radius: var(--radius-control); padding: 8px 12px 12px; }
/* The browser's legend, in body size, sat apart from the bold labels around it. */
.fs-video-creative legend[b-uc23kkhm1g] { padding: 0 4px; color: var(--text); font-size: var(--fs-xs); font-weight: 700; }
.fs-video-creative fieldset label[b-uc23kkhm1g] { display: flex; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
.fs-video-creative > .fs-video-prompt-fields > label:not(.fs-modal-field)[b-uc23kkhm1g] { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-size: var(--fs-sm); }
.fs-video-creative select[b-uc23kkhm1g] { width: 100%; min-height: 44px; color: var(--text); background: var(--bg-canvas); border: 1px solid var(--line-field); border-radius: var(--radius-control); font: inherit; }
/* InputFile renders the input, so it carries no scope attribute and only ::deep reaches it. It
   stays in the tab order but out of sight; the face is the button. */
.fs-sound-upload[b-uc23kkhm1g] { position: relative; }
.fs-video-creative[b-uc23kkhm1g]  input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.fs-modal-field .fs-sound-face[b-uc23kkhm1g] { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--text); background: var(--bg-canvas); border: 1.5px solid var(--line-field); border-radius: var(--radius-control); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.fs-sound-upload:hover:not(:has(input:disabled)) .fs-sound-face[b-uc23kkhm1g] { border-color: var(--accent); }
.fs-sound-upload:focus-within .fs-sound-face[b-uc23kkhm1g] { outline: 2px solid var(--blue); outline-offset: 3px; }
.fs-sound-upload:has(input:disabled) .fs-sound-face[b-uc23kkhm1g] { cursor: not-allowed; opacity: 0.6; }
.fs-video-creative small[b-uc23kkhm1g] { color: var(--text-secondary); line-height: 1.5; }
.fs-video-creative summary:focus-visible[b-uc23kkhm1g] { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-product-photo-option[b-uc23kkhm1g] { display: grid; gap: 6px; margin-block: 12px; }
.fs-product-photo-option label[b-uc23kkhm1g] { display: flex; align-items: center; gap: 8px; }
.fs-product-photo-option small[b-uc23kkhm1g] { color: var(--text-secondary); line-height: 1.5; }
/* /Components/Studio/StudioPhotoMenu.razor.rz.scp.css */
/* The photo menu, under the photo it changes and inside the post's frame, so
   it reads as that photo's tools rather than a panel about the post. */
.fs-photo-menu[b-clfdz9pn3h] {
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #ffffff;
}

/* Baseline, not top: Done keeps a 36px target, so at the top its word sat 9px below the title. */
.fs-photo-menu-head[b-clfdz9pn3h] {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.fs-photo-menu-head > div[b-clfdz9pn3h] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fs-photo-menu-head strong[b-clfdz9pn3h] {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.fs-photo-analysis[b-clfdz9pn3h],
.fs-photo-scope[b-clfdz9pn3h] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.fs-photo-done[b-clfdz9pn3h] {
    min-height: 36px;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 0 4px;
}

.fs-photo-row[b-clfdz9pn3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* On a phone the four tools wrapped to three and a lone Crop. Two even columns keep them one set. */
@media (max-width: 480px) {
    .fs-photo-row[b-clfdz9pn3h] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fs-photo-action[b-clfdz9pn3h] {
    min-height: 44px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    justify-content: center;
    padding: 0 14px;
    position: relative;
}

.fs-photo-action:not(:disabled):not(.disabled):hover[b-clfdz9pn3h] {
    border-color: var(--text);
}

.fs-photo-action:disabled[b-clfdz9pn3h],
.fs-photo-action.disabled[b-clfdz9pn3h] {
    cursor: default;
    opacity: 0.5;
}

.fs-photo-action:focus-visible[b-clfdz9pn3h],
.fs-photo-upload:focus-within[b-clfdz9pn3h],
.fs-photo-done:focus-visible[b-clfdz9pn3h],
.fs-photo-more-toggle:focus-visible[b-clfdz9pn3h],
.fs-photo-more-list button:focus-visible[b-clfdz9pn3h],
.fs-photo-ask input:focus-visible[b-clfdz9pn3h],
.fs-photo-ask button:focus-visible[b-clfdz9pn3h] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* The file input covers its label, so the whole button opens the picker. */
.fs-photo-upload[b-clfdz9pn3h]  .fs-photo-file {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.fs-photo-upload.disabled[b-clfdz9pn3h]  .fs-photo-file {
    cursor: default;
}

.fs-photo-ask[b-clfdz9pn3h] {
    display: grid;
    gap: 6px;
}

.fs-photo-ask label[b-clfdz9pn3h] {
    font-size: var(--fs-xs);
    font-weight: 700;
}

.fs-photo-ask-row[b-clfdz9pn3h] {
    display: flex;
    gap: 8px;
}

/* width 0: the field grows into the row rather than setting its smallest size. */
.fs-photo-ask input[b-clfdz9pn3h] {
    min-height: 44px;
    min-width: 0;
    width: 0;
    background: #ffffff;
    /* The field token: the hairline was 1.27:1 on white, too faint to see as a box. */
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    flex: 1 1 auto;
    font: inherit;
    font-size: var(--fs-sm);
    padding: 0 12px;
}

.fs-photo-ask button[b-clfdz9pn3h] {
    min-height: 44px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 16px;
}

.fs-photo-ask button:disabled[b-clfdz9pn3h],
.fs-photo-ask input:disabled[b-clfdz9pn3h] {
    cursor: default;
    opacity: 0.5;
}

.fs-photo-post-group[b-clfdz9pn3h] {
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 10px;
    padding-top: 12px;
}

.fs-media-current[b-clfdz9pn3h] {
    align-items: center;
    display: flex;
    gap: 12px;
}

.fs-media-current img[b-clfdz9pn3h] {
    width: 44px;
    height: 44px;
    background: var(--bg-canvas);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    flex: 0 0 44px;
    object-fit: cover;
}

.fs-media-current span[b-clfdz9pn3h] {
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Photo or Reel on Instagram. Two pills with the radio kept visible, so it
   reads as a choice of one. */
.fs-format-choice[b-clfdz9pn3h] {
    align-items: center;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fs-format-choice legend[b-clfdz9pn3h] {
    color: var(--text-secondary);
    float: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-right: 4px;
    padding: 0;
}

.fs-format-choice label[b-clfdz9pn3h] {
    min-height: 40px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-sm);
    gap: 8px;
    padding: 0 14px;
}

.fs-format-choice label:has(input:checked)[b-clfdz9pn3h] {
    background: var(--tint-blue);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.fs-format-choice label:has(input:disabled)[b-clfdz9pn3h] {
    cursor: default;
    opacity: 0.55;
}

.fs-format-choice input[b-clfdz9pn3h] {
    accent-color: var(--accent);
    margin: 0;
}

.fs-photo-more[b-clfdz9pn3h] {
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

.fs-photo-more-toggle[b-clfdz9pn3h] {
    min-height: 36px;
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    gap: 6px;
    justify-self: start;
    padding: 0;
}

.fs-photo-more-toggle svg[b-clfdz9pn3h] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fs-photo-more-list[b-clfdz9pn3h] {
    display: grid;
    gap: 2px;
}

/* Each row ends in a chevron. On a phone, with no hover, the rows read as plain lines of text;
   drawn with borders, the chevron also shows in High Contrast, where the hover ground drops. */
.fs-photo-more-list button[b-clfdz9pn3h] {
    min-height: 40px;
    align-items: baseline;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    font: inherit;
    font-size: var(--fs-sm);
    gap: 4px 10px;
    padding: 8px 30px 8px 10px;
    position: relative;
    text-align: left;
}

.fs-photo-more-list button[b-clfdz9pn3h]::after {
    border-right: 2px solid var(--text-secondary);
    border-top: 2px solid var(--text-secondary);
    content: "";
    height: 7px;
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
}

.fs-photo-more-list button:not(:disabled):hover[b-clfdz9pn3h] {
    background: var(--bg-canvas);
}

.fs-photo-more-list button:disabled[b-clfdz9pn3h] {
    cursor: default;
    opacity: 0.5;
}

.fs-photo-more-list small[b-clfdz9pn3h] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.fs-reference-strip[b-clfdz9pn3h] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 10px 2px;
}

.fs-reference-strip img[b-clfdz9pn3h] {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    flex: 0 0 54px;
    object-fit: cover;
}

@media (pointer: fine) {
    .fs-photo-action[b-clfdz9pn3h],
    .fs-photo-ask input[b-clfdz9pn3h],
    .fs-photo-ask button[b-clfdz9pn3h] {
        min-height: 36px;
    }
}

/* One line of what the AI read the photo as, two at most, so the tools stay near the top. */
.fs-photo-analysis[b-clfdz9pn3h] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* High Contrast drops the accent colour, which was all that marked Done as a button. */
@media (forced-colors: active) {
    .fs-photo-done[b-clfdz9pn3h] {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* An iPhone zooms the page into any field under 16px when it is tapped, and leaves it zoomed
   after. Every other field in the app is 16px on a touch screen already. */
@media (pointer: coarse) {
    .fs-photo-ask input[b-clfdz9pn3h] {
        font-size: 16px;
    }
}
/* /Components/Studio/VideoEditor/VideoEditor.razor.rz.scp.css */
/*  The Studio's video editor.

    Desktop: top bar over three columns (tool rail · video, play bar and timeline · the tool's
    settings), the same frame as the photo editor. Phone: one scrolling column where the video,
    its play bar and the tool rail stay pinned at the top while the timeline and settings scroll
    under them, so what is being changed stays in view.

    The stage is the video's own shape (--ar is width over height), so the layer box over it is
    the video exactly. Text is sized in cqh of that box, a share of the video's height, which is
    the unit photo-compose.js draws it in for the save. The numbers for padding, line height,
    the label's rounding and the outline match photo-compose.js.
*/
.ve-shell[b-bid7kj9lgm], .ve-shell *[b-bid7kj9lgm] { box-sizing: border-box; letter-spacing: 0; }
.ve-shell[b-bid7kj9lgm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    color: var(--text);
    overflow: hidden;
    position: relative;
}

/* ── Top bar ── */
.ve-topbar[b-bid7kj9lgm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
    flex-shrink: 0;
}
.ve-topbar-left[b-bid7kj9lgm] { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ve-title[b-bid7kj9lgm] { margin: 0; line-height: inherit; font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.ve-save-note[b-bid7kj9lgm] { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.ve-save-note-busy[b-bid7kj9lgm] { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.ve-save-note-error[b-bid7kj9lgm] { color: var(--red); }
.ve-topbar-right[b-bid7kj9lgm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ve-confirm[b-bid7kj9lgm] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-note); font-weight: 600; }

.ve-spinner[b-bid7kj9lgm] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    animation: ve-spin-b-bid7kj9lgm 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ve-spin-b-bid7kj9lgm { to { transform: rotate(360deg); } }

.ve-btn[b-bid7kj9lgm] {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms, border-color 150ms;
}
.ve-btn-ghost[b-bid7kj9lgm] { background: #fff; color: var(--text); border-color: var(--border-light); }
.ve-btn-ghost:hover:not(:disabled)[b-bid7kj9lgm] { background: var(--bg-canvas); }
.ve-btn-primary[b-bid7kj9lgm] { background: var(--accent); color: #fff; }
.ve-btn-primary:hover:not(:disabled)[b-bid7kj9lgm] { background: var(--accent-dark); }
.ve-btn-danger[b-bid7kj9lgm] { background: var(--red); color: #fff; }
.ve-btn-danger:hover:not(:disabled)[b-bid7kj9lgm] { filter: brightness(0.95); }

/* ── Body: tool rail · video and timeline · settings ── */
.ve-body[b-bid7kj9lgm] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 320px;
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}
.ve-body[inert][b-bid7kj9lgm] { opacity: 0.6; }

/* ── Tool rail ── */
.ve-toolrail[b-bid7kj9lgm] {
    border-right: 1px solid var(--border-light);
    background: #fff;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}
.ve-toolicon[b-bid7kj9lgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    flex-shrink: 0;
}
.ve-toolicon:hover:not(:disabled)[b-bid7kj9lgm] { background: var(--bg-canvas); color: var(--text); }
.ve-toolicon-active[b-bid7kj9lgm], .ve-toolicon-active:hover[b-bid7kj9lgm] { background: var(--pill); border-color: var(--tint-blue); color: var(--accent); }

/* ── Video, play bar and timeline ── */
.ve-canvas-col[b-bid7kj9lgm] { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ve-canvas[b-bid7kj9lgm] {
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--bg-canvas);
    overflow: hidden;
    container-type: size;
}
.ve-canvas-stage[b-bid7kj9lgm] {
    position: relative;
    width: min(100cqw, calc(100cqh * var(--ar, 0.5625)));
    max-height: 100cqh;
    line-height: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}
.ve-video[b-bid7kj9lgm] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    cursor: pointer;
}
.ve-canvas-empty[b-bid7kj9lgm] { text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ve-canvas-empty p[b-bid7kj9lgm] { font-size: var(--fs-sm); margin: 0; }

/* The play bar. */
.ve-transport[b-bid7kj9lgm] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 16px;
    border-top: 1px solid var(--border-light);
    background: #fff;
    flex-shrink: 0;
}
.ve-play[b-bid7kj9lgm] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.ve-play:hover:not(:disabled)[b-bid7kj9lgm] { background: var(--accent-dark); }
.ve-time[b-bid7kj9lgm] { font-size: var(--fs-sm); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ve-split[b-bid7kj9lgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.ve-split:hover:not(:disabled):not([aria-disabled="true"])[b-bid7kj9lgm] { border-color: var(--accent); color: var(--accent); }
/* Why Split cannot cut here, under the play bar once it is pressed. */
.ve-split-note[b-bid7kj9lgm] {
    margin: 0;
    padding: 8px 16px;
    background: #fff;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* A video joined from the library shows only while the play position is on it. */
.ve-video-added[b-bid7kj9lgm] { visibility: hidden; }
.ve-transport-note[b-bid7kj9lgm] { margin-left: auto; font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }

/* ── Text and pictures on the video ──
   The centre sits at left/top; --s is the size (text: letter height as a share of the video's
   height; picture: width as a share of its width). */
.ve-layer-box[b-bid7kj9lgm] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    container-type: size;
}
.ve-layer[b-bid7kj9lgm] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    outline: none;
}
.ve-layer-box-live .ve-layer[b-bid7kj9lgm] { pointer-events: auto; cursor: move; }
.ve-layer-text[b-bid7kj9lgm] {
    width: max-content;
    max-width: calc(var(--w, 0.9) * 100cqw);
    font-size: calc(var(--s, 0.06) * 100cqh);
    font-weight: 700;
    line-height: 1.2;
    padding: 0.22em 0.5em;
    border-radius: 0.18em;
    text-align: center;
    white-space: pre-line;
    overflow-wrap: normal;
}
.ve-layer-words[b-bid7kj9lgm] { white-space: inherit; }
.ve-canvas-text-bg-none[b-bid7kj9lgm] { text-shadow: 0 0.04em 0.15em rgba(0, 0, 0, 0.5); }
.ve-canvas-text-bg-solid[b-bid7kj9lgm] { background: rgba(0, 0, 0, 0.72); }
.ve-canvas-text-bg-outline[b-bid7kj9lgm] { -webkit-text-stroke: 0.16em rgba(0, 0, 0, 0.9); paint-order: stroke fill; }
.ve-layer-placeholder .ve-layer-words[b-bid7kj9lgm] { opacity: 0.6; }
.ve-layer-logo[b-bid7kj9lgm] { width: calc(var(--s, 0.2) * 100%); line-height: 0; }
.ve-layer-logo img[b-bid7kj9lgm] { display: block; width: 100%; height: auto; pointer-events: none; }
@media (hover: hover) {
    .ve-layer-box-live .ve-layer:hover[b-bid7kj9lgm] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(11, 92, 202, 0.55); }
}
.ve-layer-selected[b-bid7kj9lgm],
.ve-layer-box-live .ve-layer-selected:hover[b-bid7kj9lgm] { box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--accent); }
.ve-layer:focus-visible[b-bid7kj9lgm] { box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--blue); }
.ve-layer-handle[b-bid7kj9lgm] {
    position: absolute;
    right: -9px;
    bottom: -9px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: nwse-resize;
}
.ve-layer-handle[b-bid7kj9lgm]::before { content: ""; position: absolute; inset: -10px; }

/* ── Timeline ── */
.ve-timeline[b-bid7kj9lgm] {
    --track-label-width: 60px;
    --track-gap: 8px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
    background: #fff;
    padding: 8px 16px 12px;
}
.ve-ruler[b-bid7kj9lgm] {
    margin-left: calc(var(--track-label-width) + var(--track-gap));
    position: relative;
    height: 20px;
    margin-bottom: 6px;
    user-select: none;
    cursor: pointer;
    border-radius: var(--radius-xs);
}
.ve-ruler:focus-visible[b-bid7kj9lgm] { outline: 2px solid var(--blue); outline-offset: 2px; }
.ve-ruler-tick[b-bid7kj9lgm] {
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
    pointer-events: none;
}
.ve-ruler-tick:first-child[b-bid7kj9lgm] { transform: none; }
.ve-ruler-tick:last-child[b-bid7kj9lgm] { transform: translateX(-100%); }
.ve-ruler-tick-unit[b-bid7kj9lgm] { margin-left: 1px; font-size: var(--fs-xs); }

.ve-tracks[b-bid7kj9lgm] { position: relative; display: flex; flex-direction: column; gap: 4px; touch-action: none; }
.ve-track[b-bid7kj9lgm] { display: flex; align-items: center; gap: var(--track-gap); }
.ve-track-label[b-bid7kj9lgm] {
    width: var(--track-label-width);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-align: right;
    flex-shrink: 0;
    /* Capitals come from here; in the markup they were read out letter by letter. */
    text-transform: uppercase;
}
.ve-track-body[b-bid7kj9lgm] {
    flex: 1;
    min-width: 0;
    height: 36px;
    background: var(--bg-canvas);
    border-radius: var(--radius-xs);
    position: relative;
    overflow: hidden;
}
.ve-track-body-empty[b-bid7kj9lgm] {
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(0, 0, 0, 0.04) 14px, rgba(0, 0, 0, 0.04) 15px);
}

/* The kept part of the clip, between the trim handles. */
.ve-clip[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--tint-blue);
    border-radius: 4px;
    overflow: hidden;
}
.ve-clip-thumbs[b-bid7kj9lgm] { display: flex; height: 100%; width: 100%; }
.ve-clip-thumb[b-bid7kj9lgm] { flex: 1; min-width: 0; height: 100%; object-fit: cover; opacity: 0.85; pointer-events: none; color: transparent; font-size: 0; }

/* With more than one clip: the one the trim tools change is ringed, the others are dimmer and
   pick up with a click, and each carries its number. */
.ve-clip-selected[b-bid7kj9lgm] { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.ve-clip:has(> .ve-clip-select) .ve-clip-thumb[b-bid7kj9lgm] { opacity: 0.55; }
.ve-clip-select[b-bid7kj9lgm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}
.ve-clip-select:hover[b-bid7kj9lgm] { background: rgba(255, 255, 255, 0.2); }
.ve-shell .ve-clip-select:focus-visible[b-bid7kj9lgm] { outline-offset: -2px !important; }
.ve-clip-number[b-bid7kj9lgm] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(26, 29, 32, 0.75);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}
/* The part of a clip's stretch that is cut, and the seam between two clips. */
.ve-clip-cut[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 4px, transparent 4px, transparent 8px);
    pointer-events: none;
}
.ve-clip-join[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    pointer-events: none;
    z-index: 1;
}

.ve-trim-handle[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    max-width: 50%;
    background: rgba(255, 255, 255, 0.85);
    cursor: ew-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}
.ve-trim-handle-left[b-bid7kj9lgm] { left: 0; border-right: 2px solid var(--accent); border-radius: 4px 0 0 4px; }
.ve-trim-handle-right[b-bid7kj9lgm] { right: 0; border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
.ve-trim-handle:focus-visible[b-bid7kj9lgm] { outline: 2px solid var(--blue); outline-offset: -2px !important; }
.ve-trim-handle-grip[b-bid7kj9lgm] { width: 2px; height: 12px; background: var(--accent); border-radius: 2px; }
.ve-trim-handle:hover .ve-trim-handle-grip[b-bid7kj9lgm] { transform: scale(1.4); }
.ve-trim-time-label[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.ve-trim-handle-left .ve-trim-time-label[b-bid7kj9lgm] { left: 0; }
.ve-trim-handle-right .ve-trim-time-label[b-bid7kj9lgm] { right: 0; }

.ve-playhead-area[b-bid7kj9lgm] { position: absolute; inset: 0 0 0 calc(var(--track-label-width) + var(--track-gap)); pointer-events: none; }
.ve-playhead[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--red);
    pointer-events: none;
    transform: translateX(-1px);
    z-index: 3;
}
.ve-playhead-caret[b-bid7kj9lgm] {
    position: absolute;
    top: -4px;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--red);
}

/* Segments: coded by kind with flat fills. */
.ve-text-seg[b-bid7kj9lgm], .ve-overlay-seg[b-bid7kj9lgm], .ve-music-seg[b-bid7kj9lgm], .ve-voice-seg[b-bid7kj9lgm] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}
.ve-text-seg[b-bid7kj9lgm], .ve-overlay-seg[b-bid7kj9lgm], .ve-voice-seg[b-bid7kj9lgm] { cursor: grab; }
.ve-text-seg[b-bid7kj9lgm] { background: var(--tint-amber); color: var(--amber); }
.ve-overlay-seg[b-bid7kj9lgm] { background: var(--tint-cyan); color: var(--cyan-ink); }
.ve-music-seg[b-bid7kj9lgm] { background: var(--tint-green); color: var(--green-ink); }
.ve-voice-seg[b-bid7kj9lgm] { background: var(--tint-purple); color: var(--purple-ink); }
.ve-voice-seg-recording[b-bid7kj9lgm] { background: var(--tint-red); color: var(--red-ink); cursor: default; }
.ve-text-seg-selected[b-bid7kj9lgm], .ve-overlay-seg-selected[b-bid7kj9lgm], .ve-voice-seg-selected[b-bid7kj9lgm] { outline: 2px solid var(--blue); outline-offset: -2px; }
/* A segment fills its track, which clips, so the ring goes inside like the clips'. */
.ve-text-seg:focus-visible[b-bid7kj9lgm], .ve-overlay-seg:focus-visible[b-bid7kj9lgm], .ve-voice-seg:focus-visible[b-bid7kj9lgm] { outline: 2px solid var(--blue); outline-offset: -2px !important; }
.ve-seg-thumb[b-bid7kj9lgm] { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; pointer-events: none; }
.ve-seg-label[b-bid7kj9lgm] { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.ve-track-body-audio[b-bid7kj9lgm] { background: rgba(86, 197, 184, 0.10); }
.ve-track-body-muted[b-bid7kj9lgm] { background: var(--line); }
.ve-audio-label[b-bid7kj9lgm] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* ── Settings panel ── */
.ve-properties[b-bid7kj9lgm] {
    border-left: 1px solid var(--border-light);
    background: #fff;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    min-width: 0;
}
.ve-properties > *[b-bid7kj9lgm] { flex-shrink: 0; }
.ve-properties-header[b-bid7kj9lgm] { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.08em; color: var(--text); text-transform: uppercase; }
.ve-prop-group[b-bid7kj9lgm] { display: flex; flex-direction: column; gap: 6px; }
.ve-prop-group-divided[b-bid7kj9lgm] { padding-top: 16px; border-top: 1px solid var(--border-light); }
.ve-prop-head[b-bid7kj9lgm] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ve-prop-label[b-bid7kj9lgm] { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.ve-prop-row[b-bid7kj9lgm] { display: flex; align-items: center; gap: 8px; }
.ve-prop-row-wrap[b-bid7kj9lgm] { flex-wrap: wrap; gap: 6px; }
.ve-prop-actions[b-bid7kj9lgm] { flex-direction: row; }
.ve-prop-value[b-bid7kj9lgm] { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ve-prop-value-strong[b-bid7kj9lgm] { color: var(--text); font-size: var(--fs-md); }
.ve-prop-note[b-bid7kj9lgm] { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-secondary); }

.ve-prop-input[b-bid7kj9lgm] {
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-md);
    color: var(--text);
    background: #fff;
}
.ve-prop-input:focus[b-bid7kj9lgm] { border-color: var(--accent); outline: none; }
.ve-prop-textarea[b-bid7kj9lgm] { resize: vertical; line-height: 1.4; }

.ve-prop-range[b-bid7kj9lgm] { appearance: none; min-width: 0; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--accent); cursor: pointer; }
.ve-prop-range[b-bid7kj9lgm]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.ve-prop-range[b-bid7kj9lgm]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ve-prop-range[b-bid7kj9lgm]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.ve-prop-range[b-bid7kj9lgm]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ve-prop-group:has(> .ve-prop-range)[b-bid7kj9lgm] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
.ve-prop-group > .ve-prop-range[b-bid7kj9lgm] { grid-column: 1 / -1; grid-row: 2; }
.ve-prop-group:has(> .ve-prop-range) > .ve-prop-value[b-bid7kj9lgm] { grid-column: 2; grid-row: 1; }

.ve-timing-row[b-bid7kj9lgm] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ve-timing-field[b-bid7kj9lgm] { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-secondary); }

.ve-btn-tonal[b-bid7kj9lgm] {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid var(--tint-blue);
    background: var(--pill);
    color: var(--accent);
    transition: background-color 150ms;
}
.ve-btn-tonal:hover:not(:disabled):not([aria-disabled="true"])[b-bid7kj9lgm] { background: var(--tint-blue); }
.ve-btn-small[b-bid7kj9lgm] { min-height: 36px; padding: 6px 10px; font-size: var(--fs-sm); align-self: flex-start; }
.ve-prop-row .ve-btn-small[b-bid7kj9lgm] { margin-left: auto; }

.ve-link[b-bid7kj9lgm] {
    border: 0;
    background: none;
    padding: 4px 0;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.ve-link:hover[b-bid7kj9lgm] { text-decoration: underline; }
/* About 24px tall on a phone, with Remove 12px from Make another. */
@media (pointer: coarse) {
    .ve-link[b-bid7kj9lgm] { min-height: 36px; }
}
.ve-link-danger[b-bid7kj9lgm] { color: var(--red); }

/* Pills for fonts, styles, places, animations, sound and speed. */
.ve-font-pill[b-bid7kj9lgm], .ve-bg-pill[b-bid7kj9lgm], .ve-anim-pill[b-bid7kj9lgm], .ve-track-pill[b-bid7kj9lgm], .ve-speed-pill[b-bid7kj9lgm] {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-light);
    background: #fff;
    color: var(--text-secondary);
}
/* Hover is close to the chosen look, so only a real pointer gets it: a tapped pill kept it on a phone. */
@media (hover: hover) {
    .ve-font-pill:hover[b-bid7kj9lgm], .ve-bg-pill:hover[b-bid7kj9lgm], .ve-anim-pill:hover[b-bid7kj9lgm], .ve-track-pill:hover[b-bid7kj9lgm], .ve-speed-pill:hover[b-bid7kj9lgm] { border-color: var(--accent); color: var(--accent); }
}
.ve-font-pill-active[b-bid7kj9lgm], .ve-bg-pill-active[b-bid7kj9lgm], .ve-anim-pill-active[b-bid7kj9lgm], .ve-track-pill-active[b-bid7kj9lgm], .ve-speed-pill-active[b-bid7kj9lgm] { background: var(--pill); border-color: var(--accent); color: var(--accent); }

.ve-color-swatch[b-bid7kj9lgm] {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-xs);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 8px #fff;
    cursor: pointer;
}
.ve-color-swatch-active[b-bid7kj9lgm] { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Logo and picture choices. */
.ve-overlay-grid[b-bid7kj9lgm] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ve-overlay-thumb[b-bid7kj9lgm] {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.ve-overlay-thumb:hover:not(:disabled)[b-bid7kj9lgm] { border-color: var(--accent); }
.ve-overlay-thumb img[b-bid7kj9lgm] { width: 100%; height: 100%; object-fit: contain; }
.ve-overlay-upload[b-bid7kj9lgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-style: dashed;
}
.ve-overlay-upload-disabled[b-bid7kj9lgm] { opacity: 0.5; cursor: not-allowed; }
/* The file input is see-through, and so was its focus ring: Tab reached "Upload a video to
   join", "Add a music file" and the picture upload with nothing on screen. The tile shows it. */
.ve-overlay-upload:has(input[type=file]:focus-visible)[b-bid7kj9lgm],
.ve-music-upload:has(input[type=file]:focus-visible)[b-bid7kj9lgm],
.ve-clip-upload:has(input[type=file]:focus-visible)[b-bid7kj9lgm] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}
/* The file input covers its tile, so the whole tile opens the file picker. */
.ve-overlay-upload[b-bid7kj9lgm]  input[type=file],
.ve-music-upload[b-bid7kj9lgm]  input[type=file],
.ve-clip-upload[b-bid7kj9lgm]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.ve-overlay-empty[b-bid7kj9lgm] { grid-column: 1 / -1; padding: 4px 0; font-size: var(--fs-note); line-height: 1.5; color: var(--text-secondary); }

/* Music. */
.ve-music-upload[b-bid7kj9lgm] { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; }
.ve-music-file[b-bid7kj9lgm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
    color: var(--green-ink);
}
.ve-music-file-name[b-bid7kj9lgm] { flex: 1 1 8rem; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-music-file-actions[b-bid7kj9lgm] { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Where a removed track was, with the way to put it back. */
.ve-removed[b-bid7kj9lgm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-control);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.ve-removed span[b-bid7kj9lgm] { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.ve-music-make[b-bid7kj9lgm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-control);
}
.ve-music-make > .ve-btn-tonal[b-bid7kj9lgm] { align-self: flex-start; }
.ve-prop-sublabel[b-bid7kj9lgm] { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.ve-music-making[b-bid7kj9lgm] { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); color: var(--text); }
.ve-music-making-text[b-bid7kj9lgm] { flex: 1; min-width: 0; }

/* Clips: the list in order, the joined video's name, and videos to join. */
.ve-clip-chip[b-bid7kj9lgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
@media (hover: hover) {
    .ve-clip-chip:hover[b-bid7kj9lgm] { border-color: var(--accent); color: var(--accent); }
}
.ve-clip-chip-active[b-bid7kj9lgm], .ve-clip-chip-active:hover[b-bid7kj9lgm] { background: var(--pill); border-color: var(--accent); color: var(--accent); }
.ve-clip-chip-number[b-bid7kj9lgm] {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-xs);
    line-height: 20px;
    text-align: center;
}
.ve-clip-chip-active .ve-clip-chip-number[b-bid7kj9lgm] { background: var(--accent); }
.ve-prop-head:has(> .ve-clip-source) > .ve-prop-label[b-bid7kj9lgm] { flex-shrink: 0; white-space: nowrap; }
.ve-clip-source[b-bid7kj9lgm] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.ve-clip-upload[b-bid7kj9lgm] { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ve-clip-grid[b-bid7kj9lgm] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ve-clip-tile[b-bid7kj9lgm] {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: var(--bg-canvas);
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
}
.ve-clip-tile:hover:not(:disabled)[b-bid7kj9lgm] { border-color: var(--accent); }
.ve-clip-tile img[b-bid7kj9lgm], .ve-clip-tile video[b-bid7kj9lgm] { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ve-clip-tile-length[b-bid7kj9lgm] {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(26, 29, 32, 0.75);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
}

/* Voice. */
.ve-voice-file[b-bid7kj9lgm] { color: var(--purple-ink); }
.ve-voice-record[b-bid7kj9lgm] { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.ve-rec-dot[b-bid7kj9lgm] { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.ve-voice-recording[b-bid7kj9lgm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--tint-red-line);
    border-radius: var(--radius-control);
    background: var(--tint-red);
    color: var(--red-ink);
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ve-voice-recording-text[b-bid7kj9lgm] { flex: 1; min-width: 0; }
.ve-voice-recording .ve-rec-dot[b-bid7kj9lgm] { animation: ve-rec-pulse-b-bid7kj9lgm 1.2s ease-in-out infinite; }
@keyframes ve-rec-pulse-b-bid7kj9lgm { 50% { opacity: 0.3; } }
.ve-check[b-bid7kj9lgm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}
.ve-check input[b-bid7kj9lgm] { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }

/* Auto subtitles results. */
.ve-prop-group-badge[b-bid7kj9lgm] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--tint-green);
    border: 1px solid var(--green-ink);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--green-ink);
}
.ve-prop-group-message[b-bid7kj9lgm] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--amber);
}

.ve-shell button:disabled[b-bid7kj9lgm], .ve-shell button[aria-disabled="true"][b-bid7kj9lgm], .ve-shell input:disabled[b-bid7kj9lgm] { opacity: .5; cursor: not-allowed; }
.ve-shell button:focus-visible[b-bid7kj9lgm], .ve-shell input:focus-visible[b-bid7kj9lgm], .ve-shell textarea:focus-visible[b-bid7kj9lgm], .ve-shell [tabindex="0"]:focus-visible[b-bid7kj9lgm] { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 1024px) {
    .ve-body[b-bid7kj9lgm] { grid-template-columns: 68px minmax(0, 1fr) 280px; }
}

/* ── Phone: one column; the video, its play bar and the tools stay at the top. ── */
@media (max-width: 760px) {
    .ve-shell[b-bid7kj9lgm] { --ve-stage-h: clamp(180px, 30dvh, 340px); --ve-transport-h: 52px; }
    .ve-topbar[b-bid7kj9lgm] { align-items: flex-start; gap: 8px; padding: 10px 12px; }
    .ve-topbar-right[b-bid7kj9lgm] { width: 100%; flex-wrap: nowrap; gap: 6px; }
    .ve-topbar-right .ve-btn[b-bid7kj9lgm] { padding: 8px 10px; white-space: normal; line-height: 1.2; }
    .ve-topbar-right .ve-btn-primary[b-bid7kj9lgm] { flex: 1; }
    .ve-confirm[b-bid7kj9lgm] { width: 100%; }

    .ve-body[b-bid7kj9lgm] { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
    .ve-canvas-col[b-bid7kj9lgm] { display: contents; }
    .ve-canvas[b-bid7kj9lgm] { order: 1; flex: none; height: var(--ve-stage-h); min-height: 0; padding: 8px; position: sticky; top: 0; z-index: 6; }
    .ve-transport[b-bid7kj9lgm] { order: 2; height: var(--ve-transport-h); min-height: 0; padding: 6px 12px; position: sticky; top: var(--ve-stage-h); z-index: 6; }
    /* Straight under the play bar, as on a wide screen; it came first, above the video. */
    .ve-split-note[b-bid7kj9lgm] { order: 2; padding: 6px 12px; }
    .ve-toolrail[b-bid7kj9lgm] {
        order: 3;
        flex-direction: row;
        gap: 4px;
        padding: 6px 8px;
        border-right: 0;
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
        position: sticky;
        top: calc(var(--ve-stage-h) + var(--ve-transport-h));
        z-index: 6;
    }
    .ve-toolicon[b-bid7kj9lgm] { flex: 1 0 52px; min-height: 48px; padding: 4px 2px; }
    /* 52px cut "OVERLAY" into the playhead and the track beside it. */
    .ve-timeline[b-bid7kj9lgm] { order: 4; padding: 8px 10px 10px; --track-label-width: 62px;
        scroll-margin-top: calc(var(--ve-stage-h) + var(--ve-transport-h) + 62px); }
    .ve-properties[b-bid7kj9lgm] { order: 5; border-left: 0; padding: 12px; overflow: visible; flex-shrink: 0;
        /* A tool tap scrolls the panel up to sit just under the pinned video, play bar and tools. */
        scroll-margin-top: calc(var(--ve-stage-h) + var(--ve-transport-h) + 62px); }
}
/* On a short screen (a laptop at 200% zoom, a phone on its side) the pinned video, play bar and
   tools were taller than the space under the top bar, so the tool's settings scrolled under them
   and could never be seen: at 640 by 400 Trim and Voice had no controls on screen at all. There
   everything scrolls in one column instead. */
@media (max-width: 760px) and (max-height: 660px) {
    .ve-canvas[b-bid7kj9lgm], .ve-transport[b-bid7kj9lgm], .ve-toolrail[b-bid7kj9lgm] { position: static; }
    .ve-timeline[b-bid7kj9lgm], .ve-properties[b-bid7kj9lgm] { scroll-margin-top: 0; }
}
@media (max-width: 400px) {
    .ve-topbar-left[b-bid7kj9lgm] { width: 100%; flex-basis: 100%; }
    .ve-btn[b-bid7kj9lgm] { font-size: var(--fs-sm); }
    .ve-transport-note[b-bid7kj9lgm] { display: none; }
    /* Six tools at 52px each cut Speed off the edge at 320 with nothing to say it scrolls. */
    .ve-toolrail[b-bid7kj9lgm] { gap: 2px; padding: 6px 4px; }
    .ve-toolicon[b-bid7kj9lgm] { flex: 1 1 0; min-width: 0; padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ve-shell *[b-bid7kj9lgm] { animation: none; transition: none; }
    .ve-spinner[b-bid7kj9lgm] { animation: ve-spin-b-bid7kj9lgm 2s linear infinite; }
}

/* High Contrast drops the accent colour, which was all that marked these as buttons. */
@media (forced-colors: active) {
    .ve-link:not(:disabled)[b-bid7kj9lgm] {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* The timeline is drawn in fills. The play position, the kept part of the clip, the lanes
       and what sits on them all went, leaving two trim handles on a blank strip. */
    .ve-track-body[b-bid7kj9lgm] { border: 1px solid GrayText; }
    .ve-clip[b-bid7kj9lgm], .ve-text-seg[b-bid7kj9lgm], .ve-overlay-seg[b-bid7kj9lgm], .ve-music-seg[b-bid7kj9lgm], .ve-voice-seg[b-bid7kj9lgm] { border: 1px solid CanvasText; }
    .ve-clip-selected[b-bid7kj9lgm], .ve-text-seg-selected[b-bid7kj9lgm], .ve-overlay-seg-selected[b-bid7kj9lgm], .ve-voice-seg-selected[b-bid7kj9lgm] { outline-color: Highlight; }
    .ve-playhead[b-bid7kj9lgm] { forced-color-adjust: none; background: Highlight; }
    .ve-playhead-caret[b-bid7kj9lgm] { forced-color-adjust: none; border-top-color: Highlight; }
    .ve-trim-handle-grip[b-bid7kj9lgm] { forced-color-adjust: none; background: CanvasText; }
}
/* /Layout/StudioLayout.razor.rz.scp.css */
.studio-layout-main[b-ypsetwpecx] {
    min-height: 100dvh;
    background: var(--bg-canvas);
}

.studio-layout-state[b-ypsetwpecx] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12vh auto 0;
    max-width: 520px;
    min-height: 120px;
    padding: 24px;
}

.studio-layout-state.error[b-ypsetwpecx] {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    flex-direction: column;
}

.studio-layout-state.error > span[b-ypsetwpecx] {
    color: var(--text-secondary);
}

.studio-layout-actions[b-ypsetwpecx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
/* /Pages/AddBusiness.razor.rz.scp.css */
.add-business[b-bpm7a7yktn] {
    display: grid;
    gap: 16px;
    max-width: 560px;
}

.add-business-help[b-bpm7a7yktn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.add-business-form[b-bpm7a7yktn] {
    display: grid;
    gap: 16px;
}

.add-business-field[b-bpm7a7yktn] {
    display: grid;
    gap: 6px;
}

.add-business-field label[b-bpm7a7yktn] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.add-business-optional[b-bpm7a7yktn] {
    color: var(--text-secondary);
    font-weight: 400;
}

.add-business-error[b-bpm7a7yktn] {
    padding: 10px 12px;
    border: 1px solid rgba(var(--red-rgb), 0.24);
    border-radius: var(--radius-sm);
    background: rgba(var(--red-rgb), 0.06);
    color: var(--red-ink);
    font-size: var(--fs-sm);
}

.add-business .settings-actions[b-bpm7a7yktn] {
    align-items: center;
    margin-top: 4px;
}
/* /Pages/Admin.razor.rz.scp.css */
/* Admin: same page frame, type and controls as the other workspace pages. Repeated things
   (stat tiles, user rows) carry their own border; everything else is an unframed section with
   a rule. Controls are 44px, 6px corners; solid blue primary, white secondary, red danger. */
.admin-page[b-t1tpi7pyk0], .admin-page *[b-t1tpi7pyk0] { box-sizing: border-box; letter-spacing: 0; }
.admin-page[b-t1tpi7pyk0] { padding-bottom: 40px; }

.admin-header[b-t1tpi7pyk0] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.admin-header p[b-t1tpi7pyk0] { margin: 4px 0 0; font-size: var(--fs-note); line-height: 1.5; color: var(--text-secondary); }
.admin-header .workspace-page-title[b-t1tpi7pyk0] { margin: 0; }

.admin-btn[b-t1tpi7pyk0] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-control); background: #fff; color: var(--text); font: inherit; font-size: var(--fs-note); font-weight: 600; cursor: pointer; white-space: nowrap; }
.admin-btn:hover:not(:disabled)[b-t1tpi7pyk0] { background: var(--bg-canvas); }
.admin-btn:disabled[b-t1tpi7pyk0] { color: var(--text-secondary); cursor: default; }
.admin-btn-primary[b-t1tpi7pyk0] { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-btn-primary:hover:not(:disabled)[b-t1tpi7pyk0] { background: var(--accent-dark); }
.admin-btn-primary:disabled[b-t1tpi7pyk0] { background: var(--tint-blue); border-color: var(--tint-blue); color: var(--text-secondary); }
.admin-btn-danger[b-t1tpi7pyk0] { background: var(--red); border-color: var(--red); color: #fff; }
.admin-btn-danger:hover:not(:disabled)[b-t1tpi7pyk0] { background: var(--red-ink); }
.admin-btn-danger:disabled[b-t1tpi7pyk0] { background: var(--tint-red-line); border-color: var(--tint-red-line); color: var(--red-ink); }
.admin-page :focus-visible[b-t1tpi7pyk0] { outline: 2px solid var(--blue); outline-offset: 3px; }

.admin-status[b-t1tpi7pyk0] { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-xs); font-size: var(--fs-note); line-height: 1.5; background: #fff; }
.admin-status-error[b-t1tpi7pyk0] { background: var(--ground); border-color: var(--tint-red-line); color: var(--red-ink); }
.admin-status-success[b-t1tpi7pyk0] { background: var(--tint-green); border-color: var(--green-ink); color: var(--green-ink); }
.admin-status span[b-t1tpi7pyk0] { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.admin-status .admin-btn[b-t1tpi7pyk0] { flex: none; }

.admin-loading[b-t1tpi7pyk0] { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--text-secondary); font-size: var(--fs-note); }
.admin-spinner[b-t1tpi7pyk0] { width: 22px; height: 22px; flex: none; border: 3px solid var(--tint-blue); border-top-color: var(--accent); border-radius: 50%; animation: admin-spin-b-t1tpi7pyk0 0.8s linear infinite; }
@keyframes admin-spin-b-t1tpi7pyk0 { to { transform: rotate(360deg); } }

.admin-denied[b-t1tpi7pyk0] { max-width: 560px; }
.admin-denied h2[b-t1tpi7pyk0] { margin: 0 0 8px; font-size: var(--fs-lg); line-height: 1.35; }
.admin-denied p[b-t1tpi7pyk0] { margin: 0 0 16px; font-size: var(--fs-note); line-height: 1.6; color: var(--text-secondary); }

.admin-stats-grid[b-t1tpi7pyk0] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-stat[b-t1tpi7pyk0] { padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: #fff; min-width: 0; }
.admin-stat strong[b-t1tpi7pyk0] { display: block; font-size: var(--fs-heading); line-height: 1.2; font-weight: 600; }
.admin-stat span[b-t1tpi7pyk0] { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-secondary); }

.admin-toolbar[b-t1tpi7pyk0] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.admin-search[b-t1tpi7pyk0] { flex: 1 1 260px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line-field); border-radius: var(--radius-control); background: #fff; color: var(--text); font: inherit; font-size: var(--fs-md); }
.admin-search:focus[b-t1tpi7pyk0] { outline: 2px solid var(--blue); outline-offset: 3px; border-color: var(--accent); }
.admin-filters[b-t1tpi7pyk0] { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-filter[b-t1tpi7pyk0] { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: #fff; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.admin-filter:hover[b-t1tpi7pyk0] { background: var(--bg-canvas); }
.admin-filter[aria-pressed="true"][b-t1tpi7pyk0] { background: var(--accent); border-color: var(--accent); color: #fff; }

.admin-table-shell[b-t1tpi7pyk0] { border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.admin-user-header[b-t1tpi7pyk0], .admin-user-row[b-t1tpi7pyk0] { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(96px, 1fr) minmax(96px, 1fr) minmax(96px, 1fr) minmax(104px, 1fr) 64px; gap: 12px; align-items: center; padding: 12px 16px; }
.admin-user-header[b-t1tpi7pyk0] { border-bottom: 1px solid var(--border-light); background: var(--bg-canvas); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.admin-user-row[b-t1tpi7pyk0] { border-bottom: 1px solid var(--border-light); cursor: pointer; text-align: left; width: 100%; background: transparent; color: inherit; font: inherit; border-left: 0; border-right: 0; border-top: 0; }
.admin-user-row:last-child[b-t1tpi7pyk0] { border-bottom: 0; }
.admin-user-row:hover[b-t1tpi7pyk0] { background: var(--bg-canvas); }
.admin-user-row[aria-expanded="true"][b-t1tpi7pyk0] { background: var(--tint-blue); }
.admin-user-row:focus-visible[b-t1tpi7pyk0] { outline-offset: -2px !important; }
.admin-user-cell[b-t1tpi7pyk0] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-avatar[b-t1tpi7pyk0] { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.admin-user-name[b-t1tpi7pyk0] { min-width: 0; }
.admin-user-name strong[b-t1tpi7pyk0] { display: block; font-size: var(--fs-note); font-weight: 600; overflow-wrap: anywhere; }
.admin-user-name span[b-t1tpi7pyk0] { display: block; font-size: var(--fs-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-cell[b-t1tpi7pyk0] { font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.admin-cell-admin[b-t1tpi7pyk0] { display: flex; justify-content: center; color: var(--accent); }
.admin-empty[b-t1tpi7pyk0] { padding: 40px 16px; text-align: center; color: var(--text-secondary); font-size: var(--fs-note); }

.admin-detail-panel[b-t1tpi7pyk0] { padding: 8px 16px 24px; border-bottom: 1px solid var(--border-light); background: var(--tint-blue); }
.admin-detail-grid[b-t1tpi7pyk0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.admin-detail-section[b-t1tpi7pyk0] { padding: 16px 0; border-top: 1px solid var(--border-light); min-width: 0; }
.admin-detail-section h2[b-t1tpi7pyk0] { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.admin-detail-row[b-t1tpi7pyk0] { display: flex; gap: 12px; padding: 6px 0; font-size: var(--fs-sm); line-height: 1.5; }
.admin-detail-row dt[b-t1tpi7pyk0] { flex: 0 0 96px; color: var(--text-secondary); }
.admin-detail-row dd[b-t1tpi7pyk0] { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.admin-detail-row a[b-t1tpi7pyk0] { color: var(--accent); }
.admin-detail-error[b-t1tpi7pyk0] { padding: 12px; border: 1px solid var(--tint-red-line); border-radius: var(--radius-xs); background: var(--ground); color: var(--red-ink); font-size: var(--fs-note); line-height: 1.5; }
.admin-usage[b-t1tpi7pyk0] { margin-bottom: 10px; }
.admin-usage-head[b-t1tpi7pyk0] { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); margin-bottom: 4px; }
.admin-usage-head strong[b-t1tpi7pyk0] { font-weight: 600; }
.admin-usage-track[b-t1tpi7pyk0] { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.admin-usage-fill[b-t1tpi7pyk0] { height: 100%; background: var(--accent); }
.admin-usage-fill.unlimited[b-t1tpi7pyk0] { opacity: 0.35; }
.admin-content-stats[b-t1tpi7pyk0] { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.admin-content-stats div[b-t1tpi7pyk0] { font-size: var(--fs-sm); color: var(--text-secondary); }
.admin-content-stats strong[b-t1tpi7pyk0] { display: block; font-size: var(--fs-md); color: var(--text); font-weight: 600; }

.admin-actions-grid[b-t1tpi7pyk0] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.admin-action[b-t1tpi7pyk0] { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.admin-action label[b-t1tpi7pyk0], .admin-action > span[b-t1tpi7pyk0] { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.admin-action-controls[b-t1tpi7pyk0] { display: flex; gap: 8px; }
.admin-select[b-t1tpi7pyk0] { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line-field); border-radius: var(--radius-control); background: #fff; color: var(--text); font: inherit; font-size: var(--fs-note); }
.admin-danger-zone[b-t1tpi7pyk0] { margin-left: auto; }
.admin-delete-confirm-row[b-t1tpi7pyk0] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-delete-confirm-row span[b-t1tpi7pyk0] { font-size: var(--fs-sm); color: var(--red-ink); }
.admin-action-message[b-t1tpi7pyk0] { margin-top: 12px; font-size: var(--fs-note); line-height: 1.5; }
.admin-action-message.error[b-t1tpi7pyk0] { color: var(--red-ink); }
.admin-action-message.success[b-t1tpi7pyk0] { color: var(--green-ink); }

@media (max-width: 960px) {
    .admin-stats-grid[b-t1tpi7pyk0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-header[b-t1tpi7pyk0] { flex-direction: column; }
    .admin-user-header[b-t1tpi7pyk0] { display: none; }
    .admin-user-row[b-t1tpi7pyk0] { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .admin-user-cell[b-t1tpi7pyk0] { grid-column: 1 / -1; }
    .admin-cell-admin[b-t1tpi7pyk0] { justify-content: flex-start; }
    .admin-detail-grid[b-t1tpi7pyk0] { grid-template-columns: minmax(0, 1fr); }
    .admin-danger-zone[b-t1tpi7pyk0] { margin-left: 0; }
    .admin-action[b-t1tpi7pyk0] { min-width: 0; width: 100%; }
}

@media (max-width: 520px) {
    .admin-stats-grid[b-t1tpi7pyk0] { grid-template-columns: minmax(0, 1fr); }
    .admin-filters[b-t1tpi7pyk0] { width: 100%; }
    .admin-filter[b-t1tpi7pyk0] { flex: 1 1 auto; }
    .admin-detail-panel[b-t1tpi7pyk0] { padding: 8px 12px 20px; }
    .admin-action-controls[b-t1tpi7pyk0], .admin-delete-confirm-row[b-t1tpi7pyk0] { flex-direction: column; align-items: stretch; }
    .admin-user-row[b-t1tpi7pyk0] { padding: 12px; }
}

/* /Pages/Advisor.razor.rz.scp.css */
/* The conversation fills the window under the top bar, so the question box stays in view at
   the foot and the thread scrolls above it. */
.advisor-page[b-yj798os1j2] {
    box-sizing: border-box;
    height: calc(100dvh - var(--workspace-header-height, 64px));
    margin: 0 auto;
    max-width: 920px;
    min-height: 420px;
    padding: 28px 32px 20px;
    width: 100%;
}

.advisor-state[b-yj798os1j2] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: var(--fs-sm);
    gap: 8px;
}

/* What the advisor is always given, shown before the first question so the owner knows why
   its answers fit the business, and what to add when they would not. */
.advisor-knows[b-yj798os1j2] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 10px;
    padding: 14px 16px;
}

.advisor-knows-title[b-yj798os1j2] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin: 0;
}

.advisor-knows-list[b-yj798os1j2] {
    display: grid;
    gap: 6px;
    margin: 0;
}

.advisor-knows-list > div[b-yj798os1j2] {
    display: grid;
    gap: 2px 16px;
    grid-template-columns: 120px minmax(0, 1fr);
}

.advisor-knows-list dt[b-yj798os1j2] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.advisor-knows-list dd[b-yj798os1j2] {
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.advisor-knows-list .missing dd[b-yj798os1j2] {
    color: var(--amber);
}

.advisor-knows-link[b-yj798os1j2] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    /* A 32px target that keeps the card's spacing as it was. */
    margin: -6px 0;
    min-height: 32px;
    font-size: var(--fs-sm);
    font-weight: 600;
    justify-self: start;
    text-decoration: none;
}

.advisor-knows-link:hover[b-yj798os1j2] {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .advisor-knows[b-yj798os1j2] {
        padding: 12px 14px;
    }

    .advisor-knows-list > div[b-yj798os1j2] {
        gap: 2px 12px;
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

/* Below 960px the top bar is 60px and the menu moves to a 68px bar at the foot, which covered
   the question box. */
@media (max-width: 960px) {
    .advisor-page[b-yj798os1j2] {
        height: calc(100dvh - 60px - 68px - env(safe-area-inset-bottom));
        min-height: 360px;
        padding: 20px 18px 12px;
    }
}

@media (max-width: 640px) {
    .advisor-page[b-yj798os1j2] {
        padding: 16px 16px 10px;
    }
}

/* A phone on its side leaves about 260px between the bars: the answers got one line and the
   question box went under the menu. There the page scrolls as a whole instead. */
@media (max-height: 520px) {
    .advisor-page[b-yj798os1j2] {
        height: auto;
        min-height: 0;
    }
}
/* /Pages/Analytics.razor.rz.scp.css */
.analytics-header[b-cikcauevxl] {
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    margin: 0 0 24px;
    min-height: 64px;
    padding: 0 0 20px;
    gap: 20px;
}

.analytics-header h1[b-cikcauevxl] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin: 0;
}

.analytics-header-actions[b-cikcauevxl] {
    align-items: center;
    display: flex;
    gap: 8px;
}

.analytics-header select[b-cikcauevxl],
.analytics-export[b-cikcauevxl] {
    background: #fff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    min-height: 44px;
    padding: 8px 11px;
}

.analytics-export[b-cikcauevxl] {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    text-decoration: none;
}

.analytics-export:hover:not(:disabled)[b-cikcauevxl] {
    background: var(--ground);
}

.analytics-export:disabled[b-cikcauevxl] {
    cursor: not-allowed;
    opacity: .5;
}

.analytics-page[b-cikcauevxl] {
    display: grid;
    gap: 28px;
    min-width: 0;
}

.analytics-header p[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 4px 0 0;
}

.analytics-stat > a[b-cikcauevxl],
.analytics-section-heading a[b-cikcauevxl] {
    /* Standalone action links, not links inside a sentence, so WCAG 2.5.8
       wants a 24px target. They were 20px tall. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--blue);
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}

.analytics-stat > a:hover[b-cikcauevxl],
.analytics-section-heading a:hover[b-cikcauevxl] {
    text-decoration: underline;
}

.analytics-state[b-cikcauevxl] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 220px;
}

.analytics-state.error[b-cikcauevxl] {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--tint-red-line);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    flex-direction: column;
    justify-content: center;
    padding: 24px;
}

.analytics-state.error span[b-cikcauevxl] {
    color: var(--text-secondary);
}

.analytics-state.error button[b-cikcauevxl] {
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-control);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-top: 6px;
    min-height: 44px;
    padding: 8px 14px;
}

.analytics-stats[b-cikcauevxl] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-stat[b-cikcauevxl] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.analytics-stat[b-cikcauevxl] {
    min-width: 0;
    padding: 17px;
}

.analytics-stat > span[b-cikcauevxl],
.analytics-stat > strong[b-cikcauevxl],
.analytics-stat > small[b-cikcauevxl] {
    display: block;
}

.analytics-stat > span[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.analytics-stat > strong[b-cikcauevxl] {
    font-size: var(--fs-2xl);
    font-weight: 780;
    line-height: 1.15;
    margin-top: 8px;
}

.analytics-stat > small[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 7px;
}

.analytics-stat > small.positive[b-cikcauevxl] {
    color: var(--green-ink);
}

.analytics-stat > small.negative[b-cikcauevxl] {
    color: var(--red-ink);
}

.analytics-stat > a[b-cikcauevxl] {
    margin-top: 8px;
}

/* A failure is the one number here with something to do about it. */
.analytics-stat.attention[b-cikcauevxl] {
    border-color: var(--tint-red-line);
}

.analytics-primary-grid[b-cikcauevxl],
.analytics-secondary-grid[b-cikcauevxl] {
    display: grid;
    gap: 24px;
}

.analytics-primary-grid[b-cikcauevxl] {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
}

/* Side by side only when each list gets 400px. At 1024 beside the sidebar, and at 768,
   recent posts had about 330px, so every title was cut after a few words. */
.analytics-secondary-grid[b-cikcauevxl] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.analytics-section[b-cikcauevxl] {
    min-width: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border-light);
}

.analytics-section-heading[b-cikcauevxl] {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.analytics-section-heading h2[b-cikcauevxl],
.analytics-section-heading p[b-cikcauevxl] {
    margin: 0;
}

.analytics-section-heading h2[b-cikcauevxl] {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.analytics-section-heading p[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin-top: 3px;
}

.analytics-legend[b-cikcauevxl] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
}

.analytics-legend span[b-cikcauevxl] {
    align-items: center;
    color: var(--text-secondary);
    display: inline-flex;
    font-size: var(--fs-xs);
    gap: 4px;
}

.analytics-legend i[b-cikcauevxl] {
    border-radius: 2px;
    height: 8px;
    width: 8px;
}

.analytics-legend .published[b-cikcauevxl],
.analytics-bars .published[b-cikcauevxl] {
    background: var(--accent);
}

.analytics-legend .destinations[b-cikcauevxl],
.analytics-bars .destinations[b-cikcauevxl] {
    background: var(--blue-lt);
}

.analytics-legend .failed[b-cikcauevxl],
.analytics-bars .failed[b-cikcauevxl] {
    background: var(--red);
}

/* The scale on the left, then the bars. The bars area runs from the top of the chart to 27px
   above its bottom (24px of day labels and 3px of padding); the scale uses the same numbers. */
.analytics-chart-frame[b-cikcauevxl] {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    min-width: 0;
}

.analytics-chart-axis[b-cikcauevxl] {
    flex: 0 0 auto;
    height: 225px;
    min-width: 18px;
    position: relative;
}

.analytics-chart-axis span[b-cikcauevxl] {
    bottom: calc(27px + (100% - 27px) * var(--tick) / var(--chart-steps));
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    line-height: 1;
    position: absolute;
    right: 0;
    transform: translateY(50%);
}

.analytics-chart[b-cikcauevxl] {
    align-items: end;
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    height: 225px;
    margin-top: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
    padding: 0 2px 3px;
}

.analytics-chart[b-cikcauevxl]::-webkit-scrollbar { height: 5px; }
.analytics-chart[b-cikcauevxl]::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }

/* Positioned, so each day's screen reader label is clipped by the scrolling chart. Without it the
   label escaped the scroll box and made the whole page 11px wider than a 320 screen. */
.analytics-chart-column[b-cikcauevxl] {
    align-items: center;
    display: flex;
    flex: 1 0 44px;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    min-width: 44px;
    padding: 0 4px;
    position: relative;
}

/* Wider than the column by its padding, so the scale lines run unbroken from day to day. */
.analytics-bars[b-cikcauevxl] {
    align-items: end;
    background-image: linear-gradient(to top, var(--line) 1px, transparent 1px);
    background-position: left bottom;
    background-size: 100% calc(100% / var(--chart-steps, 1));
    box-shadow: inset 0 1px 0 var(--line);
    display: flex;
    gap: 2px;
    height: calc(100% - 24px);
    justify-content: center;
    margin: 0 -4px;
    width: calc(100% + 8px);
}

.analytics-bars span[b-cikcauevxl] {
    border-radius: 3px 3px 0 0;
    max-width: 12px;
    min-height: 0;
    width: 28%;
}

.analytics-chart-column small[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    height: 18px;
    line-height: 18px;
    margin-top: 6px;
    white-space: nowrap;
}

.analytics-platform-list[b-cikcauevxl],
.analytics-post-list[b-cikcauevxl],
.analytics-time-list[b-cikcauevxl] {
    display: grid;
    gap: 10px;
    margin-top: 17px;
}

.analytics-platform-row[b-cikcauevxl] {
    display: grid;
    gap: 7px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.analytics-platform-copy strong[b-cikcauevxl],
.analytics-platform-copy span[b-cikcauevxl] {
    display: block;
}

.analytics-platform-copy strong[b-cikcauevxl] {
    font-size: var(--fs-sm);
}

.analytics-platform-copy span[b-cikcauevxl],
.analytics-platform-row > span[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.analytics-platform-track[b-cikcauevxl] {
    background: var(--line);
    border-radius: 3px;
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
}

.analytics-platform-track span[b-cikcauevxl] {
    background: var(--accent);
    display: block;
    height: 100%;
}

.analytics-post[b-cikcauevxl] {
    align-items: center;
    background: var(--ground);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 8px 12px 8px 8px;
}

.analytics-post:hover[b-cikcauevxl] {
    border-color: var(--line-strong);
}

.analytics-post-main[b-cikcauevxl] {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.analytics-post-thumb[b-cikcauevxl] {
    border-radius: var(--radius-xs);
    flex: 0 0 auto;
    height: 48px;
    object-fit: cover;
    width: 48px;
}

/* A text-only post: the same lines glyph the Dashboard uses, not a grey square that reads as a
   picture that failed to load. */
.analytics-post-thumb.empty[b-cikcauevxl] {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.analytics-post-thumb.empty svg[b-cikcauevxl] {
    fill: none;
    height: 18px;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-width: 2;
    width: 18px;
}

.analytics-post-copy[b-cikcauevxl] {
    display: block;
    min-width: 0;
}

.analytics-post-copy strong[b-cikcauevxl],
.analytics-post-copy span[b-cikcauevxl] {
    display: block;
}

.analytics-post-copy strong[b-cikcauevxl] {
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-post-copy span[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 3px;
}

.analytics-post-live[b-cikcauevxl] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    gap: 4px;
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
}

.analytics-post-lives[b-cikcauevxl] {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
}

/* Two or three links stack beside the post; each keeps a 32px target. */
.analytics-post-lives.several .analytics-post-live[b-cikcauevxl] {
    min-height: 32px;
}

.analytics-post-live:hover[b-cikcauevxl] {
    text-decoration: underline;
}

.analytics-time-row[b-cikcauevxl] {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 9px 1px 11px;
}

.analytics-time-row:last-child[b-cikcauevxl] {
    border-bottom: 0;
}

.analytics-time-row strong[b-cikcauevxl],
.analytics-time-row span[b-cikcauevxl] {
    display: block;
}

.analytics-time-row strong[b-cikcauevxl] {
    font-size: var(--fs-sm);
}

.analytics-time-row span[b-cikcauevxl],
.analytics-time-row small[b-cikcauevxl] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.analytics-time-row span[b-cikcauevxl] {
    margin-top: 2px;
}

.analytics-empty[b-cikcauevxl] {
    align-items: flex-start;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.analytics-empty.compact[b-cikcauevxl] {
    min-height: 120px;
    padding: 20px 0;
}

.analytics-empty strong[b-cikcauevxl] {
    color: var(--text-primary);
    font-size: var(--fs-sm);
}

.analytics-empty span[b-cikcauevxl] {
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin-top: 4px;
    max-width: 320px;
}

@media (max-width: 1050px) {
    .analytics-stats[b-cikcauevxl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-primary-grid[b-cikcauevxl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .analytics-header[b-cikcauevxl] {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin: 0 0 20px;
        padding: 0 0 18px;
        position: static;
    }

    .analytics-header-actions[b-cikcauevxl] {
        width: 100%;
    }

    .analytics-header select[b-cikcauevxl] {
        flex: 1 1 auto;
        min-width: 0;
        font-size: var(--fs-md);
    }

    .analytics-header h1[b-cikcauevxl] { font-size: var(--fs-heading); }

    .analytics-section-heading[b-cikcauevxl] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .analytics-legend[b-cikcauevxl] {
        justify-content: flex-start;
    }

    /* The height lines empty panels up side by side. Stacked on a phone, it left a blank gap
       under each one-line "None in the last 7 days". */
    .analytics-empty.compact[b-cikcauevxl] {
        min-height: 0;
        padding: 12px 0 20px;
    }
}

@media (max-width: 480px) {
    .analytics-stats[b-cikcauevxl] {
        grid-template-columns: 1fr;
    }

    .analytics-stat[b-cikcauevxl] {
        align-items: baseline;
        display: grid;
        gap: 3px 12px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .analytics-stat > strong[b-cikcauevxl] {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }

    .analytics-stat > small[b-cikcauevxl] {
        margin-top: 0;
    }

    .analytics-stat > a[b-cikcauevxl] {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    .analytics-section[b-cikcauevxl] {
        padding: 18px 0 0;
    }

    /* The live link goes under the post on a phone, where the caption needs the width. */
    .analytics-post[b-cikcauevxl] {
        flex-wrap: wrap;
        gap: 0 12px;
    }

    /* Its own line, as wide as the copy above it, so a second link wraps rather than running off
       a 320 screen (the base rule sizes it to both links side by side). */
    .analytics-post-lives[b-cikcauevxl] {
        align-items: center;
        column-gap: 16px;
        flex: 1 1 calc(100% - 60px);
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 60px;
        min-width: 0;
    }

    .analytics-post-live[b-cikcauevxl] {
        min-height: 32px;
    }

    /* A week fits a phone without scrolling, so today is not hidden past the right edge.
       Longer ranges keep the wider columns their date labels need. */
    .analytics-chart.is-week .analytics-chart-column[b-cikcauevxl] {
        flex-basis: 34px;
        min-width: 34px;
    }
}

/* High Contrast drops colour fills, and the fills were the whole chart: the bars, their key and
   the platform shares all vanished. System colours tell the series apart there, and failed posts
   are hatched so they do not rely on telling two colours apart. */
@media (forced-colors: active) {
    .analytics-legend i[b-cikcauevxl],
    .analytics-bars span[b-cikcauevxl],
    .analytics-platform-track[b-cikcauevxl],
    .analytics-platform-track span[b-cikcauevxl] {
        forced-color-adjust: none;
    }

    .analytics-legend .published[b-cikcauevxl],
    .analytics-bars .published[b-cikcauevxl] {
        background: CanvasText;
    }

    .analytics-legend .destinations[b-cikcauevxl],
    .analytics-bars .destinations[b-cikcauevxl] {
        background: Highlight;
    }

    .analytics-legend .failed[b-cikcauevxl],
    .analytics-bars .failed[b-cikcauevxl] {
        background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 4px);
    }

    .analytics-platform-track[b-cikcauevxl] {
        background: Canvas;
        border: 1px solid CanvasText;
    }

    .analytics-platform-track span[b-cikcauevxl] {
        background: Highlight;
    }
}

/* A period change in progress: the page stays put, dimmed, and the select says so. */
.analytics-page.is-updating > :not(.analytics-state)[b-cikcauevxl] { opacity: .55; }
.analytics-updating[b-cikcauevxl] { color: var(--text-secondary); font-size: var(--fs-note); }
/* Out of sight but still in the accessibility tree: a status region that was display:none when
   empty is often not announced when its text arrives. */
.analytics-updating:empty[b-cikcauevxl] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* /Pages/Analyze.razor.rz.scp.css */
.analyze-page[b-p8u3saarj5] { min-height: 100dvh; padding: 0; background: #fff; color: var(--text); }
.analyze-page[b-p8u3saarj5], .analyze-page *[b-p8u3saarj5] { letter-spacing: 0; box-sizing: border-box; }
.analyze-mast[b-p8u3saarj5] { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 32px; border-bottom: 1px solid var(--border-light); }
.analyze-mast a[b-p8u3saarj5] { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-xl); font-weight: 700; color: var(--accent); text-decoration: none; }
.analyze-mast span[b-p8u3saarj5] { font-size: var(--fs-sm); color: var(--text-secondary); }
.analyze-container[b-p8u3saarj5] { max-width: 1120px; margin: 0 auto; padding: 32px; }
.analyze-header[b-p8u3saarj5] { text-align: left; margin-bottom: 24px; }
.analyze-header h1[b-p8u3saarj5] { font-size: var(--fs-2xl); line-height: 1.25; margin: 0 0 12px; }
.analyze-header p[b-p8u3saarj5] { font-size: var(--fs-base); line-height: 1.6; max-width: 55ch; }
.analyze-progress[b-p8u3saarj5] { position: static; height: 6px; margin: 0 0 10px; background: var(--line); border-radius: 3px; }
.analyze-progress-bar[b-p8u3saarj5] { border-radius: 3px; background: var(--accent); }
.analyze-status[b-p8u3saarj5] { text-align: left; font-size: var(--fs-note); line-height: 1.5; margin-bottom: 28px; }
.analyze-columns[b-p8u3saarj5] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
.analyze-columns > div[b-p8u3saarj5] { min-width: 0; }
.analyze-cards[b-p8u3saarj5] { display: flex; flex-direction: column; gap: 0; }
.analyze-playground[b-p8u3saarj5] { position: sticky; top: 24px; height: clamp(320px, calc(100dvh - 300px), 640px); min-height: 320px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; }
.analyze-playground-loading[b-p8u3saarj5] { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; color: var(--text-secondary); }
.analyze-playground-loading h2[b-p8u3saarj5] { font-size: var(--fs-heading-sm); color: var(--text); font-weight: 600; margin: 16px 0 8px; }
.analyze-playground-loading p[b-p8u3saarj5] { font-size: var(--fs-note); line-height: 1.6; margin: 0; }
.analyze-completion[b-p8u3saarj5] { margin: -4px 0 32px; }
.analyze-failure p[b-p8u3saarj5] { font-size: var(--fs-base); line-height: 1.6; color: var(--text-secondary); margin: 0 0 20px; overflow-wrap: anywhere; }
.analyze-failure[b-p8u3saarj5] { padding: 24px 0; border-top: 1px solid var(--border-light); }
.analyze-notice[b-p8u3saarj5] { margin: 0 0 24px; padding: 16px; border: 1px solid var(--tint-red-line); border-radius: var(--radius-xs); background: var(--tint-red); color: var(--red-ink); }
.analyze-notice p[b-p8u3saarj5] { margin: 0 0 12px; font-size: var(--fs-note); line-height: 1.5; overflow-wrap: anywhere; }
.analyze-secondary:disabled[b-p8u3saarj5] { cursor: default; color: var(--text-secondary); }
.analyze-actions[b-p8u3saarj5] { display: flex; flex-wrap: wrap; gap: 12px; }
.analyze-primary[b-p8u3saarj5], .analyze-secondary[b-p8u3saarj5] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-control); font: inherit; font-size: var(--fs-note); font-weight: 600; cursor: pointer; text-decoration: none; }
.analyze-primary[b-p8u3saarj5] { background: var(--accent); border-color: var(--accent); color: #fff; }
.analyze-primary:hover[b-p8u3saarj5] { background: var(--accent-dark); }
.analyze-secondary[b-p8u3saarj5] { background: #fff; color: var(--text); }
.analyze-secondary:hover[b-p8u3saarj5] { background: var(--bg-canvas); }
.analyze-page :focus-visible[b-p8u3saarj5] { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 760px) {
    .analyze-mast[b-p8u3saarj5] { padding: 12px 16px; }
    .analyze-container[b-p8u3saarj5] { padding: 24px 16px; }
    .analyze-header h1[b-p8u3saarj5] { font-size: var(--fs-heading); }
    .analyze-columns[b-p8u3saarj5] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .analyze-playground[b-p8u3saarj5] { position: static; height: min(600px, calc(100dvh - 32px)); }
    .analyze-actions[b-p8u3saarj5] { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .analyze-progress-bar[b-p8u3saarj5] { transition: none; } }
/* /Pages/BrandHub.razor.rz.scp.css */
.brand-hub-header[b-zkfgukvtqt] { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.brand-hub-heading[b-zkfgukvtqt] { min-width: 0; }
/* As on Integrations. */
.brand-hub-back[b-zkfgukvtqt] { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 8px -4px; padding: 0 8px 0 4px; border-radius: var(--radius-xs); color: var(--blue); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.brand-hub-back:hover[b-zkfgukvtqt] { background: var(--ground); }
/* The same way back, inside the facts panel's "Added" line. A finger-sized target; the negative
   margin keeps the line its own height. */
.bf-notice-back[b-zkfgukvtqt] { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--blue); font-weight: 600; text-decoration: underline; }
.brand-hub-header h1[b-zkfgukvtqt] { margin: 0; overflow-wrap: anywhere; }
.brand-hub-header p[b-zkfgukvtqt] { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.brand-hub-header .brand-hub-lead[b-zkfgukvtqt] { color: var(--ink); font-size: var(--fs-md); }
.brand-hub-header .brand-hub-source[b-zkfgukvtqt] { margin-top: 4px; }
.brand-hub-change[b-zkfgukvtqt] { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; }
.brand-hub-loading[b-zkfgukvtqt] { display: grid; place-items: center; min-height: 180px; }
.brand-hub-error[b-zkfgukvtqt] { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border: 1px solid var(--tint-red-line); border-radius: var(--radius-sm); }
.brand-hub-error p[b-zkfgukvtqt] { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--fs-note); }
.brand-hub-quick[b-zkfgukvtqt] { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 8px; padding: 16px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.brand-hub-quick p[b-zkfgukvtqt] { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-note); }
.brand-hub-quick button[b-zkfgukvtqt] { flex-shrink: 0; min-height: 44px; }
/* Two columns only when each gets 400px. At 768, and at 1024 beside the sidebar, a label and
   its value shared half the width, so "Writing style" ran down a 200px column. */
.brand-hub .two-col[b-zkfgukvtqt] { gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.brand-hub .two-col > div[b-zkfgukvtqt] { min-width: 0; }
/* Label and value side by side, both reading from the left. Values sat flush right, so a
   two-line address or a paragraph about writing style read as a ragged right-aligned block. */
.brand-hub .data-row[b-zkfgukvtqt] { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; gap: 16px; }
.brand-hub .data-label[b-zkfgukvtqt] { font-size: var(--fs-sm); }
.brand-hub .data-value[b-zkfgukvtqt] { min-width: 0; font-size: var(--fs-note); font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
/* Opening hours not added yet: said quietly, with the way to add them under it. */
.brand-hub .data-value.data-missing[b-zkfgukvtqt] { font-weight: 400; color: var(--ink-soft); }
.brand-hub .data-action[b-zkfgukvtqt] { display: block; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.brand-hub .data-action:hover[b-zkfgukvtqt] { color: var(--blue); }
/* One line each, so five slogans do not run together as a paragraph. */
.brand-hub .brandhub-site-lines[b-zkfgukvtqt] { display: flex; flex-direction: column; gap: 4px; }
.brand-hub-prose[b-zkfgukvtqt] { margin: 0 0 16px; font-size: var(--fs-note); color: var(--ink-soft); line-height: 1.7; }
.brand-hub-list[b-zkfgukvtqt] { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.brand-hub-list li[b-zkfgukvtqt] { position: relative; padding-left: 18px; font-size: var(--fs-note); color: var(--ink-soft); line-height: 1.55; overflow-wrap: anywhere; }
.brand-hub-list li[b-zkfgukvtqt]::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-ink); }
.brand-hub-list.good li[b-zkfgukvtqt]::before { background: var(--green-ink); }
.brand-hub-list.watch li[b-zkfgukvtqt]::before { background: var(--amber); }
.brand-hub-colors[b-zkfgukvtqt] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.brand-hub-color[b-zkfgukvtqt] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-hub-color .color-swatch[b-zkfgukvtqt] { flex-shrink: 0; }
.brand-color-name[b-zkfgukvtqt] { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.brand-hub-more-colors[b-zkfgukvtqt] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; font-size: var(--fs-xs); color: var(--text-secondary); }
.brand-hub-more-colors[b-zkfgukvtqt] { gap: 6px 14px; }
.brand-hub-more-colors > span:first-child[b-zkfgukvtqt] { margin-right: -4px; }
.brand-hub-more-color[b-zkfgukvtqt] { display: inline-flex; align-items: center; gap: 6px; }
.brand-hub-more-color .brand-color-value[b-zkfgukvtqt] { margin-top: 0; }
.color-dot[b-zkfgukvtqt] { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); }
.brand-hub-more[b-zkfgukvtqt] { margin-top: 12px; min-height: 44px; }
.brand-hub .section-header[b-zkfgukvtqt] { gap: 16px; }
/* Alone in its row (Business profile), Change still sits at the right. */
.brand-hub .section-header .edit-btn[b-zkfgukvtqt] { margin-left: auto; }
.brand-hub .section-header .eyebrow[b-zkfgukvtqt] { margin: 0; }
.brand-hub .edit-btn[b-zkfgukvtqt] { min-height: 44px; border-radius: var(--radius-control); font-size: var(--fs-sm); flex-shrink: 0; }
.brand-hub .color-swatch[b-zkfgukvtqt] { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); }
.brand-color-value[b-zkfgukvtqt] { margin-top: 2px; font-family: monospace; font-size: var(--fs-xs); color: var(--text-secondary); }
.brand-hub[b-zkfgukvtqt]  .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; border-radius: var(--radius-xs); }
.brand-hub[b-zkfgukvtqt]  .tag-green { color: var(--green-ink); }
.brand-hub[b-zkfgukvtqt]  .tag-orange { color: var(--amber); }
.brand-hub[b-zkfgukvtqt]  .tag-cyan { color: var(--cyan-ink); }
.brand-hub .social-row[b-zkfgukvtqt], .brand-hub .idea-row[b-zkfgukvtqt], .brand-hub .qw-row[b-zkfgukvtqt] { padding: 16px 0; border-radius: 0; border-bottom: 1px solid var(--border-light); background: transparent; gap: 16px; margin-bottom: 0; }
.brand-hub .social-left[b-zkfgukvtqt], .brand-hub .social-left > div[b-zkfgukvtqt], .brand-hub .idea-row > div[b-zkfgukvtqt], .brand-hub .qw-row > div[b-zkfgukvtqt] { min-width: 0; overflow-wrap: anywhere; }
.brand-hub .social-left a[b-zkfgukvtqt] { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.brand-hub .pillar-grid[b-zkfgukvtqt] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.brand-hub .pillar h3[b-zkfgukvtqt] { margin: 0 0 6px; font-size: var(--fs-md); overflow-wrap: anywhere; }
/* A solid light blue, not a see-through tint: over the grey page the tint took the grey text to 4.35:1. */
.brand-hub .pillar[b-zkfgukvtqt] { background: color-mix(in srgb, var(--blue) 5%, var(--surface)); box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb), 0.16); }
.brand-hub .pillar p[b-zkfgukvtqt] { margin: 0; font-size: var(--fs-note); }
/* The paragraph under each idea, quick win and competitor runs six to eight lines on a phone.
   At 12px it was the smallest body text on the page; 13px with room between lines reads. */
.brand-hub .brand-hub-detail[b-zkfgukvtqt] { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.brand-hub .brand-hub-detail-meta[b-zkfgukvtqt] { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-secondary); }
.brand-hub .qw-priority[b-zkfgukvtqt] { font-size: var(--fs-2xs); padding: 4px 8px; flex-shrink: 0; }
.priority-high[b-zkfgukvtqt] { background: var(--tint-pink); color: var(--pink-ink); }
.priority-medium[b-zkfgukvtqt] { background: var(--tint-amber); color: var(--amber); }
.priority-low[b-zkfgukvtqt] { background: var(--tint-blue, var(--surface-2)); color: var(--text-secondary); }

/* Empty states and prose. A section that has nothing to show says so, rather than leaving a
   heading over blank space. */
.brand-hub-empty[b-zkfgukvtqt], .brand-hub-note[b-zkfgukvtqt] { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; overflow-wrap: anywhere; }
.brand-hub-empty a[b-zkfgukvtqt], .brand-hub-note a[b-zkfgukvtqt] { color: var(--accent); font-weight: 600; }
/* A button that reads as the links beside it. */
.brand-hub-inline-action[b-zkfgukvtqt] { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Named competitors. Matches the report page's chip rhythm without borrowing its scoped classes. */
/* The global .competitor-row is a rounded tinted card; here it is a plain divided row. The meta line
   sits under the name so the write-up gets the full width instead of a narrow left column. */
.brand-hub .competitor-row[b-zkfgukvtqt] { display: block; padding: 12px 0; margin: 0; background: none; border-radius: 0; border-bottom: 1px solid var(--border-light); }
.brand-hub .competitor-main[b-zkfgukvtqt] { min-width: 0; }
.brand-hub .competitor-name[b-zkfgukvtqt] { font-size: var(--fs-note); font-weight: 500; overflow-wrap: anywhere; }
.brand-hub .competitor-why[b-zkfgukvtqt] { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.brand-hub .competitor-meta[b-zkfgukvtqt] { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary); }
.brand-upgrade[b-zkfgukvtqt] { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 0; }
.brand-upgrade p[b-zkfgukvtqt] { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--fs-note); }
.brand-upgrade a[b-zkfgukvtqt] { white-space: nowrap; }

@media (max-width: 760px) {
    .brand-hub-header[b-zkfgukvtqt] { flex-direction: column; gap: 12px; }
    .brand-hub .pillar-grid[b-zkfgukvtqt] { grid-template-columns: minmax(0, 1fr); }
    .brand-hub .data-row[b-zkfgukvtqt] { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .brand-hub .idea-row[b-zkfgukvtqt] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .brand-hub .idea-row a[b-zkfgukvtqt] { justify-self: start; }
    /* The impact label goes above the action on a phone. Beside it, it took a third of the
       width and wrapped each action into a narrow column. */
    .brand-hub .qw-row[b-zkfgukvtqt] { flex-direction: column; align-items: stretch; gap: 8px; }
    .brand-hub .qw-priority[b-zkfgukvtqt] { order: -1; align-self: flex-start; margin-left: 0; }
    .brand-upgrade[b-zkfgukvtqt] { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
    .brand-upgrade a[b-zkfgukvtqt] { grid-column: 2; justify-self: start; }
    .brand-hub-error[b-zkfgukvtqt], .brand-hub-quick[b-zkfgukvtqt] { flex-direction: column; align-items: flex-start; }
}

/* The empty profile's call to start, as a card with a little colour so it reads as the first thing
   to do here. As bare text on the grey page it looked like a footnote. */
.brand-hub-start[b-zkfgukvtqt] {
    background: linear-gradient(115deg, var(--tint-blue) 0%, var(--surface) 62%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--e1);
    margin-bottom: 24px;
    padding: 4px 24px;
}

.brand-hub-start[b-zkfgukvtqt]  .empty-state > .icon-3d {
    background: var(--surface);
    box-shadow: var(--e1);
    color: var(--accent);
    height: 44px;
    width: 44px;
}

.brand-hub-start[b-zkfgukvtqt]  .empty-state > .icon-3d svg {
    height: 22px;
    width: 22px;
}

.brand-hub-start[b-zkfgukvtqt]  .empty-state {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.brand-hub-start[b-zkfgukvtqt]  .empty-state > button {
    align-self: center;
}

@media (max-width: 960px) {
    .brand-hub-start[b-zkfgukvtqt] {
        padding: 2px 18px;
    }

    .brand-hub-start[b-zkfgukvtqt]  .empty-state {
        grid-template-columns: 44px minmax(0, 1fr);
    }
}
/* /Pages/BusinessPaused.razor.rz.scp.css */
/* The shell spaces its paragraphs but not the blocks after the button, so the other businesses
   touched Check again and Log out read as one of them. */
.paused-message[b-p956jxoo7f] { margin-top: 12px; }
.paused-others[b-p956jxoo7f] { margin-top: 32px; }
.paused-log-out[b-p956jxoo7f] { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
/* /Pages/Calendar.razor.rz.scp.css */
.calendar-page[b-ca7pkih40o] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    color: var(--text);
}

.calendar-header[b-ca7pkih40o],
.calendar-toolbar[b-ca7pkih40o],
.calendar-period[b-ca7pkih40o],
.calendar-filter-row[b-ca7pkih40o],
.calendar-filters[b-ca7pkih40o],
.calendar-new-post[b-ca7pkih40o],
.calendar-list-post[b-ca7pkih40o],
.calendar-list-platforms[b-ca7pkih40o],
.calendar-detail-platforms > span[b-ca7pkih40o],
.calendar-day-list button[b-ca7pkih40o] {
    display: flex;
    align-items: center;
}

.calendar-header[b-ca7pkih40o] {
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.calendar-heading[b-ca7pkih40o] {
    min-width: 0;
}

.calendar-subtitle[b-ca7pkih40o] {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.calendar-heading h1[b-ca7pkih40o] {
    margin: 0;
    font-size: var(--fs-2xl);
    line-height: 1.2;
    letter-spacing: 0;
}

.calendar-new-post[b-ca7pkih40o] {
    min-height: 44px;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.calendar-new-post:hover[b-ca7pkih40o] {
    filter: brightness(.96);
}

.calendar-toolbar[b-ca7pkih40o] {
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-block: 1px solid var(--border-light);
    background: transparent;
}

.calendar-view-controls[b-ca7pkih40o] { display: flex; align-items: center; gap: 12px; }

.calendar-period[b-ca7pkih40o] {
    gap: 8px;
    min-width: 0;
}

.calendar-period h2[b-ca7pkih40o] {
    width: clamp(180px, 20vw, 280px);
    margin: 0;
    overflow: hidden;
    font-size: var(--fs-lg);
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-icon-button[b-ca7pkih40o],
.calendar-today-button[b-ca7pkih40o],
.calendar-view-switch button[b-ca7pkih40o],
.calendar-all-filter[b-ca7pkih40o],
.calendar-platform-filter[b-ca7pkih40o],
.calendar-alert button[b-ca7pkih40o],
.calendar-post-chip[b-ca7pkih40o],
.calendar-more-posts[b-ca7pkih40o],
.calendar-list-post[b-ca7pkih40o],
.calendar-day-list button[b-ca7pkih40o],
.calendar-drawer-overlay[b-ca7pkih40o] {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.calendar-icon-button[b-ca7pkih40o] {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
}

.calendar-icon-button:hover[b-ca7pkih40o],
.calendar-today-button:hover[b-ca7pkih40o],
.calendar-view-switch button:hover[b-ca7pkih40o] {
    background: var(--ground);
}

/* These two rest on --ground already, so --ground on hover was a hover that
   did nothing. One step further down the neutral scale. Only with a real pointer:
   on a phone a filter tapped off kept the darker grey, as if still pressed. */
@media (hover: hover) {
    .calendar-all-filter:hover[b-ca7pkih40o],
    .calendar-platform-filter:hover[b-ca7pkih40o] {
        background: var(--line);
    }
}

.calendar-today-button[b-ca7pkih40o] {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.calendar-view-switch[b-ca7pkih40o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(64px, 1fr));
    gap: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--ground);
}

.calendar-view-switch button[b-ca7pkih40o] {
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.calendar-view-switch button.active[b-ca7pkih40o] {
    background: var(--pill);
    color: var(--accent);
}

.calendar-filter-row[b-ca7pkih40o] {
    gap: 12px;
    min-width: 0;
    padding: 12px 0 0;
    background: transparent;
}

.calendar-filter-label[b-ca7pkih40o] {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-filters[b-ca7pkih40o] {
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 1px 1px 3px;
    scrollbar-width: thin;
}

/* Beside the sidebar the seven platforms ran past the edge (Pinterest was cut to "Pint") behind
   a scroll nothing pointed at. Wrap them there; a phone keeps the icon row that scrolls. */
@media (min-width: 641px) {
    .calendar-filter-row[b-ca7pkih40o] {
        align-items: flex-start;
    }

    /* Level with the first row of filters, not floating between two. */
    .calendar-filter-label[b-ca7pkih40o] {
        padding-top: 14px;
    }

    .calendar-filters[b-ca7pkih40o] {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.calendar-all-filter[b-ca7pkih40o],
.calendar-platform-filter[b-ca7pkih40o] {
    min-height: 44px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--ground);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.calendar-all-filter[b-ca7pkih40o] {
    padding: 0 13px;
}

.calendar-platform-filter[b-ca7pkih40o] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 4px;
}

.calendar-all-filter.active[b-ca7pkih40o],
.calendar-platform-filter.active[b-ca7pkih40o] {
    border-color: var(--tint-blue);
    background: var(--tint-blue);
    color: var(--blue);
}

.calendar-alert[b-ca7pkih40o],
.calendar-loading[b-ca7pkih40o] {
    margin: 16px 0;
    border-radius: var(--radius-sm);
}

.calendar-alert[b-ca7pkih40o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--tint-red-line);
    background: var(--ground);
    color: var(--red-ink);
}

.calendar-alert div[b-ca7pkih40o] {
    display: grid;
    gap: 2px;
    font-size: var(--fs-sm);
}

/* The heading says what went wrong in red; what to do reads as plain text, as on the other pages. */
.calendar-alert div span[b-ca7pkih40o] {
    color: var(--text-secondary);
}

/* A plain secondary button, as Try again is on Integrations. Filled red read as a delete. */
.calendar-alert button[b-ca7pkih40o] {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.calendar-alert button:hover[b-ca7pkih40o] {
    border-color: var(--ink);
}

.calendar-loading[b-ca7pkih40o] {
    display: flex;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.calendar-loading-dot[b-ca7pkih40o] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: calendar-pulse-b-ca7pkih40o 1s ease-in-out infinite alternate;
}

@keyframes calendar-pulse-b-ca7pkih40o {
    to {
        opacity: .35;
        transform: scale(.75);
    }
}

.calendar-scroll[b-ca7pkih40o] {
    max-width: 100%;
    margin-top: 16px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    scrollbar-width: thin;
}

/* 600px, not 840px: with the sidebar beside it a 1024 screen (a small laptop, an iPad on its side)
   has about 740px here, and 840 hid Saturday behind a sideways scroll. */
.calendar-month[b-ca7pkih40o] {
    min-width: 600px;
}

/* On a phone the month fits the screen instead of scrolling sideways past Thursday: each post
   shows as its time in its platform's colour, and the details open on tap as before. */
@media (max-width: 640px) {
    .calendar-month[b-ca7pkih40o] {
        min-width: 0;
    }

    /* Scoped to the month like the chips below: unscoped, the base rules further down won and a
       phone got the desktop's 118px days, a month nearly two screens tall. */
    .calendar-month .calendar-day[b-ca7pkih40o] {
        min-height: 72px;
        padding: 4px 3px;
    }

    /* 24px is the smallest target; the margin gives back the 2px so the cell stays as tall. */
    .calendar-month .calendar-day-number[b-ca7pkih40o] {
        width: 24px;
        height: 24px;
        margin-bottom: 1px;
    }

    /* Scoped to the month so it outranks the base chip rule further down, which used to win
       and left each tick in the chip's top left corner. */
    .calendar-month .calendar-post-chip[b-ca7pkih40o] {
        align-items: center;
        justify-content: center;
        padding: 2px;
    }

    .calendar-post-title[b-ca7pkih40o] {
        display: none;
    }

    .calendar-month .calendar-post-time[b-ca7pkih40o] {
        display: none;
    }

    /* Regular weight: bold "11:30" was a pixel too wide for the day. */
    .calendar-month .calendar-post-short[b-ca7pkih40o] {
        display: block;
        font-size: var(--fs-2xs);
        line-height: 1.2;
    }

    .calendar-month .calendar-post-chip.missed .calendar-post-short[b-ca7pkih40o] {
        color: var(--red-ink);
        font-weight: 700;
    }

    .calendar-month .calendar-more-posts[b-ca7pkih40o] {
        padding: 0;
        font-size: var(--fs-2xs);
        text-align: center;
    }

    /* "+1 more" broke over two lines in a day this narrow; "+1" says it, and the label names the count. */
    .calendar-month .calendar-more-word[b-ca7pkih40o] {
        display: none;
    }

    /* No room for the name in a phone's day: a dot by the number, named in the day's label and
       in the day itself when it opens. */
    .calendar-month .calendar-occasion[b-ca7pkih40o] {
        display: inline-block;
        vertical-align: top;
        width: 6px;
        height: 6px;
        margin: 9px 0 0 1px;
        border-radius: 50%;
        background: var(--amber-ink);
        font-size: 0;
        line-height: 0;
    }

    /* What the dots are, under the month. */
    .calendar-occasion-key[b-ca7pkih40o] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
        font-size: var(--fs-xs);
    }

    .calendar-occasion-key li[b-ca7pkih40o] {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--text-secondary);
    }

    .calendar-occasion-key-dot[b-ca7pkih40o] {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 50%;
        background: var(--amber-ink);
    }

    .calendar-occasion-key button[b-ca7pkih40o] {
        min-height: 32px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--blue);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
}

/* Each day names its occasion where there is room for it. */
@media (min-width: 641px) {
    .calendar-occasion-key[b-ca7pkih40o] {
        display: none;
    }
}
.calendar-post-actions[b-ca7pkih40o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.calendar-open-post[b-ca7pkih40o] {
    display: inline-flex;
}

/* On a phone the two stack; each takes the width so they do not sit ragged. */
@media (max-width: 480px) {
    .calendar-post-actions > *[b-ca7pkih40o] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.calendar-copy-error[b-ca7pkih40o] {
    color: var(--red-ink);
    font-size: var(--fs-sm);
    margin: 20px 0 -12px;
}

.calendar-day-headers[b-ca7pkih40o],
.calendar-days[b-ca7pkih40o] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-day-headers[b-ca7pkih40o] {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

/* The month never scrolls sideways (600px fits beside the sidebar, and a phone drops the
   minimum), yet its scroll box held the day names, so they went off the top with the first
   weeks and the last ones had no names over them. Clip rounds the corners as before without
   being a scroll box, and the names stay under the app bar. */
.calendar-scroll-month[b-ca7pkih40o] {
    overflow: clip;
}

.calendar-scroll-month .calendar-day-headers[b-ca7pkih40o] {
    top: var(--header-h);
}

/* A short screen lets the app bar scroll away (workspace.css). */
@media (max-width: 960px) and (max-height: 500px) {
    .calendar-scroll-month .calendar-day-headers[b-ca7pkih40o] {
        top: 0;
    }
}

.calendar-day-headers > div[b-ca7pkih40o] {
    padding: 10px;
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-align: center;
}

.calendar-day[b-ca7pkih40o] {
    min-width: 0;
    min-height: 118px;
    padding: 8px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.calendar-day:nth-child(7n)[b-ca7pkih40o] {
    border-right: 0;
}

.calendar-day:nth-last-child(-n + 7)[b-ca7pkih40o] {
    border-bottom: 0;
}

/* app.css fades the whole cell to 40%, which took a post that went out on the 30th
   with it. The shaded ground and the muted day number already say "last month". */
.calendar-day.other-month[b-ca7pkih40o] {
    background: var(--ground);
    opacity: 1;
}

.calendar-day-number[b-ca7pkih40o] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: 700;
}

/* A day still to come opens on a click or tap anywhere in it. */
.calendar-day.plannable[b-ca7pkih40o] {
    cursor: pointer;
}

@media (hover: hover) {
    /* Half today's tint, so the day under the pointer never reads as today. */
    .calendar-day.plannable:not(.today):hover[b-ca7pkih40o] {
        background: color-mix(in srgb, var(--tint-blue) 50%, #fff);
    }
}

/* A day still to come: the number opens the day. */
button.calendar-day-number[b-ca7pkih40o] {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

button.calendar-day-number:hover[b-ca7pkih40o] {
    background: var(--pill);
    color: var(--text);
}

.calendar-day.today button.calendar-day-number:hover[b-ca7pkih40o] {
    background: var(--accent-dark);
    color: #fff;
}

button.calendar-day-number:focus-visible[b-ca7pkih40o] {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* A chip on the cell's own ground has no edge: the grey ones on a shaded day, and a
   Facebook one on today's blue. White keeps the ink, which still says the platform. */
.calendar-day.other-month .calendar-post-chip.multi[b-ca7pkih40o],
.calendar-day.other-month .calendar-post-chip.yt[b-ca7pkih40o],
.calendar-day.other-month .calendar-post-chip.unknown[b-ca7pkih40o],
.calendar-day.today .calendar-post-chip.fb[b-ca7pkih40o] {
    background: #fff;
}

.calendar-day.other-month .calendar-day-number[b-ca7pkih40o] {
    /* --line-field measured 3.07:1 on the shaded cell. */
    color: var(--muted);
}

.calendar-day.today[b-ca7pkih40o] {
    background: var(--tint-blue);
}

.calendar-day.today .calendar-day-number[b-ca7pkih40o] {
    background: var(--accent);
    color: #fff;
}

.calendar-day-posts[b-ca7pkih40o] {
    display: grid;
    gap: 4px;
}

/* An occasion a special can be planned around (Halloween, Melbourne Cup), beside the number.
   The day's name carries it for a screen reader; the advisor link in the day asks about it. */
/* Its own line, wrapping: beside the number a 1024 screen cut it to "Hallowe...". */
.calendar-occasion[b-ca7pkih40o] {
    display: block;
    margin: -2px 0 6px 2px;
    color: var(--amber-ink);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.calendar-week-day .calendar-occasion[b-ca7pkih40o] {
    flex-basis: 100%;
    max-width: 100%;
    min-height: 1.3em;
    margin: -4px 0 0;
    line-height: 1.3;
    text-align: center;
}

.calendar-post-chip[b-ca7pkih40o] {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 4px 6px 4px 8px;
    overflow: hidden;
    border-radius: 5px;
    /* A chip with no platform reads neutral. It used to be tinted blue, which is
       what a Facebook post looks like. */
    background: var(--ground);
    color: var(--ink-soft);
    text-align: left;
}

.calendar-post-chip:hover[b-ca7pkih40o] {
    filter: brightness(.97);
}

/* Phone width only, see the 640px block. */
.calendar-post-short[b-ca7pkih40o] {
    display: none;
}

.calendar-post-period[b-ca7pkih40o] {
    display: block;
    font-size: 0.9em;
}

/* The week's hour rows already say am or pm. */
.calendar-week .calendar-post-period[b-ca7pkih40o] {
    display: none;
}

/* The platform is carried by the tint and the ink, the two together. The 3px stripe
   that used to sit on the left came off: it met a 5px radius at both ends, and it was
   the only thing keeping Pinterest apart from YouTube, which shared a ground. Pinterest
   moves to the red tint so the pair reads apart without it. */
.calendar-post-chip.ig[b-ca7pkih40o] {
    background: var(--tint-pink);
    color: var(--pink-ink);
}

.calendar-post-chip.fb[b-ca7pkih40o] {
    background: var(--tint-blue);
    color: var(--blue);
}

.calendar-post-chip.tw[b-ca7pkih40o],
.calendar-post-chip.tk[b-ca7pkih40o] {
    background: var(--line);
    color: var(--ink);
}

.calendar-post-chip.li[b-ca7pkih40o] {
    background: var(--tint-cyan);
    color: var(--cyan-ink);
}

.calendar-post-chip.pi[b-ca7pkih40o] {
    background: var(--tint-red);
    color: var(--red-ink);
}

.calendar-post-chip.yt[b-ca7pkih40o] {
    background: var(--ground);
    color: var(--red-ink);
}

/* Went out: history, so it steps back. The tint stays (it is the platform), only
   quieter, and the second line says "Posted". */
/* Quieter by colour only. Fading it as well made a posted chip on a day of the
   next or last month (already faded) too faint to read. */
.calendar-post-chip.done[b-ca7pkih40o] {
    filter: saturate(0.45);
}

.calendar-post-chip.done:hover[b-ca7pkih40o] {
    filter: saturate(0.45) brightness(0.97);
}

/* Did not go out: something to act on, so it is outlined and its line is red. */
.calendar-post-chip.missed[b-ca7pkih40o] {
    box-shadow: inset 0 0 0 1.5px var(--red-ink);
}

.calendar-post-chip.missed .calendar-post-time[b-ca7pkih40o] {
    color: var(--red-ink);
    font-weight: 700;
}

/* Booked, but a platform will not be connected when it is due: amber, still fixable. */
.calendar-post-chip.blocked[b-ca7pkih40o] {
    box-shadow: inset 0 0 0 1.5px var(--amber-ink);
}

.calendar-post-chip.blocked .calendar-post-time[b-ca7pkih40o] {
    color: var(--amber-ink);
    font-weight: 700;
}

.calendar-post-links[b-ca7pkih40o] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.calendar-post-links a[b-ca7pkih40o] {
    /* 24px tall at least, so a thumb can hit it on a phone (it was 20). */
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    font-weight: 600;
    gap: 4px;
    min-height: 24px;
    text-decoration: none;
}

.calendar-post-links a:hover[b-ca7pkih40o],
.calendar-post-links a:focus-visible[b-ca7pkih40o] {
    text-decoration: underline;
}

.calendar-failure-reasons[b-ca7pkih40o] {
    display: grid;
    gap: 6px;
}

.calendar-failure-reasons p[b-ca7pkih40o] {
    margin: 0;
    line-height: 1.5;
}

/* The way to the fix a reason names, the same weight as the "See it on" links. */
.calendar-failure-fix[b-ca7pkih40o] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    font-weight: 600;
    justify-self: start;
    min-height: 24px;
    text-decoration: none;
}

.calendar-failure-fix:hover[b-ca7pkih40o],
.calendar-failure-fix:focus-visible[b-ca7pkih40o] {
    text-decoration: underline;
}

.calendar-post-title[b-ca7pkih40o] {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two lines in the month: one cut most titles to nine letters at 1024 ("Smash Sa...",
   "Tonight's ..."), too few to tell posts apart. A phone shows no title (640px block). */
@media (min-width: 641px) {
    .calendar-month .calendar-post-title[b-ca7pkih40o] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: 1.3;
        overflow-wrap: break-word;
        white-space: normal;
    }
}

.calendar-post-time[b-ca7pkih40o] {
    flex: 0 0 auto;
    max-width: 100%;
    font-size: var(--fs-2xs);
    line-height: 1.3;
}

/* Which platforms a chip is for. Two posts at the same time on different platforms, one posted
   and one not, read the same until opened. */
.calendar-chip-meta[b-ca7pkih40o] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: flex-start;
    gap: 2px 5px;
}

/* Beside the logos while its shortest line fits there, under them on a narrow day, where
   "11:30 am" was cut to "11:30 ar". */
.calendar-chip-meta .calendar-post-time[b-ca7pkih40o] {
    flex: 1 1 0;
}

.calendar-chip-platforms[b-ca7pkih40o] {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding-top: 1px;
}

.calendar-chip-platforms:empty[b-ca7pkih40o] {
    display: none;
}

/* A phone's day is about 50px wide: two logos fit over the tick, three were cut off. A post on
   three or more shows none rather than some, and its details name them all. */
@media (max-width: 640px) {
    .calendar-chip-meta[b-ca7pkih40o] {
        justify-content: center;
    }

    .calendar-chip-platforms:has(> :nth-child(3))[b-ca7pkih40o] {
        display: none;
    }
}

.calendar-more-posts[b-ca7pkih40o] {
    min-height: 44px;
    width: 100%;
    padding: 2px 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: left;
}

.calendar-more-posts:hover[b-ca7pkih40o] {
    color: var(--accent);
}

.calendar-week[b-ca7pkih40o] {
    min-width: 680px;
    background: #fff;
}

.calendar-week-row[b-ca7pkih40o] {
    display: grid;
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
    /* A post's chip (title and time lines) and the cell's padding: an hour with a post is no
       taller than an empty one. */
    min-height: 55px;
    border-bottom: 1px solid var(--line);
}

.calendar-week-row:last-child[b-ca7pkih40o] {
    border-bottom: 0;
}

.calendar-week-header[b-ca7pkih40o] {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 48px;
    background: #fff;
}

/* The days over the week's hours went off the top like the month's (see .calendar-scroll-month).
   The week's 680px only needs scrolling sideways from 641px to about 718px, and beside the
   sidebar to about 966px; everywhere else it fits, so it clips and its days stay under the bar. */
@media (max-width: 640px), (min-width: 730px) and (max-width: 960px), (min-width: 980px) {
    .calendar-scroll-week[b-ca7pkih40o] {
        overflow: clip;
    }

    /* app.css hides the week's overflow for its corners, which held the days too; the box
       around it rounds them here. */
    .calendar-scroll-week .calendar-week[b-ca7pkih40o] {
        overflow: visible;
    }

    .calendar-scroll-week .calendar-week-header[b-ca7pkih40o] {
        top: var(--header-h);
    }
}

@media (max-width: 960px) and (max-height: 500px) {
    .calendar-scroll-week .calendar-week-header[b-ca7pkih40o] {
        top: 0;
    }
}

.calendar-week-day[b-ca7pkih40o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-left: 1px solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
}

.calendar-week-day strong[b-ca7pkih40o] {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text);
    font-size: var(--fs-2xs);
}

.calendar-week-day.today[b-ca7pkih40o] {
    color: var(--accent);
}

/* A day still to come opens its day. Its left rule stays, so the columns keep lining up.
   :where keeps this at one class, so the phone rule further down still sets the padding. */
.calendar-week-day:where(button)[b-ca7pkih40o] {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

button.calendar-week-day:hover strong[b-ca7pkih40o] {
    background: var(--pill);
}

button.calendar-week-day.today:hover strong[b-ca7pkih40o] {
    background: var(--accent-dark);
}

button.calendar-week-day:focus-visible[b-ca7pkih40o] {
    outline: 2px solid var(--blue);
    outline-offset: -2px !important;
}

/* A week cell hides what spills out of it (4px round its posts, less on a phone), which cut the
   ring outside a post; inside it shows whole. */
.calendar-week-chip:focus-visible[b-ca7pkih40o] {
    outline-offset: -2px !important;
}

/* An hour still to come opens its day with that hour picked. */
.calendar-week-cell.plannable[b-ca7pkih40o] {
    cursor: pointer;
}

@media (hover: hover) {
    .calendar-week-cell.plannable:hover[b-ca7pkih40o] {
        background: color-mix(in srgb, var(--tint-blue) 50%, #fff);
    }
}

.calendar-week-day.today strong[b-ca7pkih40o] {
    background: var(--accent);
    color: #fff;
}

/* High Contrast drops the filled circle, which was the only thing marking today. */
@media (forced-colors: active) {
    .calendar-day.today .calendar-day-number[b-ca7pkih40o],
    .calendar-week-day.today strong[b-ca7pkih40o] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    /* The tints that made each post and each view a thing to press drop too, leaving
       words loose in the day or the bar. An outline gives them their edges back. */
    .calendar-post-chip[b-ca7pkih40o],
    .calendar-view-switch button[b-ca7pkih40o] {
        border: 1px solid ButtonText;
    }

    /* The list's rows open a post or a day, but with the hover tint gone and only a line under
       each, they read as plain text. */
    .calendar-list-post[b-ca7pkih40o] {
        border: 1px solid ButtonText;
        margin-bottom: 6px;
    }

    /* A missed post and one that will not go out were marked only by a coloured inner ring,
       which High Contrast drops, so they looked like any other post. */
    .calendar-post-chip.missed[b-ca7pkih40o] {
        border: 2px solid ButtonText;
    }

    .calendar-post-chip.blocked[b-ca7pkih40o] {
        border: 2px dashed ButtonText;
    }
}

.calendar-week-time[b-ca7pkih40o] {
    padding: 7px 8px;
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    text-align: right;
    white-space: nowrap;
}

.calendar-week-cell[b-ca7pkih40o] {
    min-width: 0;
    padding: 4px;
    overflow: hidden;
    border-left: 1px solid var(--line);
}

.calendar-week-chip[b-ca7pkih40o] {
    min-height: 44px;
    margin-bottom: 3px;
}

/* The gap is between posts. Under the last one it made an hour with a post 4px taller than an
   empty hour, so the hour lines stepped unevenly down the week. */
.calendar-week-chip:last-child[b-ca7pkih40o] {
    margin-bottom: 0;
}

/* The week fits a phone the same way. It showed three days and a scroll, opening on Sunday with
   today four columns out of sight. Now all seven sit side by side, the hour is the row and each
   post shows the month's short line. */
@media (max-width: 640px) {
    .calendar-week[b-ca7pkih40o] {
        min-width: 0;
    }

    .calendar-week-row[b-ca7pkih40o] {
        grid-template-columns: 40px repeat(7, minmax(0, 1fr));
    }

    .calendar-week-time[b-ca7pkih40o] {
        padding: 7px 6px 7px 0;
    }

    .calendar-week-day[b-ca7pkih40o] {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1px;
        padding: 4px 0;
    }

    /* A dot under the date, as in the month; the day's label names it. The other days hold
       the same space, so the dates stay level. */
    .calendar-week-day .calendar-occasion[b-ca7pkih40o] {
        flex: none;
        width: 6px;
        height: 6px;
        min-height: 0;
        margin: 2px auto 0;
        border-radius: 50%;
        background: var(--amber-ink);
        font-size: 0;
        line-height: 0;
    }

    .calendar-week-day .calendar-occasion:empty[b-ca7pkih40o] {
        background: transparent;
    }

    .calendar-week-cell[b-ca7pkih40o] {
        padding: 3px 2px;
    }

    .calendar-week .calendar-post-chip[b-ca7pkih40o] {
        align-items: center;
        justify-content: center;
        padding: 2px;
        text-align: center;
    }

    .calendar-week .calendar-post-time[b-ca7pkih40o] {
        display: none;
    }

    .calendar-week .calendar-post-short[b-ca7pkih40o] {
        display: block;
        font-size: var(--fs-2xs);
        line-height: 1.2;
    }

    .calendar-week .calendar-post-chip.missed .calendar-post-short[b-ca7pkih40o] {
        color: var(--red-ink);
        font-weight: 700;
    }
}

/* On a wide screen a full-width row left the title and its time and status 1,400px apart. The
   cap was 1,040px, which at 1440 stopped the rows and their line 112px short of the toolbar and
   filter lines above them; 1,160px lines up with those on a laptop and still caps a wide screen. */
.calendar-list[b-ca7pkih40o] {
    max-width: 1160px;
    margin-top: 16px;
    padding: 0;
    border-top: 1px solid var(--border-light);
    background: transparent;
}

.calendar-list-group h3[b-ca7pkih40o] {
    margin: 18px 0 6px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-list-occasion[b-ca7pkih40o] {
    color: var(--amber-ink);
}

/* An occasion day with nothing booked: opens the day, as a day on the month does. */
.calendar-list-plan .calendar-list-picture[b-ca7pkih40o]  svg {
    stroke: var(--blue);
}

.calendar-list-plan .calendar-list-copy span[b-ca7pkih40o] {
    white-space: normal;
}

.calendar-list-post[b-ca7pkih40o] {
    width: 100%;
    min-height: 58px;
    gap: 12px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text);
    text-align: left;
}

.calendar-list-post:hover[b-ca7pkih40o] {
    background: var(--tint-blue);
}

/* Room for two badges (26px, overlapping by 7px), so a post on two platforms no longer pushes
   its title out of line with the posts above and below it. */
.calendar-list-platforms[b-ca7pkih40o] {
    min-width: 45px;
    flex: 0 0 auto;
}

.calendar-list-platforms[b-ca7pkih40o]  .platform-logo-badge + .platform-logo-badge {
    margin-left: -7px;
    box-shadow: 0 0 0 2px #fff;
}

.calendar-platform-count[b-ca7pkih40o] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin-left: -7px;
    border-radius: var(--radius-xs);
    background: var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-2xs);
    font-weight: 800;
    box-shadow: 0 0 0 2px #fff;
}

/* The post's picture, or the same lines mark the dashboard gives a post with only words, so
   the titles stay in line. */
.calendar-list-picture[b-ca7pkih40o] {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-xs);
    /* The list sits on the grey ground, where a grey box disappeared: a post with no picture
       showed nothing there, and one whose picture was still loading showed a gap. */
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-light);
}

.calendar-list-picture img[b-ca7pkih40o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calendar-list-picture svg[b-ca7pkih40o] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-width: 2;
}

.calendar-list-copy[b-ca7pkih40o] {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.calendar-list-copy strong[b-ca7pkih40o],
.calendar-list-copy span[b-ca7pkih40o] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-list-copy strong[b-ca7pkih40o] {
    font-size: var(--fs-sm);
}

.calendar-list-copy span[b-ca7pkih40o],
.calendar-list-post time[b-ca7pkih40o] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.calendar-list-copy .calendar-list-blocked[b-ca7pkih40o] {
    color: var(--amber-ink);
    font-weight: 600;
    white-space: normal;
}

/* Why it did not go out: a sentence, so it wraps rather than ending in "...". */
.calendar-list-copy .calendar-list-missed[b-ca7pkih40o] {
    color: var(--red-ink);
    white-space: normal;
}

.calendar-status[b-ca7pkih40o] {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    background: var(--tint-blue);
    color: var(--blue);
    font-size: var(--fs-xs);
    font-weight: 800;
    /* The labels are written in sentence case; capitalize turned "Did not go out"
       into "Did Not Go Out". */
}

.calendar-status.published[b-ca7pkih40o] {
    background: var(--tint-green);
    color: var(--green-ink);
}

/* Its own red tint: the page ground it had was the list's ground too, so "Did not go out" was
   the one status with no pill around it. */
.calendar-status.failed[b-ca7pkih40o],
.calendar-status.cancelled[b-ca7pkih40o] {
    background: var(--tint-red);
    color: var(--red-ink);
}

/* Booked, but no platform of it will be working when it is due: amber, as its chip and line. */
.calendar-status.blocked[b-ca7pkih40o] {
    background: var(--tint-amber);
    color: var(--amber-ink);
}

/* One width for every status, so the times beside them line up down the list. */
@media (min-width: 641px) {
    .calendar-list-post .calendar-status[b-ca7pkih40o] {
        justify-content: center;
        min-width: 112px;
    }
}

.calendar-empty[b-ca7pkih40o] {
    margin-top: 16px;
    padding: 24px 0;
    text-align: left;
}

.calendar-empty-banner[b-ca7pkih40o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.calendar-empty-banner h3[b-ca7pkih40o] {
    font-size: var(--fs-base);
}

.calendar-empty-banner p[b-ca7pkih40o] {
    margin: 0;
}

.calendar-list .calendar-empty[b-ca7pkih40o] {
    margin-top: 8px;
    border: 0;
}

.calendar-empty h3[b-ca7pkih40o] {
    margin: 0 0 5px;
    font-size: var(--fs-lg);
}

.calendar-empty p[b-ca7pkih40o] {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: var(--fs-note);
}

.calendar-empty p:last-child[b-ca7pkih40o] {
    margin-bottom: 0;
}

/* Clears the platform filter that emptied the period, so it is the quieter kind. */
.calendar-empty button[b-ca7pkih40o] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.calendar-empty button:hover[b-ca7pkih40o] {
    background: var(--ground);
}

.calendar-dialog-host[b-ca7pkih40o]  .calendar-dialog-overlay {
    --modal-align: stretch;
    --modal-justify: flex-end;
    --modal-overlay-padding: 0;
    --modal-max-height: 100dvh;
    --modal-radius: 0;
    --modal-mobile-radius: var(--radius) var(--radius) 0 0;
    --modal-panel-border: 0;
    --modal-panel-border-left: 1px solid var(--border-light);
    --modal-mobile-align: flex-end;
    --modal-mobile-justify: center;
}
.calendar-dialog-host[b-ca7pkih40o]  .calendar-dialog-panel { height: 100%; }

.calendar-drawer[b-ca7pkih40o] {
    width: 100%;
    min-width: 0;
    background: #fff;
}

.calendar-drawer-header[b-ca7pkih40o] {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--line);
}

.calendar-drawer-header > div[b-ca7pkih40o] {
    min-width: 0;
}

.calendar-drawer-header p[b-ca7pkih40o] {
    margin: 0 0 4px;
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-drawer-header p.calendar-drawer-status[b-ca7pkih40o] {
    margin-bottom: 8px;
    text-transform: none;
}

.calendar-drawer-header p.calendar-drawer-occasion[b-ca7pkih40o] {
    color: var(--amber-ink);
}

.calendar-drawer-header h2[b-ca7pkih40o] {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 19px;
    line-height: 1.35;
}

.calendar-drawer-content[b-ca7pkih40o] {
    padding: 24px;
}

/* At its own shape, so nothing of the photo is cut away. */
.calendar-post-picture[b-ca7pkih40o] {
    display: block;
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    background: var(--ground);
}

.calendar-day-list-picture[b-ca7pkih40o] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    background: var(--ground);
}

.calendar-details[b-ca7pkih40o] {
    display: grid;
    gap: 20px;
    margin: 0;
}

.calendar-details > div[b-ca7pkih40o] {
    display: grid;
    gap: 6px;
}

.calendar-details dt[b-ca7pkih40o] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-details dd[b-ca7pkih40o] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.calendar-detail-platforms[b-ca7pkih40o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

/* Plain information, in the type of the details around it. As bordered white boxes they looked
   like buttons, and pressing one did nothing. */
.calendar-detail-platforms > span[b-ca7pkih40o] {
    gap: 8px;
}

.calendar-caption[b-ca7pkih40o] {
    /* The left border here was the same colour as the background, so it drew nothing
       and only added three pixels of inset. Said as padding instead. */
    padding: 12px 12px 12px 15px;
    background: var(--tint-blue);
    white-space: pre-wrap;
}

.calendar-day-list[b-ca7pkih40o] {
    display: grid;
    gap: 6px;
}

.calendar-day-list button[b-ca7pkih40o] {
    width: 100%;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--tint-blue);
    color: var(--text);
    text-align: left;
}

.calendar-day-list button:hover[b-ca7pkih40o] {
    background: var(--pill);
}

.calendar-day-list-time[b-ca7pkih40o] {
    width: 66px;
    flex: 0 0 66px;
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
}

.calendar-day-list button > span:nth-child(2)[b-ca7pkih40o] {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

/* Two lines of title and the whole of where it goes and what happened. Cut to one line, at 320
   the title read "Weekday l..." and the line under it "Instagram a...", which can hold
   "Did not go out". */
.calendar-day-list strong[b-ca7pkih40o] {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--fs-xs);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.calendar-day-list small[b-ca7pkih40o] {
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
}

/* On a phone the time sits over the title. Beside it, in its own 66px column, it left the
   title about 85px at 320. */
@media (max-width: 480px) {
    .calendar-day-list button[b-ca7pkih40o] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 10px;
        row-gap: 2px;
    }

    .calendar-day-list-time[b-ca7pkih40o] {
        grid-column: 1;
        grid-row: 1;
        width: auto;
    }

    .calendar-day-list button > span:nth-child(2)[b-ca7pkih40o] {
        grid-column: 1;
        grid-row: 2;
    }

    .calendar-day-list-picture[b-ca7pkih40o] {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .calendar-day-list button[b-ca7pkih40o]  svg {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

/* The same red and amber the chips use: in grey, "Did not go out" read like "Posted". */
.calendar-day-list small.missed[b-ca7pkih40o] {
    color: var(--red-ink);
    font-weight: 600;
}

.calendar-day-list small.blocked[b-ca7pkih40o] {
    color: var(--amber-ink);
    font-weight: 600;
}

.calendar-day-list small.missed-why[b-ca7pkih40o] {
    color: var(--red-ink);
}

.calendar-day-empty[b-ca7pkih40o] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.calendar-plan-day[b-ca7pkih40o] {
    justify-self: start;
    margin-top: 12px;
}

/* The icon sits by the first line: centred, it hung between the two lines of a wrapped link. */
.calendar-ask-advisor[b-ca7pkih40o] {
    align-items: flex-start;
    color: var(--blue);
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 6px;
    justify-self: start;
    line-height: 20px;
    min-height: 32px;
    padding-block: 6px;
    text-decoration: none;
}

.calendar-ask-advisor[b-ca7pkih40o]  svg {
    flex: none;
    margin-top: 3px;
}

.calendar-ask-advisor:hover[b-ca7pkih40o] {
    text-decoration: underline;
}

.calendar-icon-button:focus-visible[b-ca7pkih40o],
.calendar-today-button:focus-visible[b-ca7pkih40o],
.calendar-view-switch button:focus-visible[b-ca7pkih40o],
.calendar-all-filter:focus-visible[b-ca7pkih40o],
.calendar-platform-filter:focus-visible[b-ca7pkih40o],
.calendar-new-post:focus-visible[b-ca7pkih40o],
.calendar-post-chip:focus-visible[b-ca7pkih40o],
.calendar-more-posts:focus-visible[b-ca7pkih40o],
.calendar-list-post:focus-visible[b-ca7pkih40o],
.calendar-day-list button:focus-visible[b-ca7pkih40o],
.calendar-scroll:focus-visible[b-ca7pkih40o] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .calendar-page[b-ca7pkih40o] {
        padding: 20px 20px 32px;
    }

    .calendar-toolbar[b-ca7pkih40o] {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-period[b-ca7pkih40o] {
        justify-content: space-between;
    }

    .calendar-period h2[b-ca7pkih40o] {
        width: auto;
        flex: 1;
    }

    .calendar-view-switch[b-ca7pkih40o] {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .calendar-page[b-ca7pkih40o] {
        padding: 16px 12px 28px;
    }

    .calendar-header[b-ca7pkih40o] {
        gap: 12px;
        margin-bottom: 14px;
    }

    .calendar-heading h1[b-ca7pkih40o] {
        font-size: var(--fs-heading);
    }

    .calendar-new-post[b-ca7pkih40o] {
        min-height: 44px;
        padding: 0 12px;
    }

    .calendar-toolbar[b-ca7pkih40o] {
        padding: 12px 0;
    }

    .calendar-period[b-ca7pkih40o] {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .calendar-period h2[b-ca7pkih40o] {
        font-size: var(--fs-md);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-wrap: balance;
        overflow: visible;
    }

    .calendar-view-controls[b-ca7pkih40o] { gap: 8px; }
    .calendar-view-switch[b-ca7pkih40o] { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
    .calendar-view-switch button[b-ca7pkih40o] { padding-inline: 8px; }

    .calendar-filter-row[b-ca7pkih40o] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 12px 0 0;
    }

    .calendar-filters[b-ca7pkih40o] {
        width: 100%;
    }

    .calendar-platform-filter span[b-ca7pkih40o] {
        display: none;
    }

    /* With no name to turn blue, a picked icon was only a pale tint on a pale ground. */
    .calendar-platform-filter.active[b-ca7pkih40o] {
        border-color: var(--blue);
    }

    .calendar-platform-filter[b-ca7pkih40o] {
        width: 44px;
        justify-content: center;
        padding: 4px;
    }

    /* All and seven platforms needed about 395px and a phone has 354, so X sat past the edge with
       nothing pointing at it. Each takes an even share of the row now, 44px at most. */
    .calendar-filters[b-ca7pkih40o] {
        display: grid;
        gap: 4px;
        grid-auto-columns: minmax(0, 44px);
        grid-auto-flow: column;
        overflow-x: visible;
    }

    .calendar-all-filter[b-ca7pkih40o],
    .calendar-filters .calendar-platform-filter[b-ca7pkih40o] {
        min-width: 0;
        padding: 4px 0;
        width: 100%;
    }

    .calendar-alert[b-ca7pkih40o] {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-alert button[b-ca7pkih40o] {
        align-self: flex-start;
    }

    .calendar-scroll[b-ca7pkih40o],
    .calendar-list[b-ca7pkih40o] {
        margin-top: 12px;
    }

    .calendar-list[b-ca7pkih40o] {
        padding: 4px 0 12px;
    }

    .calendar-list-post[b-ca7pkih40o] {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 6px;
    }

    .calendar-list-platforms[b-ca7pkih40o] {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .calendar-list-picture[b-ca7pkih40o] {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .calendar-list-copy[b-ca7pkih40o] {
        grid-column: 3 / 4;
    }

    /* Beside the icons and the picture, one line held only two words at 320. */
    .calendar-list-copy strong[b-ca7pkih40o] {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        white-space: normal;
    }

    /* Where it goes wraps too: at 320 it was cut to "Instagram and Fa...". */
    .calendar-list-copy span[b-ca7pkih40o] {
        white-space: normal;
    }

    .calendar-list-post time[b-ca7pkih40o] {
        grid-column: 4;
        grid-row: 1;
    }

    .calendar-list-post .calendar-status[b-ca7pkih40o] {
        grid-column: 3 / 5;
        justify-self: start;
    }

    .calendar-drawer-header[b-ca7pkih40o],
    .calendar-drawer-content[b-ca7pkih40o] {
        padding: 18px;
    }
}

@media (max-width: 520px) {
    .calendar-dialog-host[b-ca7pkih40o]  .calendar-dialog-panel { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-loading-dot[b-ca7pkih40o] {
        animation: none;
    }
}

/* A month to pin up: the buttons and filters go, a post's whole title shows, and the chips keep
   their colours. It printed the screen as it was, titles cut to "Payday lunc...". */
@media print {
    .calendar-new-post[b-ca7pkih40o],
    .calendar-subtitle[b-ca7pkih40o],
    .calendar-icon-button[b-ca7pkih40o],
    .calendar-view-controls[b-ca7pkih40o],
    .calendar-filter-row[b-ca7pkih40o],
    .calendar-empty-banner[b-ca7pkih40o] {
        display: none;
    }

    .calendar-toolbar[b-ca7pkih40o] {
        border: 0;
        padding: 0;
    }

    .calendar-period h2[b-ca7pkih40o] {
        text-align: left;
        width: auto;
    }

    .calendar-scroll[b-ca7pkih40o] {
        overflow: visible;
    }

    /* The app bar is not printed, so the day names need no room for it. */
    .calendar-scroll-month .calendar-day-headers[b-ca7pkih40o],
    .calendar-scroll-week .calendar-week-header[b-ca7pkih40o] {
        position: static;
    }

    .calendar-day[b-ca7pkih40o],
    .calendar-post-chip[b-ca7pkih40o] {
        break-inside: avoid;
    }

    .calendar-post-chip[b-ca7pkih40o],
    .calendar-day.today[b-ca7pkih40o],
    .calendar-day-number[b-ca7pkih40o] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .calendar-post-title[b-ca7pkih40o],
    .calendar-month .calendar-post-title[b-ca7pkih40o] {
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
        overflow: visible;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

/* Another week or month on its way: the grid stays, dimmed, until its posts land. */
.calendar-page.is-updating :is(.calendar-scroll, .calendar-list)[b-ca7pkih40o] { opacity: .55; cursor: progress; }

/* High contrast drops backgrounds, and a phone's occasion dot is only a background. */
@media (forced-colors: active) and (max-width: 640px) {
    .calendar-month .calendar-occasion[b-ca7pkih40o],
    .calendar-week-day .calendar-occasion:not(:empty)[b-ca7pkih40o],
    .calendar-occasion-key-dot[b-ca7pkih40o] {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .calendar-occasion-key button[b-ca7pkih40o] {
        text-decoration: underline;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* Dashboard: what to do next, then what you work from.

   The page opens on one sentence and one button. The old page opened on the word
   "Dashboard", four numbers that were usually zero and three lists that each
   said "nothing today", so working out the next step meant reading all of it.

   Under the lead, white panels on the page ground group each list. The old
   hairline under every row and every heading drew more lines than the lists
   had words; rows are now set apart by space and a hover ground instead. */

.dash[b-y9sdl4cmh0] {
    padding-bottom: 56px;
}

/* ---- the lead ---------------------------------------------------------- */

/* The picture, when there is one, makes its own column after the words. A fixed
   second column sat empty on a lead with no picture and still took the 24px gap. */
.dash-hero[b-y9sdl4cmh0] {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 24px;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
    padding: 28px 32px 24px;
}

/* Something is stopping posts from going out. Amber, not red: it is a job to do,
   not an error on the page. */
.dash-hero.urgent[b-y9sdl4cmh0] {
    background: var(--tint-amber);
    border-color: var(--tint-amber-line);
}

.dash-hero-main[b-y9sdl4cmh0] {
    min-width: 0;
}

.dash-kicker[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin: 0 0 8px;
}

.dash-hero-title[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.18;
    margin: 0;
    max-width: 34ch;
    text-wrap: balance;
}

.dash-hero-detail[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 62ch;
    text-wrap: pretty;
}

.dash-hero.urgent .dash-hero-detail[b-y9sdl4cmh0] {
    color: var(--text);
}

.dash-placeholder[b-y9sdl4cmh0] {
    min-height: 1.5em;
}

.dash-hero-actions[b-y9sdl4cmh0] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.dash-hero-actions-pending[b-y9sdl4cmh0] {
    visibility: hidden;
}

.dash-grid[hidden][b-y9sdl4cmh0] {
    display: none;
}

.dash-hero-summary[b-y9sdl4cmh0] {
    border-top: 1px solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 22px 0 0;
    padding-top: 14px;
}

.dash-hero-summary[aria-hidden="true"][b-y9sdl4cmh0] {
    border-top-color: transparent;
}

.dash-hero.urgent .dash-hero-summary[b-y9sdl4cmh0] {
    border-top-color: var(--tint-amber-line);
}

.dash-hero-summary a[b-y9sdl4cmh0] {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

.dash-hero-summary a:hover[b-y9sdl4cmh0],
.dash-hero-summary a:focus-visible[b-y9sdl4cmh0] {
    text-decoration: underline;
}

.dash-hero-thumb[b-y9sdl4cmh0] {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    object-fit: cover;
    width: 120px;
}

/* ---- one-line notices ---------------------------------------------------- */

.dash-note[b-y9sdl4cmh0] {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: 4px 16px;
    margin-bottom: 10px;
    padding: 6px 16px;
}

.dash-note.warn[b-y9sdl4cmh0] {
    background: var(--tint-amber);
    border-color: var(--tint-amber-line);
}

.dash-note-copy[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    flex: 1;
    line-height: 1.45;
    min-width: 220px;
    padding: 6px 0;
}

.dash-note-copy strong[b-y9sdl4cmh0] {
    color: var(--text);
    font-weight: 600;
}

.dash-note-link[b-y9sdl4cmh0] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    font-weight: 600;
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
}

.dash-note-link:hover[b-y9sdl4cmh0],
.dash-note-link:focus-visible[b-y9sdl4cmh0] {
    text-decoration: underline;
}

/* "Try again" on the load note is a button that looks like the note's other links. */
button.dash-note-link[b-y9sdl4cmh0] {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
}

/* "Not now" sits beside the note's link without competing with it. */
button.dash-note-later[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-weight: 500;
}

/* The lapsed-account banner stays a full banner: it blocks everything else. */
.dash-banner[b-y9sdl4cmh0] {
    align-items: center;
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 20px;
}

.dash-banner svg[b-y9sdl4cmh0] {
    fill: none;
    flex-shrink: 0;
    height: 22px;
    stroke: var(--amber, #b4791a);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 22px;
}

.dash-banner-copy[b-y9sdl4cmh0] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}

.dash-banner-copy strong[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 600;
}

.dash-banner-copy span[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* ---- the grid ---------------------------------------------------------- */

.dash-grid[b-y9sdl4cmh0] {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    margin-top: 18px;
}

.dash-col[b-y9sdl4cmh0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Only the side panels: they share the full width, two up where they fit. */
.dash-grid.side-only[b-y9sdl4cmh0] {
    grid-template-columns: minmax(0, 1fr);
}

.dash-grid.side-only .dash-col-side[b-y9sdl4cmh0] {
    align-items: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.dash-section[b-y9sdl4cmh0] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-width: 0;
    padding: 16px 20px 12px;
}

.dash-section-head[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
    min-height: 32px;
}

.dash-section-head h2[b-y9sdl4cmh0] {
    color: var(--text);
    flex: 1;
    font-size: var(--fs-base);
    font-weight: 650;
    margin: 0;
    min-width: 0;
}

.dash-section-count[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

/* A small quiet button or link that lives in a section head. */
.dash-mini[b-y9sdl4cmh0] {
    align-items: center;
    appearance: none;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--blue);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 6px;
    min-height: 32px;
    padding: 4px 6px;
    text-decoration: none;
    transition: color 0.15s ease;
}

.dash-mini:hover:not(:disabled)[b-y9sdl4cmh0] {
    color: var(--blue-hover);
    text-decoration: underline;
}

.dash-mini:disabled[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    cursor: default;
}

.dash-mini svg[b-y9sdl4cmh0] {
    fill: none;
    height: 13px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 13px;
}

.dash-spin[b-y9sdl4cmh0] {
    animation: dash-spin-b-y9sdl4cmh0 0.8s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: 12px;
    width: 12px;
}

@keyframes dash-spin-b-y9sdl4cmh0 {
    to { transform: rotate(360deg); }
}

/* One line, said plainly. */
.dash-blank[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0;
    padding: 6px 0 10px;
}

.dash-queue[b-y9sdl4cmh0],
.dash-ideas[b-y9sdl4cmh0],
.dash-drafts[b-y9sdl4cmh0],
.dash-activity[b-y9sdl4cmh0] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A row you can open: no rule under it, a ground on hover. The negative margin
   lets the hover ground reach the panel's padding without moving the text. */
.dash-draft[b-y9sdl4cmh0],
.dash-queue-row[b-y9sdl4cmh0],
.dash-idea-link[b-y9sdl4cmh0] {
    border-radius: var(--radius-sm);
    color: inherit;
    margin-inline: -8px;
    padding: 10px 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.dash-draft:hover[b-y9sdl4cmh0],
.dash-queue-row:hover[b-y9sdl4cmh0],
.dash-idea-link:hover[b-y9sdl4cmh0],
.dash-draft:focus-visible[b-y9sdl4cmh0],
.dash-queue-row:focus-visible[b-y9sdl4cmh0],
.dash-idea-link:focus-visible[b-y9sdl4cmh0] {
    background: var(--ground);
}

/* ---- pictures ---------------------------------------------------------- */

.dash-thumb[b-y9sdl4cmh0] {
    align-items: center;
    aspect-ratio: 1;
    background: var(--ground);
    border-radius: var(--radius-sm);
    display: flex;
    flex: 0 0 52px;
    justify-content: center;
    overflow: hidden;
    width: 52px;
}

.dash-thumb.small[b-y9sdl4cmh0] {
    flex-basis: 40px;
    width: 40px;
}

.dash-thumb img[b-y9sdl4cmh0] {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dash-thumb svg[b-y9sdl4cmh0] {
    fill: none;
    height: 18px;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-width: 2;
    width: 18px;
}

/* ---- drafts ------------------------------------------------------------ */

.dash-draft-row[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    gap: 4px;
}

.dash-draft[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 14px;
    min-width: 0;
}

.dash-draft-copy[b-y9sdl4cmh0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Two lines of the caption: one line of a caption is rarely enough to tell two
   drafts apart. */
.dash-draft-copy strong[b-y9sdl4cmh0] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text);
    display: -webkit-box;
    font-size: var(--fs-note);
    font-weight: 550;
    line-height: 1.4;
    overflow: hidden;
}

.dash-draft-meta[b-y9sdl4cmh0] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    gap: 4px 8px;
}

.dash-draft-meta small[b-y9sdl4cmh0] {
    font-size: inherit;
}

/* What a draft still needs, with a dot so the eye can run down the column. */
/* The dot stays on the first line: centred, it sat between the lines when a long state
   ("Posted on Instagram. Ready to schedule") wrapped on a phone. */
.dash-state[b-y9sdl4cmh0] {
    align-items: flex-start;
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 600;
    gap: 6px;
}

.dash-state[b-y9sdl4cmh0]::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 7px;
    margin-top: calc((1lh - 7px) / 2);
    width: 7px;
}

.dash-state.ready[b-y9sdl4cmh0] { color: var(--green-ink); }
.dash-state.needs[b-y9sdl4cmh0] { color: var(--amber-ink); }
.dash-state.bad[b-y9sdl4cmh0] { color: var(--red-ink); }

/* ---- coming up --------------------------------------------------------- */

/* The day and time sit in a column of their own width so the rows read down as
   a timetable. */
.dash-queue-row[b-y9sdl4cmh0] {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 92px minmax(0, 1fr) auto;
}

.dash-queue-when[b-y9sdl4cmh0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-queue-when strong[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.dash-queue-when small[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.dash-queue-when .dash-queue-occasion[b-y9sdl4cmh0] {
    color: var(--amber-ink);
    font-weight: 600;
}

/* Being sent now, in place of its day and time. */
.dash-queue-when.going-out strong[b-y9sdl4cmh0] {
    color: var(--blue);
}

.dash-queue-post[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.dash-queue-copy[b-y9sdl4cmh0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-queue-title[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-note);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-badges[b-y9sdl4cmh0] {
    display: inline-flex;
    gap: 4px;
}

/* ---- advisor ----------------------------------------------------------- */

.dash-advisor-lead[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: -4px 0 6px;
}

.dash-advisor-hours[b-y9sdl4cmh0] {
    color: var(--amber);
    font-size: var(--fs-xs);
    line-height: 1.45;
    margin: 0 0 6px;
}

.dash-advisor-hours-link[b-y9sdl4cmh0] {
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
}

.dash-advisor-hours-link:hover[b-y9sdl4cmh0] {
    text-decoration: underline;
}

.dash-advisor-asks[b-y9sdl4cmh0] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Rows as the post ideas draw them, with their own names so idea counts stay ideas. */
.dash-advisor-link[b-y9sdl4cmh0] {
    align-items: center;
    border-radius: var(--radius-sm);
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-inline: -8px;
    padding: 10px 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.dash-advisor-link:hover[b-y9sdl4cmh0],
.dash-advisor-link:focus-visible[b-y9sdl4cmh0] {
    background: var(--ground);
}

.dash-advisor-link:hover .dash-go svg[b-y9sdl4cmh0] {
    transform: translateX(2px);
}

.dash-advisor-text[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.4;
}

/* ---- ideas ------------------------------------------------------------- */

.dash-idea[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    gap: 4px;
}

.dash-idea-link[b-y9sdl4cmh0] {
    align-items: center;
    display: grid;
    flex: 1;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.dash-idea-copy[b-y9sdl4cmh0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dash-idea-title[b-y9sdl4cmh0] {
    align-items: center;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-note);
    font-weight: 600;
    gap: 8px;
    line-height: 1.4;
}

.dash-idea-desc[b-y9sdl4cmh0] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text-secondary);
    display: -webkit-box;
    font-size: var(--fs-sm);
    line-height: 1.45;
    overflow: hidden;
}

.dash-go[b-y9sdl4cmh0] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 600;
    gap: 4px;
    white-space: nowrap;
}

.dash-go svg[b-y9sdl4cmh0] {
    fill: none;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.15s ease;
    width: 14px;
}

.dash-idea-link:hover .dash-go svg[b-y9sdl4cmh0] {
    transform: translateX(2px);
}

.dash-more[b-y9sdl4cmh0] {
    appearance: none;
    background: none;
    border: none;
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    min-height: 40px;
    padding: 0;
}

.dash-more:hover[b-y9sdl4cmh0],
.dash-more:focus-visible[b-y9sdl4cmh0] {
    text-decoration: underline;
}

.dash-undo[b-y9sdl4cmh0] {
    align-items: center;
    background: var(--ground);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    font-size: var(--fs-sm);
    gap: 12px;
    justify-content: space-between;
    margin: 0 0 6px;
    padding: 4px 4px 4px 12px;
}

.dash-undo-btn[b-y9sdl4cmh0] {
    appearance: none;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 36px;
    padding: 0 10px;
}

.dash-undo-btn:hover[b-y9sdl4cmh0],
.dash-undo-btn:focus-visible[b-y9sdl4cmh0] {
    background: var(--surface);
}

/* ---- last posted ------------------------------------------------------- */

.dash-post[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.dash-post-copy[b-y9sdl4cmh0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dash-post-copy strong[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-post-meta[b-y9sdl4cmh0] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    gap: 2px 10px;
}

.dash-post-meta a[b-y9sdl4cmh0] {
    color: var(--blue);
    font-weight: 600;
    /* An 18px line is a small thing to tap; the padding gives it 24px without moving the row. */
    margin-block: -3px;
    padding-block: 3px;
    text-decoration: none;
}

.dash-post-meta a:hover[b-y9sdl4cmh0],
.dash-post-meta a:focus-visible[b-y9sdl4cmh0] {
    text-decoration: underline;
}

/* ---- icon-only buttons ------------------------------------------------- */

.dash-dismiss[b-y9sdl4cmh0] {
    align-items: center;
    appearance: none;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    width: 36px;
}

/* Delete and dismiss are second thoughts, so they stay out of the way until the
   row is pointed at or reached by keyboard. On touch screens there is no
   pointing, so they always show. */
@media (hover: hover) {
    .dash-dismiss[b-y9sdl4cmh0] {
        opacity: 0;
    }

    .dash-draft-row:hover .dash-dismiss[b-y9sdl4cmh0],
    .dash-idea:hover .dash-dismiss[b-y9sdl4cmh0],
    .dash-draft-row:focus-within .dash-dismiss[b-y9sdl4cmh0],
    .dash-idea:focus-within .dash-dismiss[b-y9sdl4cmh0] {
        opacity: 1;
    }
}

.dash-dismiss:hover:not(:disabled)[b-y9sdl4cmh0] {
    background: var(--ground);
}

.dash-dismiss:disabled[b-y9sdl4cmh0] {
    cursor: default;
    opacity: 0.5;
}

.dash-dismiss svg[b-y9sdl4cmh0] {
    fill: none;
    height: 15px;
    stroke: var(--text-secondary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dash-dismiss.danger:hover:not(:disabled) svg[b-y9sdl4cmh0] {
    stroke: #b3261e;
}

/* ---- full discovery status --------------------------------------------- */

.full-discovery-status-card[b-y9sdl4cmh0] {
    align-items: center;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
    border-radius: var(--radius-sm);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 18px 20px;
}

.full-discovery-status-card.failed[b-y9sdl4cmh0] {
    background: var(--tint-red);
    border-color: var(--tint-red-line);
}

.full-discovery-status-main[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 14px;
    min-width: 0;
}

/* White on the pale pill and pale red on the pink card: both icons were close to invisible. */
.full-discovery-status-icon[b-y9sdl4cmh0] {
    background: var(--pill);
    border-radius: var(--radius);
    color: var(--blue);
    display: grid;
    flex-shrink: 0;
    height: 44px;
    place-items: center;
    width: 44px;
}

.full-discovery-status-icon.done[b-y9sdl4cmh0] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.full-discovery-status-icon.failed[b-y9sdl4cmh0] {
    background: #fff;
    color: var(--red-ink);
}

.full-discovery-status-icon svg[b-y9sdl4cmh0] {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 22px;
}

/* The running glyph is a spinner; standing still it read as stuck. */
.full-discovery-status-icon:not(.failed):not(.done) svg[b-y9sdl4cmh0] {
    animation: dash-spin-b-y9sdl4cmh0 2.4s linear infinite;
}

.full-discovery-status-copy[b-y9sdl4cmh0] {
    flex: 1;
    min-width: 0;
}

.full-discovery-status-title[b-y9sdl4cmh0] {
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 700;
}

.full-discovery-status-subtitle[b-y9sdl4cmh0] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-top: 3px;
}

.full-discovery-progress-track[b-y9sdl4cmh0] {
    background: rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-pill);
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    width: min(100%, 420px);
}

.full-discovery-progress-fill[b-y9sdl4cmh0] {
    background: var(--blue);
    border-radius: inherit;
    height: 100%;
    transition: width 0.25s ease;
}

.full-discovery-status-actions[b-y9sdl4cmh0] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
}

/* ---- narrower ---------------------------------------------------------- */

@media (max-width: 1080px) {
    .dash-grid[b-y9sdl4cmh0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .dash-hero[b-y9sdl4cmh0] {
        gap: 16px;
        padding: 20px 18px 18px;
    }

    .dash-hero-title[b-y9sdl4cmh0] {
        font-size: var(--fs-xl);
    }

    .dash-hero-detail[b-y9sdl4cmh0] {
        font-size: var(--fs-base);
    }

    /* The picture would squeeze the sentence into a narrow column. */
    .dash-hero-thumb[b-y9sdl4cmh0] {
        display: none;
    }

    .dash-hero-actions > a[b-y9sdl4cmh0] {
        flex: 1 1 100%;
    }

    .dash-section[b-y9sdl4cmh0] {
        padding: 14px 16px 10px;
    }

    .dash-queue-row[b-y9sdl4cmh0] {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: 10px;
    }

    /* Beside its picture, a title held to one line was cut after three words. */
    .dash-queue-title[b-y9sdl4cmh0] {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        line-height: 1.35;
        white-space: normal;
    }

    .dash-go[b-y9sdl4cmh0] {
        font-size: 0;
        gap: 0;
    }

    .dash-go svg[b-y9sdl4cmh0] {
        height: 16px;
        width: 16px;
    }

    .full-discovery-status-card[b-y9sdl4cmh0] {
        align-items: stretch;
        flex-direction: column;
    }

    .full-discovery-status-actions .btn-primary[b-y9sdl4cmh0],
    .full-discovery-status-actions .btn-secondary[b-y9sdl4cmh0] {
        justify-content: center;
        width: 100%;
    }
}

/* On the smallest phones the title sat between the time and the badges with about 70px:
   "Weekday lunch is...". The time and badges share a line and the post gets the next one. */
@media (max-width: 360px) {
    .dash-queue-row[b-y9sdl4cmh0] {
        grid-template-areas:
            "when badges"
            "post post";
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 8px;
    }

    .dash-queue-when[b-y9sdl4cmh0] {
        align-items: baseline;
        flex-direction: row;
        gap: 6px;
        grid-area: when;
    }

    .dash-queue-post[b-y9sdl4cmh0] {
        grid-area: post;
    }

    .dash-queue-row > .dash-badges[b-y9sdl4cmh0] {
        grid-area: badges;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-mini[b-y9sdl4cmh0],
    .dash-draft[b-y9sdl4cmh0],
    .dash-queue-row[b-y9sdl4cmh0],
    .dash-idea-link[b-y9sdl4cmh0],
    .dash-dismiss[b-y9sdl4cmh0],
    .dash-go svg[b-y9sdl4cmh0],
    .full-discovery-progress-fill[b-y9sdl4cmh0] {
        transition: none;
    }

    .dash-spin[b-y9sdl4cmh0] {
        animation-duration: 2.4s;
    }

    .full-discovery-status-icon svg[b-y9sdl4cmh0] {
        animation: none;
    }
}

/* High Contrast drops the colour that marked these words as buttons. */
@media (forced-colors: active) {
    .dash-more[b-y9sdl4cmh0],
    button.dash-note-link[b-y9sdl4cmh0],
    button.dash-mini:not(:disabled)[b-y9sdl4cmh0] {
        text-decoration: underline;
    }
}
/* /Pages/EditMedia.razor.rz.scp.css */
/* The same side margins as every other page (workspace.css .content-wide). Without them the
   alert and both cards ran into the sidebar and the window edge. */
.edit-media-page[b-0o01yarc4o] {
    --edit-gutter: 32px;
    display: grid;
    gap: 24px;
    width: min(100%, var(--content-wide-max));
    margin: 0 auto;
    padding: 0 var(--edit-gutter) 40px;
    min-width: 0;
}

/* It sticks under the app bar, not over it. With top 0 and a -24px margin it slid 24px over
   the bar at rest (cutting the logo in half) and covered it once the page scrolled. */
.edit-media-header[b-0o01yarc4o] {
    position: sticky;
    top: var(--header-h);
    z-index: 9;
    /* The bar still runs edge to edge. */
    margin: 0 calc(-1 * var(--edit-gutter));
    border-bottom: 1px solid var(--line);
    background: rgba(245, 245, 247, 0.88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.edit-header-main[b-0o01yarc4o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 10px var(--edit-gutter);
    min-width: 0;
}

.edit-title-row[b-0o01yarc4o],
.edit-header-actions[b-0o01yarc4o],
.edit-toolbar-group[b-0o01yarc4o],
.edit-state-actions[b-0o01yarc4o],
.edit-canvas-toolbar[b-0o01yarc4o],
.edit-canvas-meta[b-0o01yarc4o],
.edit-aspect-card[b-0o01yarc4o],
.edit-aspect-options[b-0o01yarc4o],
.edit-phone-profile[b-0o01yarc4o],
.edit-phone-icons[b-0o01yarc4o] {
    display: flex;
    align-items: center;
}

.edit-title-row[b-0o01yarc4o] {
    gap: 12px;
    min-width: 0;
}

.edit-title-copy[b-0o01yarc4o] {
    min-width: 0;
}

.edit-title-copy h1[b-0o01yarc4o],
.edit-canvas-meta h2[b-0o01yarc4o],
.edit-state-card h2[b-0o01yarc4o],
.edit-panel-header h2[b-0o01yarc4o] {
    margin: 0;
    color: var(--text);
    font-weight: 700;
}

.edit-title-copy h1[b-0o01yarc4o] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-lg);
}

.edit-title-copy h1[tabindex="-1"]:focus[b-0o01yarc4o] {
    outline: none;
}

.edit-title-copy p[b-0o01yarc4o],
.edit-state-card p[b-0o01yarc4o],
.edit-ai-button + p[b-0o01yarc4o],
.edit-canvas-meta p[b-0o01yarc4o],
.edit-phone-post p[b-0o01yarc4o] {
    margin: 0;
    color: var(--text-secondary);
}

.edit-title-copy p[b-0o01yarc4o],
.edit-canvas-meta p[b-0o01yarc4o] {
    font-size: var(--fs-xs);
}

.edit-header-actions[b-0o01yarc4o] {
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.edit-primary-button[b-0o01yarc4o],
.edit-secondary-button[b-0o01yarc4o],
.edit-icon-button[b-0o01yarc4o],
.edit-tool-button[b-0o01yarc4o],
.edit-filter-button[b-0o01yarc4o],
.edit-aspect-button[b-0o01yarc4o],
.edit-ai-button[b-0o01yarc4o] {
    appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

.edit-primary-button[b-0o01yarc4o],
.edit-secondary-button[b-0o01yarc4o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--radius-control);
    padding: 10px 16px;
    font-size: var(--fs-note);
    font-weight: 700;
}

.edit-primary-button[b-0o01yarc4o] {
    background: var(--accent);
    /* Transparent, so High Contrast, which drops the fill, still draws Save as a button. */
    border: 1px solid transparent;
    color: #fff;
    padding: 9px 15px;
}

.edit-primary-button:hover[b-0o01yarc4o] {
    background: var(--accent-dark);
}

.edit-secondary-button[b-0o01yarc4o] {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
}

.edit-secondary-button:hover[b-0o01yarc4o] {
    border-color: var(--accent);
    color: var(--accent);
}

.edit-primary-button:disabled[b-0o01yarc4o],
.edit-secondary-button:disabled[b-0o01yarc4o],
.edit-icon-button:disabled[b-0o01yarc4o],
.edit-tool-button:disabled[b-0o01yarc4o],
.edit-filter-button:disabled[b-0o01yarc4o],
.edit-aspect-button:disabled[b-0o01yarc4o],
.edit-range-list input:disabled[b-0o01yarc4o],
.edit-ai-button:disabled[b-0o01yarc4o] {
    opacity: 0.55;
    cursor: not-allowed;
}

.edit-icon-button[b-0o01yarc4o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text-secondary);
}

.edit-icon-button:hover:not(:disabled)[b-0o01yarc4o] {
    background: rgba(var(--blue-rgb), 0.08);
    color: var(--accent);
}

.edit-media-page svg[b-0o01yarc4o] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.edit-alert[b-0o01yarc4o] {
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: var(--fs-note);
    font-weight: 600;
}

.edit-alert-success[b-0o01yarc4o] {
    border: 1px solid rgba(52, 199, 89, 0.24);
    background: rgba(52, 199, 89, 0.08);
    color: var(--green-ink);
}

.edit-alert-success a[b-0o01yarc4o],
.edit-alert-error a[b-0o01yarc4o] {
    margin-left: 4px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.edit-alert-error[b-0o01yarc4o] {
    border: 1px solid rgba(var(--red-rgb), 0.24);
    background: rgba(var(--red-rgb), 0.08);
    color: var(--red-ink);
}

.edit-spinner[b-0o01yarc4o] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: edit-spin-b-0o01yarc4o 0.7s linear infinite;
}

.edit-spinner.large[b-0o01yarc4o] {
    width: 32px;
    height: 32px;
}

@keyframes edit-spin-b-0o01yarc4o {
    to { transform: rotate(360deg); }
}

.edit-state-card[b-0o01yarc4o] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
}

/* One line beside the spinner: centre it rather than hang it from the top. */
.edit-state-card--loading[b-0o01yarc4o] {
    align-items: center;
}

.edit-state-card h2[b-0o01yarc4o] {
    font-size: var(--fs-xl);
    margin-bottom: 6px;
}

.edit-state-card p[b-0o01yarc4o] {
    max-width: 680px;
    line-height: 1.55;
}

.edit-state-actions[b-0o01yarc4o] {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.edit-state-icon[b-0o01yarc4o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: rgba(77, 157, 224, 0.1);
    color: var(--accent);
    flex-shrink: 0;
}

.edit-state-icon.error[b-0o01yarc4o] {
    background: rgba(var(--red-rgb), 0.1);
    color: var(--red);
}

.edit-media-grid[b-0o01yarc4o] {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
    min-width: 0;
}

/* Side by side: the tools on the left beside both the photo and the preview under it. */
.edit-tools-panel[b-0o01yarc4o] {
    grid-row: span 2;
}

.edit-preview-card[b-0o01yarc4o] {
    grid-column: 2;
}

.edit-tools-panel[b-0o01yarc4o],
.edit-workspace[b-0o01yarc4o] {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.edit-panel[b-0o01yarc4o],
.edit-canvas-card[b-0o01yarc4o],
.edit-aspect-card[b-0o01yarc4o],
.edit-preview-card[b-0o01yarc4o] {
    padding: 18px;
    min-width: 0;
}

.edit-panel-header[b-0o01yarc4o],
.edit-canvas-meta[b-0o01yarc4o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    min-width: 0;
}

.edit-panel-header h2[b-0o01yarc4o],
.edit-canvas-meta h2[b-0o01yarc4o] {
    font-size: var(--fs-base);
}

.edit-panel-header span[b-0o01yarc4o],
.edit-canvas-meta > span[b-0o01yarc4o],
.edit-aspect-card > span[b-0o01yarc4o] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.edit-tool-grid[b-0o01yarc4o],
.edit-filter-grid[b-0o01yarc4o] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.edit-tool-button[b-0o01yarc4o],
.edit-filter-button[b-0o01yarc4o] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 72px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text-secondary);
    padding: 10px 8px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.edit-tool-button span[b-0o01yarc4o],
.edit-filter-button span:last-child[b-0o01yarc4o] {
    font-size: var(--fs-xs);
    font-weight: 700;
}

.edit-tool-button.active[b-0o01yarc4o],
.edit-filter-button.active[b-0o01yarc4o] {
    border-color: var(--accent);
    background: rgba(77, 157, 224, 0.08);
    color: var(--accent);
}

/* Hover only outlines, and only with a real pointer. It matched the chosen look, so on a phone a
   tapped Rotate or Flip stayed lit beside the tool that was really open. */
@media (hover: hover) {
    .edit-tool-button:not(.active):hover[b-0o01yarc4o],
    .edit-filter-button:not(.active):hover[b-0o01yarc4o] {
        border-color: var(--accent);
        color: var(--accent);
    }
}

/* Each slider carries 16px of touch room above its track (app.css), so a 7px gap put the track
   29px under its own name and only 37px over the next one: it read as belonging to neither. */
.edit-range-list[b-0o01yarc4o] {
    display: grid;
    gap: 18px;
}

.edit-range-list label[b-0o01yarc4o] {
    display: grid;
    gap: 0;
}

.edit-range-list label > span[b-0o01yarc4o] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.edit-range-list strong[b-0o01yarc4o] {
    color: var(--text);
}

.edit-range-list input[b-0o01yarc4o] {
    width: 100%;
}

.filter-thumb[b-0o01yarc4o] {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 52px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.filter-thumb img[b-0o01yarc4o] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The gradients only show until the photo loads, or for a file with no picture to show.
   Original is plain: an amber one read as warmer than Warm. */
.filter-thumb.original[b-0o01yarc4o] { background: var(--bg-canvas); }
.filter-thumb.warm[b-0o01yarc4o] { background: linear-gradient(135deg, var(--tint-amber), var(--tint-red)); }
.filter-thumb.cool[b-0o01yarc4o] { background: linear-gradient(135deg, var(--tint-blue), var(--tint-cyan)); }
.filter-thumb.bw[b-0o01yarc4o] { background: linear-gradient(135deg, var(--line-strong), var(--muted)); }

/* Outlined: a solid blue bar here outweighed Save changes, the page's real next step, and this
   one is optional and counts toward the image limit. */
.edit-ai-button[b-0o01yarc4o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-note);
    font-weight: 700;
    padding: 12px;
}

.edit-ai-button svg[b-0o01yarc4o] {
    color: var(--accent);
}

.edit-ai-button:hover:not(:disabled)[b-0o01yarc4o] {
    border-color: var(--ink);
}

.edit-ai-button + p[b-0o01yarc4o] {
    margin-top: 10px;
    text-align: center;
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.edit-canvas-card[b-0o01yarc4o] {
    display: grid;
    gap: 14px;
}

.edit-canvas-frame[b-0o01yarc4o] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 760px;
    /* EditMedia.GetCanvasFrameWidth reads the same variable, so the width shrinks with the height. */
    max-height: var(--edit-frame-max-h, 72vh);
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius);
    /* White, as the saved copy fills a zoomed-out or turned photo's gap (edit-media.js); it was
       grey here and came out white. The line keeps the frame's shape in sight on the white card. */
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line);
}

.edit-canvas-art[b-0o01yarc4o] {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--tint-amber);
    transition: filter 0.15s ease, transform 0.15s ease;
    transform-origin: center;
}

.edit-canvas-art img[b-0o01yarc4o],
.edit-phone-image img[b-0o01yarc4o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The picture at its cover size (EditMedia.PictureStyle), centred, running past the frame on its
   long way so a drag can bring the part a shape hides back in. The frame clips it. */
.edit-canvas-art img[b-0o01yarc4o],
.edit-phone-art img[b-0o01yarc4o] {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    transform: translate(-50%, -50%);
    -webkit-user-drag: none;
    user-select: none;
}

.edit-placeholder-art[b-0o01yarc4o] {
    display: grid;
    place-items: center;
    gap: 8px;
    color: var(--amber);
    text-align: center;
    font-weight: 700;
}

.edit-placeholder-art svg[b-0o01yarc4o] {
    width: 64px;
    height: 64px;
}

/* The photo is dragged to choose what stays in the frame (edit-media.js attachPan). On a touch
   screen a drag on the photo moves the photo, not the page. */
.edit-canvas-frame[b-0o01yarc4o] {
    cursor: grab;
    touch-action: none;
}

.edit-canvas-frame.is-dragging[b-0o01yarc4o] {
    cursor: grabbing;
}

/* No easing while it follows the pointer. */
.edit-canvas-frame.is-dragging .edit-canvas-art[b-0o01yarc4o] {
    transition: none;
}

/* Thirds across the whole frame, which is what is saved. */
.edit-crop-overlay[b-0o01yarc4o] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.edit-crop-overlay span[b-0o01yarc4o] {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

.edit-crop-overlay span:nth-child(1)[b-0o01yarc4o],
.edit-crop-overlay span:nth-child(2)[b-0o01yarc4o] {
    top: 0;
    bottom: 0;
    width: 1px;
}

.edit-crop-overlay span:nth-child(3)[b-0o01yarc4o],
.edit-crop-overlay span:nth-child(4)[b-0o01yarc4o] {
    left: 0;
    right: 0;
    height: 1px;
}

.edit-crop-overlay span:nth-child(1)[b-0o01yarc4o] { left: 33.333%; }
.edit-crop-overlay span:nth-child(2)[b-0o01yarc4o] { left: 66.667%; }
.edit-crop-overlay span:nth-child(3)[b-0o01yarc4o] { top: 33.333%; }
.edit-crop-overlay span:nth-child(4)[b-0o01yarc4o] { top: 66.667%; }

.edit-crop-hint[b-0o01yarc4o] {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    text-align: center;
}

.edit-canvas-toolbar[b-0o01yarc4o] {
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.edit-toolbar-group[b-0o01yarc4o] {
    gap: 8px;
}

.edit-zoom-value[b-0o01yarc4o] {
    min-width: 54px;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-note);
    font-weight: 700;
}

.edit-aspect-card[b-0o01yarc4o] {
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.edit-aspect-options[b-0o01yarc4o] {
    gap: 8px;
    flex-wrap: wrap;
}

.edit-aspect-button[b-0o01yarc4o] {
    min-height: 44px;
    min-width: 56px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: 7px 11px;
    background: var(--ground);
    color: var(--text-secondary);
    font-size: var(--fs-note);
    font-weight: 700;
}

.edit-aspect-button.active[b-0o01yarc4o] {
    background: var(--accent);
    color: #fff;
}

/* Only a real pointer hovers, and a hovered shape is tinted rather than filled. It used the
   chosen shape's colour, so on a phone the last shape tapped stayed blue beside the chosen one. */
@media (hover: hover) {
    .edit-aspect-button:not(.active):hover[b-0o01yarc4o] {
        background: var(--tint-blue, var(--surface-2));
        color: var(--accent);
    }
}

.edit-phone-wrap[b-0o01yarc4o] {
    display: flex;
    justify-content: center;
}

.edit-phone-frame[b-0o01yarc4o] {
    width: 220px;
}

.edit-phone-post[b-0o01yarc4o] {
    padding: 10px;
    background: #fff;
}

.edit-phone-profile[b-0o01yarc4o] {
    gap: 8px;
    margin-bottom: 8px;
}

.edit-phone-profile span[b-0o01yarc4o] {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    /* The avatar ring in the mock phone, matched to the landing page's .pc-av
       character for character. */
    background: conic-gradient(from 200deg, var(--blue-lt), var(--purple), var(--orange), var(--blue-lt));
}

.edit-phone-profile strong[b-0o01yarc4o],
.edit-phone-post p[b-0o01yarc4o] {
    font-size: var(--fs-2xs);
}

.edit-phone-image[b-0o01yarc4o] {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    /* The saved copy's gap colour, as in the large preview. */
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line);
}

.edit-phone-art[b-0o01yarc4o] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.edit-phone-icons[b-0o01yarc4o] {
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.edit-phone-icons svg[b-0o01yarc4o] {
    width: 14px;
    height: 14px;
}

@media (max-width: 1120px) {
    .edit-media-grid[b-0o01yarc4o] {
        grid-template-columns: 1fr;
    }

    /* One column: the photo first, then the tools that change it, then the preview. On a phone
       the photo sat under 1,300px of controls, so every change was made without seeing it. */
    .edit-workspace[b-0o01yarc4o] {
        order: -1;
    }

    /* The short cards down the left, the five sliders down the right. Paired across in rows, the
       four tool buttons were stretched to the sliders' height: a 300px empty box on a tablet. */
    .edit-tools-panel[b-0o01yarc4o] {
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "tools adjust"
            "filters adjust"
            "ai adjust";
        align-items: start;
    }

    .edit-panel--tools[b-0o01yarc4o] { grid-area: tools; }
    .edit-panel--filters[b-0o01yarc4o] { grid-area: filters; }
    .edit-panel--ai[b-0o01yarc4o] { grid-area: ai; }

    .edit-panel--adjust[b-0o01yarc4o] {
        grid-area: adjust;
        align-self: stretch;
    }

    .edit-preview-card[b-0o01yarc4o] {
        grid-column: auto;
    }
}

@media (max-width: 960px) {
    .edit-media-page[b-0o01yarc4o] {
        --edit-gutter: 18px;
        padding-bottom: 28px;
    }

    .edit-media-header[b-0o01yarc4o] {
        top: 60px;
    }
}

@media (max-width: 760px) {
    .edit-header-main[b-0o01yarc4o] {
        align-items: stretch;
        flex-direction: column;
        padding: 12px var(--edit-gutter);
    }

    .edit-header-actions[b-0o01yarc4o] {
        width: 100%;
        flex-wrap: wrap;
    }

    .edit-header-actions button[b-0o01yarc4o] {
        flex: 1 1 140px;
    }

    .edit-tools-panel[b-0o01yarc4o] {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    /* One column again, in the order written. */
    .edit-tools-panel > .edit-panel[b-0o01yarc4o] {
        grid-area: auto;
    }

    .edit-tool-grid[b-0o01yarc4o],
    .edit-filter-grid[b-0o01yarc4o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .edit-panel[b-0o01yarc4o],
    .edit-canvas-card[b-0o01yarc4o],
    .edit-aspect-card[b-0o01yarc4o],
    .edit-preview-card[b-0o01yarc4o],
    .edit-state-card[b-0o01yarc4o] {
        padding: 16px;
    }

    .edit-state-card[b-0o01yarc4o] {
        flex-direction: column;
    }

    /* It was a max-height on the frame alone, so the width (sized for 72vh) no longer matched it. */
    .edit-media-page[b-0o01yarc4o] {
        --edit-frame-max-h: 62vh;
    }
}

/* One column, on a screen tall enough: the photo stays in sight while the sliders, filters and
   tools scroll under it. It scrolled away first (on a 768 × 1024 tablet the tools started below
   the screen), so every change was made without seeing the photo. */
@media (max-width: 1120px) and (min-height: 600px) {
    .edit-media-page[b-0o01yarc4o] {
        --edit-frame-max-h: 36vh;
        /* The app bar and this page's own bar, which the photo sits under. */
        --edit-bar-h: var(--header-h);
        --edit-header-h: 66px;
    }

    /* The photo card and the shapes join the page's own column, so the photo can stick for the
       whole page instead of only beside the shapes. */
    .edit-workspace[b-0o01yarc4o] {
        display: contents;
    }

    .edit-canvas-card[b-0o01yarc4o] {
        order: -2;
        position: sticky;
        top: calc(var(--edit-bar-h) + var(--edit-header-h));
        z-index: 8;
        padding: 12px 14px;
        box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.3);
    }

    .edit-canvas-card .edit-canvas-meta[b-0o01yarc4o] {
        margin-bottom: 8px;
    }

    .edit-aspect-card[b-0o01yarc4o] {
        order: -1;
    }
}

/* A tablet on its side keeps about a third of its height for the controls under the photo. */
@media (max-width: 1120px) and (min-height: 600px) and (orientation: landscape) {
    .edit-media-page[b-0o01yarc4o] {
        --edit-frame-max-h: 30vh;
    }
}

@media (max-width: 960px) and (min-height: 600px) {
    .edit-media-page[b-0o01yarc4o] {
        --edit-bar-h: 60px;
    }
}

/* A phone held upright: a smaller photo and a one-row bar, so the controls keep room. */
@media (max-width: 760px) and (min-height: 600px) {
    .edit-media-page[b-0o01yarc4o] {
        --edit-frame-max-h: 30vh;
        --edit-header-h: 61px;
    }

    /* One row, so the photo can sit right under it. The back arrow also leaves, and asks first
       when there are changes, so Cancel gives its room to the title. */
    .edit-header-main[b-0o01yarc4o] {
        flex-direction: row;
        align-items: center;
        min-height: 0;
        padding: 8px var(--edit-gutter);
    }

    .edit-title-copy p[b-0o01yarc4o],
    .edit-header-actions [data-testid="editmedia-cancel"][b-0o01yarc4o] {
        display: none;
    }

    /* A grid item sizes to its content by default: the unbroken file name made the page 337px
       wide at 320 instead of trimming the name. */
    .edit-media-header[b-0o01yarc4o] {
        min-width: 0;
    }

    .edit-title-row[b-0o01yarc4o] {
        flex: 1 1 auto;
    }

    .edit-header-actions[b-0o01yarc4o] {
        width: auto;
        flex-wrap: nowrap;
    }

    .edit-header-actions button[b-0o01yarc4o] {
        flex: none;
    }

    .edit-canvas-card[b-0o01yarc4o] {
        padding: 10px 12px;
    }

    /* One row even at 320, where Undo and Zoom wrapped and made the pinned card 56px taller. */
    .edit-canvas-card .edit-canvas-toolbar[b-0o01yarc4o] {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .edit-canvas-card .edit-toolbar-group[b-0o01yarc4o] {
        gap: 4px;
    }

    .edit-canvas-card .edit-zoom-value[b-0o01yarc4o] {
        min-width: 46px;
    }
}

@media (max-width: 420px) {
    .edit-title-copy h1[b-0o01yarc4o] {
        font-size: var(--fs-md);
    }

    .edit-icon-button[b-0o01yarc4o] {
        width: 44px;
        height: 44px;
    }

    /* All five shapes on one row. Wrapped four to a row, "No crop" sat alone on a full-width
       blue bar that read as the page's main button. */
    .edit-aspect-options[b-0o01yarc4o] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .edit-aspect-button[b-0o01yarc4o] {
        min-width: 0;
        padding: 8px 2px;
        font-size: var(--fs-sm);
    }
}

/* At 320 a fifth of the row was too narrow for "No crop", which broke onto two lines and stood
   taller than the shapes beside it. It takes the width it needs and the four shapes share the rest. */
@media (max-width: 360px) {
    .edit-aspect-options[b-0o01yarc4o] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    }

    .edit-aspect-button[b-0o01yarc4o] {
        white-space: nowrap;
    }

    .edit-aspect-button:last-child[b-0o01yarc4o] {
        padding-inline: 10px;
    }
}

/* Holds the Sharpness filter only; it takes no room. */
.edit-svg-defs[b-0o01yarc4o] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
/* /Pages/Integrations.razor.rz.scp.css */
.integrations-header[b-5ylimmn5b6] {
  margin-bottom: 28px;
}

.integrations-header h1[b-5ylimmn5b6] {
  margin: 0;
}

.integrations-header h1:focus[b-5ylimmn5b6] {
  outline: none;
}

/* Set as the line under Library's, Analytics' and the Calendar's titles. */
.integrations-header p[b-5ylimmn5b6] {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.integrations-page[b-5ylimmn5b6] {
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
}

.integrations-status[b-5ylimmn5b6] {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.integrations-failed[b-5ylimmn5b6] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 6px 8px 6px 16px;
  border: 1px solid var(--tint-red-line);
  border-radius: var(--radius-sm);
  background: var(--tint-red);
  color: var(--red-ink);
  font-size: var(--fs-sm);
}

/* Back to the Studio post that sent the owner here to connect a platform. */
.integrations-back[b-5ylimmn5b6] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -8px 0 8px -4px;
  padding: 0 8px 0 4px;
  border-radius: var(--radius-xs);
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.integrations-back:hover[b-5ylimmn5b6] {
  background: var(--ground);
}
/* /Pages/Landing.razor.rz.scp.css */
  /* Shopfront — YouDoYou landing. Strata's tokens (app.css), Marquee's
     type scale and card grammar, and the media built into the page. */
  .lp[b-sefds06vwx] {
    --ink: #1a1d20; --muted: #6a6d76; --line: #e2e4e8; --ground: #f5f5f7; --surface: #ffffff; --pill: #edf3fa;
    --blue: #0b5cca; --blue-hover: #0a4fae; --blue-lt: #4d9de0; --blue-deep: #1d5ab8;
    --purple: #7b6fd4; --orange: #ff9f0a; --amber: #8a5a00; --green: #34c759; --red: #d92d20;
    --e1: 0 1px 2px rgba(13,27,46,0.05), 0 4px 12px rgba(13,27,46,0.05);
    --e2: 0 2px 6px rgba(13,27,46,0.06), 0 12px 30px rgba(13,27,46,0.08);
    --e3: 0 6px 14px rgba(13,27,46,0.07), 0 28px 64px rgba(13,27,46,0.13);
    --shell: 1240px; --pad: 44px; --mast-h: 74px;
    --p-mechanic: url("landing/editorial/mechanic.webp");
    --p-coffee: url("landing/editorial/cafe-owner.webp");
    --p-hotwater: url("landing/p-hotwater.jpg");
    /* The wall's cards and the small avatars are 164-300px wide: 560px copies (card/), half the bytes
       of the full photos, which only the larger scenes further down still use. */
    --c-taki: url("landing/card/taki.webp");
    --c-barber: url("landing/card/barber.webp");
    --c-dave: url("landing/card/dave.webp");
    --c-lawn: url("landing/card/lawn.webp");
    --c-salon: url("landing/card/salon.webp");
    --c-florist: url("landing/card/florist.webp");
    --c-mechanic: url("landing/card/mechanic.webp");
    --c-physio: url("landing/card/physio.webp");
    --c-bakery: url("landing/card/bakery.webp");
    --c-studio: url("landing/card/studio.webp");
    --c-pizza: url("landing/card/pizza.webp");
    --c-coffee: url("landing/card/coffee.webp");
    --c-hotwater: url("landing/card/hotwater.webp");
    --c-van: url("landing/card/van.webp");
    --g-taki: url("landing/editorial/thumb/cafe-owner.webp");
    --g-barber: url("landing/editorial/thumb/barber.webp");
    --g-dave: url("landing/editorial/thumb/plumber.webp");
    --g-lawn: url("landing/editorial/thumb/landscaper.webp");
    --g-salon: url("landing/editorial/thumb/hairdresser.webp");
    --g-florist: url("landing/editorial/thumb/florist.webp");
    --g-mechanic: url("landing/editorial/thumb/mechanic.webp");
    --g-physio: url("landing/editorial/thumb/physio.webp");
    --g-bakery: url("landing/editorial/thumb/bakery-team.webp");
    --g-studio: url("landing/g-studio.jpg");
    --g-pizza: url("landing/editorial/thumb/restaurant.webp");
    --g-coffee: url("landing/editorial/thumb/cafe-owner.webp");
    --g-hotwater: url("landing/g-hotwater.jpg");
    --g-van: url("landing/g-van.jpg");
    --v-salon: url("landing/v-salon.jpg");
    --v-latte: url("landing/v-latte.jpg");
  }
.lp *[b-sefds06vwx], .lp *[b-sefds06vwx]::before, .lp *[b-sefds06vwx]::after { box-sizing: border-box; }
.lp[b-sefds06vwx] { margin: 0; background: var(--ground); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  .lp [b-sefds06vwx]::selection { background: var(--blue); color: #fff; }
  a[b-sefds06vwx] { color: inherit; text-decoration: none; }
  :focus-visible[b-sefds06vwx] { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
  section[id][b-sefds06vwx], #top[b-sefds06vwx] { scroll-margin-top: calc(var(--mast-h) + 12px); }
  #card-form[b-sefds06vwx] { scroll-margin-top: calc(var(--mast-h) + 16px); }
  .shell[b-sefds06vwx] { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
  .sr[b-sefds06vwx] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- type ---------- */
  .disp[b-sefds06vwx] { font-weight: 800; letter-spacing: 0; line-height: 0.98; text-wrap: balance; margin: 0; }
  h1[b-sefds06vwx] { font-size: clamp(42px, 6.1vw, 88px); }
  h2[b-sefds06vwx] { font-size: clamp(36px, 5vw, 72px); }
  h3[b-sefds06vwx] { font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: 0; line-height: 1.12; margin: 0; text-wrap: balance; }
  p[b-sefds06vwx] { margin: 0; }
  .body-lg[b-sefds06vwx] { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); max-width: 32em; }
  .lp-tag[b-sefds06vwx] { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--blue); }
  .lp-tag[b-sefds06vwx]::before { content: ""; width: 26px; height: 1px; background: var(--blue); }

  /* ---------- controls ---------- */
  .btn[b-sefds06vwx] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: 0; padding: 15px 28px; min-height: 52px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.16,1,.3,1); }
  .btn:active[b-sefds06vwx] { transform: translateY(1px); }
  .btn-fill[b-sefds06vwx] { background: var(--blue); color: #fff; box-shadow: var(--e1); }
  .btn-fill:hover[b-sefds06vwx] { background: var(--blue-hover); box-shadow: var(--e2); }
  .btn-line[b-sefds06vwx] { background: var(--surface); color: var(--ink); border-color: #c9ccd2; }
  .btn-line:hover[b-sefds06vwx] { border-color: var(--ink); }
  .btn-bare[b-sefds06vwx] { background: none; color: var(--muted); padding: 15px 6px; }
  .btn-bare:hover[b-sefds06vwx] { color: var(--ink); }
  .btn-lg[b-sefds06vwx] { padding: 18px 34px; min-height: 58px; font-size: 16.5px; }
  .btn:disabled[b-sefds06vwx] { opacity: .55; cursor: not-allowed; }

  /* ---------- masthead ---------- */
  .mast[b-sefds06vwx] { position: sticky; top: 0; z-index: 80; height: var(--mast-h); display: flex; align-items: center; background: rgba(245,245,247,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; }
  .mast.stuck[b-sefds06vwx] { border-bottom-color: var(--line); background: rgba(245,245,247,0.9); }
  .mast-in[b-sefds06vwx] { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; }
  .brand[b-sefds06vwx] { font-weight: 800; font-size: 21px; letter-spacing: 0; display: flex; align-items: center; gap: 10px; padding: 7px 0; }
  .brand i[b-sefds06vwx] { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 12px 2px rgba(11,92,202,.35); }
  .mnav[b-sefds06vwx] { display: flex; gap: 32px; }
  .mnav a[b-sefds06vwx] { font-size: 15px; color: var(--muted); padding: 12px 2px; transition: color .18s ease; }
  .mnav a:hover[b-sefds06vwx] { color: var(--blue); }
  .mact[b-sefds06vwx] { display: flex; align-items: center; gap: 12px; }
  .mact .btn[b-sefds06vwx] { white-space: nowrap; }
  .mact .lbl-s[b-sefds06vwx] { display: none; }
  .menu-btn[b-sefds06vwx] { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .menu-btn i[b-sefds06vwx] { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
  .menu-btn[aria-expanded="true"] i:first-child[b-sefds06vwx] { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] i:last-child[b-sefds06vwx] { transform: translateY(-4px) rotate(-45deg); }
  .mmenu[b-sefds06vwx] { position: fixed; left: 0; right: 0; top: var(--mast-h); z-index: 79; background: rgba(245,245,247,0.985); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgba(26,29,32,.25); }
  .mmenu-in[b-sefds06vwx] { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 20px; }
  .mmenu-in a[b-sefds06vwx] { font-size: 19px; font-weight: 600; letter-spacing: 0; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .mmenu-in a:last-of-type[b-sefds06vwx] { border-bottom: 0; }
  .mmenu-in .mm-link[b-sefds06vwx] { font-size: 19px; font-weight: 600; letter-spacing: 0; padding: 15px 0; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: none; font-family: inherit; text-align: left; width: 100%; cursor: pointer; }
  .mmenu-in .btn[b-sefds06vwx] { margin-top: 10px; width: 100%; white-space: normal; }

  /* =========================================================
     ACT 1 — hero with the feed wall. Text on the left; on the right a
     tilted wall of posts scrolling in three columns, two of them the
     wrong way, fading out under the headline and at the frame edges.
     ========================================================= */
  .hero[b-sefds06vwx] { position: relative; padding: clamp(64px, 9vh, 112px) 0 72px; overflow: clip; isolation: isolate; }
  .hero-light[b-sefds06vwx] { position: absolute; inset: -30% -10% auto -10%; height: 900px; z-index: -2; pointer-events: none;
    background: radial-gradient(52% 44% at 30% 10%, rgba(77,157,224,0.22) 0%, rgba(77,157,224,0.06) 46%, rgba(77,157,224,0) 72%), radial-gradient(34% 40% at 88% 60%, rgba(123,111,212,0.16) 0%, rgba(123,111,212,0) 70%), radial-gradient(30% 34% at 6% 70%, rgba(255,159,10,0.10) 0%, rgba(255,159,10,0) 70%); }
  .hero-in[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 560px; }
  .hero-copy[b-sefds06vwx] { position: relative; z-index: 2; }
  .hero h1[b-sefds06vwx] { max-width: 11ch; margin: 22px 0 26px; }
  .hero h1 .warm[b-sefds06vwx] { color: var(--blue); }
  .hero h1 .warm .wd:nth-child(2)[b-sefds06vwx] { color: #3a67d0; }
  .hero h1 .warm .wd:nth-child(3)[b-sefds06vwx] { color: #5f6cd3; }
  .hero h1 .warm .wd:nth-child(4)[b-sefds06vwx] { color: var(--purple); }
  .hero-cta[b-sefds06vwx] { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 34px; }
  .ask-band[b-sefds06vwx] { position: relative; z-index: 2; margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 32px; align-items: center; padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--e3); }
  .ask-h[b-sefds06vwx] { font-weight: 700; font-size: clamp(22px, 2vw, 27px); letter-spacing: 0; line-height: 1.12; margin: 12px 0 8px; text-wrap: balance; }
  .ask-copy p:not(.lp-tag)[b-sefds06vwx] { color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 44ch; }
  .hero-ask[b-sefds06vwx] { display: flex; align-items: stretch; gap: 6px; padding: 6px; background: #fff; border: 1px solid #c9ccd2; border-radius: 5px; box-shadow: 0 0 0 6px rgba(11,92,202,0.07), var(--e3); transition: border-color .2s ease, box-shadow .2s ease; }
  .hero-ask:focus-within[b-sefds06vwx] { border-color: var(--blue); box-shadow: 0 0 0 6px rgba(11,92,202,0.14), var(--e3); }
  .hero-ask input[b-sefds06vwx] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; padding: 0 16px; color: var(--ink); }
  .hero-ask input[b-sefds06vwx]::placeholder { color: var(--muted); }
  .hero-ask input:focus[b-sefds06vwx] { outline: none; }
  .hero-ask .btn[b-sefds06vwx] { flex-shrink: 0; border-radius: 3px; }
  .lock[b-sefds06vwx] { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); font-weight: 500; }

  /* no mask on the wall: a mask forces Chrome to re-render the whole moving
     wall every frame (measured 30ms/frame). The fades are painted overlays
     in the ground colour instead, which composite for free. */
  .wall-wrap[b-sefds06vwx] { position: absolute; inset: 0 0 420px 0; z-index: -1; pointer-events: none; overflow: clip; }
  /* the wall is cut clean at the top edge of the hero (under the mast) and on its left;
     only its bottom dissolves into the ground before the strip */
  .wall-wrap[b-sefds06vwx]::after { content: ""; position: absolute; z-index: 2; pointer-events: none; inset: 0; background: linear-gradient(to bottom, rgba(245,245,247,0) 0, rgba(245,245,247,0) calc(100% - 160px), var(--ground) 100%); }
  .hero-light[b-sefds06vwx] { z-index: 0; }
  /* the wall starts 48px right of the headline's own width (shell edge + pad 44 +
     11ch of the clamped display size, which is 46.4vw until it caps at 670px) and
     narrows its columns on smaller windows so three columns always show */
  .wall[b-sefds06vwx] { --cw: 216px; position: absolute; left: calc(max(0px, (100% - 1240px) / 2) + 88px + min(46.4vw, 670px)); top: -18%; width: calc(var(--cw) * 3 + 40px); height: 136%; display: flex; gap: 20px; align-items: flex-start;
    transform: perspective(1500px) rotateX(14deg) rotateY(-9deg) rotateZ(-7deg); transform-origin: 60% 45%; }
  .wcol[b-sefds06vwx] { display: flex; flex-direction: column; width: var(--cw); flex-shrink: 0; animation: wup-b-sefds06vwx 52s linear infinite; will-change: transform; }
  .wcol.down[b-sefds06vwx] { animation-name: wdown-b-sefds06vwx; animation-duration: 44s; }
  .wcol.slow[b-sefds06vwx] { animation-duration: 58s; }
  .wcol:nth-child(2)[b-sefds06vwx] { margin-top: -140px; }
  .wset[b-sefds06vwx] { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; }
  @keyframes wup-b-sefds06vwx { to { transform: translateY(-50%); } }
  @keyframes wdown-b-sefds06vwx { from { transform: translateY(-50%); } to { transform: none; } }
  .wall-row[b-sefds06vwx] { display: none; }

  /* ---------- the post card ---------- */
  .pc[b-sefds06vwx] { position: relative; width: 100%; background: #fff; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; contain: paint; font-size: 12px; color: var(--ink); line-height: 1.35; box-shadow: 0 8px 18px rgba(13,27,46,.08), 0 30px 60px -24px rgba(13,27,46,.22); flex-shrink: 0; }
  .pc-head[b-sefds06vwx] { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
  .pc-av[b-sefds06vwx] { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; padding: 2px; background: conic-gradient(from 200deg, #4d9de0, #7b6fd4, #ff9f0a, #4d9de0); }
  .pc-av i[b-sefds06vwx] { display: block; width: 100%; height: 100%; border-radius: 50%; background: #dfe3ea; box-shadow: inset 0 0 0 2px #fff; }
  .pc-name[b-sefds06vwx] { font-weight: 700; font-size: 12px; letter-spacing: 0; }
  .pc-name small[b-sefds06vwx] { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
  .pc-more[b-sefds06vwx] { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
  .pc-more svg[b-sefds06vwx] { width: 100%; height: 100%; }
  .pimg[b-sefds06vwx] { display: block; width: 100%; aspect-ratio: var(--ar, 1); background-size: cover; background-position: center; }
  .pc-acts[b-sefds06vwx] { display: flex; gap: 12px; padding: 10px 12px 6px; }
  .pc-acts svg[b-sefds06vwx] { width: 18px; height: 18px; }
  .pc-acts .r[b-sefds06vwx] { margin-left: auto; display: inline-flex; }
  .pc-lines[b-sefds06vwx] { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
  .pc-lines i[b-sefds06vwx] { display: block; height: 8px; border-radius: 4px; background: #e7eaef; }
  .pc-lines i:last-child[b-sefds06vwx] { width: 62%; }
  .pc-react[b-sefds06vwx] { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; }
  .pc-react i[b-sefds06vwx] { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; }
  .pc-react i + i[b-sefds06vwx] { margin-left: -8px; background: #ff2d55; }
  .pc-react i + i + i[b-sefds06vwx] { background: var(--orange); }
  .pc-react em[b-sefds06vwx] { display: block; height: 8px; width: 56px; border-radius: 4px; background: #e7eaef; }
  .pc-cap[b-sefds06vwx] { padding: 0 12px 10px; font-size: 12.5px; line-height: 1.45; }
  .pc-cap.dim[b-sefds06vwx] { color: var(--muted); padding-bottom: 12px; }
  .pc-cap.clamp[b-sefds06vwx] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; padding-bottom: 12px; }
  .pc-likes[b-sefds06vwx] { padding: 0 12px 4px; font-size: 12px; font-weight: 700; }
  .pc-head + .pc-cap.clamp[b-sefds06vwx] { padding-top: 0; padding-bottom: 8px; }
  .pc-reel[b-sefds06vwx], .pc-story[b-sefds06vwx] { aspect-ratio: 9 / 16; background: #0d1b2e; border: none; }
  .pc-reel video[b-sefds06vwx], .pc-story video[b-sefds06vwx] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pc-reel video[b-sefds06vwx] { object-position: 62% 50%; }  /* the square clip, cropped so the client and his reflection both stay in */
  .vstill[b-sefds06vwx] { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .v-salon[b-sefds06vwx] { background-image: var(--v-salon); background-position: 62% 50%; }
  .v-latte[b-sefds06vwx] { background-image: var(--v-latte); }
  .pc-reel[b-sefds06vwx]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
  .pc-story[b-sefds06vwx]::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); }
  .pc-rail[b-sefds06vwx] { position: absolute; right: 10px; bottom: 52px; display: flex; flex-direction: column; gap: 14px; color: #fff; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
  .pc-rail svg[b-sefds06vwx] { width: 22px; height: 22px; }
  .pc-reel .pc-name[b-sefds06vwx] { position: absolute; left: 12px; bottom: 30px; color: #fff; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
  .pc-reel .pc-name small[b-sefds06vwx] { color: rgba(255,255,255,.8); }
  .pc-bar[b-sefds06vwx] { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; z-index: 1; }
  .pc-bar[b-sefds06vwx]::after, .pc-seg i:not(.done)[b-sefds06vwx]::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; animation: play-b-sefds06vwx 3.4s linear infinite; }
  .pc-seg i:not(.done) + i[b-sefds06vwx]::after { animation: none; transform: scaleX(0); }
  @keyframes play-b-sefds06vwx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .pc-seg[b-sefds06vwx] { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; z-index: 1; }
  .pc-seg i[b-sefds06vwx] { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
  .pc-seg i.done[b-sefds06vwx] { background: #fff; }
  .pc-story .pc-head[b-sefds06vwx] { position: absolute; top: 12px; left: 2px; right: 2px; z-index: 1; color: #fff; }
  .pc-story .pc-name small[b-sefds06vwx], .pc-story .pc-more[b-sefds06vwx] { color: rgba(255,255,255,.8); }
  .pc-story .pc-av[b-sefds06vwx] { background: rgba(255,255,255,.6); }
  .pc-story .pc-av i[b-sefds06vwx] { background: rgba(255,255,255,.5); }
  .pc-grid[b-sefds06vwx] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
  .pc-grid i[b-sefds06vwx] { display: block; aspect-ratio: 1; background-size: cover; background-position: center; }
  .pc-lg[b-sefds06vwx] { width: 100%; max-width: 300px; font-size: 13px; }
  .pc-lg .pc-head[b-sefds06vwx] { padding: 12px 14px; }
  .pc-lg .pc-cap[b-sefds06vwx] { padding: 0 14px 10px; font-size: 13.5px; }
  .p-taki[b-sefds06vwx] { background-image: var(--c-taki); }
  .g-taki[b-sefds06vwx] { background-image: var(--g-taki); }
  .p-barber[b-sefds06vwx] { background-image: var(--c-barber); }
  .g-barber[b-sefds06vwx] { background-image: var(--g-barber); }
  .p-dave[b-sefds06vwx] { background-image: var(--c-dave); }
  .g-dave[b-sefds06vwx] { background-image: var(--g-dave); }
  .p-lawn[b-sefds06vwx] { background-image: var(--c-lawn); }
  .g-lawn[b-sefds06vwx] { background-image: var(--g-lawn); }
  .p-salon[b-sefds06vwx] { background-image: var(--c-salon); }
  .g-salon[b-sefds06vwx] { background-image: var(--g-salon); }
  .p-florist[b-sefds06vwx] { background-image: var(--c-florist); }
  .g-florist[b-sefds06vwx] { background-image: var(--g-florist); }
  .p-mechanic[b-sefds06vwx] { background-image: var(--c-mechanic); }
  .g-mechanic[b-sefds06vwx] { background-image: var(--g-mechanic); }
  .p-physio[b-sefds06vwx] { background-image: var(--c-physio); }
  .g-physio[b-sefds06vwx] { background-image: var(--g-physio); }
  .p-bakery[b-sefds06vwx] { background-image: var(--c-bakery); }
  .g-bakery[b-sefds06vwx] { background-image: var(--g-bakery); }
  .p-studio[b-sefds06vwx] { background-image: var(--c-studio); }
  .g-studio[b-sefds06vwx] { background-image: var(--g-studio); }
  .p-pizza[b-sefds06vwx] { background-image: var(--c-pizza); }
  .g-pizza[b-sefds06vwx] { background-image: var(--g-pizza); }
  .p-coffee[b-sefds06vwx] { background-image: var(--c-coffee); }
  .g-coffee[b-sefds06vwx] { background-image: var(--g-coffee); }
  .p-hotwater[b-sefds06vwx] { background-image: var(--c-hotwater); }
  .g-hotwater[b-sefds06vwx] { background-image: var(--g-hotwater); }
  .p-van[b-sefds06vwx] { background-image: var(--c-van); }
  .g-van[b-sefds06vwx] { background-image: var(--g-van); }

  /* =========================================================
     ACT 2 — the problem, as stacked cards with a scene in each
     ========================================================= */
  .problem[b-sefds06vwx] { padding: 92px 0 24px; }
  .problem-head[b-sefds06vwx] { display: grid; padding: 12px 0 30px; grid-template-columns: minmax(0, 1fr) 540px; gap: 48px; align-items: start; }
  /* what owners actually say, as the messages they send us */
  .voices[b-sefds06vwx] { position: relative; height: 320px; }
  .voice[b-sefds06vwx] { position: absolute; display: flex; align-items: flex-start; gap: 10px; max-width: 330px; padding: 10px 14px 10px 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; border-bottom-left-radius: 4px; box-shadow: var(--e2); font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
  .voice i[b-sefds06vwx] { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(13,27,46,.2); }
  .voice small[b-sefds06vwx] { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }
  .voice.v1[b-sefds06vwx] { left: 0; top: 0; transform: rotate(-1.5deg); }
  .voice.v2[b-sefds06vwx] { right: 0; top: 72px; transform: rotate(1deg); }
  .voice.v3[b-sefds06vwx] { left: 30px; top: 158px; transform: rotate(-1deg); background: var(--pill); }
  .voice.v4[b-sefds06vwx] { right: 20px; top: 240px; transform: rotate(1.5deg); }
  .js-reveal .voice.rv[b-sefds06vwx] { transform: translateY(26px); }
  .js-reveal .voice.rv.in.v1[b-sefds06vwx] { transform: rotate(-1.5deg); }
  .js-reveal .voice.rv.in.v2[b-sefds06vwx] { transform: rotate(1deg); }
  .js-reveal .voice.rv.in.v3[b-sefds06vwx] { transform: rotate(-1deg); }
  .js-reveal .voice.rv.in.v4[b-sefds06vwx] { transform: rotate(1.5deg); }
  [data-stack][b-sefds06vwx] { --stack-top: 116px; display: flex; flex-direction: column; gap: 18px; }
  [data-stack] > :nth-child(2)[b-sefds06vwx] { --i: 1; }
  [data-stack] > :nth-child(3)[b-sefds06vwx] { --i: 2; }
  [data-stack] > :nth-child(4)[b-sefds06vwx] { --i: 3; }
  [data-stack] > *[b-sefds06vwx] { position: sticky; top: calc(var(--stack-top) + var(--i, 0) * 12px); transform: translateY(calc(var(--sc-p, 0) * -24px)) scale(calc(1 - var(--sc-p, 0) * .05)); transform-origin: 50% 0; filter: blur(calc(var(--sc-p, 0) * 4px)); will-change: transform, filter; }
  [data-stack] > *[b-sefds06vwx]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: var(--ground); opacity: calc(var(--sc-p, 0) * .6); }
  .problem-head[b-sefds06vwx]::before { inset: -20px; }
  [data-stack][b-sefds06vwx]::after { content: ""; flex: none; height: 48px; }
  .stack-flat > *[b-sefds06vwx] { position: relative !important; top: 0 !important; transform: none !important; filter: none !important; }
  .stack-flat > *[b-sefds06vwx]::before { display: none; }
  .problem-lead[b-sefds06vwx] { margin-top: 18px; }
  .field[b-sefds06vwx] { --halo: rgba(77,157,224,0.16); --acc: #8a8d95; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; border-radius: 3px; padding: 44px 48px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--e3); transition: clip-path 1.05s cubic-bezier(.16,1,.3,1); }
  .field:nth-of-type(2)[b-sefds06vwx] { --halo: rgba(11,92,202,0.14); --acc: var(--blue); }
  .field:nth-of-type(3)[b-sefds06vwx] { --halo: rgba(255,159,10,0.2); --acc: var(--amber); }
  .js-reveal .field[b-sefds06vwx] { clip-path: inset(0 100% 0 0); }
  .js-reveal .field.in[b-sefds06vwx] { clip-path: inset(0 0 0 0); }
  .field:nth-of-type(2)[b-sefds06vwx] { background: var(--pill); }
  .field:nth-of-type(3)[b-sefds06vwx] { background: #fff7ec; }
  .field q[b-sefds06vwx] { display: block; quotes: none; font-weight: 800; letter-spacing: 0; line-height: 1.02; font-size: clamp(28px, 3.6vw, 50px); margin-bottom: 18px; }
  .field p[b-sefds06vwx] { color: var(--muted); font-size: clamp(16px,1.2vw,18px); line-height: 1.58; max-width: 48ch; }
  .field:nth-of-type(2) q[b-sefds06vwx] { color: var(--blue); }
  .field:nth-of-type(3) q[b-sefds06vwx] { color: var(--amber); }
  .scene[b-sefds06vwx] { position: relative; min-height: 380px; display: grid; place-items: center; }
  .scene[b-sefds06vwx]::before { content: ""; position: absolute; inset: 4% -6%; border-radius: 50%; background: radial-gradient(closest-side, var(--halo), rgba(255,255,255,0)); z-index: 0; }
  .scene > *[b-sefds06vwx] { position: relative; z-index: 1; }
  .chip[b-sefds06vwx] { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--muted); box-shadow: var(--e2); white-space: nowrap; }
  .chip b[b-sefds06vwx] { color: var(--ink); font-weight: 700; }
  .chip small[b-sefds06vwx] { display: block; font-size: 11px; }
  /* the phone: a composer with nothing in it */
  .phone[b-sefds06vwx] { width: 210px; aspect-ratio: 9 / 18.6; border-radius: 30px; background: #0f1216; padding: 9px; box-shadow: 0 30px 60px -20px rgba(13,27,46,.45), 0 0 0 1px rgba(0,0,0,.4); transform: rotate(-4deg); }
  .screen[b-sefds06vwx] { height: 100%; border-radius: 22px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
  .ph-status[b-sefds06vwx] { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 0; font-size: 11px; font-weight: 700; }
  .ph-status i[b-sefds06vwx] { width: 18px; height: 8px; border-radius: 3px; border: 1px solid var(--ink); background: linear-gradient(to right, var(--ink) 30%, transparent 30%); }
  .ph-top[b-sefds06vwx] { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 10px; font-size: 12px; font-weight: 600; }
  .ph-top b[b-sefds06vwx] { color: var(--blue); }
  .ph-pick[b-sefds06vwx] { margin: 0 10px; border-radius: 8px; }
  .ph-cap[b-sefds06vwx] { margin: 10px 10px 0; padding: 9px 10px; border-radius: 8px; background: var(--ground); font-size: 11px; color: #9a9da5; display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
  .ph-cap s[b-sefds06vwx] { color: #9a9da5; text-decoration: line-through; text-decoration-color: #b8bcc4; text-decoration-thickness: 1px; }
  .caret[b-sefds06vwx] { display: inline-block; width: 1.5px; height: 13px; background: var(--ink); animation: blink-b-sefds06vwx 1s steps(2) infinite; margin-top: 2px; }
  @keyframes blink-b-sefds06vwx { 50% { opacity: 0; } }
  .ph-tools[b-sefds06vwx] { display: flex; gap: 8px; padding: 12px 10px; margin-top: auto; }
  .ph-tools i[b-sefds06vwx] { width: 22px; height: 22px; border-radius: 6px; background: var(--ground); }
  .lp-chip-time[b-sefds06vwx] { right: -8px; top: 104px; }
  /* the calendar with holes in it */
  .cal[b-sefds06vwx] { width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 16px; box-shadow: var(--e3); transform: rotate(2deg); }
  .cal-head[b-sefds06vwx] { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
  .cal-head span[b-sefds06vwx] { color: var(--muted); }
  .lp-cal-days[b-sefds06vwx] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
  .lp-cal-days i[b-sefds06vwx] { font-style: normal; font-size: 10px; text-align: center; color: var(--muted); font-weight: 600; }
  .lp-cal-grid[b-sefds06vwx] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .lp-cal-grid i[b-sefds06vwx] { display: block; aspect-ratio: 1; border-radius: 5px; background: #eef0f3; background-size: cover; background-position: center; }
  .lp-cal-grid i.today[b-sefds06vwx] { box-shadow: inset 0 0 0 2px var(--blue); background: #fff; }
  .chip-gap[b-sefds06vwx] { right: -8px; top: 14px; }
  .notif[b-sefds06vwx] { position: absolute; left: -16px; bottom: 30px; z-index: 2; width: 236px; display: flex; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--e3); font-size: 12px; line-height: 1.35; transform: rotate(-2deg); }
  .notif-ic[b-sefds06vwx] { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); flex-shrink: 0; }
  .notif > div[b-sefds06vwx] { min-width: 0; }
  .notif b[b-sefds06vwx] { font-size: 12px; }
  .notif span[b-sefds06vwx] { float: right; color: var(--muted); font-size: 11px; }
  .notif p[b-sefds06vwx] { color: var(--ink); margin-top: 2px; }
  /* the post nobody saw */
  .scene-crickets .pc-lg[b-sefds06vwx] { transform: rotate(-3deg); max-width: 272px; }
  .pc-ig .pc-name[b-sefds06vwx] { font-size: 12.5px; }
  .pc-ig .pc-cap[b-sefds06vwx] { font-size: 12.5px; padding-bottom: 6px; }
  .pc-ig .pc-cap + .pc-cap[b-sefds06vwx] { padding-top: 0; }
  .pc-ig .tags[b-sefds06vwx] { color: #1c4f8f; }
  .pc-own[b-sefds06vwx] { display: flex; justify-content: space-between; align-items: center; margin: 6px 14px 0; padding: 10px 0 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  .pc-own b[b-sefds06vwx] { color: #fff; background: var(--blue); font-weight: 600; padding: 5px 12px; border-radius: 6px; }
  .pc-cap.tiny[b-sefds06vwx] { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0; padding: 4px 14px 12px; }
  .pc-acts.liked svg:first-child[b-sefds06vwx] { fill: #ff2d55; stroke: #ff2d55; }

  /* =========================================================
     ACT 3 — the solution: sticky thesis with a phone, stacked steps
     with the product inside each card
     ========================================================= */
  .change[b-sefds06vwx] { padding: 120px 0 120px; position: relative; }
  .change-in[b-sefds06vwx] { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 72px; align-items: start; }
  .change-thesis[b-sefds06vwx] { position: sticky; top: 105px; }
  .change-thesis h2[b-sefds06vwx] { margin: 24px 0 0; }
  .thesis-phone[b-sefds06vwx] { margin-top: 40px; width: 220px; transform: rotate(-5deg); }
  .thesis-phone .pc-story[b-sefds06vwx] { border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(13,27,46,.45); }
  .steps[b-sefds06vwx] { --stack-top: 118px; }
  .lp-step[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 36px; align-items: center; padding: 40px 42px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; box-shadow: var(--e3); }
  .lp-step:nth-child(2)[b-sefds06vwx] { background: var(--pill); }
  .lp-step h3[b-sefds06vwx] { margin: 14px 0 14px; }
  .lp-step p[b-sefds06vwx] { color: var(--muted); font-size: 16.5px; line-height: 1.62; max-width: 46ch; }
  .mock[b-sefds06vwx] { position: relative; }
  .mock-snap[b-sefds06vwx] { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e3); padding: 14px 16px 6px; transform: rotate(2deg); font-size: 13px; }
  .mk-head[b-sefds06vwx] { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .mk-head > b[b-sefds06vwx] { font-size: 14px; }
  .mk-row[b-sefds06vwx] { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .mk-row:last-child[b-sefds06vwx] { border-bottom: none; }
  .mk-row small[b-sefds06vwx] { font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--muted); }
  .mk-row b[b-sefds06vwx] { font-weight: 600; font-size: 13px; line-height: 1.35; }
  .mock-post[b-sefds06vwx] { transform: rotate(-2deg); width: 100%; max-width: 288px; margin: 0 auto; }
  .mock-post .pc-lg[b-sefds06vwx] { max-width: none; }
  .mock-week[b-sefds06vwx] { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e3); padding: 14px 16px 12px; transform: rotate(-2deg); font-size: 13px; }
  .wk[b-sefds06vwx] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
  .wk-day span[b-sefds06vwx] { display: block; text-align: center; font-size: 10px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
  .wk-day i[b-sefds06vwx] { display: block; aspect-ratio: 1 / 1.3; border-radius: 6px; background-color: #eef0f3; background-size: cover; background-position: center; position: relative; }
  .wk-day i b[b-sefds06vwx] { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
  .wk-day i b svg[b-sefds06vwx] { width: 9px; height: 9px; }
  .mk-foot[b-sefds06vwx] { margin-top: 12px; font-size: 12px; color: var(--muted); }

  /* =========================================================
     The business advisor: free on every plan, with a sample
     conversation drawn as the app draws it
     ========================================================= */
  .adv[b-sefds06vwx] { padding: 40px 0 150px; position: relative; }
  .adv-in[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; align-items: center; }
  .adv-pill[b-sefds06vwx] { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--pill); color: var(--blue); font-size: 13px; font-weight: 700; }
  .adv h2[b-sefds06vwx] { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -0.015em; margin: 18px 0 18px; max-width: 18ch; }
  .adv-sub[b-sefds06vwx] { color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 48ch; margin: 0 0 28px; }
  .adv-points[b-sefds06vwx] { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 52ch; }
  .adv-points li[b-sefds06vwx] { position: relative; padding-left: 30px; color: var(--muted); font-size: 16px; line-height: 1.55; }
  .adv-points li[b-sefds06vwx]::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
  .adv-points b[b-sefds06vwx] { color: var(--ink); font-weight: 700; }
  .adv-chat[b-sefds06vwx] { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--e3); padding: 22px 22px 16px; font-size: 14.5px; line-height: 1.55; }
  .adv-q[b-sefds06vwx] { margin: 0 0 18px auto; max-width: 82%; width: fit-content; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--pill); color: var(--ink); }
  .adv-a[b-sefds06vwx] { border-left: 2px solid var(--line); padding-left: 14px; }
  .adv-who[b-sefds06vwx] { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
  .adv-a p[b-sefds06vwx] { margin: 0 0 10px; }
  .adv-a ul[b-sefds06vwx] { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; }
  .adv-src[b-sefds06vwx] { font-size: 12.5px; color: var(--muted); }
  .adv-src span[b-sefds06vwx] { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
  .adv-chat figcaption[b-sefds06vwx] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  @media (max-width: 1120px) {
    .adv-in[b-sefds06vwx] { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; }
    .adv-chat[b-sefds06vwx] { padding: 18px 18px 14px; font-size: 14px; }
  }
  @media (max-width: 900px) {
    .adv-in[b-sefds06vwx] { grid-template-columns: 1fr; }
    .adv-chat[b-sefds06vwx] { max-width: 560px; }
  }
  @media (max-width: 760px) {
    .adv[b-sefds06vwx] { padding: 8px 0 110px; }
    .adv h2[b-sefds06vwx] { font-size: 30px; line-height: 1.16; }
    .adv-chat[b-sefds06vwx] { padding: 18px 16px 14px; font-size: 14px; }
    .adv-q[b-sefds06vwx] { max-width: 92%; }
  }

  /* =========================================================
     ACT 4 — the inversion: white ground, the form
     ========================================================= */
  .invert[b-sefds06vwx] { background: var(--surface); color: var(--ink); position: relative; }
  .invert[b-sefds06vwx]::before { content: ""; position: absolute; top: -110px; left: 0; right: 0; height: 110px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.94) 91%, #fff 100%); }
  .signup[b-sefds06vwx] { padding: 84px 0 84px; position: relative; overflow: clip; }
  .signup-glow[b-sefds06vwx] { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 70% at 74% 42%, rgba(77,157,224,0.16) 0%, rgba(77,157,224,0.05) 50%, rgba(77,157,224,0) 78%), radial-gradient(30% 46% at 92% 90%, rgba(123,111,212,0.12), rgba(123,111,212,0) 70%), radial-gradient(28% 40% at 8% 12%, rgba(255,159,10,0.09), rgba(255,159,10,0) 70%); }
  .signup-in[b-sefds06vwx] { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0,1fr); gap: 64px; align-items: start; }
  .signup-lead[b-sefds06vwx] { position: sticky; top: 105px; }
  .signup h2[b-sefds06vwx] { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; letter-spacing: 0; margin: 22px 0 18px; }
  .signup-note[b-sefds06vwx] { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 30em; }
  .card-form[b-sefds06vwx] { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 34px 36px 32px; box-shadow: var(--e3); }
  .grid-f[b-sefds06vwx] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .wide[b-sefds06vwx] { grid-column: 1 / -1; }
  .fl label[b-sefds06vwx] { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
  .fl label i[b-sefds06vwx] { font-style: normal; font-weight: 400; color: var(--muted); }
  .fl input[b-sefds06vwx], .fl textarea[b-sefds06vwx] { display: block; width: 100%; height: 50px; padding: 0 14px; font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--ink); background: #fff; border: 1.5px solid #8f96a3; border-radius: 3px; transition: border-color .18s ease, box-shadow .18s ease; }
  .fl textarea[b-sefds06vwx] { height: auto; min-height: 74px; padding: 12px 14px; resize: vertical; }
  .fl input[b-sefds06vwx]::placeholder, .fl textarea[b-sefds06vwx]::placeholder { color: var(--muted); }
  .fl input:hover[b-sefds06vwx], .fl textarea:hover[b-sefds06vwx] { border-color: var(--ink); }
  .fl input:focus[b-sefds06vwx], .fl textarea:focus[b-sefds06vwx] { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,92,202,0.18); }
  .fl input[aria-invalid="true"][b-sefds06vwx], .fl textarea[aria-invalid="true"][b-sefds06vwx] { border-color: var(--red); }
  .fl .err[b-sefds06vwx] { display: none; margin-top: 6px; font-size: 13px; color: var(--red); font-weight: 500; }
  .fl.bad .err[b-sefds06vwx] { display: block; }
  .signup-act[b-sefds06vwx] { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 4px; }
  .signup-act .btn[b-sefds06vwx] { width: 100%; }
  .status[b-sefds06vwx] { min-height: 20px; font-size: 14px; color: var(--muted); text-align: center; }
  .status.bad[b-sefds06vwx] { color: var(--red); font-weight: 500; }
  .status.ok[b-sefds06vwx] { color: #1f9d45; font-weight: 500; }
  .status.notice[b-sefds06vwx] { color: var(--ink); font-weight: 500; }
  .status.carried[b-sefds06vwx] { min-height: 0; margin: 0 0 18px; text-align: left; line-height: 1.5; }
  .signup-act .lock[b-sefds06vwx] { justify-content: center; }
  .how[b-sefds06vwx] { font-size: 13.5px; color: var(--muted); text-align: center; }
  .done[b-sefds06vwx] { display: none; padding: 12px 4px 4px; }
  .done h3[b-sefds06vwx] { margin-bottom: 12px; }
  .done h3[b-sefds06vwx]::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--green); margin-right: 10px; }
  .done p[b-sefds06vwx] { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 48ch; }
  .done ol[b-sefds06vwx] { margin: 18px 0 0; padding-left: 20px; color: var(--ink); font-size: 15px; line-height: 1.7; }
  .card-form.is-done .grid-f[b-sefds06vwx] { display: none; }
  .card-form.is-done .done[b-sefds06vwx] { display: block; }

  /* pricing as a ledger */
  .rates[b-sefds06vwx] { padding: 72px 0 104px; }
  .rates-head[b-sefds06vwx] { max-width: 700px; margin-bottom: 44px; }
  .rates-head h2[b-sefds06vwx] { margin: 22px 0 18px; }
  .rates-head p:not(.lp-tag)[b-sefds06vwx] { color: var(--muted); font-size: 17.5px; line-height: 1.58; }
  /* four plans side by side; Starter is the one we want people to click,
     so it is lifted, bordered in blue, and carries the only filled button */
  .plans[b-sefds06vwx] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .plan[b-sefds06vwx] { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--e1); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .2s ease; }
  .plan:hover[b-sefds06vwx] { transform: translateY(-4px); box-shadow: var(--e2); border-color: #c9ccd2; }
  .plan-hot[b-sefds06vwx] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 0 6px rgba(11,92,202,0.08), var(--e3); transform: translateY(-10px); background: linear-gradient(to bottom, #f4f8fe 0, #fff 120px); }
  .plan-hot:hover[b-sefds06vwx] { transform: translateY(-14px); box-shadow: 0 0 0 1px var(--blue), 0 0 0 6px rgba(11,92,202,0.12), var(--e3); }
  .plan-top[b-sefds06vwx] { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
  .lp-plan-name[b-sefds06vwx] { font-weight: 700; font-size: 18px; letter-spacing: 0; }
  .plan-pill[b-sefds06vwx] { font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; background: var(--blue); color: #fff; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
  .lp-plan-price[b-sefds06vwx] { margin: 18px 0 10px; line-height: 1; }
  .lp-plan-price b[b-sefds06vwx] { font-weight: 800; font-size: 40px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .lp-plan-price i[b-sefds06vwx] { font-style: normal; font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 2px; }
  .lp-plan-price small[b-sefds06vwx] { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
  .plan-desc[b-sefds06vwx] { font-size: 14.5px; line-height: 1.5; color: var(--muted); min-height: 66px; }
  .lp-plan-price small[b-sefds06vwx] { min-height: 15px; }
  .plan-feat[b-sefds06vwx] { list-style: none; margin: 16px 0 22px; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 500; line-height: 1.4; }
  .plan-feat li[b-sefds06vwx] { display: flex; align-items: flex-start; gap: 9px; }
  .plan-feat svg[b-sefds06vwx] { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: #1f9d45; }
  .plan-hot .plan-feat svg[b-sefds06vwx] { color: var(--blue); }
  .plan .btn[b-sefds06vwx] { margin-top: auto; width: 100%; padding: 10px 12px; min-height: 60px; font-size: 14.5px; line-height: 1.3; white-space: normal; text-wrap: balance; }

  /* questions: a small, quiet header that stays put on the left while the
     answers scroll on the right; numbered, grouped, first one open */
  .qa-sec[b-sefds06vwx] { padding: 12px 0 112px; }
  .qa-in[b-sefds06vwx] { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 80px; align-items: start; }
  .qa-head[b-sefds06vwx] { position: sticky; top: 105px; }
  .qa-head h2[b-sefds06vwx] { margin: 18px 0 14px; font-weight: 700; font-size: clamp(26px, 2.5vw, 34px); letter-spacing: 0; line-height: 1.1; text-wrap: balance; }
  .qa-lead[b-sefds06vwx] { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 28em; }
  .qa-group + .qa-group[b-sefds06vwx] { margin-top: 36px; }
  .qa-label[b-sefds06vwx] { font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .qa[b-sefds06vwx] { border-bottom: 1px solid var(--line); }
  .qa summary[b-sefds06vwx] { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; align-items: center; gap: 14px; padding: 18px 0; font-weight: 600; font-size: 17px; letter-spacing: 0; line-height: 1.35; transition: color .18s ease; }
  .qa summary[b-sefds06vwx]::-webkit-details-marker { display: none; }
  .qa summary:hover[b-sefds06vwx], .qa[open] summary[b-sefds06vwx] { color: var(--blue); }
  .qa-n[b-sefds06vwx] { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 0; transition: color .18s ease; }
  .qa[open] .qa-n[b-sefds06vwx] { color: var(--blue); }
  .qa summary i[b-sefds06vwx] { font-style: normal; width: 26px; height: 26px; position: relative; border-radius: 50%; transition: background .22s ease, transform .3s cubic-bezier(.16,1,.3,1); }
  .qa summary i[b-sefds06vwx]::before, .qa summary i[b-sefds06vwx]::after { content: ""; position: absolute; inset: 50% 8px auto 8px; height: 1.5px; background: currentColor; transform: translateY(-50%); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
  .qa summary i[b-sefds06vwx]::after { transform: translateY(-50%) rotate(90deg); }
  .qa summary:hover i[b-sefds06vwx] { background: var(--pill); }
  .qa[open] summary i[b-sefds06vwx] { background: var(--pill); }
  .qa[open] summary i[b-sefds06vwx]::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
  .qa-body[b-sefds06vwx] { overflow: hidden; }
  .qa-inner[b-sefds06vwx] { padding: 0 40px 22px 48px; }
  .qa-inner p[b-sefds06vwx] { color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 62ch; }
  .qa summary:focus-visible[b-sefds06vwx] { outline: none; }
  .qa summary:focus-visible .qa-q[b-sefds06vwx] { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
  /* =========================================================
     ACT 5 — the close, and the floor of posts under it
     ========================================================= */
  .close[b-sefds06vwx] { position: relative; padding: 72px 0 34px; overflow: clip; }
  .close[b-sefds06vwx]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(64% 96% at 50% 122%, rgba(77,157,224,0.26) 0%, rgba(77,157,224,0.07) 46%, rgba(77,157,224,0) 74%), radial-gradient(40% 60% at 12% 0%, rgba(123,111,212,0.16), rgba(123,111,212,0) 70%), radial-gradient(30% 50% at 92% 20%, rgba(255,159,10,0.10), rgba(255,159,10,0) 70%); }
  .close-in[b-sefds06vwx] { position: relative; z-index: 3; margin-top: -150px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .close-line[b-sefds06vwx] { color: var(--ink); font-weight: 600; letter-spacing: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; margin: 0 0 26px; max-width: 26ch; text-wrap: balance; }
  .floor[b-sefds06vwx] { position: relative; margin: 0; height: 420px; overflow: clip; }
  .floor-stage[b-sefds06vwx] { position: absolute; inset: 0; perspective: 1100px; }
  .floor[b-sefds06vwx]::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, var(--ground), rgba(245,245,247,0) 14%, rgba(245,245,247,0) 86%, var(--ground)); }
  .floor[b-sefds06vwx]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 290px; background: linear-gradient(to top, var(--ground) 46%, rgba(245,245,247,0)); z-index: 2; }
  .floor-track[b-sefds06vwx] { position: absolute; left: 0; top: 30px; display: flex; width: max-content; transform: rotateX(34deg); transform-origin: 50% 0; animation: floorslide-b-sefds06vwx 80s linear infinite; }
  .floor-track .wset[b-sefds06vwx] { flex-direction: row; gap: 26px; padding: 0 26px 0 0; align-items: flex-start; }
  .floor-track .pc[b-sefds06vwx] { width: 220px; }
  .floor-track .wset > :nth-child(even)[b-sefds06vwx] { margin-top: 40px; }
  @keyframes floorslide-b-sefds06vwx { to { transform: rotateX(34deg) translateX(-50%); } }
  .foot-in[b-sefds06vwx] { position: relative; z-index: 3; margin-top: 72px; font-size: 14.5px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; }
  .foot-links[b-sefds06vwx] { display: flex; gap: 6px; margin-right: -8px; margin-left: auto; }
  .foot-links a[b-sefds06vwx] { color: inherit; padding: 12px 8px; transition: color .15s ease; }
  .foot-links a:hover[b-sefds06vwx] { color: var(--blue); }

  /* the phone-only sticky action bar */
  .cta-bar[b-sefds06vwx] { display: none; }

  /* =========================================================
     motion
     ========================================================= */
  .rv[b-sefds06vwx] { transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
  .js-reveal .rv[b-sefds06vwx] { opacity: 0; transform: translateY(26px); }
  .js-reveal .rv.in[b-sefds06vwx] { opacity: 1; transform: none; }
  .d1[b-sefds06vwx] { transition-delay: .1s; } .d2[b-sefds06vwx] { transition-delay: .2s; } .d3[b-sefds06vwx] { transition-delay: .3s; } .d4[b-sefds06vwx] { transition-delay: .4s; }
  .wd[b-sefds06vwx] { display: inline-block; transition: opacity .82s cubic-bezier(.16,1,.3,1), filter .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1); }
  .js-reveal .wd[b-sefds06vwx] { opacity: 0; filter: blur(9px); transform: translateY(0.4em); }
  .js-reveal .lit .wd[b-sefds06vwx] { opacity: 1; filter: blur(0); transform: none; }
  @media (prefers-reduced-motion: reduce) {
.lp *[b-sefds06vwx], .lp *[b-sefds06vwx]::before, .lp *[b-sefds06vwx]::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .rv[b-sefds06vwx] { opacity: 1; transform: none; }
    .wd[b-sefds06vwx] { opacity: 1; filter: none; transform: none; }
    .field[b-sefds06vwx] { clip-path: none; }
    [data-stack] > *[b-sefds06vwx] { position: relative; top: 0; transform: none; filter: none; }
    [data-stack] > *[b-sefds06vwx]::before { display: none; }
    .wcol[b-sefds06vwx], .floor-track[b-sefds06vwx], .caret[b-sefds06vwx], .pc-bar[b-sefds06vwx]::after, .pc-seg i[b-sefds06vwx]::after { animation: none !important; }
    .floor-track[b-sefds06vwx] { transform: rotateX(34deg); }
    .btn:hover[b-sefds06vwx], .btn:active[b-sefds06vwx] { transform: none; }
  }

  /* =========================================================
     responsive
     ========================================================= */
  @media (max-width: 1600px) { .wall[b-sefds06vwx] { --cw: 200px; } }
  @media (max-width: 1480px) { .wall[b-sefds06vwx] { --cw: 184px; } }
  @media (max-width: 1360px) { .wall[b-sefds06vwx] { --cw: 176px; } }
  @media (max-width: 1240px) { .wall[b-sefds06vwx] { --cw: 164px; } }
  @media (max-width: 1120px) {
    .hero-in[b-sefds06vwx] { grid-template-columns: 1fr; min-height: 0; }
    .hero h1[b-sefds06vwx] { max-width: 14ch; }
    .wall-wrap[b-sefds06vwx] { display: none; }
    .wall-row[b-sefds06vwx] { display: block; position: relative; margin: 44px calc(-1 * var(--pad)) 0; overflow: clip; }
    .wall-row[b-sefds06vwx]::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, var(--ground), rgba(245,245,247,0) 8%, rgba(245,245,247,0) 92%, var(--ground)); }
    .wrow[b-sefds06vwx] { display: flex; width: max-content; animation: rowslide-b-sefds06vwx 60s linear infinite; }
    .wrow .wset[b-sefds06vwx] { flex-direction: row; gap: 16px; padding: 10px 16px 24px 0; align-items: flex-start; }
    .wrow .pc[b-sefds06vwx] { width: 190px; }
    @keyframes rowslide-b-sefds06vwx { to { transform: translateX(-50%); } }
    .change-in[b-sefds06vwx], .signup-in[b-sefds06vwx] { grid-template-columns: 1fr; gap: 40px; }
    .qa-in[b-sefds06vwx] { grid-template-columns: 1fr; gap: 28px; }
    .qa-head[b-sefds06vwx] { position: static; }
    .change-thesis[b-sefds06vwx], .signup-lead[b-sefds06vwx] { position: static; }
    .card-form[b-sefds06vwx] { margin-top: 0; }
    .thesis-phone[b-sefds06vwx] { display: none; }
    [data-stack][b-sefds06vwx], .steps[b-sefds06vwx] { --stack-top: 92px; }
    .plans[b-sefds06vwx] { grid-template-columns: 1fr 1fr; gap: 16px; }
    .plan-hot[b-sefds06vwx], .plan-hot:hover[b-sefds06vwx] { transform: none; }
    .plan-desc[b-sefds06vwx] { min-height: 0; }
  }
  @media (max-width: 900px) {
    .mnav[b-sefds06vwx] { display: none; }
    .mact[b-sefds06vwx] { gap: 6px; }
    .mact .btn-bare[b-sefds06vwx] { font-size: 15px; padding: 12px 8px; }
    .mact .btn-fill[b-sefds06vwx] { display: none; }
    .menu-btn[b-sefds06vwx] { display: flex; }
    .problem-head[b-sefds06vwx] { grid-template-columns: 1fr; gap: 28px; }
    .voices[b-sefds06vwx] { height: auto; display: flex; flex-direction: column; gap: 10px; }
    .voice[b-sefds06vwx], .voice.v1[b-sefds06vwx], .voice.v2[b-sefds06vwx], .voice.v3[b-sefds06vwx], .voice.v4[b-sefds06vwx] { position: static; transform: none; max-width: 360px; }
    .voice.v2[b-sefds06vwx], .voice.v4[b-sefds06vwx] { align-self: flex-end; border-bottom-left-radius: 18px; border-bottom-right-radius: 4px; }
    .field[b-sefds06vwx] { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
    .scene[b-sefds06vwx] { min-height: 0; justify-items: start; padding-bottom: 6px; }
    .scene-hours[b-sefds06vwx] { padding-right: 90px; }
    .lp-chip-time[b-sefds06vwx] { right: -6px; top: 74px; }
    .cal[b-sefds06vwx] { width: 100%; max-width: 320px; }
    .scene-gaps[b-sefds06vwx] { padding-bottom: 54px; padding-top: 10px; }
    .cal-head span[b-sefds06vwx] { visibility: hidden; }
    .notif[b-sefds06vwx] { left: -8px; bottom: -4px; width: min(268px, 100%); }
    .chip-gap[b-sefds06vwx] { right: -6px; top: -6px; }
    .scene[b-sefds06vwx]::before { inset: 0 -6%; }
    .lp-step[b-sefds06vwx] { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; }
    .mock-post .pc-lg[b-sefds06vwx], .scene-crickets .pc-lg[b-sefds06vwx] { margin: 0; }
  }
  @media (max-width: 760px) {
    .lp[b-sefds06vwx] { --pad: 22px; --mast-h: 64px; }
.lp[b-sefds06vwx] { font-size: 16px; }
    .mast[b-sefds06vwx] { height: 64px; }
    .hero[b-sefds06vwx] { padding-top: 40px; padding-bottom: 56px; }
    .hero h1[b-sefds06vwx] { margin-top: 18px; }
    .hero-cta[b-sefds06vwx] { margin-top: 26px; }
    .hero-cta .btn[b-sefds06vwx] { width: 100%; }
    .ask-band[b-sefds06vwx] { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; margin-top: 36px; }
    .hero-ask[b-sefds06vwx] { flex-direction: column; padding: 8px; }
    .hero-ask input[b-sefds06vwx] { height: 46px; padding: 0 10px; }
    .hero-ask .btn[b-sefds06vwx] { width: 100%; }
    .brand[b-sefds06vwx] { font-size: 20px; gap: 8px; }
    .mast-in[b-sefds06vwx] { gap: 10px; }
    .hero-ask .btn[b-sefds06vwx] { padding-left: 12px; padding-right: 12px; font-size: 15px; }
    .problem[b-sefds06vwx] { padding-top: 72px; }
    [data-stack][b-sefds06vwx], .steps[b-sefds06vwx] { --stack-top: 76px; gap: 14px; }
    .change[b-sefds06vwx], .signup[b-sefds06vwx] { padding-top: 72px; padding-bottom: 72px; }
    .card-form[b-sefds06vwx] { padding: 24px 20px 22px; }
    #m-submit[b-sefds06vwx] { padding-left: 16px; padding-right: 16px; font-size: 15.5px; }
    .hero .lp-tag[b-sefds06vwx] { font-size: 13px; }
  }
  @media (max-width: 400px) {
    #m-submit[b-sefds06vwx] { font-size: 14.5px; padding-left: 10px; padding-right: 10px; }
    .hero-cta .btn[b-sefds06vwx] { font-size: 15px; padding-left: 12px; padding-right: 12px; }
    .hero-ask .btn[b-sefds06vwx] { font-size: 13.5px; padding-left: 8px; padding-right: 8px; }
    .grid-f[b-sefds06vwx] { grid-template-columns: 1fr; gap: 16px; }
    .rates[b-sefds06vwx] { padding-bottom: 60px; }
    .plans[b-sefds06vwx] { display: flex; gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 12px var(--pad) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .plans[b-sefds06vwx]::-webkit-scrollbar { display: none; }
    .plan[b-sefds06vwx] { flex: 0 0 82%; scroll-snap-align: center; }
    .qa-sec[b-sefds06vwx] { padding-bottom: 80px; }
    .qa summary[b-sefds06vwx] { padding: 16px 0; gap: 10px; grid-template-columns: 26px minmax(0, 1fr) 24px; font-size: 16px; }
    .qa-inner[b-sefds06vwx] { padding: 0 0 18px 36px; }
    .close[b-sefds06vwx] { padding: 40px 0 96px; }
    .foot-in[b-sefds06vwx] { margin-top: 56px; }
    .floor[b-sefds06vwx] { height: 300px; }
    .close-in[b-sefds06vwx] { margin-top: -120px; }
    .floor[b-sefds06vwx]::after { height: 230px; background: linear-gradient(to top, var(--ground) 48%, rgba(245,245,247,0)); }
    .floor-track .pc[b-sefds06vwx] { width: 170px; }
    .cta-bar[b-sefds06vwx] { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
    .cta-bar.show[b-sefds06vwx] { transform: none; }
    .cta-bar .btn[b-sefds06vwx] { flex: 1; min-height: 50px; }
  }

  /* ---------- the app's intake form, dressed like the rest of the card ---------- */
  /* App.razor's FocusOnNavigate focuses the first h1 on every route change; no ring on the headline */
  .hero h1:focus[b-sefds06vwx], .hero h1:focus-visible[b-sefds06vwx] { outline: none; }
  .card-form[b-sefds06vwx]  .bid-form { gap: 14px; }
  .card-form[b-sefds06vwx]  .bid-grid { gap: 14px 16px; }
  .card-form[b-sefds06vwx]  .bid-field span { font-size: 14px; font-weight: 600; color: var(--ink); }
  .card-form[b-sefds06vwx]  .bid-field small { font-weight: 400; color: var(--muted); }
  .card-form[b-sefds06vwx]  .bid-input, .card-form[b-sefds06vwx]  .bid-textarea { border-radius: 3px; border-color: var(--field-edge); padding: 13px 14px; font-size: 16px; color: var(--ink); }
  .card-form[b-sefds06vwx]  .bid-input::placeholder, .card-form[b-sefds06vwx]  .bid-textarea::placeholder { color: #8a8d95; }
  .card-form[b-sefds06vwx]  .bid-input:focus, .card-form[b-sefds06vwx]  .bid-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,92,202,0.14); }
  .card-form[b-sefds06vwx]  .bid-primary { background: var(--blue); border-radius: 3px; min-height: 52px; padding: 15px 28px; font-size: 16.5px; font-weight: 600; letter-spacing: 0; margin-top: 4px; box-shadow: 0 8px 20px -10px rgba(11,92,202,0.7); transition: background .2s ease, box-shadow .2s ease; }
  .card-form[b-sefds06vwx]  .bid-primary:hover:not(:disabled) { background: var(--blue-hover); }
  .card-form[b-sefds06vwx]  .bid-secondary, .card-form[b-sefds06vwx]  .bid-candidate, .card-form[b-sefds06vwx]  .bid-chip { border-radius: 3px; }
  .card-form[b-sefds06vwx]  .bid-message, .card-form[b-sefds06vwx]  .bid-review { border-radius: 3px; }
  .card-foot[b-sefds06vwx] { margin-top: 18px; display: grid; gap: 8px; justify-items: center; text-align: center; }
  .card-foot .lock[b-sefds06vwx] { margin: 0; }
  .card-foot .how[b-sefds06vwx] { margin: 0; }

  /* Landing composition: legible content, deliberate motion, and useful space. */
  .lp[b-sefds06vwx] { --ink: #192126; --muted: #56616a; --line: #dce3e7; --ground: #f1f5f9; --shell: 1360px; --pad: 48px; --mast-h: 72px;
    /* one 12-column grid for every section, and one way for a card to sit on the page */
    --gutter: 24px; --card-edge: #e1e7ec;
    --lift: 0 1px 2px rgba(16,24,40,.05), 0 14px 32px -18px rgba(16,24,40,.22);
    --lift-blue: 0 1px 2px rgba(16,24,40,.05), 0 14px 32px -18px rgba(11,92,202,.35);
    --field-edge: #8a95a1; }
  .lp[b-sefds06vwx], .lp *[b-sefds06vwx] { letter-spacing: 0; }
  .lp p[b-sefds06vwx], .lp li[b-sefds06vwx], .lp q[b-sefds06vwx], .lp .qa-q[b-sefds06vwx] { text-wrap: pretty; }
  .mast[b-sefds06vwx], .mast.stuck[b-sefds06vwx] { background: #fff; border-bottom-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mast-in[b-sefds06vwx] { gap: 24px; }
  .brand[b-sefds06vwx] { font-size: 23px; color: var(--blue); }
  .brand i[b-sefds06vwx] { display: none; }
  .mnav[b-sefds06vwx] { gap: 30px; }
  .mnav a[b-sefds06vwx] { color: var(--ink); font-size: 14px; }
  .mact[b-sefds06vwx] { gap: 8px; }
  .mact .btn[b-sefds06vwx] { min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .mact .btn-fill[b-sefds06vwx] { padding-inline: 18px; }
  .mact .lbl-l[b-sefds06vwx] { display: none; }
  .mact .lbl-s[b-sefds06vwx] { display: inline; }
  .btn[b-sefds06vwx] { border-radius: 6px; box-shadow: none; }
  .btn-fill:hover[b-sefds06vwx] { box-shadow: 0 6px 18px -10px rgba(11,92,202,.5); }
  .disp[b-sefds06vwx] { line-height: 1.08; }
  .lp-tag[b-sefds06vwx] { font-size: 14px; line-height: 1.5; text-transform: none; }
  .hero[b-sefds06vwx] { padding: 56px 0 72px; background: var(--ground); }
  .hero-light[b-sefds06vwx] { display: none; }
  .hero > .shell[b-sefds06vwx] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .hero-in[b-sefds06vwx] { display: block; grid-column: 1 / span 6; min-height: 0; }
  .hero h1[b-sefds06vwx] { max-width: none; margin: 18px 0 22px; font-size: 52px; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
  .hero h1 .warm .wd:nth-child(n)[b-sefds06vwx] { color: var(--blue); }
  .hero-copy .body-lg[b-sefds06vwx] { max-width: 49ch; font-size: 18px; line-height: 1.55; }
  .hero-cta[b-sefds06vwx], .ask-copy[b-sefds06vwx] { display: none; }
  .ask-band[b-sefds06vwx] { grid-row: 2; grid-column: 1 / span 6; display: block; width: 100%; margin: 28px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .hero-ask[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .hero-ask:focus-within[b-sefds06vwx] { border: 0; box-shadow: none; }
  .hero-ask[b-sefds06vwx]::after { content: none; }
  .hero-ask label[b-sefds06vwx] { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 13px; font-weight: 600; }
  .hero-ask input[b-sefds06vwx] { width: 100%; min-height: 50px; padding: 12px 16px; background: #fff; border: 1px solid var(--field-edge); border-radius: 6px; font-size: 16px; }
  .hero-ask input:focus-visible[b-sefds06vwx] { outline: 2px solid var(--blue); outline-offset: 2px; }
  .hero-ask .btn[b-sefds06vwx] { width: 100%; min-height: 50px; padding: 12px 18px; border-radius: 6px; font-size: 15px; white-space: normal; line-height: 1.4; }
  @media (min-width: 1200px) {
    .hero-ask[b-sefds06vwx] { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
    .hero-ask label[b-sefds06vwx] { grid-column: 1 / -1; }
    .hero-ask .btn[b-sefds06vwx] { width: auto; padding: 12px 22px; white-space: nowrap; }
  }
  .ask-band[b-sefds06vwx]::after { content: "Free. No account or credit card required."; display: block; margin-top: 10px; color: var(--muted); font-size: 13px; }
  .wall-wrap[b-sefds06vwx] { inset: 0; pointer-events: none; }
  .wall-wrap[b-sefds06vwx]::after { background: linear-gradient(to bottom, transparent 70%, var(--ground)); }
  /* column 7 starts half a gutter right of the centre; the tilted wall sits one gutter further in, so the form beside it keeps clear */
  .wall[b-sefds06vwx] { --cw: 196px; left: calc(50% + var(--gutter) * 1.5); top: -55px; height: 130%; opacity: 1; transform: rotate(-4deg); }
  .pc[b-sefds06vwx] { border-radius: 8px; box-shadow: 0 14px 30px -20px rgba(13,27,46,.4); }
  .wcol[b-sefds06vwx] { animation-duration: 90s; }
  .wcol.down[b-sefds06vwx] { animation-duration: 100s; }
  .wcol.slow[b-sefds06vwx] { animation-duration: 110s; }
  .wall .pc-likes[b-sefds06vwx], .wall .pc-cap[b-sefds06vwx], .wall .pc-react[b-sefds06vwx], .wall .pc-grid[b-sefds06vwx],
  .wrow .pc-likes[b-sefds06vwx], .wrow .pc-cap[b-sefds06vwx], .wrow .pc-react[b-sefds06vwx], .wrow .pc-grid[b-sefds06vwx] { display: none; }
  .hero-motion[b-sefds06vwx] { grid-row: 2; grid-column: 7 / -1; align-self: end; justify-self: end; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
  .hero-motion .motion-toggle[b-sefds06vwx] { width: 36px; height: 36px; background: var(--ground); border-radius: 50%; }
  .motion-toggle[b-sefds06vwx] { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: #f0f4f7; color: var(--ink); cursor: pointer; }
  .motion-toggle svg[b-sefds06vwx] { width: 18px; height: 18px; }
  .motion-toggle .play-icon[b-sefds06vwx] { display: none; }
  .motion-paused .motion-toggle .pause-icon[b-sefds06vwx] { display: none; }
  .motion-paused .motion-toggle .play-icon[b-sefds06vwx] { display: block; }
  .lp .wcol[b-sefds06vwx], .lp .wrow[b-sefds06vwx] { animation-play-state: paused; }
  .lp.hero-in-view:not(.motion-paused) .wcol[b-sefds06vwx], .lp.hero-in-view:not(.motion-paused) .wrow[b-sefds06vwx] { animation-play-state: running; }

  .fields-stack[b-sefds06vwx], .steps[b-sefds06vwx], .plans[b-sefds06vwx], .wall-row[b-sefds06vwx] { scrollbar-width: thin; scrollbar-color: #9bacc0 transparent; }
  .fields-stack[b-sefds06vwx]::-webkit-scrollbar, .steps[b-sefds06vwx]::-webkit-scrollbar, .plans[b-sefds06vwx]::-webkit-scrollbar, .wall-row[b-sefds06vwx]::-webkit-scrollbar { display: block; height: 6px; }
  .fields-stack[b-sefds06vwx]::-webkit-scrollbar-thumb, .steps[b-sefds06vwx]::-webkit-scrollbar-thumb, .plans[b-sefds06vwx]::-webkit-scrollbar-thumb, .wall-row[b-sefds06vwx]::-webkit-scrollbar-thumb { background: #9bacc0; border-radius: 3px; }

  .problem[b-sefds06vwx] { padding: 88px 0; background: #fff; }
  .problem-head[b-sefds06vwx] { display: block; padding: 0; margin-bottom: 32px; max-width: 700px; }
  .problem-head h2[b-sefds06vwx], .change-thesis h2[b-sefds06vwx] { font-size: 40px; margin-top: 0; }
  .problem-head h2[b-sefds06vwx], .change-thesis h2[b-sefds06vwx], .signup h2[b-sefds06vwx], .rates-head h2[b-sefds06vwx], .qa-head h2[b-sefds06vwx] { letter-spacing: -0.015em; }
  .problem-lead[b-sefds06vwx] { margin-top: 12px; font-size: 16px; max-width: 60ch; }
  .voices[b-sefds06vwx] { display: none; }
  .fields-stack[b-sefds06vwx] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gutter); align-items: stretch; }
  .field[b-sefds06vwx] { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; height: auto; padding: 0; border: 1px solid var(--card-edge); border-radius: 8px; background: #fff; overflow: hidden; clip-path: none !important; transform: none; filter: none; box-shadow: var(--lift); }
  .field:nth-of-type(2)[b-sefds06vwx], .field:nth-of-type(3)[b-sefds06vwx] { background: #fff; }
  .field .f-copy[b-sefds06vwx] { display: flex; flex-direction: column; flex: 1; padding: 22px; }
  .field .f-copy q[b-sefds06vwx] { margin-bottom: 12px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
  /* the opening quote mark hangs in the margin (0.54em is its width), so the words line up with the text under them */
  .field .f-copy q[b-sefds06vwx] { text-indent: -0.54em; }
  .field .f-copy p[b-sefds06vwx] { font-size: 15px; line-height: 1.6; }
  .field .scene[b-sefds06vwx] { order: -1; position: relative; width: 100%; min-height: 200px; height: 200px; padding: 0; overflow: hidden; background-size: cover; background-position: center; }
  .field .scene[b-sefds06vwx]::before { display: none; }
  .field .scene-hours[b-sefds06vwx] { background-image: var(--p-coffee); }
  .field .scene-gaps[b-sefds06vwx] { background-image: var(--p-mechanic); }
  .field .scene-crickets[b-sefds06vwx] { background-image: var(--p-hotwater); }
  .field .scene .phone[b-sefds06vwx], .field .scene .cal[b-sefds06vwx], .field .scene .pc-lg[b-sefds06vwx], .field .scene .notif[b-sefds06vwx] { display: none; }
  .field .scene .chip[b-sefds06vwx] { top: auto; right: 12px; bottom: 12px; padding: 7px 10px; border: 0; border-radius: 4px; font-size: 12px; box-shadow: 0 4px 14px -8px #000; }
  .field .scene-crickets[b-sefds06vwx]::after { content: "3 likes"; position: absolute; right: 12px; bottom: 12px; padding: 7px 12px; background: #fff; color: var(--ink); border-radius: 4px; font-size: 12px; }

  .change[b-sefds06vwx] { padding: 88px 0; background: var(--ground); }
  .change-in[b-sefds06vwx] { display: block; }
  .change-thesis[b-sefds06vwx] { position: static; margin-bottom: 32px; }
  .thesis-phone[b-sefds06vwx] { display: none; }
  .steps[b-sefds06vwx] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gutter); }
  .lp-step[b-sefds06vwx] { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; height: auto; min-height: 0; padding: 0; border: 1px solid var(--card-edge); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: var(--lift); }
  .lp-step:nth-child(2)[b-sefds06vwx] { background: #fff; }
  .lp-step > div:first-child[b-sefds06vwx] { flex: 1; min-height: 0; padding: 24px 24px 26px; }
  .lp-step h3[b-sefds06vwx] { margin: 0 0 10px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
  .lp-step p[b-sefds06vwx] { font-size: 15px; line-height: 1.55; max-width: none; }
  .lp-step .mock[b-sefds06vwx] { flex-shrink: 0; width: 100%; height: 290px; max-height: none; margin: 0; overflow: hidden; transform: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .mock-snap[b-sefds06vwx], .mock-week[b-sefds06vwx] { padding: 18px 20px; }
  .mk-row[b-sefds06vwx] { grid-template-columns: 80px minmax(0,1fr); gap: 10px; padding: 12px 0; }
  .mk-row small[b-sefds06vwx] { font-size: 12px; font-weight: 600; text-transform: none; }
  .mk-row b[b-sefds06vwx] { font-size: 13px; }
  .mock-post[b-sefds06vwx] { max-width: none; padding: 0; }
  .mock-post .pimg[b-sefds06vwx] { height: 126px; aspect-ratio: auto !important; background-position: center 8%; }
  .mock-post .pc-head[b-sefds06vwx] { padding-block: 9px; }
  .mock-post .pc-acts[b-sefds06vwx] { padding-block: 7px; }
  .mock-post .pc-cap[b-sefds06vwx] { font-size: 12px; line-height: 1.4; }
  .mock-post .pc-cap:last-child[b-sefds06vwx] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  /* the clamp hides line four, but not inside the bottom padding, where it peeked through */
  .mock-post .pc-cap:last-child[b-sefds06vwx] { padding-bottom: 0; margin-bottom: 10px; }
  .mock-post .pc[b-sefds06vwx] { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .mock-snap .pc-av i[b-sefds06vwx], .mock-post .pc-av i[b-sefds06vwx] { background: var(--c-dave) center 15% / cover; }
  .mock-week .g-dave[b-sefds06vwx] { background-image: var(--c-dave); }
  .mock-week[b-sefds06vwx] { display: flex; flex-direction: column; justify-content: flex-start; }
  .mock-week .wk-day i[b-sefds06vwx] { aspect-ratio: 1 / 2.1; }
  .example-note[b-sefds06vwx] { margin: 18px 0 0; color: var(--muted); font-size: 12px; }

  .signup[b-sefds06vwx] { padding: 88px 0; background: #fff; }
  .invert[b-sefds06vwx]::before, .signup-glow[b-sefds06vwx] { display: none; }
  .signup-in[b-sefds06vwx] { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 0 var(--gutter); align-items: start; }
  .signup-in[b-sefds06vwx] { grid-template-rows: auto 1fr; }
  .signup-lead[b-sefds06vwx] { grid-column: 1 / span 6; grid-row: 1; }
  .signup-in > .rep[b-sefds06vwx] { grid-column: 1 / span 6; grid-row: 2; }
  .card-form[b-sefds06vwx] { grid-column: 7 / span 6; grid-row: 1 / span 2; position: sticky; top: calc(var(--mast-h) + 24px); }
  .signup-lead[b-sefds06vwx] { position: static; min-height: 0; padding: 0; }
  .signup-lead[b-sefds06vwx]::before { display: none; }
  .signup h2[b-sefds06vwx] { margin: 0 0 18px; font-size: 40px; line-height: 1.13; max-width: 23ch; }
  .signup-note[b-sefds06vwx] { font-size: 16px; line-height: 1.6; max-width: 52ch; }
  .card-form[b-sefds06vwx] { margin: 0; padding: 26px; border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: var(--lift); }
  .card-form[b-sefds06vwx]  .bid-grid { gap: 20px 16px; }
  .card-form[b-sefds06vwx]  .bid-input { min-height: 48px; }
  .card-form[b-sefds06vwx]  .bid-textarea { min-height: 72px; }
  .card-form[b-sefds06vwx]  .bid-input::placeholder, .card-form[b-sefds06vwx]  .bid-textarea::placeholder { color: #65727f; }
  .card-form[b-sefds06vwx]  .bid-field small, .card-form[b-sefds06vwx]  .bid-more > summary small { font-size: 12px; }
  /* the same 6px corners as every other field and button on the page */
  .card-form[b-sefds06vwx]  .bid-input, .card-form[b-sefds06vwx]  .bid-textarea, .card-form[b-sefds06vwx]  .bid-primary, .card-form[b-sefds06vwx]  .bid-secondary,
  .card-form[b-sefds06vwx]  .bid-candidate, .card-form[b-sefds06vwx]  .bid-chip, .card-form[b-sefds06vwx]  .bid-message, .card-form[b-sefds06vwx]  .bid-review { border-radius: 6px; }
  /* 11px, not 12px: the form's 1px transparent border (for high contrast) would otherwise make it 50px tall */
  .card-form[b-sefds06vwx]  .bid-primary { min-height: 48px; padding: 11px 16px; font-size: 15px; box-shadow: none; }
  .card-foot[b-sefds06vwx] { margin-top: 16px; gap: 8px; }
  .card-foot .lock[b-sefds06vwx], .card-foot .how[b-sefds06vwx] { font-size: 13px; line-height: 1.5; }
  .card-foot .how[b-sefds06vwx] { text-wrap: balance; }

  .rates[b-sefds06vwx] { padding: 88px 0; background: var(--ground); }
  .rates > .shell[b-sefds06vwx] { display: block; }
  .rates-head[b-sefds06vwx] { max-width: none; margin-bottom: 32px; padding: 0; }
  .rates-head h2[b-sefds06vwx] { margin: 0 0 16px; font-size: 40px; line-height: 1.13; }
  .rates-head p:not(.lp-tag)[b-sefds06vwx] { max-width: 60ch; font-size: 16px; line-height: 1.6; }
  .plans[b-sefds06vwx] { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--gutter); align-items: stretch; }
  .plan[b-sefds06vwx] { min-width: 0; padding: 22px 18px; border-color: var(--card-edge); border-radius: 8px; box-shadow: var(--lift); transition: border-color .2s; }
  .plan:hover[b-sefds06vwx] { transform: none; box-shadow: var(--lift); border-color: var(--card-edge); }
  /* the older hover rule greys any plan's border; the recommended one keeps its blue */
  .plan-hot[b-sefds06vwx], .plan-hot:hover[b-sefds06vwx] { transform: none; border-color: var(--blue); box-shadow: var(--lift-blue); }
  .plan-hot[b-sefds06vwx] { border: 2px solid var(--blue); padding: 21px 17px; background: #fff; }
  .plan-top[b-sefds06vwx] { min-height: 34px; align-items: start; flex-wrap: wrap; gap: 6px; }
  .lp-plan-name[b-sefds06vwx] { font-size: 18px; }
  .plan-pill[b-sefds06vwx] { padding: 3px 9px; font-size: 12px; font-weight: 600; text-transform: none; }
  .lp-plan-price[b-sefds06vwx] { margin: 18px 0 14px; }
  .lp-plan-price b[b-sefds06vwx] { font-size: 38px; }
  .lp-plan-price i[b-sefds06vwx] { font-size: 14px; }
  .lp-plan-price small[b-sefds06vwx] { margin-top: 8px; min-height: 18px; font-size: 12px; }
  .plan-desc[b-sefds06vwx] { min-height: 50px; font-size: 14px; line-height: 1.5; }
  .plan-feat[b-sefds06vwx] { gap: 10px; margin: 18px 0 22px; padding-top: 18px; font-size: 14px; line-height: 1.4; }
  /* Cards side by side share their five rows (name, price, description, list, button), so a description
     that wraps to three lines in one card no longer drops that card's list below its neighbours'. */
  @media (min-width: 761px) {
    .plan[b-sefds06vwx] { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    /* the shared row does the lining up, so a one-line description no longer needs padding out to two */
    .plans .plan-desc[b-sefds06vwx] { min-height: 0; }
  }
  /* plan names and question groups are headings for screen readers; they keep the look they had as labels */
  .lp-plan-name[b-sefds06vwx], .qa-label[b-sefds06vwx] { line-height: inherit; }
  .plan-feat svg[b-sefds06vwx] { width: 15px; height: 15px; }
  .plan .btn[b-sefds06vwx] { min-height: 48px; padding: 10px 8px; font-size: 14px; }

  .qa-sec[b-sefds06vwx] { padding: 88px 0; background: #fff; }
  .qa-in[b-sefds06vwx] { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 0 var(--gutter); }
  .qa-head[b-sefds06vwx] { grid-column: 1 / span 4; }
  .qa-list[b-sefds06vwx] { grid-column: 5 / -1; }
  .qa-head[b-sefds06vwx] { position: static; }
  .qa-head h2[b-sefds06vwx] { margin: 0 0 16px; font-size: 40px; font-weight: 800; line-height: 1.1; }
  .qa-lead[b-sefds06vwx] { font-size: 15px; line-height: 1.6; }
  .qa-list[b-sefds06vwx] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .qa-label[b-sefds06vwx] { margin-bottom: 2px; font-size: 13px; font-weight: 600; text-transform: none; }
  .qa-group + .qa-group[b-sefds06vwx] { margin-top: 0; }
  .qa summary[b-sefds06vwx] { grid-template-columns: minmax(0,1fr) 26px; gap: 12px; padding: 18px 0; font-size: 15px; line-height: 1.45; min-height: 56px; }
  .qa-n[b-sefds06vwx] { display: none; }
  .qa-inner[b-sefds06vwx] { padding: 0 22px 18px 0; }
  .qa-inner p[b-sefds06vwx] { font-size: 14px; line-height: 1.65; }

  .close[b-sefds06vwx] { min-height: 430px; padding: 56px 0 28px; background: var(--ground); }
  .close[b-sefds06vwx]::before, .floor[b-sefds06vwx] { display: none; }
  .close-in[b-sefds06vwx] { margin-top: 54px; }
  .close-line[b-sefds06vwx] { margin-bottom: 26px; max-width: 24ch; font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
  /* it is a <p>, so the page-wide 'pretty' wrapping would otherwise win and leave one long line into the photos */
  .close .close-line[b-sefds06vwx] { text-wrap: balance; }
  .foot-in[b-sefds06vwx] { margin-top: 78px; font-size: 13px; }
  .footer-book[b-sefds06vwx] { position: absolute; inset: 32px 0 auto; height: 270px; z-index: 1; overflow: hidden; pointer-events: none; }
  .footer-page[b-sefds06vwx] { position: absolute; top: 0; width: 260px; height: 220px; margin: 0; overflow: hidden; border: 6px solid #fff; border-radius: 2px; background: #fff; box-shadow: 0 18px 34px -22px rgba(20,40,60,.5); }
  .footer-page img[b-sefds06vwx] { display: block; width: 100%; height: 100%; object-fit: cover; }
  .footer-page[b-sefds06vwx]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(17,34,48,.12),transparent 20%); pointer-events: none; }
  .footer-page-a[b-sefds06vwx] { left: max(16px,calc(50% - 590px)); transform: rotate(-4deg); }
  .footer-page-c[b-sefds06vwx] { right: max(16px,calc(50% - 590px)); transform: rotate(4deg); }
  .rv[b-sefds06vwx], .wd[b-sefds06vwx], .js-reveal .rv[b-sefds06vwx], .js-reveal .wd[b-sefds06vwx] { opacity: 1; filter: none; transform: none; transition: none; }
  .hero-copy[b-sefds06vwx] { animation: hero-arrive-b-sefds06vwx .5s ease-out both; }
  @keyframes hero-arrive-b-sefds06vwx { from { opacity:.65; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .cta-bar[b-sefds06vwx], .cta-bar.show[b-sefds06vwx] { display: none; }

  /* "/" while the saved session is read (Landing.razor, checkingSession). Outside .lp, so the app's own tokens. */
  .lp-checking[b-sefds06vwx] { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #fff; color: var(--muted); font-size: var(--fs-note); }
  .lp-checking p[b-sefds06vwx] { margin: 0; }
  .lp-checking span[b-sefds06vwx] { width: 28px; height: 28px; border: 3px solid var(--tint-blue); border-top-color: var(--blue); border-radius: 50%; animation: lp-checking-spin-b-sefds06vwx .8s linear infinite; }
  @keyframes lp-checking-spin-b-sefds06vwx { to { transform: rotate(360deg); } }

  /* the free report, drawn as a labelled sample beside the form */
  .rep[b-sefds06vwx] { margin: 28px 0 0; padding: 20px 22px 18px; background: #fff; border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: var(--lift); font-size: 14px; line-height: 1.5; }
  .rep-top[b-sefds06vwx] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .rep-kicker[b-sefds06vwx] { font-size: 13px; font-weight: 600; color: var(--blue); }
  .rep-biz[b-sefds06vwx] { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
  .rep-av[b-sefds06vwx] { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--c-dave) center 15% / cover; }
  .rep-biz b[b-sefds06vwx] { display: block; font-size: 17px; line-height: 1.3; }
  .rep-biz small[b-sefds06vwx] { display: block; color: var(--muted); font-size: 13px; }
  .rep-sec[b-sefds06vwx] { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .rep-h[b-sefds06vwx] { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .rep-bars[b-sefds06vwx] { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .rep-bars li[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .rep-bars span[b-sefds06vwx] { font-weight: 600; }
  .rep-bars i[b-sefds06vwx] { height: 8px; border-radius: 4px; background: #e6edf2; overflow: hidden; }
  .rep-bars i[b-sefds06vwx]::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: #1f9d6b; }
  .rep-bars b[b-sefds06vwx] { color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
  .rep-quote[b-sefds06vwx] { margin-top: 12px; padding-left: 12px; border-left: 2px solid #1f9d6b; font-style: italic; }
  .rep-ideas[b-sefds06vwx] { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
  .rep-foot[b-sefds06vwx] { margin-top: 14px; color: var(--muted); font-size: 12px; }

  /* intake form: the landing's own reading of the explain and collapse options */
  .card-form[b-sefds06vwx]  .bid-input[aria-invalid="true"] { border-color: var(--red); }
  .card-form[b-sefds06vwx]  .bid-more > summary { font-size: 14px; font-weight: 600; color: var(--blue); }
  .card-foot .how a[b-sefds06vwx], .qa-lead a[b-sefds06vwx] { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

  /* pricing fine print, and the swipe-row marker phones show */
  .plans-fine[b-sefds06vwx] { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 70ch; }
  .plan-dots[b-sefds06vwx] { display: none; }

  /* the close: one promise */
  .close-lock[b-sefds06vwx] { display: flex; margin-top: 14px; font-size: 13px; }

  @media (max-width: 1120px) {
    .lp[b-sefds06vwx] { --pad: 32px; }
    .mnav[b-sefds06vwx] { gap: 18px; }
    .mact .btn-fill[b-sefds06vwx] { display: none; }
    .hero-in[b-sefds06vwx], .ask-band[b-sefds06vwx] { grid-column: 1 / span 7; }
    .hero h1[b-sefds06vwx] { font-size: 44px; }
    /* the hero line wraps from here down; a dash on its first line only reads as a stray mark */
    .hero .lp-tag[b-sefds06vwx] { text-wrap: balance; }
    .hero .lp-tag[b-sefds06vwx]::before { display: none; }
    .wall-wrap[b-sefds06vwx] { display:block; }
    .wall[b-sefds06vwx] { --cw:170px; left:calc(58.333% + 9px + var(--gutter)); }
    .wall-row[b-sefds06vwx] { display:none; }
    .hero-motion[b-sefds06vwx] { grid-column:8 / -1; }
    .field .f-copy[b-sefds06vwx] { padding:18px; }
    .field .f-copy q[b-sefds06vwx] { font-size:21px; }
    .lp-step .mock[b-sefds06vwx] { height:330px; }
    .mk-row[b-sefds06vwx] { grid-template-columns:1fr; gap:4px; padding:9px 0; }
    .plans[b-sefds06vwx] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .plan .btn[b-sefds06vwx] { padding:10px; }
    .plan-desc[b-sefds06vwx] { min-height:42px; }
    .qa-in[b-sefds06vwx] { grid-template-columns:1fr; gap:28px; }
    .qa-head[b-sefds06vwx], .qa-list[b-sefds06vwx] { grid-column:1 / -1; }
    .qa-head[b-sefds06vwx] { max-width:540px; }
    .footer-page[b-sefds06vwx] { width:220px; height:190px; }
  }
  @media (max-width: 760px) {
    .lp[b-sefds06vwx] { --pad:22px; --mast-h:64px; font-size:16px; }
    .mast[b-sefds06vwx] { height:64px; }
    .mast-in[b-sefds06vwx] { gap:10px; }
    .brand[b-sefds06vwx] { font-size:20px; }
    .mact[b-sefds06vwx] { gap:2px; }
    .mact .btn[b-sefds06vwx] { padding:10px 8px; font-size:13px; min-height:44px; }
    .menu-btn[b-sefds06vwx] { width:44px; height:44px; margin:0; }
    .hero[b-sefds06vwx] { padding:28px 0 40px; }
    .hero > .shell[b-sefds06vwx] { display:flex; flex-direction:column; }
    .hero h1[b-sefds06vwx] { font-size:34px; line-height:1.1; max-width:18ch; margin:14px 0 18px; }
    .hero-copy .body-lg[b-sefds06vwx] { font-size:16px; line-height:1.55; }
    .hero-in[b-sefds06vwx] { order:1; }
    .ask-band[b-sefds06vwx] { order:2; margin-top:22px; width:100%; }
    .ask-band[b-sefds06vwx]::after { font-size:12px; }
    .hero-ask .btn[b-sefds06vwx] { font-size:14px; padding:12px; }
    .wall-wrap[b-sefds06vwx] { display:none; }
    .wall-row[b-sefds06vwx] { display:block; order:3; margin:28px calc(-1 * var(--pad)) 0; height:260px; overflow-x:auto; overflow-y:hidden; padding:0 0 8px; }
    .wall-row[b-sefds06vwx]::after { display:none; }
    .wrow[b-sefds06vwx] { animation:none; }
    .wrow .wset[b-sefds06vwx] { gap:14px; padding:0 var(--pad); }
    .wrow .wset + .wset[b-sefds06vwx] { display:none; }
    .wrow .pc[b-sefds06vwx] { width:175px; height:238px; }
    .wrow .pc .pimg[b-sefds06vwx] { height:130px; aspect-ratio:auto !important; }
    .wrow .pc-cap[b-sefds06vwx] { display:none; }
    .hero-motion[b-sefds06vwx] { order:4; align-self:flex-end; margin-top:8px; padding:0; border:0; background:transparent; }
    .hero-motion .motion-toggle[b-sefds06vwx] { width:44px; height:44px; background:#fff; border:1px solid var(--line); }
    .problem[b-sefds06vwx],.change[b-sefds06vwx],.signup[b-sefds06vwx],.rates[b-sefds06vwx],.qa-sec[b-sefds06vwx] { padding:52px 0; }
    .problem-head[b-sefds06vwx] { max-width:none; margin-bottom:24px; }
    .problem-head h2[b-sefds06vwx],.change-thesis h2[b-sefds06vwx],.rates-head h2[b-sefds06vwx] { font-size:30px; line-height:1.15; }
    .problem-lead[b-sefds06vwx] { font-size:15px; }
    /* Stacked, not a swipe row: most visitors never swipe, so two of the three cards went unseen. */
    .fields-stack[b-sefds06vwx],.steps[b-sefds06vwx] { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; overflow:visible; margin:0; padding:0; }
    .plans[b-sefds06vwx] { scroll-padding-inline: var(--pad); }
    .field[b-sefds06vwx],.steps > .lp-step[b-sefds06vwx] { width:auto; height:auto; min-width:0; }
    .field .scene[b-sefds06vwx] { height:170px; min-height:170px; }
    .field .f-copy[b-sefds06vwx] { padding:20px; }
    .field .f-copy q[b-sefds06vwx] { font-size:22px; }
    .field .f-copy p[b-sefds06vwx] { font-size:15px; }
    .lp-step h3[b-sefds06vwx] { font-size:22px; }
    .lp-step .mock[b-sefds06vwx] { height:290px; }
    .lp-step .mock-snap[b-sefds06vwx], .lp-step .mock-week[b-sefds06vwx] { height:auto; }
    .close-in .btn[b-sefds06vwx] { width:100%; font-size:15px; padding:14px 16px; min-height:52px; }
    .signup-in[b-sefds06vwx] { display:flex; flex-direction:column; gap:26px; }
    .signup-in > .rep[b-sefds06vwx] { margin-top:0; }
    .signup h2[b-sefds06vwx] { font-size:30px; line-height:1.16; }
    .signup-note[b-sefds06vwx] { font-size:15px; }
    .card-form[b-sefds06vwx] { width:100%; padding:20px 18px; position:static; }
    .card-foot .lock[b-sefds06vwx] { font-size:12px; }
    .card-form[b-sefds06vwx]  .bid-grid { gap:16px; }
    .card-form[b-sefds06vwx]  .bid-primary { font-size:14px; }
    .rates-head[b-sefds06vwx] { margin-bottom:26px; }
    .rates-head p:not(.lp-tag)[b-sefds06vwx] { font-size:15px; }
    .plans[b-sefds06vwx] { display:flex; gap:16px; margin:0 calc(-1 * var(--pad)); padding:2px var(--pad) 16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
    .plan[b-sefds06vwx] { flex:0 0 min(86%,350px); padding:22px; scroll-snap-align:start; }
    .plan-dots[b-sefds06vwx] { display:flex; justify-content:center; gap:8px; margin:0 0 4px; }
    .plan-dots i[b-sefds06vwx] { width:7px; height:7px; border-radius:4px; background:#c3ccd6; transition:width .2s ease, background .2s ease; }
    .plan-dots i.on[b-sefds06vwx] { width:20px; background:var(--blue); }
    .rep[b-sefds06vwx] { padding:16px 16px 14px; }
    .plan-hot[b-sefds06vwx] { padding:21px; }
    .plan-top[b-sefds06vwx] { min-height:30px; }
    .plan-desc[b-sefds06vwx] { min-height:50px; }
    .qa-head h2[b-sefds06vwx] { font-size:30px; }
    .qa-list[b-sefds06vwx] { grid-template-columns:1fr; gap:26px; }
    .qa summary[b-sefds06vwx] { font-size:16px; }
    .qa-inner p[b-sefds06vwx] { font-size:15px; }
    .close[b-sefds06vwx] { padding:36px 0 24px; min-height:0; }
    .footer-book[b-sefds06vwx] { display:none; }
    .close-in[b-sefds06vwx] { margin-top:0; }
    .close-line[b-sefds06vwx] { font-size:30px; line-height:1.15; }
    .foot-in[b-sefds06vwx] { margin-top:44px; gap:16px; }
    .foot-links[b-sefds06vwx] { margin:0; flex-wrap:wrap; }
  }
  /* the sample report's column is narrow below 1000px (two columns on a tablet, one on a phone):
     each praise label sits above its bar instead of squeezing it */
  @media (max-width: 1000px) {
    .rep-bars li[b-sefds06vwx] { grid-template-columns:minmax(0,1fr) 72px; gap:4px 10px; }
    .rep-bars span[b-sefds06vwx] { grid-column:1 / -1; }
    .rep-bars b[b-sefds06vwx] { grid-row:2; grid-column:2; text-align:right; }
    .rep-bars i[b-sefds06vwx] { grid-row:2; grid-column:1; }
  }
  /* tablets: each step is a row, words left and example right; a sideways row left the third one unseen */
  @media (min-width: 761px) and (max-width: 1000px) {
    .steps[b-sefds06vwx] { grid-template-columns: minmax(0,1fr); gap: 20px; }
    .steps > .lp-step[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .lp-step > div:first-child[b-sefds06vwx] { padding: 26px; }
    .lp-step .mock[b-sefds06vwx] { height: auto; border-top: 0; border-left: 1px solid var(--line); }
  }
  /* up to 1120px the closing photos sit above the heading; beside it they would run off the page */
  @media (min-width: 761px) and (max-width: 1120px) {
    .close[b-sefds06vwx] { min-height:0; padding-top:36px; }
    .footer-book[b-sefds06vwx] { top:28px; height:216px; }
    .footer-page[b-sefds06vwx] { width:200px; height:176px; }
    .footer-page-a[b-sefds06vwx] { left:calc(50% - 220px); }
    .footer-page-c[b-sefds06vwx] { right:calc(50% - 220px); }
    .close-in[b-sefds06vwx] { margin-top:204px; }
    .foot-in[b-sefds06vwx] { margin-top:40px; }
  }
  @media (min-width: 1121px) and (max-width: 1220px) {
    .footer-page[b-sefds06vwx] { width:220px; height:190px; }
  }
  @media (max-width: 360px) {
    .hero h1[b-sefds06vwx] { font-size:30px; }
    /* the reassurance line wraps here; centred text reads better without an icon hanging off one side */
    .card-foot .lock svg[b-sefds06vwx] { display:none; }
    .card-foot .lock[b-sefds06vwx] { text-wrap:balance; }
    .hero-copy .body-lg[b-sefds06vwx] { font-size:15px; }
    .card-form[b-sefds06vwx]  .bid-primary { white-space:normal; }
    .mk-row[b-sefds06vwx] { grid-template-columns:1fr; gap:4px; padding:9px 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-copy[b-sefds06vwx] { animation:none; }
    .wcol[b-sefds06vwx],.wrow[b-sefds06vwx] { animation:none !important; }
  }

  /* Pictures for the shorter page: who it is for, the street at opening time, the owner the
     advisor answers and an owner beside the questions. Dawn light, people at work. */
  .kinds[b-sefds06vwx] { padding: 12px 0 0; }
  .kinds-row[b-sefds06vwx] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
  .kinds-row li[b-sefds06vwx] { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; }
  .kinds-row img[b-sefds06vwx] { display: block; width: 100%; max-width: 84px; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--e1); }

  .invert > .signup[b-sefds06vwx] { padding-top: 0; }
  .signup-street[b-sefds06vwx] { position: relative; height: 400px; margin: 0 0 48px; overflow: hidden; }
  .signup-street img[b-sefds06vwx] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
  .signup-street[b-sefds06vwx]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 72%, var(--surface) 100%); }

  .adv-visual[b-sefds06vwx] { position: relative; }
  .adv-photo[b-sefds06vwx] { display: block; width: 72%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: var(--e2); }
  .adv-visual .adv-chat[b-sefds06vwx] { position: relative; width: 82%; margin: -34% 0 0 auto; }

  .qa-photo[b-sefds06vwx] { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 4 / 5; margin-top: 28px; object-fit: cover; border-radius: 14px; box-shadow: var(--e1); }

  @media (max-width: 760px) {
    .kinds[b-sefds06vwx] { padding-top: 4px; }
    .kinds-row[b-sefds06vwx] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
    .kinds-row li[b-sefds06vwx] { gap: 6px; font-size: 12.5px; }
    .kinds-row img[b-sefds06vwx] { max-width: 64px; }
    .signup-street[b-sefds06vwx] { height: 230px; margin-bottom: 28px; }
    .adv-photo[b-sefds06vwx] { width: 82%; }
    .adv-visual .adv-chat[b-sefds06vwx] { width: 92%; margin-top: -24%; }
    .qa-photo[b-sefds06vwx] { max-width: none; aspect-ratio: 16 / 10; margin-top: 18px; object-position: center 35%; }
  }

  /* How it works: three numbered steps on one line, each a title, a short line and a picture of
     the step. Replaces .change and .lp-step, whose rules above are no longer used by the page. */
  .hiw[b-sefds06vwx] { padding: 96px 0 88px; background: var(--ground); }
  .hiw-head[b-sefds06vwx] { max-width: 760px; margin: 0 auto 52px; text-align: center; }
  .hiw-pill[b-sefds06vwx] { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--pill); color: var(--blue); font-size: 13px; font-weight: 700; }
  .hiw-head h2[b-sefds06vwx] { margin: 16px 0 0; font-size: 40px; line-height: 1.13; letter-spacing: -0.015em; }
  .hiw-steps[b-sefds06vwx] { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .hiw-steps[b-sefds06vwx]::before { content: ""; position: absolute; top: 20px; left: 16.6%; right: 16.6%; border-top: 2px dashed #b4c4d9; }
  .hiw-step[b-sefds06vwx] { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hiw-copy[b-sefds06vwx] { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
  .hiw-n[b-sefds06vwx] { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 0 0 6px var(--ground); }
  .hiw-copy h3[b-sefds06vwx] { margin: 0 0 6px; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
  .hiw-copy p[b-sefds06vwx] { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
  .hiw-visual[b-sefds06vwx] { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100%; height: 290px; padding: 20px; overflow: hidden; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--e2); }
  .hiw-note[b-sefds06vwx] { margin-top: 26px; text-align: center; }

  .hiw-review[b-sefds06vwx] { max-width: 90%; padding: 10px 12px; background: var(--ground); border-radius: 12px 12px 12px 4px; font-size: 13px; line-height: 1.4; }
  .hiw-review p[b-sefds06vwx] { margin: 5px 0 0; }
  .hiw-review-b[b-sefds06vwx] { align-self: flex-end; border-radius: 12px 12px 4px 12px; }
  .hiw-review mark[b-sefds06vwx] { padding: 0 2px; border-radius: 3px; background: #ffe9a8; color: inherit; }
  .hiw-stars[b-sefds06vwx] { display: block; width: 70px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") left center / 14px 13px repeat-x; }
  .hiw-found[b-sefds06vwx] { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 12px; background: #eaf7ee; border: 1px solid #c6e9d0; border-radius: 10px; }
  .hiw-found small[b-sefds06vwx] { display: block; color: #1f7a3d; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .hiw-found b[b-sefds06vwx] { font-size: 14px; }
  .hiw-tick[b-sefds06vwx] { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #1f9d45; color: #fff; }
  .hiw-tick svg[b-sefds06vwx] { width: 14px; height: 14px; }

  .hiw-v-post[b-sefds06vwx] { justify-content: flex-start; padding: 16px 16px 14px; }
  .hiw-post[b-sefds06vwx] { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
  .hiw-post-head[b-sefds06vwx] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px; }
  .hiw-post-head i[b-sefds06vwx] { width: 22px; height: 22px; border-radius: 50%; background: url("landing/editorial/hiw-tile-van.webp") 62% 22% / 300% auto; }
  .hiw-post-img[b-sefds06vwx] { height: 112px; background: url("landing/editorial/hiw-post.webp") center 45% / cover; }
  .hiw-post p[b-sefds06vwx] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
  .hiw-actions[b-sefds06vwx] { display: flex; gap: 8px; margin-top: 12px; }
  .hiw-edit[b-sefds06vwx], .hiw-ok[b-sefds06vwx] { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 8px; font-size: 13.5px; font-weight: 700; }
  .hiw-edit[b-sefds06vwx] { background: #fff; border: 1px solid var(--line); color: var(--ink); }
  .hiw-ok[b-sefds06vwx] { background: var(--blue); color: #fff; box-shadow: 0 8px 18px -8px rgba(11,92,202,.7); }
  .hiw-ok svg[b-sefds06vwx] { width: 14px; height: 14px; }

  .hiw-v-week[b-sefds06vwx] { justify-content: flex-start; gap: 14px; padding: 18px; }
  .hiw-days[b-sefds06vwx] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .hiw-days span[b-sefds06vwx] { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--ground); color: var(--muted); font-size: 12px; font-weight: 700; }
  .hiw-days span.on[b-sefds06vwx] { background: var(--blue); color: #fff; }
  .hiw-sched[b-sefds06vwx] { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .hiw-sched li[b-sefds06vwx] { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; }
  .hiw-sched i[b-sefds06vwx] { flex-shrink: 0; width: 46px; height: 46px; border-radius: 7px; background: var(--img) center 30% / cover; }
  .hiw-sched li > span:not(.hiw-tag)[b-sefds06vwx] { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
  .hiw-sched b[b-sefds06vwx] { font-size: 13.5px; }
  .hiw-sched small[b-sefds06vwx] { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
  .hiw-sched em[b-sefds06vwx] { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
  .hiw-sched em:last-of-type[b-sefds06vwx] { margin-right: 3px; }
  .hiw-sched .ig[b-sefds06vwx] { --dot: #d62976; } .hiw-sched .fb[b-sefds06vwx] { --dot: #1877f2; } .hiw-sched .li[b-sefds06vwx] { --dot: #0a66c2; }
  .hiw-tag[b-sefds06vwx] { flex-shrink: 0; padding: 4px 8px; border-radius: 999px; background: var(--pill); color: var(--blue); font-size: 11px; font-weight: 700; }
  .hiw-tag.posted[b-sefds06vwx] { background: #e3f5e8; color: #1f7a3d; }

  /* One step under another, the numbers joined down the left. */
  @media (max-width: 900px) {
    .hiw-head[b-sefds06vwx] { margin-bottom: 34px; text-align: left; }
    .hiw-steps[b-sefds06vwx] { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hiw-steps[b-sefds06vwx]::before { content: none; }
    .hiw-step[b-sefds06vwx] { align-items: stretch; padding-left: 56px; text-align: left; }
    .hiw-step:not(:last-child)[b-sefds06vwx]::before { content: ""; position: absolute; top: 46px; bottom: -32px; left: 19px; border-left: 2px dashed #b4c4d9; }
    .hiw-copy[b-sefds06vwx] { align-items: flex-start; margin-bottom: 14px; min-height: 40px; }
    .hiw-n[b-sefds06vwx] { position: absolute; top: 0; left: 0; margin: 0; }
    .hiw-copy h3[b-sefds06vwx] { margin-top: 8px; }
    .hiw-visual[b-sefds06vwx] { height: auto; max-width: 440px; }
    .hiw-note[b-sefds06vwx] { text-align: left; }
  }
  @media (max-width: 760px) {
    .hiw[b-sefds06vwx] { padding: 56px 0; }
    .hiw-head h2[b-sefds06vwx] { font-size: 30px; line-height: 1.15; }
    .hiw-copy h3[b-sefds06vwx] { font-size: 20px; }
  }

  /* The sample report in panels a glance can read: the score, what is praised with an icon and a
     bar each, the local gap as dots (theirs flyers, yours a face) and the first posts with photos.
     These follow the older .rep rules above and replace them. */
  .rep[b-sefds06vwx] { padding: 18px; font-size: 14px; }
  .rep-free[b-sefds06vwx] { padding: 3px 9px; border-radius: 999px; background: #e3f5e8; color: #1f7a3d; font-size: 12px; font-weight: 700; }
  .rep-biz[b-sefds06vwx] { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; }
  .rep-biz > div:first-of-type[b-sefds06vwx] { flex: 1; min-width: 0; }
  .rep-av[b-sefds06vwx] { width: 48px; height: 48px; background: url("landing/editorial/plumber-dawn.webp") 64% 21% / 450% auto; }
  .rep-score[b-sefds06vwx] { display: grid; justify-items: end; gap: 3px; text-align: right; }
  .rep-score b[b-sefds06vwx] { font-size: 26px; font-weight: 800; line-height: 1; }
  .rep-score small[b-sefds06vwx] { color: var(--muted); font-size: 12px; }
  .rep-stars[b-sefds06vwx] { display: block; width: 70px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") left center / 14px 13px repeat-x; }
  .rep-card[b-sefds06vwx] { margin-top: 10px; padding: 14px; background: var(--ground); border-radius: 12px; }
  .rep-h[b-sefds06vwx] { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .rep-bars[b-sefds06vwx] { gap: 10px; }
  .rep-bars li[b-sefds06vwx] { grid-template-columns: 28px minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; }
  .rep-bars .rep-ico[b-sefds06vwx] { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #1f9d6b; box-shadow: var(--e1); }
  .rep-ico svg[b-sefds06vwx] { width: 15px; height: 15px; }
  .rep-bars span[b-sefds06vwx] { font-size: 13.5px; }
  .rep-bars i[b-sefds06vwx] { height: 10px; border-radius: 5px; background: #dfe7e3; }
  .rep-bars i[b-sefds06vwx]::before { background: linear-gradient(90deg, #3cc283, #1f9d6b); }
  .rep-bars b[b-sefds06vwx] { font-size: 12px; }
  .rep-quote[b-sefds06vwx] { margin: 14px 0 0; padding: 10px 12px; border: 0; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: var(--e1); font-size: 13px; font-style: normal; }
  .rep-quote .rep-stars[b-sefds06vwx] { width: 56px; height: 11px; margin-bottom: 5px; background-size: 11px 11px; }
  .rep-pair[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .rep-near p[b-sefds06vwx] { margin: 0; font-size: 13px; line-height: 1.45; }
  .rep-dots[b-sefds06vwx] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
  .rep-dots i[b-sefds06vwx] { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #dde2e8; color: #8a919c; }
  .rep-dots i svg[b-sefds06vwx] { width: 13px; height: 13px; }
  .rep-dots i.you[b-sefds06vwx] { background: var(--blue); color: #fff; box-shadow: 0 0 0 3px rgba(11,92,202,.18); }
  .rep-near .rep-gap[b-sefds06vwx] { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--blue); font-size: 12px; font-weight: 700; box-shadow: var(--e1); }
  .rep-ideas[b-sefds06vwx] { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .rep-ideas li[b-sefds06vwx] { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: var(--e1); font-size: 13px; font-weight: 600; line-height: 1.35; }
  .rep-ideas i[b-sefds06vwx] { flex-shrink: 0; width: 44px; height: 44px; border-radius: 7px; background: var(--img) center 30% / cover; }
  .rep-foot[b-sefds06vwx] { margin-top: 12px; }
  @media (max-width: 1220px) {
    .rep-pair[b-sefds06vwx] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  }
  @media (max-width: 760px) {
    .rep-bars li[b-sefds06vwx] { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; }
    .rep-bars .rep-ico[b-sefds06vwx] { grid-column: 1; grid-row: 1 / span 2; }
    .rep-bars li > span:nth-child(2)[b-sefds06vwx] { grid-column: 2; grid-row: 1; }
    .rep-bars i[b-sefds06vwx] { grid-column: 2 / -1; grid-row: 2; }
    .rep-bars b[b-sefds06vwx] { grid-column: 3; grid-row: 1; text-align: right; }
  }

  /* Hero: an owner at work at dawn, with what youdoyou does for her over the photo (a review in,
     a post waiting for Approve, then booked). Replaces the moving wall of posts (.wall, .wall-row,
     .hero-motion), whose rules above are no longer used. */
  .hero-scene[b-sefds06vwx] { position: relative; z-index: 1; grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .hero-scene img[b-sefds06vwx] { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% center; border-radius: 18px; box-shadow: var(--e3); }
  .hs-card[b-sefds06vwx] { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(255,255,255,.97); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(13,27,46,.4); font-size: 13px; line-height: 1.4; }
  .hs-card p[b-sefds06vwx] { margin: 0; }
  .hs-card small[b-sefds06vwx] { color: var(--muted); font-size: 11.5px; }
  .hs-stars[b-sefds06vwx] { display: block; width: 70px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") left center / 14px 13px repeat-x; }
  .hs-review[b-sefds06vwx] { top: 7%; right: -7%; width: 230px; }
  .hs-post[b-sefds06vwx] { top: 40%; left: -12%; width: 250px; }
  .hs-label[b-sefds06vwx] { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--pill); color: var(--blue); font-size: 11px; font-weight: 700; }
  .hs-approve[b-sefds06vwx] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 4px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; }
  .hs-approve svg[b-sefds06vwx], .hs-tick svg[b-sefds06vwx] { width: 14px; height: 14px; }
  .hs-sched[b-sefds06vwx] { right: -5%; bottom: 8%; flex-direction: row; align-items: center; gap: 10px; }
  .hs-sched > span:last-child[b-sefds06vwx] { display: flex; flex-direction: column; }
  .hs-tick[b-sefds06vwx] { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #1f9d45; color: #fff; }
  .hero-scene figcaption[b-sefds06vwx] { position: absolute; left: 14px; bottom: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; }
  /* The words and the form as one block, centred against the photo: the photo spanned their two
     rows and pushed the form far below the words. */
  @media (min-width: 761px) {
    .hero > .shell[b-sefds06vwx] { grid-template-rows: 1fr auto auto 1fr; }
    .hero-in[b-sefds06vwx] { grid-row: 2; }
    .ask-band[b-sefds06vwx] { grid-row: 3; }
    .hero-scene[b-sefds06vwx] { grid-row: 1 / span 4; }
  }
  @media (max-width: 1120px) {
    .hs-card[b-sefds06vwx] { padding: 10px 12px; font-size: 12px; }
    .hs-review[b-sefds06vwx] { right: -4%; width: 190px; }
    .hs-post[b-sefds06vwx] { left: -8%; width: 200px; }
    .hs-sched[b-sefds06vwx] { right: -3%; }
  }
  @media (max-width: 760px) {
    .hero-scene[b-sefds06vwx] { order: 3; margin-top: 28px; }
    .hero-scene img[b-sefds06vwx] { aspect-ratio: 5 / 6; border-radius: 14px; }
    .hs-review[b-sefds06vwx] { top: 12px; right: 12px; width: 180px; }
    .hs-post[b-sefds06vwx] { top: auto; bottom: 66px; left: 12px; width: 210px; }
    .hs-sched[b-sefds06vwx] { right: 12px; bottom: 12px; }
    .hero-scene figcaption[b-sefds06vwx] { top: 12px; left: 12px; bottom: auto; }
  }

  /* One kind of label over each section heading, as How it works and the advisor have. */
  .lp-pill[b-sefds06vwx] { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--pill); color: var(--blue); font-size: 13px; font-weight: 700; }
  .rates-head .lp-pill[b-sefds06vwx] { background: #fff; }
  /* The advisor follows the free analysis on the same white: less air under it. */
  .adv[b-sefds06vwx] { padding-bottom: 104px; }
  @media (max-width: 760px) {
    .adv[b-sefds06vwx] { padding: 16px 0 64px; }
  }

  /* Recognition. The page celebrates the work small businesses already do: the hours on each
     kind of business, a line over the street as it opens, and a welcoming form. */
  .kinds-h[b-sefds06vwx] { margin: 0 auto 22px; max-width: 46ch; color: var(--muted); font-size: 16px; line-height: 1.5; text-align: center; }
  .kinds-h b[b-sefds06vwx] { display: block; margin-bottom: 2px; color: var(--ink); font-size: 20px; letter-spacing: -0.01em; }
  .kinds-ph[b-sefds06vwx] { position: relative; display: block; width: 100%; max-width: 84px; }
  .kinds-ph img[b-sefds06vwx] { max-width: none; }
  .kinds-ph em[b-sefds06vwx] { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, #ffb340, #ff8a3d); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(180,90,0,.6); }
  .kinds-row li[b-sefds06vwx] { gap: 14px; }

  /* Wide screens: the street extended to the left (a tradie at the ute, the florist at the van,
     the barista at the shutter on the right), so its line sits on open road and sky, over nobody. */
  .signup-street[b-sefds06vwx] { height: 520px; margin-bottom: 64px; }
  .signup-street picture[b-sefds06vwx] { display: block; height: 100%; }
  .signup-street img[b-sefds06vwx] { object-position: left 45%; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
  .signup-street[b-sefds06vwx]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9,20,34,.58) 0%, rgba(9,20,34,.3) 28%, rgba(9,20,34,0) 48%); }
  .signup-street[b-sefds06vwx]::after { content: none; }
  .street-say[b-sefds06vwx] { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-bottom: 56px; color: #fff; }
  .street-big[b-sefds06vwx] { margin: 0; max-width: 9ch; font-size: clamp(38px, 3.6vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
  .street-sub[b-sefds06vwx] { margin: 0; max-width: 28ch; font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.3); }

  /* The form: a warm card that greets, a dawn edge on top, softer fields and what you get. */
  .card-form[b-sefds06vwx] { padding: 30px 28px 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(90deg, #ffb340 0%, #ff7e5f 45%, #7aa7e8 100%) top / 100% 6px no-repeat, #fff; box-shadow: 0 24px 60px -28px rgba(13,27,46,.35), 0 2px 6px rgba(13,27,46,.04); }
  .cf-title[b-sefds06vwx] { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
  .cf-sub[b-sefds06vwx] { color: var(--muted); font-size: 14px; line-height: 1.4; }
  .card-form[b-sefds06vwx]  .bid-input, .card-form[b-sefds06vwx]  .bid-textarea { border-radius: 10px; border-color: transparent; background: #f3f6fa; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .card-form[b-sefds06vwx]  .bid-input:hover, .card-form[b-sefds06vwx]  .bid-textarea:hover { background: #edf1f7; }
  .card-form[b-sefds06vwx]  .bid-input:focus, .card-form[b-sefds06vwx]  .bid-textarea:focus { background: #fff; border-color: var(--blue); }
  .card-form[b-sefds06vwx]  .bid-input[aria-invalid="true"] { background: #fff; border-color: var(--red); }
  .card-form[b-sefds06vwx]  .bid-primary { min-height: 54px; border-radius: 12px; font-size: 16px; box-shadow: 0 12px 24px -12px rgba(11,92,202,.75); }
  .card-form[b-sefds06vwx]  .bid-primary:not(:disabled)::after { content: "\2192"; margin-left: 8px; transition: transform .2s ease; }
  .card-form[b-sefds06vwx]  .bid-primary:hover:not(:disabled)::after { transform: translateX(3px); }
  .card-form[b-sefds06vwx]  .bid-secondary, .card-form[b-sefds06vwx]  .bid-candidate, .card-form[b-sefds06vwx]  .bid-chip, .card-form[b-sefds06vwx]  .bid-message, .card-form[b-sefds06vwx]  .bid-review { border-radius: 10px; }
  .card-form .card-foot[b-sefds06vwx] { margin-top: 14px; }

  @media (max-width: 760px) {
    .kinds-h[b-sefds06vwx] { margin-bottom: 18px; font-size: 14px; }
    .kinds-h b[b-sefds06vwx] { font-size: 17px; }
    .kinds-ph[b-sefds06vwx] { max-width: 64px; }
    .kinds-ph em[b-sefds06vwx] { font-size: 9.5px; padding: 2px 5px; }
    .kinds-row[b-sefds06vwx] { row-gap: 20px; }
    /* The words go under the photo on a phone: over a short band they covered the people. */
    /* Phones: the photo as taken, every person in view, and its line under it. */
    .signup-street[b-sefds06vwx] { height: auto; margin-bottom: 28px; }
    .signup-street picture[b-sefds06vwx] { height: auto; }
    .signup-street img[b-sefds06vwx] { height: 250px; object-position: center 50%; }
    .signup-street[b-sefds06vwx]::before { content: none; }
    .street-say[b-sefds06vwx] { position: static; gap: 8px; padding-top: 12px; padding-bottom: 0; color: var(--ink); }
    .street-big[b-sefds06vwx] { max-width: none; font-size: 30px; color: var(--ink); text-shadow: none; }
    .street-sub[b-sefds06vwx] { max-width: none; font-size: 15px; color: var(--muted); text-shadow: none; }
    .card-form[b-sefds06vwx] { padding: 24px 18px 20px; border-radius: 16px; }
    .cf-head[b-sefds06vwx] { margin-bottom: 18px; }
    .cf-title[b-sefds06vwx] { font-size: 17px; }
    .cf-sub[b-sefds06vwx] { font-size: 13px; }

    /* How it works as a swipe row: each step a card with its number and title, and the next one
       peeking in. Stacked, the three pictures took three screens. */
    .hiw[b-sefds06vwx] { padding: 44px 0 40px; }
    .hiw-head[b-sefds06vwx] { margin-bottom: 20px; }
    .hiw-head h2[b-sefds06vwx] { font-size: 27px; }
    .hiw-steps[b-sefds06vwx] { display: flex; gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad); scrollbar-width: none; }
    .hiw-steps[b-sefds06vwx]::-webkit-scrollbar { display: none; }
    .hiw-step[b-sefds06vwx] { display: flex; flex-direction: column; flex: 0 0 84%; padding: 16px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--e1); }
    .hiw-step:not(:last-child)[b-sefds06vwx]::before { content: none; }
    .hiw-copy[b-sefds06vwx] { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 0; margin-bottom: 12px; }
    .hiw-n[b-sefds06vwx] { position: static; width: 30px; height: 30px; font-size: 14px; box-shadow: none; }
    .hiw-copy h3[b-sefds06vwx] { margin: 0; font-size: 17px; }
    .hiw-copy p[b-sefds06vwx] { grid-column: 2; font-size: 13.5px; }
    .hiw-visual[b-sefds06vwx] { flex: 1; height: auto; max-width: none; padding: 14px; border: 0; border-radius: 12px; background: var(--ground); box-shadow: none; }
    .hiw-v-read .hiw-review[b-sefds06vwx], .hiw-v-read .hiw-found[b-sefds06vwx], .hiw-post[b-sefds06vwx], .hiw-sched li[b-sefds06vwx] { background-color: #fff; }
    .hiw-review-b[b-sefds06vwx] { display: none; }
    .hiw-post-img[b-sefds06vwx] { height: 84px; }
    .hiw-actions[b-sefds06vwx] { margin-top: 10px; }
    .hiw-edit[b-sefds06vwx], .hiw-ok[b-sefds06vwx] { height: 34px; }
    .hiw-v-week[b-sefds06vwx] { gap: 10px; padding: 14px; }
    .hiw-days span[b-sefds06vwx] { height: 26px; }
    .hiw-sched i[b-sefds06vwx] { width: 38px; height: 38px; }
    .hiw-note[b-sefds06vwx] { margin-top: 10px; }
  }

  /* The free analysis in order: the heading, then what the owner gives and what they get back,
     side by side on wide screens and one after the other on phones. The form sat lower than the
     heading on the right and the sample under the heading on the left, which did not read in
     order. */
  .sf-step[b-sefds06vwx] { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ink); font-size: 15.5px; font-weight: 700; }
  .sf-n[b-sefds06vwx] { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; }
  .sf-step-get .sf-n[b-sefds06vwx] { background: #1f9d45; }
  @media (min-width: 1001px) {
    .signup-in[b-sefds06vwx] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0 48px; align-items: start; }
    .signup-lead[b-sefds06vwx] { grid-column: 1 / -1; grid-row: 1; position: static; max-width: 780px; margin-bottom: 36px; }
    .sf-step-give[b-sefds06vwx] { grid-column: 1; grid-row: 2; }
    .sf-step-get[b-sefds06vwx] { grid-column: 2; grid-row: 2; }
    .card-form[b-sefds06vwx] { grid-column: 1; grid-row: 3; position: static; margin: 0; }
    .signup-in > .rep[b-sefds06vwx] { grid-column: 2; grid-row: 3; margin: 0; }
  }
  @media (max-width: 1000px) {
    .signup-in[b-sefds06vwx] { display: flex; flex-direction: column; gap: 0; }
    .signup-lead[b-sefds06vwx] { position: static; margin-bottom: 28px; }
    .card-form[b-sefds06vwx] { position: static; width: 100%; margin: 0 0 32px; }
    .signup-in > .rep[b-sefds06vwx] { margin: 0; }
  }

  /* The form, plainly first: the jump lands on the heading and the form together, the form takes
     the wider column, and the card is white with a thin dawn edge and one strong button. A blue
     head, a glow, a badge and a Start here tag on top of that was too much. */
  #analyze-start[b-sefds06vwx] { scroll-margin-top: calc(var(--mast-h) + 28px); }
  .street-cta[b-sefds06vwx] { align-self: flex-start; margin-top: 8px; background: #fff; color: var(--ink); border-color: #fff; }
  .street-cta:hover[b-sefds06vwx] { background: #eef2f7; }
  .card-form[b-sefds06vwx] { border: 1px solid #cfdcee; background: linear-gradient(90deg, #ffb340 0%, #ff7e5f 45%, #7aa7e8 100%) top / 100% 4px no-repeat, #fff; box-shadow: 0 22px 50px -30px rgba(11,92,202,.4), 0 2px 6px rgba(13,27,46,.04); }
  .cf-head[b-sefds06vwx] { display: block; margin-bottom: 20px; }
  .cf-title[b-sefds06vwx] { display: block; font-size: 21px; }
  .cf-sub[b-sefds06vwx] { display: block; margin-top: 4px; }
  @media (min-width: 1001px) {
    .signup-in[b-sefds06vwx] { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  }
  @media (max-width: 760px) {
    .street-cta[b-sefds06vwx] { display: none; }
    .cf-title[b-sefds06vwx] { font-size: 19px; }
  }

  /* The sample as a printed report: a sheet with another just behind it, a masthead rule, the
     business as a title block, numbered sections between hairlines, a table of what is praised
     and a footer. It was rounded web cards with pills and icons. The old .rep-* card rules above
     are no longer used by it. */
  .rep[b-sefds06vwx] { position: relative; isolation: isolate; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .doc[b-sefds06vwx] { position: relative; padding: 26px 30px 16px; background: #fff; border: 1px solid #e1e4e8; border-radius: 3px; box-shadow: 0 1px 2px rgba(13,27,46,.06), 0 22px 44px -26px rgba(13,27,46,.38); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
  .doc[b-sefds06vwx]::before { content: ""; position: absolute; inset: 7px -7px -7px 7px; z-index: -1; background: #fbfbfc; border: 1px solid #e1e4e8; border-radius: 3px; }
  .doc-top[b-sefds06vwx] { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 2px solid var(--ink); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .doc-brand[b-sefds06vwx] { color: var(--blue); font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-transform: none; }
  .doc-kind[b-sefds06vwx] { flex: 1; }
  .doc-sample[b-sefds06vwx] { padding: 1px 6px; border: 1px solid #c9ced6; border-radius: 2px; font-size: 10px; }
  .doc-title[b-sefds06vwx] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 0 14px; border-bottom: 1px solid #e1e4e8; }
  .doc-biz[b-sefds06vwx] { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 700; line-height: 1.15; }
  .doc-title small[b-sefds06vwx] { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
  .doc-score[b-sefds06vwx] { display: grid; justify-items: end; gap: 3px; text-align: right; }
  .doc-score b[b-sefds06vwx] { font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1; }
  .doc-score small[b-sefds06vwx] { color: var(--muted); font-size: 11.5px; }
  .doc-sec[b-sefds06vwx] { padding: 14px 0 15px; border-bottom: 1px solid #e1e4e8; }
  .doc-sec p[b-sefds06vwx] { margin: 0; }
  .doc-h[b-sefds06vwx] { display: flex; align-items: baseline; gap: 10px; margin: 0 0 9px !important; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .doc-h span[b-sefds06vwx] { color: var(--blue); font-variant-numeric: tabular-nums; }
  .doc-table[b-sefds06vwx] { width: 100%; border-collapse: collapse; font-size: 13px; }
  .doc-table th[b-sefds06vwx], .doc-table td[b-sefds06vwx] { padding: 7px 0; border-bottom: 1px dotted #d3d8df; text-align: left; font-weight: 500; vertical-align: middle; }
  .doc-table thead th[b-sefds06vwx] { padding-top: 0; border-bottom: 1px solid #c9ced6; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .doc-table tbody th[b-sefds06vwx] { width: 46%; padding-right: 12px; font-weight: 600; }
  .doc-table td:nth-child(2)[b-sefds06vwx] { padding-right: 14px; }
  .doc-table th:last-child[b-sefds06vwx], .doc-table td:last-child[b-sefds06vwx] { width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
  .doc-table td i[b-sefds06vwx] { display: block; height: 7px; background: #edf0f3; }
  .doc-table td i[b-sefds06vwx]::before { content: ""; display: block; width: var(--w); height: 100%; background: #1f9d6b; }
  .doc-quote[b-sefds06vwx] { margin: 12px 0 0; padding: 1px 0 1px 13px; border-left: 3px solid #1f9d6b; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-style: italic; }
  .doc-quote cite[b-sefds06vwx] { display: block; margin-top: 4px; color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11.5px; font-style: normal; }
  .doc-note[b-sefds06vwx] { margin-top: 9px !important; padding: 7px 10px; border-left: 3px solid var(--blue); background: #f3f6fb; }
  .doc-ideas[b-sefds06vwx] { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: idea; }
  .doc-ideas li[b-sefds06vwx] { display: grid; grid-template-columns: 16px 38px minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 600; counter-increment: idea; }
  .doc-ideas li[b-sefds06vwx]::before { content: counter(idea) "."; color: var(--muted); font-variant-numeric: tabular-nums; }
  .doc-ideas i[b-sefds06vwx] { width: 38px; height: 38px; border-radius: 2px; background: var(--img) center 30% / cover; }
  .doc-foot[b-sefds06vwx] { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
  .rep > .rep-foot[b-sefds06vwx] { margin-top: 16px; }

  /* Less white space: the advisor's photo sits under its words and the chat stands alone beside
     them, and the questions' photo is landscape. Both were tall portraits that made one column
     far taller than the other. */
  .adv-in[b-sefds06vwx] { align-items: center; }
  .adv-lead .adv-photo[b-sefds06vwx] { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin-top: 4px; object-position: center 35%; }
  .adv-sub[b-sefds06vwx] { margin-bottom: 24px; }
  .adv-visual .adv-chat[b-sefds06vwx] { width: 100%; margin: 0; }
  .qa-photo[b-sefds06vwx] { max-width: 360px; aspect-ratio: 3 / 2; object-position: center 40%; }
  @media (max-width: 760px) {
    .doc[b-sefds06vwx] { padding: 20px 16px 12px; }
    .doc[b-sefds06vwx]::before { inset: 5px -5px -5px 5px; }
    .doc-biz[b-sefds06vwx] { font-size: 20px; }
    .doc-score b[b-sefds06vwx] { font-size: 24px; }
    .doc-table tbody th[b-sefds06vwx] { width: 50%; }
    .doc-kind[b-sefds06vwx] { font-size: 10px; }
    .adv-lead .adv-photo[b-sefds06vwx] { max-width: none; }
  }
/* /Pages/Legal.razor.rz.scp.css */
.legal-header[b-ui22ibawje] {
    width: min(1120px, calc(100% - 48px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--line);
}

.legal-brand[b-ui22ibawje] {
    /* The same wordmark as every other shell in the product. */
    color: var(--blue);
    /* Landing's own .brand is a 50px box; a wordmark is a link home and gets a
       real target, not a bare line of text. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-xl);
    font-weight: 700;
    text-decoration: none;
}

.legal-header nav[b-ui22ibawje] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-header nav a[b-ui22ibawje] {
    /* min-height does nothing on an inline box, so these rendered 21px tall
       against the rule's request. inline-flex plus the same 44px target every
       other control in the product uses. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: var(--radius-control);
    color: var(--muted);
    font-size: var(--fs-note);
    font-weight: 600;
    text-decoration: none;
}

.legal-header nav a:hover[b-ui22ibawje],
.legal-header nav a.active[b-ui22ibawje] {
    background: var(--tint-blue);
    color: var(--blue-hover);
}

.legal-shell[b-ui22ibawje] {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto;
    padding: 72px 0 88px;
}

.legal-title[b-ui22ibawje] {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

.legal-title p[b-ui22ibawje] {
    margin: 0 0 12px;
    color: var(--blue);
    /* Sentence case, like every small label on the landing page since the calmer pass. */
    font-size: var(--fs-note);
    font-weight: 600;
}

.legal-title h1[b-ui22ibawje] {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: clamp(36px, 7vw, 56px);
    line-height: 1.05;
    letter-spacing: 0;
}

.legal-title div[b-ui22ibawje] {
    color: var(--muted);
    font-size: var(--fs-note);
}

.legal-intro[b-ui22ibawje] {
    margin: 32px 0 48px;
    color: var(--ink);
    font-size: var(--fs-heading-sm);
    line-height: 1.55;
}

.legal-document section[b-ui22ibawje] {
    padding: 30px 0;
    border-top: 1px solid var(--line);
}

.legal-document section:first-of-type[b-ui22ibawje] {
    border-top: 0;
}

.legal-document h2[b-ui22ibawje] {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: var(--fs-heading-sm);
    line-height: 1.3;
    letter-spacing: 0;
}

.legal-document p[b-ui22ibawje],
.legal-document li[b-ui22ibawje] {
    color: var(--muted);
    font-size: var(--fs-md);
    line-height: 1.7;
}

.legal-document p[b-ui22ibawje] {
    margin: 0 0 14px;
}

.legal-document p:last-child[b-ui22ibawje] {
    margin-bottom: 0;
}

.legal-document ul[b-ui22ibawje] {
    margin: 0;
    padding-left: 22px;
}

/* A sentence after a list ("We do not sell personal information.") sat on its last item. */
.legal-document ul:not(:last-child)[b-ui22ibawje] {
    margin-bottom: 14px;
}

.legal-document li + li[b-ui22ibawje] {
    margin-top: 8px;
}

.legal-document a[b-ui22ibawje],
.legal-footer a[b-ui22ibawje] {
    color: var(--blue);
    text-underline-offset: 3px;
}

/* The footer link stands on its own rather than sitting inside a sentence, so
   it does not get WCAG 2.5.8's inline exception. The landing page gives its own
   footer links a 44.8px box, which is the size this matches. */
.legal-footer a[b-ui22ibawje] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.legal-footer[b-ui22ibawje] {
    width: min(1120px, calc(100% - 48px));
    min-height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--fs-note);
}

@media (max-width: 640px) {
    .legal-header[b-ui22ibawje],
    .legal-shell[b-ui22ibawje],
    .legal-footer[b-ui22ibawje] {
        width: min(100% - 32px, 760px);
    }

    .legal-header[b-ui22ibawje] {
        min-height: 64px;
    }

    .legal-shell[b-ui22ibawje] {
        padding: 48px 0 64px;
    }

    .legal-intro[b-ui22ibawje] {
        margin: 24px 0 36px;
        font-size: var(--fs-lg);
    }

    .legal-document section[b-ui22ibawje] {
        padding: 24px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-header nav a[b-ui22ibawje] {
        transition: none;
    }
}
/* /Pages/Library.razor.rz.scp.css */
.library-header[b-70wiifctgm] {
    align-items: flex-end;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 18px;
}

.library-header h1[b-70wiifctgm],
.library-header p[b-70wiifctgm],
.library-state p[b-70wiifctgm],
.library-preview-dialog h2[b-70wiifctgm],
.library-preview-dialog p[b-70wiifctgm],
.library-delete-dialog h2[b-70wiifctgm],
.library-delete-dialog p[b-70wiifctgm] {
    margin: 0;
}

.library-header h1[b-70wiifctgm] {
    font-size: var(--fs-2xl);
    line-height: 1.2;
}

.library-header p[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-top: 4px;
}

.library-header-actions[b-70wiifctgm],
.library-view-controls[b-70wiifctgm],
.library-media-actions[b-70wiifctgm],
.library-preview-dialog footer[b-70wiifctgm],
.library-delete-dialog > div[b-70wiifctgm] {
    align-items: center;
    display: flex;
    gap: 8px;
}

.library-upload-control[b-70wiifctgm] { position: relative; overflow: hidden; }
/* Even-width digits: "Uploading 1 of 12..." and "Uploading 10 of 12..." nudged Create post along
   each count. Two classes, as .library-button's font shorthand below resets it. */
.library-button.library-upload-control[b-70wiifctgm] { font-variant-numeric: tabular-nums; }
.library-upload-control:focus-within[b-70wiifctgm] { outline: 2px solid var(--blue); outline-offset: 3px; }
.library-upload-control[b-70wiifctgm]  .library-file-input {
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    inset: 0;
    width: 100%;
    cursor: pointer;
}

.library-button[b-70wiifctgm] {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    text-decoration: none;
}

.library-button.primary[b-70wiifctgm] {
    background: var(--accent);
    color: #fff;
}

.library-button.primary:hover:not(:disabled)[b-70wiifctgm] {
    background: var(--accent-dark);
}

.library-button.secondary[b-70wiifctgm] {
    background: #fff;
    border-color: var(--border);
    color: var(--text-primary);
}

.library-button.secondary:hover:not(:disabled)[b-70wiifctgm] {
    background: var(--tint-blue);
}

.library-button.danger[b-70wiifctgm] {
    background: var(--red-ink);
    color: #fff;
}

.library-button.disabled[b-70wiifctgm],
.library-button:disabled[b-70wiifctgm],
.library-button[aria-disabled="true"][b-70wiifctgm] {
    cursor: not-allowed;
    opacity: .55;
}

.library-page[b-70wiifctgm] {
    min-width: 0;
}

.library-alert[b-70wiifctgm] {
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    margin-bottom: 16px;
    padding: 10px 12px;
}

.library-alert.success[b-70wiifctgm] {
    background: var(--tint-green);
    border-color: var(--green-ink);
    color: var(--green-ink);
}

.library-alert.error[b-70wiifctgm] {
    background: var(--tint-red);
    border-color: var(--tint-red-line);
    color: var(--red-ink);
}

.library-alert.warning[b-70wiifctgm] {
    background: var(--tint-amber);
    border-color: var(--tint-amber-line);
    color: var(--amber-ink);
}

.library-alert a[b-70wiifctgm] {
    color: inherit;
    font-weight: 700;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.library-controls[b-70wiifctgm] {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(190px, 1fr) auto;
    margin-bottom: 18px;
}

.library-search[b-70wiifctgm] {
    position: relative;
}

.library-search svg[b-70wiifctgm] {
    fill: none;
    height: 17px;
    left: 11px;
    position: absolute;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
}

.library-search input[b-70wiifctgm],
.library-view-controls select[b-70wiifctgm] {
    background: #fff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    min-height: 44px;
    outline: none;
}

.library-search input[b-70wiifctgm] {
    padding: 8px 12px 8px 36px;
    width: 100%;
}

.library-view-controls select[b-70wiifctgm] {
    padding: 8px 30px 8px 10px;
}

.library-search input:focus[b-70wiifctgm],
.library-view-controls select:focus[b-70wiifctgm] {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.library-filter-tabs[b-70wiifctgm] {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
    /* A strip that scrolls sideways clips on every side, which cut the top off a focused
       filter's ring. Room for the ring inside, given back by the margin: nothing moves. */
    margin: -5px;
    padding: 5px 5px 9px;
}

.library-filter-tabs[b-70wiifctgm]::-webkit-scrollbar {
    height: 4px;
}
.library-filter-tabs[b-70wiifctgm]::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }

.library-filter-tabs button[b-70wiifctgm],
.library-view-toggle button[b-70wiifctgm],
.library-media-actions button[b-70wiifctgm],
.library-preview-dialog header button[b-70wiifctgm],
.library-storage a[b-70wiifctgm] {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    text-decoration: none;
}

.library-filter-tabs button[b-70wiifctgm] {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--ink-soft);
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    font-weight: 650;
    min-height: 44px; min-width: 44px;
    padding: 7px 11px;
}

.library-filter-tabs button.active[b-70wiifctgm] {
    background: var(--tint-blue);
    border-color: var(--accent);
    color: var(--blue);
}

.library-view-toggle[b-70wiifctgm] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    display: flex;
    padding: 0;
}

.library-view-toggle button[b-70wiifctgm],
.library-media-actions button[b-70wiifctgm],
.library-preview-dialog header button[b-70wiifctgm] {
    align-items: center;
    border-radius: var(--radius-control);
    color: var(--ink-soft);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
}

.library-view-toggle button.active[b-70wiifctgm] {
    background: var(--line);
    color: var(--ink);
}

.library-view-toggle svg[b-70wiifctgm],
.library-media-actions svg[b-70wiifctgm],
.library-preview-dialog header svg[b-70wiifctgm] {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

.library-state[b-70wiifctgm] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-height: 180px;
    padding: 28px 20px;
    text-align: center;
}

.library-state strong[b-70wiifctgm] {
    color: var(--text-primary);
    font-size: var(--fs-md);
    /* It repeats the search, which can be one long word. */
    overflow-wrap: anywhere;
}

/* Website photos that match sit right under it, so it takes a line, not a 180px box. */
.library-state.empty.has-below[b-70wiifctgm] {
    min-height: 0;
    padding: 16px 20px;
}

/* The empty library takes the first file itself: the file input covers the box, so a drop or a
   click anywhere on it picks the file, and the dashed edge says so. */
.library-drop[b-70wiifctgm] {
    background: #fff;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 240px;
    overflow: hidden;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.library-drop:hover[b-70wiifctgm],
.library-drop.drag-over[b-70wiifctgm] {
    background: rgba(var(--blue-rgb), 0.04);
    border-color: var(--blue);
}

.library-drop:focus-within[b-70wiifctgm] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.library-drop.disabled[b-70wiifctgm] {
    cursor: default;
    opacity: 0.7;
}

.library-drop > svg[b-70wiifctgm] {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.library-drop > span:not(.library-button)[b-70wiifctgm] {
    max-width: 380px;
    text-wrap: pretty;
}

.library-drop > .library-button[b-70wiifctgm] {
    margin-top: 6px;
}

/* Files dragged over a library that has files: the whole window takes the drop. */
.library-page-drop[b-70wiifctgm] {
    align-items: center;
    background: rgba(var(--blue-rgb), 0.08);
    border: 2px dashed var(--blue);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 900;
}

/* Between drags: still laid out, so the input in it can be read and can take the next drop,
   but unseen and letting every click through to the page. */
.library-page-drop.closed[b-70wiifctgm] {
    opacity: 0;
    pointer-events: none;
}

.library-page-drop.refused[b-70wiifctgm] {
    background: rgba(15, 23, 42, 0.12);
    border-color: var(--line-strong);
}

/* Only the label and its input are drop targets, so moving over the card does not end the drag. */
.library-page-drop > .library-page-drop-card[b-70wiifctgm] {
    align-items: center;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    display: flex;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 18px 22px;
    pointer-events: none;
}

.library-page-drop-card svg[b-70wiifctgm] {
    flex: 0 0 auto;
    fill: none;
    height: 26px;
    stroke: var(--blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 26px;
}

.library-page-drop-card strong[b-70wiifctgm] {
    text-wrap: balance;
}

.library-page-drop.refused .library-page-drop-card svg[b-70wiifctgm] {
    stroke: var(--text-secondary);
}

.library-page-drop[b-70wiifctgm]  .library-file-input {
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

/* A phone has nothing to drop, so a touch screen gets the sentence about choosing. */
.library-drop-touch[b-70wiifctgm] {
    display: none;
}

@media (pointer: coarse) {
    .library-drop-mouse[b-70wiifctgm] {
        display: none;
    }

    .library-drop-touch[b-70wiifctgm] {
        display: inline;
    }
}

.library-drop[b-70wiifctgm]  .library-file-input {
    cursor: pointer;
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}
.library-state.error[b-70wiifctgm] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* One sentence about a secondary source: a line, not a 180px box. */
.library-discovered .library-state.error[b-70wiifctgm] {
    align-items: flex-start;
    min-height: 0;
    padding: 12px 16px;
    text-align: left;
}

.library-discovered .library-state.error p[b-70wiifctgm] {
    margin: 0;
}

.library-results-heading[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-bottom: 10px;
}

.library-media.grid[b-70wiifctgm] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.library-media.list[b-70wiifctgm] {
    display: grid;
    gap: 8px;
}

.library-media-item[b-70wiifctgm] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
    overflow: hidden;
}

.library-media.grid .library-media-item[b-70wiifctgm] {
    display: flex;
    flex-direction: column;
}

/* The action row sits at the foot of every card, so a row of cards lines up whether or not a
   card has a usage line. */
.library-media.grid .library-media-copy[b-70wiifctgm] { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); align-content: space-between; justify-content: stretch; gap: 8px; container: library-card / inline-size; }
.library-media.grid .library-media-actions[b-70wiifctgm] { justify-content: flex-end; }

/* The link's words line up with the name above; its padding reaches into the card's. */
.library-media.grid .library-use[b-70wiifctgm] { margin-left: -8px; }

/* Five to a row (1366 wide) the row needed 201px of 182, and being right-aligned it spilled out
   of the card's left edge, so "Use in a post" sat 19px left of everything above it. A narrow
   card says "New post" and packs its two icons closer. */
@container library-card (max-width: 194px) {
    .library-media.grid .library-use .library-use-long[b-70wiifctgm] { display: none; }
    .library-media.grid .library-use .library-use-short[b-70wiifctgm] { display: inline; }
    .library-media.grid .library-media-actions[b-70wiifctgm] { gap: 4px; }
    .library-media.grid .library-media-actions button[b-70wiifctgm] { width: 40px; }
}

.library-media.list .library-media-item[b-70wiifctgm] {
    align-items: center;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
}

.library-thumbnail[b-70wiifctgm] {
    aspect-ratio: 1 / 1;
    background: var(--line);
    border: 0;
    cursor: pointer;
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

.library-media.list .library-thumbnail[b-70wiifctgm] {
    height: 92px;
}

.library-thumbnail:disabled[b-70wiifctgm] {
    cursor: default;
}

/* The card clips and the photo fills it to the edges, so a ring outside the photo showed only
   as a line along its bottom. It goes inside, a little heavier to hold up over a photo. */
.library-thumbnail:focus-visible[b-70wiifctgm] {
    outline: 3px solid var(--blue) !important;
    outline-offset: -3px !important;
}

.library-thumbnail img[b-70wiifctgm],
.library-thumbnail video[b-70wiifctgm] {
    /* Inline, the image sat on a text baseline and the gap under it overflowed the tile. */
    display: block;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
}

.library-media-placeholder[b-70wiifctgm] {
    align-items: center;
    color: var(--line-field);
    display: flex;
    height: 100%;
    justify-content: center;
}

.library-media-placeholder svg[b-70wiifctgm] {
    fill: none;
    height: 32px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 32px;
}

.library-media-badge[b-70wiifctgm],
.library-duration[b-70wiifctgm],
.library-processing[b-70wiifctgm] {
    border-radius: var(--radius-xs);
    font-size: var(--fs-2xs);
    font-weight: 750;
    position: absolute;
}

.library-media-badge[b-70wiifctgm] {
    background: rgba(255, 255, 255, .94);
    color: var(--blue);
    left: 7px;
    padding: 4px 6px;
    top: 7px;
}

.library-duration[b-70wiifctgm] {
    align-items: center;
    background: rgba(20, 23, 28, .8);
    bottom: 7px;
    color: #fff;
    display: inline-flex;
    gap: 3px;
    padding: 3px 5px;
    right: 7px;
}

.library-duration svg[b-70wiifctgm] {
    fill: currentColor;
    height: 10px;
    width: 10px;
}

.library-processing[b-70wiifctgm] {
    background: rgba(255, 255, 255, .94);
    bottom: 7px;
    color: var(--ink-soft);
    left: 7px;
    padding: 4px 6px;
}

/* LIB-1 — read-only "From your website" group. Reuses the asset grid's
   geometry so the two read as one page, but never carries the action row:
   these items have no MediaAssetId to act on. */
.library-discovered[b-70wiifctgm] {
    margin-top: 28px;
}

.library-discovered-heading[b-70wiifctgm] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 10px;
}

.library-discovered-heading h2[b-70wiifctgm] {
    font-size: var(--fs-sm);
    font-weight: 750;
    margin: 0;
}

.library-discovered-heading span[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

/* Non-interactive twin of .library-thumbnail: a div, not a button. */
.library-thumbnail.static[b-70wiifctgm] {
    aspect-ratio: 1 / 1;
    background: var(--line);
    cursor: default;
    display: block;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.library-thumbnail.static img[b-70wiifctgm] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.library-media-item.readonly[b-70wiifctgm] {
    background: var(--bg, #fff);
}

/* A website photo's one action, in the look of the cards' "Use in a post", from the name's edge. */
.library-website-save[b-70wiifctgm] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--blue);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 2px 0 0 -8px;
    min-height: 44px;
    padding: 0 8px;
    white-space: nowrap;
}

.library-website-save:hover:not(:disabled)[b-70wiifctgm] {
    background: var(--tint-blue);
}

.library-website-save:disabled[b-70wiifctgm] {
    color: var(--text-secondary);
    cursor: default;
}

.library-website-save:focus-visible[b-70wiifctgm] {
    outline: 2px solid var(--blue);
    outline-offset: 1px !important;
}

/* As tall as the button it replaces, so the card keeps its height. */
.library-media-copy span.library-website-saved[b-70wiifctgm] {
    align-items: center;
    color: var(--green-ink);
    display: flex;
    font-weight: 700;
    margin-top: 2px;
    min-height: 44px;
}

.library-media-copy span.library-website-error[b-70wiifctgm] {
    color: var(--red-ink);
    white-space: normal;
}

.library-media-badge.subtle[b-70wiifctgm] {
    background: rgba(20, 23, 28, .72);
    color: #fff;
}

.library-media-copy[b-70wiifctgm] {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    padding: 10px;
}

.library-media-copy > div:first-child[b-70wiifctgm] {
    min-width: 0;
}

.library-media-copy strong[b-70wiifctgm],
.library-media-copy span[b-70wiifctgm] {
    display: block;
}

.library-media-copy strong[b-70wiifctgm] {
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two lines on a card: AI photos are named by what they show ("A steaming burger on the counter,
   natural light"), and one line cut three different photos to the same "A steaming burger on the ...". */
.library-media.grid .library-media-copy strong[b-70wiifctgm] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: break-word;
    white-space: normal;
}

.library-media-copy span[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-media-actions[b-70wiifctgm] {
    flex: 0 0 auto;
}

.library-media-actions button:hover:not(:disabled)[b-70wiifctgm] {
    background: var(--line);
}

/* Quiet until pointed at: eleven red bins read as a warning on every card. */
.library-media-actions button.danger:hover:not(:disabled)[b-70wiifctgm],
.library-media-actions button.danger:focus-visible[b-70wiifctgm] {
    background: var(--tint-red);
    color: var(--red-ink);
}

.library-use[b-70wiifctgm] {
    align-items: center;
    border-radius: var(--radius-control);
    color: var(--blue);
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-right: auto;
    min-height: 44px;
    padding: 0 8px;
    text-decoration: none;
    white-space: nowrap;
}

.library-use:hover[b-70wiifctgm] {
    background: var(--tint-blue);
}

/* The card's meta rules style every span in it; the link's two labels keep the link's look. */
.library-use .library-use-long[b-70wiifctgm],
.library-use .library-use-short[b-70wiifctgm] {
    color: inherit;
    display: inline;
    font-size: inherit;
    margin: 0;
    overflow: visible;
}

.library-use .library-use-short[b-70wiifctgm] {
    display: none;
}

/* The link sits 3px in from the card's clipped edge; the ring has to fit in that. */
.library-use:focus-visible[b-70wiifctgm] {
    outline: 2px solid var(--blue);
    outline-offset: 1px !important;
}

/* Up to three lines (a 320 phone needs them): one line cut "Scheduled tomorrow at 9:30 am" to "at 9:30 ...", the time
   without its am or pm. */
.library-media-copy small.library-usage[b-70wiifctgm] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    border-radius: var(--radius-xs);
    display: -webkit-inline-box;
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 6px;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 7px;
    vertical-align: top;
}

.library-preview-usage[b-70wiifctgm] {
    border-radius: var(--radius-xs);
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 6px;
    padding: 3px 7px;
}

.library-preview-usage-link[b-70wiifctgm] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    min-height: 24px;
    vertical-align: middle;
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-left: 10px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.library-usage.scheduled[b-70wiifctgm],
.library-usage.plan[b-70wiifctgm] {
    background: var(--tint-blue);
    color: var(--blue);
}

.library-usage.posted[b-70wiifctgm] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.library-usage.draft[b-70wiifctgm] {
    background: var(--line);
    color: var(--ink-soft);
}

.library-delete-dialog .library-delete-consequence[b-70wiifctgm] {
    color: var(--text-primary);
    margin-top: 10px;
}

.library-media-actions button:disabled[b-70wiifctgm] {
    cursor: not-allowed;
    opacity: .45;
}

.library-load-more[b-70wiifctgm] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.library-storage[b-70wiifctgm] {
    align-items: center;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(140px, 1fr) auto;
    margin-top: 28px;
    padding-top: 20px;
}

.library-storage strong[b-70wiifctgm],
.library-storage span[b-70wiifctgm] {
    display: block;
}

.library-storage span[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 3px;
}

.library-storage-track[b-70wiifctgm] {
    background: var(--line);
    border-radius: 4px;
    height: 7px;
    overflow: hidden;
}

.library-storage-track span[b-70wiifctgm] {
    background: var(--accent);
    display: block;
    height: 100%;
    margin: 0;
}

/* Full is the one state that needs a second look, as on the Billing meters. */
.library-storage.is-full .library-storage-track span[b-70wiifctgm] {
    background: var(--orange);
}

.library-storage a[b-70wiifctgm] {
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 700;
    min-height: 44px;
}

.library-preview-dialog[b-70wiifctgm],
.library-delete-dialog[b-70wiifctgm] {
    background: #fff;
    min-width: 0;
    width: 100%;
}

.library-preview-dialog header[b-70wiifctgm] {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px;
}

.library-preview-dialog header > div[b-70wiifctgm] { min-width: 0; }

/* Previous, "3 of 12", Next, then Close: in the header, so nothing sits over a video's controls. */
.library-preview-dialog header > .library-preview-nav[b-70wiifctgm] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}
.library-preview-count[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    /* Clear of the focus rings either side. */
    padding: 0 8px;
    white-space: nowrap;
}

/* On a phone the steps squeezed the name to a word a line, so they take a row above it, with
   Close kept at the right. */
@media (max-width: 480px) {
    .library-preview-dialog header:has(.library-preview-count)[b-70wiifctgm] {
        flex-wrap: wrap;
        gap: 4px;
        padding-top: 10px;
    }
    .library-preview-dialog header:has(.library-preview-count) > .library-preview-nav[b-70wiifctgm] {
        margin-left: -12px;
        order: -1;
        width: calc(100% + 12px);
    }
    .library-preview-nav > [data-testid="library-preview-close"][b-70wiifctgm] { margin-left: auto; }
}
.library-preview-dialog header button[aria-disabled="true"][b-70wiifctgm] {
    cursor: default;
    opacity: 0.35;
}
@media (hover: hover) {
    .library-preview-dialog header button:hover:not([aria-disabled="true"])[b-70wiifctgm] { background: var(--line); color: var(--ink); }
}
.library-preview-dialog h2[b-70wiifctgm] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.library-preview-dialog h2[b-70wiifctgm],
.library-delete-dialog h2[b-70wiifctgm] {
    font-size: var(--fs-heading-sm);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.library-preview-dialog p[b-70wiifctgm],
.library-delete-dialog p[b-70wiifctgm] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.library-preview-dialog .library-dialog-error[b-70wiifctgm],
.library-delete-dialog .library-dialog-error[b-70wiifctgm] { color: var(--red); padding: 12px; margin: 16px; border: 1px solid var(--red); border-radius: var(--radius-xs); line-height: 1.5; }
.library-delete-dialog .library-dialog-error[b-70wiifctgm] { margin-inline: 0; }
.library-preview-dialog .library-preview-note[b-70wiifctgm] { margin: 12px 16px 0; line-height: 1.5; }

.library-preview-media[b-70wiifctgm] {
    align-items: center;
    /* Neutral, so the bars beside a tall photo do not tint how its colours read. They were blue. */
    background: var(--bg-canvas);
    display: flex;
    justify-content: center;
    min-height: 160px;
}

.library-preview-media img[b-70wiifctgm],
.library-preview-media video[b-70wiifctgm] {
    display: block;
    max-height: 62dvh;
    max-width: 100%;
}

/* Its width and height hold its place before it loads; contain keeps its shape when the
   height limit is what stops it, the same way the small copy behind it is laid out. */
.library-preview-media img[width][height][b-70wiifctgm] {
    height: auto;
    object-fit: contain;
}

/* A video with a known shape is sized from it (PreviewVideoStyle); the picture keeps its shape
   if a limit still squeezes the box. */
.library-preview-media video[style*="aspect-ratio"][b-70wiifctgm] {
    object-fit: contain;
}

.library-preview-dialog footer[b-70wiifctgm] {
    justify-content: flex-end;
    padding: 14px 18px 18px;
}

/* Quiet and apart from the rest: the way out of the library, not the next step. */
.library-button.library-preview-delete[b-70wiifctgm] {
    margin-right: auto;
    border-color: transparent;
    background: transparent;
    color: var(--red-ink);
}

.library-button.library-preview-delete:hover:not(:disabled)[b-70wiifctgm] {
    background: var(--tint-red);
}

.library-delete-dialog[b-70wiifctgm] {
    padding: 24px;
}

.library-delete-dialog > div[b-70wiifctgm] {
    justify-content: flex-end;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .library-controls[b-70wiifctgm] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .library-filter-tabs[b-70wiifctgm] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .library-media.grid[b-70wiifctgm] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    }
}

@media (max-width: 680px) {
    .library-header h1[b-70wiifctgm] { font-size: var(--fs-heading); }
    .library-search input[b-70wiifctgm], .library-view-controls select[b-70wiifctgm] { font-size: var(--fs-md); }
    .library-header[b-70wiifctgm] {
        align-items: stretch;
        flex-direction: column;
    }

    .library-header-actions .library-button[b-70wiifctgm] {
        flex: 1 1 0;
    }

    .library-controls[b-70wiifctgm] {
        grid-template-columns: 1fr;
    }

    /* Five chips are a little wider than a phone, and the last one was cut to "Uploa". */
    .library-filter-tabs[b-70wiifctgm] {
        flex-wrap: wrap;
        grid-column: 1;
        grid-row: auto;
        order: 2;
        overflow-x: visible;
    }

    .library-view-controls[b-70wiifctgm] {
        justify-content: space-between;
        order: 3;
    }

    .library-view-controls select[b-70wiifctgm] {
        flex: 1 1 auto;
    }

    .library-media.grid[b-70wiifctgm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .library-storage[b-70wiifctgm] {
        align-items: stretch;
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Where the filter chips wrap, three over two, each row full. Wrapping freely left Uploaded
   alone on a second row under four. Six columns: the first three chips take two each, the
   last two take three each (Library.razor has five filters). */
@media (max-width: 460px) {
    .library-filter-tabs[b-70wiifctgm] {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .library-filter-tabs button[b-70wiifctgm] {
        grid-column: span 2;
        padding-inline: 6px;
        /* Stretched to a cell, a label set at the left left "All" alone in a wide box. */
        justify-content: center;
        text-align: center;
    }

    .library-filter-tabs button:nth-child(n + 4)[b-70wiifctgm] {
        grid-column: span 3;
    }
}

@media (max-width: 430px) {
    .library-header-actions .library-button[b-70wiifctgm] { padding-inline: 10px; }
    .library-preview-dialog h2[b-70wiifctgm] { font-size: var(--fs-lg); }

    .library-media.grid[b-70wiifctgm] {
        gap: 10px;
    }

    .library-media.grid .library-media-copy[b-70wiifctgm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .library-media.list .library-media-copy[b-70wiifctgm] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .library-media.list .library-media-actions[b-70wiifctgm] { justify-content: flex-end; }

    .library-media.grid .library-media-actions[b-70wiifctgm] {
        justify-content: flex-end;
        width: 100%;
    }

    /* A phone card cut its date and its use to "6 Oct 2..." and "Scheduled tomo...". Both wrap;
       the card's actions stay on its bottom line. */
    .library-media.grid .library-media-copy > div:first-child > span[b-70wiifctgm],
    .library-media.grid .library-media-copy small.library-usage[b-70wiifctgm] {
        white-space: normal;
    }

    /* A phone card is too narrow for the post link and both icons. Download stays one tap
       away in the preview. */
    .library-media.grid .library-use + .library-download[b-70wiifctgm] { display: none; }
    .library-media.grid .library-use[b-70wiifctgm] { margin-left: -4px; padding-inline: 4px; }

    .library-media.list .library-media-item[b-70wiifctgm] {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .library-media.list .library-thumbnail[b-70wiifctgm] {
        height: 76px;
    }

    .library-preview-dialog footer[b-70wiifctgm] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* "Use in a new post" sat alone at half width under Download and Edit photo. It takes the
       full row, last as in the page order Tab follows; a lone secondary (a video has no Edit
       photo) fills its row too. */
    .library-preview-dialog footer > .primary[b-70wiifctgm] {
        grid-column: 1 / -1;
    }

    /* only-of-type never matched once Delete joined the footer, so a video's Download sat at half
       width between two full rows. Without Edit photo it is the lone secondary. */
    .library-preview-dialog footer:not(:has([data-testid="library-preview-edit"])) > [data-testid="library-preview-download"][b-70wiifctgm],
    .library-preview-dialog footer > .library-preview-delete[b-70wiifctgm] {
        grid-column: 1 / -1;
    }

    .library-delete-dialog > div[b-70wiifctgm] { display: grid; grid-template-columns: 1fr; }
}

/* On the narrowest phones a list row is too narrow for the post link and both icons, and the
   link slid under the thumbnail. Download stays one tap away in the preview, as on a phone card. */
@media (max-width: 359px) {
    .library-media.list .library-use + .library-download[b-70wiifctgm] { display: none; }
}

/* Below 390 a grid card is too narrow for "Use in a post" beside the bin: the row is pushed to the
   right, so the link was cut off at its start ("se in a post" at 320, the "U" clipped at 360). The
   card says "New post"; its spoken name still says what it does. */
@media (max-width: 389px) {
    .library-media.grid .library-media-actions[b-70wiifctgm] { gap: 4px; }
    .library-media.grid .library-use .library-use-long[b-70wiifctgm] { display: none; }
    .library-media.grid .library-use .library-use-short[b-70wiifctgm] { display: inline; }
}

/* High Contrast drops the colour that marked Manage plan and Save to library as controls. */
@media (forced-colors: active) {
    .library-storage a[b-70wiifctgm],
    .library-website-save:not(:disabled)[b-70wiifctgm] {
        text-decoration: underline;
    }
}

/* A new search, filter or sort on its way: the last results stay, dimmed, until the new ones land. */
.library-workspace.is-updating :is(.library-media, .library-state.empty)[b-70wiifctgm] { opacity: .55; cursor: progress; }
/* A made picture or video that used confirmed product photos: a small tag under the card's words,
   like the usage line, so the list view's two columns (thumbnail, words) stay intact. */
.library-media-copy small.library-product-review-label[b-70wiifctgm] {
    background: var(--tint-purple);
    border-radius: var(--radius-xs);
    color: var(--purple-ink);
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 3px 7px;
    vertical-align: top;
}
/* Beside the usage line when they fit; a wrapped tag starts at the card's edge like the line above. */
.library-media-copy small.library-usage:has(+ small.library-product-review-label)[b-70wiifctgm] { margin-right: 4px; }
.library-product-review[b-70wiifctgm] { padding: 1rem; }
.library-product-review h3[b-70wiifctgm] { margin: 0 0 .5rem; }
.library-product-originals[b-70wiifctgm] { display: flex; flex-wrap: wrap; gap: 1rem; }
.library-product-originals figure[b-70wiifctgm] { margin: 0; flex: 1 1 180px; max-width: 300px; }
.library-product-originals img[b-70wiifctgm] { width: 100%; height: 160px; object-fit: contain; }
.library-product-originals figcaption[b-70wiifctgm] { margin-top: .5rem; }
/* /Pages/Report.razor.rz.scp.css */
.report-page[b-vuatw9gsvt] { min-height: 100dvh; background: #fff; color: var(--text); }
.report-mast[b-vuatw9gsvt] { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 32px; border-bottom: 1px solid var(--border-light); }
.report-mast a[b-vuatw9gsvt] { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-xl); font-weight: 700; color: var(--accent); text-decoration: none; }
.report-mast span[b-vuatw9gsvt] { font-size: var(--fs-sm); color: var(--text-secondary); }
.report-container[b-vuatw9gsvt] { max-width: 1040px; padding: 32px; }
.report-page .analyze-header h1[b-vuatw9gsvt] { font-size: var(--fs-2xl); }
.report-page .analyze-progress-bar[b-vuatw9gsvt] { background: var(--accent); }
.report-page .analyze-progress[b-vuatw9gsvt] { position: static; margin: 0 0 12px; border-radius: 4px; }
.report-state[b-vuatw9gsvt] {
    text-align: center;
    padding: 60px 24px;
}

.report-state-title[b-vuatw9gsvt] {
    font-size: var(--fs-2xl);
    margin: 0 0 8px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.report-state-copy[b-vuatw9gsvt] {
    color: var(--text-secondary);
    margin: 0;
}

/* A partial report under the failed headline and its action. */
.report-state-partial[b-vuatw9gsvt] { margin-top: 32px; text-align: left; }

.report-state-action[b-vuatw9gsvt] {
    width: auto;
    min-height: 44px;
    padding: 12px 24px;
    margin-top: 24px;
    background: var(--accent);
    border-radius: var(--radius-xs);
    font-family: inherit;
    font-size: var(--fs-note);
    color: #fff;
    box-shadow: none;
}
.report-state-action:hover[b-vuatw9gsvt] { background: var(--accent-dark); }
a.report-state-action[b-vuatw9gsvt] { display: inline-flex; align-items: center; justify-content: center; }

.report-state-actions[b-vuatw9gsvt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 24px;
}
.report-state-actions .report-state-action[b-vuatw9gsvt] { margin-top: 0; }
.report-state-link[b-vuatw9gsvt] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font-family: inherit;
    font-size: var(--fs-note);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.report-page :focus-visible[b-vuatw9gsvt] { outline: 2px solid var(--blue); outline-offset: 3px; }
.report-state[b-vuatw9gsvt]  .rpt { padding: 24px 0; text-align: left; }

.report-skeleton-card[b-vuatw9gsvt] {
    max-width: 600px;
    height: 120px;
    margin: 0 auto 16px;
}

.report-skeleton-line[b-vuatw9gsvt] {
    max-width: 400px;
    margin: 0 auto 8px;
}

.report-skeleton-line--short[b-vuatw9gsvt] {
    max-width: 300px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .report-mast[b-vuatw9gsvt] { padding: 16px; }
    .report-container[b-vuatw9gsvt] { padding: 24px 16px; }
    .report-state[b-vuatw9gsvt] {
        padding: 44px 16px;
    }
}

/* Printed, the wordmark stays as the letterhead; the page's own buttons go. */
@media print {
    .report-page[b-vuatw9gsvt] { min-height: 0; }
    /* The report under it keeps its 32px sides in print, so the name lines up with it. */
    .report-mast[b-vuatw9gsvt] { padding: 0 32px 12px; }
    .report-state-action[b-vuatw9gsvt], .report-state-link[b-vuatw9gsvt] { display: none; }
}
/* Focused by script after Try again, so the next Tab starts in the report; not a control to outline. */
.report-main:focus[b-vuatw9gsvt] { outline: none; }
/* /Pages/Studio.razor.rz.scp.css */
/* Studio home — the page that decides how a post gets made.

   Three routes end at the same place; the only thing that separates them is how
   much of the work you keep. So they sit along that one axis and answer the same
   two questions, which is what lets the eye compare them instead of reading three
   unrelated blurbs. Each is a card that opens on a picture of what it makes: as bare
   text on the grey page the three read as a form with nothing on offer. The rows still
   line up across the cards, so they still compare. */

.studio-home[b-237s15lr6t] {
    min-height: 100dvh;
    padding: 40px 32px 64px;
}

/* Kept below every class rule: as ".studio-home button" it outranked them, so the font
   shorthand took the routes' semibold and control size away. */
.studio-home :where(button)[b-237s15lr6t] {
    appearance: none;
    font: inherit;
}

.studio-home-header[b-237s15lr6t],
.studio-home-alert[b-237s15lr6t],
.studio-routes[b-237s15lr6t],
.studio-drafts[b-237s15lr6t] {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-max);
}

/* Lined up with the title: the header grew a hint line, and centred the back button sat beside it. */
.studio-home-header[b-237s15lr6t] {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    position: relative;
}

.studio-home-header h1[b-237s15lr6t] {
    color: var(--text);
    font-size: var(--fs-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

.studio-home-header h1:focus[b-237s15lr6t] {
    outline: none;
}

.studio-home-header p[b-237s15lr6t] {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    margin: 6px 0 0;
}

.studio-home-header p.studio-home-hint[b-237s15lr6t] {
    color: var(--text);
    font-size: var(--fs-note);
    margin-top: 4px;
}

.studio-home-back[b-237s15lr6t] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.studio-home-back:hover[b-237s15lr6t] {
    border-color: var(--accent);
    color: var(--accent);
}

.studio-home-back svg[b-237s15lr6t],
.studio-route-icon svg[b-237s15lr6t],
.studio-route-cta svg[b-237s15lr6t],
.studio-draft-blank svg[b-237s15lr6t],
.studio-draft-badge svg[b-237s15lr6t] {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.studio-home-back svg[b-237s15lr6t] {
    width: 19px;
    height: 19px;
}

.studio-home-alert[b-237s15lr6t] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 24px;
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-sm);
    color: var(--amber-ink);
    font-size: var(--fs-note);
    padding: 12px 14px;
}

.studio-home-alert button[b-237s15lr6t] {
    background: var(--surface);
    border: 1px solid var(--orange);
    border-radius: var(--radius-control);
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 800;
    min-height: 44px;
    padding: 0 14px;
}

/* Out of the flow at the right end of the title's line. The title block is taller than the
   back button, so it starts at the header's top. */
.studio-home-loading[b-237s15lr6t] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: var(--fs-note);
    gap: 8px;
    height: calc(var(--fs-3xl) * 1.05);
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
}

/* ── The routes ─────────────────────────────────────────────────────── */

/* Starts where the first route starts, not at the page edge, so the scale measures
   the columns it describes rather than the label gutter beside them. */
.studio-routes-axis[b-237s15lr6t] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: var(--fs-2xs);
    gap: 12px;
    letter-spacing: 0.02em;
    margin: 0 0 14px;
    padding-left: 0;
}

.studio-routes-rule[b-237s15lr6t] {
    flex: 1 1 auto;
    height: 1px;
    /* Reads left to right as the work moving from your hands to ours, which is the
       order the three columns are in. A flat rule would say they are unrelated. */
    background: linear-gradient(90deg, var(--line-field), var(--line));
}

.studio-routes-grid[b-237s15lr6t] {
    --studio-col-gap: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--studio-col-gap);
}

.studio-routes[b-237s15lr6t] {
    --studio-col-gap: 24px;
}

.studio-route[b-237s15lr6t] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--e1);
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    min-width: 0;
    overflow: hidden;
    position: relative;
    row-gap: 0;
    transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The whole card is the button's target, so it lifts as one. A card that rose under the
   pointer but only took a click on its button would be a promise it did not keep. */
.studio-route:has(.studio-route-cta:not(:disabled)):hover[b-237s15lr6t],
.studio-route:has(.studio-route-cta:focus-visible)[b-237s15lr6t] {
    border-color: var(--line-strong);
    box-shadow: var(--e2);
    transform: translateY(-2px);
}

.studio-route-cta:not(:disabled)[b-237s15lr6t]::after {
    content: "";
    inset: 0;
    position: absolute;
}

.studio-route > *[b-237s15lr6t] {
    align-content: start;
    padding: 0 22px;
}

.studio-route-head[b-237s15lr6t] {
    padding-bottom: 18px;
    padding-top: 18px;
}

/* ── The pictures ── */

.studio-route > .studio-route-scene[b-237s15lr6t] {
    align-content: center;
    border-bottom: 1px solid rgba(13, 27, 46, 0.06);
    height: 132px;
    padding: 0;
}

.studio-route-scene svg[b-237s15lr6t] {
    display: block;
    height: 100%;
    width: 100%;
}

.studio-route.editor .studio-route-scene[b-237s15lr6t] {
    background: var(--tint-purple);
    color: var(--purple-ink);
}

.studio-route.simple .studio-route-scene[b-237s15lr6t] {
    background: var(--tint-blue);
    color: var(--accent);
}

.studio-route.auto .studio-route-scene[b-237s15lr6t] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.scene-card[b-237s15lr6t],
.scene-chip[b-237s15lr6t] {
    fill: var(--surface);
    stroke: rgba(13, 27, 46, 0.1);
    stroke-width: 1;
}

.scene-day[b-237s15lr6t] {
    fill: rgba(255, 255, 255, 0.5);
    stroke: rgba(13, 27, 46, 0.06);
    stroke-width: 1;
}

.scene-line[b-237s15lr6t] {
    fill: var(--line);
}

.scene-photo[b-237s15lr6t] {
    fill: currentColor;
    opacity: 0.16;
}

.scene-hill[b-237s15lr6t] {
    fill: currentColor;
    opacity: 0.3;
}

.scene-sun[b-237s15lr6t] {
    fill: var(--surface);
}

.scene-dayname[b-237s15lr6t] {
    fill: currentColor;
    opacity: 0.3;
}

.scene-caret[b-237s15lr6t],
.scene-pen[b-237s15lr6t],
.scene-spark[b-237s15lr6t],
.scene-tick-bg[b-237s15lr6t] {
    fill: currentColor;
}

.studio-route.simple .scene-tick-bg[b-237s15lr6t] {
    fill: var(--green-ink);
}

.scene-tick[b-237s15lr6t] {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.scene-caret[b-237s15lr6t] {
    animation: studio-scene-caret-b-237s15lr6t 1.1s steps(1) infinite;
}

@keyframes studio-scene-caret-b-237s15lr6t {
    50% {
        opacity: 0;
    }
}

.scene-spark[b-237s15lr6t] {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.studio-route:hover .scene-spark[b-237s15lr6t] {
    transform: rotate(45deg) scale(1.12);
}

.studio-route-icon[b-237s15lr6t] {
    width: 28px;
    height: 28px;
    align-items: center;
    border-radius: var(--radius-xs);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.studio-route-icon svg[b-237s15lr6t] {
    width: 16px;
    height: 16px;
}

.studio-route.editor .studio-route-icon[b-237s15lr6t] {
    background: var(--tint-purple);
    color: var(--purple-ink);
}

.studio-route.simple .studio-route-icon[b-237s15lr6t] {
    background: var(--tint-blue);
    color: var(--accent);
}

.studio-route.auto .studio-route-icon[b-237s15lr6t] {
    background: var(--tint-green);
    color: var(--green-ink);
}

.studio-route h2[b-237s15lr6t] {
    color: var(--text);
    display: flex;
    flex-direction: column;
    font-size: var(--fs-heading-sm);
    font-weight: 700;
    gap: 12px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
}

/* The mode's name is the label; what happens to the post is the heading. */
.studio-route-name[b-237s15lr6t] {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 650;
    gap: 8px;
    letter-spacing: 0;
}

.studio-route-choice[b-237s15lr6t] {
    display: block;
    text-wrap: balance;
}

/* Read aloud as "Studio editor: Make it yourself", shown as a label over a heading. */
.studio-route-sr[b-237s15lr6t] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.studio-route-head p[b-237s15lr6t] {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin: 10px 0 0;
    text-wrap: pretty;
}

.studio-route-go[b-237s15lr6t] {
    align-content: end;
    padding-bottom: 22px;
}

/* Three doors to the same room, so they carry the same weight and the same colour.
   An outline here read as three disabled controls on a near-white page. */
.studio-route-cta[b-237s15lr6t] {
    align-items: center;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: var(--radius-control);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-control);
    font-weight: 650;
    gap: 9px;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
    width: 100%;
}

.studio-route-cta svg[b-237s15lr6t] {
    width: 17px;
    height: 17px;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.studio-route-cta:hover:not(:disabled)[b-237s15lr6t] {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
    box-shadow: var(--glow);
}

.studio-route-cta:hover:not(:disabled) svg[b-237s15lr6t] {
    transform: translateX(3px);
}

.studio-route-cta:disabled[b-237s15lr6t] {
    background: var(--ground);
    border-color: var(--line);
    color: var(--text-secondary);
    cursor: default;
}

/* "Not sure? Start with Simple mode." sat over three equal blue buttons, so nothing on the cards
   backed it. Simple's is the one filled button; the other two are outlined, as near to hand. */
.studio-route:not(.simple) .studio-route-cta:not(:disabled)[b-237s15lr6t] {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}

.studio-route:not(.simple) .studio-route-cta:hover:not(:disabled)[b-237s15lr6t] {
    background: var(--surface);
    border-color: var(--ink);
    box-shadow: none;
}

/* ── Drafts ─────────────────────────────────────────────────────────── */

.studio-drafts[b-237s15lr6t] {
    margin-top: 56px;
}

.studio-drafts-heading[b-237s15lr6t] {
    align-items: baseline;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.studio-drafts-heading h2[b-237s15lr6t] {
    color: var(--text);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.studio-drafts-heading span[b-237s15lr6t] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 650;
    white-space: nowrap;
}

.studio-drafts-more[b-237s15lr6t] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.studio-drafts-more .studio-drafts-more-btn[b-237s15lr6t] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font-size: var(--fs-note);
    font-weight: 600;
    min-height: 40px;
    padding: 8px 18px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.studio-drafts-more .studio-drafts-more-btn:hover:not(:disabled)[b-237s15lr6t] {
    border-color: var(--blue);
    color: var(--blue);
}

.studio-drafts-more .studio-drafts-more-btn:disabled[b-237s15lr6t] {
    color: var(--text-secondary);
    cursor: default;
}

.studio-drafts-more-error[b-237s15lr6t] {
    color: var(--red-ink);
    font-size: var(--fs-xs);
    margin: 0;
}

/* auto-fit, so three drafts stretch across the row instead of leaving a ragged
   gap on the right where a fourth track would have been. A track is never less than a
   third of the row: drafts come six at a time, then twelve more, so three or two to a row
   always fill it. Five to a row on a wide screen left the sixth alone on the next. */
.studio-draft-grid[b-237s15lr6t] {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(max(232px, calc((100% - 40px) / 3)), 1fr));
}

/* The card and its Delete sit side by side in the markup (a button cannot hold a button), with
   Delete laid over the picture's corner. */
.studio-draft-item[b-237s15lr6t] {
    display: flex;
    min-width: 0;
    position: relative;
}

.studio-draft-item > .studio-draft[b-237s15lr6t] {
    flex: 1 1 auto;
}

.studio-draft-delete[b-237s15lr6t] {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--e1);
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px;
}

.studio-draft-delete svg[b-237s15lr6t] {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}

@media (hover: hover) {
    .studio-draft-delete:hover:not(:disabled)[b-237s15lr6t] {
        border-color: var(--red);
        color: var(--red);
    }
}

.studio-draft-delete:disabled[b-237s15lr6t] {
    cursor: default;
    opacity: 0.5;
}

@media (pointer: coarse) {
    .studio-draft-delete[b-237s15lr6t] {
        height: 44px;
        right: 4px;
        top: 4px;
        width: 44px;
    }
}

.studio-draft[b-237s15lr6t] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.studio-draft:hover[b-237s15lr6t] {
    border-color: var(--line-strong);
    box-shadow: var(--e1);
}

.studio-draft-thumb[b-237s15lr6t] {
    aspect-ratio: 16 / 9;
    background: var(--ground);
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.studio-draft-thumb img[b-237s15lr6t] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.studio-draft:hover .studio-draft-thumb img[b-237s15lr6t] {
    transform: scale(1.035);
}

/* Neutral, not the blue tint: a coloured panel here competed with the three blue
   buttons above and made a draft with no picture look like the loudest thing on
   the page. */
.studio-draft-thumb.empty[b-237s15lr6t] {
    align-items: center;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: center;
}

.studio-draft-blank[b-237s15lr6t] {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 600;
    gap: 8px;
}

.studio-draft-blank svg[b-237s15lr6t] {
    width: 17px;
    height: 17px;
    opacity: 0.7;
}

.studio-draft-badge[b-237s15lr6t] {
    align-items: center;
    background: rgba(26, 29, 32, 0.74);
    border-radius: var(--radius-pill);
    bottom: 10px;
    color: #ffffff;
    display: inline-flex;
    font-size: var(--fs-2xs);
    font-weight: 650;
    gap: 5px;
    left: 10px;
    padding: 4px 9px 4px 7px;
    position: absolute;
}

.studio-draft-badge svg[b-237s15lr6t] {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.studio-draft-body[b-237s15lr6t] {
    display: block;
    padding: 14px 16px 16px;
}

.studio-draft-body strong[b-237s15lr6t] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--text);
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.45;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.studio-draft-body small[b-237s15lr6t] {
    color: var(--text-secondary);
    display: block;
    font-size: var(--fs-xs);
    margin-top: 7px;
}

.studio-draft-meta[b-237s15lr6t] {
    overflow: hidden;
}

/* Every part has a dot in front, in a box as wide as the row is pulled left, so the dot of
   whichever part starts a line sits outside the card and is clipped. */
.studio-draft-meta-row[b-237s15lr6t] {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.8em;
}

.studio-draft-meta-row > span[b-237s15lr6t] {
    white-space: nowrap;
}

.studio-draft-meta-row > span[b-237s15lr6t]::before {
    content: "\00B7";
    content: "\00B7" / "";
    display: inline-block;
    text-align: center;
    width: 0.8em;
}

/* What the draft still needs, in the dashboard's words and colours. */
.studio-draft-body small.studio-draft-state[b-237s15lr6t] {
    align-items: flex-start;
    display: inline-flex;
    gap: 6px;
    font-weight: 600;
    margin-top: 6px;
}

.studio-draft-body small.studio-draft-state[b-237s15lr6t]::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 6px;
    margin-top: 0.5em;
    width: 6px;
}

.studio-draft-body small.studio-draft-state.ready[b-237s15lr6t] {
    color: var(--green-ink);
}

.studio-draft-body small.studio-draft-state.needs[b-237s15lr6t] {
    color: var(--amber-ink);
}

/* Whether the Auto plan is already running, under the route's own line. */
/* The dot sits on the first line: in three columns on a tablet the status wraps to two. */
.studio-route-head p.studio-route-status[b-237s15lr6t] {
    align-items: flex-start;
    display: inline-flex;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 650;
    margin-top: 10px;
}

.studio-route-head p.studio-route-status[b-237s15lr6t]::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 7px;
    margin-top: calc((1lh - 7px) / 2);
    width: 7px;
}

.studio-route-status.on[b-237s15lr6t] {
    color: var(--green-ink);
}

.studio-route-status.paused[b-237s15lr6t] {
    color: var(--text-secondary);
}

.studio-route-status.needs[b-237s15lr6t] {
    color: var(--amber-ink);
}

.studio-home button:focus-visible[b-237s15lr6t] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* Without subgrid the buttons cannot line up across the columns, so each sits at its
   column's foot instead. */
@supports not (grid-template-rows: subgrid) {
    .studio-routes-grid[b-237s15lr6t] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .studio-route[b-237s15lr6t] {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    .studio-route-go[b-237s15lr6t] {
        margin-top: auto;
    }
}

/* A tablet held upright stacked the three routes a screen and a half deep, so the drafts it came
   back for sat out of sight. From 700px the three columns still fit, a little closer together. */
@media (min-width: 700px) and (max-width: 900px) {
    .studio-routes[b-237s15lr6t],
    .studio-routes-grid[b-237s15lr6t] {
        --studio-col-gap: 24px;
    }

    /* Narrow columns: "Open the editor" and "Open Auto mode" broke onto two lines with the
       arrow off to one side. Less padding keeps them on one; a longer label still wraps. */
    .studio-route > *[b-237s15lr6t] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .studio-route-go[b-237s15lr6t] {
        padding-bottom: 16px;
    }

    .studio-route-cta[b-237s15lr6t] {
        gap: 7px;
        padding: 0 12px;
    }
}

/* At the narrow end "Open Auto mode" still fell short by a few pixels; the gaps give them back. */
@media (min-width: 700px) and (max-width: 760px) {
    .studio-routes[b-237s15lr6t],
    .studio-routes-grid[b-237s15lr6t] {
        --studio-col-gap: 16px;
    }
}

@media (max-width: 699px) {
    .studio-routes-axis[b-237s15lr6t] {
        display: none;
    }

    .studio-routes-grid[b-237s15lr6t] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        row-gap: 16px;
    }

    .studio-route[b-237s15lr6t] {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    .studio-route > *[b-237s15lr6t] {
        padding: 0 18px;
    }

    /* Shorter on a phone: the three cards stacked put the drafts an owner came back for a
       screen and a half down. */
    .studio-route > .studio-route-scene[b-237s15lr6t] {
        height: 84px;
    }

    .studio-route-head[b-237s15lr6t] {
        padding-bottom: 14px;
        padding-top: 14px;
    }

    .studio-route h2[b-237s15lr6t] {
        gap: 8px;
    }

    .studio-route-go[b-237s15lr6t] {
        padding-bottom: 18px;
    }

    .studio-route-cta[b-237s15lr6t] {
        width: auto;
    }
}

.studio-home-drafts-jump[b-237s15lr6t] {
    display: none;
}

@media (max-width: 760px) {
    .studio-home[b-237s15lr6t] {
        padding: 24px 16px 48px;
    }

    .studio-home-header[b-237s15lr6t] {
        gap: 12px;
        margin-bottom: 28px;
    }

    .studio-home-header h1[b-237s15lr6t] {
        font-size: var(--fs-heading);
    }

    .studio-home-loading[b-237s15lr6t] {
        height: calc(var(--fs-heading) * 1.05);
    }

    /* Where "Loading Studio..." was, at the end of the title's line, so nothing moves. */
    .studio-home-drafts-jump[b-237s15lr6t] {
        align-items: center;
        color: var(--accent);
        display: flex;
        font-size: var(--fs-note);
        font-weight: 600;
        gap: 4px;
        min-height: 44px;
        padding: 0 2px 0 8px;
        position: absolute;
        right: 0;
        text-decoration: none;
        top: calc((var(--fs-heading) * 1.05 - 44px) / 2);
        white-space: nowrap;
    }

    .studio-home-drafts-jump svg[b-237s15lr6t] {
        fill: none;
        height: 16px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        width: 16px;
    }

    .studio-home-header p[b-237s15lr6t] {
        font-size: var(--fs-note);
    }

    .studio-home-alert[b-237s15lr6t] {
        align-items: flex-start;
        flex-direction: column;
    }

    .studio-drafts[b-237s15lr6t] {
        margin-top: 40px;
    }

    .studio-draft-grid[b-237s15lr6t] {
        grid-template-columns: repeat(auto-fill, minmax(max(160px, calc((100% - 28px) / 3)), 1fr));
        gap: 14px;
    }

    .studio-route-cta[b-237s15lr6t] {
        width: 100%;
    }
}

/* Below 366 the grid fell to one column of full-width cards about 300px tall, so six drafts took
   1,800px of scrolling. Each draft is a row instead, its picture beside its words, as the
   Dashboard lists them. */
@media (max-width: 365px) {
    .studio-draft-grid[b-237s15lr6t] {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
    }

    .studio-draft[b-237s15lr6t] {
        align-items: stretch;
        flex-direction: row;
    }

    .studio-draft-thumb[b-237s15lr6t] {
        aspect-ratio: auto;
        flex: 0 0 96px;
        min-height: 96px;
        width: 96px;
    }

    .studio-draft-thumb.empty[b-237s15lr6t] {
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }

    .studio-draft-blank[b-237s15lr6t] {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .studio-draft-badge[b-237s15lr6t] {
        bottom: 6px;
        left: 6px;
    }

    .studio-draft-body[b-237s15lr6t] {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
    }

    /* On the picture's corner, as on wider screens, so the words keep the row's width. */
    .studio-draft-delete[b-237s15lr6t] {
        left: 6px;
        right: auto;
        top: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-route[b-237s15lr6t],
    .scene-spark[b-237s15lr6t],
    .studio-route-cta[b-237s15lr6t],
    .studio-route-cta svg[b-237s15lr6t],
    .studio-draft[b-237s15lr6t],
    .studio-draft-thumb img[b-237s15lr6t],
    .studio-home-back[b-237s15lr6t] {
        transition: none;
    }

    .studio-draft:hover .studio-draft-thumb img[b-237s15lr6t],
    .studio-route:hover .scene-spark[b-237s15lr6t],
    .studio-route:has(.studio-route-cta:not(:disabled)):hover[b-237s15lr6t],
    .studio-route:has(.studio-route-cta:focus-visible)[b-237s15lr6t],
    .studio-route-cta:hover:not(:disabled) svg[b-237s15lr6t] {
        transform: none;
    }

    .scene-caret[b-237s15lr6t] {
        animation: none;
    }
}
/* /Pages/StudioAuto.razor.rz.scp.css */
.studio-auto-state[b-dsr3zt3cnp] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12vh auto 0;
    max-width: 520px;
    min-height: 120px;
    padding: 24px;
}

.studio-auto-state.error[b-dsr3zt3cnp] {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    flex-direction: column;
}

.studio-auto-state.error span[b-dsr3zt3cnp] {
    color: var(--text-secondary);
}

.studio-auto-state.error div[b-dsr3zt3cnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
/* /Pages/StudioCreate.razor.rz.scp.css */
.studio-create-page[b-9osr9grdeq] {
    min-height: 100dvh;
    background: var(--bg-canvas);
}

.studio-create-shell[b-9osr9grdeq] {
    min-height: 100dvh;
}

.studio-create-state[b-9osr9grdeq] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12vh auto 0;
    max-width: 520px;
    min-height: 120px;
    padding: 24px;
}

.studio-create-state.error[b-9osr9grdeq],
.studio-create-state.elsewhere[b-9osr9grdeq] {
    align-items: flex-start;
    color: var(--text);
    flex-direction: column;
}

.studio-create-state.error > span[b-9osr9grdeq],
.studio-create-state.elsewhere > span[b-9osr9grdeq] {
    color: var(--text-secondary);
}

.studio-create-state.elsewhere > .studio-create-switch-error[b-9osr9grdeq] {
    color: var(--red-ink);
}

.studio-create-state.error > div[b-9osr9grdeq],
.studio-create-state.elsewhere > div[b-9osr9grdeq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.studio-create-shell[b-9osr9grdeq]  .fs-shell {
    min-height: 100dvh;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* On desktop the composer is an app frame, not a document: the top bar and the
   conversation hold still while the work area scrolls inside them. The whole page
   used to scroll, so the guide's message field sat below the fold and you had
   to scroll the post out of view to reach the field you were meant to type in.

   These have to live here. The rule above sets height:auto and overflow:visible
   at a specificity the component's own stylesheet cannot beat, so the frame has
   to be turned on by the page that turned it off.

   clip, not hidden: an overflow:hidden box is still scrollable by script, so the
   chat's scroll-into-view dragged the whole frame and took the top bar off
   screen. clip refuses that. */
@media (min-width: 901px) {
    .studio-create-shell[b-9osr9grdeq]  .fs-shell {
        height: 100dvh;
        min-height: 0;
        overflow: clip;
    }

    .studio-create-shell[b-9osr9grdeq]  .fs-body {
        overflow: clip;
    }

    /* The post scrolls, the conversation does not.

       The next bar is sticky over the foot of this scroller. The padding keeps a control
       scrolled or tabbed into view clear of it; without it Keep landed under the bar. */
    .studio-create-shell[b-9osr9grdeq]  .fs-workspace {
        max-height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: 104px;
        scrollbar-width: thin;
    }
}

@media (max-width: 900px) {
    .studio-create-shell[b-9osr9grdeq]  .fs-shell {
        min-height: 100dvh;
        height: auto;
    }
}
/* /Pages/StudioSimple.razor.rz.scp.css */
.simple-page[b-idhiw3zrb8] {
    min-height: 100dvh;
    color: var(--text);
}

/* Kept below every class rule: as ".simple-page button" it outranked them, so the font shorthand
   took the 760 weight off every primary and secondary button. */
.simple-page :where(button, textarea)[b-idhiw3zrb8] {
    font: inherit;
}

.simple-topbar[b-idhiw3zrb8] {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 64px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* On a short screen (a laptop at 200% zoom, a phone on its side) the pinned bar took a seventh
   of the height over a page that is mostly one card; it scrolls away with the page there. */
@media (max-height: 500px) {
    .simple-topbar[b-idhiw3zrb8] {
        position: static;
    }
}

.simple-icon-button[b-idhiw3zrb8] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.simple-icon-button:hover[b-idhiw3zrb8] {
    background: var(--line);
    color: var(--text);
}

.simple-title-lockup[b-idhiw3zrb8] {
    align-items: center;
    display: flex;
    font-size: var(--fs-base);
    font-weight: 760;
    gap: 10px;
    margin-left: 8px;
}

.simple-mark[b-idhiw3zrb8] {
    align-items: center;
    background: var(--accent);
    border-radius: var(--radius-xs);
    color: #ffffff;
    display: inline-flex;
    font-size: var(--fs-note);
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.simple-nav[b-idhiw3zrb8] {
    align-items: center;
    display: flex;
    gap: 6px;
}

.simple-nav a[b-idhiw3zrb8] {
    align-items: center;
    background: transparent;
    /* Transparent, so High Contrast still draws the two ways out as buttons. */
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--fs-sm);
    display: inline-flex;
    font-weight: 700;
    min-height: 44px;
    padding: 0 11px;
    text-decoration: none;
}

.simple-nav a:hover[b-idhiw3zrb8] {
    background: var(--line);
    color: var(--text);
}

.simple-main[b-idhiw3zrb8] {
    margin: 0 auto;
    max-width: 1120px;
    padding: 32px 32px 48px;
}

.simple-intro[b-idhiw3zrb8] {
    max-width: 680px;
    text-align: left;
}

.simple-kicker[b-idhiw3zrb8] {
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 760;
    letter-spacing: 0;
    margin: 0 0 8px;
}

.simple-intro h1[b-idhiw3zrb8],
.simple-progress-body h1[b-idhiw3zrb8] {
    color: var(--text);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
    margin: 0;
}

.simple-intro > p:last-child[b-idhiw3zrb8],
.simple-lede[b-idhiw3zrb8] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.55;
    margin: 12px 0 0;
    max-width: 620px;
}

.simple-workspace[b-idhiw3zrb8] {
    background: transparent;
    display: grid;
    grid-template-areas:
        "options handoff"
        "options actions";
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.8fr);
    /* The steps keep their height and the button stays under them: with the steps' row taking
       the slack, opening the topic box pushed "Create my post" down as the owner chose. */
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    margin-top: 26px;
}

.simple-options[b-idhiw3zrb8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-area: options;
    padding: 0;
}

.simple-option[b-idhiw3zrb8] {
    align-items: center;
    appearance: none;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    min-height: 74px;
    padding: 13px 15px;
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    width: 100%;
}

.simple-option:hover[b-idhiw3zrb8] {
    background: var(--tint-blue);
    border-color: var(--line-strong);
}

.simple-option.selected[b-idhiw3zrb8] {
    background: var(--tint-blue);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.simple-option-icon[b-idhiw3zrb8] {
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.simple-option-icon.photo[b-idhiw3zrb8] {
    background: var(--tint-blue);
    color: var(--accent);
}

.simple-option-icon.topic[b-idhiw3zrb8] {
    background: var(--tint-green);
    color: var(--green-ink);
}

/* Its own tint, like the other two. On grey it read as the one option that was switched off. */
.simple-option-icon.decide[b-idhiw3zrb8] {
    background: var(--tint-amber);
    color: var(--amber);
}

.simple-option-copy[b-idhiw3zrb8] {
    min-width: 0;
}

.simple-option-copy strong[b-idhiw3zrb8],
.simple-option-copy small[b-idhiw3zrb8] {
    display: block;
}

.simple-option-copy strong[b-idhiw3zrb8] {
    font-size: var(--fs-md);
    font-weight: 780;
    line-height: 1.25;
}

.simple-option-copy small[b-idhiw3zrb8] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.4;
    margin-top: 4px;
}

.simple-radio[b-idhiw3zrb8] {
    border: 1.5px solid var(--line-field);
    border-radius: 50%;
    height: 16px;
    position: relative;
    width: 16px;
}

.simple-option.selected .simple-radio[b-idhiw3zrb8] {
    border-color: var(--accent);
}

.simple-option.selected .simple-radio[b-idhiw3zrb8]::after {
    background: var(--accent);
    border-radius: 50%;
    content: "";
    inset: 3px;
    position: absolute;
}

.simple-photo-selection[b-idhiw3zrb8],
.simple-topic-field[b-idhiw3zrb8] {
    background: transparent;
    margin: 0 0 2px 58px;
    padding: 8px 0;
}

.simple-photo-selection[b-idhiw3zrb8] {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
}

.simple-photo-selection img[b-idhiw3zrb8] {
    aspect-ratio: 1;
    border-radius: var(--radius-xs);
    height: 52px;
    object-fit: cover;
    width: 52px;
}

/* They wrap: one line each, at 320 the note read "We will write the p...". */
.simple-photo-selection strong[b-idhiw3zrb8],
.simple-photo-selection small[b-idhiw3zrb8] {
    display: block;
}

.simple-photo-selection strong[b-idhiw3zrb8] {
    font-size: var(--fs-sm);
}

.simple-photo-selection small[b-idhiw3zrb8] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 3px;
}

.simple-photo-selection button[b-idhiw3zrb8] {
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 750;
    min-height: 44px;
    padding: 0 11px;
}

.simple-topic-field label[b-idhiw3zrb8] {
    color: var(--ink-soft);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 750;
    margin-bottom: 7px;
}

.simple-topic-field textarea[b-idhiw3zrb8]{
    background: #ffffff;
    border: 1.5px solid var(--line-field);
    border-radius: var(--radius-control);
    color: var(--text);
    display: block;
    font-size: var(--fs-md);
    line-height: 1.45;
    min-height: 88px;
    padding: 10px 11px;
    resize: vertical;
    width: 100%;
}

.simple-topic-field textarea[b-idhiw3zrb8]::placeholder {
    color: var(--text-secondary);
}

.simple-topic-occasion[b-idhiw3zrb8] {
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    font-size: var(--fs-sm);
    gap: 8px;
    line-height: 20px;
    margin-top: 8px;
    min-height: 32px;
    padding: 6px 0;
    text-align: left;
}

.simple-topic-occasion[b-idhiw3zrb8]  svg {
    flex: none;
    margin-top: 2px;
}

.simple-topic-occasion:hover span[b-idhiw3zrb8] {
    text-decoration: underline;
}

.simple-handoff[b-idhiw3zrb8] {
    background: transparent;
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    grid-area: handoff;
    padding: 0 0 12px 28px;
}

.simple-handoff-label[b-idhiw3zrb8] {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 780;
    margin: 0 0 8px;
}

.simple-handoff h2[b-idhiw3zrb8] {
    color: var(--text);
    font-size: var(--fs-heading-sm);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0;
}

/* One column, in order: they are steps, and the owner's own step reads as a sentence. */
.simple-handoff-steps[b-idhiw3zrb8] {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 20px 0 20px;
    padding: 0;
}

.simple-handoff-steps li[b-idhiw3zrb8] {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: var(--fs-sm);
    gap: 10px;
    line-height: 1.4;
}

.simple-handoff-steps svg[b-idhiw3zrb8] {
    color: var(--accent);
    flex: 0 0 auto;
}

.simple-handoff-steps li.owner[b-idhiw3zrb8] {
    color: var(--ink);
    font-weight: 700;
}

.simple-handoff .simple-handoff-label + .simple-platforms[b-idhiw3zrb8] {
    margin-top: -2px;
}

.simple-platforms[b-idhiw3zrb8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 0;
}

.simple-platform[b-idhiw3zrb8] {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 750;
    gap: 6px;
}

.simple-platform > span[b-idhiw3zrb8] {
    display: inline-flex;
}

.simple-primary[b-idhiw3zrb8],
.simple-secondary[b-idhiw3zrb8] {
    align-items: center;
    border-radius: var(--radius-control);
    cursor: pointer;
    display: inline-flex;
    font-weight: 760;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    text-decoration: none;
}

.simple-primary[b-idhiw3zrb8] {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

.simple-primary:hover:not(:disabled)[b-idhiw3zrb8] {
    background: var(--accent-dark);
    border-color: var(--blue);
}

.simple-primary:disabled[b-idhiw3zrb8] {
    cursor: not-allowed;
    opacity: 0.52;
}

/* A destructive confirm must not look like the go-ahead button. */
.simple-primary.simple-danger[b-idhiw3zrb8] {
    background: var(--red);
    border-color: var(--red);
}

.simple-primary.simple-danger:hover:not(:disabled)[b-idhiw3zrb8] {
    background: var(--red-hover);
    border-color: var(--red-hover);
}

.simple-secondary[b-idhiw3zrb8] {
    background: #ffffff;
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.simple-secondary:hover[b-idhiw3zrb8] {
    background: var(--ground);
}

.simple-submit[b-idhiw3zrb8] {
    width: 100%;
}

.simple-handoff-actions[b-idhiw3zrb8] {
    background: transparent;
    border-left: 1px solid var(--border-light);
    grid-area: actions;
    padding: 12px 0 0 28px;
}

.simple-submit-note[b-idhiw3zrb8] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin: 10px 0 0;
    text-align: center;
}

.simple-submit-note a[b-idhiw3zrb8] {
    color: var(--blue);
    font-weight: 600;
}

.simple-blocker[b-idhiw3zrb8],
.simple-inline-error[b-idhiw3zrb8] {
    align-items: center;
    border-radius: var(--radius-xs);
    display: flex;
    font-size: var(--fs-sm);
}

.simple-blocker[b-idhiw3zrb8] {
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    color: var(--amber);
    gap: 10px;
    justify-content: flex-start;
    margin-top: 24px;
    padding: 11px 13px;
}

.simple-blocker :is(a, button)[b-idhiw3zrb8] {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: var(--fs-xs);
    display: inline-flex;
    font-weight: 800;
    min-height: 44px;
    padding: 8px;
    margin-left: auto;
    text-decoration: underline;
}

.simple-inline-error[b-idhiw3zrb8] {
    background: var(--ground);
    border: 1px solid var(--tint-red-line);
    color: var(--red-ink);
    flex-wrap: wrap;
    line-height: 1.4;
    margin-bottom: 12px;
    padding: 10px 11px;
}

/* See plans under a used-up plan's reason: on its own line, as the start page's note has it. */
.simple-inline-error a[b-idhiw3zrb8] {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-weight: 800;
    min-height: 24px;
    text-decoration: underline;
}

/* What has changed since the reason was written: the accounts work again. */
.simple-inline-error .simple-inline-error-update[b-idhiw3zrb8] {
    font-weight: 700;
}

.simple-poll-lost[b-idhiw3zrb8] {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.simple-poll-lost > span[b-idhiw3zrb8] {
    flex: 1 1 240px;
}

.simple-poll-lost .simple-secondary[b-idhiw3zrb8] {
    flex-shrink: 0;
}

.simple-state[b-idhiw3zrb8] {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 45vh;
}

.simple-state-error[b-idhiw3zrb8] {
    align-items: start;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    margin: 32px auto 0;
    max-width: 620px;
    min-height: 0;
}

.simple-state-error > svg[b-idhiw3zrb8] {
    color: var(--red-ink);
}

.simple-state-error div[b-idhiw3zrb8] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.simple-state-error > button[b-idhiw3zrb8] {
    grid-column: 2;
    justify-self: start;
}

.simple-state-error strong[b-idhiw3zrb8] {
    color: var(--text);
}

.simple-state-error p[b-idhiw3zrb8] {
    line-height: 1.5;
    margin: 6px 0 0;
}

/* Not an error: the post is there, in the person's other business. */
.simple-state-elsewhere > svg[b-idhiw3zrb8] {
    color: var(--text-secondary);
}

.simple-state-elsewhere .simple-switch-error[b-idhiw3zrb8] {
    color: var(--red-ink);
}

.simple-progress[b-idhiw3zrb8] {
    background: transparent;
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    margin: 0 auto;
    max-width: 980px;
    overflow: hidden;
}

.simple-progress-preview[b-idhiw3zrb8] {
    background: var(--tint-blue);
    min-height: 400px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.simple-progress-preview > img[b-idhiw3zrb8],
.simple-preview-placeholder[b-idhiw3zrb8] {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.simple-progress-preview > img[b-idhiw3zrb8] {
    background: var(--tint-blue);
    object-fit: contain;
}

.simple-preview-placeholder[b-idhiw3zrb8] {
    align-items: center;
    color: var(--line-field);
    display: flex;
    justify-content: center;
}

.simple-preview-status[b-idhiw3zrb8] {
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-xs);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 800;
    left: 16px;
    padding: 7px 10px;
    position: absolute;
    top: 16px;
}

.simple-preview-status.attention[b-idhiw3zrb8] {
    background: var(--ground);
    color: var(--amber);
}

.simple-progress-body[b-idhiw3zrb8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 0 0 32px;
}

.simple-stage-list[b-idhiw3zrb8] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 30px 0 26px;
    padding: 0;
}

.simple-stage-list li[b-idhiw3zrb8] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 750;
    min-width: 0;
    position: relative;
    text-align: center;
}

.simple-stage-list li[b-idhiw3zrb8]::before {
    background: var(--line-strong);
    content: "";
    height: 2px;
    left: -50%;
    position: absolute;
    right: 50%;
    top: 10px;
}

.simple-stage-list li:first-child[b-idhiw3zrb8]::before {
    display: none;
}

.simple-stage-list li.done[b-idhiw3zrb8]::before,
.simple-stage-list li.current[b-idhiw3zrb8]::before {
    background: var(--accent);
}

.simple-stage-dot[b-idhiw3zrb8] {
    align-items: center;
    background: #ffffff;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    height: 22px;
    justify-content: center;
    margin: 0 auto 8px;
    position: relative;
    width: 22px;
    z-index: 1;
}

.simple-stage-list li.done[b-idhiw3zrb8],
.simple-stage-list li.current[b-idhiw3zrb8] {
    color: var(--ink);
}

.simple-stage-list li.done .simple-stage-dot[b-idhiw3zrb8] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.simple-stage-list li.current .simple-stage-dot[b-idhiw3zrb8] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--tint-blue);
}

.simple-stage-list li.current .simple-stage-dot[b-idhiw3zrb8]::after {
    background: var(--accent);
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
}

.simple-stage-list li.attention .simple-stage-dot[b-idhiw3zrb8] {
    border-color: var(--amber);
    box-shadow: 0 0 0 4px var(--ground);
}

/* High Contrast drops the halo, the centre dot and the amber, so the step being worked on
   and one that needs the owner looked like every step still to come. */
@media (forced-colors: active) {
    /* The chosen way to start kept an empty circle, the same as the two not chosen. */
    .simple-option.selected .simple-radio[b-idhiw3zrb8]::after {
        background: currentColor;
        forced-color-adjust: none;
    }

    .simple-stage-list li.current .simple-stage-dot[b-idhiw3zrb8] {
        border-color: Highlight;
        border-width: 3px;
    }

    .simple-stage-list li.current .simple-stage-dot[b-idhiw3zrb8]::after {
        background: Highlight;
        forced-color-adjust: none;
    }

    .simple-stage-list li.attention .simple-stage-dot[b-idhiw3zrb8] {
        border-style: dashed;
    }
}

.simple-job-meta[b-idhiw3zrb8] {
    border-bottom: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 24px;
    padding: 17px 0;
}

.simple-job-meta div[b-idhiw3zrb8] {
    min-width: 0;
}

.simple-job-meta dt[b-idhiw3zrb8] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.simple-job-meta dd[b-idhiw3zrb8] {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.simple-caption-preview[b-idhiw3zrb8] {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--border-light);
    color: var(--ink-soft);
    font-size: var(--fs-note);
    line-height: 1.5;
    margin: 0 0 20px;
    max-height: 200px;
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    padding: 13px 14px;
}

/* Which platform's post is shown above: one choice per platform, the chosen one filled. */
.simple-preview-switch[b-idhiw3zrb8] {
    align-self: flex-start;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    display: inline-flex;
    justify-self: start;
    margin: 0 0 12px;
    max-width: 100%;
    overflow-x: auto;
    padding: 3px;
    width: max-content;
}

.simple-preview-photo-note[b-idhiw3zrb8] {
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    margin: -4px 0 12px;
}

.simple-preview-switch button[b-idhiw3zrb8] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 750;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
}

.simple-preview-switch button > span[b-idhiw3zrb8] {
    display: inline-flex;
}

.simple-preview-switch button:hover[b-idhiw3zrb8] {
    background: var(--ground);
    color: var(--ink);
}

.simple-preview-switch button[aria-pressed="true"][b-idhiw3zrb8] {
    background: var(--ink);
    color: #ffffff;
}

@media (forced-colors: active) {
    .simple-preview-switch button[aria-pressed="true"][b-idhiw3zrb8] {
        border: 2px solid Highlight;
    }
}

/* While the post is made: a soft light crosses the picture box, and three lines stand where the
   caption will be, in the caption's own frame. Still for anyone who asks for less motion. */
.simple-preview-placeholder.making[b-idhiw3zrb8] {
    overflow: hidden;
}

.simple-preview-placeholder.making[b-idhiw3zrb8]::after,
.simple-caption-coming span[b-idhiw3zrb8]::after {
    animation: simple-making-b-idhiw3zrb8 1.8s ease-in-out infinite;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
}

.simple-caption-coming[b-idhiw3zrb8] {
    border-left: 2px solid var(--border-light);
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 15px 14px;
}

.simple-caption-coming span[b-idhiw3zrb8] {
    background: var(--line);
    border-radius: var(--radius-pill);
    height: 8px;
    overflow: hidden;
    position: relative;
}

.simple-caption-coming span:nth-child(2)[b-idhiw3zrb8] {
    width: 88%;
}

.simple-caption-coming span:nth-child(3)[b-idhiw3zrb8] {
    width: 54%;
}

@keyframes simple-making-b-idhiw3zrb8 {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .simple-preview-placeholder.making[b-idhiw3zrb8]::after,
    .simple-caption-coming span[b-idhiw3zrb8]::after {
        animation: none;
        display: none;
    }
}

/* Where a post that has gone out went: one row per platform. */
.simple-results[b-idhiw3zrb8] {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

/* Icon, what happened, then the link. A reason runs the full width under them; beside the
   link it was squeezed into a narrow column on a phone. */
.simple-results li[b-idhiw3zrb8] {
    align-items: start;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    display: grid;
    gap: 2px 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px 12px;
}

.simple-results li.missed[b-idhiw3zrb8] {
    background: var(--tint-red);
    border-color: var(--tint-red-line);
}

.simple-result-icon[b-idhiw3zrb8] {
    color: var(--green-ink);
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    padding-top: 1px;
}

.simple-results li.missed .simple-result-icon[b-idhiw3zrb8] {
    color: var(--red-ink);
}

.simple-result-text[b-idhiw3zrb8] {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-sm);
    gap: 2px 8px;
    line-height: 1.4;
    min-width: 0;
}

.simple-result-text strong[b-idhiw3zrb8] {
    color: var(--ink);
}

.simple-result-text > span[b-idhiw3zrb8] {
    color: var(--ink-soft);
}

.simple-result-reason[b-idhiw3zrb8] {
    color: var(--red-ink);
    font-size: var(--fs-sm);
    grid-column: 2 / -1;
    grid-row: 2;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* 24px tall at least, so a thumb can hit it (it was 20). The negative margin keeps the row as it was. */
.simple-results a[b-idhiw3zrb8] {
    align-items: center;
    color: var(--blue);
    display: inline-flex;
    font-size: var(--fs-sm);
    font-weight: 700;
    gap: 4px;
    grid-column: 3;
    grid-row: 1;
    margin-block: -2px;
    min-height: 24px;
    text-decoration: none;
}

.simple-results a:hover[b-idhiw3zrb8] {
    text-decoration: underline;
}

.simple-progress-actions[b-idhiw3zrb8] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: auto;
}

.simple-approval-note[b-idhiw3zrb8] {
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.45;
    margin: 0 0 14px;
}

.simple-approval-note strong[b-idhiw3zrb8] {
    color: var(--ink);
}

/* Under the buttons it explains Edit first, so it sits apart from them, not on them. */
.simple-progress-actions + .simple-approval-note[b-idhiw3zrb8] {
    margin: 12px 0 0;
}

@media (min-width: 821px) {
    .simple-progress.needs-attention .simple-progress-preview[b-idhiw3zrb8] {
        min-height: 400px;
    }

    /* Once there is a photo it sets the card's height. Stretched to the text beside it,
       a wide photo floated in a tall tinted box with empty bands above and below.
       A very tall photo stops at 560px and is shown whole. */
    .simple-progress .simple-progress-preview:has(> img)[b-idhiw3zrb8],
    .simple-progress.needs-attention .simple-progress-preview:has(> img)[b-idhiw3zrb8] {
        align-self: start;
        min-height: 0;
    }

    .simple-progress-preview:has(> img) > img[b-idhiw3zrb8] {
        display: block;
        height: auto;
        max-height: 560px;
        position: relative;
    }

    .simple-progress.needs-attention .simple-progress-body[b-idhiw3zrb8] {
        padding: 0 0 0 32px;
    }

    .simple-progress.needs-attention .simple-progress-body h1[b-idhiw3zrb8] {
        font-size: var(--fs-2xl);
    }

    .simple-progress.needs-attention .simple-stage-list[b-idhiw3zrb8] {
        margin: 24px 0 20px;
    }

    .simple-progress.needs-attention .simple-job-meta[b-idhiw3zrb8] {
        margin-bottom: 14px;
        padding: 13px 0;
    }

    .simple-progress.needs-attention .simple-caption-preview[b-idhiw3zrb8] {
        margin-bottom: 14px;
        max-height: 200px;
    }
}

/* On a large screen the photo being approved stayed 400px wide inside a 980px card, with
   most of the screen empty. It gets an even half of a wider card there. */
@media (min-width: 1200px) {
    .simple-progress[b-idhiw3zrb8] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: 1180px;
    }

    .simple-progress-preview:has(> img) > img[b-idhiw3zrb8] {
        max-height: 680px;
    }
}

.simple-page button:focus-visible[b-idhiw3zrb8],
.simple-page textarea:focus-visible[b-idhiw3zrb8],
.simple-results a:focus-visible[b-idhiw3zrb8] {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* Focused after Approve or Discard so the outcome is read out; it is not a control. */
#simple-progress-title:focus[b-idhiw3zrb8] { outline: none; }

@media (max-width: 820px) {
    .simple-main[b-idhiw3zrb8] {
        padding: 28px 22px 48px;
    }

    .simple-workspace[b-idhiw3zrb8] {
        grid-template-areas:
            "options"
            "actions"
            "handoff";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .simple-progress[b-idhiw3zrb8] {
        grid-template-columns: 1fr;
    }

    .simple-handoff[b-idhiw3zrb8] {
        border-left: 0;
        border-top: 1px solid var(--border-light);
        margin-top: 24px;
        padding: 24px 0 0;
    }

    .simple-handoff-actions[b-idhiw3zrb8] {
        border-left: 0;
        padding: 20px 0 0;
    }

    .simple-progress-body[b-idhiw3zrb8] { padding: 24px 0 0; }

    .simple-progress-preview[b-idhiw3zrb8] {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .simple-topbar[b-idhiw3zrb8] {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 58px;
        padding: 8px 12px;
    }

    .simple-title-lockup[b-idhiw3zrb8] {
        font-size: var(--fs-note);
        margin-left: 2px;
    }

    .simple-mark[b-idhiw3zrb8] {
        height: 28px;
        width: 28px;
    }


    .simple-nav a[b-idhiw3zrb8] {
        font-size: var(--fs-sm);
        min-height: 44px;
        padding: 0 5px;
    }

    /* Ten pixels apart, "Simple mode Studio editor Auto mode" read as one name. A rule marks
       where the page's name ends and the ways out begin; the buttons gave up the width for it. */
    .simple-nav[b-idhiw3zrb8] {
        border-left: 1px solid var(--line-strong);
        gap: 2px;
        padding-left: 4px;
    }

    .simple-main[b-idhiw3zrb8] {
        padding: 24px 14px 36px;
    }

    .simple-intro h1[b-idhiw3zrb8],
    .simple-progress-body h1[b-idhiw3zrb8] {
        font-size: var(--fs-heading);
    }

    .simple-intro > p:last-child[b-idhiw3zrb8],
    .simple-lede[b-idhiw3zrb8] {
        font-size: var(--fs-base);
    }

    .simple-workspace[b-idhiw3zrb8] {
        margin-top: 20px;
    }

    .simple-progress-body[b-idhiw3zrb8] {
        padding: 24px 0 0;
    }

    .simple-options[b-idhiw3zrb8] {
        padding: 0;
    }

    .simple-handoff[b-idhiw3zrb8] {
        padding: 20px 0 0;
    }

    .simple-handoff-actions[b-idhiw3zrb8] {
        padding: 20px 0 0;
    }

    .simple-option[b-idhiw3zrb8] {
        gap: 12px;
        grid-template-columns: 42px minmax(0, 1fr) 16px;
        min-height: 72px;
        padding: 13px;
    }

    .simple-option-icon[b-idhiw3zrb8] {
        height: 42px;
        width: 42px;
    }

    .simple-photo-selection[b-idhiw3zrb8],
    .simple-topic-field[b-idhiw3zrb8] {
        margin-left: 0;
    }

    .simple-photo-selection[b-idhiw3zrb8] {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .simple-photo-selection img[b-idhiw3zrb8] {
        height: 46px;
        width: 46px;
    }

    .simple-handoff-steps[b-idhiw3zrb8] {
        margin: 18px 0;
    }

    .simple-handoff-steps li[b-idhiw3zrb8] {
        align-items: flex-start;
    }

    .simple-submit[b-idhiw3zrb8] {
        min-height: 48px;
    }

    .simple-progress[b-idhiw3zrb8] {
        margin-top: 0;
    }

    .simple-progress-preview[b-idhiw3zrb8] {
        aspect-ratio: 4 / 3;
    }

    .simple-stage-list[b-idhiw3zrb8] {
        margin: 30px 0 26px;
    }

    .simple-stage-list li[b-idhiw3zrb8] {
        font-size: var(--fs-xs);
    }

    .simple-job-meta[b-idhiw3zrb8] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .simple-progress-actions[b-idhiw3zrb8],
    .simple-progress-actions > :is(button, a)[b-idhiw3zrb8] {
        width: 100%;
    }

    /* Icon beside the message and the button under it. Wrapping put the icon on a line of its own. */
    .simple-blocker[b-idhiw3zrb8] {
        align-items: start;
        column-gap: 10px;
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .simple-blocker :is(a, button)[b-idhiw3zrb8] {
        grid-column: 2;
        justify-self: start;
        /* The words line up with the message; the padding keeps the tap target. */
        margin-left: -8px;
    }
}

/* On a short screen (a laptop at 200% zoom, a phone on its side) the full-width preview was a whole
   screen tall, so "In progress" showed an empty box and the steps and buttons sat a scroll below.
   It keeps the photo whole at a height that leaves the heading and the first steps in view. */
@media (max-width: 820px) and (max-height: 500px) {
    .simple-progress-preview[b-idhiw3zrb8] {
        aspect-ratio: auto;
        height: 40vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simple-option[b-idhiw3zrb8] {
        transition: none;
    }
}

/* The two mode links went under the title below 600px, which made a 118px bar pinned over a
   phone. They fit beside it down to 380px. */
@media (max-width: 379px) {
    .simple-topbar[b-idhiw3zrb8] {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .simple-nav[b-idhiw3zrb8] { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--border-light); border-left: 0; margin-top: 8px; padding-left: 0; padding-top: 4px; }
}

/* Where the keyboard shrinks the page (Firefox on Android, a phone held sideways), the pinned bar
   sat over the topic being typed. It scrolls away while a box has focus. */
@media (pointer: coarse) and (max-height: 520px) {
    .simple-page:has(textarea:focus, input:focus) .simple-topbar[b-idhiw3zrb8] {
        position: static;
    }
}
/* /Pages/SubscribeResume.razor.rz.scp.css */
/* Deleting the account from here: the plans dialog stands aside while it is open. */
.resume-delete[b-kr6t8nny2f] { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.resume-delete h2[b-kr6t8nny2f] { font-size: var(--fs-lg, 18px); margin: 0 0 12px; }
.resume-delete h2:focus[b-kr6t8nny2f] { outline: none; }
.resume-delete ul[b-kr6t8nny2f] { margin: 0 0 16px; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.resume-delete label[b-kr6t8nny2f] { display: block; margin-bottom: 8px; }
.resume-delete input[b-kr6t8nny2f] { width: 100%; max-width: 320px; margin-bottom: 16px; }