/* Banknotes — refined modern SaaS design system. CSS variables drive light + dark themes; data-theme on switches. */ :root { --bg: #f7f9fc; --surface: #ffffff; --surface-alt: #f1f5fb; --line: #e2e8f0; --line-strong: #cbd5e1; --primary: #2f7df0; --primary-soft:#e6f0ff; --primary-hov: #2569d8; --ink: #0d1b2a; --ink-soft: #334155; --muted: #6c809a; --inverse: #ffffff; --success: #10a37f; --success-soft:#d4f1e6; --warn: #c97a00; --warn-soft: #fde9c8; --danger: #d83a3a; --danger-soft: #fbe1e1; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .06); --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12); --shadow-focus: 0 0 0 3px rgba(47, 125, 240, .25); --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --max-width: 1400px; color-scheme: light; } html[data-theme="dark"] { --bg: #0e1622; --surface: #18222e; --surface-alt: #1e2a39; --line: #2a3848; --line-strong: #3b4a5d; --primary: #6da7ff; --primary-soft:#1d2f4d; --primary-hov: #84b6ff; --ink: #e8eef7; --ink-soft: #c2cdda; --muted: #8a9bb1; --inverse: #0e1622; --success: #34d39e; --success-soft:#15392b; --warn: #f0b154; --warn-soft: #3a2c11; --danger: #f15a5a; --danger-soft: #3b1414; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); --shadow-focus: 0 0 0 3px rgba(109, 167, 255, .35); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* Lock the page to the viewport — prevents accidental horizontal scroll from any descendant that's slightly wider than the viewport (long tokens in , fixed-width SVGs, oversized inline grids, etc.). */ max-width: 100%; overflow-x: hidden; } /* Defensive wrapping for atomic-token elements that often cause overflow. */ code { word-break: break-word; overflow-wrap: anywhere; } pre { white-space: pre-wrap; word-break: break-word; } img, svg, table { max-width: 100%; } .shell, .topbar { max-width: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hov); text-decoration: underline; } code, pre, .mono { font-family: var(--font-mono); font-size: 12.5px; } /* ---- Typography scale ---- */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0 0 .4em; } h1 { font-size: 28px; font-weight: 700; } h2 { font-size: 18px; font-weight: 600; } h3 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } h4 { font-size: 13px; font-weight: 600; } .muted { color: var(--muted); } .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; } /* ---- Layout ---- */ .shell { max-width: var(--max-width); margin: 0 auto; padding: 22px; } .topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: var(--max-width); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 18px; } .brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); } .brand .dot { color: var(--primary); } .topnav { display: flex; gap: 4px; flex: 1; } .topnav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; color: var(--ink-soft); border-radius: var(--radius-sm); font-weight: 500; } .topnav a:hover { background: var(--surface-alt); text-decoration: none; } .topnav a.active { background: var(--primary-soft); color: var(--primary); } .toptools { display: flex; gap: 8px; align-items: center; } /* Admin sign-in / signed-in state pill — sits in .toptools. The .topbar-link is button-styled but visually subtle so it doesn't compete with the main nav. */ .toptools .topbar-link, .toptools form .topbar-link { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg); background: var(--surface); text-decoration: none; cursor: pointer; line-height: 1.4; } .toptools .topbar-link:hover { background: var(--surface-alt); border-color: var(--primary); color: var(--primary); text-decoration: none; } .toptools .admin-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; color: var(--green, #1aa86c); border: 1px solid var(--green, #1aa86c); background: var(--green-soft, #e0f6eb); } /* ---- Buttons ---- */ .btn, button:not(.unstyled) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms, transform 80ms; text-decoration: none; } .btn:hover, button:not(.unstyled):hover { background: var(--surface-alt); border-color: var(--line-strong); text-decoration: none; } .btn:active, button:not(.unstyled):active { transform: translateY(1px); } .btn-primary, button.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-primary:hover, button.btn-primary:hover { background: var(--primary-hov); border-color: var(--primary-hov); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-alt); } .btn-danger { border-color: var(--danger); color: var(--danger); background: var(--surface); } .btn-danger:hover { background: var(--danger-soft); } .btn-success { background: var(--success); color: #fff; border-color: var(--success); } .btn-success:hover { filter: brightness(1.05); color: #fff; } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-lg { padding: 12px 22px; font-size: 14px; } .btn-icon { padding: 6px 8px; } button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ---- Inputs ---- */ .input, .select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], textarea, select { width: 100%; padding: 8px 11px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color 120ms, box-shadow 120ms; } input::placeholder, textarea::placeholder { color: var(--muted); } input:hover, textarea:hover, select:hover { border-color: var(--ink-soft); } input:focus, textarea:focus, select:focus { border-color: var(--primary); } textarea { line-height: 1.5; min-height: 80px; resize: vertical; } label.field { display: flex; flex-direction: column; gap: 4px; } label.field > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } /* ---- Cards ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-pad { padding: 18px; } .card h2 { margin-bottom: 12px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .stack { display: flex; flex-direction: column; gap: 12px; } /* ---- Stats ---- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } .stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 6px; } .stat .value { font-size: 26px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stat .sub { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ---- Pills / chips ---- */ .chip, .pill, .status, .flag, .crop-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--line); background: var(--surface-alt); color: var(--ink-soft); white-space: nowrap; } .chip-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; } .chip-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .chip-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .chip-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } /* Status colours */ .status-imported { background: var(--surface-alt); color: var(--muted); } .status-ai-extracted { background: var(--primary-soft); color: var(--primary); border-color: transparent; } .status-needs-review { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .status-approved { background: var(--success-soft); color: var(--success); border-color: transparent; } .status-retake-needed { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .status-duplicate { background: var(--surface-alt); color: var(--muted); } .status-archived { background: var(--surface-alt); color: var(--muted); } .flag { background: var(--warn-soft); color: var(--warn); border-color: transparent; text-transform: lowercase; } .crop-ok { background: var(--success-soft); color: var(--success); border-color: transparent; } .crop-uncertain{ background: var(--warn-soft); color: var(--warn); border-color: transparent; } .crop-failed { background: var(--danger-soft); color: var(--danger); border-color: transparent; } /* ---- Confidence dot (per-field AI confidence indicator) ---- */ .conf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); vertical-align: middle; } .conf-high { background: var(--success); } .conf-mid { background: var(--warn); } .conf-low { background: var(--danger); } /* ---- Tables ---- */ table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } table.data th, table.data td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 13px; } table.data th { background: var(--surface-alt); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } table.data tr:last-child td { border-bottom: none; } table.data tr:hover td { background: var(--surface-alt); } table.data .row-thumb { max-width: 90px; max-height: 60px; border-radius: var(--radius-sm); background: #000; } /* ---- Filters / facets ---- */ nav.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; } nav.filters a { padding: 5px 12px; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; text-decoration: none; font-weight: 500; } nav.filters a:hover { background: var(--surface-alt); text-decoration: none; } nav.filters a.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---- Collection page (cards) ---- */ .collection-shell { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; } .facet-rail { position: sticky; top: 80px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 100px); overflow: auto; } .facet-group { margin-bottom: 14px; } .facet-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; } .facet-list { display: flex; flex-wrap: wrap; gap: 4px; } .facet-chip { display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; cursor: pointer; background: var(--surface-alt); border: 1px solid var(--line); color: var(--ink-soft); transition: background 120ms, color 120ms, border-color 120ms; } .facet-chip:hover { background: var(--primary-soft); color: var(--primary); } .facet-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } .facet-chip .count { color: var(--muted); font-size: 11px; } .facet-chip.is-active .count { color: rgba(255,255,255,.8); } .collection-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } .collection-toolbar .search-input { flex: 1; } .view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; } .view-toggle button { border: none; border-radius: 0; padding: 6px 10px; background: var(--surface); color: var(--muted); } .view-toggle button.active { background: var(--primary); color: #fff; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .note-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 120ms, box-shadow 120ms, border-color 120ms; position: relative; display: flex; flex-direction: column; } .note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); } .note-card .imgwrap { background: #0a0a0a; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; position: relative; } .note-card .imgwrap img { width: 100%; height: 100%; object-fit: contain; } .note-card .imgwrap .empty { color: rgba(255,255,255,.45); font-family: var(--font-mono); font-size: 11px; } /* Serial-number badge — frosted glass overlay pinned to the bottom-right of each card image. Sits above the cover-anchor `` so the tooltip works, but doesn't intercept clicks (pointer-events:none on the wrapper; only the duplicate chip is interactive on hover). */ .note-card .serial-badge { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1; letter-spacing: .02em; color: rgba(255,255,255,.94); background: rgba(10, 14, 22, .58); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 0 0.5px rgba(255,255,255,.05) inset; pointer-events: auto; max-width: calc(100% - 16px); overflow: hidden; } .note-card .serial-badge-label { font-size: 9px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.55); padding-right: 6px; margin-right: 0; border-right: 1px solid rgba(255,255,255,.18); } .note-card .serial-badge-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; font-variant-numeric: tabular-nums; } .note-card .serial-badge-dup { display: inline-flex; align-items: center; padding: 2px 6px; margin-left: 2px; font-size: 9.5px; font-weight: 700; border-radius: 999px; background: rgba(255, 168, 38, .92); color: #1a1206; letter-spacing: .04em; } .note-card .serial-badge.is-dup { border-color: rgba(255, 168, 38, .55); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255, 168, 38, .35), 0 0 12px rgba(255, 168, 38, .25); } @media (max-width: 720px) { .note-card .serial-badge { right: 6px; bottom: 6px; padding: 4px 7px; font-size: 10px; } .note-card .serial-badge-value { max-width: 110px; } } .note-card .meta { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .note-card .denom { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); } .note-card .country { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .note-card .footer { padding: 8px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; align-items: center; } .note-card .footer .pick { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .note-card .footer-2line { flex-direction: column; align-items: stretch; gap: 4px; } .note-card .footer-2line .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; } /* ---- Value range + profit/loss chip ---- */ .value-range { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .pl { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid transparent; } .pl-up { background: var(--success-soft); color: var(--success); } .pl-down { background: var(--danger-soft); color: var(--danger); } .pl-flat { background: var(--surface-alt); color: var(--muted); } .cost-value-box { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-alt); font-size: 13px; } .cost-value-box .cv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .cost-value-box .cv-value { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .cost-value-box .cv-arrow { color: var(--muted); font-weight: 600; } /* ---- Story article (editorial typography) ---- */ .story-article { max-width: 65ch; font-size: 16px; line-height: 1.75; color: var(--ink); } .story-article h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .35em; } .story-article h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; text-transform: none; color: var(--ink); margin: 1.8em 0 .4em; padding-bottom: .25em; border-bottom: 1px solid var(--line); } .story-article h3 { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-soft); margin: 1.4em 0 .3em; } .story-article p { margin: 0 0 1em; } .story-article p:first-of-type::first-letter { font-size: 2.2em; line-height: 1; font-weight: 700; float: left; padding-right: 8px; padding-top: 4px; color: var(--primary); } .story-article ul, .story-article ol { padding-left: 1.4em; margin: 0 0 1em; } .story-article li { margin: 0 0 .35em; } .story-article blockquote { border-left: 3px solid var(--primary); background: var(--surface-alt); padding: 10px 16px; margin: 1em 0; color: var(--ink-soft); font-style: italic; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .story-article code { background: var(--surface-alt); padding: 1px 5px; border-radius: 4px; font-size: .92em; } .story-article a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .story-article hr { border: none; height: 1px; background: var(--line); margin: 2em 0; } /* ---- "Needs review" concerns card -------------------------------------- Sits at the top of the review page when the AI flagged something. Tells the collector exactly what's uncertain and what to do about it. */ .concerns-card { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .concerns-card.concerns-high { border-color: var(--danger); background: var(--danger-soft); } .concerns-card.concerns-low { border-color: var(--line-strong); background: var(--surface-alt); } .concerns-card .concerns-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #fff; font-weight: 700; font-size: 13px; line-height: 1; } .concerns-card.concerns-high .concerns-icon { background: var(--danger); } .concerns-card.concerns-low .concerns-icon { background: var(--muted); } /* Quick-actions menu (uses native
so no JS) */ .concerns-actions { user-select: none; } .concerns-actions > summary { list-style: none; cursor: pointer; } .concerns-actions > summary::-webkit-details-marker { display: none; } .concerns-actions[open] .concerns-actions-menu { position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 5; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; } .concerns-actions-menu { display: none; } .concerns-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .concerns-list .concern { display: grid; grid-template-columns: 14px 1fr; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .concern .concern-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--warn); } .concern.concern-high .concern-dot { background: var(--danger); } .concern.concern-med .concern-dot { background: var(--warn); } .concern.concern-low .concern-dot { background: var(--muted); } .concern .concern-msg { font-weight: 600; color: var(--ink); font-size: 13px; } .concern .concern-items { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin: 4px 0 4px 0; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; } .concern .concern-items li { list-style: disc; } .concern .concern-hint { font-size: 12px; color: var(--muted); margin-top: 2px; } .concern .concern-actions { font-size: 12px; } /* ---- Re-crop modal ---- */ .recrop-modal { position: fixed; inset: 0; z-index: 100; background: rgba(13, 27, 42, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 30px 18px; overflow: auto; } .recrop-modal[hidden] { display: none; } .recrop-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; max-width: 1500px; width: 100%; } .recrop-stage { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .recrop-side { display: flex; flex-direction: column; gap: 6px; } .recrop-side-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); } .recrop-canvas { position: relative; background: #000; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .recrop-canvas img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; } .recrop-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .recrop-quad { fill: rgba(47, 125, 240, 0.18); stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 5 4; } .recrop-handle { fill: var(--primary); stroke: #fff; stroke-width: 2; cursor: grab; } .recrop-handle:active { cursor: grabbing; } /* ---- Sparklines ---- */ .spark { width: 90px; height: 30px; flex-shrink: 0; align-self: flex-end; opacity: .9; } /* ---- Issue-year timeline (dashboard) ---- */ .timeline { display: flex; align-items: flex-end; gap: 4px; height: 130px; overflow-x: auto; padding: 4px 2px 0; } .tl-bucket { flex: 1 0 36px; min-width: 36px; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--muted); position: relative; height: 100%; justify-content: flex-end; } .tl-bucket .tl-bar { width: 100%; background: var(--surface-alt); border-radius: 4px 4px 0 0; transition: background 120ms; min-height: 4px; } .tl-bucket.tl-active .tl-bar { background: var(--primary); } .tl-bucket:hover .tl-bar { background: var(--primary-hov); } .tl-bucket .tl-label { font-size: 10px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; } .tl-bucket .tl-count { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .tl-bucket:not(.tl-active) { cursor: default; pointer-events: none; } .tl-bucket:not(.tl-active) .tl-label { opacity: 0.55; } /* Country flag emoji — uses the OS's native flag glyph (Apple Color Emoji on macOS/iOS, Segoe UI Emoji on Windows, Noto Color Emoji on Linux). */ .cflag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif; font-size: 1.1em; line-height: 1; vertical-align: -1px; letter-spacing: 0; margin-right: 2px; } /* Card colour-tint accent: a 4px top strip whose colour comes from the first hex in BanknoteType.color_palette. Subtle in light mode, higher contrast in dark mode. */ .note-card .palette-strip { height: 4px; width: 100%; background: var(--card-tint, transparent); flex-shrink: 0; } .note-card[data-tinted="true"] { border-color: color-mix(in oklab, var(--card-tint, var(--line)) 35%, var(--line)); } /* Story index card hover */ .story-row { display: block; transition: border-color 120ms, box-shadow 120ms; } .story-row:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow); } .note-card a.full { position: absolute; inset: 0; z-index: 1; } .note-card .checkbox-wrap { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(0,0,0,.55); border-radius: 4px; padding: 2px 4px; } .bulk-bar { position: sticky; bottom: 18px; z-index: 20; background: var(--ink); color: var(--inverse); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-lg); display: none; align-items: center; gap: 12px; margin-top: 14px; } .bulk-bar.is-visible { display: flex; } .bulk-bar button { background: transparent; color: var(--inverse); border-color: rgba(255,255,255,.2); } .bulk-bar button:hover { background: rgba(255,255,255,.08); } /* ---- Review page ---- */ .review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .review-head .nav a { margin-left: 8px; font-size: 13px; } .review-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .review-images figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .review-images figcaption { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; } .review-images .imgwrap { background: #0a0a0a; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; position: relative; cursor: zoom-in; overflow: hidden; } .review-images .imgwrap img { width: 100%; height: 100%; object-fit: contain; } .loupe { position: absolute; pointer-events: none; display: none; width: 220px; height: 220px; border: 2px solid var(--primary); border-radius: 50%; box-shadow: 0 4px 18px rgba(0,0,0,.4); background-repeat: no-repeat; z-index: 5; } .loupe.show { display: block; } .review-tabs { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .review-tabs button { background: transparent; border: none; border-radius: 0; padding: 10px 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; } .review-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); } .review-tab-panel { display: none; } .review-tab-panel.active { display: block; } .fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .fields-block { margin-top: 16px; } /* ---- Identity tab: collapsible sub-section groups -------------- */ .ident-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow-sm); } .ident-group > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink); } .ident-group > summary::-webkit-details-marker { display: none; } .ident-group > summary::marker { content: ''; } .ident-group > summary::before { content: "▸"; color: var(--muted); font-size: 11px; margin-right: 6px; transition: transform 120ms; display: inline-block; } .ident-group[open] > summary::before { transform: rotate(90deg); } .ident-group > .fields-grid, .ident-group > .fields-block { padding: 0 14px 14px; } .ident-group .ident-count { background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .ident-group:hover { border-color: var(--line-strong); } .history-list { display: flex; flex-direction: column; gap: 10px; } .history-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); font-size: 12.5px; } .history-row .meta { color: var(--muted); font-size: 11px; } .history-row .diff { font-family: var(--font-mono); font-size: 12px; margin-top: 4px; white-space: pre-wrap; } .sticky-footer { position: sticky; bottom: 0; z-index: 20; background: color-mix(in oklab, var(--surface) 95%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line); margin: 24px -22px -22px; padding: 12px 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ---- Theme toggle button ---- */ .theme-toggle { background: transparent; border: 1px solid var(--line); border-radius: 999px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); cursor: pointer; font-family: var(--font-mono); font-size: 14px; } .theme-toggle:hover { background: var(--surface-alt); } /* ---- Skeleton loaders ---- */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--surface-alt) 0%, var(--line) 50%, var(--surface-alt) 100%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-sm); } /* ---- World choropleth (dashboard) ---- */ .world-map-card { padding-bottom: 12px; } .world-map-wrap { width: 100%; margin: 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); } .world-svg { display: block; width: 100%; height: auto; /* viewBox is 1000 × ~390 — clamp height so it doesn't dominate the page. */ max-height: 460px; } .world-svg path { fill: var(--line); fill-opacity: 1; stroke: var(--surface); stroke-width: 0.4; transition: fill 120ms, fill-opacity 120ms, stroke 120ms; } .world-svg path.owned { fill: var(--primary); } .world-svg path:hover { stroke: var(--primary); stroke-width: 1; } .world-svg path.owned:hover { fill: var(--primary-hov); } /* ---- Hamburger nav drawer — only meaningful on mobile ---- The hamburger button is hidden on desktop; on mobile the nav collapses into a slide-down panel whose visibility is driven by the `.topbar-inner.is-open` class, which the JS toggles. */ .nav-toggle { display: none !important; } /* desktop hides toggle */ /* The mobile-only theme toggle (lives inside the drawer) is hidden on desktop; the existing .theme-toggle in .toptools handles it there. !important is used because `.theme-toggle` (single-class) sets display:inline-flex, and some Safari versions honour the earlier declaration over an equally-specific later one when the element also carries the .theme-toggle class. */ .theme-toggle-mobile, button.theme-toggle.theme-toggle-mobile { display: none !important; } /* ---- Mobile ---- */ @media (max-width: 720px) { .shell { padding: 14px; } .topbar-inner { padding: 10px 14px; gap: 8px; } /* Hamburger toggle visible; nav collapses to a slide-down panel hidden until .topbar-inner.is-open is set. Sized to the Apple HIG 44pt minimum touch target and given a margin so it doesn't crowd the dark-mode toggle on its left. */ .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: transparent; border: 1px solid var(--line); cursor: pointer; padding: 0; flex-shrink: 0; color: var(--ink); font-size: 22px; line-height: 1; margin-left: 6px; } .nav-toggle:hover, .nav-toggle:focus-visible { background: var(--surface-alt); } .nav-toggle:active { background: var(--primary-soft); } /* Hide the standalone topbar dark-mode toggle on mobile — its function moves into the burger drawer. Hide the (usually empty) toptools wrapper too so it doesn't reserve space. The hamburger is then pushed hard against the right edge with margin-left:auto. */ .toptools .theme-toggle { display: none; } .toptools { margin-left: auto; } .nav-toggle { margin-left: 4px; } /* Show the in-drawer theme toggle and style it like a nav row, positioned at the bottom of the drawer with a divider above. */ button.theme-toggle.theme-toggle-mobile.topnav-action, .theme-toggle-mobile.topnav-action { display: flex !important; width: auto; height: auto; /* override the desktop 40×40 button shape */ background: transparent; border: 0; padding: 14px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; align-items: center; justify-content: space-between; font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer; } .theme-toggle-mobile.topnav-action:hover { background: var(--surface-alt); } .theme-toggle-mobile .theme-glyph { font-family: var(--font-mono); font-size: 18px; color: var(--ink-soft); } /* Default mobile state: nav hidden. */ .topnav { display: none; } /* When the hamburger is open, the nav slides down beneath the topbar. */ .topbar-inner.is-open .topnav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow); padding: 6px; z-index: 25; animation: nav-slide-down 160ms ease; } .topbar-inner.is-open .topnav a { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 15px; } .topbar-inner.is-open .topnav a span.label { display: inline; } @keyframes nav-slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Make the topbar-inner the drawer's positioning context */ .topbar-inner { position: relative; } .collection-shell { grid-template-columns: 1fr; } .facet-rail { position: static; max-height: none; } .review-images { grid-template-columns: 1fr; } .stats { /* Force exactly 2 columns rather than relying on minmax which can overflow when the minimum is wider than half the viewport. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stat { padding: 12px; min-width: 0; } .stat .value { font-size: 22px; word-break: break-word; } /* Sparkline at the corner can push the stat wider than its column; lock it down. */ .stat .spark { max-width: 60px; } .sticky-footer { margin: 18px -14px 0; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); } /* Bigger tap targets on the decision buttons */ .sticky-footer .btn { padding: 12px 16px; font-size: 14px; } table.data .row-thumb { max-width: 60px; max-height: 40px; } .cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } h1 { font-size: 22px; } /* Hub two-up grids stack to single column. */ .split-2up { grid-template-columns: 1fr !important; } /* World map gets compact on phone. */ .world-svg { max-height: 240px; } /* Decade timeline: horizontal swipe with snap. */ .timeline { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .tl-bucket { scroll-snap-align: start; min-width: 44px; } /* Concerns card actions wrap on narrow widths */ .concerns-card .row { gap: 4px; } .concerns-actions-menu { right: auto; left: 0; } /* (Bottom-sheet + filters-trigger styles consolidated into the definitive Mobile-collection block at the bottom of this file.) */ } /* (.filters-trigger base styles consolidated into the definitive Mobile-collection block at the bottom of this file.) */ /* Even narrower (small phones) — single-column hero stats */ @media (max-width: 480px) { .stats { grid-template-columns: 1fr 1fr; } } /* Collection cards: footer contents wrap when chips overflow */ .note-card .footer-2line .footer-row { flex-wrap: wrap; } /* Types page: at narrow widths, convert the wide table to a card list */ @media (max-width: 720px) { table.data.types-table thead { display: none; } table.data.types-table, table.data.types-table tbody, table.data.types-table tr, table.data.types-table td { display: block; width: 100%; } table.data.types-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; padding: 8px 12px; background: var(--surface); } table.data.types-table td { padding: 4px 0; border: none; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } table.data.types-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; } table.data.types-table td:first-child::before { content: ""; } /* flag cell */ } /* Print — for the album PDF and "print this page" use cases */ @media print { .topbar, .sticky-footer, .bulk-bar, .review-tabs, .toptools { display: none !important; } body { background: white; color: black; } .card { box-shadow: none; border-color: #ccc; } } /* ---- Misc utility ---- */ .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--primary); animation: spin .9s linear infinite; display: inline-block; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } .kbd { display: inline-block; padding: 1px 6px; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-alt); color: var(--ink-soft); } .divider { height: 1px; background: var(--line); margin: 18px 0; } .empty-state { padding: 60px 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); } .warn-banner { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; } /* ---- Recent strip / acquisition cards ---- */ .recent-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .recent-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; } .recent-card:hover { text-decoration: none; box-shadow: var(--shadow); } .recent-card .imgwrap { background: #0a0a0a; aspect-ratio: 16 / 9; } .recent-card .imgwrap img { width: 100%; height: 100%; object-fit: contain; } .recent-card .meta { padding: 8px 10px; font-size: 12px; } .recent-card .meta .country { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .recent-card .meta .denom { font-weight: 600; font-size: 13px; } /* ---- Country bars (dashboard) ---- */ .country-bars { display: flex; flex-direction: column; gap: 6px; } .country-bar { display: grid; grid-template-columns: 100px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; } .country-bar .name { color: var(--ink-soft); } .country-bar .bar { background: var(--surface-alt); height: 8px; border-radius: 999px; overflow: hidden; position: relative; } .country-bar .bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; } .country-bar .count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---- Wishlist progress ---- */ .wishlist-list { display: flex; flex-direction: column; gap: 6px; } .wishlist-row { display: flex; gap: 8px; padding: 8px 10px; background: var(--surface-alt); border-radius: var(--radius-sm); font-size: 12.5px; } .wishlist-row .pick { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } /* ---- Image pinch zoom on touch (review) ---- */ .review-images .imgwrap { touch-action: pinch-zoom; } /* ---- Bulk re-verify report modal ---- */ .rep-root { position: fixed; inset: 0; z-index: 9000; } .rep-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 24, .55); backdrop-filter: blur(3px); } .rep-modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 64px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; } .rep-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); } .rep-head h2 { margin: 0; font-size: 17px; } .rep-head .rep-close { background: transparent; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--muted); padding: 0 6px; } .rep-head .rep-close:hover { color: var(--ink); } .rep-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg); } .rep-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; } .rep-pill-ok { background: #d8f3df; color: #15532b; } .rep-pill-err { background: #ffd9d6; color: #7a1d18; } .rep-pill-skip { background: #e6e9f0; color: #2a3344; } .rep-pill-cost { background: var(--primary-soft); color: var(--primary); } .rep-pill-swap { background: #fde9c8; color: #7a4a00; } [data-theme="dark"] .rep-pill-swap { background: #3e2d10; color: #f0c97a; } .rep-table tr.rep-swap { background: rgba(255, 168, 38, .06); } [data-theme="dark"] .rep-table tr.rep-swap { background: rgba(255, 200, 90, .07); } .rep-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rep-actions .btn { white-space: nowrap; } [data-theme="dark"] .rep-pill-ok { background: #143b22; color: #a3e6bb; } [data-theme="dark"] .rep-pill-err { background: #4a1813; color: #ffb3ad; } [data-theme="dark"] .rep-pill-skip { background: #2a2f3a; color: #c5cbd6; } .rep-table-wrap { overflow: auto; flex: 1; } .rep-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rep-table th, .rep-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .rep-table th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .rep-table td.rep-num, .rep-table th.rep-num { text-align: right; font-variant-numeric: tabular-nums; } .rep-table tr.rep-ok td:first-child a { color: var(--primary); font-weight: 600; } .rep-table tr.rep-err { background: rgba(218, 56, 50, .05); } .rep-table tr.rep-err td:first-child a { color: #b9382f; font-weight: 600; } .rep-table tr.rep-skip { background: rgba(0,0,0,.02); } .rep-updated { color: #15532b; font-weight: 600; } .rep-noop { color: var(--muted); } .rep-note { color: var(--muted); font-size: 12px; } [data-theme="dark"] .rep-updated { color: #93dba8; } [data-theme="dark"] .rep-table tr.rep-err { background: rgba(255, 100, 90, .08); } [data-theme="dark"] .rep-table tr.rep-skip { background: rgba(255,255,255,.03); } .rep-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; background: var(--bg); } @media (max-width: 720px) { .rep-modal { width: calc(100vw - 16px); max-height: calc(100vh - 32px); } .rep-table th, .rep-table td { padding: 8px 10px; font-size: 12px; } } /* ---- Pair check panel (review page) ---- */ .pair-panel { margin: 12px 0 18px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .pair-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pair-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pair-ok { background: #d8f3df; color: #15532b; } .pair-swap { background: #fde9c8; color: #7a4a00; } .pair-err { background: #ffd9d6; color: #7a1d18; } .pair-skip { background: #e6e9f0; color: #2a3344; } [data-theme="dark"] .pair-ok { background: #143b22; color: #a3e6bb; } [data-theme="dark"] .pair-swap { background: #3e2d10; color: #f0c97a; } [data-theme="dark"] .pair-err { background: #4a1813; color: #ffb3ad; } [data-theme="dark"] .pair-skip { background: #2a2f3a; color: #c5cbd6; } .pair-panel-body { margin-top: 6px; } .pair-panel-actions .btn:disabled { opacity: .5; cursor: not-allowed; } /* ============================================================ v2 modern polish — additive only, doesn't touch legacy rules ============================================================ */ /* Subtle ambient gradient on the body. Two soft tinted blobs sit behind everything else, fixed to the viewport so scrolling doesn't reveal hard edges. Brand-blue + a hint of indigo. Dark mode keeps the same idea but way more subtle so contrast stays clean. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 12% -10%, color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 110% 20%, color-mix(in oklab, #6da7ff 14%, transparent) 0%, transparent 60%); } [data-theme="dark"] body::before { background: radial-gradient(ellipse 80% 60% at 12% -10%, color-mix(in oklab, var(--primary) 12%, transparent) 0%, transparent 65%), radial-gradient(ellipse 70% 50% at 110% 20%, color-mix(in oklab, #84b6ff 10%, transparent) 0%, transparent 65%); } /* ---- Page hero (used on Pipeline + Dashboard) ---- */ .page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .page-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; } .page-hero-title { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 6px; background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 78%, var(--primary)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .page-hero-sub { color: var(--muted); margin: 0; font-size: 14px; max-width: 60ch; } .page-hero-meta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .hero-path { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--surface-alt); color: var(--ink-soft); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } /* ---- Pipeline status strip ---- */ .status-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px; margin-bottom: 22px; background: color-mix(in oklab, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .status-pill { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: var(--radius-sm); position: relative; transition: background 160ms; } .status-pill:hover { background: var(--surface-alt); } .status-pill-num { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .status-pill-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 6px; font-weight: 600; } .status-pill.is-needs-review .status-pill-num { color: var(--warn); } .status-pill.is-approved .status-pill-num { color: var(--success); } .status-pill.is-retake .status-pill-num { color: var(--danger); } .status-pill.is-duplicate .status-pill-num { color: var(--muted); } .status-pill.is-imported .status-pill-num { color: var(--primary); } @media (max-width: 720px) { .status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .status-pill-num { font-size: 22px; } } /* ---- Action grid (3 big cards) ---- */ .action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } @media (max-width: 960px) { .action-grid { grid-template-columns: 1fr; } } .action-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform 200ms, box-shadow 200ms, border-color 200ms; } .action-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--card-tone, var(--primary)) 8%, transparent) 0%, transparent 40%); pointer-events: none; opacity: .9; } .action-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15, 23, 42, .08); border-color: color-mix(in oklab, var(--card-tone, var(--primary)) 35%, var(--line)); } .action-card[data-tone="primary"] { --card-tone: var(--primary); } .action-card[data-tone="amber"] { --card-tone: #f0a93a; } .action-card[data-tone="emerald"] { --card-tone: #10a37f; } .action-card-head { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .action-card h3 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--ink); text-transform: none; } .action-card h3 em { font-style: normal; color: var(--card-tone, var(--primary)); } .action-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in oklab, var(--card-tone, var(--primary)) 14%, transparent); color: var(--card-tone, var(--primary)); flex-shrink: 0; } .action-icon svg { width: 22px; height: 22px; } .action-desc { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; position: relative; z-index: 1; } .action-meta { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); position: relative; z-index: 1; } .action-meta li { display: inline-flex; align-items: center; gap: 6px; } .action-meta .dot { width: 5px; height: 5px; border-radius: 999px; display: inline-block; } .action-meta .dot-primary { background: var(--primary); } .action-meta .dot-amber { background: #f0a93a; } .action-meta .dot-emerald { background: #10a37f; } .action-card .btn { align-self: flex-start; position: relative; z-index: 1; margin-top: auto; } .action-card.action-primary .btn { box-shadow: 0 4px 14px rgba(47, 125, 240, .25); } /* ---- Utility tiles ---- */ .utility-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 28px; } @media (max-width: 960px) { .utility-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .utility-grid { grid-template-columns: 1fr; } } .utility-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); text-align: left; cursor: pointer; transition: transform 160ms, border-color 160ms, background 160ms; font-family: inherit; } .utility-card:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--line-strong); background: var(--surface-alt); } .utility-card strong { display: block; font-size: 13px; } .utility-card p { margin: 2px 0 0; font-size: 12px; } .utility-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; } .utility-icon svg { width: 18px; height: 18px; } .utility-danger { color: var(--ink); } .utility-danger .utility-icon { background: var(--danger-soft); color: var(--danger); } /* ---- Batches as cards ---- */ .batches-section { margin-top: 12px; } .batch-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .batch-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 140ms, transform 140ms; } .batch-card:hover { border-color: var(--line-strong); transform: translateY(-1px); } .batch-card-id { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 8px 0; text-align: center; border-radius: 8px; } .batch-card-name { font-weight: 600; font-size: 14px; } .batch-card-path { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .batch-card-actions { display: flex; gap: 6px; } /* ---- Big empty state (Pipeline w/ no batches) ---- */ .empty-state-big { text-align: center; padding: 40px 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); } .empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); margin-bottom: 14px; } .empty-state-icon svg { width: 32px; height: 32px; } .empty-state-big h3 { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; } .empty-state-big p { color: var(--muted); margin: 0; } /* ---- Rich hero stats (Dashboard) ---- Wraps the existing .stat with an icon + tonal accent. The legacy .stat layout still works; .stat-rich adds a horizontal flex + icon slot. */ .stats-rich { gap: 12px; } .stat-rich { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; position: relative; overflow: hidden; transition: transform 180ms, box-shadow 180ms, border-color 180ms; } .stat-rich::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-tone, var(--primary)); opacity: .85; } .stat-rich:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .07); border-color: color-mix(in oklab, var(--card-tone, var(--primary)) 28%, var(--line)); } .stat-rich[data-tone="primary"] { --card-tone: var(--primary); } .stat-rich[data-tone="indigo"] { --card-tone: #7c5cff; } .stat-rich[data-tone="amber"] { --card-tone: #f0a93a; } .stat-rich[data-tone="emerald"] { --card-tone: var(--success); } .stat-rich[data-tone="rose"] { --card-tone: var(--danger); } .stat-rich[data-tone="slate"] { --card-tone: #64748b; } .stat-rich .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in oklab, var(--card-tone, var(--primary)) 14%, transparent); color: var(--card-tone, var(--primary)); } .stat-rich .stat-icon svg { width: 20px; height: 20px; } .stat-rich .stat-body { min-width: 0; } .stat-rich .label { font-size: 10.5px; } .stat-rich .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 2px 0 4px; line-height: 1.05; } .stat-rich .sub { font-size: 11.5px; color: var(--muted); } .stat-rich .stat-spark { opacity: .9; } @media (max-width: 720px) { .stat-rich { grid-template-columns: 36px 1fr; gap: 10px; padding: 12px; } .stat-rich .stat-spark { display: none; } .stat-rich .value { font-size: 20px; } } /* ---- Card hover lift (collection + dashboard recent) ---- */ .note-card { transition: transform 200ms, box-shadow 200ms, border-color 200ms; } .note-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .08); border-color: var(--line-strong); } .recent-card { transition: transform 180ms, box-shadow 180ms; } .recent-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); } /* ---- Sticky frosted toolbar (Collection) ---- */ .collection-toolbar { position: sticky; top: 60px; z-index: 10; background: color-mix(in oklab, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-sm); } /* ============================================================ v3 — push polish further ============================================================ */ /* ---- Topbar overhaul ---- */ .topbar { /* extra translucency + blur for a more pronounced glass effect */ background: color-mix(in oklab, var(--surface) 84%, transparent); } .topbar-inner { padding: 10px 22px; } .brand { display: inline-flex; align-items: baseline; gap: 1px; background: linear-gradient(135deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 70%, var(--primary)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; letter-spacing: -0.02em; position: relative; } .brand .dot { -webkit-text-fill-color: var(--primary); text-shadow: 0 0 14px color-mix(in oklab, var(--primary) 60%, transparent); } /* Pill-style nav links — soft hover background, clearly-active pill */ .topnav { gap: 2px; } .topnav a { padding: 7px 14px; border-radius: 999px; position: relative; transition: background 160ms, color 160ms, transform 120ms; } .topnav a:hover { transform: translateY(-1px); } .topnav a.active { background: linear-gradient(135deg, var(--primary-soft) 0%, color-mix(in oklab, var(--primary-soft) 60%, var(--surface)) 100%); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent); } /* ---- Section dividers as thin gradient lines ---- */ .divider, hr { border: 0; height: 1px; margin: 28px 0; background: linear-gradient(90deg, transparent 0%, var(--line-strong) 30%, var(--line-strong) 70%, transparent 100%); } /* ---- Cursor-spotlight on cards (collection + recent + action cards) ---- A radial gradient overlay rendered via custom properties --mx, --my that the JS updates on mousemove. Falls back to invisible when JS is off. */ .note-card, .recent-card, .action-card { position: relative; } .note-card::after, .recent-card::after, .action-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle 220px at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--primary) 12%, transparent) 0%, transparent 70% ); opacity: 0; transition: opacity 220ms; pointer-events: none; z-index: 0; } .note-card:hover::after, .recent-card:hover::after, .action-card:hover::after { opacity: 1; } /* keep card content above the spotlight */ .note-card > *, .recent-card > *, .action-card > * { position: relative; z-index: 1; } /* ---- Status pills sprinkled across the app — soft glow on hover ---- */ .status, .crop-pill, .chip { transition: box-shadow 180ms, transform 120ms; } .status:hover, .crop-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in oklab, currentColor 14%, transparent); } /* ---- Review page hero (new) ---- */ .review-hero { position: relative; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 18px; overflow: hidden; } .review-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 7%, transparent) 0%, transparent 50%); pointer-events: none; } .review-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; } .review-hero-flag { font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 14px rgba(0,0,0,.15)); width: 84px; height: 64px; display: inline-flex; align-items: center; justify-content: center; user-select: none; } .review-hero-meta { min-width: 0; } .review-hero-crumb { font-size: 12px; margin: 0 0 4px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; } .review-hero-crumb a { color: var(--ink-soft); } .review-hero-crumb a:hover { color: var(--primary); } .review-hero-title { font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: 0; display: inline-flex; gap: 12px; align-items: baseline; flex-wrap: wrap; background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 78%, var(--primary)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .review-hero-title small { font-size: 18px; font-weight: 500; color: var(--muted); -webkit-text-fill-color: var(--muted); letter-spacing: 0; } .review-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; } .hero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--line); } .hero-pill code { font-size: 11px; background: transparent; } .hero-pill.is-needs { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .hero-pill.is-approved{ background: var(--success-soft); color: var(--success); border-color: transparent; } .hero-pill.is-retake { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .hero-pill.is-conf-hi { background: var(--success-soft); color: var(--success); border-color: transparent; } .hero-pill.is-conf-md { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .hero-pill.is-conf-lo { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .review-hero-nav { display: inline-flex; gap: 6px; align-items: center; } .review-hero-nav .btn { border-radius: 999px; background: color-mix(in oklab, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (max-width: 720px) { .review-hero { padding: 16px; } .review-hero-grid { grid-template-columns: auto 1fr; gap: 14px; } .review-hero-flag { font-size: 44px; width: 56px; height: 44px; } .review-hero-title { font-size: 26px; } .review-hero-nav { grid-column: 1 / -1; justify-content: flex-end; } } /* ---- Active filter chips above collection grid ---- */ .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; min-height: 0; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; font-size: 12px; background: var(--primary-soft); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent); border-radius: 999px; cursor: default; animation: chipIn 200ms ease; } .filter-chip-key { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .65; } .filter-chip-val { font-weight: 600; } .filter-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; margin-left: 2px; cursor: pointer; background: transparent; border: 0; color: inherit; font-size: 14px; line-height: 1; } .filter-chip-x:hover { background: color-mix(in oklab, var(--primary) 22%, transparent); } .filter-chip-clear { background: transparent; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 4px 10px; text-decoration: underline; } @keyframes chipIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } } /* ---- World map: staggered reveal + hover scale + glow ---- */ .world-map-card { position: relative; } .world-map-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--primary) 5%, transparent) 0%, transparent 60%); border-radius: inherit; } .world-svg path.owned { transition: fill-opacity 200ms, filter 200ms, transform 220ms; transform-origin: center; transform-box: fill-box; animation: ownedFadeIn 700ms ease both; } .world-svg path.owned:hover { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--primary) 60%, transparent)); } @keyframes ownedFadeIn { from { fill-opacity: 0; } /* the JS sets fill-opacity inline for the bucket — keyframe just reveals */ } /* ---- Collection bulk-action bar (sticky) ---- */ .bulk-bar { position: sticky; bottom: 12px; background: color-mix(in oklab, var(--surface) 85%, transparent); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 12px 30px rgba(15, 23, 42, .12), 0 0 0 1px var(--line); border-radius: 999px; padding: 8px 14px; } /* ---- Tab transitions on review page ---- */ .review-tabs button { transition: color 160ms, background 160ms, box-shadow 160ms; position: relative; } .review-tabs button.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); border-radius: 2px; } /* ---- Skeleton shimmer (for collection while loading) ---- */ .skeleton-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .skeleton-thumb { aspect-ratio: 16 / 9; background: var(--surface-alt); } .skeleton-line { height: 12px; margin: 8px 14px; border-radius: 4px; background: var(--surface-alt); } .skeleton-line.short { width: 40%; } .skeleton-card .skeleton-thumb, .skeleton-card .skeleton-line { background: linear-gradient(90deg, var(--surface-alt) 0%, color-mix(in oklab, var(--surface-alt) 60%, var(--surface)) 50%, var(--surface-alt) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============================================================ Icon-size dial-down — overrides the v2/v3 sizings, which were too prominent. Cuts each by ~30%. Also defensively clamps any svg inside an icon container so the global `svg { max-width: 100% }` rule can't stretch it. ============================================================ */ .action-icon { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; } .action-icon svg { width: 15px; height: 15px; flex: none; } .utility-icon { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px; } .utility-icon svg { width: 14px; height: 14px; flex: none; } .empty-state-icon { width: 44px; height: 44px; border-radius: 12px; } .empty-state-icon svg{ width: 22px; height: 22px; flex: none; } .stat-rich { grid-template-columns: 32px 1fr auto; gap: 10px; } .stat-rich .stat-icon{ width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; } .stat-rich .stat-icon svg { width: 15px; height: 15px; flex: none; } .review-hero-flag { font-size: 38px; width: 48px; height: 38px; } @media (max-width: 720px) { .stat-rich { grid-template-columns: 28px 1fr; gap: 8px; } .stat-rich .stat-icon { width: 26px; height: 26px; flex: 0 0 26px; } .stat-rich .stat-icon svg { width: 13px; height: 13px; } .review-hero-flag { font-size: 30px; width: 40px; height: 30px; } } /* ============================================================ FINAL ICON SIZE LOCK — !important so cached/older overrides can't win. Tiny, unobtrusive icons that read as accents, not focal points. Also force the .stat-rich 3-column layout so icons sit BESIDE labels, never above them. ============================================================ */ .action-icon, .utility-icon, .stat-rich .stat-icon { width: 22px !important; height: 22px !important; border-radius: 6px !important; flex: 0 0 22px !important; display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden; } .action-icon > svg, .utility-icon > svg, .stat-rich .stat-icon > svg, .empty-state-icon > svg { width: 13px !important; height: 13px !important; max-width: 13px !important; max-height: 13px !important; flex: none !important; display: block; } .empty-state-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; } .empty-state-icon > svg { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; } /* Force the 3-column grid on stat-rich cards so icons sit on the LEFT, not stacked above the text. Cached older `.stat` rule can't win this. */ .stats.stats-rich .stat.stat-rich { display: grid !important; grid-template-columns: 22px 1fr auto !important; gap: 10px !important; align-items: center !important; } .review-hero-flag { font-size: 32px !important; width: 40px !important; height: 32px !important; } /* ---- Batch card layout fix — wrap the path, contain the actions ---- */ .batch-card { /* min-width:0 on a grid item lets the middle column actually respect its 1fr share instead of being expanded by long unbroken filenames. */ grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: start !important; } .batch-card-body { min-width: 0; } .batch-card-name { word-break: break-word; overflow-wrap: anywhere; } .batch-card-path { /* Allow long paths to wrap onto multiple lines instead of clipping. */ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-all; overflow-wrap: anywhere; display: block; font-size: 11px; line-height: 1.4; color: var(--muted); max-width: 100%; } .batch-card-actions { flex-shrink: 0; align-self: center; flex-wrap: nowrap; } /* ---- Card click fix ---- The v3 polish rule `.note-card > * { position: relative }` accidentally overrode the absolutely-positioned `` overlay that makes the whole card clickable. Restore its absolute positioning + a high z-index so nothing else can sit on top of it. */ .note-card a.full, .recent-card a.full, .action-card a.full { position: absolute !important; inset: 0 !important; z-index: 5 !important; } /* The serial badge needs to stay above the click overlay so its tooltip works AND clicks on it still navigate the card (it's just a label, no interactive children inside). pointer-events: none on the wrapper means clicks fall through to the anchor underneath. */ .note-card .serial-badge { pointer-events: none; z-index: 6; } /* ---- Sync admin UI ---- */ .sync-card { background: var(--surface); } .sync-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; } @media (max-width: 720px) { .sync-grid { grid-template-columns: 1fr; } .sync-arrows { flex-direction: row !important; } } .sync-side { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 110px; } .sync-side-head { display: flex; align-items: center; gap: 8px; font-size: 13px; } .sync-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .sync-dot-local { background: #7c5cff; box-shadow: 0 0 6px rgba(124, 92, 255, .4); } .sync-dot-live { background: var(--success); box-shadow: 0 0 6px color-mix(in oklab, var(--success) 60%, transparent); } .sync-stats { font-size: 13px; } .sync-stat-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .sync-stat-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .sync-stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .sync-stat-meta { font-size: 11px; color: var(--muted); } .sync-err { color: var(--danger); font-size: 12px; font-family: var(--font-mono); } .sync-arrows { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 0 8px; } .sync-arrows .btn { white-space: nowrap; } .sync-pull { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 32%, var(--line)); } .sync-pull:hover { background: var(--primary-soft); } .sync-push { color: var(--success); border-color: color-mix(in oklab, var(--success) 32%, var(--line)); } .sync-push:hover { background: var(--success-soft); } .sync-banner { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--line); } .sync-banner-ok { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklab, var(--success) 28%, transparent); } .sync-banner-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 32%, transparent); } /* ---- Admin export tiles (two-up on desktop, stacked on phone) ---- */ .export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 720px) { .export-grid { grid-template-columns: 1fr; } } .export-tile { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .export-tile h3 { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 6px; } /* ---- Sync: sleeping live state ---- */ .sync-sleeping { display: flex; flex-direction: column; gap: 8px; } .sync-sleeping-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-soft); align-self: flex-start; } .sync-sleeping-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; } /* ---- Sync diff modal ---- */ .diff-body { padding: 14px 20px; overflow: auto; flex: 1; } .diff-cols { display: flex; flex-direction: column; gap: 18px; } .diff-side-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .diff-side-cols { grid-template-columns: 1fr; } } .diff-cols h3 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 8px; } .diff-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-alt); max-height: 280px; overflow-y: auto; } .diff-row { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; } .diff-row:last-child { border-bottom: 0; } .diff-row a { font-family: var(--font-mono); font-size: 12px; } .diff-only-local { border-left: 3px solid #7c5cff; } .diff-only-live { border-left: 3px solid var(--success); } .diff-conflict { border-left: 3px solid var(--warn); } .diff-newer { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); } /* ---- Sync diff: per-row apply UI ---- */ .diff-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; } .diff-check { display: flex; align-items: center; padding-top: 1px; cursor: pointer; } .diff-check input { margin: 0; cursor: pointer; } .diff-row-body { min-width: 0; } .diff-applied { background: var(--success-soft); opacity: .7; } .diff-applied .diff-row-body::after { content: " ✓ synced"; color: var(--success); font-size: 11px; font-weight: 600; } .diff-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .diff-quickselect { display: flex; gap: 4px; flex-wrap: wrap; } .diff-quickselect .btn { padding: 2px 8px; font-size: 11px; } .diff-apply-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .diff-apply-info { display: flex; flex-direction: column; gap: 2px; } .diff-apply-info #diff-selected-count { font-weight: 600; font-size: 13px; color: var(--ink); } .diff-apply-actions { display: flex; gap: 8px; flex-wrap: wrap; } .diff-apply-actions .btn:disabled { opacity: .4; cursor: not-allowed; } /* ============================================================ Themed modal system — replaces native confirm/alert/prompt ============================================================ */ .bn-modal-root { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms ease; pointer-events: none; padding: 16px; } .bn-modal-root.is-open { opacity: 1; pointer-events: auto; } .bn-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 24, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .bn-modal { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); width: min(440px, 100%); max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden; transform: translateY(12px) scale(.96); opacity: 0; transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms; } .bn-modal-root.is-open .bn-modal { transform: translateY(0) scale(1); opacity: 1; } .bn-modal-wide { width: min(680px, 100%); } .bn-modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 22px 6px; gap: 12px; } .bn-modal-head-titles { flex: 1; min-width: 0; } .bn-modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--ink); } .bn-modal-head p { margin: 4px 0 0; font-size: 12.5px; } .bn-modal-x { background: transparent !important; border: 0 !important; cursor: pointer; font-size: 26px; line-height: 1; color: var(--muted); padding: 0 6px; width: auto !important; height: auto !important; } .bn-modal-x:hover { color: var(--ink) !important; background: transparent !important; } .bn-modal-body { padding: 8px 22px 16px; overflow-y: auto; flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); } .bn-modal-body p { margin: 0 0 8px; } .bn-modal-body p:last-child { margin-bottom: 0; } .bn-modal-body strong { color: var(--ink); } .bn-modal-body code { background: var(--surface-alt); padding: 1px 6px; border-radius: 4px; } .bn-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg); } .bn-alert-error { border-left: 3px solid var(--danger); padding-left: 18px; } .bn-alert-warn { border-left: 3px solid var(--warn); padding-left: 18px; } .bn-alert-success{ border-left: 3px solid var(--success); padding-left: 18px; } /* ---- Toasts ---- */ .bn-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 10001; pointer-events: none; align-items: center; } .bn-toast { background: var(--ink); color: var(--inverse); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: 0 10px 28px rgba(0,0,0,.25); transform: translateY(20px) scale(.9); opacity: 0; transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), opacity 220ms; pointer-events: auto; max-width: 90vw; } .bn-toast.is-show { transform: translateY(0) scale(1); opacity: 1; } .bn-toast-success { background: var(--success); color: #fff; } .bn-toast-error { background: var(--danger); color: #fff; } .bn-toast-warn { background: var(--warn); color: #fff; } /* ---- Progress modal ---- */ .bn-progress-body { padding-top: 16px; } .bn-progress-steps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; } .bn-progress-step { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: background 240ms, border-color 240ms, transform 200ms; font-size: 13px; color: var(--ink-soft); } .bn-progress-step.is-active { background: var(--primary-soft); border-color: color-mix(in oklab, var(--primary) 38%, var(--line)); color: var(--ink); transform: translateX(2px); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent); } .bn-progress-step.is-done { color: var(--muted); background: var(--surface); } .bn-progress-step.is-failed { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 38%, var(--line)); color: var(--ink); } .bn-progress-step-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--primary); flex-shrink: 0; } .bn-progress-step.is-done .bn-progress-step-icon { color: var(--success); } .bn-progress-step.is-failed .bn-progress-step-icon { color: var(--danger); } .bn-step-dot { width: 8px; height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 60%, transparent); display: inline-block; } .bn-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: bn-spin 700ms linear infinite; } @keyframes bn-spin { to { transform: rotate(360deg); } } .bn-progress-log { max-height: 140px; overflow-y: auto; background: #0a0e15; border: 1px solid #1a2230; border-radius: var(--radius-sm); padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; color: #b9c4d4; margin-top: 12px; line-height: 1.55; } .bn-progress-log:empty { display: none; } .bn-progress-log-line { padding: 2px 0; animation: bn-fade-line 220ms; } .bn-progress-log-line::before { content: "› "; color: #5b6878; } .bn-log-error { color: #ff8a8a; } .bn-log-warn { color: #ffd28a; } .bn-log-ok { color: #8aff9f; } @keyframes bn-fade-line { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } .bn-progress-result { text-align: center; padding: 22px 16px 18px; margin-top: 14px; border-radius: var(--radius); animation: bn-pop-in 380ms cubic-bezier(.34, 1.56, .64, 1); } .bn-progress-result-ok { background: var(--success-soft); } .bn-progress-result-err { background: var(--danger-soft); } .bn-result-icon { font-size: 30px; font-weight: 700; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface); margin-bottom: 8px; box-shadow: var(--shadow-sm); } .bn-progress-result-ok .bn-result-icon { color: var(--success); } .bn-progress-result-err .bn-result-icon { color: var(--danger); } .bn-progress-result h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); } .bn-progress-result p { margin: 0; color: var(--ink-soft); font-size: 12.5px; } @keyframes bn-pop-in { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } } @media (max-width: 720px) { .bn-modal { border-radius: var(--radius); } .bn-modal-head, .bn-modal-body, .bn-modal-foot { padding-left: 16px; padding-right: 16px; } } /* ---- Deploy panel (admin) ---- */ .deploy-card { background: var(--surface); position: relative; overflow: hidden; } .deploy-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 6%, transparent) 0%, transparent 50%); pointer-events: none; } .deploy-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; position: relative; z-index: 1; } @media (max-width: 720px) { .deploy-grid { grid-template-columns: 1fr; } .deploy-grid .btn-lg { width: 100%; } } .deploy-info { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); } .deploy-info-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; } .deploy-info-lbl { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 600; } .deploy-tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); background: var(--surface); padding: 2px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } /* ============================================================ Modal minimise → floating pill ============================================================ */ .bn-modal-min { background: transparent !important; border: 0 !important; cursor: pointer; padding: 6px 10px; margin-right: 4px; font-size: 22px; line-height: 1; color: var(--muted); width: auto !important; height: auto !important; font-weight: 700; } .bn-modal-min:hover { color: var(--ink) !important; background: transparent !important; } /* When minimised, fade the modal away (the pill takes over). */ .bn-modal-root.is-minimised { opacity: 0 !important; pointer-events: none !important; } .bn-mini-pill { position: fixed; top: 14px; right: 22px; z-index: 10005; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 8px 26px rgba(15, 23, 42, .18), 0 0 0 1px color-mix(in oklab, var(--primary) 20%, transparent); cursor: pointer; transform: translateY(-12px) scale(.92); opacity: 0; transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1), opacity 220ms, box-shadow 220ms, background 220ms, border-color 220ms; font-size: 13px; font-family: inherit; max-width: min(420px, calc(100vw - 44px)); } .bn-mini-pill.is-show { transform: translateY(0) scale(1); opacity: 1; } .bn-mini-pill:hover { box-shadow: 0 12px 30px rgba(15, 23, 42, .22), 0 0 0 1px color-mix(in oklab, var(--primary) 32%, transparent); } .bn-mini-pill-text { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; } .bn-mini-pill-title { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .bn-mini-pill-step { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } /* The animated spinner inside the pill */ .bn-mini-pill-spinner { width: 14px; height: 14px; border: 2px solid color-mix(in oklab, var(--primary) 40%, var(--line)); border-right-color: transparent; border-radius: 999px; animation: bn-spin 700ms linear infinite; flex-shrink: 0; } .bn-mini-pill-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11px; font-weight: 700; flex-shrink: 0; } .bn-mini-pill.is-finished-ok .bn-mini-pill-icon { background: var(--success); color: #fff; } .bn-mini-pill.is-finished-err .bn-mini-pill-icon { background: var(--danger); color: #fff; } /* Flash animation when the job completes while minimised — 3 pulses */ .bn-mini-pill.is-flash-ok { animation: bn-pill-flash-ok 1.2s ease-out 3; border-color: var(--success); } .bn-mini-pill.is-flash-err { animation: bn-pill-flash-err 1.2s ease-out 3; border-color: var(--danger); } @keyframes bn-pill-flash-ok { 0%, 100% { box-shadow: 0 8px 26px rgba(15, 23, 42, .18), 0 0 0 1px color-mix(in oklab, var(--success) 30%, transparent); } 50% { box-shadow: 0 8px 26px rgba(15, 23, 42, .18), 0 0 0 6px color-mix(in oklab, var(--success) 35%, transparent), 0 0 24px color-mix(in oklab, var(--success) 50%, transparent); transform: translateY(0) scale(1.04); } } @keyframes bn-pill-flash-err { 0%, 100% { box-shadow: 0 8px 26px rgba(15, 23, 42, .18), 0 0 0 1px color-mix(in oklab, var(--danger) 30%, transparent); } 50% { box-shadow: 0 8px 26px rgba(15, 23, 42, .18), 0 0 0 6px color-mix(in oklab, var(--danger) 35%, transparent), 0 0 24px color-mix(in oklab, var(--danger) 50%, transparent); transform: translateY(0) scale(1.04); } } @media (max-width: 720px) { .bn-mini-pill { top: 10px; right: 10px; padding: 7px 12px 7px 10px; } .bn-mini-pill-title { max-width: 200px; } .bn-mini-pill-step { max-width: 200px; } } /* ---- Photos panel inside the sync card ---- */ .photos-panel { margin-top: 14px; padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); } .photos-actions .btn { font-size: 12px; } /* ---- Deploy warning banners (inside confirm modal) ---- */ .deploy-warn { padding: 10px 14px; border-radius: var(--radius-sm); margin: 0 0 12px; font-size: 13px; border: 1px solid var(--line); } .deploy-warn-ok { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); } .deploy-warn-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, transparent); } .deploy-warn-info { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 30%, transparent); } .deploy-warn code { background: var(--surface); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; } .deploy-warn ul { color: var(--ink-soft); } .deploy-warn ul code { color: var(--ink); } /* ---- Progress bar inside themed modal ---- */ .bn-progress-bar-wrap { margin: 12px 0 8px; } .bn-progress-bar { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; position: relative; } .bn-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 70%, white)); border-radius: 999px; transition: width 320ms cubic-bezier(.4, 0, .2, 1); box-shadow: 0 0 8px color-mix(in oklab, var(--primary) 50%, transparent); } .bn-progress-bar-fill::after { /* subtle moving sheen */ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); background-size: 30% 100%; background-repeat: no-repeat; animation: bn-bar-sheen 1.6s linear infinite; pointer-events: none; } @keyframes bn-bar-sheen { from { background-position: -30% 0; } to { background-position: 130% 0; } } .bn-progress-bar-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; font-family: var(--font-mono); color: var(--ink-soft); } .bn-progress-bar-pct { font-weight: 700; color: var(--primary); } /* ---- Current item (e.g. "Currently: #234 — Indonesia 1 RUPIAH") ---- */ .bn-progress-current { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 10px; background: color-mix(in oklab, var(--primary-soft) 60%, var(--surface)); border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--line)); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); } .bn-progress-current strong { color: var(--ink); font-family: var(--font-mono); } .bn-progress-current-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); flex-shrink: 0; animation: bn-pulse 1.4s ease-in-out infinite; } @keyframes bn-pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 60%, transparent); } 50% { opacity: .7; transform: scale(1.2); box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 0%, transparent); } } /* ---- "Push everything" prominent action inside sync card ---- */ .sync-pushall { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 9%, var(--surface)) 0%, var(--surface) 60%); border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--line)); border-radius: var(--radius); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 5%, transparent); } .sync-pushall-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .sync-pushall-text strong { color: var(--ink); } .sync-pushall-text .muted { font-size: 12px; } .sync-pushall-text em { font-style: italic; color: var(--primary); } .sync-pushall .btn-lg { white-space: nowrap; box-shadow: 0 6px 16px rgba(47, 125, 240, .25); } @media (max-width: 720px) { .sync-pushall .btn-lg { width: 100%; } } /* ---- Stop button on themed progress modal ---- */ .bn-modal-stop { margin-left: auto; /* pushes itself to the right of the title block */ margin-right: 6px; background: transparent; border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--line)); color: var(--danger); font-weight: 600; white-space: nowrap; } .bn-modal-stop:hover { background: var(--danger-soft); border-color: var(--danger); } .bn-modal-stop:disabled { opacity: .6; cursor: not-allowed; } .bn-modal-head { align-items: center; } .bn-modal-head .bn-modal-head-titles { flex: 1 1 auto; min-width: 0; } /* ---- "Latest results" panel on Pipeline ---- */ .latest-jobs { margin: 28px 0; } .latest-jobs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .latest-job-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--success); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .latest-job-card.latest-job-warn { border-left-color: var(--warn); background: linear-gradient(135deg, color-mix(in oklab, var(--warn) 6%, var(--surface)) 0%, var(--surface) 60%); } .latest-job-head { display: flex; align-items: center; gap: 8px; font-size: 13px; } .latest-job-icon { font-size: 18px; } .latest-job-summary { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); } .latest-job-cta { font-size: 12px; font-weight: 600; color: var(--warn); padding: 6px 10px; background: var(--warn-soft); border-radius: 999px; align-self: flex-start; } .latest-job-cta-ok { color: var(--success); background: var(--success-soft); } .latest-job-actions { margin-top: auto; } /* ---- "What to do next" callout in report modals ---- */ .rep-nextstep { margin: 0 20px 8px; padding: 12px 16px; background: var(--warn-soft); border: 1px solid color-mix(in oklab, var(--warn) 28%, transparent); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); } .rep-nextstep-ok { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 28%, transparent); } .rep-nextstep strong { color: var(--ink); } .rep-nextstep ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; } .rep-nextstep li { margin-bottom: 4px; } .rep-nextstep li strong { color: var(--ink); } /* ---- Candidate picker (inside report modal) ---- */ .cand-modal { width: min(620px, calc(100vw - 32px)); } .cand-body { padding: 14px 22px; overflow-y: auto; } .cand-search { display: flex; gap: 8px; margin: 10px 0; } .cand-search input { flex: 1; } .cand-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-alt); max-height: 380px; overflow-y: auto; } .cand-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: center; } .cand-row:last-child { border-bottom: 0; } .cand-row:hover { background: var(--surface); } .cand-main { font-size: 13px; } .cand-meta { font-size: 11px; grid-column: 1; } .cand-actions { grid-row: 1 / 3; align-self: center; } /* ---- Collapsible facet groups (Collection rail) ---- */ details.facet-group { border: 0; background: transparent; margin-bottom: 4px; } details.facet-group + details.facet-group { margin-top: 0; } details.facet-group > summary { list-style: none; /* remove default ▶ marker */ cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin: 0 -10px 4px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); user-select: none; transition: background 140ms, color 140ms; } details.facet-group > summary::-webkit-details-marker { display: none; } details.facet-group > summary:hover { background: var(--surface-alt); color: var(--ink); } details.facet-group > summary::after { content: "▾"; font-size: 10px; color: var(--muted); margin-left: 6px; transition: transform 180ms ease; } details.facet-group:not([open]) > summary::after { transform: rotate(-90deg); } details.facet-group[open] > summary { color: var(--ink); } .facet-group-count { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; margin-left: auto; /* sits between label and ▾ */ padding-right: 6px; } details.facet-group > .facet-list { padding: 4px 0 8px; animation: bn-facet-slide 200ms ease; } @keyframes bn-facet-slide { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } /* Footer row: Expand/Collapse all */ .facet-rail-footer { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .facet-rail-footer .btn { flex: 1; font-size: 11px; padding: 4px 8px; } /* ---- Billing-block modal ---- */ .bn-billing-error { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--danger-soft); border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent); border-radius: var(--radius-sm); margin-bottom: 14px; } .bn-billing-icon { font-size: 24px; line-height: 1; color: var(--danger); flex-shrink: 0; } .bn-billing-msg { margin: 6px 0 0; padding: 8px 10px; background: var(--surface); border-radius: 4px; font-size: 11.5px; font-family: var(--font-mono); color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; max-height: 100px; overflow-y: auto; } /* ============================================================ Collection page polish — tighter top, compact rail, serial on the white card instead of overlaying the photo. ============================================================ */ /* Compact hero — H1 + count inline, no big margin underneath */ .collection-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .collection-hero h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; display: inline-flex; align-items: baseline; gap: 10px; } .collection-hero h1 .muted { font-size: 13px; font-weight: 500; letter-spacing: 0; } /* Tighten the shell padding at the top */ .shell { padding-top: 14px; } /* ---- Compact facet rail ---- */ .facet-rail { padding: 6px 12px 12px !important; /* tighter than the default card-pad */ } details.facet-group > summary { padding: 6px 8px; margin: 0 -8px 0; font-size: 11px; /* slightly smaller */ } .facet-group-count { font-size: 10px; } details.facet-group > .facet-list { padding: 2px 0 6px; } .facet-rail-footer { margin-top: 6px; padding-top: 6px; } .facet-rail-footer .btn { font-size: 10.5px; } #clear-filters { font-size: 11px !important; padding: 4px 8px !important; } /* (Old .filters-trigger compact rules — superseded by the definitive Mobile-collection block at the bottom of this file.) */ /* ---- Serial number on the white card area ---- */ .note-card .card-serial { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 8px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; align-self: flex-start; max-width: 100%; position: relative; z-index: 2; pointer-events: none; /* keep the card-anchor click-through */ } .note-card .card-serial-lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } .note-card .card-serial code { font-family: var(--font-mono); font-size: 11px; color: var(--ink); background: transparent; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .note-card .card-serial-dup { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; background: rgba(255, 168, 38, .92); color: #1a1206; letter-spacing: .04em; } .note-card .card-serial.is-dup { border-color: rgba(255, 168, 38, .6); background: color-mix(in oklab, var(--warn) 10%, var(--surface)); } /* ============================================================ Collection page declutter — round 2 ============================================================ */ /* Defensive guard moved into the definitive Mobile-collection block at the bottom of this file. */ /* Lighter card image backdrop — replaces the harsh pure-black letterbox. Notes look like portfolio thumbnails, not crime-scene evidence. */ .note-card .imgwrap { background: var(--surface-alt) !important; } .note-card .imgwrap .empty { color: var(--muted) !important; } /* Result-count chip living inside the toolbar (where the H1 used to live) */ .toolbar-count { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-soft); flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Sticky toolbar — bump z-index so it always sits above the cards as they scroll past. Topbar is z:30; toolbar lives below at z:20 so it doesn't punch through the topbar. */ .collection-toolbar { position: sticky; top: 60px; z-index: 20; background: color-mix(in oklab, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-sm); } /* Footer row that holds the serial — make the serial pill flow nicely */ .footer-row-serial { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 4px; } .footer-row-serial .card-serial { margin-top: 0; } /* ---- Verify result modal (after Ask AI to verify on review page) ---- */ .vrm-modal { width: min(720px, calc(100vw - 32px)); } .vrm-body { padding: 14px 22px 4px; overflow-y: auto; } .vrm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .vrm-table th { text-align: left; padding: 6px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 600; } .vrm-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 12.5px; } .vrm-table tr:last-child td { border-bottom: 0; } .vrm-table .vrm-field { font-weight: 600; color: var(--ink); width: 25%; } .vrm-table .vrm-arrow { color: var(--muted); font-size: 14px; text-align: center; width: 20px; } .vrm-table code { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; color: var(--ink-soft); word-break: break-word; } .vrm-table .vrm-after { background: var(--success-soft); color: var(--success); font-weight: 600; } .vrm-empty { font-style: italic; color: var(--muted); font-size: 11px; } .vrm-scope { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line); } .vrm-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } /* ---- Full-publish prominent CTA in the deploy panel ---- */ .full-publish-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--success) 9%, var(--surface)) 0%, var(--surface) 60%); border: 1px solid color-mix(in oklab, var(--success) 28%, var(--line)); border-radius: var(--radius); position: relative; z-index: 1; } .full-publish-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .full-publish-text strong { color: var(--ink); } .full-publish-text .muted { font-size: 12px; } .full-publish-text em { font-style: italic; color: var(--success); } .full-publish-cta .btn-lg { white-space: nowrap; box-shadow: 0 6px 16px color-mix(in oklab, var(--success) 30%, transparent); } @media (max-width: 720px) { .full-publish-cta .btn-lg { width: 100%; } } /* ============================================================ FIX: Collection grid layout — explicit column placement so the rail and content always land in the right cells, even if other direct children of .collection-shell (the mobile filters trigger, the backdrop, etc.) are present in the DOM. ============================================================ */ .collection-shell { display: grid !important; grid-template-columns: 240px minmax(0, 1fr) !important; gap: 22px !important; align-items: start !important; } .collection-shell > .facet-rail { grid-column: 1 !important; grid-row: 1 !important; } .collection-shell > div:not(#facet-backdrop):not(.filters-trigger) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; } /* The mobile-only trigger + backdrop must NEVER be visible on desktop and must NEVER occupy a grid cell. */ .collection-shell > .filters-trigger, .collection-shell > #facet-backdrop { display: none !important; grid-column: 1 / -1 !important; } /* Mobile grid override moved into the definitive bottom-of-file block. */ /* ============================================================ Pair-fix modal — visual picker with thumbnails everywhere ============================================================ */ .pf-modal { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; } .pf-body { padding: 16px 22px; overflow-y: auto; flex: 1; } .pf-body section { margin-bottom: 22px; } .pf-body section:last-child { margin-bottom: 6px; } .pf-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin: 0 0 8px; } /* "Currently paired" + flip preview share the same thumbnail layout */ .pf-current-thumbs, .pf-flip-preview { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pf-current-thumbs figure, .pf-flip-preview figure { margin: 0; flex: 1 1 220px; min-width: 0; } .pf-current-thumbs figcaption, .pf-flip-preview figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 4px; } .pf-current-thumbs img, .pf-flip-preview img, .pf-cand-thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); } .pf-thumb-empty { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); background: var(--surface-alt); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); } .pf-arrow { font-size: 28px; color: var(--primary); align-self: center; flex: 0 0 30px; text-align: center; } .pf-flip { background: var(--surface-alt); padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); } .pf-flip .btn { margin-top: 10px; } /* Candidate list */ .pf-cand-list { list-style: none; padding: 0; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-height: 480px; overflow-y: auto; } .pf-cand { display: grid; grid-template-columns: 280px 1fr; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: center; } .pf-cand:last-child { border-bottom: 0; } .pf-cand:hover { background: var(--surface-alt); } .pf-cand-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pf-cand-meta { min-width: 0; } .pf-cand-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; } .pf-cand-note { font-size: 11.5px; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .pf-score { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-alt); padding: 1px 6px; border-radius: 4px; color: var(--ink-soft); } .pf-search { display: flex; gap: 8px; } .pf-search input { flex: 1; } @media (max-width: 720px) { .pf-cand { grid-template-columns: 1fr; } .pf-current-thumbs, .pf-flip-preview { flex-direction: column; } .pf-arrow { transform: rotate(90deg); } } /* ---- Pair-fix candidate thumbnail buttons (clickable per-image) ---- */ .pf-cand-thumbs .pf-thumb-btn { position: relative; background: transparent !important; border: 2px solid var(--line) !important; padding: 0 !important; border-radius: var(--radius-sm) !important; cursor: pointer; overflow: hidden; transition: border-color 160ms, transform 160ms, box-shadow 160ms; } .pf-cand-thumbs .pf-thumb-btn:hover { border-color: var(--primary) !important; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(47, 125, 240, .2); } .pf-cand-thumbs .pf-thumb-btn img { display: block; border: none !important; border-radius: 0 !important; } .pf-cand-thumbs .pf-thumb-lbl { position: absolute; bottom: 4px; left: 4px; font-size: 9px; font-weight: 700; letter-spacing: .08em; background: rgba(0, 0, 0, .65); color: #fff; padding: 2px 6px; border-radius: 4px; pointer-events: none; } /* ============================================================ Mobile UI fixes — collection rail + runner pill ============================================================ */ /* (Old conflicting mobile block removed — see the definitive "Mobile collection — definitive rules" block at the bottom of this file.) */ /* The runner pill at top-right — smaller + softer on phone so it doesn't cover the topbar nav or the page title. */ .bn-mini-pill { top: 56px; /* sits just below the topbar (was 14px = overlap) */ right: 8px; max-width: calc(100vw - 16px); padding: 6px 12px 6px 10px; font-size: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } .bn-mini-pill-title { max-width: 60vw; font-size: 12px; } .bn-mini-pill-step { max-width: 60vw; font-size: 10px; } /* The toolbar count pill should not push the search input off-screen. */ .toolbar-count { font-size: 11px; padding: 3px 8px; flex-shrink: 0; } /* And let the search input wrap below the count + ⚙ on phone. */ .collection-toolbar { flex-wrap: wrap; padding: 6px; gap: 6px; } .collection-toolbar .search-input { flex: 1 1 100%; order: 10; /* always last → on its own row */ } } /* ---- Themed runner modal: image preview during Process All ---- */ .bn-progress-current { flex-direction: column !important; align-items: stretch !important; padding: 8px !important; } .bn-progress-current-img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: var(--surface-alt); border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--line); } .bn-progress-current-line { display: flex; align-items: center; gap: 10px; padding: 4px 6px; font-size: 13px; } /* ============================================================ Mobile collection — definitive rules (single source of truth) The previous attempts were spread across multiple @media blocks and stomped on each other. This block lives at the END of the stylesheet and is the only place that styles the mobile facet rail / drawer / filters trigger. Earlier rules with the same selectors have been neutralised above. Markup contract (see app/templates/collection.html): .collection-shell > #facet-backdrop (fixed, mobile-only) > aside#facet-rail (sidebar OR bottom-sheet) > div (toolbar + grid container) > .collection-toolbar > #filters-trigger (mobile-only ⚙ pill) ============================================================ */ /* Trigger pill is HIDDEN by default (desktop). Only revealed at ≤720px below. */ .filters-trigger { display: none; } @media (max-width: 720px) { /* --- Layout: stack to a single column. --- */ .collection-shell { display: block !important; grid-template-columns: none !important; gap: 0 !important; } .collection-shell > div:not(#facet-backdrop) { grid-column: auto !important; grid-row: auto !important; min-width: 0; } /* --- Facet rail: HIDDEN by default. Only the .is-bottomsheet class (added by openFilterDrawer in collection.html) makes it appear. --- */ .collection-shell > .facet-rail, .facet-rail { display: none !important; } .facet-rail.is-bottomsheet { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 75vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .22); z-index: 60; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 220ms ease; } .facet-rail.is-bottomsheet.is-open { transform: translateY(0); } /* --- Backdrop: covers the page behind the open drawer. --- */ .facet-backdrop { display: block; position: fixed; inset: 0; background: rgba(13, 27, 42, .42); z-index: 59; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .facet-backdrop.is-open { opacity: 1; pointer-events: auto; } /* --- Trigger: small ⚙ pill living inside the toolbar row. --- */ .filters-trigger { display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px; font-weight: 500; flex-shrink: 0; position: relative; cursor: pointer; } .filters-trigger:active { transform: scale(.97); } .filters-trigger .filters-trigger-text { display: none; } .filters-trigger .count { position: absolute; top: -5px; right: -5px; background: var(--primary); color: #fff; border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg); } /* --- Toolbar layout: wrap to multi-row, search input full width on its own row. --- */ .collection-toolbar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; /* Defeat sticky on phone — frees up vertical space and avoids the z-index gymnastics with the topbar. */ position: static !important; } .collection-toolbar .search-input { flex: 1 1 100%; order: 10; } .toolbar-count { font-size: 11px; padding: 3px 8px; } } /* Desktop: backdrop must never render. */ @media (min-width: 721px) { .facet-backdrop { display: none !important; } .filters-trigger { display: none !important; } } /* ============================================================ Pair-integrity audit report modal ============================================================ */ .ap-summary p { margin: 6px 0; } .ap-empty { padding: 12px 14px; background: var(--success-soft); color: var(--success); border-radius: var(--radius); font-weight: 600; } .ap-issue-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ap-issue { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .ap-issue.ap-sev-danger { border-left-color: var(--danger); } .ap-issue.ap-sev-warn { border-left-color: var(--warn, #f59e0b); } .ap-issue.ap-sev-info { border-left-color: var(--primary); } .ap-issue summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .ap-issue summary::-webkit-details-marker { display: none; } .ap-issue summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 120ms; } .ap-issue[open] summary::before { transform: rotate(90deg); } .ap-sev-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; } .ap-sev-danger .ap-sev-dot { background: var(--danger); opacity: 1; } .ap-sev-warn .ap-sev-dot { background: var(--warn, #f59e0b); opacity: 1; } .ap-sev-info .ap-sev-dot { background: var(--primary); opacity: 1; } .ap-issue-meta { margin-left: auto; font-size: 11px; } .ap-issue-body { padding: 4px 14px 14px; } .ap-issue.ap-issue-applied { opacity: .6; background: var(--success-soft); } .ap-repair-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .ap-repair-row { display: grid; grid-template-columns: 50px 1fr 24px 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11.5px; } .ap-repair-noop { opacity: .5; } .ap-repair-spec { font-weight: 600; } .ap-repair-spec a { color: var(--primary); text-decoration: none; } .ap-repair-side { min-width: 0; } .ap-repair-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; } .ap-repair-new .ap-repair-lbl { color: var(--success); } .ap-repair-pair { display: flex; gap: 4px; } .ap-thumb { display: inline-block; width: 70px; height: 42px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; flex-shrink: 0; } .ap-thumb img { width: 100%; height: 100%; object-fit: cover; } .ap-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 16px; background: repeating-linear-gradient( 45deg, transparent, transparent 4px, color-mix(in oklab, var(--muted) 8%, transparent) 4px, color-mix(in oklab, var(--muted) 8%, transparent) 8px); } .ap-repair-files { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-repair-arrow { text-align: center; font-size: 18px; color: var(--muted); } .ap-issue-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } /* Bulk-apply bar that sits ABOVE the issue list when high-severity repairs exist. The fast path: one click handles every cascade. */ .ap-bulk-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 12px 0; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 8%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--line)); border-radius: var(--radius); flex-wrap: wrap; } .ap-bulk-text { flex: 1; min-width: 200px; font-size: 12.5px; } .ap-bulk-text strong { color: var(--ink); } .ap-bulk-apply { white-space: nowrap; } .ap-bulk-status { width: 100%; } @media (max-width: 720px) { .ap-repair-row { grid-template-columns: 1fr; gap: 6px; } .ap-repair-arrow { text-align: left; font-size: 14px; transform: rotate(90deg); width: 24px; } } /* ============================================================ Visual pair editor — drag-drop chronological gallery ============================================================ */ .pe-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .pe-title { font-size: 22px; margin: 0 0 4px; } .pe-sub { font-size: 13px; max-width: 720px; line-height: 1.5; margin: 0; } .pe-controls { display: flex; gap: 6px; align-items: center; } .pe-controls select { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; } .pe-toolbar { position: sticky; top: 56px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 14px; background: color-mix(in oklab, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow-sm); } .pe-stats { font-size: 12.5px; } .pe-toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pe-filter { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; cursor: pointer; } .pe-filter input { width: 14px; height: 14px; } .pe-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; background: var(--surface-alt); border-radius: var(--radius); font-size: 11.5px; margin-bottom: 14px; } .pe-legend-item { display: inline-flex; gap: 6px; align-items: center; } .pe-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 2px solid; } .pe-swatch-ok { border-color: var(--line-strong); background: var(--surface); } .pe-swatch-suspect { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, var(--surface)); } .pe-swatch-singleton{ border-color: var(--warn, #f59e0b); border-style: dashed; background: var(--surface); } .pe-swatch-dup { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 12%, var(--surface)); } .pe-swatch-pending { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 18%, var(--surface)); } .pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; } .pe-loading { grid-column: 1 / -1; padding: 40px; text-align: center; font-size: 13px; color: var(--muted); } .pe-pair { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 6px; transition: border-color 120ms; } .pe-pair.pe-suspect { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 4%, var(--surface)); } .pe-pair.pe-singleton { border-color: var(--warn, #f59e0b); border-style: dashed; } .pe-pair.pe-pending { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 6%, var(--surface)); } .pe-pair-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 11.5px; flex-wrap: wrap; } .pe-pair-id { font-weight: 700; color: var(--primary); text-decoration: none; } .pe-pair-id:hover { text-decoration: underline; } .pe-pair-method { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } .pe-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; } .pe-tag-audit { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); color: var(--danger); border-color: var(--danger); } .pe-tag-ai { background: color-mix(in oklab, var(--primary) 14%, var(--surface)); color: var(--primary); border-color: var(--primary); } .pe-tag-dup { background: color-mix(in oklab, var(--warn, #f59e0b) 14%, var(--surface)); color: var(--warn, #f59e0b); border-color: var(--warn, #f59e0b); } .pe-tag-pending { background: color-mix(in oklab, var(--primary) 14%, var(--surface)); color: var(--primary); border-color: var(--primary); } .pe-pair-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .pe-tile { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-alt); cursor: grab; overflow: hidden; user-select: none; transition: transform 100ms, border-color 100ms; } .pe-tile:active { cursor: grabbing; } .pe-tile:hover { border-color: var(--primary); transform: scale(1.02); } .pe-tile.pe-dragging { opacity: .35; } .pe-tile.pe-drop-target { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent); } .pe-tile-empty { background: repeating-linear-gradient( 45deg, transparent, transparent 6px, color-mix(in oklab, var(--muted) 8%, transparent) 6px, color-mix(in oklab, var(--muted) 8%, transparent) 12px); border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; gap: 4px; cursor: default; } .pe-tile-empty-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); } .pe-tile-empty-hint { font-size: 10px; color: var(--muted); font-style: italic; } .pe-tile-loose { border-color: var(--danger); } .pe-tile img { width: 100%; height: 110px; object-fit: cover; display: block; background: #000; pointer-events: none; } .pe-tile-meta { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--surface); border-top: 1px solid var(--line); font-size: 10.5px; } .pe-tile-side { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--surface-alt); font-weight: 700; font-size: 9px; letter-spacing: .08em; color: var(--muted); flex-shrink: 0; } .pe-tile-name { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .pe-tile.pe-tile-dup { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 8%, var(--surface)); } .pe-tile-dup-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--warn, #f59e0b); color: white; font-size: 11px; font-weight: 700; flex-shrink: 0; } @media (max-width: 720px) { .pe-grid { grid-template-columns: 1fr; } .pe-toolbar { top: 0; flex-direction: column; align-items: stretch; } } /* Pair-editor v2: confirm-OK + swap + delete buttons + cascade modal */ .pe-pair-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--line); font-size: 11px; cursor: pointer; color: var(--ink-soft); transition: background 100ms, color 100ms, transform 100ms; line-height: 1; } .pe-pair-btn:hover { background: var(--primary); color: white; transform: scale(1.1); } .pe-pair-btn:disabled { opacity: .4; cursor: wait; } .pe-confirm-btn:hover { background: var(--success); } .pe-tag-confirmed { background: color-mix(in oklab, var(--success) 14%, var(--surface)); color: var(--success); border-color: var(--success); } .pe-tile { position: relative; } .pe-tile-delete { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: white; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms, background 120ms; z-index: 5; display: inline-flex; align-items: center; justify-content: center; } .pe-tile:hover .pe-tile-delete { opacity: 1; } .pe-tile-delete:hover { background: var(--danger); } .pe-tile-delete:disabled { opacity: 0.4; cursor: wait; } /* Cascade-shift modal preview table */ .pe-cs-table-wrap { max-height: 360px; overflow-y: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); } .pe-cs-table { width: 100%; border-collapse: collapse; font-size: 12px; } .pe-cs-table th { position: sticky; top: 0; background: var(--surface-alt); text-align: left; padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); } .pe-cs-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .pe-cs-table tr:last-child td { border-bottom: none; } .pe-cs-name { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-alt); padding: 1px 5px; border-radius: 3px; color: var(--ink-soft); } .pe-cs-new { background: color-mix(in oklab, var(--success) 16%, var(--surface)); color: var(--success); } .pe-cs-arrow { color: var(--muted); text-align: center; width: 24px; } /* "← shift" button — wider than the others (it has a label) */ .pe-shift-btn { width: auto !important; padding: 0 8px !important; border-radius: 4px !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .02em; background: color-mix(in oklab, var(--warn, #f59e0b) 10%, var(--surface)) !important; border-color: color-mix(in oklab, var(--warn, #f59e0b) 50%, var(--line)) !important; color: var(--warn, #f59e0b) !important; } .pe-shift-btn:hover { background: var(--warn, #f59e0b) !important; color: white !important; } /* Flash animation when a pair card is updated in place. Brief green border + background pulse so the user can SEE which card just changed without losing scroll position. */ @keyframes pe-flash-changed { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 80%, transparent), 0 0 0 0 color-mix(in oklab, var(--success) 30%, transparent); } 20% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 70%, transparent), 0 0 0 14px color-mix(in oklab, var(--success) 18%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 0%, transparent), 0 0 0 0 color-mix(in oklab, var(--success) 0%, transparent); } } .pe-pair-flash-changed { animation: pe-flash-changed 1.4s ease-out; position: relative; z-index: 1; } /* Selected pair (click on the card body to toggle) — blue ring, stays even after re-render. Cursor hint on the body to discover the click affordance. */ .pe-pair { cursor: pointer; } .pe-pair.pe-selected { outline: 3px solid var(--primary); outline-offset: -1px; background: color-mix(in oklab, var(--primary) 5%, var(--surface)); } .pe-pair-body, .pe-pair-head a, .pe-pair-head button, .pe-tile { cursor: auto; } .pe-tile { cursor: grab; } .pe-tile:active { cursor: grabbing; } .pe-pair-head a, .pe-pair-head button { cursor: pointer; } /* Floating selection toolbar — appears at bottom of viewport when ≥1 pair is selected. Sits above the page; doesn't push content. */ .pe-selection-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); z-index: 50; font-size: 13px; animation: pe-selection-bar-in .2s ease-out; } @keyframes pe-selection-bar-in { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } .pe-selection-count { padding: 4px 10px; background: var(--surface-alt); border-radius: 999px; font-size: 12px; } .pe-selection-count strong { color: var(--primary); } @media (max-width: 720px) { .pe-selection-bar { bottom: 8px; left: 8px; right: 8px; transform: none; border-radius: var(--radius); flex-wrap: wrap; justify-content: center; } @keyframes pe-selection-bar-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } /* Search box in the toolbar + tile-hit highlight */ .pe-search { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 12.5px; width: 220px; } .pe-search:focus { outline: 2px solid var(--primary); outline-offset: -1px; } .pe-tile.pe-search-hit { outline: 3px solid var(--primary); outline-offset: -1px; } /* Empty-slot picker modal (opened by clicking an empty BACK slot) */ .pe-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; padding: 4px; background: var(--surface-alt); border-radius: var(--radius-sm); } .pe-picker-tile { display: flex; flex-direction: column; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; transition: transform 100ms, border-color 100ms, box-shadow 100ms; text-align: left; } .pe-picker-tile:hover { border-color: var(--primary); transform: scale(1.04); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } .pe-picker-tile img { width: 100%; height: 90px; object-fit: cover; background: #000; display: block; } .pe-picker-tile-meta { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-top: 1px solid var(--line); font-size: 10px; } .pe-picker-tile-name { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .pe-picker-tile-tag { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--surface-alt); color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; } .pe-picker-tile-tag-orphan { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); color: var(--danger); } .pe-picker-tile.pe-picker-orphan { border-color: var(--danger); } /* ============================================================ Home page — featured note hero + pastel insight cards ============================================================ */ /* Hub top: stats grid (left) + featured specimen (right) */ .hub-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; margin-bottom: 22px; align-items: stretch; /* both columns share the tallest height so bottom edges line up. */ } .hub-top-stats { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; /* stretch to fill the grid cell so the map child can grow to match the right column. */ } .hub-top-stats .stats { /* Override the default 5/6-col stats grid; we want 2 cols inside the left column of hub-top so the 4 cards land in a tight 2x2 block. */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* World map fills the gap below the 2x2 stats grid in hub-top. Constrain its height so the left column doesn't stretch taller than the featured-note card on the right. */ .hub-top-map { padding: 12px 14px; display: flex; flex-direction: column; flex: 1; /* take all remaining vertical space in the column */ min-height: 220px; } .hub-top-map .world-map-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } .hub-top-map .world-svg { width: 100%; height: 100%; max-height: 460px; /* allow the map to grow taller so the left column reaches the bottom of the featured note card. The SVG keeps aspect via its own preserveAspectRatio. */ } @media (max-width: 980px) { .hub-top { grid-template-columns: 1fr; } .hub-top-map { min-height: 260px; } } /* Today's featured specimen — sits in the right column of hub-top. Image stacks above body (the column is narrower than full-width). */ .featured-note-card { display: grid; grid-template-columns: minmax(280px, 1.1fr) 1.4fr; gap: 0; margin-bottom: 22px; background: linear-gradient(135deg, color-mix(in oklab, hsl(20, 80%, 65%) 6%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid color-mix(in oklab, hsl(20, 80%, 65%) 26%, var(--line)); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } /* When inside hub-top (right column, narrower) the card is a single link element. Image stacks above body and stretches to fill any extra vertical space so the card's bottom edge lines up with the left column (stats grid + world map) at the bottom. */ .hub-top-featured { margin-bottom: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease; } .hub-top-featured:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18); } .hub-top-featured .featured-note-image { flex: 1; /* take all remaining vertical space */ min-height: 200px; max-height: none; /* no cap — let it grow to match the left column */ } .hub-top-featured .featured-note-image img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; } .hub-top-featured .featured-note-body { padding: 14px 18px; gap: 6px; flex-shrink: 0; /* body keeps natural height; image grows instead */ } /* Tighter font sizing so the snippet + story fit without overflowing the right column. The card is one click target so we don't need any underlined link text inside — kill all link decoration. */ .hub-top-featured, .hub-top-featured *, .hub-top-featured:hover, .hub-top-featured:hover * { text-decoration: none !important; } .hub-top-featured .featured-note-title { font-size: clamp(18px, 2.4vw, 24px); } .hub-top-featured .featured-note-meta { gap: 4px; } .hub-top-featured .featured-note-meta .hero-pill { font-size: 10.5px; padding: 2px 8px; } .hub-top-featured .featured-note-snippet { font-size: 12.5px; line-height: 1.5; } .hub-top-featured .featured-note-snippet p { margin: 0 0 4px; } .hub-top-featured .featured-note-snippet p:last-child { margin-bottom: 0; } .hub-top-featured .featured-note-story { margin-top: 4px; padding-top: 8px; border-top: 1px dashed color-mix(in oklab, hsl(20, 80%, 65%) 30%, var(--line)); } .hub-top-featured .featured-note-story-eyebrow { font-size: 9.5px; margin-bottom: 4px; } .hub-top-featured .featured-note-story-body { font-size: 12px; line-height: 1.5; } .hub-top-featured .featured-note-story-body p { margin: 0 0 6px; } .featured-note-image { display: block; background: var(--surface-alt); position: relative; min-height: 280px; max-height: 420px; overflow: hidden; text-decoration: none; } .featured-note-image img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; transition: transform 350ms cubic-bezier(.2, .8, .2, 1); } .featured-note-image:hover img { transform: scale(1.03); } .featured-note-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .featured-note-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(20, 70%, 50%); opacity: .8; } .featured-note-title { margin: 0; font-family: var(--font-display, var(--font-body)); font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1.15; color: var(--ink); } .featured-note-curr { font-size: 0.7em; color: var(--ink-soft); font-weight: 600; margin-left: 4px; } .featured-note-meta { display: flex; flex-wrap: wrap; gap: 6px; } .featured-note-meta .hero-pill-accent { background: color-mix(in oklab, hsl(20, 80%, 65%) 18%, var(--surface)); color: hsl(20, 70%, 35%); border-color: color-mix(in oklab, hsl(20, 80%, 65%) 40%, var(--line)); } .featured-note-snippet { font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .featured-note-snippet p { margin: 0 0 6px; } .featured-note-snippet p:last-child { margin-bottom: 0; } .featured-note-snippet strong { color: var(--ink); font-weight: 600; } .featured-note-story-wrap { margin-top: 4px; padding-top: 12px; border-top: 1px dashed color-mix(in oklab, hsl(20, 80%, 65%) 30%, var(--line)); } .featured-note-story-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .featured-note-story-body { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } .featured-note-story-body p { margin: 0 0 10px; } .featured-note-story-body p:last-child { margin-bottom: 0; } .featured-note-story-body strong { color: var(--ink); font-weight: 600; } .featured-note-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } @media (max-width: 720px) { .featured-note-card { grid-template-columns: 1fr; } .featured-note-image { max-height: 240px; min-height: 200px; } .featured-note-image img { min-height: 200px; } .featured-note-body { padding: 16px; } } /* Pastel insight cards — surface latent metadata in distinctive coloured tiles. 4 colours: mint, lavender, peach, sky. */ .insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; } .insight-card { padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid; display: flex; flex-direction: column; gap: 10px; min-height: 180px; box-shadow: var(--shadow-sm); } .insight-mint { background: color-mix(in oklab, var(--success) 10%, var(--surface)); border-color: color-mix(in oklab, var(--success) 28%, var(--line)); } .insight-lavender { background: color-mix(in oklab, hsl(260, 60%, 60%) 9%, var(--surface)); border-color: color-mix(in oklab, hsl(260, 60%, 60%) 28%, var(--line)); } .insight-peach { background: color-mix(in oklab, hsl(20, 80%, 65%) 9%, var(--surface)); border-color: color-mix(in oklab, hsl(20, 80%, 65%) 28%, var(--line)); } .insight-sky { background: color-mix(in oklab, var(--primary) 8%, var(--surface)); border-color: color-mix(in oklab, var(--primary) 28%, var(--line)); } .insight-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .insight-headline { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; } .insight-mint .insight-eyebrow { color: color-mix(in oklab, var(--success) 70%, var(--ink)); } .insight-lavender .insight-eyebrow { color: color-mix(in oklab, hsl(260, 50%, 45%) 70%, var(--ink)); } .insight-peach .insight-eyebrow { color: color-mix(in oklab, hsl(20, 70%, 45%) 70%, var(--ink)); } .insight-sky .insight-eyebrow { color: color-mix(in oklab, var(--primary) 70%, var(--ink)); } /* Stacked horizontal bar for materials breakdown */ .insight-bars { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); } .insight-bar-seg { display: block; height: 100%; min-width: 4px; transition: filter .2s; } .insight-bar-seg:hover { filter: brightness(1.08); } .insight-bar-seg[data-tone="0"] { background: var(--success); } .insight-bar-seg[data-tone="1"] { background: hsl(260, 60%, 60%); } .insight-bar-seg[data-tone="2"] { background: hsl(20, 80%, 65%); } .insight-bar-seg[data-tone="3"] { background: var(--primary); } .insight-bar-seg[data-tone="4"] { background: hsl(45, 80%, 60%); } .insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; } .insight-list li { display: flex; align-items: center; gap: 8px; } .insight-list li .muted { margin-left: auto; } .insight-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .insight-dot[data-tone="0"] { background: var(--success); } .insight-dot[data-tone="1"] { background: hsl(260, 60%, 60%); } .insight-dot[data-tone="2"] { background: hsl(20, 80%, 65%); } .insight-dot[data-tone="3"] { background: var(--primary); } .insight-dot[data-tone="4"] { background: hsl(45, 80%, 60%); } /* Top portraits leaderboard */ .insight-portraits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .insight-portrait-link { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); transition: background .12s; } .insight-portrait-link:hover { background: color-mix(in oklab, hsl(260, 60%, 60%) 14%, var(--surface)); } .insight-portrait-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-portrait-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-soft); } /* Themes chip cloud — chip size scales with count */ .insight-chip-cloud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .insight-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in oklab, hsl(20, 80%, 65%) 24%, var(--line)); color: var(--ink); line-height: 1.3; } .insight-chip-count { display: inline-block; padding: 0 6px; background: color-mix(in oklab, hsl(20, 80%, 65%) 14%, var(--surface)); border-radius: 999px; font-size: 10px; font-weight: 700; color: hsl(20, 70%, 35%); } /* Special-categories card uses a 2x2 mini-stat grid */ .insight-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .insight-stat { display: flex; flex-direction: column; gap: 2px; } .insight-stat-num { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; } .insight-stat-lbl { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; } /* "Show N more countries" disclosure */ .country-bars-more { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; } .country-bars-more > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--primary); padding: 6px 8px; border-radius: var(--radius-sm); transition: background .12s; } .country-bars-more > summary::marker { display: none; } .country-bars-more > summary::-webkit-details-marker { display: none; } .country-bars-more > summary::before { content: "▸ "; font-size: 10px; transition: transform .15s; display: inline-block; } .country-bars-more[open] > summary::before { content: "▾ "; } .country-bars-more > summary:hover { background: color-mix(in oklab, var(--primary) 8%, var(--surface)); } .country-bars-more .country-bars { margin-top: 8px; } /* ============================================================ Note detail page — magazine layout ============================================================ */ /* ---- Header strip ---- */ .note-magazine-header { margin-bottom: 18px; } .nmh-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .nmh-crumb { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .nmh-crumb a { color: var(--ink-soft); text-decoration: none; } .nmh-crumb a:hover { color: var(--primary); } .nmh-crumb span { color: var(--muted); } .nmh-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .nmh-concerns-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: color-mix(in oklab, var(--warn, #f59e0b) 14%, var(--surface)); border: 1px solid color-mix(in oklab, var(--warn, #f59e0b) 30%, var(--line)); color: color-mix(in oklab, var(--warn, #f59e0b) 70%, var(--ink)); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; } .nmh-concerns-chip:hover { background: color-mix(in oklab, var(--warn, #f59e0b) 22%, var(--surface)); } .nmh-concerns-chip.is-clear { background: color-mix(in oklab, var(--success) 12%, var(--surface)); border-color: color-mix(in oklab, var(--success) 28%, var(--line)); color: color-mix(in oklab, var(--success) 70%, var(--ink)); cursor: default; } .nmh-chip-arrow { font-size: 10px; } .nmh-more-menu { position: relative; } .nmh-more-menu summary { list-style: none; } .nmh-more-menu summary::-webkit-details-marker { display: none; } .nmh-more-menu-body { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 5; } .nmh-more-menu-body button { width: 100%; text-align: left; } .nmh-title-block { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .nmh-flag { font-size: 56px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); } .nmh-title-text { min-width: 0; flex: 1; } .nmh-title { margin: 0; font-family: var(--font-display, var(--font-body)); font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; } .nmh-currency { font-size: 0.55em; color: var(--ink-soft); font-weight: 600; margin-left: 6px; } .nmh-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* ---- Concerns panel collapsed-by-default ---- */ .concerns-panel-collapsed { margin-bottom: 16px; animation: concerns-slide .25s ease-out; } @keyframes concerns-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Hero images ---- */ .note-hero-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .note-hero-figure { margin: 0; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .note-hero-figure figcaption { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12px; background: var(--surface); border-bottom: 1px solid var(--line); } .note-hero-figure .imgwrap { position: relative; background: #0a0a0a; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; } .note-hero-figure .imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .note-hero-figure .imgwrap .empty { position: relative; color: var(--muted); font-size: 13px; } @media (max-width: 720px) { .note-hero-images { grid-template-columns: 1fr; } .note-hero-figure .imgwrap { touch-action: pinch-zoom; } } .note-pair-chipstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; font-size: 12.5px; } /* ---- Anchor jump nav ---- */ .note-anchor-nav { position: fixed; right: 24px; top: 30%; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 10px 4px; box-shadow: var(--shadow-sm); z-index: 10; font-size: 11.5px; } .note-anchor-nav a { display: block; padding: 4px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); transition: background .12s, color .12s; white-space: nowrap; } .note-anchor-nav a:hover { background: var(--surface-alt); color: var(--ink); } .note-anchor-nav a.is-active { background: var(--primary); color: white; font-weight: 600; } @media (max-width: 1100px) { /* Above 720px but below 1100px: hide the nav (not enough space at the side). The user can scroll naturally. */ .note-anchor-nav { display: none; } } /* ---- Magazine info cards ---- */ .note-magazine { display: flex; flex-direction: column; gap: 18px; } .info-card { padding: 22px 26px; border-radius: var(--radius-lg); border: 1px solid; scroll-margin-top: 80px; /* so anchor-jump lands below the topbar */ } .info-card.insight-mint { background: color-mix(in oklab, var(--success) 8%, var(--surface)); border-color: color-mix(in oklab, var(--success) 24%, var(--line)); } .info-card.insight-lavender { background: color-mix(in oklab, hsl(260, 60%, 60%) 8%, var(--surface)); border-color: color-mix(in oklab, hsl(260, 60%, 60%) 24%, var(--line)); } .info-card.insight-peach { background: color-mix(in oklab, hsl(20, 80%, 65%) 8%, var(--surface)); border-color: color-mix(in oklab, hsl(20, 80%, 65%) 24%, var(--line)); } .info-card.insight-sky { background: color-mix(in oklab, var(--primary) 7%, var(--surface)); border-color: color-mix(in oklab, var(--primary) 24%, var(--line)); } .info-card.insight-history { background: var(--surface-alt); border-color: var(--line); } .info-card.info-card-power { background: var(--surface); border-color: var(--line); border-style: dashed; } .info-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent); } .info-card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .info-card.insight-mint .info-card-eyebrow { color: color-mix(in oklab, var(--success) 70%, var(--ink)); } .info-card.insight-lavender .info-card-eyebrow { color: color-mix(in oklab, hsl(260, 50%, 45%) 70%, var(--ink)); } .info-card.insight-peach .info-card-eyebrow { color: color-mix(in oklab, hsl(20, 70%, 45%) 70%, var(--ink)); } .info-card.insight-sky .info-card-eyebrow { color: color-mix(in oklab, var(--primary) 70%, var(--ink)); } .info-card-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; } .info-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; } .kv-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px dashed color-mix(in oklab, currentColor 10%, transparent); } .kv-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .kv-value { font-size: 14px; color: var(--ink); line-height: 1.4; } .kv-value.kv-empty { color: var(--muted); font-style: italic; } .info-card-prose { margin-top: 12px; padding-top: 12px; border-top: 1px dashed color-mix(in oklab, currentColor 10%, transparent); font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .info-card-prose p { margin: 0 0 8px; } .info-card-prose p:last-child { margin-bottom: 0; } .info-card-prose strong { color: var(--ink); } .info-card-divider { height: 1px; background: color-mix(in oklab, currentColor 12%, transparent); margin: 18px 0 14px; } .info-card-callout { display: inline-block; padding: 8px 14px; background: color-mix(in oklab, hsl(20, 80%, 65%) 18%, var(--surface)); border-left: 3px solid hsl(20, 80%, 55%); border-radius: var(--radius-sm); font-size: 13.5px; margin: 0 0 12px; } .info-card-fold { margin-top: 12px; border-top: 1px dashed color-mix(in oklab, currentColor 10%, transparent); padding-top: 8px; } .info-card-fold > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--primary); padding: 6px 0; list-style: none; } .info-card-fold > summary::-webkit-details-marker { display: none; } .info-card-fold > summary::before { content: "▸ "; font-size: 10px; display: inline-block; transition: transform .15s; } .info-card-fold[open] > summary::before { content: "▾ "; } .valuation-headline { font-family: var(--font-display, var(--font-body)); font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; } .valuation-headline small { font-size: 0.5em; color: var(--ink-soft); font-weight: 600; } .valuation-pl { font-size: 13px; color: var(--ink-soft); margin-top: 6px; } /* ---- Continent map (the "Where in the world" card) ---- */ .continent-map { background: var(--surface); border-radius: var(--radius-lg); padding: 14px; border: 1px solid color-mix(in oklab, hsl(20, 80%, 65%) 18%, var(--line)); display: flex; align-items: center; justify-content: center; min-height: 220px; } .continent-map .continent-svg { width: 100%; max-height: 360px; display: block; } .continent-svg .cm-other { fill: color-mix(in oklab, var(--muted) 22%, var(--surface-alt)); stroke: color-mix(in oklab, var(--muted) 35%, var(--surface)); stroke-width: 0.5; vector-effect: non-scaling-stroke; transition: fill .2s; } .continent-svg .cm-other:hover { fill: color-mix(in oklab, var(--muted) 38%, var(--surface-alt)); } .continent-svg .cm-target { fill: hsl(20, 80%, 55%); stroke: white; stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 8px color-mix(in oklab, hsl(20, 80%, 55%) 50%, transparent)); } .continent-caption { margin-top: 10px; font-size: 12.5px; text-align: center; } .continent-map-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; } /* ---- Story section ---- */ .story-wrap { margin-top: 12px; } .story-rendered { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); } .story-rendered p { margin: 0 0 12px; } .story-rendered p:last-child { margin-bottom: 0; } .story-rendered strong { color: var(--ink); } .story-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; } /* ---- Edit modal ---- */ .edit-modal-root { position: fixed; inset: 0; z-index: 100; } .edit-modal-backdrop { position: absolute; inset: 0; background: rgba(13, 27, 42, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .edit-modal { position: absolute; inset: 0; margin: auto; width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; animation: edit-modal-in .2s ease-out; } @keyframes edit-modal-in { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .edit-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; } .edit-modal-head h2 { margin: 0; font-size: 18px; } #save-form { flex: 1; overflow-y: auto; padding: 18px 22px; } .edit-section { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); } .edit-section > summary { list-style: none; padding: 12px 16px; font-weight: 600; cursor: pointer; border-radius: var(--radius); display: flex; align-items: center; gap: 8px; } .edit-section > summary::-webkit-details-marker { display: none; } .edit-section > summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform .15s; } .edit-section[open] > summary::before { transform: rotate(90deg); } .edit-section[open] > summary { border-bottom: 1px solid var(--line); } .edit-section .fields-grid, .edit-section .fields-block { padding: 14px 16px; } .edit-modal-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface); } @media (max-width: 720px) { .edit-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .edit-modal-head { padding: 12px 16px; } #save-form { padding: 12px 16px; } .edit-modal-foot { padding: 12px 16px; } } /* ============================================================ Wishlist — "Countries to hunt" section ============================================================ */ .cth-section { margin-top: 28px; } .cth-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .cth-filter-lbl input { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 13px; width: 240px; max-width: 100%; } /* Continent tabs row */ .cth-continent-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .cth-tab { padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-soft); transition: background .12s, color .12s; } .cth-tab:hover { background: var(--surface-alt); color: var(--ink); } .cth-tab.is-active { background: var(--primary); color: white; border-color: var(--primary); } .cth-tab.is-active .muted { color: rgba(255,255,255,.7); } /* Continent block */ .cth-continent-block { margin-bottom: 24px; } .cth-continent-title { font-size: 16px; margin: 0 0 10px; color: var(--ink-soft); font-weight: 600; letter-spacing: .02em; } .cth-continent-title .muted { font-size: 12px; font-weight: 400; margin-left: 6px; } /* Country card grid */ .cth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .cth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .12s, transform .12s; } .cth-card:hover { border-color: var(--primary); } .cth-card[open] { border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); background: color-mix(in oklab, var(--primary) 4%, var(--surface)); } .cth-card[data-cached="1"] { border-color: color-mix(in oklab, var(--success) 24%, var(--line)); } .cth-card-summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; } .cth-card-summary::-webkit-details-marker { display: none; } .cth-card-flag { font-size: 18px; flex-shrink: 0; } .cth-card-name { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cth-cached-badge { display: inline-flex; align-items: center; padding: 1px 6px; background: color-mix(in oklab, var(--success) 14%, var(--surface)); color: color-mix(in oklab, var(--success) 70%, var(--ink)); border: 1px solid color-mix(in oklab, var(--success) 30%, var(--line)); border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .cth-card-arrow { color: var(--muted); font-size: 11px; transition: transform .15s; } .cth-card[open] .cth-card-arrow { transform: rotate(180deg); } .cth-card-body { padding: 4px 12px 12px; border-top: 1px dashed var(--line); } .cth-card-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; } .cth-card-content { margin-top: 4px; } .cth-ref-body { font-size: 13px; line-height: 1.55; color: var(--ink-soft); } .cth-ref-body p { margin: 0 0 8px; } .cth-ref-body p:last-child { margin-bottom: 0; } .cth-ref-body strong { color: var(--ink); font-weight: 600; background: color-mix(in oklab, var(--primary) 10%, transparent); padding: 0 3px; border-radius: 3px; } .cth-ref-meta { font-size: 10.5px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); } @media (max-width: 720px) { .cth-grid { grid-template-columns: 1fr; } .cth-header { align-items: stretch; } .cth-filter-lbl input { width: 100%; } } /* ============================================================ AI activity pill stack — top-right floating non-blocking pills for short AI calls (country reference, story, catalogue). ============================================================ */ .bn-ai-stack { position: fixed; top: 64px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: calc(100vw - 32px); } .bn-ai-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.15); font-size: 12.5px; font-weight: 500; color: var(--ink); max-width: 320px; animation: bn-ai-pill-in .25s ease-out; transition: opacity .3s, transform .3s; } @keyframes bn-ai-pill-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .bn-ai-pill-fade { opacity: 0; transform: translateX(20px); } .bn-ai-pill-spinner { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; font-size: 12px; font-weight: 700; } .bn-ai-pill-running .bn-ai-pill-spinner { border: 2px solid color-mix(in oklab, var(--primary) 30%, var(--surface)); border-top-color: var(--primary); border-radius: 50%; animation: bn-ai-spin 0.7s linear infinite; } @keyframes bn-ai-spin { to { transform: rotate(360deg); } } .bn-ai-pill-running { border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 6%, var(--surface)) 0%, var(--surface) 80%); } .bn-ai-pill-ok { border-color: color-mix(in oklab, var(--success) 35%, var(--line)); background: color-mix(in oklab, var(--success) 8%, var(--surface)); color: color-mix(in oklab, var(--success) 70%, var(--ink)); } .bn-ai-pill-ok .bn-ai-pill-spinner { background: var(--success); color: white; border-radius: 50%; } .bn-ai-pill-error { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); background: color-mix(in oklab, var(--danger) 8%, var(--surface)); color: color-mix(in oklab, var(--danger) 70%, var(--ink)); } .bn-ai-pill-error .bn-ai-pill-spinner { background: var(--danger); color: white; border-radius: 50%; } .bn-ai-pill-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .bn-ai-stack { top: 56px; right: 8px; } .bn-ai-pill { max-width: calc(100vw - 24px); font-size: 11.5px; padding: 6px 12px 6px 10px; } } /* ============================================================ Catalogue checklist — used in wishlist country cards AND encyclopedia country cards. ============================================================ */ .cth-cat-section { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); } .cth-cat-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .cth-cat-header strong { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .cth-cat-body { font-size: 13px; } .cat-summary { padding: 10px 14px; background: color-mix(in oklab, var(--primary) 7%, var(--surface)); border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--line)); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; } .cat-currency { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .cat-cur-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: color-mix(in oklab, var(--primary) 6%, var(--surface)); border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .cat-cur-name { font-weight: 700; color: var(--ink); } .cat-iso { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface); padding: 1px 6px; border-radius: 3px; color: var(--ink-soft); border: 1px solid var(--line); } .cat-cur-period { font-size: 11.5px; color: var(--muted); } .cat-cur-progress { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; background: var(--surface); border-radius: 999px; color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--line)); } .cat-series { border-top: 1px solid var(--line); } .cat-series:first-of-type { border-top: 0; } .cat-series > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 12.5px; } .cat-series > summary::-webkit-details-marker { display: none; } .cat-series > summary::before { content: "▸"; color: var(--muted); font-size: 10px; transition: transform .15s; } .cat-series[open] > summary::before { transform: rotate(90deg); } .cat-ser-name { font-weight: 600; color: var(--ink); } .cat-ser-issued { font-size: 11px; color: var(--muted); font-style: italic; } .cat-ser-progress { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); } .cat-notes { list-style: none; margin: 0; padding: 0 12px 8px 36px; display: flex; flex-direction: column; gap: 4px; } .cat-note { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12.5px; flex-wrap: wrap; } .cat-note.is-owned { background: color-mix(in oklab, var(--success) 7%, var(--surface)); } .cat-note.is-missing { color: var(--ink-soft); } .cat-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0; font-weight: 700; } .cat-note.is-owned .cat-mark { color: var(--success); } .cat-note.is-missing .cat-mark { color: var(--muted); } .cat-denom { font-weight: 600; min-width: 90px; color: var(--ink); } .cat-note.is-missing .cat-denom { color: var(--ink-soft); } .cat-pick { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-alt); padding: 1px 6px; border-radius: 3px; color: var(--ink-soft); } .cat-pick-empty { opacity: .55; font-style: italic; } .cat-subject { font-size: 12px; color: var(--ink-soft); flex: 1; min-width: 100px; } .cat-notable { font-size: 11px; font-style: italic; } .cat-links { font-size: 11px; margin-left: auto; } .cat-links a { color: var(--primary); text-decoration: none; margin-left: 4px; font-weight: 600; } .cat-links a:hover { text-decoration: underline; } /* ============================================================ Encyclopedia page ============================================================ */ .enc-section { margin-top: 8px; } .enc-toolbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 12px 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .enc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .enc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .12s; } .enc-card:hover { border-color: var(--primary); } .enc-card[open] { border-color: color-mix(in oklab, var(--primary) 28%, var(--line)); background: color-mix(in oklab, var(--primary) 4%, var(--surface)); } .enc-card[data-cataloged="1"][data-owned="0"] { border-color: color-mix(in oklab, var(--warn, #f59e0b) 24%, var(--line)); } .enc-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13px; } .enc-card-head::-webkit-details-marker { display: none; } .enc-card-flag { font-size: 20px; flex-shrink: 0; } .enc-card-name { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enc-card-stats { display: flex; gap: 6px; align-items: center; } .enc-pill { padding: 2px 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); } .enc-pill-owned { background: color-mix(in oklab, var(--success) 12%, var(--surface)); color: color-mix(in oklab, var(--success) 70%, var(--ink)); border-color: color-mix(in oklab, var(--success) 30%, var(--line)); } .enc-pill-some { background: color-mix(in oklab, var(--primary) 12%, var(--surface)); color: color-mix(in oklab, var(--primary) 70%, var(--ink)); border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); } .enc-card-arrow { color: var(--muted); font-size: 11px; transition: transform .15s; } .enc-card[open] .enc-card-arrow { transform: rotate(180deg); } .enc-card-body { padding: 4px 14px 14px; border-top: 1px dashed var(--line); } .enc-progress-track { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; margin-top: 10px; } .enc-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: 999px; transition: width .35s; } .enc-card-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; } .enc-cat-body { margin-top: 8px; } @media (max-width: 720px) { .enc-grid { grid-template-columns: 1fr; } .enc-toolbar { flex-direction: column; align-items: stretch; } .enc-toolbar .pe-search { width: 100%; } }