/* Minimal styles for the Scioly Resource Vault app */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 12px;
    color: #111;
}

#app { width: 100%; box-sizing: border-box; }

/* Generic centered content container used across pages to guarantee identical widths */
.container { max-width:1088px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

.controls { display:flex; gap:10px; align-items:center; margin-bottom:14px; width:100%; padding:6px 12px; box-sizing:border-box; flex-wrap:wrap; }
.controls input[type="search"] { flex:1 1 320px; min-width:160px; padding:10px 12px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-card-bg); color:var(--color-text); box-shadow:none; }
.controls select.filter { padding:9px 10px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-card-bg); color:var(--color-text); }
.controls .scope-select { min-width:180px; }

.controls .control-btn { padding:9px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--color-text); cursor:pointer; font-weight:600; }
.controls .control-btn:hover { background: rgba(3,102,214,0.06); border-color: rgba(3,102,214,0.12); }
.controls .control-btn:active { transform:translateY(0.5px); }

/* Make specific toggles slightly highlighted */
.view-toggle, .theme-toggle { display:inline-flex; align-items:center; gap:8px; }

/* Focus styles for accessibility */
.controls input[type="search"]:focus, .controls select.filter:focus, .controls .control-btn:focus { outline:3px solid rgba(3,102,214,0.14); outline-offset:2px; }
.controls .spacer { flex:1 1 auto; min-width:8px; }

/* Theme variables - default (light) */
:root {
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-muted: #555555;
    --color-card-bg: #ffffff;
    --color-border: #e6e6e6;
    --color-link: #0366d6;
}

/* Dark theme overrides */
body.dark {
    --color-bg: #0b0b0d;
    --color-text: #e6eef6;
    --color-muted: #bfc9d6;
    --color-card-bg: #0f1720;
    --color-border: #1f2a36;
    --color-link: #58a6ff;
}

body { background: var(--color-bg); color: var(--color-text); }

.results.list .card { display:flex; align-items:center; gap:8px; padding:4px 6px; border-bottom:1px solid var(--color-border); margin-bottom:4px; min-height:32px; }
.results.list .card:last-child { margin-bottom:0; border-bottom:1px solid var(--color-border); }
.results.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }

/* Make results take full width with a small horizontal gutter */
.results { width: 100%; margin: 0; box-sizing: border-box; padding: 0 12px; }
.card { background:var(--color-card-bg); border:1px solid var(--color-border); padding:6px; border-radius:8px; box-shadow:none; }

.card .title { font-weight:600; margin-bottom:6px; /* title is an <a> now */ }

/* List-specific layout: make title not flex so the anchor only sizes to its content; push meta to the right */
.results.list .card .title { margin-bottom:0; flex:0 0 auto; min-width:0; font-size:0.95rem; display:inline-flex; align-items:center; }
.results.list .meta { margin-top:0; flex:0 0 auto; display:flex; gap:6px; flex-wrap:nowrap; overflow:hidden; align-items:center; max-width:50%; align-self:center; margin-left: auto; }

/* Grid cards: align meta bubbles to start (under the title) */
.results.grid .card .meta { justify-content:flex-start; }

/* Bubbles will be defined below (consolidated) */

/* Source-specific styles */
.card .title { vertical-align:middle; display:inline-flex; align-items:center; line-height:1; }

/* Small source dot placed inside the title (left of text) */
/* Source meta-bubble styles */
.meta-bubble.source-bubble {
    /* unified green appearance for source bubbles */
    background: transparent;
    border-color: rgba(34,197,94,0.40);
    color: rgba(34,197,94,0.98);
    min-width: var(--meta-bubble-min-year, auto);
}
body.dark .meta-bubble.source-bubble {
    background: rgba(34,197,94,0.22);
    color: #f2fff7;
    border-color: transparent;
}

    /* Source bubbles use unified appearance (no per-source variants) */

/* (source bubble variants removed) */

/* Meta bubbles shown under the title: keep inline (no wrap) so bubbles line up horizontally */
.meta { margin-top:8px; display:flex; gap:4px; flex-wrap:nowrap; align-items:center; overflow:hidden; }
.meta-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* Per-type minimum widths are set dynamically at runtime. Remove max-width so bubbles size tightly. */
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font-weight: 600;
    height: 18px;
    line-height: 18px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Light mode: colored outline + colored text (subtle)
   Dark mode: filled colored bubbles with light text for contrast */
body.dark .meta-bubble { background: rgba(255,255,255,0.04); color:var(--color-muted); border-color: rgba(255,255,255,0.04); }

/* Light-mode outlines */
.meta-bubble[data-type="year"] { background: rgba(239,68,68,0.12); border-color: transparent; color: rgba(239,68,68,0.98); }
.meta-bubble[data-type="division"] { background: rgba(59,130,246,0.12); border-color: transparent; color: rgba(59,130,246,0.98); }
.meta-bubble[data-type="level"] { background: rgba(245,158,11,0.12); border-color: transparent; color: rgba(245,158,11,0.98); }

/* Dark-mode filled colors */
body.dark .meta-bubble[data-type="year"] { background: rgba(239,68,68,0.28); color: #fff4f4; border-color: transparent; }
body.dark .meta-bubble[data-type="division"] { background: rgba(59,130,246,0.28); color: #eaf4ff; border-color: transparent; }
body.dark .meta-bubble[data-type="level"] { background: rgba(245,158,11,0.28); color: #fff8e6; border-color: transparent; }

/* Per-type minimum widths (computed and set on the `.results` container at runtime) */
.meta-bubble[data-type="year"] { min-width: var(--meta-bubble-min-year, auto); }
.meta-bubble[data-type="division"] { min-width: var(--meta-bubble-min-division, auto); }
.meta-bubble[data-type="level"] { min-width: var(--meta-bubble-min-level, auto); }

/* Make title links look like normal text by default, but blue on hover */
.card .title {
	color: inherit;           /* same color as surrounding text */
	text-decoration: none;    /* no underline by default */
}
.card .title:hover {
    color: var(--color-link);           /* blue color on hover */
    text-decoration: underline;
}
.card .meta { color:var(--color-muted); font-size:0.9rem; margin-bottom:8px; }
/* .card .link removed: not used by current markup */

/* compact view CSS removed: feature not present in JS */

/* No list-specific bubble overrides — keep grid and list bubbles the same size */
.empty { padding:16px; color:#666; }

.error { color:#900; background:#fee; padding:10px; border-radius:6px; }

/* In dark mode remove the faint white highlight under cards */
body.dark .card { box-shadow: none; }

/* Footer styles */
.site-footer { margin-top:24px; padding:14px 0; border-top:1px solid var(--color-border); color:var(--color-muted); background:transparent; font-size:0.95rem; border-radius:6px; width:100%; box-sizing:border-box; }
.site-footer .container { max-width:1088px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.site-footer p { margin:6px 0; line-height:1.35; }
.site-footer strong { color:var(--color-text); }


/* Additional styles for the footer based on the new content and design */
.site-footer {
    background-color: #0b0b0d;
    color: #ffffff;
    padding: 2rem 0; /* remove horizontal padding so inner container aligns with other centered content */
    margin-top: 4rem;
    text-align: left;
    font-family: sans-serif;
}

/* Home section content width and spacing */
.home-inner { margin: 0 auto 32px; padding: 18px 24px 32px; }
.home-inner h2 { margin-top: 0; margin-bottom: 12px; }
.home-inner p { margin-bottom: 12px; line-height: 1.6; }

/* Header / brand */
.site-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; width:100%; padding:0 12px; box-sizing:border-box; position:relative; }


/* Ensure the site title looks like normal text (not a blue link) and sits left of the logo */
.site-title-link { color: var(--color-text); text-decoration: none; font-weight: 700; display:inline-flex; align-items:center; }
.site-title-link .site-title { color: inherit; }

/* Sidebar (slide-out) styles */
.sidebar-toggle { background:transparent; border:1px solid var(--color-border); padding:8px 10px; border-radius:8px; cursor:pointer; font-size:1.05rem; color:var(--color-text); }
.sidebar { position:fixed; left:0; top:0; bottom:0; width:260px; max-width:80vw; background:var(--color-card-bg); border-right:1px solid var(--color-border); box-shadow:none; transform:translateX(-100%); transition:transform 220ms cubic-bezier(.2,.8,.2,1); z-index:1200; padding:18px 12px; box-sizing:border-box; }
.sidebar.open { transform:translateX(0); }
.sidebar .site-tabs { display:flex; flex-direction:column; gap:8px; }
.sidebar .tab-btn { text-align:left; width:100%; }
.sidebar .tab-btn[aria-selected="true"] { background: rgba(3,102,214,0.06); border-color: rgba(3,102,214,0.12); }
.sidebar-header { display:flex; align-items:center; gap:10px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--color-border); }
.sidebar-header .sidebar-title { font-weight:700; font-size:1rem; color:var(--color-text); }
.sidebar-header .logo { width:34px; height:34px; display:inline-grid; place-items:center; border-radius:6px; background:var(--color-link); color:#fff; font-weight:700; }
.sidebar-overlay { position:fixed; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.28); opacity:0; pointer-events:none; transition:opacity 180ms ease; z-index:1100; }
.sidebar-overlay.visible { opacity:1; pointer-events:auto; }
.sidebar-overlay.hidden { opacity:0; pointer-events:none; }

/* Dark mode tweak for the sidebar toggle to ensure visibility */
body.dark .sidebar-toggle { color: var(--color-text); border-color: var(--color-border); background: rgba(255,255,255,0.02); }
@media (prefers-reduced-motion: no-preference) {
    .sidebar-toggle { transition: border-color 160ms ease, background 120ms ease; }
    .sidebar-toggle:hover { border-color: var(--color-text); background: rgba(3,102,214,0.02); }
    .sidebar-toggle:focus { outline: 3px solid rgba(3,102,214,0.12); outline-offset: 2px; }
}
/* Dark-mode hover for sidebar toggle */
@media (prefers-reduced-motion: no-preference) {
    body.dark .sidebar-toggle:hover { border-color: var(--color-text); background: rgba(3,102,214,0.04); }
}

/* Tabs */
.site-tabs { margin-left:16px; display:inline-flex; gap:8px; }
.tab-btn { background:transparent; border:1px solid transparent; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; color:var(--color-text); }
.tab-btn[aria-selected="true"] { background:var(--color-card-bg); border-color:var(--color-border); box-shadow:none; }
.tab-btn:focus { outline:3px solid rgba(3,102,214,0.14); outline-offset:2px; }

/* Simple utility to hide/show areas */
.hidden { display:none !important; }

/* Resources placeholder */
#resources { padding:12px; }
#resources .resources-inner { background:var(--color-card-bg); border:1px solid var(--color-border); padding:14px; border-radius:8px; }
.home-link { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--color-text); }
.site-title { font-size:1.05rem; font-weight:600; }

/* Make the logo have a subtle border that changes color on hover */
.logo { display:inline-grid; place-items:center; width:40px; height:40px; background:var(--color-link); color:#fff; border-radius:8px; font-weight:700; border:2px solid transparent; box-sizing:border-box; }

@media (prefers-reduced-motion: no-preference) {
    .logo { transition: border-color 160ms ease, box-shadow 160ms ease; }
    .home-link:hover .logo { border-color: var(--color-text); box-shadow: none; }
}

/* footer-content removed: not present in markup */

.contact-btn {
    background-color: #3b82f6; /* A clean blue color */
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.contact-btn:hover {
    background-color: #2563eb;
    text-decoration: underline;
}

.controls .control-btn, .view-toggle, .theme-toggle {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--color-border);
    background:var(--color-card-bg);
    color:var(--color-text);
    cursor:pointer;
    font-weight:600;
    box-shadow:none;
    transition:background 120ms ease, box-shadow 160ms ease, transform 60ms ease;
}

/* Make the view toggle and metadata button use normal weight (not bold)
    and align them to the right of the controls area. */
.controls .view-toggle, .controls .metadata-btn { font-weight: 400; }
.controls .view-toggle { margin-left: auto; }

/* Scope select uses `.scope-select` in markup. */

/* Settings panel (dropdown) */
.settings-btn { background: transparent; }
.settings-panel { position:absolute; top:calc(100% + 8px); right:12px; margin-top:0; min-width:200px; background:var(--color-card-bg); border:1px solid var(--color-border); border-radius:8px; padding:10px; box-shadow:none; z-index:200; display:none; }
.settings-panel[aria-hidden="false"] { display:flex; flex-direction:column; align-items:center; gap:6px; }
.settings-panel .theme-toggle { margin:0; width:100%; box-sizing:border-box; max-width:320px; }

/* Make theme toggle and reset button share a compact, outlined style */
.settings-panel .theme-toggle,
.settings-panel #reset-saved-session,
.settings-panel #open-links-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    font-weight: 600;
    box-shadow: none;
    width:100%;
    max-width:320px;
    justify-content:flex-start;
}

/* Ensure all settings buttons use the same typography and sizing */
.settings-panel .theme-toggle,
.settings-panel #reset-saved-session,
.settings-panel #open-links-toggle {
    font-size: 0.95rem;
    line-height: 1.2;
    min-height: 44px;
}
.settings-panel .theme-toggle:hover,
.settings-panel #reset-saved-session:hover,
.settings-panel #open-links-toggle:hover {
    background: rgba(3,102,214,0.04);
    border-color: rgba(3,102,214,0.08);
}
.settings-panel .theme-toggle:focus,
.settings-panel #reset-saved-session:focus,
.settings-panel #open-links-toggle:focus {
    outline: 3px solid rgba(3,102,214,0.14);
    outline-offset: 2px;
}

/* Visual state for the toggle when ON */
/* Toggle updates label text instead of using a visual class */

/* Compact menu styling for site-wide settings row (checkbox + reset) */
.settings-panel .setting-row {
    display:flex;
    flex-direction:column; /* stack into a single column */
    align-items:stretch;
    gap:6px;
    padding:0 8px;
    border-radius:6px;
    margin-top:0; /* remove extra gap between theme toggle and setting row */
    width:100%;
    max-width:320px;
}
.settings-panel #reset-saved-session { padding:8px 10px; font-size:0.92rem; border-radius:6px; align-self:stretch; width:100%; }
.settings-panel .setting-row:hover { background: rgba(3,102,214,0.02); }

/* Ensure buttons inside the setting row align as a single column and look consistent */
.settings-panel .setting-row button,
.settings-panel .setting-row .theme-toggle,
.settings-panel .setting-row #open-links-toggle,
.settings-panel .setting-row #reset-saved-session {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
}

/* Ensure the main theme toggle matches the setting-row buttons so all align */
.settings-panel .theme-toggle {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    justify-content: flex-start;
    text-align: left;
    min-height: 44px;
    margin: 0;

}

/* Ensure buttons in the settings panel use consistent box-sizing, border, and sizing */
.settings-panel .setting-row button,
.settings-panel .setting-row .theme-toggle,
.settings-panel .setting-row #open-links-toggle,
.settings-panel .setting-row #reset-saved-session,
.settings-panel .theme-toggle {
    box-sizing: border-box;
    border-width: 1px;
    box-shadow: none;
}

@media (min-width:421px) {
    /* on wider viewports keep compact single-column but limit the max width */
    .settings-panel .setting-row { max-width:320px; }
}

/* Metadata panel reuses settings-panel styling; small tweaks */
.metadata-panel { min-width:180px; max-width:calc(100vw - 32px); width:auto; padding:8px; display:none; }
.metadata-panel[aria-hidden="false"] { display:block; }
.metadata-panel .meta-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    transition: background 150ms ease;
}
.metadata-panel .meta-option input { margin-right:8px; transform:translateY(1px); }

/* Checked states: use background tint only (no left border indicator) */
.metadata-panel .meta-option.meta-checked[data-type="year"] { background: rgba(239,68,68,0.10); }
.metadata-panel .meta-option.meta-checked[data-type="division"] { background: rgba(59,130,246,0.12); }
.metadata-panel .meta-option.meta-checked[data-type="level"] { background: rgba(245,158,11,0.12); }
/* Make the Source option appear green when checked to match source bubbles */
.metadata-panel .meta-option.meta-checked[data-type="source"] { background: rgba(34,197,94,0.10); }

.metadata-panel .meta-option:hover { background: rgba(3,102,214,0.03); }

/* Use the platform-native checkbox tint where supported */
.metadata-panel .meta-option[data-type="year"] input { accent-color: rgba(239,68,68,0.95); }
.metadata-panel .meta-option[data-type="division"] input { accent-color: rgba(59,130,246,0.95); }
.metadata-panel .meta-option[data-type="level"] input { accent-color: rgba(245,158,11,0.95); }
/* Source checkbox tint color */
.metadata-panel .meta-option[data-type="source"] input { accent-color: rgba(34,197,94,0.95); }

/* Quick action row (All / None) at top of metadata panel: small outline-only buttons */
.metadata-panel .quick-actions { display:flex; gap:8px; margin-bottom:8px; }
.metadata-panel .control-btn.quick { flex:0 0 auto; padding:6px 8px; border-radius:8px; font-weight:700; font-size:0.85rem; background:transparent; color:var(--color-text); border:1px solid rgba(0,0,0,0.12); }
.metadata-panel .control-btn.quick:hover { background: rgba(3,102,214,0.04); box-shadow: none; }
/* In dark mode use white text and a faint white outline to ensure contrast */
body.dark .metadata-panel .control-btn.quick { color:#ffffff; border-color: rgba(255,255,255,0.12); }
body.dark .metadata-panel .control-btn.quick:hover { background: rgba(255,255,255,0.04); }
/* Keep primary class behavior subtle (same outline style but slightly bolder) */
.metadata-panel .control-btn.quick.primary { border-width:1.5px; }

.metadata-panel .meta-option:focus-within { outline: 3px solid rgba(3,102,214,0.12); outline-offset: 2px; }

/* Restyle settings toggle: show gear icon and caret, with clear hover/focus states */
.site-header .settings-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    margin-left: auto;
    box-sizing: border-box;
}
.site-header .settings-btn::before {
    content: '⚙';
    display: inline-block;
    line-height: 1;
    font-size: 1.05rem;
}
.site-header .settings-btn::after {
    content: '▾';
    display: inline-block;
    margin-left: 6px;
    font-size: 0.85rem;
    transition: transform 160ms ease;
    color: var(--color-muted);
}

/* Remove any default focus ring and use our custom outline */
.site-header .settings-btn:focus { outline:3px solid rgba(3,102,214,0.14); outline-offset:2px; box-shadow:none; }
.settings-btn[aria-expanded="true"]::after { transform: rotate(180deg); color:var(--color-text); }
.settings-btn:hover { background: rgba(3,102,214,0.04); border-color: rgba(3,102,214,0.12); }
.settings-btn:focus { outline:3px solid rgba(3,102,214,0.14); outline-offset:2px; box-shadow:none; }

/* Slight visual lift for the open panel */
.settings-panel[aria-hidden="false"] { box-shadow:none; }

/* Primary style for highlight buttons (e.g., contact/report) */
.controls .control-btn.primary, .contact-btn {
    background:var(--color-link);
    color:#fff;
    border-color:transparent;
}

.controls .control-btn:hover, .view-toggle:hover, .theme-toggle:hover {
    background: rgba(3,102,214,0.06);
}
.controls .control-btn.primary:hover, .contact-btn:hover { box-shadow:none; }
.controls .control-btn:active { transform:translateY(0.5px); }

/* Accessible focus ring */
.controls .control-btn:focus, .view-toggle:focus, .theme-toggle:focus, .contact-btn:focus {
    outline:3px solid rgba(3,102,214,0.14);
    outline-offset:2px;
}

/* Dark-mode tweaks: keep contrast */
body.dark .controls .control-btn { background: #0f1720; color:var(--color-text); border-color: rgba(255,255,255,0.03); }
body.dark .controls .control-btn.primary, body.dark .contact-btn { background:var(--color-link); color:#fff; }