/* ==========================================================================
   /study — Materials tab and the single-material detail page.
   Both surfaces share the `.st-mat-` prefix and one file on purpose: the
   material page is the Materials tab zoomed in on one row, and they share the
   kind tiles, chips and card treatments.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tab shell + drop-anywhere layer
   -------------------------------------------------------------------------- */

.st-mat-tab {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.st-mat-tab--empty {
    justify-content: center;
    align-items: center;
}

.st-mat-bannerhost:empty {
    display: none;
}

.st-mat-bodyhost {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.st-mat-tab--empty .st-mat-bodyhost {
    align-items: center;
}

.st-mat-droplayer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--st-accent-soft);
    /* The drag events belong to the tab underneath. */
    pointer-events: none;
}

.st-mat-tab.is-dragover .st-mat-droplayer {
    display: flex;
}

.st-mat-droplayer__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 36px;
    border: 2px dashed var(--st-accent);
    border-radius: var(--st-radius-card);
    background: var(--st-surface);
    color: var(--st-ink);
    font-size: 15px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. Empty state (mockup 03)
   -------------------------------------------------------------------------- */

.st-mat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0;
}

.st-mat-empty__head {
    gap: 10px;
}

.st-mat-illo {
    margin-bottom: 2px;
}

.st-mat-methods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.st-mat-method {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px;
    text-align: left;
    color: var(--st-ink);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.st-mat-method:hover {
    transform: var(--st-lift);
    box-shadow: var(--st-shadow-soft-hover);
}

.st-mat-method__icon {
    color: var(--st-space, var(--st-accent));
}

.st-mat-method__title {
    font-size: 14px;
    font-weight: 700;
}

.st-mat-method__hint {
    font-size: 12px;
    color: var(--st-ink-2);
}

.st-mat-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 28px;
    text-align: center;
}

.st-mat-dropzone--slim {
    padding: 16px;
    margin-top: 4px;
}

.st-mat-dropzone__title {
    font-size: 14px;
    font-weight: 700;
}

.st-mat-dropzone__hint {
    font-size: 12px;
}

.st-mat-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--st-ink-2);
}

.st-mat-steps__step {
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-mat-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--st-fill);
    color: var(--st-ink-2);
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.st-mat-steps__num.is-first {
    background: var(--st-ink);
    color: var(--st-on-ink);
}

.st-mat-steps__line {
    width: 24px;
    height: 1px;
    background: var(--st-border-strong);
}

/* --------------------------------------------------------------------------
   3. Library: toolbar
   -------------------------------------------------------------------------- */

.st-mat-library {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.st-mat-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.st-mat-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 180px;
    color: var(--st-ink-4);
}

.st-mat-search svg {
    position: absolute;
    left: 13px;
    pointer-events: none;
}

.st-mat-search__input {
    padding-left: 38px;
    font-size: 14px;
}

/* Takes the space the add button used to occupy: search sits left, filters,
   sort and layout sit right. Adding notes lives in the space header. */
.st-mat-toolbar__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.st-mat-sort {
    width: auto;
    min-width: 132px;
    min-height: 36px;
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    background-position: right 10px center;
}

.st-mat-layoutbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
}

.st-mat-count {
    font-size: 13px;
    color: var(--st-ink-4);
    margin-top: -6px;
}

/* --------------------------------------------------------------------------
   4. Library: rows
   -------------------------------------------------------------------------- */

.st-mat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-mat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--st-surface);
    border: var(--st-card-border-w) solid var(--st-border);
    border-radius: var(--st-radius-card-sm);
    box-shadow: var(--st-shadow-card);
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.st-mat-item:hover {
    border-color: var(--st-border-strong);
    box-shadow: var(--st-shadow-soft-hover);
    transform: var(--st-lift);
}

.st-mat-item:focus-visible {
    outline: 2px solid var(--st-focus);
    outline-offset: 2px;
    border-color: var(--st-border-strong);
}

.st-mat-item.is-selected {
    border-color: var(--st-accent);
}

.st-mat-item__pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    cursor: pointer;
}

.st-mat-item__pick input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--st-accent);
    cursor: pointer;
}

/* The card opens the material on click (see materials.js). Nested controls —
   checkbox, generate, kebab — stopPropagation / are skipped by closest().
   A wrapper <a> is not an option with buttons inside. */
.st-mat-item__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 2px;
}

.st-mat-item__tile {
    flex: 0 0 auto;
}

.st-mat-item__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.st-mat-item__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--st-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-mat-item:hover .st-mat-item__title,
.st-mat-item__title:hover {
    color: var(--st-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.st-mat-item__preview {
    font-size: 13px;
    line-height: 1.5;
    color: var(--st-ink-2);
    /* Two lines of the note is enough to recognise it by. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-mat-item__preview--empty {
    color: var(--st-ink-4);
    font-style: italic;
}

.st-mat-item__meta {
    font-size: 12px;
    color: var(--st-ink-4);
}

/* Study status: the counts, or the button that makes them. */
.st-mat-item__study {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
}

.st-mat-item__statustext,
.st-mat-item__running {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--st-ink-2);
}

.st-mat-item__statustext svg {
    color: var(--st-space, var(--st-accent));
}

.st-mat-item__running svg {
    color: var(--st-space, var(--st-accent));
}

.st-mat-item__error {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.st-mat-item__errorlink {
    font: inherit;
    color: var(--st-danger-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.st-mat-item__more {
    flex: 0 0 auto;
    align-self: center;
}

/* Grid view: the same row, stacked, with the controls pinned to the corner. */
.st-mat-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.st-mat-list--grid .st-mat-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
}

.st-mat-list--grid .st-mat-item__pick {
    position: absolute;
    top: 8px;
    right: 44px;
}

.st-mat-list--grid .st-mat-item__more {
    position: absolute;
    top: 8px;
    right: 8px;
}

.st-mat-list--grid .st-mat-item__body {
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
}

.st-mat-list--grid .st-mat-item__title {
    white-space: normal;
    overflow: visible;
    display: block;
}

.st-mat-list--grid .st-mat-item__gen {
    width: 100%;
}

.st-mat-nomatch {
    text-align: center;
}

.st-mat-nomatch .st-btn {
    margin: 0 auto;
}

/* Bulk action bar ---------------------------------------------------------- */

/* Sticky sits on the host, not the bar: the host is a direct child of the
   tall library column, so it has somewhere to travel. */
.st-mat-bulkhost {
    position: sticky;
    bottom: 12px;
    z-index: 5;
}

.st-mat-bulkhost:empty {
    display: none;
}

.st-mat-bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: var(--st-surface);
    border: var(--st-card-border-w) solid var(--st-border);
    border-radius: var(--st-radius-card-sm);
    box-shadow: var(--st-shadow-soft), 0 10px 28px var(--st-shadow-tint);
}

.st-mat-bulk__count {
    font-size: 14px;
    font-weight: 700;
}

.st-mat-bulk__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-mat-bulk__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--st-space, var(--st-accent));
}

.st-mat-bulk--running {
    border-color: var(--st-space, var(--st-accent));
}

/* --------------------------------------------------------------------------
   4b. Loading the board's notes
   -------------------------------------------------------------------------- */

.st-mat-loading {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.st-mat-loading__line,
.st-mat-textload__line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--st-ink-3);
}

.st-mat-item--skel {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
}

.st-mat-skel__tile {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.st-mat-skel__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.st-mat-skel__line {
    display: block;
    height: 11px;
    width: 100%;
}

.st-mat-skel__line--title {
    height: 14px;
    width: 44%;
}

.st-mat-skel__line--short {
    width: 28%;
}

.st-mat-textload {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   5. Add modals
   -------------------------------------------------------------------------- */

.st-mat-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 24px;
    text-align: center;
}

.st-mat-drop__title {
    font-size: 14px;
    font-weight: 700;
}

.st-mat-drop__hint {
    font-size: 12px;
}

.st-mat-picked {
    gap: 6px;
}

.st-mat-picked .st-chip {
    flex: 0 0 auto;
}

/* Files we cannot read in the browser get named, not silently dropped. */
.st-mat-unreadable {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--st-warm-soft);
    color: var(--st-warm-ink);
    font-size: 13px;
    line-height: 1.45;
}

.st-mat-composer {
    min-height: 260px;
    font-size: 14px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. Material detail page
   -------------------------------------------------------------------------- */

.st-mat-page {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.st-mat-detailhead {
    padding: 22px var(--st-main-pad-x);
    background: var(--st-surface-2);
    border-bottom: var(--st-frame-border-w) solid var(--st-frame-border);
}

.st-mat-detailhead__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: var(--st-content-max);
    margin: 0 auto;
}

.st-mat-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    color: var(--st-ink-2);
}

.st-mat-back:hover {
    color: var(--st-ink);
}

.st-mat-detailhead__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.st-mat-detailhead__title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.st-mat-title {
    font-family: var(--st-font-display);
    font-weight: var(--st-display-weight);
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    min-width: 0;
}

.st-mat-main {
    min-width: 0;
}

/* Which board this note is on, and the way out to it. */
.st-mat-where {
    font-size: 13px;
    color: var(--st-ink-3);
}

.st-mat-where__link {
    color: var(--st-ink-2);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.st-mat-where__link:hover {
    color: var(--st-ink);
}

/* The editor ----------------------------------------------------------------
   The shared note editor (canvas/note_editor.js), hosted by
   core/note_editor.js as one Study-session instance. The engine owns
   everything inside .st-note-editor__host when the dock is revealed; its
   stylesheets are inserted BEFORE the study ones, so anything here wins on
   equal specificity. */

.st-note-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Upper-right Saved / loading toast. Empty = hidden; autosave confirmation
   stays visible without the old explanation bar. */
.st-note-editor__status {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 40;
    box-sizing: border-box;
    max-width: min(240px, calc(100% - 36px));
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--st-ink);
    color: var(--st-on-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    user-select: none;
}

.st-note-editor__status:empty {
    display: none;
    padding: 0;
    box-shadow: none;
}

/* The host is the editor's pane: .ln-note-editor-pane is the class
   notesai/note_editor_card.css scopes the full-pane card on (the Document
   view scopes the same rules on its own pane id). Those rules size the card
   to its pane, so the pane needs a definite height — the note body and the
   AI thread then share it and scroll inside it, rather than growing the
   study page. This card IS the panel, so the pane paints nothing itself. */
.st-note-editor__host.ln-note-editor-pane {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Page header above; keeps the composer on screen (no card bar). */
    height: calc(100vh - 200px);
    min-height: 520px;
    padding: 8px 10px 10px;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
}

/* Study minimalChrome: no empty primary band under the suppressed toolbars. */
.st-note-editor__host .content-block.ln-minimal-chrome > .ln-card-chrome,
.st-note-editor__host .content-block.ln-minimal-chrome > .ln-card-edit-tools,
.st-note-editor__host .content-block.ln-minimal-chrome > .ln-brain-status {
    display: none !important;
}

.st-note-editor__host .content-block.ln-minimal-chrome .ln-card-aff-group--right {
    display: none !important;
}

.st-note-editor__empty {
    padding: 20px;
}

/* Persistent editor park: canvas stays mounted (not display:none) while
   other Study views are showing, so toolbar/layout survive reveal. */
.st-note-editor-park {
    position: fixed;
    left: -12000px;
    top: 0;
    width: 960px;
    height: 720px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

.st-note-editor-park .note-canvas {
    width: 100%;
    height: 100%;
}

.note-canvas.is-st-note-swap .content-block {
    visibility: hidden;
}

/* Rail --------------------------------------------------------------------- */

.st-mat-railcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-mat-rail__empty {
    font-size: 13px;
    line-height: 1.5;
}

/* Generation: one AI request, so the control says so and shows its state. */
.st-mat-gen[aria-busy="true"] {
    pointer-events: none;
}

.st-mat-gen__error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.st-mat-gen__again {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--st-border-soft);
}

.st-mat-about {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    font-size: 13px;
}

.st-mat-about__key {
    color: var(--st-ink-4);
}

.st-mat-about__value {
    color: var(--st-ink-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

.st-mat-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.st-mat-counts__item {
    padding: 0;
    gap: 2px;
}

.st-mat-counts__item .st-stat__value {
    font-size: 20px;
}

.st-mat-counts__item .st-stat__label {
    font-size: 11px;
}

.st-mat-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-mat-card {
    border: 1px solid var(--st-border-soft);
    border-radius: 10px;
    background: var(--st-surface-2);
    overflow: hidden;
}

.st-mat-card__front {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.st-mat-card__front::-webkit-details-marker {
    display: none;
}

.st-mat-card__chev {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--st-ink-4);
    transition: transform 0.16s ease;
}

.st-mat-card[open] .st-mat-card__chev {
    transform: rotate(180deg);
}

.st-mat-card__back {
    padding: 0 12px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--st-ink-2);
}

.st-mat-cards__more {
    align-self: flex-start;
}

.st-mat-concepts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-mat-concepts__pct {
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
    color: var(--st-ink-2);
}

.st-mat-concepts__pct[data-tone="green"] { color: var(--st-green); }
.st-mat-concepts__pct[data-tone="accent"] { color: var(--st-accent); }
.st-mat-concepts__pct[data-tone="warm"] { color: var(--st-warm-ink); }
.st-mat-concepts__pct[data-tone="danger"] { color: var(--st-danger-ink); }

.st-mat-mastery {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.st-mat-mastery__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    min-width: 0;
}

.st-mat-notfound {
    max-width: 520px;
    margin: 48px auto;
    text-align: center;
}

.st-mat-notfound .st-btn-row {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .st-mat-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-mat-search {
        flex: 1 1 100%;
    }

    .st-mat-toolbar__controls {
        flex: 1 1 auto;
    }
}

@media (max-width: 760px) {
    .st-mat-empty {
        gap: 22px;
        padding: 8px 0;
    }

    .st-mat-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .st-mat-steps__line {
        display: none;
    }

    .st-mat-toolbar {
        gap: 8px;
    }

    .st-mat-toolbar__controls {
        margin-left: 0;
    }

    .st-mat-sort {
        flex: 1 1 auto;
    }

    .st-mat-list--grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .st-mat-title {
        font-size: 22px;
    }

    .st-mat-detailhead__top .st-btn-row {
        width: 100%;
    }

    .st-note-editor__host.ln-note-editor-pane {
        height: calc(100vh - 170px);
        min-height: 440px;
    }

    .st-mat-bulkhost {
        bottom: 8px;
    }
}

@media (max-width: 520px) {
    .st-mat-methods {
        grid-template-columns: minmax(0, 1fr);
    }

    .st-mat-method {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        padding: 14px;
    }

    .st-mat-method__hint {
        flex: 1 1 100%;
    }

    .st-mat-item {
        gap: 4px;
        padding: 10px;
    }

    .st-mat-item__pick {
        width: 28px;
    }

    .st-mat-counts {
        gap: 4px;
    }

    .st-mat-bulk {
        justify-content: flex-start;
    }
}

/* Photo notes show the photo itself in place of the kind tile — the image is
   the fastest way to recognise a page you photographed. */
.st-mat-item__thumb {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--st-radius-card-sm);
    border: 1px solid var(--st-border-soft);
    background: var(--st-fill);
}

/* The photo on a material page: the note's own content, shown above the text
   that was read out of it. */
.st-mat-figure {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-mat-figure__img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--st-radius-card-sm);
    border: 1px solid var(--st-border-soft);
    background: var(--st-fill);
}

.st-mat-filerow {
    margin-bottom: 18px;
}

/* The "nothing generated yet" line above the note list. .st-banner is an
   inline-flex pill built for two or three bold words; this one is a sentence,
   so it wraps, sits at body weight and spans the column. */
.st-mat-nextstep {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    background: var(--st-accent-soft);
    color: var(--st-ink);
    font-weight: 500;
    line-height: 1.5;
}
.st-mat-nextstep svg { flex: none; margin-top: 2px; color: var(--st-accent); }
.st-mat-nextstep strong { font-weight: 700; }

/* A photo whose text could not be read. Stated in the row itself, because a
   toast is gone by the time the student looks, and the row otherwise reads as
   a normal, studiable note. */
.st-mat-item__preview--failed {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--st-ink-2);
}
.st-mat-item__warn { color: var(--st-danger); font-weight: 600; }