/* VR Guide "Modernist" design tokens - matches VrGuideApp/Resources/Styles/Colors.xaml
   (the MAUI app's XAML resources don't transfer to CSS directly - these are the same hex
   values, re-expressed as CSS custom properties, per docs/vr-advocacy-app-ACTIVE.md Section 7).
   --color-accent is darkened from the MAUI app's raw #EC3013: at that brightness it fails
   WCAG AA 4.5:1 both as text-on-light (the "About this assistant" link, History/CTA links)
   and as a background behind white/near-white text (the "Log in" button, the sidebar brand
   mark) - the two problems are mirror images of the same luminance ceiling, since contrast
   ratio is symmetric, so one darker value (#BD260F, ~5:1 against white and the app's own
   --color-surface) fixes both at once instead of needing separate tokens per use. */
:root {
    --color-bg: #F3F2F2;
    --color-surface: #EAE9E9;
    --color-text: #201E1D;
    --color-text-muted: #605D5D;
    --color-accent: #BD260F;
    --color-accent-text: #FFFFFF;
    --color-divider: #66201E1D;
    --font-sans: 'Segoe UI', Arial, sans-serif;
}

/* Accessible view: high contrast, toggled via the AccessibilityMenu component (app-accessibility.js
   adds/removes this class on <html> and persists the choice in localStorage). Overriding the same
   tokens everything else already reads means most of the site adapts automatically. */
:root.a11y-high-contrast {
    --color-bg: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-text: #000000;
    --color-text-muted: #000000;
    --color-accent: #0B0080;
    --color-accent-text: #FFFFFF;
    --color-divider: #000000;
}

/* Accessible view: larger text. Sizing across the whole site is now rem-based (baseline:
   1rem = 16px, the unmodified browser default - no html/:root font-size is declared, so this
   tracks the user's real browser/OS text-size preference), so bumping the root font-size here
   does real responsive type/spacing scaling - every rem-sized rule across app.css,
   app-shell.css, and every page's inline styles grows together, instead of a page-wide zoom.
   Declared once here since <body> is shared by every layout, not per-layout. */
:root.a11y-large-text {
    font-size: 120%;
}

/* Skip-to-main-content link, shared by every layout since app.css always loads. Hidden off-screen
   until it receives keyboard focus, matching the standard skip-link pattern. */
.skip-link {
    position: absolute;
    top: -2.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.625rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    top: 0.5rem;
}

/* Routes.razor's <FocusOnNavigate Selector="h1" /> gives the page's <h1> tabindex="-1" and
   calls .focus() on it after every full navigation, purely so screen readers announce the new
   page - a real keyboard user can never Tab to it (tabindex="-1" excludes it from tab order),
   so the browser's default focus outline here is just a distracting box on every page load,
   not a signal any sighted keyboard user relies on. Suppressed here, shared by every layout
   since app.css always loads; every real interactive element (links/buttons/inputs) still gets
   its own deliberate :focus-visible outline elsewhere in this file and app-shell.css. */
h1:focus {
    outline: none;
}

/* AccessibilityMenu.razor - base styling, shared by every page since app.css always loads.
   app-shell.css restyles this for the authenticated app shell's own --app-* token set. */
.a11y-menu { position: relative; }
.a11y-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    padding: 0;
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    border-radius: 6px;
    cursor: pointer;
}
.a11y-menu-toggle svg { width: 18px; height: 18px; }
.a11y-menu-toggle:hover { background: var(--color-surface); }
.a11y-menu-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.a11y-menu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: #FFFFFF;
    color: var(--color-text);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    min-width: 10rem;
    font-family: var(--font-sans);
}
/* The panel's own display: flex (needed to stack the two options) otherwise beats the browser's
   very low-specificity [hidden] { display: none } default - without this, toggling the `hidden`
   attribute off/on from JS would have no visible effect. */
.a11y-menu-panel[hidden] { display: none !important; }
.a11y-menu-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; cursor: pointer; }
.a11y-menu-option input { cursor: pointer; }
.a11y-menu-option input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
}

a {
    color: inherit;
    text-decoration: none;
}

.page-shell {
    max-width: 42.5rem;
    margin: 0 auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-divider);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.site-header .wordmark {
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.0625rem;
}

.site-header nav {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    font-size: 0.8125rem;
}

.site-header nav a.active {
    color: var(--color-accent);
    font-weight: 700;
}

.btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.75rem 1.375rem;
    border: 1px solid var(--color-text);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    border-radius: 0;
}

.btn-primary {
    background: var(--color-text);
    color: #F8F4F4;
    border-color: var(--color-text);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.section {
    padding: 2.5rem 1.5rem;
    border-bottom: 1px solid var(--color-divider);
}

.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.0625rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-divider);
}

.tile-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-divider);
}

.tile {
    background: var(--color-bg);
    padding: 1.25rem;
}

.tile-list .tile {
    padding: 1.25rem 0;
}

.tile h2, .tile h3 {
    font-weight: 700;
    font-size: 0.9375rem;
    margin: 0 0 0.375rem;
}

.tile p {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0;
}

.eyebrow {
    font-size: 0.8125rem;
    /* Was an malformed 8-digit hex (#A6201E1D) that rendered as a barely-visible pinkish tint
       instead of a muted caption color - fails contrast outright. --color-text-muted is the
       token already used for this exact "muted caption" look elsewhere (.section-label, .tile p). */
    color: var(--color-text-muted);
}

.site-footer {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer a {
    color: var(--color-accent);
    font-weight: 700;
}

form.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 22.5rem;
}

form.stack label {
    font-size: 0.8125rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.375rem;
}

form.stack input,
form.stack select,
form.stack textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-divider);
    background: #fff;
    border-radius: 0;
}

form.stack textarea {
    resize: vertical;
    min-height: 6rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkbox-row label {
    margin: 0;
    min-width: 12.5rem;
}

.checkbox-row input[type="date"] {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-divider);
    background: #fff;
    border-radius: 0;
}

.checkbox-row input[type="date"]:disabled {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03125rem;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border: 1px solid currentColor;
}

.badge-complete {
    color: var(--color-text-muted);
}

.badge-active {
    color: var(--color-accent);
}

.badge-upcoming {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.field-error {
    color: var(--color-accent);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.form-message {
    font-size: 0.8125rem;
    padding: 0.75rem;
    border: 1px solid var(--color-divider);
    margin-bottom: 1rem;
}

.form-message.error {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

article.prose h1 { font-size: 1.625rem; }
article.prose h2 { font-size: 1.25rem; }
article.prose p, article.prose li { font-size: 0.875rem; line-height: 1.7; }

textarea.markdown-editor {
    width: 100%;
    min-height: 20rem;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    padding: 0.75rem;
    border: 1px solid var(--color-divider);
}

/* Chat bubbles are deliberately rounded, unlike the squared-off "Modernist" look used
   elsewhere on the site - a near-universal chat convention worth keeping distinct. */
.chat-message {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.875rem;
}

.chat-message.mine {
    align-items: flex-end;
}

.chat-message.theirs {
    align-items: flex-start;
}

.chat-speaker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03125rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.chat-bubble {
    max-width: 30rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-message.mine .chat-bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
}

.chat-message.theirs .chat-bubble {
    background: #FCE9E5;
    border: 1px solid var(--color-accent);
}

.chat-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.chat-actions button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    cursor: pointer;
}

.chat-actions button.flagged {
    color: var(--color-accent);
    font-weight: 700;
}

.chat-citations {
    margin-top: 0.5rem;
    max-width: 30rem;
}

.chat-citation-card {
    border: 1px solid var(--color-divider);
    background: var(--color-bg);
    padding: 0.625rem 0.75rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
}

.chat-typing .chat-bubble {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.875rem 1rem;
}

.chat-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.6;
}

.chat-input-bar {
    display: flex;
    gap: 0.625rem;
    align-items: flex-end;
    margin-top: 1rem;
}

.chat-input-bar textarea {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-divider);
    border-radius: 18px;
    resize: none;
    min-height: 1.25rem;
    max-height: 7.5rem;
    background: #fff;
}