"""Light/dark palettes and layout CSS for the grading app."""

from __future__ import annotations

# Paper & ink (light) and night clerk (dark). Pass/fail stay green/red in both.
LIGHT = {
    "--bg": "#F5F3EE",
    "--bg-sidebar": "#EFECE6",
    "--surface": "#FFFcf7",
    "--surface-2": "#F3EFE7",
    "--text": "#1C1917",
    "--text-muted": "#57534E",
    "--border": "#D6D3CB",
    "--accent": "#1E3A5F",
    "--accent-soft": "#E4EAF1",
    "--start": "#C2D4E8",
    "--start-hover": "#B0C6DE",
    "--start-fg": "#1E3A5F",
    "--start-border": "#1E3A5F",
    "--pass": "#BFE8CE",
    "--pass-hover": "#A9DDC0",
    "--pass-fg": "#0F5132",
    "--pass-border": "#0F5132",
    "--fail": "#F5C4C1",
    "--fail-hover": "#EEB0AC",
    "--fail-fg": "#8A1C16",
    "--fail-icon": "#8A1C16",
    "--fail-border": "#8A1C16",
    "--ungraded": "#D4CFC6",
    "--shadow": "0 1px 2px rgba(28, 25, 23, 0.06), 0 8px 24px rgba(28, 25, 23, 0.06)",
    "--tip-bg": "#1C1917",
    "--tip-fg": "#FAFAF9",
    "--color-scheme": "light",
}

DARK = {
    "--bg": "#14171C",
    "--bg-sidebar": "#181C22",
    "--surface": "#1C2129",
    "--surface-2": "#242A33",
    "--text": "#E7E5E4",
    "--text-muted": "#A8A29E",
    "--border": "#2A3038",
    "--accent": "#9BB0C7",
    "--accent-soft": "#243044",
    "--start": "#2A4568",
    "--start-hover": "#355682",
    "--start-fg": "#E4EAF1",
    "--start-border": "transparent",
    "--pass": "#1B5E3B",
    "--pass-hover": "#237A4C",
    "--pass-fg": "#E8F8EE",
    "--pass-border": "transparent",
    "--fail": "#8F2A28",
    "--fail-hover": "#A43532",
    "--fail-fg": "#FDECEC",
    "--fail-icon": "#8F2A28",
    "--fail-border": "transparent",
    "--ungraded": "#3A414C",
    "--shadow": "0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28)",
    "--tip-bg": "#0F1216",
    "--tip-fg": "#F5F5F4",
    "--color-scheme": "dark",
}

_LAYOUT_CSS = """
html, body, .stApp, [data-testid="stAppViewContainer"], [data-testid="stMain"],
[data-testid="stHeader"], [data-testid="stToolbar"], section.main {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    color-scheme: var(--color-scheme);
}
textarea, input, select {
    color-scheme: var(--color-scheme);
}
[data-testid="stHeader"] {
    background: var(--bg) !important;
}
[data-testid="stDecoration"] {
    background: var(--accent) !important;
}
[data-testid="stAppViewContainer"],
[data-testid="stMain"],
section.main {
    overflow-x: auto !important;
}
.block-container {
    padding-top: 1.6rem;
    padding-bottom: 3rem;
    max-width: calc(48.75rem + 8.25rem + 4rem);
    min-width: calc(48.75rem + 8.25rem + 2rem);
    margin-left: auto;
    margin-right: auto;
}
.block-container:has(.grading-top-align) {
    padding-top: 4.1rem;
}
.block-container:has(.stats-page) {
    padding-top: 5.4rem;
    max-width: 70rem;
    min-width: 0;
}
[data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stHeader"] {
    background: transparent !important;
}
[data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stSidebar"],
[data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stSidebarCollapsedControl"],
[data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stExpandSidebarButton"],
[data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="collapsedControl"] {
    display: none !important;
}
[data-testid="stAppViewContainer"]:has(.stats-page)
    div[data-testid="stHorizontalBlock"]:has(.st-key-btn_stats_back),
[data-testid="stAppViewContainer"]:has(.stats-page)
    div[data-testid="stHorizontalBlock"]:has(.st-key-btn_admin_back) {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
.stApp iframe[height="0"],
.stApp iframe[height="1"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
[data-testid="stSidebar"] {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border) !important;
}
[data-testid="stSidebar"] * {
    color: var(--text);
}
[data-testid="stSidebar"] .stMarkdown,
[data-testid="stSidebar"] .stCaption,
[data-testid="stSidebar"] label,
[data-testid="stSidebar"] p,
[data-testid="stSidebar"] span {
    color: var(--text) !important;
}
[data-testid="stSidebar"] .stCaption,
[data-testid="stSidebar"] .stCaption p {
    color: var(--text-muted) !important;
}
[data-testid="stSidebarContent"] {
    padding-top: 0.75rem;
}
div[data-testid="stSidebarCollapseButton"],
div[data-testid="stSidebarCollapsedControl"],
div[data-testid="stExpandSidebarButton"],
div[data-testid="collapsedControl"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
[data-testid="stSidebarCollapseButton"] button,
[data-testid="stSidebarHeader"] button,
[data-testid="stSidebarCollapsedControl"] button,
[data-testid="stExpandSidebarButton"] button,
[data-testid="collapsedControl"] button,
button[data-testid="stSidebarCollapseButton"],
button[data-testid="stSidebarCollapsedControl"],
button[data-testid="stExpandSidebarButton"],
button[data-testid="collapsedControl"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    min-height: 2.4rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}
[data-testid="stSidebarCollapseButton"] button:hover,
[data-testid="stSidebarHeader"] button:hover,
[data-testid="stSidebarCollapsedControl"] button:hover,
[data-testid="stExpandSidebarButton"] button:hover,
[data-testid="collapsedControl"] button:hover,
button[data-testid="stSidebarCollapseButton"]:hover,
button[data-testid="stSidebarCollapsedControl"]:hover,
button[data-testid="stExpandSidebarButton"]:hover,
button[data-testid="collapsedControl"]:hover {
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--accent) !important;
}
[data-testid="stSidebarCollapseButton"] button:focus-visible,
[data-testid="stSidebarHeader"] button:focus-visible,
[data-testid="stSidebarCollapsedControl"] button:focus-visible,
[data-testid="stExpandSidebarButton"] button:focus-visible,
[data-testid="collapsedControl"] button:focus-visible,
button[data-testid="stSidebarCollapseButton"]:focus-visible,
button[data-testid="stSidebarCollapsedControl"]:focus-visible,
button[data-testid="stExpandSidebarButton"]:focus-visible,
button[data-testid="collapsedControl"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}
/* Material icons have their own Streamlit color; button color cannot override it.
   Share this rule across both controls, including the opener outside the sidebar. */
:is(
    [data-testid="stSidebarCollapseButton"],
    [data-testid="stSidebarHeader"] button,
    [data-testid="stSidebarCollapsedControl"],
    [data-testid="stExpandSidebarButton"],
    [data-testid="collapsedControl"]
) :is(svg, [data-testid="stIconMaterial"]) {
    fill: var(--text) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}
.stApp p, .stApp li, .stApp label, .stApp .stMarkdown, .stApp .stCaption {
    color: var(--text);
}
.stApp .stCaption, .stApp .stCaption p {
    color: var(--text-muted) !important;
}
h1, h2, h3, h4, [data-testid="stHeading"] {
    color: var(--text) !important;
    letter-spacing: -0.02em;
}
[data-testid="stAlert"] {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
[data-testid="stSidebar"] .stMarkdown p {
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 42ch;
}
hr, [data-testid="stDivider"] {
    border-color: var(--border) !important;
}
[data-testid="stTextInput"] input,
[data-testid="stNumberInput"] input,
[data-testid="stSelectbox"] div[data-baseweb="select"] > div,
[data-testid="stSelectbox"] div[data-baseweb="select"] > div > div,
[data-testid="stSelectbox"] [role="group"],
[data-testid="stSelectbox"] input[role="combobox"] {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-testid="stSelectbox"] button[aria-haspopup="listbox"] {
    background: transparent !important;
    color: var(--text) !important;
}
[data-testid="stWidgetLabel"] p,
[data-testid="stWidgetLabel"] label {
    color: var(--text-muted) !important;
}
.st-key-login_actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}
.st-key-login_fields {
    display: grid !important;
    grid-template-columns: 4fr 1fr;
    gap: 0.5rem 1rem;
    align-items: end;
}
.st-key-login_fields .st-key-login_username {
    grid-column: 1;
    grid-row: 1;
}
.st-key-login_fields .st-key-chk_test_user {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 0.35rem !important;
}
.st-key-login_fields .st-key-login_password {
    grid-column: 1 / -1;
    grid-row: 2;
}
.st-key-chk_test_user {
    padding-bottom: 0.35rem !important;
}
.st-key-chk_test_user label,
.st-key-chk_test_user p,
.st-key-chk_test_user span {
    font-size: 0.78rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}
.grading-progress {
    height: 0.55rem;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.grading-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: inherit;
}

.sidebar-gap {
    height: 1.35rem;
}
.sidebar-gap-sm {
    height: 0.85rem;
}
.sidebar-user {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--text-muted);
}
[data-testid="stSidebar"] [data-testid="stElementContainer"]:has(.st-key-btn_signout),
[data-testid="stSidebar"] [data-testid="stElementContainer"]:has(.st-key-btn_view_as_exit),
[data-testid="stSidebar"] [data-testid="element-container"]:has(.st-key-btn_signout),
[data-testid="stSidebar"] [data-testid="element-container"]:has(.st-key-btn_view_as_exit) {
    margin-bottom: 0 !important;
}
[data-testid="stSidebar"] [data-testid="stElementContainer"]:has(.sidebar-user),
[data-testid="stSidebar"] [data-testid="element-container"]:has(.sidebar-user) {
    margin-top: -0.85rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}
[data-testid="stSidebar"] [data-testid="stMarkdownContainer"]:has(.sidebar-user),
[data-testid="stSidebar"] [data-testid="stMarkdownContainer"]:has(.sidebar-user) p {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    text-align: center !important;
}
.card-meta {
    margin: 0.85rem 0 2.35rem;
    padding: 0.75rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.st-key-card_meta_box {
    margin: 0.85rem 0 2.35rem;
    padding: 0;
    background: transparent;
    border: 0;
}
.card-meta-rest {
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.card-meta-rest p {
    margin: 0 !important;
}
.card-meta div + div,
.card-meta-rest div + div {
    margin-top: 0.2rem;
}
.card-meta strong,
.card-meta-rest strong {
    color: var(--text);
    font-weight: 600;
}
.card-jump-label,
.card-jump-of {
    font-size: 0.86rem;
    line-height: 1.25;
    color: var(--text-muted) !important;
    font-weight: 400;
    white-space: nowrap;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stMarkdownContainer"],
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stMarkdownContainer"] p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}
.card-jump-error {
    background: var(--fail);
    color: var(--fail-fg);
    border: 1px solid var(--fail-border);
    border-radius: 0.45rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.35;
}
.card-jump-error-ts {
    display: none !important;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin-top: 0.45rem !important;
    width: 100% !important;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stHorizontalBlock"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.25em !important;
    justify-content: flex-start !important;
    width: 100% !important;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stHorizontalBlock"] > [data-testid="stColumn"],
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stHorizontalBlock"] > [data-testid="column"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stHorizontalBlock"] > [data-testid="stColumn"]:has(.st-key-btn_card_go),
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to)
    [data-testid="stHorizontalBlock"] > [data-testid="column"]:has(.st-key-btn_card_go) {
    margin-left: auto !important;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to):not(:focus-within)
    [data-testid="stColumn"]:has(.st-key-btn_card_go),
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to):not(:focus-within)
    [data-testid="column"]:has(.st-key-btn_card_go) {
    display: none !important;
}
[data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to):not(:focus-within) .st-key-btn_card_go {
    display: none !important;
}
.st-key-card_jump_to [data-testid="stWidgetLabel"],
.st-key-card_jump_to [data-testid="InputInstructions"] {
    display: none !important;
}
.st-key-card_jump_to,
.st-key-card_jump_to [data-testid="stTextInput"],
.st-key-card_jump_to [data-testid="stTextInputRootElement"],
.st-key-card_jump_to [data-baseweb="input"],
.st-key-card_jump_to [data-baseweb="base-input"] {
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.st-key-card_jump_to [data-baseweb="input"] > div {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.st-key-card_jump_to input {
    box-sizing: content-box !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--text) !important;
    text-align: center !important;
    line-height: 1.875em !important;
    min-height: 0 !important;
    height: 1.875em !important;
    min-width: 3ch !important;
    max-width: 6ch !important;
    width: 3ch !important;
    padding: 0.075em 0.18em !important;
    margin: 0 !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.2rem !important;
    field-sizing: content;
}
.st-key-btn_card_go button {
    min-height: 1.85rem !important;
    font-size: 0.86rem !important;
    font-weight: 650 !important;
    padding: 0.15rem 0.55rem !important;
    background: var(--pass) !important;
    color: var(--pass-fg) !important;
    border: 1px solid var(--pass-border) !important;
}
.st-key-btn_card_go button p,
.st-key-btn_card_go button span {
    color: var(--pass-fg) !important;
}
.st-key-btn_card_go button:hover {
    background: var(--pass-hover) !important;
    border-color: var(--pass-border) !important;
    color: var(--pass-fg) !important;
}
.st-key-btn_card_go button:hover p,
.st-key-btn_card_go button:hover span {
    color: var(--pass-fg) !important;
}
.sidebar-instructions-label {
    margin: 0.4rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sidebar-save-note {
    margin: 0.35rem 0 0.55rem;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
}
.sidebar-instructions {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    max-width: 42ch;
}
.grading-question {
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
    max-width: 48.75rem;
    box-sizing: border-box;
    padding: 1.15rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    box-shadow: var(--shadow);
    color: var(--text);
}
.grading-question strong {
    font-weight: 700;
    color: var(--text);
}
.grading-question em,
.grading-answer em {
    font-style: italic;
}

.grading-header {
    margin: 0 0 1.15rem;
    padding-bottom: 0.85rem;
    max-width: 48.75rem;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
}
.grading-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.grading-term {
    font-family: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 2.15rem;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: var(--text);
}
.grading-fol {
    font-size: 1.85rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
}
.grading-concept {
    margin-top: 0.35rem;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-align: right;
    color: var(--text);
}
.grading-answer {
    max-width: 48.75rem;
    box-sizing: border-box;
    padding: 1.15rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    box-shadow: var(--shadow);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
}
.grading-answer strong {
    font-weight: 700;
    color: var(--text);
}
.grading-answer.is-unknown {
    font-style: italic;
    color: var(--text-muted);
}
.sidebar-fail-reasons {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.35rem 0 0.55rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text);
}
.sidebar-fail-reason {
    margin: 0;
}
.grading-verdict-gap {
    height: 1.1rem;
}
[data-testid="column"]:has(.grading-answer),
[data-testid="stColumn"]:has(.grading-answer),
[data-testid="column"]:has(.grading-verdict-anchor),
[data-testid="stColumn"]:has(.grading-verdict-anchor) {
    max-width: 48.75rem !important;
    min-width: 48.75rem !important;
    flex: 0 0 48.75rem !important;
}
.grading-verdict-anchor {
    display: none;
}
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) {
    --verdict-row-gap: 1rem;
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        var(--verdict-row-gap)
        minmax(0, 1fr)
        minmax(0, 0.25fr)
        minmax(0, 1fr)
        minmax(0, 0.25fr)
        minmax(0, 1fr);
    align-items: stretch !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    max-width: 48.75rem;
    width: 100%;
}
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="stColumn"],
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="column"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
}
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="stColumn"]:has(.st-key-btn_fail_completeness),
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="column"]:has(.st-key-btn_fail_completeness) {
    grid-column: 1 !important;
}
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="stColumn"]:has(.st-key-btn_fail_relevance),
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="column"]:has(.st-key-btn_fail_relevance) {
    grid-column: 3 !important;
}
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="stColumn"]:has(.st-key-btn_fail_other),
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="column"]:has(.st-key-btn_fail_other) {
    grid-column: 5 !important;
}
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="stColumn"]:has(.st-key-btn_pass),
div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4))
    > [data-testid="column"]:has(.st-key-btn_pass) {
    grid-column: 7 !important;
}

.st-key-btn_theme button,
.st-key-btn_stats button {
    min-height: 3.4rem !important;
    height: 3.4rem !important;
    font-size: 1.05rem !important;
    font-weight: 650 !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    white-space: nowrap !important;
}
.st-key-btn_theme button:hover,
.st-key-btn_stats button:hover,
.st-key-btn_admin_console button:hover {
    background: var(--surface-2) !important;
    border-color: var(--accent) !important;
}
[data-testid="stSidebar"] div[data-testid="stHorizontalBlock"]:has(.st-key-btn_theme):has(.st-key-btn_stats)
    > [data-testid="stColumn"],
[data-testid="stSidebar"] div[data-testid="stHorizontalBlock"]:has(.st-key-btn_theme):has(.st-key-btn_stats)
    > [data-testid="column"] {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
}

.st-key-btn_stats_back,
.st-key-btn_stats_theme,
.st-key-btn_admin_back,
.st-key-btn_admin_theme {
    position: fixed !important;
    top: 1.05rem !important;
    z-index: 1000001 !important;
    width: 3.15rem !important;
    height: 3.15rem !important;
}
.st-key-btn_stats_back,
.st-key-btn_admin_back {
    left: 1.1rem !important;
}
.st-key-btn_stats_theme,
.st-key-btn_admin_theme {
    left: 4.55rem !important;
}
.st-key-btn_stats_back button,
.st-key-btn_stats_theme button,
.st-key-btn_admin_back button,
.st-key-btn_admin_theme button {
    width: 3.15rem !important;
    height: 3.15rem !important;
    min-height: 3.15rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}
.st-key-btn_stats_back button:hover,
.st-key-btn_stats_theme button:hover,
.st-key-btn_admin_back button:hover,
.st-key-btn_admin_theme button:hover {
    background: var(--surface-2) !important;
    border-color: var(--accent) !important;
}
.st-key-btn_stats_back [data-testid="stMarkdownContainer"],
.st-key-btn_stats_theme [data-testid="stMarkdownContainer"],
.st-key-btn_admin_back [data-testid="stMarkdownContainer"],
.st-key-btn_admin_theme [data-testid="stMarkdownContainer"] {
    display: none !important;
}
.st-key-btn_stats_back [data-testid="stIconMaterial"],
.st-key-btn_stats_theme [data-testid="stIconMaterial"],
.st-key-btn_admin_back [data-testid="stIconMaterial"],
.st-key-btn_admin_theme [data-testid="stIconMaterial"] {
    font-size: 1.45rem !important;
    line-height: 1 !important;
}
.stats-page {
    color: var(--text);
}
.stats-hero {
    margin: 0 0 1.5rem;
}
.stats-hero-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 2.15rem;
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem;
    color: var(--text);
}
.stats-hero-kicker,
.stats-muted,
.stats-caption {
    margin: 0;
    color: var(--text-muted) !important;
    font-size: 0.95rem;
    line-height: 1.45;
}
.stats-caption {
    margin-top: 0.85rem;
}
.stats-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.15rem;
    box-shadow: var(--shadow);
    padding: 1.35rem 1.45rem 1.5rem;
    margin-bottom: 1.15rem;
}
.stats-panel-you {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.stats-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.stats-panel-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.stats-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.stats-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.9rem 1rem 1rem;
}
.stats-panel-you .stats-kpi {
    background: var(--surface);
}
.stats-panel-you .stats-kpi-pass {
    background: var(--pass);
}
.stats-panel-you .stats-kpi-fail {
    background: var(--fail);
}
.stats-panel-you .stats-kpi-ungraded {
    background: var(--surface-2);
}
.stats-kpi-pass {
    border-color: var(--pass-border);
    background: var(--pass);
}
.stats-kpi-fail {
    border-color: var(--fail-border);
    background: var(--fail);
}
.stats-kpi-ungraded {
    background: var(--surface-2);
}
.stats-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.stats-kpi-pass .stats-kpi-label,
.stats-kpi-pass .stats-kpi-value,
.stats-kpi-pass .stats-kpi-pct {
    color: var(--pass-fg) !important;
}
.stats-kpi-fail .stats-kpi-label,
.stats-kpi-fail .stats-kpi-value,
.stats-kpi-fail .stats-kpi-pct {
    color: var(--fail-fg) !important;
}
.stats-kpi-value {
    font-size: 1.85rem;
    font-weight: 750;
    line-height: 1.15;
    margin: 0.2rem 0 0.15rem;
    color: var(--text);
}
.stats-kpi-pct {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.stats-bar {
    display: flex;
    width: 100%;
    height: 0.95rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
}
.stats-bar .seg {
    display: block;
    height: 100%;
    width: 0;
}
.stats-bar .seg-pass {
    background: var(--pass);
}
.stats-bar .seg-fail {
    background: var(--fail);
}
.stats-bar .seg-ungraded {
    background: var(--ungraded);
}
.stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.15rem;
    margin: 0.65rem 0 0;
}
.stats-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.stats-legend-swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
}
.stats-legend-pass .stats-legend-swatch {
    background: var(--pass);
}
.stats-legend-fail .stats-legend-swatch {
    background: var(--fail);
}
.stats-legend-ungraded .stats-legend-swatch {
    background: var(--ungraded);
}
.stats-subhead {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.15rem 0 0.55rem;
}
.stats-reasons,
.stats-juris {
    display: grid;
    gap: 0.45rem;
}
.stats-reason-row,
.stats-juri-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 3.2rem;
    gap: 0.65rem;
    align-items: center;
}
.stats-juri-row {
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 8.5rem;
}
.stats-reason-name,
.stats-juri-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
}
.stats-reason-n,
.stats-juri-nums {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.stats-reason-track {
    height: 0.45rem;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.stats-reason-fill {
    height: 100%;
    width: 0;
    background: var(--fail);
    border-radius: inherit;
}
.stats-users {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.75rem;
}
.stats-user-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.85rem 0.9rem 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.stats-user-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.stats-user-card-open {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.stats-user-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.55rem;
    color: var(--text);
}
.admin-user-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.65rem;
}
.admin-user-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}
.admin-user-activity {
    width: 100%;
    /* Cancel Streamlit's implicit inter-widget gap; the remaining visual gap
       equals the card's bottom padding and keeps this line vertically centered. */
    margin: -0.27rem 0 0;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text-muted);
    font-style: italic;
}
.admin-user-trashed .admin-user-name {
    color: var(--text-muted);
}
.admin-user-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.admin-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.admin-badge-trashed {
    color: var(--fail-fg);
}
.st-key-admin_graders,
.st-key-admin_testers {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 1.15rem !important;
    box-shadow: var(--shadow) !important;
    padding: 1.1rem 1.2rem 1.25rem !important;
    margin-bottom: 1.15rem !important;
}
[class*="st-key-admin_card_"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.9rem !important;
    padding: 0.85rem 0.9rem 1.67rem !important;
    margin-bottom: 0.15rem !important;
}
[class*="st-key-admin_card_"]
    div[data-testid="stHorizontalBlock"]:has([class*="st-key-admin_fab_"])
    > [data-testid="stColumn"],
[class*="st-key-admin_card_"]
    div[data-testid="stHorizontalBlock"]:has([class*="st-key-admin_fab_"])
    > [data-testid="column"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 3.15rem !important;
}
[class*="st-key-admin_fab_view_"],
[class*="st-key-admin_fab_edit_"],
[class*="st-key-admin_fab_trash_"] {
    width: 3.15rem !important;
    height: 3.15rem !important;
}
[class*="st-key-admin_fab_view_"] button,
[class*="st-key-admin_fab_edit_"] button {
    width: 3.15rem !important;
    height: 3.15rem !important;
    min-height: 3.15rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}
[class*="st-key-admin_fab_trash_"] button {
    width: 3.15rem !important;
    height: 3.15rem !important;
    min-height: 3.15rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    color: var(--fail-icon) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}
[class*="st-key-admin_fab_view_"] button:hover,
[class*="st-key-admin_fab_edit_"] button:hover {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
}
[class*="st-key-admin_fab_trash_"] button:hover {
    background: var(--surface) !important;
    border-color: transparent !important;
    box-shadow: var(--shadow) !important;
    color: var(--fail-hover) !important;
}
[class*="st-key-admin_fab_trash_"] button:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}
[class*="st-key-admin_fab_view_"] [data-testid="stMarkdownContainer"],
[class*="st-key-admin_fab_edit_"] [data-testid="stMarkdownContainer"],
[class*="st-key-admin_fab_trash_"] [data-testid="stMarkdownContainer"] {
    display: none !important;
}
[class*="st-key-admin_fab_view_"] [data-testid="stIconMaterial"],
[class*="st-key-admin_fab_edit_"] [data-testid="stIconMaterial"],
[class*="st-key-admin_fab_trash_"] [data-testid="stIconMaterial"] {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    color: inherit !important;
}
.st-key-admin_remove_cancel button {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.st-key-admin_remove_trash button {
    background: var(--surface) !important;
    color: var(--fail-icon) !important;
    border: 1px solid var(--fail-icon) !important;
}
.st-key-admin_remove_trash button:hover {
    background: var(--surface-2) !important;
    color: var(--fail-hover) !important;
    border-color: var(--fail-hover) !important;
}
.st-key-admin_remove_delete button {
    background: var(--fail) !important;
    color: var(--fail-fg) !important;
    border: 1px solid var(--fail) !important;
}
.st-key-admin_remove_delete button:hover {
    background: var(--fail-hover) !important;
    color: var(--fail-fg) !important;
}
.st-key-admin_edit_cancel button {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.st-key-admin_edit_save button {
    background: var(--start) !important;
    color: var(--start-fg) !important;
    border: 1px solid var(--start-border) !important;
}
.st-key-admin_edit_save button:disabled,
.st-key-admin_edit_save button[disabled] {
    opacity: 0.45 !important;
}
[data-testid="stDialog"] > div,
div[role="dialog"] {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}
[data-testid="stDialog"] h2,
div[role="dialog"] h2,
[data-testid="stDialog"] p,
div[role="dialog"] p,
[data-testid="stDialog"] label,
div[role="dialog"] label {
    color: var(--text) !important;
}
[data-baseweb="popover"],
[data-baseweb="menu"],
ul[role="listbox"] {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
li[role="option"] {
    background: var(--surface) !important;
    color: var(--text) !important;
}
li[role="option"][aria-selected="true"],
li[role="option"]:hover {
    background: var(--surface-2) !important;
}
.st-key-admin_jurisdiction_select label,
.st-key-admin_jurisdiction_select p,
.st-key-admin_jurisdiction_select span {
    color: var(--text) !important;
}
.stats-user-card .stats-bar {
    height: 0.55rem;
}
.stats-user-nums {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.stats-num-pass {
    color: var(--pass-fg);
}
.stats-num-fail {
    color: var(--fail-fg);
}
.st-key-stats_grader_toggles {
    display: none !important;
}
.stats-panel-head .stats-muted {
    text-align: right;
    max-width: 16rem;
}
@media (max-width: 720px) {
    .stats-kpi-row {
        grid-template-columns: 1fr;
    }
    .stats-reason-row,
    .stats-juri-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .stats-reason-n,
    .stats-juri-nums {
        text-align: left;
    }
}
.st-key-btn_jump_last_skipped button,
.st-key-btn_jump_last_graded button,
.st-key-btn_jump_last_viewed button,
.st-key-btn_jump_furthest_viewed button {
    min-height: 4.6rem !important;
    width: 100% !important;
    white-space: pre-line !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.st-key-btn_jump_last_skipped button p,
.st-key-btn_jump_last_skipped button span,
.st-key-btn_jump_last_graded button p,
.st-key-btn_jump_last_graded button span,
.st-key-btn_jump_last_viewed button p,
.st-key-btn_jump_last_viewed button span,
.st-key-btn_jump_furthest_viewed button p,
.st-key-btn_jump_furthest_viewed button span {
    white-space: pre-line !important;
    line-height: 1.2 !important;
    color: var(--text) !important;
}
.st-key-btn_jump_last_skipped button:hover,
.st-key-btn_jump_last_graded button:hover,
.st-key-btn_jump_last_viewed button:hover,
.st-key-btn_jump_furthest_viewed button:hover {
    background: var(--surface-2) !important;
    border-color: var(--accent) !important;
}
.st-key-btn_signout button,
.st-key-btn_view_as_exit button {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
}
.st-key-btn_signout button:hover,
.st-key-btn_view_as_exit button:hover {
    color: var(--text) !important;
    border-color: var(--text-muted) !important;
}
.st-key-btn_admin_console button {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
[data-testid="stToast"] {
    width: 12rem !important;
    max-width: 12rem !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}
[data-testid="stToast"] * {
    color: var(--text) !important;
}
button[data-testid="stBaseButton-primary"],
.stButton button[kind="primary"] {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

.st-key-btn_start,
.st-key-btn_review,
.st-key-btn_signin {
    max-width: 48.75rem;
}
.st-key-btn_start button,
.st-key-btn_start button[kind="primary"],
.st-key-btn_start button[data-testid="stBaseButton-primary"],
.st-key-btn_review button,
.st-key-btn_review button[kind="primary"],
.st-key-btn_review button[data-testid="stBaseButton-primary"],
.st-key-btn_signin button,
.st-key-btn_signin button[kind="primary"],
.st-key-btn_signin button[data-testid="stBaseButton-primary"],
.st-key-btn_signin button[data-testid="stBaseButton-secondaryFormSubmit"],
.st-key-btn_signin button[kind="primaryFormSubmit"] {
    min-height: 4.25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background-color: var(--start) !important;
    border: 1px solid var(--start-border) !important;
    color: var(--start-fg) !important;
}
.st-key-btn_start button p,
.st-key-btn_start button span,
.st-key-btn_review button p,
.st-key-btn_review button span,
.st-key-btn_signin button p,
.st-key-btn_signin button span {
    color: var(--start-fg) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.st-key-btn_start button:hover,
.st-key-btn_review button:hover,
.st-key-btn_signin button:hover {
    background-color: var(--start-hover) !important;
    border-color: var(--start-border) !important;
    color: var(--start-fg) !important;
}
.st-key-btn_start button:hover p,
.st-key-btn_start button:hover span,
.st-key-btn_review button:hover p,
.st-key-btn_review button:hover span,
.st-key-btn_signin button:hover p,
.st-key-btn_signin button:hover span {
    color: var(--start-fg) !important;
}

.st-key-btn_register button {
    min-height: 4.25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--start-border) !important;
    color: var(--start-fg) !important;
}
.st-key-btn_register button p,
.st-key-btn_register button span {
    color: var(--start-fg) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.st-key-btn_register button:hover {
    background-color: var(--surface-2) !important;
    border-color: var(--start-border) !important;
    color: var(--start-fg) !important;
}
.st-key-btn_register button:hover p,
.st-key-btn_register button:hover span {
    color: var(--start-fg) !important;
}

.st-key-btn_fail_completeness button,
.st-key-btn_fail_relevance button,
.st-key-btn_fail_clarity button,
.st-key-btn_fail_correctness button,
.st-key-btn_fail_other button {
    min-height: 4.25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 0.45rem !important;
    background-color: var(--fail) !important;
    border: 1px solid var(--fail-border) !important;
    color: var(--fail-fg) !important;
}
.st-key-btn_fail_completeness button p,
.st-key-btn_fail_completeness button span,
.st-key-btn_fail_relevance button p,
.st-key-btn_fail_relevance button span,
.st-key-btn_fail_clarity button p,
.st-key-btn_fail_clarity button span,
.st-key-btn_fail_correctness button p,
.st-key-btn_fail_correctness button span,
.st-key-btn_fail_other button p,
.st-key-btn_fail_other button span {
    color: var(--fail-fg) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.st-key-btn_fail_completeness button kbd,
.st-key-btn_fail_relevance button kbd,
.st-key-btn_fail_clarity button kbd,
.st-key-btn_fail_correctness button kbd,
.st-key-btn_fail_other button kbd {
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
.st-key-btn_fail_completeness button:hover,
.st-key-btn_fail_relevance button:hover,
.st-key-btn_fail_clarity button:hover,
.st-key-btn_fail_correctness button:hover,
.st-key-btn_fail_other button:hover {
    background-color: var(--fail-hover) !important;
    border-color: var(--fail-border) !important;
    color: var(--fail-fg) !important;
}
.st-key-btn_fail_completeness button:hover p,
.st-key-btn_fail_completeness button:hover span,
.st-key-btn_fail_relevance button:hover p,
.st-key-btn_fail_relevance button:hover span,
.st-key-btn_fail_clarity button:hover p,
.st-key-btn_fail_clarity button:hover span,
.st-key-btn_fail_correctness button:hover p,
.st-key-btn_fail_correctness button:hover span,
.st-key-btn_fail_other button:hover p,
.st-key-btn_fail_other button:hover span {
    color: var(--fail-fg) !important;
}
.st-key-btn_pass button,
.st-key-btn_pass button[kind="primary"],
.st-key-btn_pass button[kind="secondary"],
.st-key-btn_pass button[data-testid="stBaseButton-primary"],
.st-key-btn_pass button[data-testid="stBaseButton-secondary"] {
    min-height: 4.25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 0.45rem !important;
    background-color: var(--pass) !important;
    border: 1px solid var(--pass-border) !important;
    color: var(--pass-fg) !important;
}
.st-key-btn_pass button p,
.st-key-btn_pass button span {
    color: var(--pass-fg) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.st-key-btn_pass button kbd {
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
.st-key-btn_pass button:hover {
    background-color: var(--pass-hover) !important;
    border-color: var(--pass-border) !important;
    color: var(--pass-fg) !important;
}
.st-key-btn_pass button:hover p,
.st-key-btn_pass button:hover span {
    color: var(--pass-fg) !important;
}
.block-container:has(.view-as-readonly) .st-key-btn_fail_completeness button,
.block-container:has(.view-as-readonly) .st-key-btn_fail_relevance button,
.block-container:has(.view-as-readonly) .st-key-btn_fail_clarity button,
.block-container:has(.view-as-readonly) .st-key-btn_fail_correctness button,
.block-container:has(.view-as-readonly) .st-key-btn_fail_other button,
.block-container:has(.view-as-readonly) .st-key-btn_pass button,
.block-container:has(.view-as-readonly) .st-key-other_fail_text textarea {
    opacity: 0.45 !important;
    filter: grayscale(0.25);
    cursor: not-allowed !important;
}

.st-key-other_fail_text [data-testid="InputInstructions"],
.st-key-other_fail_text [data-testid="stCaptionContainer"] {
    display: none !important;
}
.st-key-other_fail_text,
.st-key-other_fail_text [data-testid="stTextArea"],
.st-key-other_fail_text [data-testid="stTextAreaRootElement"],
.st-key-other_fail_text [data-baseweb="textarea"] {
    min-height: 4.25rem !important;
    height: auto !important;
}
.st-key-other_fail_text textarea {
    min-height: 4.25rem !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    border-radius: 0.45rem !important;
    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    color-scheme: var(--color-scheme) !important;
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.st-key-other_fail_text [data-testid="stTextAreaRootElement"],
.st-key-other_fail_text [data-baseweb="textarea"],
.st-key-other_fail_text [data-baseweb="base-input"] {
    color-scheme: var(--color-scheme) !important;
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.st-key-other_fail_text textarea::placeholder {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
    opacity: 1 !important;
}
.grading-card-label {
    margin: 0 0 0.35rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
[data-testid="column"]:has(.st-key-btn_fail_other) [data-testid="stVerticalBlock"],
[data-testid="stColumn"]:has(.st-key-btn_fail_other) [data-testid="stVerticalBlock"],
[data-testid="column"]:has(.st-key-btn_fail_completeness) [data-testid="stVerticalBlock"],
[data-testid="stColumn"]:has(.st-key-btn_fail_completeness) [data-testid="stVerticalBlock"],
[data-testid="column"]:has(.st-key-btn_fail_relevance) [data-testid="stVerticalBlock"],
[data-testid="stColumn"]:has(.st-key-btn_fail_relevance) [data-testid="stVerticalBlock"] {
    gap: var(--verdict-row-gap, 1rem);
    height: 100%;
    display: flex;
    flex-direction: column;
}
[data-testid="column"]:has(.st-key-btn_pass) [data-testid="stVerticalBlock"],
[data-testid="stColumn"]:has(.st-key-btn_pass) [data-testid="stVerticalBlock"] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.grading-legend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}
.grading-legend.is-pass {
    background: var(--pass);
    color: var(--pass-fg);
    border: 1px solid var(--pass-border);
}
.grading-legend.is-fail {
    background: var(--fail);
    color: var(--fail-fg);
    border: 1px solid var(--fail-border);
}
.grading-legend-caption {
    margin: 0.4rem 0 0.85rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text) !important;
    font-weight: 400;
}
.grading-graded {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    max-width: 48.75rem;
    margin-top: 0.65rem;
    padding: 0.35rem 0.9rem;
    border-radius: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.grading-graded.is-pass {
    background: var(--pass);
    color: var(--pass-fg);
    border: 1px solid var(--pass-border);
}
.grading-graded.is-fail {
    background: var(--fail);
    color: var(--fail-fg);
    border: 1px solid var(--fail-border);
}
.grading-graded-icon {
    font-family: "Material Symbols Rounded", "Material Symbols Outlined", sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    color: inherit;
    -webkit-font-smoothing: antialiased;
}

div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip) {
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    min-width: calc(48.75rem + 8.25rem + 1rem);
}
div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip)
    > [data-testid="stColumn"]:has(.grading-question),
div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip)
    > [data-testid="column"]:has(.grading-question) {
    height: auto !important;
    min-height: auto !important;
}
div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip)
    > [data-testid="stColumn"]:has(.grading-question)
    [data-testid="stVerticalBlock"],
div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip)
    > [data-testid="column"]:has(.grading-question)
    [data-testid="stVerticalBlock"] {
    height: auto !important;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
div[data-testid="stElementContainer"]:has(.grading-question),
div[data-testid="element-container"]:has(.grading-question) {
    height: auto !important;
    flex-shrink: 0 !important;
}
div[data-testid="stElementContainer"]:has(.grading-answer),
div[data-testid="element-container"]:has(.grading-answer) {
    height: auto !important;
    flex-shrink: 0 !important;
    margin-top: auto;
}
/* Streamlit's markdown inner flex sizes to unpadded text (~16px short of
   the question/answer boxes). Unwrap it so the column tracks the real boxes. */
div[data-testid="stMarkdown"]:has(.grading-question),
div[data-testid="stMarkdown"]:has(.grading-answer),
div[data-testid="stMarkdown"]:has(.grading-question) > div,
div[data-testid="stMarkdown"]:has(.grading-answer) > div,
div[data-testid="stMarkdownContainer"]:has(.grading-question),
div[data-testid="stMarkdownContainer"]:has(.grading-answer) {
    display: contents !important;
}
[data-testid="column"]:has(.st-key-btn_skip),
[data-testid="stColumn"]:has(.st-key-btn_skip) {
    flex: 0 0 8.25rem !important;
    max-width: 8.25rem !important;
    min-width: 8.25rem !important;
}
[data-testid="column"]:has(.st-key-btn_skip) > div,
[data-testid="stColumn"]:has(.st-key-btn_skip) > div,
[data-testid="column"]:has(.st-key-btn_skip) [data-testid="stVerticalBlock"],
[data-testid="stColumn"]:has(.st-key-btn_skip) [data-testid="stVerticalBlock"] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
}
.st-key-btn_undo {
    margin-top: auto;
}
.st-key-btn_undo,
.st-key-btn_skip {
    flex: 0 0 7.75rem;
    width: 8.25rem;
}
.st-key-btn_undo button,
.st-key-btn_skip button,
.st-key-btn_undo button > div,
.st-key-btn_skip button > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}
.st-key-btn_undo button,
.st-key-btn_skip button {
    white-space: normal !important;
    box-sizing: border-box !important;
    min-height: 7.75rem !important;
    height: 7.75rem !important;
    max-width: 8.25rem !important;
    width: 8.25rem !important;
    padding: 0.55rem 0.5rem !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.st-key-btn_undo button *,
.st-key-btn_skip button * {
    white-space: normal !important;
}
.st-key-btn_undo button p,
.st-key-btn_skip button p {
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    margin: 0 !important;
}
.st-key-btn_undo button p::before,
.st-key-btn_skip button p::before {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.12rem;
}
.st-key-btn_undo button p::after,
.st-key-btn_skip button p::after {
    display: block;
    white-space: pre-line !important;
    font-weight: 500;
    font-size: 0.82rem;
    line-height: 1.25;
}
.st-key-btn_undo button p::before {
    content: "Back";
}
.st-key-btn_skip button p::before {
    content: "Skip";
}
.st-key-btn_undo button p::after {
    content: "to previous\Aquestion";
}
.st-key-btn_skip button p::after {
    content: "to next\Aquestion";
}
.st-key-btn_undo button kbd,
.st-key-btn_skip button kbd {
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-top: 0.2rem !important;
}
.st-key-btn_undo button:hover,
.st-key-btn_skip button:hover {
    background: var(--surface-2) !important;
    border-color: var(--accent) !important;
}

.glossary-tip {
    position: relative;
    display: inline-block;
    margin: 0 0.12rem 0 0.02rem;
    padding: 0 0.18rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-muted);
    vertical-align: 0.55em;
    cursor: help;
}
.glossary-tip .glossary-bubble {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.35rem);
    z-index: 1000;
    width: max-content;
    max-width: min(18rem, 70vw);
    padding: 0.85rem 1rem;
    border-radius: 0.45rem;
    background: var(--tip-bg);
    color: var(--tip-fg);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: var(--shadow);
    pointer-events: none;
}
.glossary-tip:hover .glossary-bubble {
    visibility: visible;
    opacity: 1;
}

/* Hide Streamlit shortcut/help portals; do not hide HoverTarget (wraps buttons). */
[data-testid="stTooltipContent"],
[data-testid="stTooltipError"],
[data-baseweb="tooltip"],
div[role="tooltip"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
"""

# Applied only for light theme so dark placeholder contrast stays unchanged.
_LIGHT_ONLY_CSS = """
[data-testid="stTextInput"] input::placeholder,
[data-testid="stNumberInput"] input::placeholder,
[data-testid="stTextArea"] textarea::placeholder {
    color: var(--text) !important;
    opacity: 1 !important;
}
"""


def css_for(theme: str) -> str:
    """Return a full stylesheet for ``light`` or ``dark``."""
    palette = DARK if theme == "dark" else LIGHT
    root = ";\n".join(f"  {key}: {value}" for key, value in palette.items())
    light_extra = _LIGHT_ONLY_CSS if theme != "dark" else ""
    return (
        '@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&family=Source+Serif+4:ital,wght@1,600;1,700&display=swap");\n'
        f":root, .stApp, [data-testid='stSidebar'] {{\n{root};\n}}\n{_LAYOUT_CSS}{light_extra}"
    )