/* =========================================================================== Best Pair — Au Pair Ranker Warm cream + terracotta accent, Manrope (UI) + Newsreader (display italic) =========================================================================== */ :root { /* color — the default (warm cream) palette. Any app can recolor the whole shared chrome by overriding these tokens via window.BESTX.theme in its config.jsx (the shell applies them to before paint). See cruises/config.jsx for the papery-blue theme. */ --bg: #f4ede2; --bg-deep: #ebe2d2; --panel: #fdfaf4; --panel-2: #f9f4ea; --line: #e4dccb; --line-2: #d8ceb8; --ink: #1a1612; --ink-2: #3c352c; --muted: #7d7363; --muted-2: #a89e8d; --accent: oklch(0.62 0.14 40); /* terracotta */ --accent-soft: oklch(0.62 0.14 40 / 0.12); --accent-deep: oklch(0.48 0.14 40); --accent-ink: oklch(0.32 0.10 40); --pos: oklch(0.55 0.11 145); --pos-soft: oklch(0.55 0.11 145 / 0.12); --neg: oklch(0.55 0.17 25); --neg-soft: oklch(0.55 0.17 25 / 0.10); --shadow-sm: 0 1px 2px rgba(35, 25, 10, 0.05); --shadow-md: 0 2px 8px rgba(35, 25, 10, 0.06), 0 1px 2px rgba(35, 25, 10, 0.04); --shadow-lg: 0 12px 28px -8px rgba(35, 25, 10, 0.18), 0 4px 10px rgba(35, 25, 10, 0.08); --radius: 10px; --radius-lg: 16px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Manrope', -apple-system, system-ui, sans-serif; font-size: 14px; line-height: 1.45; background: var(--bg); color: var(--ink); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; } button { font: inherit; cursor: pointer; } input, select { font: inherit; color: inherit; } .serif { font-family: 'Newsreader', Georgia, serif; font-style: italic; } .muted { color: var(--muted); } .dot { color: var(--muted-2); margin: 0 4px; } em { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; color: var(--ink); } /* ===================== HEADER ===================== */ .hdr { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 14px 22px; /* translucent --bg so the header follows the app's theme (color-mix keeps the 0.92 alpha for the backdrop blur). */ background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: 0.5px; } .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .brand-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .hdr-stats { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .hdr-stats strong { color: var(--ink); font-weight: 700; } .hdr-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .search { width: 240px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; } .search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .btn { padding: 7px 12px; font-size: 13px; font-weight: 500; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; transition: background .12s, border-color .12s, transform .05s; } .btn:hover { background: var(--bg-deep); border-color: var(--line-2); } .btn:active { transform: translateY(1px); } .btn-ghost { background: transparent; } /* ---- active preset indicator (header) ---- */ .active-preset { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .active-preset.modified { background: oklch(0.92 0.05 80 / 0.5); color: oklch(0.40 0.10 80); } .ap-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg); } .ap-modified { font-size: 10.5px; font-weight: 500; opacity: 0.75; font-style: italic; } /* ---- presets menu (header) ---- */ .presets-wrap { position: relative; display: flex; gap: 6px; } .presets-btn { display: inline-flex; align-items: center; gap: 4px; } .presets-btn.open { background: var(--bg-deep); border-color: var(--line-2); } .caret { color: var(--muted-2); font-size: 10px; line-height: 1; } .save-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.65 0.16 80); margin-right: 2px; vertical-align: middle; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .presets-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 320px; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; } .presets-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 8px; border-bottom: 1px solid var(--line); } .presets-title { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink); } .presets-count { font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .presets-list { max-height: 280px; overflow-y: auto; padding: 4px; } .presets-list::-webkit-scrollbar { width: 6px; } .presets-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; } .presets-empty { padding: 20px 14px; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .preset-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; border-radius: 6px; transition: background .1s; } .preset-row:hover { background: var(--bg-deep); } .preset-row.active { background: var(--accent-soft); } .preset-row.active:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .preset-load { flex: 1; min-width: 0; text-align: left; background: transparent; border: none; padding: 6px 4px; color: var(--ink); display: flex; flex-direction: column; gap: 1px; border-radius: 4px; } .preset-name { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preset-row.active .preset-name { color: var(--accent-deep); } .preset-meta { font-size: 11px; color: var(--muted); } .preset-rename-input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; font-weight: 600; background: var(--bg); border: 1px solid var(--accent); border-radius: 5px; outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .preset-actions { display: flex; gap: 1px; opacity: 0; transition: opacity .12s; } .preset-row:hover .preset-actions, .preset-row.active .preset-actions { opacity: 1; } .preset-act { width: 22px; height: 22px; padding: 0; background: transparent; border: none; color: var(--muted-2); font-size: 12px; line-height: 1; border-radius: 4px; } .preset-act:hover { background: var(--bg); color: var(--ink); } .preset-del:hover { background: var(--neg-soft); color: var(--neg); } .presets-foot { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel-2); } .preset-name-input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; outline: none; transition: border-color .12s; } .preset-name-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .presets-save { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; } .presets-save:hover { background: var(--ink-2); border-color: var(--ink-2); } .presets-save:disabled { background: var(--line-2); border-color: var(--line-2); color: var(--muted-2); cursor: not-allowed; } /* ===================== LAYOUT ===================== */ .app { min-height: 100vh; } .layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0; align-items: start; } @media (max-width: 880px) { .layout { grid-template-columns: 1fr; } .rail { position: relative; top: 0; max-height: none; } } .rail { padding: 20px 18px 60px; border-right: 1px solid var(--line); background: var(--bg); position: sticky; top: 65px; max-height: calc(100vh - 65px); overflow-y: auto; } .rail::-webkit-scrollbar { width: 8px; } .rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; } .results { padding: 20px 24px 80px; min-width: 0; } .results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .rh-title { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-style: italic; font-size: 32px; margin: 0; letter-spacing: -0.02em; color: var(--ink); } .rh-sub { font-size: 13px; color: var(--muted); margin-top: 4px; } .rh-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .leg-pos { color: var(--pos); font-weight: 600; } .leg-neg { color: var(--neg); font-weight: 600; } /* Service filter chips (All / GoAuPair / CulturalCare) */ .svc-filter { display: flex; gap: 4px; align-items: center; flex-shrink: 0; flex-wrap: wrap; } .svc-btn { padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; white-space: nowrap; } .svc-btn:hover { background: var(--bg-deep); color: var(--ink-2); } .svc-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .svc-btn-gap.active { background: oklch(0.40 0.10 140); border-color: oklch(0.40 0.10 140); color: #fff; } .svc-btn-cc.active { background: oklch(0.40 0.10 240); border-color: oklch(0.40 0.10 240); color: #fff; } .svc-btn-apc.active { background: oklch(0.40 0.10 25); border-color: oklch(0.40 0.10 25); color: #fff; } .svc-btn-new.active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .svc-btn-fav.active { background: #c8901a; border-color: #c8901a; color: #fff; } /* "Saved by" selector (favorites view) */ .saved-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); } .saved-by select { font: inherit; font-size: 12px; color: var(--ink-2); border: none; background: transparent; cursor: pointer; padding: 0 2px; } /* Inactive-au-pair toggle */ .inactive-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); } .inactive-toggle input { margin: 0; cursor: pointer; } .inactive-toggle:hover { color: var(--ink-2); border-color: var(--line-2); } /* View toggle (expanded ↔ compact) */ .view-toggle { display: flex; gap: 2px; padding: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; } .vt-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: 5px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .vt-btn:hover { background: var(--bg); color: var(--ink-2); } .vt-btn.active { background: var(--bg); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* ===================== COMPACT GRID VIEW ===================== */ .cards-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .cards-compact.cards-stale { opacity: 0.6; transition: opacity .15s; } .apc-tile { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .1s; } .apc-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .apc-tile.svc-culturalcare { border-top: 3px solid oklch(0.55 0.14 240); } .apc-tile.svc-goaupair { border-top: 3px solid oklch(0.52 0.12 140); } .apc-tile.svc-aupaircare { border-top: 3px solid oklch(0.55 0.13 25); } .apc-tile-photo { position: relative; width: 100%; aspect-ratio: 3/4; background: var(--bg-deep); overflow: hidden; } .apc-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .apc-tile-photo img.broken { opacity: 0; } .apc-tile-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.45) 100%); pointer-events: none; } .apc-tile-score { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: var(--bg); color: var(--muted); } .apc-tile.pos .apc-tile-score { background: var(--pos-soft); color: var(--pos); } .apc-tile.neg .apc-tile-score { background: var(--neg-soft); color: var(--neg); } .apc-tile-rank { position: absolute; top: 6px; left: 6px; z-index: 1; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.5); } .apc-tile-new { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 8px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 3px; background: var(--accent); color: #fff; } .apc-tile-info { padding: 7px 8px 8px; } .apc-tile-name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apc-tile-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-top: 2px; flex-wrap: wrap; } .apc-tile-svc { font-size: 8px; font-weight: 800; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px; margin-left: auto; } /* ===================== RULE EDITOR (shared) ===================== */ .re-section { margin-top: 6px; margin-bottom: 10px; } .re-section:first-child { margin-top: 0; } .re-section + .re-section { margin-top: 26px; } .re-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4px; } .re-kicker { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; } .re-title { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: 24px; margin: 2px 0 0; letter-spacing: -0.01em; } .re-count { font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-weight: 600; } .re-section-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .empty-soft { font-size: 12.5px; color: var(--muted); background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 12px 14px; } /* ===== shared form pickers ===== */ .picker { font-size: 13px; padding: 5px 9px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; outline: none; transition: border-color .12s; } .picker:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .picker-op { background: var(--panel-2); } .picker-num { width: 88px; } .op-static { font-size: 13px; color: var(--muted-2); padding: 5px 0; } .chip-picker { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0; } .chip-opt { padding: 4px 10px; font-size: 12px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; transition: all .12s; } .chip-opt:hover { border-color: var(--line-2); color: var(--ink-2); } .chip-opt.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } /* ===== weight slider ===== */ .weight { display: flex; flex-direction: column; gap: 4px; } .weight-row { display: flex; align-items: center; gap: 6px; } .bump { width: 24px; height: 24px; font-size: 14px; line-height: 1; background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; transition: background .1s; } .bump:hover { background: var(--bg-deep); } .bump:disabled { opacity: 0.4; cursor: not-allowed; } .weight-val { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--muted); } .weight-val.pos { color: var(--pos); } .weight-val.neg { color: var(--neg); } .weight-label { font-size: 11.5px; color: var(--muted-2); margin-left: 2px; } .weight-slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--neg-soft) 0%, var(--line) 50%, var(--pos-soft) 100%); border-radius: 2px; outline: none; } .weight-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); cursor: grab; box-shadow: var(--shadow-sm); } .weight-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); cursor: grab; } .weight-disabled { font-size: 11px; color: var(--muted-2); font-style: italic; padding: 6px 0; } /* ===== tiers editor ===== */ .tiers { display: flex; flex-direction: column; gap: 10px; } .tiers-hist { position: relative; height: 56px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px 18px; display: flex; align-items: flex-end; gap: 2px; } .hist-bar { flex: 1; min-height: 1px; background: var(--line-2); border-radius: 1px; transition: background .12s; } .tier-marker { position: absolute; top: 4px; bottom: 4px; transform: translateX(-50%); pointer-events: none; } .tier-pin { width: 2px; height: 100%; background: var(--accent); opacity: 0.6; border-radius: 1px; } .tier-tag { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--ink); color: var(--bg); font-variant-numeric: tabular-nums; } .tier-tag.pos { background: var(--pos); } .tier-tag.neg { background: var(--neg); } .tiers-rows { display: flex; flex-direction: column; gap: 4px; } .tier-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; } .tier-when, .tier-then { color: var(--muted-2); font-size: 11.5px; } .tier-pts-grp { display: flex; align-items: center; gap: 3px; margin-left: auto; } .tier-pts { min-width: 32px; text-align: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .tier-pts.pos { color: var(--pos); } .tier-pts.neg { color: var(--neg); } .tier-del { width: 22px; height: 22px; padding: 0; background: transparent; color: var(--muted-2); border: none; font-size: 14px; line-height: 1; border-radius: 4px; } .tier-del:hover { color: var(--neg); background: var(--neg-soft); } .tier-add { align-self: flex-start; padding: 4px 10px; font-size: 12px; background: transparent; border: 1px dashed var(--line-2); color: var(--muted); border-radius: 6px; } .tier-add:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); } /* ===== Require toggle (used by both variants) ===== */ .require-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: 12px; color: var(--muted); } .require-toggle input { display: none; } .rt-track { width: 30px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; } .rt-dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); box-shadow: var(--shadow-sm); transition: left .15s; } .require-toggle.on .rt-track { background: var(--accent); } .require-toggle.on .rt-dot { left: 14px; } .require-toggle.on .rt-label { color: var(--accent-deep); font-weight: 600; } /* ===================== VARIANT A — cards ===================== */ .re-a-list { display: flex; flex-direction: column; gap: 10px; } .rule-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-sm); transition: opacity .15s, border-color .15s; } .rule-card.off { opacity: 0.45; } .rule-card.required { border-color: var(--accent); background: linear-gradient(to bottom, var(--accent-soft), var(--panel) 30%); } .rule-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; } .rule-toggle { display: inline-flex; align-items: center; cursor: pointer; } .rule-toggle input { display: none; } .rule-toggle-track { width: 16px; height: 16px; background: var(--panel-2); border: 1.5px solid var(--line-2); border-radius: 4px; position: relative; transition: all .12s; } .rule-toggle input:checked + .rule-toggle-track { background: var(--ink); border-color: var(--ink); } .rule-toggle input:checked + .rule-toggle-track::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: 2px solid var(--bg); border-top: 0; border-left: 0; transform: rotate(45deg); } .rule-label { font-weight: 600; font-size: 13.5px; color: var(--ink); letter-spacing: -0.005em; } .rule-meta { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rule-meta strong { color: var(--ink-2); font-weight: 600; } .rule-meta-bar { display: inline-block; flex: 1; max-width: 80px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; } .rule-meta-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .rule-actions { display: flex; gap: 2px; } .ico { width: 22px; height: 22px; padding: 0; background: transparent; border: none; color: var(--muted-2); border-radius: 4px; font-size: 12px; line-height: 1; } .ico:hover { background: var(--bg-deep); color: var(--ink-2); } .ico-del:hover { color: var(--neg); background: var(--neg-soft); } .rule-body { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; } .rule-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rule-when { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .rule-row-value { padding-left: 30px; } .rule-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 8px; gap: 12px; } .rule-weight { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .rule-weight .weight { flex: 1; } .re-a-add { margin-top: 14px; width: 100%; padding: 10px; background: transparent; border: 1px dashed var(--line-2); color: var(--muted); border-radius: var(--radius); font-weight: 500; font-size: 13px; transition: all .12s; } .re-a-add:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); } /* ===================== VARIANT B — sentence rows ===================== */ .re-b-table { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .rb-row { background: var(--panel); transition: background .12s; } .rb-row.off { opacity: 0.45; } .rb-row.required { background: linear-gradient(to right, var(--accent-soft), var(--panel) 60%); } .rb-row.open { background: var(--panel-2); } .rb-main { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; } .rb-row:hover .rb-main { background: rgba(0,0,0,0.015); } .rb-toggle { display: inline-flex; align-items: center; cursor: pointer; } .rb-toggle input { display: none; } .rb-toggle-track { width: 14px; height: 14px; background: var(--panel-2); border: 1.5px solid var(--line-2); border-radius: 4px; position: relative; } .rb-toggle input:checked + .rb-toggle-track { background: var(--ink); border-color: var(--ink); } .rb-toggle input:checked + .rb-toggle-track::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 7px; border: 2px solid var(--bg); border-top: 0; border-left: 0; transform: rotate(45deg); } .rb-sentence { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; flex-wrap: wrap; } .rb-when { font-size: 10.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .rb-field { font-weight: 600; color: var(--ink); /* Wrap long field labels within the sentence column instead of overflowing into the +/- weight control (e.g. cruise labels like "kids can sail (not adults-only)"). Short labels still sit on one line. */ white-space: normal; overflow-wrap: anywhere; min-width: 0; } .rb-op { color: var(--muted); font-size: 12.5px; } .rb-pill { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-pill-empty { background: var(--panel-2); color: var(--muted-2); font-style: italic; font-weight: 400; } .rb-weight { display: flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); } .rb-weight.pos { border-color: oklch(0.55 0.11 145 / 0.3); background: var(--pos-soft); } .rb-weight.neg { border-color: oklch(0.55 0.17 25 / 0.3); background: var(--neg-soft); } .rb-bump { width: 18px; height: 18px; padding: 0; background: transparent; border: none; color: var(--muted); font-size: 12px; line-height: 1; } .rb-bump:hover { color: var(--ink); } .rb-weight-num { min-width: 30px; text-align: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .rb-weight.pos .rb-weight-num { color: var(--pos); } .rb-weight.neg .rb-weight-num { color: var(--neg); } .rb-weight.zero .rb-weight-num { color: var(--muted-2); } .rb-match { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 64px; } .rb-match-pct { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; } .rb-match-denom { font-weight: 400; color: var(--muted-2); } .rb-match-bar { width: 50px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; } .rb-match-bar div { height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s; } /* Hard-filter rows: show pass count + excluded count */ .rb-match-filter { min-width: 72px; } .rb-match-pass { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .rb-match-excl { font-size: 10.5px; font-weight: 600; color: var(--neg); font-variant-numeric: tabular-nums; } .rule-meta-excl { color: var(--neg); font-weight: 600; } /* Service chips inside rule editor rows */ .re-svc-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 5px; border-radius: 4px; vertical-align: middle; line-height: 1; white-space: nowrap; } .re-svc-count { font-weight: 700; letter-spacing: 0; opacity: 0.85; } /* Service chips inline with field name */ .rb-field-svcs { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: middle; } /* Service split row below match count */ .rb-match-svc-split { display: flex; gap: 3px; margin-top: 3px; flex-wrap: wrap; } /* Ignored rule state */ .rb-match-ignored { min-width: 72px; } .rb-ignored-label { font-size: 10.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rb-expand { width: 22px; height: 22px; padding: 0; background: transparent; border: none; color: var(--muted-2); font-size: 11px; } .rb-expand:hover { color: var(--ink); } .rb-edit { background: var(--panel-2); border-top: 1px dashed var(--line); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; } .rb-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rb-edit-value { flex: 1; min-width: 0; display: flex; } .rb-edit-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; gap: 10px; flex-wrap: wrap; } .rb-edit-actions { display: flex; gap: 4px; } .rb-act { padding: 4px 8px; font-size: 11.5px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; } .rb-act:hover { color: var(--ink); border-color: var(--line-2); } .rb-act-del:hover { color: var(--neg); border-color: var(--neg); } .rb-add-wrap { margin-top: 14px; position: relative; } .rb-add-btn { width: 100%; padding: 10px; background: transparent; border: 1px dashed var(--line-2); color: var(--muted); border-radius: var(--radius); font-weight: 500; font-size: 13px; } .rb-add-btn:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); } .rb-add-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; z-index: 10; max-height: 380px; overflow-y: auto; } .rb-add-hint { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .rb-add-group { margin-bottom: 8px; } .rb-add-group-label { font-size: 10.5px; color: var(--accent-deep); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; } .rb-add-item { display: block; width: 100%; text-align: left; padding: 5px 9px; font-size: 12.5px; background: transparent; border: none; border-radius: 5px; color: var(--ink-2); } .rb-add-item:hover { background: var(--accent-soft); color: var(--accent-deep); } /* Styling for criteria/rules that are ignored when not shared by all services */ .unshared-ignored { opacity: 0.45; border-style: dashed !important; background: var(--panel-2) !important; } .unshared-ignored .rb-sentence, .unshared-ignored .rule-body, .unshared-ignored .rb-weight { pointer-events: none; /* Disable interaction with ignored fields/values */ } /* ===================== AU PAIR CARDS ===================== */ .cards { display: flex; flex-direction: column; gap: 12px; } .cards-stale { opacity: 0.6; transition: opacity 0.15s; } /* Infinite-scroll sentinel / "showing N of M" footer */ .load-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .load-more-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: load-more-spin 0.7s linear infinite; } @keyframes load-more-spin { to { transform: rotate(360deg); } } .cards-compact .load-more { grid-column: 1 / -1; } .apc { display: grid; grid-template-columns: 36px 110px minmax(0, 1fr) 200px; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; } .apc:hover { box-shadow: var(--shadow-md); } .apc.dim { opacity: 0.5; } /* Inactive (no longer in the latest scan): greyed out + a clear banner. */ .apc.inactive { filter: grayscale(0.85); background: var(--bg-deep); border-color: var(--line-2); box-shadow: none; } .apc.inactive .apc-photo img { opacity: 0.7; } .apc.inactive:hover { filter: grayscale(0.55); } .apc-inactive-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: #6b6052; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; padding: 7px 12px; border-radius: 8px; margin-bottom: 2px; } /* Service-source accent: blue-left on CulturalCare, green on GoAuPair */ .apc.svc-culturalcare { border-left: 3px solid oklch(0.55 0.14 240); } .apc.svc-goaupair { border-left: 3px solid oklch(0.52 0.12 140); } .apc.svc-aupaircare { border-left: 3px solid oklch(0.55 0.13 25); } .apc-rank { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; } .rnum { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: 28px; color: var(--muted-2); line-height: 1; } .apc.pos .rnum { color: var(--accent); } .move { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; font-variant-numeric: tabular-nums; } .move.up { color: var(--pos); background: var(--pos-soft); } .move.down { color: var(--neg); background: var(--neg-soft); } .new-pip { font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 3px; background: var(--accent); color: #fff; } .inactive-pip { font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 3px; background: var(--muted-2); color: #fff; } /* Demand / hotness (CulturalCare): emoji pip, cursor:help reveals the tooltip. */ .demand-pip { font-size: 12px; line-height: 1; padding: 1px 3px; border-radius: 3px; cursor: help; } .demand-pip.demand-hot { background: rgba(255, 80, 40, 0.16); } .demand-pip.demand-warm { background: rgba(255, 190, 60, 0.18); } .apc-tile-demand { position: absolute; top: 6px; left: 6px; z-index: 1; font-size: 11px; line-height: 1; cursor: help; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); } .svc-pip { font-size: 8px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 5px; border-radius: 3px; } .svc-culturalcare { background: oklch(0.92 0.04 240 / 0.6); color: oklch(0.40 0.10 240); border: 1px solid oklch(0.85 0.06 240 / 0.5); } .svc-goaupair { background: oklch(0.92 0.04 140 / 0.5); color: oklch(0.38 0.10 140); border: 1px solid oklch(0.82 0.06 140 / 0.5); } .svc-aupaircare { background: oklch(0.92 0.05 25 / 0.5); color: oklch(0.40 0.11 25); border: 1px solid oklch(0.83 0.07 25 / 0.5); } .apc-photo { width: 110px; height: 145px; overflow: hidden; border-radius: 10px; background: var(--bg-deep); } .apc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .apc-photo:hover img { transform: scale(1.04); } .apc-photo img.broken { display: none; } .apc-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .apc-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .apc-name { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; } .apc-fullname { font-weight: 400; color: var(--muted); font-size: 13px; letter-spacing: 0; } .apc-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .flag { font-size: 14px; line-height: 1; } .apc-quote { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; padding-left: 10px; border-left: 2px solid var(--accent); } .apc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat { min-width: 0; } .stat-label { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .stat-value { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 4px; overflow: hidden; } .stat-bar-fill { height: 100%; background: var(--accent); } .apc-tags { display: flex; flex-wrap: wrap; gap: 4px; } .tag { font-size: 11px; padding: 2px 8px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; } .tag-lang { background: oklch(0.92 0.04 240 / 0.5); color: oklch(0.40 0.10 240); border-color: oklch(0.85 0.06 240 / 0.5); } .tag-age { background: oklch(0.92 0.04 110 / 0.5); color: oklch(0.40 0.10 110); border-color: oklch(0.85 0.06 110 / 0.5); } .tag-hobby { background: oklch(0.93 0.04 60 / 0.5); color: oklch(0.40 0.10 60); border-color: oklch(0.85 0.06 60 / 0.5); } .tag-loc { background: oklch(0.92 0.05 200 / 0.55); color: oklch(0.38 0.10 200); border-color: oklch(0.82 0.07 200 / 0.5); font-weight: 700; } /* Free-text "where do you prefer to be placed" answer (GoAuPair) */ .apc-locpref { margin: 6px 0 2px; font-size: 12px; line-height: 1.45; color: var(--ink-2); } .apc-locpref-label { font-weight: 700; color: oklch(0.38 0.10 200); } .tag-emph { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); font-weight: 600; } .tag-warn { background: var(--neg-soft); color: var(--neg); border-color: oklch(0.55 0.17 25 / 0.3); } .apc-bio { font-size: 13px; color: var(--ink-2); line-height: 1.55; position: relative; } .apc-bio-text { max-height: 60px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); } .apc-bio.open .apc-bio-text { max-height: none; -webkit-mask-image: none; mask-image: none; } .bio-toggle { background: transparent; border: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--accent-deep); margin-top: 4px; } .bio-toggle:hover { text-decoration: underline; } .apc-links { display: flex; gap: 14px; font-size: 12.5px; } .apc-links a { color: var(--accent-deep); text-decoration: none; font-weight: 600; } .apc-links a:hover { text-decoration: underline; } /* Curated "vibe check" callout (from research_notes.md → vibes.js) */ .apc-vibe { margin: 8px 0 2px; padding: 8px 10px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; } .apc-vibe-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .apc-vibe-lead { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); margin-right: 2px; } .vibe-chip { font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--accent); color: var(--accent-ink); white-space: nowrap; } .apc-vibe-note { margin-top: 6px; font-size: 12px; font-style: italic; line-height: 1.45; color: var(--ink-2); } /* CulturalCare has no per-profile URL — surface the values to filter by instead */ .apc-cc-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--muted); background: var(--panel-2); border: 1px dashed var(--line); border-radius: 8px; padding: 6px 9px; } .apc-cc-hint-label { color: var(--muted-2); } .apc-cc-hint-vals { color: var(--ink); font-weight: 600; white-space: nowrap; } /* Click-to-copy CulturalCare au-pair number */ .apc-copy-id { display: inline-flex; align-items: center; gap: 8px; font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--accent); border-radius: 7px; padding: 3px 4px 3px 9px; margin-top: 4px; color: var(--accent-ink); transition: background .12s, border-color .12s; } .apc-copy-id:hover { background: var(--accent-soft); } .apc-copy-id-num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .apc-copy-id-icon { font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 5px; white-space: nowrap; } .apc-copy-id.copied { border-color: oklch(0.55 0.13 150); } .apc-copy-id.copied .apc-copy-id-icon { background: oklch(0.55 0.13 150); } /* score breakdown column */ .apc-why { background: var(--panel-2); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; /* Cap height so the breakdown never drives card height — list scrolls instead */ max-height: 260px; overflow: hidden; } .why-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); flex-shrink: 0; } .why-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; /* required for flex + overflow-y: auto to work */ scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .why-list::-webkit-scrollbar { width: 5px; } .why-list::-webkit-scrollbar-track { background: transparent; } .why-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; } .why-row { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); } .why-row.pos { border-color: oklch(0.55 0.11 145 / 0.3); } .why-row.neg { border-color: oklch(0.55 0.17 25 / 0.3); } .why-pts { font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; } .why-row.pos .why-pts { color: var(--pos); } .why-row.neg .why-pts { color: var(--neg); } .why-label { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.2; } .why-detail { font-size: 11px; color: var(--muted); margin-top: 1px; } .why-none { font-size: 12px; color: var(--muted-2); font-style: italic; } /* Score badge top-right */ .score-badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); min-width: 64px; } .score-badge.pos { background: var(--pos-soft); border-color: oklch(0.55 0.11 145 / 0.3); } .score-badge.neg { background: var(--neg-soft); border-color: oklch(0.55 0.17 25 / 0.3); } .score-num { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 600; font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .score-badge.pos .score-num { color: var(--pos); } .score-badge.neg .score-num { color: var(--neg); } .score-label { font-size: 9.5px; color: var(--muted-2); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-top: 2px; } .empty-results { padding: 60px 20px; text-align: center; background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--radius-lg); } .empty-results h3 { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: 22px; margin: 0 0 8px; color: var(--ink-2); } .empty-results p { color: var(--muted); font-size: 13.5px; margin: 0; } /* responsive */ @media (max-width: 1200px) { .apc { grid-template-columns: 30px 100px minmax(0, 1fr); grid-template-rows: auto auto; } .apc-why { grid-column: 2 / -1; } .apc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 990px) { .hdr { grid-template-columns: 1fr auto; gap: 12px; padding: 12px 16px; } .hdr-stats { display: none; } } @media (max-width: 700px) { .hdr-tools .search { width: 130px; } .rh-title { font-size: 24px; } } /* ============================================================================ MOBILE LAYER (breakpoint: 880px). Desktop is untouched. One responsive file — these rules only activate ≤880px. See app.jsx / au-pair-card.jsx for the matching JSX (.mtabs, .hdr-actions, .mobile-filters, .apc-expand). ============================================================================ */ /* ---- bottom tab bar (hidden on desktop; grid on mobile) ---- */ .mtabs { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-template-columns: 1fr 1fr; /* theme-following translucent bar + neutral (non-warm) shadow */ background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); } .mtab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 8px 10px; background: transparent; border: none; color: var(--muted); position: relative; -webkit-tap-highlight-color: transparent; } .mtab.on { color: var(--ink); } .mtab.on::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--accent); } .mtab-label { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } .mtab-count { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .mtab.on .mtab-count { color: var(--accent-deep); } /* Wrapper for the agency filter + inactive toggle when relocated into the criteria pane on mobile. Hidden on desktop (those controls stay in ResultsHead). */ .mobile-filters { display: none; } /* ===== Favorites ===== */ /* Identity chip in the header (who you are, for shared favorites) */ .hdr-identity { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; cursor: pointer; white-space: nowrap; } .hdr-identity:hover { color: var(--ink-2); border-color: var(--muted-2); } .hdr-identity.set { color: var(--ink-2); } .hdr-identity strong { font-weight: 700; } .hdr-identity-star { color: #c8901a; } /* Favorite ★ button on the expanded card */ .apc-fav { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--muted-2); font-size: 16px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .apc-fav:hover { color: #c8901a; border-color: #d8a93a; background: #fbf3df; } .apc-fav.on { color: #c8901a; border-color: #d8a93a; background: #fbf3df; } /* "Saved by …" line under the card header */ .apc-fav-by { margin: 6px 0 2px; font-size: 11.5px; font-weight: 600; color: #9a6f12; } /* Compact tile: favorite star + GONE badge */ .apc-tile-fav { position: absolute; top: 4px; left: 4px; z-index: 2; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px; cursor: pointer; background: rgba(0,0,0,.35); color: #fff; font-size: 14px; line-height: 1; backdrop-filter: blur(2px); } .apc-tile-fav.on { color: #ffce5a; } .apc-tile-fav:hover { background: rgba(0,0,0,.55); } .apc-tile-gone { position: absolute; bottom: 4px; left: 4px; font-size: 8px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 4px; border-radius: 3px; background: var(--muted-2); color: #fff; } .apc-tile.inactive { filter: grayscale(0.85); opacity: 0.92; } .apc-tile.inactive:hover { filter: grayscale(0.5); opacity: 1; } /* ----- expand chevron: hidden by default, revealed ≤880px in the media block below. These base rules MUST precede that block — equal specificity means source order decides, so the mobile `display: inline-flex` only wins if it comes later. ----- */ .apc-head-right { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; } .apc-expand { display: none; width: 30px; height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1; } .apc-expand:hover { color: var(--ink); background: var(--bg-deep); } /* ============================ ≤880px ============================ */ @media (max-width: 880px) { /* ---- header: brand row, then full-width search; criteria actions (presets/clear/reset) appear only on the Criteria tab ---- */ /* Drop the backdrop blur on mobile: a `backdrop-filter` ancestor becomes the containing block for `position: fixed` descendants, which would pin the presets bottom-sheet to the header instead of the viewport. The header bg is already 92% opaque, so losing the blur is imperceptible. */ .hdr { grid-template-columns: 1fr; gap: 10px; padding: 10px 14px; backdrop-filter: none; } .brand-sub, .hdr-stats { display: none; } .hdr-tools { flex-wrap: wrap; gap: 8px; } .hdr-tools .search { flex: 1 1 100%; width: 100%; } .hdr-actions { display: flex; width: 100%; gap: 6px; } .hdr-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; } .app.mview-results .hdr-actions { display: none; } /* presets dropdown becomes a bottom sheet above the tab bar */ .presets-wrap { position: static; flex: 1 1 100%; display: flex; gap: 6px; } .presets-wrap .btn { flex: 1 1 auto; } .presets-menu { position: fixed; left: 10px; right: 10px; top: auto; bottom: 84px; width: auto; max-height: 62vh; } /* ---- one pane at a time ---- */ .layout { display: block; } .rail { position: static; top: 0; max-height: none; overflow: visible; border-right: none; padding: 16px 14px 104px; } .results { padding: 16px 14px 104px; } .app.mview-results .rail { display: none; } .app.mview-criteria .results { display: none; } /* agency filter + inactive toggle now sit in the criteria pane */ .mobile-filters { display: block; margin-bottom: 16px; } .mtabs { display: grid; } /* ---- results head: keep the view-toggle, hide what moved/decluttered ---- */ .results-head { flex-wrap: wrap; gap: 10px; align-items: center; } .rh-title { font-size: 24px; } .rh-legend, .results-head .svc-filter, .results-head .inactive-toggle { display: none; } .view-toggle { margin-left: auto; } /* ---- candidate cards: compact, tap to expand. Rank column kept wide enough for the GAP/CC service pip; the .apc.svc-* left border is preserved automatically. ---- */ .apc { grid-template-columns: 36px 60px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 12px; padding: 12px; align-items: start; border-radius: 10px; } .apc-rank { padding-top: 2px; } .rnum { font-size: 21px; } .apc-photo { width: 60px; height: 76px; border-radius: 8px; } .apc-head { cursor: pointer; gap: 8px; } .apc-name { font-size: 16px; } .apc-fullname { display: none; } .apc-sub { font-size: 11.5px; gap: 3px; } .score-badge { min-width: 48px; padding: 4px 8px; } .score-num { font-size: 19px; } .score-label { font-size: 8.5px; } .apc-expand { display: inline-flex; } .apc-why { grid-column: 1 / -1; } .apc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* collapse detail until the card is opened */ .apc:not(.open) .apc-quote, .apc:not(.open) .apc-vibe, .apc:not(.open) .apc-stats, .apc:not(.open) .apc-tags, .apc:not(.open) .apc-bio, .apc:not(.open) .apc-locpref, .apc:not(.open) .apc-links, .apc:not(.open) .apc-cc-hint, .apc:not(.open) .apc-why { display: none; } /* the existing compact tile grid stays usable via the view-toggle */ .cards-compact { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } } /* ----- very small phones ----- */ @media (max-width: 460px) { .apc { grid-template-columns: 30px 52px minmax(0, 1fr); padding: 11px; } .apc-photo { width: 52px; height: 66px; } .brand-name { font-size: 15px; } }