/* ==========================================================================
           #I  Saved — the places one means to go
           ==========================================================================

           Brief: .impeccable/surfaces/public-28-saved-js.md. The journal keeps what
           happened; this page keeps what one means to do. A postcard rack: each place
           a card-sized entry — the name set large in print caps, the state word at
           its right like a stamp, the line beneath in the write face — racked in
           alphabetical order, unbroken, under a search line and the four state
           words. (Letter heads and an A–Z rail stood here for one afternoon in
           September and were taken out the same day: one finds a place by its name,
           not by its initial.) Colour only in the category mark, 9px square;
           magenta only on the acts that write into the record. The page is exactly
           the screen, as Boswell's is.
           ========================================================================== */

        #savedPage.active {
            background: var(--log-stock);
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            min-height: 0;
            /* clip, not hidden: a hidden box can still be scrolled by a focus or a
               scrollIntoView, and the head went off the top that way; a clipped box
               cannot scroll at all. */
            overflow: hidden;
            overflow: clip;
            padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
        }

        /* The head and its title are the room head (.room-bar, css/11-home.css, since
           2026-09-16). What is this room's own: the page is a column with its own scroller, a
           floor height for a head whose cells are words that change (Map and List), and side
           cells laid to the ends. Saved is a bottom-bar destination, so its left cell is the
           view it is in, not Back. */
        #savedPage .sv-bar {
            flex: none;
            min-height: calc(44px + 2 * var(--sp-2xs) + 1px + env(safe-area-inset-top, 0px));
        }
        #savedPage .sv-bar > :first-child { justify-self: start; }
        #savedPage .sv-bar > :last-child { justify-self: end; }
        #savedPage .sv-word,
        #savedSheet .sv-word,
        #savedPage .sv-act {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }
        #savedPage .sv-word:disabled, #savedSheet .sv-word:disabled { color: var(--log-ink-soft); cursor: default; }
        /* The acts that change the record — Put on a day, and Save at the foot of an
           open card's edit. Two of them since Edit was made to write, though this said
           "the one act" until 2026-09-08. */
        #savedPage .sv-act.is-record { color: var(--log-magenta); }
        /* And the ways in to adding, and Remove (owner, 2026-09-17: 打开表单算写记录，删除统一用品红). */
        #savedPage .sv-word.is-record:not(:disabled) { color: var(--log-magenta); }

        /* ---- The rack and the rail --------------------------------------------------- */
        #savedPage .sv-main {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            position: relative;
        }
        #savedPage .sv-body {
            flex: 1 1 auto;
            min-width: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        /* The tools above the rack: a search line in the write face, and the state words.
           (An A–Z rail stood at the right edge until 2026-09-06; the owner asked for a
           search and a filter in its place — 多了好查.) */
        #savedPage .sv-tools {
            flex: none;
            background: var(--log-stock);
            border-bottom: 1px solid var(--log-rule-firm);
        }
        #savedPage .sv-tools[hidden] { display: none; }
        /* The search is the writing line's grammar: transparent on the stock, the
           write face, the ink caret; focused, the band ground and a 2px ink baseline. */
        #savedPage .sv-search {
            display: flex;
            align-items: center;
            padding: 0 var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }
        #savedPage .sv-search:focus-within { background: var(--log-stock-lit, #DEE4E2); box-shadow: inset 0 -2px 0 0 var(--log-ink); }
        #savedPage .sv-search-in:focus-visible { outline: none; }
        /* ⚠️ THIS ROOM'S COPY OF THE AUTOFILL FIX WENT TO css/02-auth.css ON 2026-09-12.
           It was written here, correctly, with the note "the browser's own fill for a
           remembered value is not this page's" — and it was the ONLY field of eighty-one in
           the app that had it. The owner found the other eighty. The rule is shared now and
           this search box takes the default ground, which is the stock it sits on. */
        #savedPage .sv-search-in {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 44px;
            padding: 0;
            border: none;
            background: transparent;
            font-family: var(--log-write);
            font-size: var(--fs-base);
            color: var(--log-ink);
            caret-color: var(--log-ink);
            -webkit-appearance: none;
            appearance: none;
        }
        #savedPage .sv-search-in::placeholder { color: var(--log-ink-soft); }
        #savedPage .sv-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
        #savedPage .sv-filters {
            display: flex;
            gap: 0 var(--sp-lg);
            padding: 0 var(--sp-lg);
        }
        #savedPage .sv-filter {
            min-height: 40px;
            padding: 0;
            border: none;
            background: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
            cursor: pointer;
        }
        #savedPage .sv-filter.is-on { color: var(--log-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
        #savedPage .sv-filter-clear { margin-left: auto; color: var(--log-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

        #savedPage .sv-count {
            margin: 0;
            padding: var(--sp-sm) var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
            border-bottom: 1px solid var(--log-rule);
        }
        /* The country in a line is a word that narrows the rack: underlined, in the
           line's own face and the softer ink, with a word's touch height around it. */
        #savedPage .sv-line-word {
            position: relative;
            padding: 0;
            border: none;
            background: none;
            font: inherit;
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 0.2em;
            text-decoration-thickness: 1px;
            cursor: pointer;
        }
        #savedPage .sv-line-word::before { content: ''; position: absolute; inset: -12px -6px; }

        /* ---- One postcard ------------------------------------------------------------ */
        #savedPage .sv-card {
            padding: var(--sp-xs) var(--sp-lg) var(--sp-md);
            border-bottom: 1px solid var(--log-rule-firm);
            cursor: pointer;   /* a tap anywhere on the card opens or closes it */
        }
        #savedPage .sv-face {
            display: flex;
            align-items: center;
            gap: var(--sp-sm);
        }
        #savedPage .sv-open {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 44px;
            display: flex;
            align-items: center;
            gap: var(--sp-sm);
            padding: 0;
            border: none;
            background: none;
            text-align: left;
            cursor: pointer;
            color: var(--log-ink);
        }
        /* The category's colour, the one colour on the page, in a 9px square — the
           Register's mark, a shade larger. Bare when no category is set. */
        #savedPage .sv-mark {
            flex: none;
            width: 9px;
            height: 9px;
            background: var(--c, var(--log-rule));
        }
        #savedPage .sv-mark.is-bare { background: transparent; box-shadow: inset 0 0 0 1px var(--log-rule-firm); }
        /* The name at the Home trip name's size (owner, 2026-09-06: not the user
           name's), so the rack reads as entries, not headings. */
        #savedPage .sv-name {
            font-family: var(--log-print);
            font-size: var(--fs-body);
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 1.15;
            color: var(--log-ink);
            overflow-wrap: anywhere;
        }
        #savedPage .is-been .sv-name { color: var(--log-ink-soft); }
        /* The state word, stamped: a box of one hairline round the word. Someday and
           Next are tapped to change; Been is read, not tapped, so it is a span. */
        #savedPage .sv-state {
            position: relative;
            flex: none;
            padding: 5px 6px 4px;
            border: 1px solid currentColor;
            background: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            line-height: 1;
            text-transform: uppercase;
            color: var(--log-ink);
        }
        #savedPage button.sv-state { cursor: pointer; }
        #savedPage button.sv-state::before { content: ''; position: absolute; inset: -9px -8px; }
        #savedPage .sv-state.is-someday { color: var(--log-ink-soft); }
        #savedPage .sv-state.is-been { color: var(--log-ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
        #savedPage .sv-line {
            margin: 0 0 0 calc(9px + var(--sp-sm));
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.4;
            color: var(--log-ink-soft);
        }

        /* Open: the line about it, where it sits on the record, the category words,
           the acts. */
        #savedPage .sv-more { padding: var(--sp-sm) 0 0 calc(9px + var(--sp-sm)); }
        #savedPage .sv-more[hidden] { display: none; }
        #savedPage .sv-note {
            margin: 0 0 var(--sp-xs);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.5;
            color: var(--log-ink);
        }
        #savedPage .sv-on {
            margin: 0 0 var(--sp-xs);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }
        #savedPage .sv-print {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--log-ink);
        }
        /* Ten words in four columns sized to their words: they fall 4 / 4 / 2 at every
           width, never one alone on the last row, and the longest word (WELLBEING)
           is never cut — the four longest columns add up to under the card's measure
           at 375. */
        #savedPage .sv-cats {
            display: grid;
            grid-template-columns: repeat(4, auto);
            justify-content: start;
            column-gap: var(--sp-sm);
            margin: 0 0 var(--sp-2xs);
        }
        #savedPage .sv-cat {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 40px;
            padding: 0;
            border: none;
            background: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
            cursor: pointer;
            white-space: nowrap;
        }
        #savedPage .sv-cat::before { content: ''; width: 7px; height: 7px; background: var(--c); opacity: 0.45; }
        #savedPage .sv-cat.is-on { color: var(--log-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
        #savedPage .sv-cat.is-on::before { opacity: 1; }
        #savedPage .sv-acts { display: flex; flex-wrap: wrap; gap: 0 var(--sp-lg); }
        /* Edit: the fields, each under its label, ruled beneath in ink. */
        #savedPage .sv-field-label {
            display: block;
            margin: var(--sp-xs) 0 0;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }
        #savedPage .sv-field {
            display: block;
            width: 100%;
            padding: var(--sp-2xs) 0;
            border: none;
            border-bottom: 1px solid var(--log-ink);
            background: transparent;
            font-family: var(--log-write);
            font-size: var(--fs-base);
            color: var(--log-ink);
            caret-color: var(--log-ink);
        }
        #savedPage .sv-field::placeholder { color: var(--log-ink-soft); }
        #savedPage .sv-field-label + .sv-cats { margin-top: 0; }
        /* The link, opened in a word; its host beside it in the softer ink. */
        #savedPage .sv-link {
            margin: 0 0 var(--sp-xs);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }
        #savedSheet .sv-word-a.is-inline { display: inline; min-height: 0; margin: 0; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--log-ink); text-decoration: underline; text-underline-offset: 0.2em; }
        #savedPage .sv-word-a {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            margin-right: var(--sp-xs);
        }

        /* ---- The map view ------------------------------------------------------------- */
        #savedPage .sv-map-wrap {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        #savedPage .sv-map-wrap[hidden], #savedPage .sv-body[hidden] { display: none; }
        #savedPage .sv-map {
            flex: 1 1 auto;
            min-height: 0;
            background: var(--log-stock);
        }
        /* Google's own chrome that the styles cannot reach. */
        #savedPage .sv-map .gm-style-cc, #savedPage .sv-map .gmnoprint a, #savedPage .sv-map .gm-style a[href^="https://maps.google.com"] { opacity: 0.6; }
        #savedPage .sv-map-pick {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            padding: var(--sp-xs) var(--sp-lg) var(--sp-sm);
            background: var(--log-stock);
            border-top: 1px solid var(--log-rule-firm);
        }
        #savedPage .sv-map-pick[hidden] { display: none; }
        #savedPage .sv-map-pick .sv-line { margin-left: 0; }
        #savedPage .sv-confirm {
            flex: 1 1 100%;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink);
        }

        /* ---- Waiting, failed, empty -------------------------------------------------- */
        #savedPage .sv-quiet, #savedSheet .sv-quiet {
            margin: 0;
            padding: var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }
        #savedSheet .sv-quiet { padding: var(--sp-md) 0 0; }
        #savedPage .sv-quiet.is-reading, #savedSheet .sv-quiet.is-reading { animation: wall-breathe 1.8s ease-in-out infinite; }
        #savedPage .sv-empty { padding: var(--sp-2xl) var(--sp-lg); }
        #savedPage .sv-empty p {
            margin: 0;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.5;
            color: var(--log-ink);
        }
        #savedPage .sv-empty-doors { display: flex; gap: var(--sp-lg); margin-top: var(--sp-sm); }

        /* ---- The sheets: Add a place, Put on a day ----------------------------------- */
        #savedSheet .sv-sheet-label {
            display: block;
            margin: var(--sp-md) 0 var(--sp-2xs);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }
        #savedSheet .acs-head + .sv-sheet-label { margin-top: 0; }
        #savedSheet .sv-sheet-field { position: relative; }
        #savedSheet .sv-sheet-field.is-row { display: flex; gap: var(--sp-md); align-items: center; }
        #savedSheet .sv-sheet-field.is-row .acs-input { flex: 1 1 auto; min-width: 0; }
        /* Where this room's list sits. Its INK moved to the shared block in
           css/17t-stop.css on 2026-09-11, when a fourth room asked for the same list and the
           choice was one dressing or four. */
        #savedSheet .place-suggestions {
            position: absolute;
            left: 0; right: 0; top: 100%;
            z-index: 3;
            max-height: 40vh;
            border-top: none;
        }
        #savedSheet .sv-sheet-import { margin-top: var(--sp-md); }
        #savedSheet .sv-sheet-import .sv-sheet-label { margin: 0; }
        #savedSheet .sv-sheet-hint {
            margin: var(--sp-2xs) 0 0;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.4;
            color: var(--log-ink-soft);
        }
        #savedSheet .sv-found {
            margin-top: var(--sp-md);
            padding: var(--sp-sm) var(--sp-md);
            border: 1px solid var(--log-rule-firm);
            background: var(--log-stock-band);
        }
        #savedSheet .sv-found-name {
            display: block;
            font-family: var(--log-print);
            font-size: var(--fs-body);
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--log-ink);
        }
        #savedSheet .sv-found-line {
            display: block;
            margin-top: 2px;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }
        #savedSheet .sv-sheet-lead {
            margin: 0 0 var(--sp-sm);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
        }
        #savedSheet .sv-sheet-lead + .acs-list { border-top: 1px solid var(--log-rule-firm); }
        #savedSheet .sv-days { max-height: 44vh; overflow-y: auto; border-top: 1px solid var(--log-rule-firm); }
        #savedSheet .acs-row.is-on { background: var(--log-stock-band); }
        #savedSheet .acs-go:disabled { background: var(--log-stock-band); color: var(--log-ink-soft); cursor: default; }
        #savedSheet .pin-trip { display: flex; align-items: baseline; gap: var(--sp-md); margin-bottom: var(--sp-sm); }
        #savedSheet .pin-trip-name {
            flex: 1;
            font-family: var(--log-print);
            font-size: var(--fs-small);
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        #savedPage :focus-visible, #savedSheet :focus-visible { outline: 2px solid var(--log-ink); outline-offset: 2px; }
        #savedPage .sv-open:focus-visible { outline-offset: -2px; }
        #savedPage ::selection, #savedSheet ::selection { background: var(--log-ink); color: var(--log-stock); }

        @media (prefers-reduced-motion: reduce) {
            #savedPage .sv-quiet.is-reading, #savedSheet .sv-quiet.is-reading { animation: none; }
        }