/*
 * Stetworth /app — the suggestion-card surface: the deck, the shared
 * renderer's card body (app variant), the composer's card-context
 * checklist, and the context guidance tiers — cut from style.css's
 * "The suggestion-card surface" section unchanged and in the original
 * order.  Four rules that must beat style.css's shared button and
 * pill groups on source order at equal specificity (.sc-integration,
 * .card-context-clear, .context-hint-action with
 * .context-hint-dismiss, and .readiness-route-link) stay behind in
 * style.css instead.
 */
/*
 * Load order is load-bearing: the /app shell links every split sheet
 * BEFORE style.css.  That keeps both source-order contracts intact —
 * a rule kept behind in style.css still beats its shared group there
 * by file order, and the responsive tail at the end of style.css
 * still overrides this sheet's base rules at equal specificity.
 * This sheet declares no design-token block of its own and carries
 * no media block of any kind — every width, motion and paged
 * override for these rules lives in style.css's responsive tail
 * (docs/APP.md#the-split-stylesheets).
 */

/* ============================================================
 * The suggestion-card surface
 * (docs/APP.md#the-suggestion-card-surface)
 *
 * Two vocabularies meet here.  The `sc-*` rules style the SHARED
 * renderer's markup (web/shared/js/suggestion_card.js) — those class
 * names are the component's contract and each host surface styles them
 * in its own stylesheet, which is why /admin has its own copy of the
 * same names.  Everything else (`suggestion-deck-*`, `card-context-*`,
 * `card-slot-*`) belongs to this file's own chrome: the section around
 * the deck and the composer's context checklist.
 *
 * The app variant is deliberately quiet — a suggestion offered above the
 * composer must not out-shout the composer itself.  That intent holds
 * everywhere a composer exists (the flag-off home, #/new); its one
 * recorded carve-out is the first-run assistant home, where there is no
 * composer to out-shout and the scoped `.page-first-run` rule below
 * promotes the deck heading for exactly that state (docs/APP.md).
 * ============================================================ */

.suggestion-deck {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.suggestion-deck-title {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--c-ink-muted);
    margin: 0;
}

/* The first-run carve-out from the "deliberately quiet" intent above:
   with zero tasks and zero turns there is no composer on `#/` and the
   deck IS the page's offer of somewhere to start, so the heading
   stands upright at the section-title step while `page-first-run` is
   latched (`_syncFirstRunState()`).  Size and roman style only, on the
   `--fs-*` scale — the rule declares no font weight, staying on the
   heading's inherited Garamond 400 (the shell's one heavier Garamond
   load, the wordmark's 700, belongs to the brand mark alone) — and
   the base rule above is byte-untouched everywhere a composer exists. */
.page-first-run .suggestion-deck-title {
    font-style: normal;
    font-size: var(--fs-section);
    letter-spacing: 0;
    color: var(--c-ink);
}

/* The read-failure notice (`_paintDeckFailureNotice`): the deck's own
   quiet register — one sentence where the deck would have been, never
   an error panel out-shouting the page around it. */
.suggestion-deck-notice {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-body);
    color: var(--c-ink-muted);
    margin: 0;
}

.suggestion-deck-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-3);
}

/* Once a conversation exists the deck compacts to title-only slips —
   the operator's placement and the impression telemetry stay honest:
   compacted, never hidden.  Keyed on the `page-conversing` latch
   (`_paintAssistantThread()`), which the empty state and the greeting
   never set, so the full deck survives until the first real turn. */
.page.page-conversing .suggestion-deck { margin-bottom: var(--s-4); }
.page.page-conversing .suggestion-deck .sc-card { padding: var(--s-2) var(--s-3); }
.page.page-conversing .suggestion-deck .sc-card-description,
.page.page-conversing .suggestion-deck .sc-slot-list,
.page.page-conversing .suggestion-deck .sc-integrations,
.page.page-conversing .suggestion-deck .sc-standalone { display: none; }

/* --- The shared renderer's card body (app variant) --------------- */

.sc-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-rule);
    border-radius: var(--radius);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    /* A slip of the same stock as the sheet: a faint lift plus a thin
       oxblood spine drawn by the pseudo-element below (overflow keeps
       the spine's ends inside the radius). */
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh-slip);
}

.sc-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--c-oxblood);
}

.sc-card-interactive {
    cursor: pointer;
}

.sc-card-interactive:hover,
.sc-card-interactive:focus-visible {
    border-color: var(--c-rule-strong);
    /* A real lift above the resting `--sh-slip` occlusion — the two
       used to share this literal, which made hover a visual no-op. */
    box-shadow: var(--sh-lift);
}

.sc-card-interactive:focus-visible {
    outline: 2px solid var(--c-burnished);
    outline-offset: 2px;
}

.sc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
}

.sc-card-title {
    font-family: var(--font-accent);
    font-size: var(--fs-lede);
    font-weight: 400;
    color: var(--c-ink);
    margin: 0;
}

.sc-pin {
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-oxblood);
}

.sc-card-description {
    font-size: var(--fs-body);
    color: var(--c-ink-soft);
    margin: 0;
}

.sc-slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sc-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--fs-ui);
    color: var(--c-ink-muted);
}

.sc-slot-label {
    color: var(--c-ink-soft);
}

/* "Required" and "Optional" are words, not colours: the marker is what
   tells someone whether a card will gate on them, and a reader who
   cannot separate the two hues would learn nothing from a dot. */
.sc-slot-required,
.sc-slot-optional {
    font-size: var(--fs-micro);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sc-slot-required { color: var(--c-oxblood); }
.sc-slot-optional { color: var(--c-ink-faint); }

.sc-slot-detail,
.sc-slot-help {
    color: var(--c-ink-faint);
}

.sc-standalone {
    font-size: var(--fs-ui);
    color: var(--c-ink-faint);
    margin: 0;
}

.sc-integrations {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
}

.sc-empty {
    font-size: var(--fs-body);
    color: var(--c-ink-faint);
    margin: 0;
}

/* --- The composer's card-context checklist ----------------------- */

.card-context {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--c-rule);
    border-left: 3px solid var(--c-ink-faint);
    border-radius: var(--radius-sm);
    background: var(--c-paper-soft);
}

.card-context-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
}

.card-context-heading {
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.card-context-title {
    font-family: var(--font-accent);
    font-size: var(--fs-base);
    color: var(--c-ink);
}

.card-context-empty {
    font-size: var(--fs-ui);
    color: var(--c-ink-muted);
    margin: 0;
}

.card-slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.card-slot {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.card-slot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
}

.card-slot-label {
    font-size: var(--fs-ui);
    color: var(--c-ink-soft);
}

/* The gate, in words.  "Ready" / "Needed" / "Optional" say what the
   submit button is doing; colour only reinforces it. */
.card-slot-state {
    font-size: var(--fs-micro);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
}

.card-slot-state-ready { color: var(--c-status-complete); }
.card-slot-state-missing { color: var(--c-oxblood); }

.card-slot-help,
.card-slot-hint {
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    margin: 0;
}

.card-slot-input,
.card-slot-textarea,
.card-slot-select {
    width: 100%;
    padding: var(--s-2);
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--c-ink);
    background: var(--c-paper);
    border: 1px solid var(--c-rule);
    border-radius: var(--radius-sm);
}

.card-slot-textarea { resize: vertical; }

.card-slot-input:focus-visible,
.card-slot-textarea:focus-visible,
.card-slot-select:focus-visible {
    outline: none;
    border-color: var(--c-burnished);
    box-shadow: var(--sh-well), var(--focus-ring);
}

.card-slot-connect-link {
    align-self: flex-start;
    font-size: var(--fs-ui);
    color: var(--c-oxblood);
}

/* --- Context guidance while typing ------------------------------- */
/* Two tiers, two weights of chrome, on purpose.  The tier-1 strip is a
 * single quiet line: it appears while somebody is mid-sentence, and
 * anything heavier would read as an error on text they are still
 * writing.  The tier-2 note is a bordered block because it appears
 * *instead of* a submission and has to be read — but it is the same
 * paper-soft treatment as the card checklist, never a modal: an overlay
 * would be a block, and this tier may never block. */

.context-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--fs-ui);
    color: var(--c-ink-muted);
}

.context-hint-lead {
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.context-hint-title {
    font-family: var(--font-accent);
    color: var(--c-ink);
}


.readiness-note {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3);
    border: 1px solid var(--c-rule);
    border-left: 3px solid var(--c-burnished);
    border-radius: var(--radius-sm);
    background: var(--c-paper-soft);
}

/* `display: flex` above outranks the user agent's `[hidden]` rule, so
   without this a cleared note (the mount ships hidden, and clearing
   sets `hidden = true` beside `innerHTML = ''`) would still paint its
   empty bordered box.  Covers the composer's mount and the batch
   items' (`.assistant-draft-readiness`) alike. */
.readiness-note[hidden] { display: none; }

/* The batch item's own readiness note: the composer's note verbatim,
   stretched to the item's width — the item column aligns flex-start,
   which would otherwise shrink the note to its text. */
.assistant-draft-readiness { width: 100%; }

.readiness-heading {
    margin: 0;
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.readiness-lede {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--c-ink);
}

.readiness-list {
    list-style: disc;
    margin: 0;
    padding-left: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.readiness-item { font-size: var(--fs-body); color: var(--c-ink); }

.readiness-help {
    display: block;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
}

.readiness-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* The express lane's one line, and its offer.  Styled as a sentence with
   a link in it — not as a third button beside "Add context" / "Run
   anyway" — because it offers a different run, it does not gate this
   one. */
.readiness-route {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--c-ink-muted);
}