/* =========================================================================== dialogs.css — the inside of every dialog: binder settings, preferences, the card details, help, share, and the little confirm / prompt boxes. Owned by the Panels & Dialogs engineer. DESIGN.md §3 (Dialogs) and §5. The shell (.modal-root, .modal — glass, radius-lg, the 180ms rise) is in design.css. The structural rules are in app.css and shell.css; this sheet loads last and is the one that dresses them in the Holo Gallery language: glass panes, hairline light edges, motion tokens instead of hard-coded durations, and a live preview that sits above what it is previewing. =========================================================================== */ /* ========================================================= the common shell */ /* Every dialog is a column: a head that stays, a body that scrolls, a foot that stays. `.dlg` is the outer box the dialog modules put around their content. */ .dlg { display: flex; flex-direction: column; min-height: 0; } /* ------------------------------------------------------- the close button The one way out of every dialog: an icon-only × in the top-right corner, added by ui.js modal() so there is exactly one, in the same place, in every dialog in the app. A dialog that asks a question keeps its real answers in the foot (Save / Cancel, Delete / Cancel, Create / Cancel) and the × means cancel; an informational one has no foot buttons at all. It rides in a strip of no height that sticks to the top of the box, so it holds the corner whether the box itself scrolls (the short dialogs) or something inside it does (the card, help, settings and picker dialogs), and it is the first thing in the box, so Shift+Tab from the content lands on it. Every head below reserves room for it, so it never sits on a title. */ .modal { position: relative; } /* On a touch screen the dialog itself may hold the focus when it opens (ui.js modal): no ring for that. */ .modal[tabindex="-1"]:focus { outline: none; } .modal-x-slot { position: sticky; top: 0; z-index: 20; height: 0; flex: none; align-self: stretch; } .modal-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 11px; cursor: pointer; color: var(--ink-2); background: color-mix(in srgb, var(--bg-3) 80%, transparent); border: 1px solid var(--line); box-shadow: var(--glass-edge); transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out); -webkit-tap-highlight-color: transparent; } .modal-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, var(--bg-3)); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); } .modal-x:active { transform: translateY(1px); } .modal-x:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: 2px; } .modal-x-ico { display: grid; place-items: center; line-height: 0; pointer-events: none; } :root[data-motion="reduced"] .modal-x, :root[data-motion="off"] .modal-x { transition: none; } /* Room for it: every dialog head keeps its corner clear, so no title, subtitle or tab strip ever runs under the ×. */ .modal-head { padding: 20px 56px 13px 22px; } .modal.modal-picker .picker-head { padding-right: 56px; } /* Titles as the card dialog has them: larger, heavier, set tight — the dialogs with heads of their own (Add a card, Import, a kit, a shelf's settings, the Cover Studio, a 3D model) too. */ .modal-head h2 { margin: 0 0 5px; font-size: 21px; font-weight: 760; letter-spacing: -0.026em; line-height: 1.18; } .modal :is(.picker-head, .imp-head, .kf-head, .cab-set-head, .cs-head, .im-viewer-head) h2 { font-size: 21px; font-weight: 760; letter-spacing: -0.026em; line-height: 1.18; } @media (max-width: 520px) { .modal-head h2, .modal :is(.picker-head, .imp-head, .kf-head, .cab-set-head, .cs-head, .im-viewer-head) h2 { font-size: 18px; } } .modal-head p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } /* A dialog about one card shows it beside the title (Sold…, Send for grading): a small card, tilted a touch and lit from behind, as the card dialog stands its own. */ .modal-head.has-thumb { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; } .modal-head.has-thumb > :not(.dlg-thumb) { grid-column: 2; } .dlg-thumb { grid-row: 1 / span 2; width: 54px; aspect-ratio: var(--card-ratio); object-fit: cover; border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 28px -6px color-mix(in srgb, var(--accent) 50%, transparent); } .modal-body { padding: 16px 22px; display: flex; flex-direction: column; gap: var(--sp-4); } /* An informational dialog has no foot any more (the × is the way out), so the body keeps the room those buttons used to take at the bottom of the box. */ .modal-body:last-child { padding-bottom: 22px; } .modal-foot { padding: 6px 22px 20px; display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; flex-wrap: wrap; } .modal-foot .btn { height: 36px; padding: 0 16px; } .foot-spacer { flex: 1; } /* the quiet line at the bottom of a dialog: a caveat, a source, a warning */ .dlg-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); } .form-help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); } .form-help.is-warn { color: var(--gold-text); } /* ------------------------------------------------------ the shared look What the card dialog set, for every dialog: rounded fields that glow when they have the keyboard, small uppercase labels, section headings with an accent bar, and panels with the same soft fill and corner. */ .modal .input { border-radius: 10px; background: color-mix(in srgb, var(--bg) 72%, transparent); } .modal .input:focus, .modal .input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px -6px color-mix(in srgb, var(--accent) 55%, transparent); } .modal .btn:not(.btn-primary):not(.btn-icon):not(.seg-opt) { border-radius: 10px; } .modal .form-row > label, .modal .set-label, .modal .set-preview-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } /* Inside a dialog every box is a little rounder: the corners the card dialog uses. */ .modal { --radius: 14px; --radius-sm: 10px; } /* A dialog's section heading — Binder settings, Preferences, Help, Price alerts, Photos, Import, Quick add, a trade's sides, a kit's photos and notes, an admin card's sections: the accent bar beside it, as in the card dialog. Each keeps its own spacing. */ .modal :is(.set-sec-head h3, .help-group h3, .dlg-sec-head, .prefs-group h3, .al-msec h3, .dp-group h3, .imp-h3, .qa-h, .kf-sec, .trd-side h3, .kit-sheet-notes h3, .adc-sec h4) { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 740; letter-spacing: -0.012em; text-transform: none; color: var(--ink); } .modal :is(.set-sec-head h3, .help-group h3, .dlg-sec-head, .prefs-group h3, .al-msec h3, .dp-group h3, .imp-h3, .qa-h, .kf-sec, .trd-side h3, .kit-sheet-notes h3, .adc-sec h4)::before { content: ""; flex: none; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); } .modal .set-sec-head p { margin-left: 13px; } /* Import's list of what it could not match keeps its warning colour, bar and all. */ .modal .imp-missing .imp-h3 { color: var(--gold-text); } .modal .imp-missing .imp-h3::before { background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); } /* panels and notes */ .modal :is(.set-note, .help-list, .card-empty) { border-radius: 14px; background: color-mix(in srgb, var(--bg-3) 72%, transparent); } .modal .set-desk { border-radius: 14px; } .modal .dropzone { border-radius: 14px; background: color-mix(in srgb, var(--bg) 60%, transparent); } /* ------------------------------------------------------- confirm / prompt */ .modal.modal-ask { width: min(470px, 100%); } .dlg-ask .modal-head { padding-bottom: 8px; } .dlg-ask .modal-head h2 { font-size: 18px; } .dlg-ask .modal-foot { padding-top: 16px; } /* A question wears a badge in its own column (so a long one never runs back under it): "?" in the accent, and a destructive one "!" in the colour of what it is about to do, its title too. A prompt for a name has none. */ .dlg-ask:not(.is-prompt) .modal-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; } .dlg-ask:not(.is-prompt) .modal-head > * { grid-column: 2; } .dlg-ask:not(.is-prompt) .modal-head > h2 { margin-top: 3px; } .dlg-ask:not(.is-prompt) .modal-head::before { --tone: var(--accent); content: "?"; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 19px; font-weight: 800; line-height: 1; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent), 0 8px 22px -8px color-mix(in srgb, var(--tone) 60%, transparent); } .dlg-ask.is-danger .modal-head h2 { color: var(--danger); } .dlg-ask.is-danger .modal-head::before { --tone: var(--danger); content: "!"; } /* ------------------------------------------------------------------ share */ .modal.modal-share { width: min(540px, 100%); } .share-url { display: flex; gap: var(--sp-2); } .share-url .input { font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em; } /* A tall dialog is a column too: the title stays put and only the middle scrolls (the × holds the corner above it either way). The foot rule stands for a tall dialog that still asks something; neither of these two does any more, so both are all head and body. */ .modal.modal-card, .modal.modal-help { display: flex; flex-direction: column; overflow: hidden; } .modal.modal-card > .dlg, .modal.modal-help > .dlg { flex: 1; min-height: 0; } .modal.modal-card .modal-head, .modal.modal-help .modal-head { flex: none; } .modal.modal-card > .dlg > .modal-body, .modal.modal-help > .dlg > .modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .modal.modal-card > .dlg > .modal-foot, .modal.modal-help > .dlg > .modal-foot { flex: none; padding: 12px 20px 14px; border-top: 1px solid var(--line); box-shadow: var(--glass-edge); } /* The tall dialogs that ask something the same way: New binder (and the Sets page's), Your profile, Manage alerts, Export. Scrolled as a whole, on a short phone their buttons sat below the fold and the × floated over the rows passing under it; now only the middle scrolls, between a head and a foot that stay. (New shelf too: shelves.js.) */ .modal:is(.modal-form, .modal-profile, .modal-alerts, .modal-export, .shv-new-modal) { display: flex; flex-direction: column; overflow: hidden; } .modal:is(.modal-form, .modal-profile, .modal-alerts, .modal-export, .shv-new-modal) > :not(.modal-x-slot) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .modal:is(.modal-form, .modal-profile, .modal-alerts, .modal-export, .shv-new-modal) > * > .modal-head { flex: none; } .modal:is(.modal-form, .modal-profile, .modal-alerts, .modal-export, .shv-new-modal) > * > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .modal:is(.modal-form, .modal-profile, .modal-alerts, .modal-export, .shv-new-modal) > * > .modal-foot { flex: none; padding-top: 12px; border-top: 1px solid var(--line); } /* ============================================================ card details The card dialog (cardinfo.js) is four tabs over one card: Overview, Prices, History, Details. The card leads: its own colours are washed behind the top of the dialog (.card-ambient), it stands on a glow of its art (.card-stage), and what it is worth is the largest thing beside it, with its month as a picture and its listings as a gauge. Facts are tiles; actions are tiles in the colours the card's own buttons wear in the binder. The box keeps one height so switching tabs does not make it jump; only the panel scrolls. Everything money-coloured uses --gold-text and tabular numerals. */ .modal.modal-card { width: min(900px, 100%); height: min(720px, 88vh); overflow: hidden; background: var(--glass); } /* On a desktop with room for it, the dialog — and the card in it — is bigger. */ @media (min-width: 1100px) and (min-height: 760px) { .modal.modal-card { width: min(1140px, 92vw); height: min(880px, 90vh); } } .card-dlg2 { flex: 1; min-height: 0; position: relative; isolation: isolate; } /* The card's own colours behind the head and the top of the panel, fading out. */ .card-ambient { position: absolute; inset: 0 0 auto; height: 380px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .5) 50%, transparent); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .5) 50%, transparent); } .card-ambient img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(1.8); opacity: .42; transform: scale(1.4); } :root[data-theme="light"] .card-ambient img { opacity: .28; } /* ------------------------------------------------------------------- head */ .card-head { padding: 20px 56px 14px 22px; display: flex; align-items: flex-start; gap: 12px; } .card-head-t { flex: 1; min-width: 0; } .card-head h2 { margin: 0 0 9px; font-size: clamp(20px, 2.1vw, 27px); font-weight: 760; letter-spacing: -0.028em; line-height: 1.12; overflow-wrap: anywhere; } .card-chips { display: flex; flex-wrap: wrap; gap: 6px; } .card-chip { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: color-mix(in srgb, var(--bg-3) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .card-chip-ico { display: grid; place-items: center; color: var(--accent-text); } .card-chip-ico svg { width: 13px; height: 13px; display: block; } .card-chip.is-rarity { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 38%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); } /* level with the ×, just left of it (the head keeps the ×'s corner clear) */ .card-head-tcg { flex: none; margin-top: -8px; margin-right: -6px; height: 36px; padding: 0 12px; } @media (max-width: 520px) { .card-head-tcg { height: 32px; margin-top: -6px; padding: 0 10px; font-size: 12px; } .card-head-tcg-long { display: none; } } /* ------------------------------------------------------------------- tabs */ /* A segmented track: the tab showing is a raised pill, its icon lit. */ .card-tabs { flex: none; display: flex; gap: 3px; align-self: flex-start; margin: 0 22px 4px; padding: 4px; max-width: calc(100% - 44px); border-radius: 13px; background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid var(--line); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .card-tabs::-webkit-scrollbar { display: none; } .card-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out); } .card-tab-ico { display: grid; place-items: center; } .card-tab-ico svg { width: 16px; height: 16px; display: block; } @media (hover: hover) { .card-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } } .card-tab.is-on { color: var(--ink); background: var(--bg-3); box-shadow: inset 0 1px 0 var(--hairline), 0 2px 10px rgba(0, 0, 0, .32), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); } .card-tab.is-on .card-tab-ico { color: var(--accent-text); } :root[data-theme="light"] .card-tabs { box-shadow: inset 0 1px 2px rgba(20, 24, 32, .08); } :root[data-theme="light"] .card-tab.is-on { background: var(--bg-2); box-shadow: 0 1px 4px rgba(20, 24, 32, .14), 0 0 0 1px var(--line); } /* A tab with nothing to show stays legible — it is quieter, not faded out, and the cursor, the tooltip and the toast on a click all say why. */ .card-tab.is-off { color: var(--ink-3); font-weight: 500; cursor: not-allowed; } .card-tab.is-off:hover { background: none; color: var(--ink-3); } .card-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .card-body { gap: 18px; padding-top: 18px; } .card-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* A panel that is not showing is hidden, and a display of its own must not undo that. */ .card-panel[hidden] { display: none; } .card-panel:focus { outline: none; } /* --------------------------------------------------------------- overview */ /* The art is the hero (DESIGN.md §0 — the app is a showcase for the card): it stands at the left on a glow of itself and stays while the side scrolls. */ .card-over { display: grid; grid-template-columns: minmax(230px, 38%) minmax(0, 1fr); gap: 30px; align-items: start; } .card-stage { position: sticky; top: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 4px 6px; } .card-stage-glow { position: absolute; inset: 6% 2% 12%; z-index: -1; pointer-events: none; } .card-stage-glow img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; filter: blur(40px) saturate(2); opacity: .8; transform: translateY(6%) scale(1.06); } :root[data-theme="light"] .card-stage-glow img { opacity: .45; } /* The art is the one thing in a dialog that moves: the card itself, to turn any way and over (card-turn.js writes its transform), its face and its back each a side. */ .card-dlg-art { /* As wide as fits, and never so tall that the pills under it fall out of the panel (the dialog's height less its head, tabs, padding and that row; 0.716 is a card's width for its height). */ position: relative; width: 100%; max-width: min(360px, calc((min(720px, 88vh) - 340px) * 0.716)); aspect-ratio: var(--card-ratio); transform-style: preserve-3d; will-change: transform; /* Every drag on it turns it, never scrolls the dialog under it. */ touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 4.6% / 3.3%; } .card-dlg-art.is-turning { cursor: grabbing; } .card-dlg-art:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } @media (min-width: 1100px) and (min-height: 760px) { .card-dlg-art { max-width: min(430px, calc((min(880px, 90vh) - 340px) * 0.716)); } } .ct-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--pocket); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .75), 0 14px 26px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); } .ct-back { transform: rotateY(180deg); } :root[data-theme="light"] .ct-face { box-shadow: 0 26px 44px -20px rgba(20, 24, 32, .45), 0 0 0 1px rgba(20, 24, 32, .1); } .card-dlg-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } /* A card the collection is missing never shimmers (design.css rule, said again for this shape). */ .ct-front.is-missing::after, .ct-front.is-missing::before { content: none; } /* Under it: turn it over, put it back face on, and how to turn it by hand. */ .ct-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin-top: -4px; } .ct-btn { min-height: 30px; } .ct-hint { flex-basis: 100%; text-align: center; font-size: 11.5px; color: var(--ink-3); } /* What this copy is, under the card: a row of pills, each in its own colour (--tone). */ .card-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; } .card-status:empty { display: none; } .card-pill { --tone: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 11px 0 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, var(--bg-3)); border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); } .card-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .card-pill.is-owned { --tone: #4ade80; } .card-pill.is-missing { --tone: #fbbf24; } .card-pill.is-grade { --tone: #c084fc; } .card-pill.is-locked { --tone: #818cf8; } .card-pill.is-cover { --tone: #facc15; } .card-pill.is-trade { --tone: #fb923c; } .card-pill.is-first { color: #1a1206; border-color: transparent; background: linear-gradient(180deg, #ffe08a, #e9b949); } .card-pill.is-first::before { display: none; } :root[data-theme="light"] .card-pill { color: color-mix(in srgb, var(--tone) 62%, #000); } :root[data-theme="light"] .card-pill.is-first { color: #1a1206; } .card-dlg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .card-flags { display: flex; flex-wrap: wrap; gap: 6px; } .card-dlg-flag { align-self: flex-start; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); color: var(--ink-2); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--glass-edge); } .card-dlg-flag.is-sell { color: #1a1408; border-color: transparent; background: linear-gradient(160deg, #f6dfa4, #d8b160); } .card-dlg-flag.is-locked { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--bg-3)); } /* The hero: what the card counts at, large and gold, its month drawn under it edge to edge, and the gauge of its listings at the foot. */ .card-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 15px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); box-shadow: var(--glass-edge), 0 16px 34px -22px color-mix(in srgb, var(--gold) 70%, transparent); } .card-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; } .card-worth-label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .card-worth-value { font-size: clamp(32px, 3.4vw, 42px); font-weight: 760; letter-spacing: -0.035em; line-height: 1.05; color: var(--gold-text); font-variant-numeric: tabular-nums; } .card-worth-value.is-est { font-size: clamp(28px, 3vw, 36px); opacity: .92; } .card-worth-basis { font-size: var(--fs-sm); color: var(--ink-2); } .card-trend-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .card-trend-chip.is-up { color: #22c55e; background: color-mix(in srgb, #22c55e 15%, transparent); } .card-trend-chip.is-down { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); } .card-trend { height: 58px; margin: 8px -18px -4px; } .card-trend svg { display: block; width: 100%; height: 100%; } .card-trend.is-up { color: #22c55e; } .card-trend.is-down { color: var(--danger); } .card-trend[hidden], .card-trend-chip[hidden] { display: none; } /* Where a price sits among its listings: low to high, the market a bead on it, the mid a tick. */ .card-range { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .card-range.is-compact { margin-top: 2px; } .card-range-track { position: relative; height: 8px; border-radius: var(--radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--gold) 85%, transparent)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); } .card-range-mid { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 55%, transparent); } .card-range-mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 2px 10px rgba(0, 0, 0, .5); } .card-range.is-compact .card-range-track { height: 6px; } .card-range.is-compact .card-range-mark { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2.5px var(--gold), 0 1px 6px rgba(0, 0, 0, .45); } .card-range-ends { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .card-range-ends i { margin-right: 5px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } /* the card's own facts, as tiles */ .card-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; } .card-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 11px; border-radius: 13px; background: color-mix(in srgb, var(--bg-3) 78%, transparent); border: 1px solid var(--line); box-shadow: var(--glass-edge); } .card-fact.is-pick { grid-column: span 2; } .card-facts dt { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .card-fact-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); } .card-fact-ico svg { width: 13px; height: 13px; display: block; } .card-facts dd { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; } .card-facts .card-printing { width: 100%; max-width: none; padding: 5px 8px; font-size: 13px; } /* Actions as tiles: an icon in its own colour (--tone, the colour the card's button in the binder wears), its name under it. On: washed in the colour. */ .card-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; } .card-act, .card-acts > .btn { --tone: var(--accent); --tone-text: var(--tone); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: auto; min-height: 78px; padding: 11px 6px 10px; border-radius: 13px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; white-space: normal; color: var(--ink); background: color-mix(in srgb, var(--bg-3) 82%, transparent); border: 1px solid var(--line); box-shadow: var(--glass-edge); transition: transform var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out); } .card-act-ico, .card-acts > .btn .ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--tone-text); background: color-mix(in srgb, var(--tone) 16%, transparent); transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); } .card-act-ico svg, .card-acts > .btn .ico svg { width: 19px; height: 19px; display: block; } @media (hover: hover) { .card-act:hover, .card-acts > .btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 50%, var(--line)); background: color-mix(in srgb, var(--tone) 9%, var(--bg-3)); } } .card-act:active, .card-acts > .btn:active { transform: translateY(0); } .card-act:focus-visible, .card-acts > .btn:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; } .card-act.is-on, .card-acts > .btn.is-on { border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); background: color-mix(in srgb, var(--tone) 13%, var(--bg-3)); } .card-act.is-on .card-act-ico, .card-acts > .btn.is-on .ico { color: #0b0d12; background: var(--tone); } .card-act[data-key="owned"] { --tone: #4ade80; } .card-act[data-key="missing"] { --tone: #fbbf24; } .card-act[data-key="lock"], .card-act[data-key="unlock"] { --tone: #818cf8; } .card-act[data-key="cover"] { --tone: #facc15; } .card-act[data-key="replace"] { --tone: #22d3ee; } .card-act[data-key="sold"] { --tone: #f472b6; } .card-act[data-key="grading"] { --tone: #c084fc; } .card-act[data-key="photos"] { --tone: #60a5fa; } .card-act.is-danger { --tone: #f87171; } .card-acts > .card-watchlist { --tone: var(--accent); } .card-acts > .card-want { --tone: #f472b6; } .card-acts > .card-sell { --tone: var(--gold); } @media (hover: hover) { .card-act.is-danger:hover { background: color-mix(in srgb, var(--danger) 16%, var(--bg-3)); } } :root[data-theme="light"] .card-act, :root[data-theme="light"] .card-acts > .btn { --tone-text: color-mix(in srgb, var(--tone) 60%, #000); } .card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 2px; } /* What comes under the actions — your price, condition & grading, price alerts — reads as panels of the same kind, each headed as the sections are. */ .card-dlg-side > .card-own, .card-dlg-side > .card-grading, .card-dlg-side > .al-watch { margin-top: 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--line); box-shadow: var(--glass-edge); } .card-dlg-side > .card-grading .card-grading-head h4, .card-dlg-side > .al-watch .al-watch-head h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 720; letter-spacing: -0.01em; text-transform: none; color: var(--ink); } .card-dlg-side > .card-grading .card-grading-head h4::before, .card-dlg-side > .al-watch .al-watch-head h3::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); } /* ---------------------------------------------------------------- sections */ .card-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .card-sec-head { display: flex; flex-direction: column; gap: 2px; } .card-sec-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 720; letter-spacing: -0.01em; color: var(--ink); } .card-sec-head h3::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); } .card-sec-head p { margin: 0 0 0 12px; font-size: var(--fs-sm); color: var(--ink-3); max-width: 70ch; } .card-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); max-width: 76ch; } .card-empty { margin: 0; padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); background: color-mix(in srgb, var(--bg-3) 80%, transparent); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--glass-edge); } .card-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .card-out { font-size: var(--fs-sm); color: var(--accent-text); align-self: flex-start; } /* ----------------------------------------------------------- price tables */ /* One card per printing, side by side while they fit: its market large, its gauge, then every figure. */ .card-prints { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; } .card-print { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 13px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 80%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)); border: 1px solid var(--line); box-shadow: var(--glass-edge); } /* the printing the app's own values read */ .card-print.is-counted { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 80%, transparent); box-shadow: var(--glass-edge), 0 14px 30px -22px color-mix(in srgb, var(--gold) 70%, transparent); } .card-print-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-print-name { font-size: 14px; font-weight: 700; color: var(--ink); } .card-print-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); color: var(--gold-text); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); } .card-print-pick { margin-left: auto; } .card-print-hero { display: flex; align-items: baseline; gap: 6px; } .card-print-hero b { font-size: 26px; font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; color: var(--gold-text); font-variant-numeric: tabular-nums; } .card-print-hero span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .card-prices { display: flex; flex-direction: column; } .price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; } .price-row + .price-row { border-top: 1px solid var(--line-soft); } .price-row span { color: var(--ink-3); min-width: 0; } .price-row b { font-variant-numeric: tabular-nums; flex: none; } .price-note { font-style: normal; color: var(--ink-3); opacity: .8; } /* The figure every value in the app is counted at is the one picked out. */ .price-row.is-basis span { color: var(--ink-2); font-weight: 600; } .price-row.is-basis b { color: var(--gold-text); font-size: 15px; font-weight: 700; } .price-row.is-est b { padding: 1px 7px; border-radius: 5px; font-size: 14px; font-weight: 700; border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); } .card-dlg-est { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); } /* -------------------------------------------------------------- history */ .card-hist { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line); box-shadow: var(--glass-edge); } .hist-view { display: flex; flex-direction: column; gap: 8px; } .hist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .hist-change { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink-2); } .hist-change.is-up { color: #22c55e; } .hist-change.is-down { color: var(--danger); } .hist-change i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); } .hist-ranges .seg-opt { height: 26px; min-height: 26px; padding: 0 11px; font-size: 12px; } .hist-plot { position: relative; cursor: crosshair; touch-action: pan-y; border-radius: 6px; } .hist-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* the readout: a line at the day under the pointer, a dot on each series, and the figures */ .hist-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); opacity: .55; pointer-events: none; } .hist-pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); border: 2px solid var(--bg); pointer-events: none; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } .hist-pin.is-basis { background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent); } .hist-tip { position: absolute; top: 2px; z-index: 2; transform: translateX(calc(-50% + 0px)); display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; background: color-mix(in srgb, var(--bg-3) 92%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-1, 0 6px 18px rgba(0,0,0,.35)); } .hist-tip.is-left { transform: translateX(8px); } .hist-tip.is-right { transform: translateX(calc(-100% - 8px)); } .hist-tip b { font-size: 11px; font-weight: 650; color: var(--ink-3); } .hist-tip-row.is-market { color: var(--accent-text); font-weight: 650; } .hist-tip-row.is-basis { color: var(--gold-text); font-weight: 650; } .hist-cross[hidden], .hist-pin[hidden], .hist-tip[hidden] { display: none; } .hist-chart { display: block; width: 100%; height: auto; overflow: visible; } .hist-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; } .hist-area { stroke: none; fill: color-mix(in srgb, var(--accent) 18%, transparent); } .hist-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .hist-line.is-market { stroke: var(--accent); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent)); } .hist-line.is-basis { stroke: var(--gold); stroke-dasharray: 4 3; } .hist-dot.is-market { fill: var(--accent); } .hist-dot.is-basis { fill: var(--gold); } /* The high and low of the range, sitting on their guides (placed as a percentage of the chart's height, so they stay put however wide the dialog is). */ .hist-mark { position: absolute; right: 2px; transform: translateY(-50%); font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; background: var(--bg); padding: 0 4px; border-radius: 4px; } .hist-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .hist-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--ink-2); } .hist-key { display: inline-flex; align-items: center; gap: 6px; } .hist-key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--accent); } .hist-key.is-basis::before { background: var(--gold); } /* the 7- and 30-day changes, as tiles with an arrow */ .card-changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .card-change { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px 11px; border-radius: 13px; background: color-mix(in srgb, var(--bg-3) 80%, transparent); border: 1px solid var(--line); box-shadow: var(--glass-edge); } .card-change span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .card-change b { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; } .card-change i { font-style: normal; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .card-change.is-up { border-color: color-mix(in srgb, #22c55e 30%, var(--line)); } .card-change.is-up b { color: #22c55e; } .card-change.is-up b::before { content: "▲ "; font-size: .62em; vertical-align: .18em; } .card-change.is-down { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); } .card-change.is-down b { color: var(--danger); } .card-change.is-down b::before { content: "▼ "; font-size: .62em; vertical-align: .18em; } /* -------------------------------------------------------------- details */ .card-details { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 0 18px; font-size: var(--fs-sm); line-height: 1.5; background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--glass-edge); } .card-details dt, .card-details dd { padding: 7px 0; border-top: 1px solid var(--line-soft); } .card-details dt:first-of-type, .card-details dt:first-of-type + dd { border-top: 0; } .card-details dt { color: var(--ink-3); font-weight: 650; } .card-details dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } .card-details.is-meta { font-size: 12px; } .card-details.is-meta dd { color: var(--ink-2); font-variant-numeric: tabular-nums; } /* A narrow screen: the card on top, smaller, then everything else in one column. */ @media (max-width: 620px) { .card-head { padding: 16px 52px 12px 16px; } .card-over { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 18px; } .card-stage { position: relative; } .card-dlg-art { width: min(210px, 58vw); } .card-tabs { margin: 0 12px 4px; max-width: calc(100% - 24px); } .card-tab { padding: 0 11px; font-size: 12.5px; gap: 6px; } .card-acts { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .card-act, .card-acts > .btn { min-height: 72px; font-size: 11.5px; } } @media (max-width: 380px) { .card-tab-ico { display: none; } .card-fact.is-pick { grid-column: auto; } } :root[data-motion="reduced"] .card-act, :root[data-motion="off"] .card-act, :root[data-motion="reduced"] .card-acts > .btn, :root[data-motion="off"] .card-acts > .btn { transition: none; } /* ------------------------------------------ the shared card preview (peek.js) The big hover preview leads with the figure the app counts the card at, so that figure is marked there the same way it is in this dialog. Its own sheet (binder.css) belongs to another engineer this round; this is the one rule the price basis adds to it. */ .peek-prices .is-basis b { font-weight: 700; } .peek-prices .is-basis span { color: var(--ink-2); font-weight: 600; } /* =================================================================== help */ .modal.modal-help { width: min(700px, 100%); } .help-body { gap: var(--sp-5); } .help-group { display: flex; flex-direction: column; gap: var(--sp-2); } .help-group h3 { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); } .help-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--glass-edge); overflow: hidden; } .help-list li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 6px 16px; align-items: baseline; padding: 8px 13px; font-size: 13px; } .help-list li + li { border-top: 1px solid var(--line-soft); } .help-k { min-width: 0; font-weight: 600; } .help-v { color: var(--ink-2); min-width: 0; } /* app.css sets the description to the right, from when a row was one line; beside a long one it reads better from the left. */ .modal .help-list .help-v { text-align: left; } .kbd { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--ink); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; box-shadow: var(--glass-edge); } @media (max-width: 560px) { .help-list li { grid-template-columns: minmax(0, 1fr); } } /* ======================================================== binder settings */ .modal.modal-settings { width: min(1200px, 100%); height: min(780px, 90vh); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .settings { display: flex; flex-direction: column; flex: 1; min-height: 0; } .set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 56px 13px 20px; border-bottom: 1px solid var(--line); flex: none; box-shadow: var(--glass-edge); } .set-head h2 { font-size: 21px; font-weight: 760; letter-spacing: -0.026em; } .set-titles { min-width: 0; } /* The binder's name is one line, ellipsized; Preferences has a sentence there. */ .set-titles p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-prefs .set-titles p { white-space: normal; } .set-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; } .set-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); } .set-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); overflow-y: auto; background: color-mix(in srgb, var(--bg) 60%, transparent); } .set-tab { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 10px 0 7px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink-2); font-size: 13.5px; font-weight: 550; text-align: left; cursor: pointer; transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out); } @media (hover: hover) { .set-tab:hover { background: var(--bg-3); color: var(--ink); } } .set-tab[aria-selected="true"] { color: var(--ink); font-weight: 650; background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent); } /* each section's icon on a small tile of its own; the chosen one lit */ .set-tab .set-ico { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); } .set-tab[aria-selected="true"] .set-ico { color: var(--accent-ink); background: var(--accent-fill); box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent) 70%, transparent); } .set-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .set-panels { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; } /* The preview's own panel, between the sections and their settings (settings.js placePreview): only where the dialog has room for three columns. Narrower, the preview heads the sections it helps with instead. */ .set-stage { display: none; } @media (min-width: 1000px) { .set-layout { grid-template-columns: 196px minmax(300px, 360px) minmax(0, 1fr); } .set-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 22px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 35%, transparent); } .set-stage .set-preview-box { padding: 0; border: none; } /* the desk has the panel to itself: a bigger binder on it, with room to stand */ .set-stage .set-desk { padding: 28px 18px 30px; } .set-stage .set-preview-binder > .bpage.set-preview-page { --pocket-w: 62px; --pocket-h: 87px; --gap: 7px; } .set-stage .set-preview-note { margin-top: 10px; } } .set-panel { display: flex; flex-direction: column; gap: 20px; } .set-sec-head h3 { margin: 0; font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.01em; } .set-sec-head p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-3); max-width: 62ch; } .sf-row { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .sf-row.is-off > :not(.set-label) { opacity: .5; } .set-label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .set-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .set-stack { display: grid; gap: 8px; max-width: 360px; } .set-stack > [hidden] { display: none; } .set-num { width: 96px; } .set-sub { display: flex; flex-direction: column; gap: var(--sp-4); padding-left: var(--sp-4); border-left: 2px solid var(--line-soft); } .set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .set-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .set-note { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); padding: 10px 13px; border-radius: var(--radius); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--glass-edge); } .set-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; } .set-lock-note { color: var(--gold-text); } /* --------------------------------------------------------------- switches */ .sf-row-switch { gap: 4px; } .set-switch-label { position: relative; display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; cursor: pointer; } .set-switch-label .set-label { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); } .set-switch { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; width: 34px; height: 20px; margin: 0; pointer-events: none; } .set-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--glass-edge); transition: background var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out); } .set-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform var(--t-2) var(--ease-spring), background var(--t-2) var(--ease-out); } .set-switch:checked + .set-switch-track { background: var(--accent-fill); border-color: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent); } .set-switch:checked + .set-switch-track::after { transform: translateX(14px); background: var(--accent-ink); } .set-switch:focus-visible + .set-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .sf-row-switch .form-help { padding-left: 45px; max-width: 68ch; } /* ------------------------------------------------------ segmented control */ .seg-choice { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 3px; padding: 4px; background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid var(--line); border-radius: 12px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); } :root[data-theme="light"] .seg-choice { box-shadow: inset 0 1px 2px rgba(20, 24, 32, .08); } .seg-opt { /* relative: the hidden radio inside is placed against the option, not the dialog — else focusing it scrolled the whole dialog to where it hung. */ position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 9px; /* Some are