/*
 * The admin. Utilitarian, but built for a thumb first.
 *
 * The published site does not use any of this — it has its own hand-written CSS
 * under assets/site/, copied and content-hashed by site:build. Keeping them apart
 * means the admin can change without republishing anything.
 */

:root {
    /* Muted and earthy, a quiet relative of the published site's palette rather
       than a copy of it — this is the workshop, not the room. */
    --ground: #16181a;
    --raised: #1e2124;
    --raised-high: #272b2f;
    --rule: #343a3f;
    --ink: #e8e6e1;
    --ink-dim: #9aa0a2;
    --leaf: #7a8b5a;
    --leaf-bright: #9db071;
    --bark: #8a6a4a;
    --alarm: #c9553d;

    --radius: 6px;
    --gap: 1rem;
    /* Below this, nothing is reliably hittable with a thumb. Apple and Google
       both land on ~44px; this is that, in rem so it scales with text size. */
    --tap: 2.75rem;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --ground: #f4f2ec;
        --raised: #fffefa;
        --raised-high: #ebe8df;
        --rule: #d3cec1;
        --ink: #22201c;
        --ink-dim: #62605a;
        --leaf: #5d7040;
        --leaf-bright: #46592c;
        --bark: #6e5236;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    /* Room for the fixed bottom nav plus the home-indicator strip on a modern
       phone, so the last row of a list is never trapped underneath it. */
    padding-bottom: calc(var(--tap) + env(safe-area-inset-bottom) + 1rem);
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* ---- app bar ---- */

.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 0.75rem 1rem;
    padding-top: calc(0.75rem + env(safe-area-inset-top));
    background: var(--raised);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-bar__brand {
    color: var(--leaf-bright);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.app-main {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--gap);
}

/* ---- bottom navigation ---- */

.app-nav {
    position: fixed;
    inset: auto 0 0 0;
    display: flex;
    background: var(--raised);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
}

.app-nav__item {
    flex: 1;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 0.875rem;
}

.app-nav__item.is-current {
    color: var(--leaf-bright);
    box-shadow: inset 0 2px 0 var(--leaf);
}

@media (min-width: 48rem) {
    body { padding-bottom: 0; }

    .app-nav {
        position: static;
        border-top: 0;
        border-bottom: 1px solid var(--rule);
        justify-content: center;
        gap: 1rem;
    }

    .app-nav__item { flex: 0 0 auto; padding: 0 1rem; }
}

/* ---- forms ---- */

.field { display: block; margin-bottom: 1.25rem; }

.field__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.field__hint {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-dim);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 0.625rem 0.75rem;
    background: var(--raised);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    /* Never below 16px. iOS Safari zooms the viewport on focus for anything
       smaller, and then leaves you scrolled sideways in the middle of a sentence. */
    font-size: 1rem;
    font-family: inherit;
}

textarea { min-height: 12rem; resize: vertical; line-height: 1.6; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--leaf-bright);
    outline-offset: 2px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--tap);
}

.checkbox input { width: 1.25rem; height: 1.25rem; accent-color: var(--leaf); }

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding: 0 1.125rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--raised-high);
    color: var(--ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button--primary {
    background: var(--leaf);
    border-color: var(--leaf);
    color: #12140f;
    font-weight: 600;
}

.button--danger { color: var(--alarm); border-color: var(--alarm); background: transparent; }

.button--block { width: 100%; }

/* Still a full tap target: --tap is the minimum a thumb can hit reliably and this
   sits inside a list of stops on a phone. Only the type and the padding shrink. */
.button--small { padding: 0 0.75rem; font-size: 0.8125rem; }

.button-row { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }

/* ---- flashes ---- */

.flash {
    margin: 0 0 var(--gap);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--leaf);
    background: var(--raised);
}

.flash--error { border-left-color: var(--alarm); }

/* ---- lists and cards ---- */

.card {
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
}

.post-list { list-style: none; margin: 0; padding: 0; }

.post-list__item { border-bottom: 1px solid var(--rule); }

.post-list__link {
    display: block;
    /* The whole row is the target, not just the title text. */
    padding: 0.875rem 0.25rem;
    color: inherit;
    text-decoration: none;
}

.post-list__title { display: block; font-weight: 600; }

.post-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--ink-dim);
}

.pill {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.pill--published { color: var(--leaf-bright); border-color: var(--leaf); }
.pill--draft { color: var(--bark); border-color: var(--bark); }
.pill--failed { color: var(--alarm); border-color: var(--alarm); }

.empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ink-dim);
}

/* ---- login ---- */

.login {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
}

.login__card { width: 100%; max-width: 22rem; }

/* ---- build indicator ---- */

.build-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }

.build-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ink-dim);
    flex: none;
}

.build-status--running .build-status__dot { background: var(--bark); animation: pulse 1.4s ease-in-out infinite; }
.build-status--success .build-status__dot { background: var(--leaf-bright); }
.build-status--failed .build-status__dot { background: var(--alarm); }

@keyframes pulse { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
    .build-status--running .build-status__dot { animation: none; }
}

.field--invalid input,
.field--invalid textarea,
.field--invalid select { border-color: var(--alarm); }

.field__errors {
    margin: 0.375rem 0 0;
    padding-left: 1.1rem;
    color: var(--alarm);
    font-size: 0.8125rem;
}

details.card > summary {
    cursor: pointer;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.build-status__error {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    overflow-x: auto;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- poem editor ----
 *
 * Side by side on a desktop, stacked on a phone with the preview under the text.
 * Not a toggle: the whole point of this template is watching the shape appear as
 * you type, and hiding one behind the other loses that.
 */

.poem-editor { display: grid; gap: var(--gap); margin-bottom: 1.5rem; }

@media (min-width: 60rem) {
    .poem-editor { grid-template-columns: 1fr 1fr; align-items: start; }
    /* Sticks while the textarea scrolls, so the shape stays in view on a long poem. */
    .poem-editor__pane:last-child { position: sticky; top: 4.5rem; }
}

/* Grid children default to min-width:auto, which means they refuse to shrink below
   their content — and a poem line does not wrap, so one long line pushed the whole
   admin sideways and put a scrollbar on the page. The pane scrolls instead. */
.poem-editor__pane { min-width: 0; }

.poem-editor__input {
    /* Monospace is not a preference here — it is what makes lining anything up
       possible, and it is the geometry the renderer reproduces. */
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1.6;
    /* No wrapping: a wrapped line hides the fact that it is one line, and the
       leading spaces of the next visual row are not real. */
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    min-height: 20rem;
}

.poem-preview {
    /* The preview scrolls on its own rather than stretching the page. */
    overflow-x: auto;
    padding: var(--gap);
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    min-height: 20rem;
}

/* The preview is showing older text than the textarea. Better to look wrong than
   to look current. */
.poem-preview.is-stale { opacity: 0.5; }

.poem-preview__paper img { max-width: 100%; height: auto; }

.poem-preview__paper {
    /* Approximates the published page rather than matching it exactly. Matching
       would mean loading the site's stylesheet into the admin and keeping two
       cascades from fighting; the shape is what is being checked here. */
    font-family: var(--serif, Iowan Old Style, Palatino, Georgia, serif);
    line-height: 1.9;
    font-variant-numeric: tabular-nums lining-nums;
}

.poem-preview__paper .poem__line { margin: 0; padding-left: var(--indent, 0); white-space: nowrap; transform: translateX(var(--drift, 0)); }
.poem-preview__paper .poem__line--blank { height: 1.9em; }
.poem-preview__paper .poem__gap { display: inline-block; width: calc(var(--columns) * 1ch); }
.poem-preview__paper .poem__rot, .poem-preview__paper .poem__scale { display: inline-block; }
.poem-preview__paper .poem__rot { transform: rotate(var(--rot)); }
.poem-preview__paper .poem__scale { transform: scale(var(--scale)); }
.poem-preview__paper .poem__rot.poem__scale { transform: rotate(var(--rot)) scale(var(--scale)); }
.poem-preview__paper .poem__fade { opacity: 0.55; }
.poem-preview__paper .poem__space { width: 100%; }
.poem-preview__paper .poem__slot {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    color: var(--ink-dim);
    font-family: var(--font);
    font-size: 0.8125rem;
    text-align: center;
}

/* Notes, not alarms: an unclosed {fade} is what "{fade}" looks like one second
   after you type it. */
.poem-preview__notes {
    margin: 0 0 var(--gap);
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--ink-dim);
}

.poem-preview__line { color: var(--bark); font-variant-numeric: tabular-nums; }
.poem-preview__error { color: var(--alarm); font-size: 0.8125rem; }

.poem-help { margin: 0; font-size: 0.875rem; }
.poem-help dt { margin-top: 0.75rem; }
.poem-help dt code { color: var(--leaf-bright); font-family: var(--mono); font-size: 0.8125rem; }
.poem-help dd { margin: 0.125rem 0 0; color: var(--ink-dim); }

/* ---- travelogue editor ---- */

.stops { list-style: none; margin: 1rem 0; padding: 0; }

.stop {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule);
}

.stop__thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius);
    flex: none;
    background: var(--raised-high);
}

.stop__body { flex: 1; min-width: 0; }

/* The stop's photographs and its own uploader, as a narrow column beside the
   details. Sized to hold two thumbnails side by side. */
.stop__photos { flex: none; width: 9.75rem; }

.stop-photos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
    padding: 0;
}

.stop-photo { position: relative; }

.stop-photo__thumb {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--raised-high);
}

.stop-photo__remove {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    /* Solid rather than translucent: this sits on a photograph, and a photograph
       can be any colour at all. */
    background: #12140fdd;
    color: #f2efe6;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.stop__unlocated {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--bark);
}

.stop__label, .stop__note { margin-bottom: 0.5rem; }

.stop__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-dim);
}

.stop__coords { font-variant-numeric: tabular-nums; }

.stop-add { margin-top: 1.5rem; }
.stop-add__coords { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }

/* The capture screen's main action. Deliberately large: it gets pressed with a
   thumb, outdoors, often while walking. */
.capture__add { font-size: 1.125rem; min-height: 3.5rem; margin-bottom: 1rem; }

.stops--compact .stop__form, .stops--compact .stop__note { display: none; }
.stops--compact .stop { padding: 0.5rem 0; }

/* Below this there is not room for a photo column and readable fields beside it,
   so the stop stacks: pictures first, then what it is called. */
@media (max-width: 34rem) {
    .stop { flex-direction: column; }
    .stop__photos { width: auto; }
}

[data-photo-queue-target="status"].is-error { color: var(--alarm); }


/* The shared map stylesheet asks for its colours through --map-* tokens rather
   than reaching into either palette, because the admin and the site name their
   colours differently. This is the admin's answer. */
.route-map {
    --map-context: var(--rule);
    --map-route: var(--leaf);
    --map-here: var(--bark);
    --map-paper: var(--ground);
    --map-ink: var(--ink-dim);
    --map-font: var(--font);
    /* The workshop's raised surface, so the preview's panel sits on the page here
       the way the published one sits on paper. */
    --map-panel: var(--raised);
    /* The eaten edge, copied from --grown-mottle in assets/site/site.css. The shared
       stylesheet deliberately carries no fallback for it — see the note there — so
       each host supplies its own, and this is the admin's. Kept identical on purpose:
       the editor is showing what the build will publish. */
    --grown-mottle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><defs><radialGradient id='b'><stop offset='55%' stop-color='black'/><stop offset='100%' stop-color='black' stop-opacity='0'/></radialGradient></defs><g fill='url(%23b)'><circle cx='40' cy='47' r='4'/><circle cx='-4' cy='47' r='4'/><circle cx='60' cy='47' r='4'/><circle cx='2' cy='30' r='4'/><circle cx='66' cy='30' r='4'/><circle cx='42' cy='58' r='2'/><circle cx='30' cy='16' r='3'/><circle cx='37' cy='1' r='2'/><circle cx='37' cy='65' r='2'/><circle cx='18' cy='59' r='4'/><circle cx='10' cy='51' r='2'/><circle cx='40' cy='8' r='2'/><circle cx='56' cy='13' r='2'/><circle cx='-1' cy='56' r='2'/><circle cx='63' cy='56' r='2'/><circle cx='-2' cy='35' r='3'/><circle cx='62' cy='35' r='3'/><circle cx='13' cy='60' r='3'/><circle cx='-2' cy='57' r='2'/><circle cx='62' cy='57' r='2'/><circle cx='23' cy='11' r='2'/><circle cx='4' cy='19' r='3'/><circle cx='0' cy='43' r='3'/><circle cx='64' cy='43' r='3'/><circle cx='20' cy='52' r='3'/><circle cx='20' cy='31' r='3'/><circle cx='4' cy='-2' r='2'/><circle cx='4' cy='62' r='2'/><circle cx='48' cy='54' r='2'/><circle cx='50' cy='23' r='3'/><circle cx='1' cy='3' r='2'/><circle cx='65' cy='3' r='2'/><circle cx='-3' cy='13' r='4'/><circle cx='61' cy='13' r='4'/><circle cx='59' cy='60' r='3'/><circle cx='23' cy='34' r='4'/><circle cx='7' cy='48' r='4'/><circle cx='55' cy='2' r='4'/><circle cx='55' cy='66' r='4'/><circle cx='6' cy='22' r='3'/><circle cx='59' cy='22' r='4'/><circle cx='35' cy='20' r='3'/><circle cx='11' cy='5' r='2'/><circle cx='44' cy='0' r='2'/><circle cx='44' cy='64' r='2'/><circle cx='3' cy='-1' r='3'/><circle cx='3' cy='63' r='3'/><circle cx='26' cy='15' r='3'/><circle cx='53' cy='29' r='3'/><circle cx='4' cy='59' r='2'/><circle cx='32' cy='54' r='2'/><circle cx='47' cy='-3' r='3'/><circle cx='47' cy='61' r='3'/><circle cx='50' cy='7' r='3'/><circle cx='10' cy='54' r='2'/><circle cx='29' cy='0' r='4'/><circle cx='29' cy='64' r='4'/><circle cx='-2' cy='29' r='3'/><circle cx='62' cy='29' r='3'/><circle cx='47' cy='31' r='2'/><circle cx='26' cy='9' r='3'/><circle cx='-1' cy='-3' r='3'/><circle cx='-1' cy='61' r='3'/><circle cx='63' cy='-3' r='3'/><circle cx='63' cy='61' r='3'/><circle cx='32' cy='22' r='2'/><circle cx='17' cy='50' r='4'/><circle cx='23' cy='50' r='4'/><circle cx='44' cy='42' r='4'/><circle cx='23' cy='45' r='2'/><circle cx='31' cy='49' r='3'/><circle cx='19' cy='61' r='3'/><circle cx='37' cy='1' r='3'/><circle cx='37' cy='65' r='3'/><circle cx='16' cy='43' r='3'/><circle cx='52' cy='41' r='4'/><circle cx='22' cy='41' r='4'/><circle cx='53' cy='22' r='4'/><circle cx='56' cy='44' r='4'/><circle cx='-3' cy='33' r='3'/><circle cx='61' cy='33' r='3'/><circle cx='11' cy='54' r='4'/><circle cx='31' cy='44' r='3'/><circle cx='47' cy='11' r='4'/><circle cx='37' cy='43' r='3'/><circle cx='40' cy='50' r='3'/><circle cx='46' cy='2' r='2'/><circle cx='46' cy='66' r='2'/><circle cx='28' cy='42' r='2'/><circle cx='44' cy='40' r='2'/><circle cx='30' cy='14' r='2'/><circle cx='9' cy='20' r='2'/><circle cx='12' cy='2' r='3'/><circle cx='12' cy='66' r='3'/><circle cx='24' cy='39' r='3'/><circle cx='15' cy='58' r='2'/><circle cx='26' cy='18' r='3'/><circle cx='7' cy='53' r='3'/><circle cx='2' cy='39' r='2'/><circle cx='35' cy='22' r='3'/><circle cx='-3' cy='52' r='3'/><circle cx='61' cy='52' r='3'/><circle cx='52' cy='41' r='3'/><circle cx='9' cy='38' r='3'/><circle cx='-3' cy='-2' r='3'/><circle cx='-3' cy='62' r='3'/><circle cx='61' cy='-2' r='3'/><circle cx='61' cy='62' r='3'/><circle cx='22' cy='57' r='2'/><circle cx='7' cy='36' r='3'/><circle cx='9' cy='40' r='4'/><circle cx='24' cy='28' r='2'/><circle cx='19' cy='-2' r='3'/><circle cx='19' cy='62' r='3'/><circle cx='-2' cy='58' r='3'/><circle cx='62' cy='58' r='3'/><circle cx='17' cy='-1' r='3'/><circle cx='17' cy='63' r='3'/><circle cx='27' cy='20' r='4'/><circle cx='31' cy='18' r='3'/><circle cx='8' cy='40' r='3'/><circle cx='19' cy='50' r='4'/><circle cx='1' cy='34' r='2'/><circle cx='65' cy='34' r='2'/><circle cx='60' cy='50' r='2'/><circle cx='17' cy='10' r='4'/><circle cx='19' cy='39' r='6'/><circle cx='41' cy='39' r='7'/><circle cx='8' cy='49' r='6'/><circle cx='34' cy='22' r='6'/><circle cx='34' cy='30' r='6'/><circle cx='48' cy='38' r='5'/><circle cx='16' cy='29' r='8'/><circle cx='57' cy='35' r='5'/><circle cx='50' cy='27' r='7'/><circle cx='45' cy='40' r='6'/><circle cx='-6' cy='25' r='6'/><circle cx='58' cy='25' r='6'/><circle cx='55' cy='13' r='6'/></g></svg>");

    margin: 1rem 0 0;
}

/* ---- place search ---- */

.stop-add { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.stop-add__heading { margin: 0 0 1rem; font-size: 1rem; }

.stop-add__coords { margin-bottom: 1.25rem; }
.stop-add__coords > summary {
    cursor: pointer;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--ink-dim);
}
.stop-add__pair { display: flex; gap: 0.75rem; }
.stop-add__pair .field { flex: 1; }

.place__status { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--ink-dim); min-height: 1.2em; }

.place__results { list-style: none; margin: 0 0 1rem; padding: 0; }

.place__result {
    display: block;
    width: 100%;
    /* A whole row, hittable with a thumb — these are chosen from on a phone. */
    min-height: var(--tap);
    padding: 0.625rem 0.75rem;
    text-align: left;
    background: var(--raised-high);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: 0.375rem;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.place__result:hover { border-color: var(--leaf); }

/* ---- poem cheat sheet ----
 *
 * Sits under the textarea, always visible. Quiet enough not to compete with the
 * writing, close enough that remembering a directive is a glance rather than a
 * click.
 */

.cheatsheet {
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--ink-dim);
}

.cheatsheet__lead { margin: 0 0 0.75rem; }

.cheatsheet__list { margin: 0; padding: 0; list-style: none; }

.cheatsheet__list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.cheatsheet code {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--leaf-bright);
    white-space: nowrap;
}

.cheatsheet__note { margin: 0.75rem 0 0; }

@media (min-width: 60rem) {
    /* Two columns once there is room, so it stays one glance rather than a list
       that pushes the preview down the page. */
    .cheatsheet__list { columns: 2; column-gap: 1.5rem; }
    .cheatsheet__list li { break-inside: avoid; }
}

/* ---- poem image slots ---- */

.slots { list-style: none; margin: 0 0 1rem; padding: 0; }

.slot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rule);
}

.slot__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius);
    flex: none;
    background: var(--raised-high);
}

.slot__body { flex: 1; min-width: 0; }

/* The markup you would type, because that is the thing you need from this list. */
.slot__ref {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--leaf-bright);
}

.slot__name {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slot-add { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }