:root {
    color-scheme: light;
    --fp-accent: #2f6feb;
    --fp-bg: #f7f8fa;
    --fp-text: #1c1f24;
    --fp-border: #d8dce1;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--fp-bg);
    color: var(--fp-text);
}

.site-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--fp-border);
}

.site-header .brand {
    font-weight: 600;
    text-decoration: none;
    color: var(--fp-text);
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-nav a {
    color: var(--fp-accent);
    text-decoration: none;
}

.site-nav a:hover {
    text-decoration: underline;
}

.help-section {
    margin-bottom: 1.5rem;
}

.help-inline {
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: 4px;
}

.help-inline summary {
    cursor: pointer;
    font-weight: 600;
}

.site-main {
    padding: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

.logout-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--fp-accent);
    text-decoration: none;
    cursor: pointer;
}

.logout-btn:hover {
    text-decoration: underline;
}

/* admin console */
.admin-section { margin: 1.5rem 0; }
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #e0e0e0; }
.admin-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin: 0.5rem 0; }
.admin-form label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
.admin-form input, .admin-form select { padding: 0.35rem; }
.hint { color: #666; font-size: 0.85rem; }
/* A consequence the reader must not skim, shown beside the control that causes
   it. A class rather than an inline style attribute: style-src carries
   'unsafe-inline' for exactly two templates and
   tests/test_web_hardening.py::test_style_src_relaxation_is_still_justified
   fails if a third starts relying on it. */
.hint--warning { border-left: 3px solid #c0392b; padding-left: 10px; }

/* tuning panel collapsed at top of the dashboard */
details.tuning-panel > summary { cursor: pointer; padding: 0.5rem 0; font-weight: 500; }
.rerank-form { margin-top: 0.75rem; }

/* quick lenses (preset keyword shortcuts) */
.lens-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.6rem 0 0.25rem; }
.lens-label { font-size: 0.8rem; color: #555; font-weight: 600; margin-right: 0.25rem; }
.lens-form { display: inline; margin: 0; }
.lens-chip { border: 1px solid #c9d4e3; background: #eef3fb; color: #1a3a5c; border-radius: 16px; padding: 0.3rem 0.7rem; font-size: 0.82rem; cursor: pointer; }
.lens-chip:hover { background: #dce8fa; }
.lens-chip.active { background: #2f6feb; border-color: #2f6feb; color: #fff; font-weight: 600; }
.lens-chip.active:hover { background: #255dc4; }

/* keyword/objective chips (tuning panel) */
.chip-container { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
    background: #eef1f5; border: 1px solid var(--fp-border); border-radius: 14px;
    padding: 0.2rem 0.4rem 0.2rem 0.7rem; font-size: 0.85rem;
}
.chip-remove {
    border: none; background: none; cursor: pointer; font-size: 0.95rem; line-height: 1;
    padding: 0.1rem 0.3rem; color: #666; border-radius: 50%;
}
.chip-remove:hover { color: #c0392b; background: #fbeaea; }

/* admin per-instructor digest editor */
.digest-form { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.digest-form select { font-size: 0.78rem; padding: 0.2rem; }

/* forum-url inline editor */
.url-form { display: flex; gap: 0.3rem; align-items: center; }
.url-form input[type=url] { min-width: 15rem; font-size: 0.8rem; padding: 0.2rem; }

/* dashboard readability */
.dashboard-intro { color: #444; margin: 0.25rem 0 1rem; max-width: 62ch; line-height: 1.45; }
.muted { color: #888; font-weight: normal; font-size: 0.85rem; }
.table-help { color: #3a3a3a; font-size: 0.85rem; background: #f5f7fa; padding: 0.55rem 0.8rem;
    border-radius: 6px; margin: 0.5rem 0 0.75rem; line-height: 1.5; max-width: 70ch; }
.cluster-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.priority-cell { white-space: nowrap; }
.priority-track { display: inline-block; width: 64px; height: 8px; background: #e5e9f0;
    border-radius: 4px; vertical-align: middle; overflow: hidden; }
.priority-bar { display: block; height: 100%; background: #3f77b3; }
.priority-num { font-size: 0.78rem; color: #777; margin-left: 6px; }
.engagement-note { color: #666; font-size: 0.78rem; margin-top: 0.15rem; }
.empty-state { background: #f5f7fa; padding: 1rem; border-radius: 6px; color: #444; max-width: 60ch; }
.badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 10px; font-size: 0.72rem;
    font-weight: 700; letter-spacing: 0.02em; margin-left: 0.5rem; vertical-align: middle; }
.badge-question { background: #fde3cf; color: #8a3b12; border: 1px solid #f0a875; }
.badge-pending { background: #e7e9ee; color: #54586a; border: 1px solid #c7cbd6; font-weight: 600; }
.btn-primary { background: #3f77b3; color: #fff; border: none; padding: 0.45rem 0.95rem;
    border-radius: 5px; cursor: pointer; font-size: 0.9rem; }
.btn-primary:hover { background: #35668f; }
.rerank-form { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; flex-wrap: wrap; }
details.tuning-panel { margin-top: 1.75rem; border-top: 1px solid #e2e2e2; padding-top: 0.4rem; }
details.tuning-panel > summary { cursor: pointer; font-size: 1.05rem; padding: 0.45rem 0; }

/* one-shot confirmation banner after a state-changing action (Sarah's B6/A7/
   general feedback: no visual sign anything happened). Each kind gets its own
   background/border/icon so success, warning and error are distinguishable
   without relying on color alone (border style + icon differ, not just hue). */
.flash {
    margin: 0 0 1rem; padding: 0.6rem 0.9rem 0.6rem 2.2rem; border-radius: 6px;
    border: 1px solid; font-size: 0.9rem; position: relative; line-height: 1.4;
}
.flash::before {
    position: absolute; left: 0.8rem; top: 0.55rem; font-weight: 700;
}
.flash-success {
    background: #eaf7ee; border-color: #a7d7b4; color: #205c32;
}
.flash-success::before { content: "\2713"; color: #2f8a49; }
.flash-warning {
    background: #fff6e0; border-color: #e8c766; color: #6b4c00;
}
.flash-warning::before { content: "!"; color: #a3760a; }
.flash-error {
    background: #fdecea; border-color: #e6a4a0; color: #7a2015;
}
.flash-error::before { content: "\2715"; color: #c0392b; }

/* chip add/remove confirmation (Sarah's A6): rendered inline in the htmx-
   swapped partial itself, since a session flash never reaches this fragment. */
.chip-note { margin: 0 0 0.5rem; padding: 0.35rem 0.7rem 0.35rem 1.9rem; font-size: 0.82rem; }
.chip-note::before { left: 0.6rem; top: 0.35rem; }