/* ==========================================================================
   /m/ — the parallel mobile-first experience. Clean slate: no Bootstrap,
   no utility dialect; the shared design tokens from memoriarch.css, then
   only what these screens need. Nothing here is sticky and nothing
   overlays the page — screen real estate belongs to the books.
   ========================================================================== */

:root {
    /* Surface */
    --bg:         #f5f1ea;
    --paper:      #fbf8f3;
    --paper-alt:  #efeae1;

    /* Ink */
    --ink:        #1f1a16;
    --ink-soft:   #3a312a;
    --ink-muted:  #6b5f55;
    --ink-faint:  #9a8d82;

    /* Lines & accents */
    --rule:       #e3dcd0;
    --rule-strong:#c9bfae;
    --accent:     #8a4a2c;
    --accent-soft:#c97a4b;

    /* Chrome / chips */
    --nav:        #221b16;
    --nav-ink:    #f4ead8;
    --chip:       #ede5d6;
    --chip-ink:   #5a4c3e;

    /* Type */
    --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
    --font-chrome:  "Geist", system-ui, -apple-system, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

    --radius-md: 6px;
    --radius-lg: 10px;
}

/* Text size, as on the main site (set on <html> before first paint). */
html.text-lg { font-size: 115%; }
html.text-xl { font-size: 130%; }

/* Cross-document view transitions: filter-to-detail navigations cross-fade,
   and a tapped cover morphs into the detail plate (each cover carries its
   own view-transition-name). Browsers without support just navigate. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.06rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
button { font: inherit; }

/* ------------------------------------------------------------- header */
.m-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem max(1rem, env(safe-area-inset-left)) .6rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-chrome);
    font-size: .85rem;
}
.m-header__brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.25rem;
}
.m-header__side { color: var(--ink-muted); }
.m-header__side a { color: inherit; text-decoration: none; }
.m-header__side a:hover { color: var(--accent); }

.m-main {
    max-width: 60rem;
    margin: 0 auto;
    padding: .8rem max(.8rem, env(safe-area-inset-left)) 3rem;
}
.m-noscript { color: var(--ink-muted); padding: 2rem 0; }

/* --------------------------------------------------------------- pills */
.m-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--chip-ink);
    font-family: var(--font-chrome);
    font-size: .85rem;
    cursor: pointer;
}
.m-pill--on { border-color: var(--accent); color: var(--accent); }

.m-stars { display: inline-flex; gap: .15rem; }
.m-stars__star {
    border: 0;
    background: none;
    padding: .2rem .15rem;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--rule-strong);
    cursor: pointer;
}
.m-stars__star--on { color: var(--accent-soft); }

/* ------------------------------------------------------------- home */
.m-home {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding-top: 1.2rem;
    max-width: 26rem;
    margin: 0 auto;
}
.m-home__link {
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1rem;
}
.m-home__link:active { background: var(--paper-alt); }
.m-home__switch {
    text-align: center;
    margin-top: 1.6rem;
    font-family: var(--font-chrome);
    font-size: .85rem;
}
.m-home__switch a { color: var(--ink-muted); }

/* -------------------------------------------------------------- detail */
.m-detail__cover {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.m-detail__cover img {
    max-width: min(100%, 22rem);
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 12px 28px rgba(58,46,40,.10);
}
.m-detail__nocover {
    display: grid;
    place-items: center;
    width: 12rem;
    aspect-ratio: 2 / 3;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-md);
    color: var(--ink-faint);
    font-family: var(--font-chrome);
    font-size: .8rem;
}

/* "More photographs" — expands DOWN the page (never a horizontal pager,
   which would fight the prev/next swipe). */
.m-detail__more {
    text-align: center;
    margin: -0.4rem 0 1rem;
}
.m-detail__more summary {
    display: inline-block;
    cursor: pointer;
    font-family: var(--font-chrome);
    font-size: .85rem;
    color: var(--accent);
    padding: .35rem .6rem; /* generous tap target */
}
.m-detail__more-fig {
    margin: .8rem 0 0;
}
.m-detail__more-fig img {
    max-width: min(100%, 22rem);
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 18px rgba(58,46,40,.08);
}
.m-detail__more-fig figcaption {
    font-family: var(--font-chrome);
    font-size: .82rem;
    color: var(--ink-muted);
    margin-top: .3rem;
}

.m-detail__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.2;
    margin: 0 0 .8rem;
}
/* The title reads again under the cover, beside the author — smaller,
   so the plate stays the centrepiece. */
.m-detail__title2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0 0 .1rem;
}
.m-detail__meta { margin: 0 0 .9rem; color: var(--ink-muted); }
.m-detail__reactions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
/* Memorial team only: who is starring/hearting, under the pills. */
.m-detail__who {
    font-family: var(--font-chrome);
    font-size: .8rem;
    color: var(--ink-muted);
    border-left: 2px solid var(--rule-strong);
    padding-left: .6rem;
    margin: -0.4rem 0 1rem;
}
.m-detail__who p { margin: .15rem 0; }
.m-prom {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.m-prom__btn {
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--chip-ink);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
    cursor: pointer;
}
.m-prom__btn--on {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--nav-ink);
}
.m-alloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
}
.m-alloc__input {
    width: auto;
    max-width: 11rem;
    padding: .3rem .55rem;
    font-size: .85rem;
}
.m-alloc__input--pencil { border-style: dashed; }
/* The allocate endpoint answers with the lightbox's status snippets —
   give their classes a home here. */
.m-alloc__status .text-success { color: var(--success, #5a7a3a); }
.m-alloc__status .text-muted { color: var(--ink-muted); }
.m-alloc__status .small { font-size: .8rem; }

/* Memory content stream — reuses the main site's block templates
   (memories/blocks/*.html), so their classes plus the few Bootstrap
   utilities they lean on get shims here, scoped to the stream. */
.m-detail__stream { color: var(--ink-soft); max-width: 42rem; }
.m-detail__stream .my-3 { margin: 1rem 0; }
.m-detail__stream .my-4 { margin: 1.5rem 0; }
.m-detail__stream .w-100 { width: 100%; }
.m-detail__stream .rounded { border-radius: var(--radius-md); }
.m-detail__stream .text-center { text-align: center; }
.m-detail__stream .text-start { text-align: left; }
.m-detail__stream .text-end { text-align: right; }
.m-detail__stream blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1.4rem;
    margin: 1.6rem 0;
    font-style: italic;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.45;
}
.m-detail__stream .block-quote {
    border: none;
    margin: 2rem auto;
    padding: 1rem;
    text-align: center;
}
.m-detail__stream .block-quote__mark {
    display: inline-block;
    color: var(--accent-soft);
    margin-bottom: .5rem;
}
.m-detail__stream .block-quote__text {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--ink-soft);
}
.m-detail__stream .block-quote__by,
.m-detail__stream .block-poem__by {
    color: var(--ink-muted);
    font-family: var(--font-chrome);
    font-size: .85rem;
    margin-top: .4rem;
}
.m-detail__stream .block-poem { margin: 1.5rem 0; }
.m-detail__stream .block-poem--centred { text-align: center; }
.m-detail__stream .block-poem__text {
    white-space: pre-line;
    font-family: var(--font-display);
    line-height: 1.6;
}
.m-detail__stream figcaption {
    text-align: center;
    font-style: italic;
    color: var(--ink-muted);
    font-size: .9rem;
    margin-top: .5rem;
}

.m-detail__synopsis { color: var(--ink-soft); }
.m-detail__source { font-family: var(--font-chrome); font-size: .85rem; }
.m-detail__shelved {
    color: var(--ink-muted);
    font-family: var(--font-chrome);
    font-size: .85rem;
    border-top: 1px solid var(--rule);
    padding-top: .9rem;
}
.m-detail__code { font-family: var(--font-mono); }

/* ------------------------------------------------------ bottom bar
   Shared by browse (the island renders its own controls into it) and
   detail. Fixed in the thumb zone; auto-hides on scroll-down (a few
   lines of JS on each page) so it never permanently costs space. */
.m-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .5rem max(1rem, env(safe-area-inset-left))
        calc(.5rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--rule);
    font-family: var(--font-chrome);
    transition: transform .18s ease;
}
.m-bar--hidden { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
    .m-bar { transition: none; }
}
.m-bar__spacer { height: 4.2rem; }
.m-bar__link {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .9rem;
    padding: .45rem .2rem;
}
.m-bar__mid {
    color: var(--ink-faint);
    font-size: .82rem;
}

/* ------------------------------------------------- shared form controls */
.m-btn {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--nav-ink);
    border-radius: 999px;
    padding: .4rem 1.1rem;
    font-family: var(--font-chrome);
    font-size: .9rem;
    cursor: pointer;
}
.m-btn:disabled { opacity: .45; cursor: default; }
.m-btn--outline { background: var(--paper); color: var(--ink-soft); border-color: var(--rule-strong); }
.m-input {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    font: inherit;
    color: var(--ink);
}

/* ------------------------------------------------- comments + say panel */
.m-comments,
.m-say {
    border-top: 1px solid var(--rule);
    margin-top: 1.4rem;
    padding-top: 1rem;
}
.m-say__heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    margin: 0 0 .6rem;
}
.m-comments__one { margin-bottom: .9rem; }
.m-comments__who {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .1rem;
    font-family: var(--font-chrome);
    font-size: .82rem;
}
.m-comments__who span { color: var(--ink-faint); }
.m-comments__text { margin: 0; color: var(--ink-soft); }

/* The zipper: one collapsed row that unfolds the say routes. */
.m-say__zip {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.15rem;
    padding: .3rem 0; /* generous tap target */
}
.m-say__zip::-webkit-details-marker { display: none; }
.m-say__chev {
    display: inline-block;
    margin-left: .45rem;
    color: var(--accent);
    transition: transform .15s ease;
}
details[open] > .m-say__zip .m-say__chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .m-say__chev { transition: none; }
}

.m-say__route {
    display: block;
    border-bottom: 1px solid var(--rule);
    padding: .55rem 0;
}
.m-say__route summary,
.m-say__route--link {
    cursor: pointer;
    font-family: var(--font-chrome);
    font-size: .92rem;
    color: var(--ink-soft);
    text-decoration: none;
    /* generous tap target for less steady hands */
    padding: .3rem 0;
    /* one marker system: our ▶ replaces the browser's, so the link
       row's ▶▶ aligns and sizes identically */
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
}
.m-say__route summary::-webkit-details-marker { display: none; }
.m-say__mark {
    flex: none;
    color: var(--accent);
    font-size: .62em;
    transition: transform .15s ease;
}
details[open] > summary .m-say__mark { transform: rotate(90deg); }
.m-say__mark--ff { letter-spacing: -.3em; padding-right: .3em; }
@media (prefers-reduced-motion: reduce) {
    .m-say__mark { transition: none; }
}
.m-say__form { padding: .5rem 0 .3rem; }
.m-say__form .m-btn { margin-top: .5rem; }
.m-say__hint {
    font-family: var(--font-chrome);
    font-size: .82rem;
    color: var(--ink-muted);
    margin: .3rem 0;
}
.m-say__rec-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .5rem 0 .3rem;
}
.m-say__preview { width: 100%; margin: .5rem 0; }
.m-say__done {
    font-family: var(--font-chrome);
    color: var(--success, #5a7a3a);
    margin: .4rem 0;
}

.m-detail__walk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-top: 1.6rem;
    border-top: 1px solid var(--rule);
    padding-top: 1rem;
}
.m-detail__step {
    display: block;
    text-decoration: none;
    color: var(--ink-soft);
    min-height: 44px;
}
.m-detail__step--next { text-align: right; grid-column: 2; }
.m-detail__step-dir {
    display: block;
    font-family: var(--font-chrome);
    font-size: .78rem;
    color: var(--accent);
}
.m-detail__step-title { font-size: .95rem; }

/* ------------------------------------------------------------- flash */
.m-flash { margin: .2rem 0 1rem; }
.m-flash__item {
    margin: 0 0 .5rem;
    padding: .6rem .9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper-alt);
    font-family: var(--font-chrome);
    font-size: .9rem;
}
.m-flash__item--error, .m-flash__item--danger { border-color: #b3402c; color: #7a2a1c; }
.m-flash__item--success { border-color: #6f8f5a; }

/* ------------------------------------------------- home: more + hello */
.m-home__more {
    display: flex;
    flex-direction: column;
    margin-top: 1.2rem;
    border-top: 1px solid var(--rule);
}
.m-home__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .2rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--font-chrome);
    font-size: .95rem;
}
.m-home__row:active { background: var(--paper-alt); }
.m-hello {
    margin-top: 1.2rem;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.m-hello__body { white-space: pre-line; color: var(--ink-soft); margin: 0 0 .8rem; }
.m-hello__label {
    display: block;
    font-family: var(--font-chrome);
    font-size: .85rem;
    color: var(--ink-muted);
    margin: .6rem 0 .25rem;
}
.m-hello__trap { position: absolute; left: -9999px; }
.m-home__switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.text-size-picker { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-chrome); }
.text-size-picker__label { color: var(--ink-muted); font-size: .8rem; margin-right: .2rem; }
.text-size-picker button {
    width: 2.3rem;
    height: 2.3rem;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 .3rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink-soft);
    line-height: 1;
    font-family: var(--font-body);
    cursor: pointer;
}
.text-size-picker button:nth-of-type(1) { font-size: .85rem; }
.text-size-picker button:nth-of-type(2) { font-size: 1.1rem; }
.text-size-picker button:nth-of-type(3) { font-size: 1.4rem; }
.text-size-picker button[aria-pressed="true"] { background: var(--ink-soft); color: var(--paper); border-color: var(--ink-soft); }

/* ------------------------------------------------------- star explainer */
.m-starhelp {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin: .4rem 0 .8rem;
    padding: .6rem .8rem;
    border: 1px dotted var(--rule-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-chrome);
    font-size: .85rem;
    color: var(--ink-muted);
    line-height: 1.7;
}
.m-starhelp__close { border: 0; background: none; color: var(--ink-faint); font-size: 1.1rem; line-height: 1; padding: .1rem .3rem; cursor: pointer; }

/* --------------------------------------------------------------- search */
.ms__form { display: flex; gap: .5rem; margin: .4rem 0 1rem; }
.ms__form input { flex: 1; }
.ms__count { color: var(--ink-muted); font-family: var(--font-chrome); font-size: .9rem; margin: 0 0 .6rem; }
.ms__kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ms__hit {
    display: flex;
    gap: .8rem;
    padding: .7rem;
    margin-bottom: .6rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}
.ms__hit img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.ms__hit-body { min-width: 0; }
.ms__hit-title { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
.ms__hit-meta { color: var(--ink-muted); font-family: var(--font-chrome); font-size: .78rem; margin-top: .15rem; }
.ms__hit-excerpt { font-size: .92rem; color: var(--ink-soft); margin-top: .25rem; }
.ms__badge {
    font-family: var(--font-chrome);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ink-soft);
    color: var(--paper);
    border-radius: 4px;
    padding: .2em .55em;
    margin-left: .35rem;
    vertical-align: .2em;
    white-space: nowrap;
}

/* =========================================================== form pages
   The shared Django form pages (allauth sign-in, onboarding, profile,
   contributions, unsubscribe) keep their templates — which speak
   Bootstrap's class dialect — and extend m/base_form.html on the simple
   site. This block answers exactly the classes those templates use,
   scoped so the islands never see them. Add here when a form page gains
   a class; don't reach for Bootstrap. */
.m-main--form { max-width: 44rem; }
.m-main--form .container { width: 100%; margin: 0 auto; padding: 0; }
.m-main--form .row { display: flex; flex-wrap: wrap; gap: .75rem; }
.m-main--form .col, .m-main--form .col-md-6, .m-main--form .col-lg-4 { flex: 1 1 100%; min-width: 0; }
.m-main--form .justify-content-center { justify-content: center; }
.m-main--form .justify-content-between { justify-content: space-between; }
.m-main--form .d-flex { display: flex; }
.m-main--form .d-inline-flex { display: inline-flex; }
.m-main--form .d-block { display: block; }
.m-main--form .align-items-center { align-items: center; }
.m-main--form .align-items-start { align-items: flex-start; }
.m-main--form .flex-wrap { flex-wrap: wrap; }
.m-main--form .flex-shrink-0 { flex-shrink: 0; }
.m-main--form .flex-grow-1 { flex-grow: 1; }
.m-main--form .gap-1 { gap: .25rem; }
.m-main--form .gap-2, .m-main--form .g-2 { gap: .5rem; }
.m-main--form .gap-3 { gap: 1rem; }
.m-main--form .w-100 { width: 100%; }
.m-main--form .mx-auto { margin-left: auto; margin-right: auto; }
.m-main--form .text-center { text-align: center; }
.m-main--form .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-main--form .list-unstyled { list-style: none; padding-left: 0; }
.m-main--form .rounded { border-radius: var(--radius-md); }
.m-main--form .border { border: 1px solid var(--rule); }
.m-main--form .border-top { border-top: 1px solid var(--rule); }
.m-main--form .my-5 { margin-top: 2rem; margin-bottom: 2rem; }
.m-main--form .mb-0 { margin-bottom: 0; }
.m-main--form .mb-1 { margin-bottom: .25rem; }
.m-main--form .mb-2 { margin-bottom: .5rem; }
.m-main--form .mb-3 { margin-bottom: 1rem; }
.m-main--form .mb-4 { margin-bottom: 1.5rem; }
.m-main--form .mt-1 { margin-top: .25rem; }
.m-main--form .mt-2 { margin-top: .5rem; }
.m-main--form .mt-3 { margin-top: 1rem; }
.m-main--form .mt-4 { margin-top: 1.5rem; }
.m-main--form .ms-1 { margin-left: .25rem; }
.m-main--form .mx-1 { margin-left: .25rem; margin-right: .25rem; }
.m-main--form .p-0 { padding: 0; }
.m-main--form .p-3 { padding: 1rem; }
.m-main--form .pt-1 { padding-top: .25rem; }
.m-main--form .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.m-main--form .py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.m-main--form .py-5 { padding-top: 2rem; padding-bottom: 2rem; }
.m-main--form .small { font-size: .88rem; }
.m-main--form .lead { font-size: 1.15rem; color: var(--ink-soft); }
.m-main--form .text-muted { color: var(--ink-muted); }
.m-main--form .text-faint { color: var(--ink-faint); }
.m-main--form .text-success { color: #4c7a3a; }
.m-main--form .text-danger { color: #a33a26; }
.m-main--form .fw-medium { font-weight: 500; }
.m-main--form .text-decoration-none { text-decoration: none; }
.m-main--form .text-meta {
    font-family: var(--font-chrome);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.m-main--form h1, .m-main--form h2, .m-main--form h3, .m-main--form .h3, .m-main--form .h4, .m-main--form .h5 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.2;
    margin: 0 0 .5rem;
}
.m-main--form h1 { font-size: 1.8rem; }
.m-main--form .h3, .m-main--form h3 { font-size: 1.35rem; }
.m-main--form .h4 { font-size: 1.2rem; }
.m-main--form .h5 { font-size: 1.05rem; }
.m-main--form .form-label {
    display: block;
    font-family: var(--font-chrome);
    font-size: .85rem;
    color: var(--ink-muted);
    margin-bottom: .3rem;
}
.m-main--form .form-control {
    display: block;
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}
.m-main--form .form-control:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.m-main--form .form-control-sm { padding: .35rem .6rem; font-size: .92rem; }
.m-main--form .form-control-lg { padding: .75rem .9rem; font-size: 1.1rem; }
.m-main--form .form-text { display: block; margin-top: .3rem; font-family: var(--font-chrome); font-size: .82rem; color: var(--ink-muted); }
.m-main--form .form-check { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .4rem; }
.m-main--form .form-check-input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--accent); flex-shrink: 0; }
.m-main--form .form-check-label { color: var(--ink-soft); }
.m-main--form .invalid-feedback { display: none; margin-top: .3rem; font-family: var(--font-chrome); font-size: .85rem; color: #a33a26; }
.m-main--form .is-invalid { border-color: #a33a26; }
.m-main--form .is-invalid ~ .invalid-feedback { display: block; }
.m-main--form .btn, .m-main--form .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-chrome);
    font-size: .95rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}
.m-main--form .btn:disabled { opacity: .45; cursor: default; }
.m-main--form .btn-dark, .m-main--form .btn-primary, .m-main--form .button:not(.button-secondary) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--nav-ink);
}
.m-main--form .btn-outline-dark, .m-main--form .btn-outline-secondary, .m-main--form .button-secondary {
    background: var(--paper);
    border-color: var(--rule-strong);
    color: var(--ink-soft);
}
.m-main--form .btn-link { border: 0; background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.m-main--form .btn-sm, .m-main--form .button-small { padding: .3rem .8rem; font-size: .85rem; }
.m-main--form .btn-lg { padding: .7rem 1.4rem; font-size: 1.05rem; }
.m-main--form .alert {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper-alt);
    font-family: var(--font-chrome);
    font-size: .92rem;
}
.m-main--form .alert-danger { border-color: #b3402c; color: #7a2a1c; }
.m-main--form .alert-warning { border-color: #c9a24b; }
.m-main--form .alert-success { border-color: #6f8f5a; }
.m-main--form .badge {
    display: inline-block;
    font-family: var(--font-chrome);
    font-size: .7rem;
    padding: .2em .55em;
    border-radius: 4px;
    background: var(--chip);
    color: var(--chip-ink);
    vertical-align: .15em;
}
.m-main--form .bg-dark { background: var(--ink-soft); color: var(--paper); }
.m-main--form .bg-success { background: #4c7a3a; color: var(--paper); }
.m-main--form .bg-warning { background: #c9a24b; color: var(--ink); }
.m-main--form .bg-light { background: var(--paper-alt); }
.m-main--form .ev-item-badge {
    font-family: var(--font-chrome);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ink-soft);
    color: var(--paper);
    border-radius: 4px;
    padding: .2em .55em;
    vertical-align: .25em;
    margin-left: .35rem;
    white-space: nowrap;
}
/* The auth layout: aside quote panel above the form on the simple skin. */
.m-main--form .auth-shell { display: block; }
.m-main--form .auth-aside {
    background: var(--ink-soft);
    color: var(--nav-ink);
    padding: 1.4rem 1.2rem 1.2rem;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.m-main--form .auth-aside__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--nav-ink);
    text-decoration: none;
}
.m-main--form .auth-aside__body { max-width: 30rem; }
.m-main--form .auth-aside .text-meta { color: rgba(244,234,216,.6); }
.m-main--form .auth-aside__heading {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--nav-ink);
    line-height: 1.15;
    margin: .3rem 0 .8rem;
}
.m-main--form .auth-aside__quote { margin: 0; color: rgba(244,234,216,.85); }
.m-main--form .auth-aside__quote blockquote {
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.45;
    font-style: italic;
    color: rgba(244,234,216,.92);
}
.m-main--form .auth-aside__quote figcaption {
    margin-top: .5rem;
    font-family: var(--font-chrome);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(244,234,216,.55);
}
.m-main--form .auth-pane { display: flex; justify-content: center; padding: .5rem 0 2rem; }
.m-main--form .auth-form { width: 100%; max-width: 26rem; }
.m-main--form .auth-form__title { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.m-main--form .auth-form__lede { color: var(--ink-muted); margin-bottom: 1.3rem; }
.m-main--form .auth-form__details { margin-top: 1.25rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.m-main--form .auth-form__details > summary {
    cursor: pointer;
    color: var(--ink-muted);
    font-family: var(--font-chrome);
    font-size: .9rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.m-main--form .auth-form__details > summary::-webkit-details-marker { display: none; }
.m-main--form .auth-form__details > summary::after { content: "›"; transition: transform .15s; color: var(--ink-faint); }
.m-main--form .auth-form__details[open] > summary::after { transform: rotate(90deg); }
.m-main--form .auth-form__foot { margin-top: 1.25rem; color: var(--ink-muted); }
.m-main--form .code-input { display: flex; gap: .55rem; justify-content: space-between; }
.m-main--form .code-input input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    color: var(--ink-soft);
}
.m-main--form .code-input input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* ------------------------------------------------------- round the house */
/* The team's phone page for the handover (/m/round/): one location at a
   time, a row per item, actions swap the row in place. Thumb left, words
   right, controls under — thumbs stay tappable at one hand's width. */
.m-main--round { max-width: 44rem; }
.m-round__where {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .2rem 0 .6rem;
}
.m-round__select { flex: 1 1 auto; min-width: 0; font-family: var(--font-chrome); font-size: .95rem; }
.m-round__step {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
}
.m-round__step--off { opacity: .3; pointer-events: none; }
.m-round__summary {
    margin: 0 0 .6rem;
    color: var(--ink-muted);
    font-family: var(--font-chrome);
    font-size: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .4rem;
    align-items: center;
}
.m-round__summary b { color: var(--ink); font-weight: 600; }
.m-round__sum-open { color: var(--accent); }
.m-round__sum-taken { color: #8a6a1c; }
.m-round__given-toggle { margin-left: auto; display: inline-flex; gap: .3rem; align-items: center; cursor: pointer; }

.m-round__list { display: flex; flex-direction: column; }
.m-round__row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .2rem .7rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--rule);
    transition: opacity .15s;
}
.m-round__row--busy { opacity: .45; pointer-events: none; }
.m-round__row--taken { background: linear-gradient(90deg, rgba(201,160,70,.14), transparent 60%); }
.m-round__thumb {
    display: block;
    width: 5.5rem;
    height: 4.2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--paper-alt);
}
.m-round__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-round__nothumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ink-faint);
    font-family: var(--font-chrome);
    font-size: .75rem;
}
.m-round__body { min-width: 0; }
.m-round__title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.m-round__meta { color: var(--ink-muted); font-family: var(--font-chrome); font-size: .8rem; }
.m-round__code { font-family: var(--font-mono); }
.m-round__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .25rem;
    font-family: var(--font-chrome);
    font-size: .9rem;
}
.m-round__who { color: var(--ink); font-weight: 600; }
.m-round__who--pencil { color: var(--ink-soft); font-weight: 500; }
.m-round__who small { color: var(--ink-faint); font-weight: 400; }
.m-round__who--open { color: var(--accent); font-weight: 500; }
.m-round__chip {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--chip);
    color: var(--chip-ink);
}
.m-round__chip--taken { background: #f1e2b6; color: #6a4f10; }
/* The taken toggle: amber when on, same tint as the chip. */
.m-btn--taken:not(.m-btn--outline) { background: #f1e2b6; color: #6a4f10; border-color: #e0c98a; }
.m-round__chip--new { background: #dbe7cf; color: #3d5a2a; }
.m-round__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
}
.m-round__pick { flex: 1 1 9rem; width: auto; padding: .4rem .55rem; font-family: var(--font-chrome); font-size: .9rem; }
.m-round__actions .m-btn { flex: 0 0 auto; }
.m-round__undo {
    border: 0;
    background: none;
    color: var(--accent);
    font-family: var(--font-chrome);
    font-size: .85rem;
    text-decoration: underline;
    padding: .2rem .3rem;
    cursor: pointer;
}
.m-round__note { color: #7a2a1c; font-family: var(--font-chrome); font-size: .85rem; margin: .3rem 0 0; }

/* A given item collapses to one quiet line with undo. */
.m-round__row--given {
    grid-template-columns: 1fr;
    padding: .4rem 0;
    color: var(--ink-faint);
}
.m-round__strip { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-chrome); font-size: .85rem; }
.m-round__strip-text { flex: 1 1 auto; min-width: 0; }
.m-round__strip b { color: var(--ink-muted); font-weight: 600; }

.m-round__snap {
    margin-top: 1.4rem;
    padding: .9rem;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.m-round__snap form { display: flex; flex-direction: column; gap: .5rem; }
.m-round__file input { position: absolute; left: -9999px; }
.m-round__file .m-btn { display: inline-block; }