/* Fieldwork — the site design at every width. * * Cream ink, Special Elite buttons, gold edges, and dark frosted trays. * Phones use the same colors and type. The admin content offset stays * at 933px and up so a phone is not pushed sideways. Campaign notebook * paper is left out of these selectors. */ @font-face { font-family: "Special Elite"; src: url("../fonts/special-elite.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Caveat"; src: url("../fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────── */ :root { --fw-desk: #171b19; --fw-desk-rgb: 23, 27, 25; --fw-tray: #151718; --fw-tray-glass: rgba(21, 23, 24, 0.56); --fw-tray-raised: #2c342f; --fw-on-desk: #ede6d3; --fw-on-desk-muted: #b3b19e; --fw-line: rgba(183, 177, 142, 0.2); --fw-tray-edge: rgba(168, 153, 115, 0.3); --fw-field-edge: rgba(154, 163, 140, 0.75); --fw-action: #435c4b; --fw-action-hover: yellow; --fw-on-action: #faf3df; --fw-sage: darkslategray; --fw-gold: #dac69a; --fw-alert: #e4ae9e; --fw-serif: Georgia, 'Times New Roman', serif; --fw-label: 'Special Elite', 'Courier New', Courier, monospace; --fw-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; --fw-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --accent: #a5b79c; --accent-hover: #c3d0b8; --accent-rgb: 165, 183, 156; --accent-soft: rgba(165, 183, 156, 0.16); --accent-border: rgba(165, 183, 156, 0.45); --accent-glow: rgba(165, 183, 156, 0.3); --accent-strong: #faf3df; --accent-button: #435c4b; --accent-button-hover: #4f6b58; --accent-button-rgb: 67, 92, 75; --accent-text: #c9d3b8; --accent-text-hover: #e4e9d6; --accent-readable: #c9d3b8; --chipActive: rgba(165, 183, 156, 0.22); --control-muted-fg: rgba(237, 230, 211, 0.55); --control-muted-fg-hover: rgba(237, 230, 211, 0.8); } /* ── Desk: background and overlay paint on frame 0 without :has() ───── */ :root { background-color: var(--fw-desk) !important; } :root body { background-color: transparent !important; color: var(--fw-on-desk); } /* Never hide body during auth-checking — that hides the wallpaper, overlay, sidebar and page loader until the auth fetch finishes. */ html.auth-checking body { display: flex !important; } html.auth-checking .main-content { visibility: hidden; } /* One fixed layer over whatever art the page paints (body::before, .wallpaper-background, #bg …) and under every content box. */ :root body::after { content: "" !important; display: block !important; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 18, 17, 0) 0%, rgba(16, 18, 17, 0.1) 50%, rgba(16, 18, 17, 0.7) 100%), linear-gradient(105deg, rgba(16, 18, 17, 0.62) 0%, rgba(16, 18, 17, 0.4) 52%, rgba(16, 18, 17, 0.62) 100%) !important; -webkit-backdrop-filter: blur(2px) saturate(0.85) !important; backdrop-filter: blur(2px) saturate(0.85) !important; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root body::after { background: linear-gradient(180deg, rgba(16, 18, 17, 0.1) 0%, rgba(16, 18, 17, 0.2) 50%, rgba(16, 18, 17, 0.75) 100%), linear-gradient(105deg, rgba(16, 18, 17, 0.68) 0%, rgba(16, 18, 17, 0.5) 52%, rgba(16, 18, 17, 0.68) 100%) !important; } } /* Tarot's moving sky is the page itself (see AGENTS.md heat budget). */ html[data-fw-desk="off"] body::after { content: none !important; display: none !important; } :root body #deckStatistics .ah-slot-icon, :root body #deckStatistics .ah-slot-icon.dd-stat-icon { font-family: 'ArkhamSlotIcons', sans-serif !important; } /* ── Sidebar: dark frosted glass list ───────────────────────────────── */ :root body .sidebar { background: rgba(21, 23, 24, 0.78) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; border-right: 1px solid rgba(215, 203, 183, 0.17) !important; border-radius: 0 !important; box-shadow: none !important; } :root body .sidebar-logo { border-bottom: 1px solid var(--fw-line); } :root body .sidebar-nav .nav-item, :root body .sidebar-nav a.nav-item, :root body .sidebar-nav a.nav-item:link, :root body .sidebar-nav a.nav-item:visited { border: 0 !important; border-left: 2px solid transparent !important; border-radius: 0 3px 3px 0; padding: 11px 12px !important; font: 400 14px/1.4 var(--fw-sans); color: #d7d1c2; -webkit-text-fill-color: #d7d1c2; box-shadow: none; -webkit-transform: none; transform: none; } :root body .sidebar-nav a.nav-item span { color: inherit; -webkit-text-fill-color: inherit; } :root body .sidebar-nav .nav-item:hover:not(.active), :root body .sidebar-nav a.nav-item:hover:not(.active) { background: rgba(237, 230, 211, 0.05); color: var(--fw-on-desk); -webkit-text-fill-color: var(--fw-on-desk); box-shadow: none; -webkit-transform: none; transform: none; } :root body .sidebar-nav .nav-item.active, :root body .sidebar-nav a.nav-item.active, :root body .sidebar-nav a.nav-item.active:hover { background: rgba(237, 230, 211, 0.08); border-left-color: var(--accent) !important; color: var(--fw-on-desk); -webkit-text-fill-color: var(--fw-on-desk); box-shadow: none; -webkit-transform: none; transform: none; } :root body .sidebar-user #sidebarUser { border-bottom-color: var(--fw-line); color: var(--fw-on-desk-muted); } :root body .sidebar-user .superuser-banner, :root body #superuserBanner { background: rgba(67, 92, 75, 0.28) !important; border: 1px solid rgba(218, 198, 154, 0.4) !important; border-radius: 3px !important; color: var(--fw-gold) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.1em !important; box-shadow: none !important; } :root body #superuserOnlineMini, :root body .superuser-online-mini, :root body #ahSuOnlineMini { background: rgba(21, 23, 24, 0.55) !important; border: 1px solid var(--fw-line) !important; border-radius: 3px !important; color: var(--fw-on-desk-muted) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.08em !important; box-shadow: none !important; } :root body #superuserOnlineMini *, :root body .superuser-online-mini * { font-family: var(--fw-label) !important; font-weight: 400 !important; } :root body .sidebar-footer { border-top-color: var(--fw-line); } :root body .sidebar-footer-links a { color: rgba(195, 190, 173, 0.75); } :root body .sidebar-footer-links a:hover { color: var(--fw-on-desk); } /* ── Type: Georgia names the page, Special Elite labels it ──────────── Never touch headings inside #campaignNotebook or .cb-caption so paper and catalogue surfaces keep their dark ink. */ :root body .main-content h1:not(.rule-accordion-title):not(#campaignTitle):not(#campaignNotebook *), :root body .main-content .page-title:not(#campaignNotebook *), :root body .main-content .my-decks-heading, :root body .main-content .cc-hero__title { font-family: var(--fw-serif) !important; font-weight: 400 !important; font-size: clamp(30px, 2.6vw, 40px) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; text-shadow: none !important; background: none !important; } :root body .main-content h2.section-title:not(#campaignNotebook *), :root body .main-content .faction-header h2, :root body .main-content .faction-header .faction-title, :root body .main-content .rules-chapter-intro h2, :root body .main-content .help-card h3, :root body .main-content .cc-pack__title, :root body .main-content .fan-pack h3, :root body .main-content .fan-pack h2, :root body .main-content .fan-pack-title, :root body .main-content .expansion-name, :root body .main-content .content-panel h2, :root body .main-content .content-panel h3, :root body .main-content #prebuiltDecks .pb-group-title, :root body .main-content .ownership-group-title, :root body .main-content .tab-header-row h2, :root body .main-content .panel-title, :root body .main-content .an-heading { font-family: var(--fw-serif) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; text-shadow: none !important; } :root body .main-content .help-card h3, :root body .main-content .faction-header .faction-title, :root body .main-content .expansion-name, :root body .main-content #prebuiltDecks .pb-group-title, :root body .main-content .tab-header-row h2, :root body .main-content .panel-title { font-size: 22px !important; line-height: 1.22 !important; } /* Eyebrow / field labels use Special Elite like the campaign notebook. */ :root body .main-content .cd-field > label, :root body .main-content .exp-toolbar-label, :root body .main-content .cc-toolbar__label, :root body .main-content .help-action-title, :root body .main-content .rules-hero .hero-eyebrow, :root body .main-content .stat-label:not(#campaignNotebook *), :root body .main-content .cd-stat-label, :root body .main-content .scenarios-title, :root body .main-content .content-panel .last-updated, :root body .main-content .contact-form label, :root body .main-content .panel form label, :root body .main-content .fg-field-label, :root body .main-content .vc-label .vc-title, :root body .main-content .user-stat-label, :root body .main-content .an-stat-label { font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--fw-on-desk-muted) !important; } /* ── Custom Content desktop centering fix ───────────────────────────── On custom-content*.html, .sidebar is `position: sticky; width: 240px` in the flex row, so .main-content already starts at x=240 with `margin-left: 0`. Center #ccPage with symmetric horizontal padding. */ :root body .main-content:has(#ccPage) { margin-left: 0 !important; padding-left: 20px !important; padding-right: 20px !important; } :root body .main-content > #ccPage, :root body .main-content > #ccPage:first-child { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ── Admin desk ─────────────────────────────────────────────────────── One open masthead, one index tray (areas over views), then the workspace. Scoped with :has(.admin-header) so the cards page, which also gets .has-sidebar, keeps its full-width toolbar. */ @media (min-width: 933px) { :root body.has-sidebar .main-content:has(.admin-header) { max-width: 1680px !important; margin-left: 240px !important; padding: 28px 32px 56px !important; } } :root body .admin-shell { display: block !important; min-width: 0 !important; } /* ── Cards filter toolbar: glassy opacity, full width, toned-down green ─ index.html sets an inline `background: linear-gradient(135deg, rgba(28,28,30,5), ...)` with !important on `.stickyToolbar > #classBar` and `.filtersBar`, which left background-image set to an opaque gradient. Clear background-image and let the bars span the full main-content width. */ :root body .main-content > .stickyToolbar:first-child, :root body .main-content > .stickyToolbar { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } :root body .stickyToolbar > #classBar, :root body .stickyToolbar > .filtersBar, :root body #classBar, :root body .filtersBar { width: 100% !important; max-width: none !important; box-sizing: border-box !important; background: rgba(21, 23, 24, 0.62) !important; background-color: rgba(21, 23, 24, 0.62) !important; background-image: none !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; } :root body .stickyToolbar > .filtersBar::before { display: none !important; content: none !important; } :root body .exp-toolbar { width: 100% !important; max-width: none !important; box-sizing: border-box !important; background: rgba(21, 23, 24, 0.62) !important; } /* ── Tray: dark frosted glass panels, toolbars, cards and boxes ─────── */ :root body .classBar, :root body .filtersBar, :root body .inv-seo-intro, :root body .faction-header, :root body .help-card, :root body .cd-panel, :root body .page-header, :root body .page-header-card, :root body .content-panel, :root body .exp-toolbar, :root body .stats-summary, :root body .expansion-card, :root body .wrap > .panel, :root body .cc-hero__intro, :root body .cc-toolbar, :root body .fan-pack, :root body .cc-pack, :root body .cc-empty, :root body .rules-hero, :root body .rules-chapter-tabs, :root body .rules-chapter-intro, :root body .rules-toolbar, :root body .rule-accordion-item, :root body .grimoire-header, :root body .deck-panel:not(.panel-header), :root body .encounter-nav, :root body .ownership-group, :root body .ownership-summary-bar, :root body .empty-state, :root body #yourDecks .investigator-card, :root body #yourDecks a.investigator-card, :root body #prebuiltDecks .investigator-card, :root body #prebuiltDecks a.investigator-card, :root body .cd-deck, :root body [data-campaign-books] .cb-item, :root body .admin-index, :root body .admin-actions, :root body .admin-shell-main .panel, :root body .admin-container { background-color: var(--fw-tray-glass) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid var(--fw-tray-edge) !important; border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(233, 215, 160, 0.08) !important; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root body .classBar, :root body .filtersBar, :root body .inv-seo-intro, :root body .faction-header, :root body .help-card, :root body .cd-panel, :root body .page-header, :root body .page-header-card, :root body .content-panel, :root body .exp-toolbar, :root body .stats-summary, :root body .expansion-card, :root body .wrap > .panel, :root body .cc-hero__intro, :root body .cc-toolbar, :root body .fan-pack, :root body .cc-pack, :root body .cc-empty, :root body .rules-hero, :root body .rules-chapter-tabs, :root body .rules-chapter-intro, :root body .rules-toolbar, :root body .rule-accordion-item, :root body .grimoire-header, :root body .deck-panel:not(.panel-header), :root body .encounter-nav, :root body .ownership-group, :root body .ownership-summary-bar, :root body .empty-state, :root body #yourDecks .investigator-card, :root body #yourDecks a.investigator-card, :root body #prebuiltDecks .investigator-card, :root body #prebuiltDecks a.investigator-card, :root body .cd-deck, :root body [data-campaign-books] .cb-item, :root body .admin-index, :root body .admin-actions, :root body .admin-shell-main .panel, :root body .admin-container { background-color: rgba(21, 23, 24, 0.88) !important; } } /* Campaign book stage uses the dark glassy tray instead of solid olive. */ :root body [data-campaign-books] .cb-book-trigger { background-color: rgba(21, 23, 24, 0.45) !important; } :root body [data-campaign-books] .cb-menu-button:hover, :root body [data-campaign-books] .cb-menu-button:focus-visible { background: rgba(237, 230, 211, 0.1) !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body [data-campaign-books] .cb-caption, :root body [data-campaign-books] .cb-caption * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-shadow: none !important; } /* Faction gradient on BOTH My Decks (#yourDecks) and Prebuilt Decks (#prebuiltDecks), plus Community Decks (.cd-deck). */ :root body #yourDecks .investigator-card.faction-guardian { --fw-deck-tint: rgba(74, 134, 184, 0.44); } :root body #yourDecks .investigator-card.faction-seeker { --fw-deck-tint: rgba(210, 154, 46, 0.44); } :root body #yourDecks .investigator-card.faction-rogue { --fw-deck-tint: rgba(47, 155, 113, 0.44); } :root body #yourDecks .investigator-card.faction-mystic { --fw-deck-tint: rgba(110, 92, 200, 0.44); } :root body #yourDecks .investigator-card.faction-survivor { --fw-deck-tint: rgba(181, 74, 79, 0.44); } :root body #yourDecks .investigator-card.faction-neutral { --fw-deck-tint: rgba(255, 255, 255, 0.12); } :root body #yourDecks .investigator-card, :root body #yourDecks a.investigator-card, :root body #prebuiltDecks .investigator-card, :root body #prebuiltDecks a.investigator-card { background-color: rgba(21, 23, 24, 0.42) !important; background-image: linear-gradient(105deg, var(--fw-deck-tint, var(--deck-faction-bg, var(--prebuilt-faction-bg, rgba(255, 255, 255, 0.10)))) 0%, rgba(21, 23, 24, 0.18) 68%, rgba(21, 23, 24, 0.42) 100%) !important; } :root body .cd-deck.guardian { --cd-faction-bg: rgba(74, 134, 184, 0.32); border-left: 3px solid #4a86b8 !important; } :root body .cd-deck.seeker { --cd-faction-bg: rgba(210, 154, 46, 0.32); border-left: 3px solid #d29a2e !important; } :root body .cd-deck.rogue { --cd-faction-bg: rgba(47, 155, 113, 0.32); border-left: 3px solid #2f9b71 !important; } :root body .cd-deck.mystic { --cd-faction-bg: rgba(110, 92, 200, 0.32); border-left: 3px solid #6e5cc8 !important; } :root body .cd-deck.survivor { --cd-faction-bg: rgba(181, 74, 79, 0.32); border-left: 3px solid #b54a4f !important; } :root body .cd-deck { background-color: rgba(21, 23, 24, 0.44) !important; background-image: linear-gradient(110deg, var(--cd-faction-bg, rgba(255, 255, 255, 0.08)) 0%, rgba(21, 23, 24, 0.15) 68%) !important; } /* Investigator cards on /investigators: subtle warm frame border and clean Georgia name plate. */ :root body .investigators-grid .investigator-card { border: 1px solid rgba(218, 198, 154, 0.32) !important; border-radius: 6px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important; } :root body .investigators-grid .investigator-name { font-family: var(--fw-serif) !important; font-weight: 400 !important; font-size: 16px !important; color: var(--fw-on-desk) !important; } :root body .investigators-grid .investigator-subtitle { font-family: var(--fw-label) !important; font-size: 10.5px !important; color: var(--fw-on-desk-muted) !important; } /* NEW badge becomes a typewriter stamp instead of neon green pill */ :root body .investigator-new-badge { background: var(--fw-action) !important; border: 1px solid var(--fw-gold) !important; border-radius: 2px !important; color: var(--fw-on-action) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 9.5px !important; letter-spacing: 0.08em !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important; } /* Rules accordion items: clean single glassy tray with ruled header, no double inner box or hover jump. */ :root body .rule-accordion-item::before, :root body .rule-accordion-item::after, :root body .rules-hero::before, :root body .rules-hero::after { display: none !important; } :root body .rule-accordion-item:hover { -webkit-transform: none !important; transform: none !important; border-color: var(--fw-tray-edge) !important; } :root body .rule-accordion-header { background: transparent !important; border-bottom: 1px solid var(--fw-line) !important; border-radius: 9px 9px 0 0 !important; padding: 18px 24px 14px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .rule-accordion-header .rule-accordion-title { font-family: var(--fw-serif) !important; font-weight: 400 !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .rule-accordion-content { background: transparent !important; border: 0 !important; border-radius: 0 0 9px 9px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Expansion scenario rows: clean ruled list inside the glassy tray */ :root body .expansion-card .scenarios-section { border-top: 1px solid var(--fw-line) !important; } :root body .expansion-card .scenario-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--fw-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 4px !important; } :root body .expansion-card .progress-label, :root body .expansion-card .progress-stats { color: var(--fw-on-desk) !important; } :root body .expansion-card .progress-percent { color: #ffffff !important; } :root body .expansion-card .progress-bar-container { background: rgba(0, 0, 0, 0.55) !important; border: 1px solid var(--fw-line) !important; } :root body .expansion-card .progress-bar { background: linear-gradient(90deg, #a5b79c, #dac69a) !important; } /* Boxes inside a tray are recessed into it rather than stacked on it. */ :root body .deck-panel .stat-card, :root body .stats-summary .stat-card, :root body .stat-card, :root body .cd-stat, :root body .disclaimer-box, :root body .user-row, :root body .tarot-read, :root body .an-card, :root body .an-stat, :root body .visitor-counter, :root body .admin-shell-main .panel .panel { background: rgba(15, 17, 18, 0.52) !important; border: 1px solid var(--fw-line) !important; border-radius: 6px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .stat-value, :root body .stat-number, :root body .cd-stat strong, :root body .cd-stat .cd-stat-num, :root body .help-limit-count, :root body .visitor-counter .vc-num, :root body .user-stat-num, :root body .an-stat-num { font-family: var(--fw-serif) !important; font-weight: 400 !important; color: var(--fw-on-desk) !important; } :root body .user-stat { background: rgba(10, 12, 13, 0.45) !important; border: 1px solid rgba(183, 177, 142, 0.14) !important; border-radius: 4px !important; } :root body .hero-chip, :root body .seg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .deck-panel header { font-family: var(--fw-serif) !important; font-weight: 400 !important; font-size: 21px !important; letter-spacing: -0.01em; font-variant: normal !important; color: var(--fw-on-desk) !important; border-bottom-color: var(--fw-line) !important; } /* ── Buttons: consistent font (Special Elite) and 3px radius across the site ── Leave the Add Cards popup (#upgradeModal) and round icon-only controls alone. */ :root body button:not(#upgradeModal *):not(.ah-notify *):not(.ah-bug-fab):not(.chaos-coin-add):not(.deck-version-btn):not(.password-toggle):not(.search-clear):not(.cc-search__clear):not(.cd-invclear):not(.ah-select-trigger):not(.ah-date-trigger):not(.ah-date-nav):not(.ah-date-day):not(.stat-legality), :root body input[type="button"]:not(#upgradeModal *), :root body input[type="submit"]:not(#upgradeModal *), :root body input[type="reset"]:not(#upgradeModal *), :root body a.btn:not(#upgradeModal *), :root body .btn:not(.btn-icon):not(#upgradeModal *), :root body .btn-admin, :root body #tbl .btn-sm, :root body .open-deck-btn, :root body .deck-del, :root body .cc-btn, :root body .cd-btn, :root body .fg-btn, :root body .action-btn, :root body .user-action, :root body .submit-btn, :root body .inv-ownership-open, :root body .toolbar-top, :root body .rules-chapter-pdf, :root body .fan-pack .fan-view, :root body .fan-pack .fan-link, :root body .chip:not(#upgradeModal *), :root body .cc-chip, :root body .toolbar-chip, :root body .hero-chip, :root body .filterMoreBtn, :root body .favListBtn, :root body .cardViewTab, :root body .seg button, :root body .seg .tab, :root body .exp-seg button, :root body .rules-chapter-tab, :root body .deck-filter-btn, :root body .draw-sim-btn, :root body .admin-tab, :root body .admin-group-tab, :root body .upgrade-sheets-show-exiled, :root body .usheet-btn, :root body .deck-settings-item, :root body .cb-menu-button, :root body .ah-bug-btn, :root body summary.cb-button, :root body summary.cn-text-button, :root body .cn-button { font-family: var(--fw-label) !important; font-weight: 400 !important; border-radius: 3px !important; } /* ── Buttons: printed labels on a stable edge ───────────────────────── Exclude #campaignNotebook and .cb-caption so paper surfaces never get light text forced onto their buttons. */ :root body .btn:not(.btn-icon):not(#upgradeModal *):not(#campaignNotebook *):not(.cb-caption *), :root body .btn-admin, :root body #tbl .btn-sm, :root body .open-deck-btn, :root body .deck-del, :root body .cc-btn, :root body .action-btn, :root body .user-action, :root body .submit-btn, :root body .inv-ownership-open, :root body .toolbar-top, :root body .rules-chapter-pdf, :root body .fan-pack .fan-view, :root body .fan-pack .fan-link, :root body .upgrade-sheets-show-exiled, :root body #upgradeSheetsList .usheet-btn, :root body .ah-bug-btn--ghost, :root body button.topnav.button { border: 1px solid var(--fw-field-edge) !important; border-radius: 3px !important; background: transparent !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0.02em; text-transform: none !important; text-shadow: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-transform: none; transform: none; } :root body .btn:not(#upgradeModal *):not(#campaignNotebook *):not(.cb-caption *):hover:not(:disabled), :root body .btn-admin:hover:not(:disabled), :root body #tbl .btn-sm:hover:not(:disabled), :root body .cc-btn:hover, :root body .submit-btn:hover:not(:disabled), :root body .inv-ownership-open:hover, :root body .toolbar-top:hover, :root body .rules-chapter-pdf:hover, :root body .fan-pack .fan-view:hover, :root body .fan-pack .fan-link:hover, :root body .upgrade-sheets-show-exiled:hover, :root body #upgradeSheetsList .usheet-btn:hover, :root body .ah-bug-btn--ghost:hover, :root body .action-btn:hover:not(:disabled), :root body .user-action:hover, :root body button.topnav.button:hover:not(:disabled) { background: rgba(237, 230, 211, 0.07) !important; border-color: var(--fw-gold) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: underline; text-underline-offset: 4px; -webkit-transform: none; transform: none; } :root body .btn-primary:not(#upgradeModal *), :root body .btn.primary:not(#upgradeModal *), :root body button.primary:not(#upgradeModal *), :root body .btn-admin.btn-primary, :root body .btn-admin.btn-accent, :root body .open-deck-btn:not(.prebuilt-view-btn), :root body .submit-btn, :root body .cc-btn--primary, :root body .fg-btn.fg-btn-primary, :root body .ah-bug-btn--primary, :root body button.topnav.button#li_submit, :root body button.topnav.button#favListSave { background: var(--fw-action) !important; border: 1px solid var(--fw-action) !important; color: var(--fw-on-action) !important; -webkit-text-fill-color: var(--fw-on-action) !important; box-shadow: 0 2px 0 #15261d !important; } :root body .btn-primary:not(#upgradeModal *):hover:not(:disabled), :root body .btn.primary:not(#upgradeModal *):hover:not(:disabled), :root body button.primary:not(#upgradeModal *):hover:not(:disabled), :root body .btn-admin.btn-primary:hover:not(:disabled), :root body .btn-admin.btn-accent:hover:not(:disabled), :root body .submit-btn:hover:not(:disabled), :root body .fg-btn.fg-btn-primary:hover:not(:disabled), :root body .ah-bug-btn--primary:hover:not(:disabled), :root body .cc-btn--primary:hover { background: var(--fw-action-hover) !important; border-color: var(--fw-sage) !important; color: var(--fw-tray) !important; -webkit-text-fill-color: var(--fw-tray) !important; } /* Tarot, My Decks, the deck dashboard, Campaigns, the campaign log, account settings, cookie consent, and the fan-made disclaimer keep the selected-tab wash instead of the forest fill: cream at 14%, a gold edge, and an inset gold ring. Hover only deepens that wash. */ :root body.tarot-page .tr-btn:not(.tr-btn-quiet), :root body.mydecks-page .btn.btn-primary:not(#upgradeModal *):not(#campaignNotebook *), :root body.mydecks-page .open-deck-btn:not(.prebuilt-view-btn), :root body.deck-dashboard-page .btn.btn-primary:not(#upgradeModal *):not(#campaignNotebook *), :root body.campaigns-page .btn.btn-primary:not(#upgradeModal *):not(#campaignNotebook *), :root body.campaigns-page .cb-primary, :root body.campaign-log-page #campaignNotebook .btn-primary, :root body.campaign-log-page .cn-primary, :root body.campaign-log-page .map-open-btn, :root body.campaign-log-page .map-mode-btn.is-active, :root body.settings-page .fg-btn.fg-btn-primary, :root body .cookie-consent-accept, :root body .legal-disclaimer-panel .legal-disclaimer-btn.primary:not(#upgradeModal *) { background: rgba(237, 230, 211, 0.14) !important; border: 1px solid rgba(218, 198, 154, 0.65) !important; color: #faf3df !important; -webkit-text-fill-color: #faf3df !important; box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important; } :root body.tarot-page .tr-btn:not(.tr-btn-quiet):hover:not(:disabled):not([aria-disabled="true"]), :root body.mydecks-page .btn.btn-primary:not(#upgradeModal *):not(#campaignNotebook *):hover:not(:disabled), :root body.mydecks-page .open-deck-btn:not(.prebuilt-view-btn):hover:not(:disabled), :root body.deck-dashboard-page .btn.btn-primary:not(#upgradeModal *):not(#campaignNotebook *):hover:not(:disabled), :root body.campaigns-page .btn.btn-primary:not(#upgradeModal *):not(#campaignNotebook *):hover:not(:disabled), :root body.campaigns-page .cb-primary:hover:not(:disabled), :root body.campaign-log-page #campaignNotebook .btn-primary:hover:not(:disabled), :root body.campaign-log-page .cn-primary:hover:not(:disabled), :root body.campaign-log-page .map-open-btn:hover:not(:disabled), :root body.settings-page .fg-btn.fg-btn-primary:hover:not(:disabled), :root body .cookie-consent-accept:hover, :root body .legal-disclaimer-panel .legal-disclaimer-btn.primary:not(#upgradeModal *):hover:not(:disabled) { background: rgba(237, 230, 211, 0.24) !important; border-color: rgba(218, 198, 154, 0.9) !important; color: #faf3df !important; -webkit-text-fill-color: #faf3df !important; box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.4) !important; text-decoration: none !important; } :root body .btn-danger:not(#upgradeModal *), :root body .btn.danger:not(#upgradeModal *), :root body .btn-delete:not(#upgradeModal *), :root body .deck-del, :root body .btn-admin.btn-danger, :root body #tbl .btn-sm.btn-danger, :root body #upgradeSheetsList .usheet-btn.is-danger, :root body .fg-btn.fg-btn-danger, :root body #resetFilters { background: transparent !important; color: var(--fw-alert) !important; -webkit-text-fill-color: var(--fw-alert) !important; border: 1px solid rgba(228, 174, 158, 0.55) !important; border-radius: 3px !important; box-shadow: none !important; } :root body .btn:disabled, :root body .btn-admin:disabled, :root body .action-btn:disabled { opacity: 0.55; } /* In Use / Dead on investigator cards: the same printed button as the toolbars. Phones keep the filled badge from the page script. */ :root body .investigators-grid .investigator-header { text-align: center; } :root body .investigators-grid .investigator-status { display: inline-block !important; width: auto !important; max-width: calc(100% - 8px); margin: 0 auto 8px !important; padding: 3px 12px !important; border: 1px solid var(--fw-field-edge) !important; border-radius: 3px !important; background: transparent !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-shadow: none !important; box-shadow: none !important; vertical-align: middle; } :root body .investigators-grid .investigator-status--dead { color: var(--fw-alert) !important; -webkit-text-fill-color: var(--fw-alert) !important; border-color: rgba(228, 174, 158, 0.55) !important; } /* ── Chips, toggles & tabs: Special Elite font, 3px corners ─────────── */ :root body .chip:not(#upgradeModal *), :root body .fg-btn:not(.fg-btn-primary):not(.fg-btn-danger), :root body .filters-btn, :root body .filterMoreBtn, :root body .favListBtn, :root body .cardViewTab, :root body .map-mode-btn:not(#campaignNotebook *), :root body .cc-chip, :root body .toolbar-chip, :root body .hero-chip, :root body .seg button, :root body .seg .tab, :root body .exp-seg button, :root body .rules-chapter-tab, :root body .deck-filter-btn, :root body .draw-sim-btn, :root body .cd-btn, :root body .admin-tab, :root body .admin-group-tab { border: 1px solid rgba(154, 163, 140, 0.45) !important; border-radius: 3px !important; background: transparent !important; color: rgba(237, 230, 211, 0.82) !important; -webkit-text-fill-color: rgba(237, 230, 211, 0.82) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .seg { background: transparent !important; border: 0 !important; border-radius: 0 !important; gap: 6px !important; padding: 0 !important; } :root body .exp-seg, :root body #classBar .cardViewTabsInner { background: rgba(15, 17, 18, 0.5) !important; border: 1px solid var(--fw-line) !important; border-radius: 3px !important; } :root body .chip:hover, :root body #classBar .cardViewTab:hover, :root body .fg-btn:not(.fg-btn-primary):not(.fg-btn-danger):hover, :root body .filters-btn:hover, :root body .filterMoreBtn:hover, :root body .map-mode-btn:not(#campaignNotebook *):hover, :root body .cc-chip:hover, :root body .toolbar-chip:hover, :root body .seg button:hover, :root body .exp-seg button:hover:not(.active), :root body .rules-chapter-tab:hover:not(.active), :root body .deck-filter-btn:hover:not(.active), :root body .draw-sim-btn:hover:not(:disabled), :root body .cd-btn:hover, :root body .admin-tab:hover:not(.active), :root body .admin-group-tab:hover:not(.active) { background: rgba(237, 230, 211, 0.06) !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; border-color: var(--fw-field-edge) !important; } /* The base chip rule's :not(#upgradeModal *) has ID-level specificity, so the plain .chip:hover above loses to it. */ :root body .chip:not(#upgradeModal *):hover { background: rgba(237, 230, 211, 0.06) !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; border-color: var(--fw-field-edge) !important; } :root body .chip.active, :root body .fg-btn.active, :root body .filters-btn.active, :root body .filtersBar.is-more-open .filterMoreBtn, :root body .map-mode-btn:not(#campaignNotebook *).active, :root body .cc-chip.active, :root body .cc-chip[aria-pressed="true"], :root body .seg button.active, :root body .seg button[aria-selected="true"], :root body .seg .tab.active, :root body .exp-seg button.active, :root body .rules-chapter-tab.active, :root body .deck-filter-btn.active, :root body .draw-sim-btn.active, :root body .cd-pager .cd-btn.active, :root body .admin-tab.active, :root body .admin-tabs.admin-group-tabs .admin-group-tab.active, :root body .admin-tabs.admin-subtabs-row .admin-tab.active { background: rgba(237, 230, 211, 0.14) !important; border-color: rgba(218, 198, 154, 0.65) !important; color: var(--fw-on-action) !important; -webkit-text-fill-color: var(--fw-on-action) !important; box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important; } :root body #classBar .cardViewTabsInner { background: rgba(15, 17, 18, 0.5) !important; border: 1px solid var(--fw-line) !important; border-radius: 4px !important; } /* Cards toolbar on-state. Same colours as an admin tab (OCR Approvals, Pending): transparent when off, a light cream fill and gold edge when on. Chip groups are listed by id to outrank the base .chip rule's :not(#upgradeModal *); add any new chip group here. */ :root body #classBar .chip.active, :root body #classBar .cardViewTab.active, :root body #typeChips .chip.active, :root body #favoritesChips .chip.active, :root body #newChips .chip.active, :root body #levelChips .chip.active, :root body #sortChips .chip.active, :root body #dirChips .chip.active, :root body #iconChips .chip.active, :root body #iconLogicChips .chip.active, :root body #slotChips .chip.active, :root body #mechChips .chip.active, :root body #tabooChips .chip.active, :root body #superuserChips .chip.active, :root body .filtersBar.is-more-open .filterMoreBtn, :root body #encounterNav .encounter-nav-pack.active { background: rgba(237, 230, 211, 0.14) !important; border-color: rgba(218, 198, 154, 0.65) !important; color: var(--fw-on-action) !important; -webkit-text-fill-color: var(--fw-on-action) !important; box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important; } /* Catalogue / typewriter stamps (tags, chapter markers, ownership pills) */ :root body .cc-stat, :root body .fan-pack-tag, :root body .expansion-chapter-tag, :root body .faction-count, :root body .ownership-group-meta, :root body .ocr-tab-badge { border-radius: 2px !important; border: 1px solid rgba(183, 177, 142, 0.35) !important; background: rgba(16, 18, 17, 0.35) !important; color: var(--fw-on-desk-muted) !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.06em !important; } :root body .ownership-toggle, :root body .ownership-signed-out, :root body .own-toggle { border-radius: 3px !important; font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.05em !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .ownership-split { border-radius: 3px !important; border-color: var(--fw-field-edge) !important; } :root body .ownership-toggle.owned, :root body .own-toggle[data-owned="true"] { background: rgba(67, 92, 75, 0.32) !important; border-color: var(--fw-sage) !important; color: #d7e5cf !important; } :root body .ownership-toggle.unowned, :root body .own-toggle[data-owned="false"] { background: rgba(136, 75, 64, 0.24) !important; border-color: rgba(228, 174, 158, 0.5) !important; color: var(--fw-alert) !important; } /* ── Fields: native controls, plain edge, visible focus ─────────────── */ :root body .main-content input[type="text"]:not(.cn-sheet *), :root body .main-content input[type="search"]:not(.cn-sheet *), :root body .main-content input[type="email"]:not(.cn-sheet *), :root body .main-content input[type="password"]:not(.cn-sheet *), :root body .main-content input[type="number"]:not(.cn-sheet *), :root body .main-content input[type="url"]:not(.cn-sheet *), :root body .main-content input[type="date"]:not(.cn-sheet *), :root body .main-content input:not([type]):not(.cn-sheet *), :root body .main-content select:not(.cn-sheet *), :root body .main-content textarea:not(.cn-sheet *), :root body .modal-content input[type="text"], :root body .modal-content input[type="email"], :root body .modal-content input[type="password"], :root body .modal-content input[type="number"], :root body .modal-content input[type="search"], :root body .modal-content select, :root body .modal-content textarea, :root body .modal-panel input[type="text"], :root body .modal-panel input[type="search"], :root body .field, :root body .form-field, :root body .fg-input, :root body .cd-input, :root body .cd-select, :root body .ah-select-trigger, :root body .ah-date-trigger, :root body .filtersBar .ah-select[data-for] > .ah-select-trigger, :root body .filtersBar input#kw, :root body .filtersBar select#expansionFilter, :root body .filtersBar select#encounterFilter { background-color: rgba(21, 23, 24, 0.65) !important; border: 1px solid var(--fw-field-edge) !important; border-radius: 3px !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; font-family: var(--fw-sans) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .main-content input:not(#campaignNotebook *)::placeholder, :root body .main-content textarea:not(#campaignNotebook *)::placeholder, :root body .field::placeholder, :root body .form-field::placeholder { color: rgba(179, 177, 158, 0.85) !important; -webkit-text-fill-color: rgba(179, 177, 158, 0.85) !important; } :root body .main-content input[type="text"]:not(.cn-sheet *):focus, :root body .main-content input[type="search"]:not(.cn-sheet *):focus, :root body .main-content input[type="email"]:not(.cn-sheet *):focus, :root body .main-content input[type="password"]:not(.cn-sheet *):focus, :root body .main-content input[type="number"]:not(.cn-sheet *):focus, :root body .main-content input:not([type]):not(.cn-sheet *):focus, :root body .main-content select:not(.cn-sheet *):focus, :root body .main-content textarea:not(.cn-sheet *):focus, :root body .field:focus, :root body .form-field:focus, :root body .fg-input:focus, :root body .cd-input:focus, :root body .cd-select:focus, :root body .ah-select-trigger:focus-visible, :root body .ah-select.is-open .ah-select-trigger, :root body .ah-date-trigger:focus-visible, :root body .ah-date.is-open .ah-date-trigger { border-color: var(--fw-gold) !important; outline: 2px solid rgba(218, 198, 154, 0.45) !important; outline-offset: 1px; } /* Search rows where the wrapper is the box and the input is bare. */ :root body .cc-search { background: rgba(21, 23, 24, 0.65) !important; border: 1px solid var(--fw-field-edge) !important; border-radius: 3px !important; box-shadow: none !important; } :root body .cc-search:focus-within { border-color: var(--fw-gold) !important; box-shadow: 0 0 0 2px rgba(218, 198, 154, 0.35) !important; } :root body .main-content .cc-search input[type="search"], :root body .main-content .cc-search .cc-search__input { background: transparent !important; border: 0 !important; outline: none !important; } :root body .file-upload-area { background: rgba(21, 23, 24, 0.5) !important; border: 1px dashed var(--fw-field-edge) !important; border-radius: 4px !important; } /* Dropdown lists and calendars use the same popup surface as dialogs. Active rows use the cream wash and gold edge, on every platform. */ :root body .ah-select-option.is-active, :root body .scenario-combobox-option.is-active, :root body .ah-date-day.is-selected { background: rgba(237, 230, 211, 0.14) !important; border-color: rgba(218, 198, 154, 0.65) !important; color: var(--fw-on-action) !important; -webkit-text-fill-color: var(--fw-on-action) !important; box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important; } :root body .ah-select--multi .ah-select-option.is-active, :root body .ah-select-list--multi .ah-select-option.is-active { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .scenario-combobox-option, :root body .ah-select-option:not(.ah-select-option--group), :root body .tr-history-menu-item, :root body [data-campaign-books] .cb-menu-button { color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .tr-history-menu-item.tr-history-delete { color: var(--fw-alert) !important; -webkit-text-fill-color: var(--fw-alert) !important; } :root body .scenario-combobox-option:hover, :root body .tr-history-menu-item:hover, :root body .tr-history-menu-item:focus-visible { background: rgba(237, 230, 211, 0.08) !important; } :root body .scenario-combobox-caret { border-right-color: var(--fw-gold) !important; border-bottom-color: var(--fw-gold) !important; } /* ── Popups: dark frosted glass lifted above the desk ───────────────── */ :root body .modal, :root body .upgrade-modal, :root body .upgrade-modal-container, :root body .upgrade-close-confirm, :root body .modal-backdrop, :root body .upgrade-modal-backdrop, :root body .add-friend-modal, :root body .city-notes-modal, :root body .odds-calc-modal, :root body .upgrade-sheet-modal, :root body .legal-disclaimer-overlay, :root body .rules-toc-backdrop { background: rgba(12, 15, 14, 0.65) !important; } :root body dialog::backdrop { background: rgba(12, 15, 14, 0.65); } :root body .modal-content, :root body .modal-panel, :root body .upgrade-modal-panel, :root body .upgrade-modal-content, :root body .add-friend-modal-content, :root body .city-notes-modal-content, :root body .odds-calc-panel, :root body .upgrade-sheet-panel, :root body .legal-disclaimer-panel, :root body .prebuilt-cards-modal-shell, :root body .investigator-modal, :root body .investigator-hover-popup, :root body .cdm-panel, :root body .rules-toc, :root body .rules-card-popup, :root body .card-scanner-bar, :root body .deck-settings-menu, :root body .ah-select-list, :root body .ah-date-pop, :root body .scenario-combobox-list, :root body .tr-history-menu, :root body [data-campaign-books] .cb-tools-menu, :root body dialog.modal, :root body dialog.cev2-modal { background-color: rgba(21, 23, 24, 0.72) !important; -webkit-backdrop-filter: blur(22px) saturate(170%) !important; backdrop-filter: blur(22px) saturate(170%) !important; border: 1px solid rgba(168, 153, 115, 0.4) !important; border-radius: 10px !important; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(233, 215, 160, 0.12) !important; color: var(--fw-on-desk) !important; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root body .modal-content, :root body .modal-panel, :root body .upgrade-modal-panel, :root body .upgrade-modal-content, :root body .add-friend-modal-content, :root body .city-notes-modal-content, :root body .odds-calc-panel, :root body .upgrade-sheet-panel, :root body .legal-disclaimer-panel, :root body .prebuilt-cards-modal-shell, :root body .investigator-modal, :root body .investigator-hover-popup, :root body .cdm-panel, :root body .rules-toc, :root body .rules-card-popup, :root body .card-scanner-bar, :root body .deck-settings-menu, :root body .ah-select-list, :root body .ah-date-pop, :root body .scenario-combobox-list, :root body .tr-history-menu, :root body [data-campaign-books] .cb-tools-menu, :root body dialog.modal, :root body dialog.cev2-modal { background-color: rgba(21, 23, 24, 0.92) !important; } } /* A panel nested in a popup panel must not paint a second slab. */ :root body .upgrade-modal-panel .upgrade-modal-content { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .modal-content h2, :root body .modal-content h3, :root body .modal-panel h2, :root body .modal-panel h3, :root body .upgrade-modal-header h2, :root body .legal-disclaimer-panel h2, :root body .odds-calc-panel h2, :root body .odds-calc-panel h3, :root body .upgrade-sheet-panel h2, :root body dialog.modal h2, :root body dialog.modal h3, :root body .modal-title { font-family: var(--fw-serif) !important; font-weight: 400 !important; letter-spacing: -0.01em; color: var(--fw-on-desk) !important; text-transform: none !important; } :root body .modal-content .modal-close, :root body .modal-panel .modal-close, :root body .upgrade-modal-panel .modal-close, :root body .odds-calc-panel .odds-calc-close, :root body .rules-toc .rules-toc-close, :root body dialog.modal .modal-close { background: transparent !important; border: 1px solid var(--fw-field-edge) !important; border-radius: 3px !important; color: var(--fw-on-desk) !important; } /* ── Admin office ───────────────────────────────────────────────────── The masthead sits on the desk. Areas and views share one tray. Lists inside the workspace read as a ledger, not a stack of pills. */ :root body .main-content .admin-header { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 4px 2px 22px !important; margin: 0 0 6px !important; align-items: flex-end !important; gap: 24px !important; } :root body .main-content .admin-kicker { font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--fw-gold) !important; -webkit-text-fill-color: var(--fw-gold) !important; margin: 0 0 8px !important; } :root body .main-content .admin-header .subtitle { max-width: 42em; margin-top: 8px !important; color: var(--fw-on-desk-muted) !important; font-size: 14px !important; line-height: 1.45 !important; } :root body .main-content .visitor-counter { gap: 12px !important; padding: 10px 16px 10px 14px !important; border-radius: 6px !important; background: rgba(15, 17, 18, 0.55) !important; border: 1px solid var(--fw-line) !important; box-shadow: inset 0 1px 0 rgba(233, 215, 160, 0.08) !important; } :root body .main-content .visitor-counter .vc-dot { width: 8px !important; height: 8px !important; border-radius: 2px !important; background: var(--fw-gold) !important; box-shadow: none !important; animation: none !important; } :root body .main-content .visitor-counter .vc-num { font-size: 32px !important; line-height: 1 !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .main-content .visitor-counter .vc-label .vc-title { letter-spacing: 0.14em !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .main-content .visitor-counter.is-error .vc-num, :root body .main-content .visitor-counter.is-error .vc-label .vc-title { color: var(--fw-alert) !important; -webkit-text-fill-color: var(--fw-alert) !important; } :root body .main-content .visitor-counter.is-error .vc-dot { background: var(--fw-alert) !important; } :root body .main-content .admin-index { margin: 0 0 18px !important; padding: 0 !important; overflow: hidden; } :root body .main-content .admin-index .admin-tabs.admin-group-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--fw-line) !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .main-content .admin-index .admin-group-tab { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 12px 10px !important; border: 0 !important; border-right: 1px solid var(--fw-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--fw-on-desk-muted) !important; -webkit-text-fill-color: var(--fw-on-desk-muted) !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; white-space: nowrap !important; } :root body .main-content .admin-index .admin-group-tab:last-child { border-right: 0 !important; } :root body .main-content .admin-index .admin-group-tab:hover:not(.active) { background: rgba(237, 230, 211, 0.05) !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .main-content .admin-index .admin-group-tab.active { background: rgba(237, 230, 211, 0.08) !important; border-color: transparent !important; border-right: 1px solid var(--fw-line) !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; box-shadow: inset 0 -2px 0 var(--fw-gold) !important; } :root body .main-content .admin-index .admin-group-tab:last-child.active { border-right-color: transparent !important; } :root body .main-content .admin-index .admin-tab:focus-visible { outline: 2px solid var(--fw-gold) !important; outline-offset: -3px !important; } :root body .main-content .admin-actions .btn-admin:focus-visible { outline: 2px solid var(--fw-gold) !important; outline-offset: 2px !important; } :root body .main-content .admin-sidenav { position: static !important; max-height: none !important; width: 100% !important; margin: 0 !important; padding: 12px 14px !important; box-sizing: border-box !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root body .main-content .admin-sidenav .admin-tabs.admin-subtabs-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } :root body .main-content .admin-sidenav .admin-tabs.admin-subtabs-row[hidden] { display: none !important; } :root body .main-content .admin-sidenav .admin-tab { width: auto !important; min-height: 34px !important; padding: 6px 12px !important; justify-content: center !important; text-align: center !important; letter-spacing: 0.02em !important; text-transform: none !important; } :root body .main-content .admin-actions { padding: 12px 14px !important; margin-bottom: 14px !important; gap: 8px !important; } :root body .main-content .admin-shell-main .panel { padding: 22px 24px !important; } :root body .main-content .admin-shell-main .panel > .panel-title { padding-bottom: 12px !important; margin-bottom: 16px !important; border-bottom: 1px solid var(--fw-line) !important; } :root body .main-content .admin-shell-main h4 { font-family: var(--fw-serif) !important; font-weight: 400 !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .main-content .admin-shell-main th { font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--fw-on-desk-muted) !important; -webkit-text-fill-color: var(--fw-on-desk-muted) !important; border-bottom: 1px solid var(--fw-line) !important; padding: 10px 12px !important; } :root body .main-content .admin-shell-main td { border-bottom: 1px solid rgba(183, 177, 142, 0.12) !important; color: var(--fw-on-desk) !important; padding: 12px !important; } :root body .main-content .admin-shell-main tr:last-child td { border-bottom: 0 !important; } :root body .main-content .user-row { gap: 14px !important; padding: 16px 18px 14px 16px !important; border: 1px solid var(--fw-line) !important; border-left: 3px solid rgba(218, 198, 154, 0.72) !important; border-radius: 6px !important; } :root body .main-content .user-row-name:not(.is-empty), :root body .main-content .tarot-read-name { font-family: var(--fw-serif) !important; font-weight: 400 !important; font-size: 20px !important; letter-spacing: -0.01em !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; } :root body .main-content .user-row-name.is-empty { font-family: var(--fw-serif) !important; font-weight: 400 !important; font-size: 20px !important; } :root body .main-content .user-stats { gap: 0 8px !important; padding-top: 10px !important; border-top: 1px solid var(--fw-line) !important; } :root body .main-content .user-stat { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; padding: 2px 8px 0 0 !important; } :root body .main-content .user-stat-num { font-size: 18px !important; } :root body .main-content .user-flag { font-family: var(--fw-label) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.04em !important; padding: 3px 8px !important; border: 1px solid var(--fw-line) !important; border-radius: 2px !important; background: rgba(0, 0, 0, 0.22) !important; } :root body .main-content .tarot-read { border-left: 3px solid rgba(218, 198, 154, 0.72) !important; } :root body .main-content .an-stat-num { font-size: 32px !important; } :root body .main-content .an-heading { font-size: 20px !important; } :root body .main-content .admin-tab .ocr-tab-badge:not([hidden]) { margin-left: 8px !important; color: var(--fw-on-desk) !important; -webkit-text-fill-color: var(--fw-on-desk) !important; border-color: rgba(218, 198, 154, 0.55) !important; background: rgba(16, 18, 17, 0.55) !important; vertical-align: middle !important; }