/* ============================================
   CALPADS CCI Data Audit Tool - Styles
   ============================================
   Shared SBCSS theme (colors, header, footer, container, typography,
   buttons) lives in /css/sbcss-tool.css. This file only covers audit-
   tool-specific styles (tables, drop zones, audit cards, etc.).

   The audit intentionally widens .container to full viewport below so
   data tables use all available space; see that rule's comment. */

/* ---- Page background ------------------------------------------------------
   MATCHES THE DATA PORTAL HOME PAGE, which is #f7f7f7 (--tk-bg in
   /css/main.css, applied there through body.page-home). Without this the audit
   tool falls back to the sitewide --sbcss-bg, #f0f6fb, a light blue, and the
   two pages visibly disagree when you move between them.

   WHY THE VALUE IS REPEATED RATHER THAN THE CLASS REUSED. main.css scopes that
   background to .page-home deliberately, because it is also loaded by
   /state-course-codes/ and an unscoped body rule would restyle that tool too.
   Reusing the class would mean loading the whole of main.css into the audit
   tool for one declaration, and inheriting everything else in it. So the value
   is stated here instead. If --tk-bg ever changes, change this with it. */
body { background-color: #f7f7f7; }


/* ---- Main Container ---- */
.container {
    /* No max-width cap: the audit is a data-dense tool, so on wide
       monitors we let tables use the full viewport width (minus a bit
       of edge padding so content doesn't touch the window edge). */
    max-width: none;
    width: 100%;            /* explicit fill so child content can't resize us */
    margin: 0 auto;
    padding: 20px 32px 40px;
    flex: 1;
    min-width: 0;           /* flex children need min-width: 0 to respect width */
}

.audit-section {
    /* Explicit width lock so expanding a section can't make the card any
       wider than a collapsed one, regardless of the content inside it. */
    width: 100%;
    min-width: 0;
}

.section-body {
    /* Prevent any runaway-wide child (e.g. a data table with lots of
       columns) from stretching the section card. Internal tables use
       their own .audit-table-wrapper { overflow-x: auto } to scroll. */
    min-width: 0;
    max-width: 100%;
}

/* ---- Upload Section ---- */
.upload-section {
    background: white;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

/* Upload row: caps the two drop-zones so they don't stretch across the
   full viewport on wide monitors (the parent .container is uncapped on
   purpose for data tables; the upload step doesn't benefit from that
   width). Each column takes 50% up to 420px, then wraps and fills width
   on narrower screens. */
.upload-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 880px;
    margin: 0 auto;
}
.upload-col {
    flex: 1 1 280px;
    max-width: 420px;
    min-width: 0;
}

.upload-section h2 {
    color: #026AB0;
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
}

.upload-section .subtitle {
    color: #666;
    margin: 0 0 24px;
    font-size: 0.95rem;
}

.drop-zone {
    border: 2px dashed #80B4D7;
    border-radius: 8px;
    padding: 20px 16px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
    height: 240px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.drop-zone:hover,
.drop-zone.drag-over {
    background-color: #e8f2fa;
    border-color: #026AB0;
}

.drop-zone .drop-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
    display: block;
    color: #80B4D7;
}

.drop-zone p {
    margin: 0 0 3px;
    font-size: 0.9rem;
    color: #555;
}

.drop-zone .browse-line {
    margin-top: auto;
}

.drop-zone .browse-link {
    color: #026AB0;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.drop-zone .file-hint {
    font-size: 0.82rem;
    color: #999;
    margin-top: 5px;
}

#file-input,
#file-input-319 {
    display: none;
}

.file-info {
    margin-top: 8px;
    font-size: 0.82rem;
    color: #026AB0;
    font-weight: 500;
    display: none;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.file-info.visible {
    display: block;
}

/* ---- Toolbar (filter, print) ---- */
.toolbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    background: white;
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.toolbar.visible {
    display: flex;
}

.toolbar label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-right: 8px;
}

.toolbar select {
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    min-width: 250px;
    background: white;
}

.toolbar-actions {
    display: flex;
    gap: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.2s;
}

.btn-primary {
    background-color: #026AB0;
    color: white;
}

.btn-primary:hover {
    background-color: #015a96;
}

.btn-accent {
    background-color: #FFBA2D;
    color: #026AB0;
}

.btn-accent:hover {
    background-color: #f0ad1e;
}

.btn-outline {
    background-color: #fff;
    color: #026AB0;
    box-shadow: inset 0 0 0 1px #cfe0ee;
}

.btn-outline:hover {
    background-color: #eef5fb;
}

/* ---- Demo-mode row under the upload area ---- */
.demo-row {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px dashed #cdd5e0;
    border-radius: 10px;
    background: #fafbfd;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.demo-row .demo-prompt {
    margin: 0;
    color: #4a5568;
    font-size: 0.95rem;
    text-align: left;
    max-width: 540px;
}
.demo-row #btn-try-demo {
    padding: 10px 22px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* In-report demo banner, shown when the audit was run on sample data */
.demo-banner {
    background: linear-gradient(90deg, #FFE9B0 0%, #FFD46A 100%);
    border: 1px solid #f0d090;  /* was a 6px left-edge stripe */
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 18px;
    color: #6b4500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.demo-banner strong { color: #3d2900; }
@media print { .demo-banner { background: #fff7df; color: #3d2900; } }

/* ---- Report Header ---- */
.report-header {
    display: none;
    background: white;
    border: 1px solid #cfe0ef;  /* was a 6px left-edge stripe */
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.report-header.visible {
    display: block;
}

.report-header h2 {
    margin: 0 0 14px;
    color: #026AB0;
    font-size: 1.3rem;
}

.report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.report-meta-item {
    display: flex;
    flex-direction: column;
}

.report-meta-item .meta-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.04em;
}

.report-meta-item .meta-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    margin-top: 2px;
}

/* ---- Summary Cards ---- */
.summary-row {
    display: none;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.summary-row.visible {
    display: flex;
}

.summary-card {
    flex: 1;
    min-width: 140px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.summary-card .summary-count {
    font-size: 2rem;
    font-weight: 700;
    color: #026AB0;
}

.summary-card .summary-label {
    font-size: 0.82rem;
    color: #666;
    margin-top: 4px;
}

.summary-card.critical .summary-count {
    color: #c0392b;
}

/* ---- Audit Sections ---- */
.audit-section {
    background: white;
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    /* Note: no overflow: hidden, since that would clip the sticky
       .section-collapse-rail-label inside .section-body. The header and
       body paint their own rounded corners so nothing leaks past. */
}

.section-header {
    border-radius: 10px 10px 0 0;
}

.section-header:not(.open) {
    border-radius: 10px;
}

.section-header {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
    gap: 12px;
}

.section-header:hover {
    background-color: #f8fbfe;
}

.section-toggle {
    font-size: 0.8rem;
    transition: transform 0.25s;
    color: #999;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.section-header.open .section-toggle {
    transform: rotate(90deg);
}

.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: white;
    background-color: #026AB0;
    flex-shrink: 0;
}

.section-badge.critical {
    background-color: #c0392b;
}

.section-badge.warning {
    background-color: #e67e22;
}

.section-badge.info {
    background-color: #2ecc71;
}

.section-badge.zero {
    background-color: #bbb;
}

.section-body {
    display: none;
    padding: 16px 24px 24px;
    border-top: 1px solid #eef2f6;
    /* Two-column grid: a sticky "Collapse" rail on the left and the
       actual section content on the right. The rail stays visible
       within the viewport as the user scrolls through long sections. */
    grid-template-columns: 44px 1fr;
    gap: 16px;
}

.section-header.open + .section-body {
    display: grid;
}

.section-body-content {
    min-width: 0; /* allow the content column to shrink below its intrinsic width */
}

/* Vertical "Collapse section" rail on the left side of every expanded
   section. The <button> itself fills the full height of the section so
   clicking anywhere down the side collapses the section. Inside, a
   sticky label stays visible at the top of the viewport while the user
   scrolls through long sections. */
.section-collapse-rail {
    /* Fills the full height of the grid cell (= full length of the
       expanded section) so the click target runs the whole section. */
    height: 100%;
    min-height: 180px;
    width: 100%;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    background: linear-gradient(to right, #e8f0f7, #f5f9fc);
    border: 1px solid #dde6ef;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

.section-collapse-rail:hover,
.section-collapse-rail:focus {
    background: #d7e6f3;
    border-color: #026AB0;
}

/* The sticky inner label that actually shows "◀ Collapse section".
   Sticks 16px from the top of the viewport so it's always visible
   while the rail is on screen. */
.section-collapse-rail-label {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 4px;

    color: #026AB0;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section-collapse-rail:hover .section-collapse-rail-label,
.section-collapse-rail:focus .section-collapse-rail-label {
    color: #01508A;
}

.section-collapse-rail-icon {
    font-size: 1rem;
}

.section-collapse-rail-text {
    /* Rotate the text so it reads bottom-to-top along the vertical rail. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

/* On narrow screens the grid collapses to a single column and the rail
   becomes a regular horizontal button above the content. */
@media (max-width: 700px) {
    .section-header.open + .section-body {
        grid-template-columns: 1fr;
    }
    .section-collapse-rail {
        height: auto;
        min-height: auto;
        padding: 0;
        flex-direction: row;
    }
    .section-collapse-rail-label {
        position: static;
        flex-direction: row;
        padding: 8px 14px;
    }
    .section-collapse-rail-text {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

.section-description {
    font-size: 0.9rem;
    color: #666;
    margin: 16px 0 16px;
    line-height: 1.55;
}

/* ---- Data Tables ---- */
.audit-table-wrapper {
    overflow-x: auto;
    margin-top: 12px;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    /* Fixed layout + <colgroup> widths (from JS COL_WIDTHS) so the same
       named column (e.g. "State Code") lines up at the same horizontal
       position across every audit section. */
    table-layout: fixed;
}

.audit-table thead th {
    background-color: #f0f5fa;
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    color: #555;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #dde6ef;
    /* Allow long header titles to wrap onto multiple lines instead of
       truncating with an ellipsis, since users need to read the full title. */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: bottom;
}

.audit-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #eef2f6;
    color: #444;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.audit-table tbody tr:last-child td {
    border-bottom: none;
}

.audit-table tbody tr:hover {
    background-color: #f9fbfd;
}

.audit-table .code-cell {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 500;
    /* Dark navy (not link-blue) so monospace codes don't read as hyperlinks.
       Link-blue is reserved for actual <a> elements per WCAG 1.4.1. */
    color: #1a1a2e;
}

.audit-table .recommendation {
    color: #c0392b;
    font-weight: 500;
    font-size: 0.82rem;
}

/* School sub-group header in tables */
.school-group-header {
    background-color: #f7fafd;
    font-weight: 600;
    color: #026AB0;
    padding: 10px 14px;
    font-size: 0.88rem;
    border-bottom: 1px solid #dde6ef;
    margin-top: 16px;
}

/* ---- Body link style ---- */
/* Reused on the help/info links. Underlined at rest so that color alone
   isn't the only signal the text is interactive (WCAG 1.4.1 / 2.4.4). */
.body-link {
    color: #026AB0;
    font-weight: 500;
    text-decoration: underline;
}

.body-link:hover,
.body-link:focus {
    color: #01508A;
}

/* Footer row at the bottom of each expanded audit section, holds the
   "Learn more about this section" help link (right-aligned). Collapse
   is handled by the sticky .section-collapse-rail on the left. */
.section-footer {
    text-align: right;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #eef2f6;
    font-size: 0.78rem;
}

/* ---- Mismatch detail rows (same-school / cross-school cards) ---- */
/* A CSS grid with fixed column widths so State Code, Local IDs,
   Schools, and Grade Level line up vertically across every row. */
.mismatch-detail-row {
    display: grid;
    grid-template-columns: 180px 160px 1fr 90px;
    gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid #eef2f6;
    align-items: start;
}

.mismatch-detail-cell {
    min-width: 0; /* allow text to wrap instead of forcing column to expand */
}

.mismatch-detail-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 2px;
}

.mismatch-detail-code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    /* Dark navy (not link-blue) so the state-code value doesn't read as a
       hyperlink. Link-blue is reserved for actual <a> elements per WCAG. */
    color: #1a1a2e;
    line-height: 1.3;
}

.mismatch-detail-sub {
    font-size: 0.85rem;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.mismatch-detail-value {
    font-size: 0.85rem;
    color: #555;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.mismatch-detail-pill {
    font-size: 0.85rem;
    padding: 2px 8px;
    background: #eef2f6;
    border-radius: 3px;
    color: #555;
    display: inline-block;
}

@media (max-width: 700px) {
    .mismatch-detail-row {
        grid-template-columns: 1fr 1fr;
    }
}

.school-group-header:first-child {
    margin-top: 0;
}

/* ---- Pathway groups ---- */
.pathway-group {
    margin-bottom: 20px;
}

.pathway-group-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #026AB0;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e8f0f7;
}

/* ---- No findings message ---- */
.no-findings {
    text-align: center;
    padding: 24px;
    color: #999;
    font-size: 0.9rem;
}

/* ---- Footer ---- */
footer {
    background-color: #026AB0;
    color: white;
    padding: 4px 16px;
    text-align: center;
    font-size: 0.7rem;
    margin-top: auto;
}

footer p {
    margin: 0;
}

/* ---- Loading spinner ---- */
.loading {
    display: none;
    text-align: center;
    padding: 40px;
}

.loading.visible {
    display: block;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e8f0f7;
    border-top-color: #026AB0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Print Styles ---- */
@media print {
    body {
        background: white;
        font-size: 9pt;
    }

    header {
        padding: 12px 16px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    header h1 {
        font-size: 1.1rem;
    }

    header p {
        font-size: 0.8rem;
    }

    .header-logo {
        max-height: 36px;
    }

    .upload-section,
    .toolbar-actions,
    .toolbar,
    footer {
        display: none !important;
    }

    .container {
        padding: 0;
        max-width: 100%;
    }

    .report-header {
        display: block !important;
        box-shadow: none;
        border: 1px solid #ccc;
        padding: 12px 16px;
        page-break-after: avoid;
    }

    .report-header h2 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .report-meta {
        gap: 16px;
    }

    .report-meta-item .meta-label {
        font-size: 0.65rem;
    }

    .report-meta-item .meta-value {
        font-size: 0.8rem;
    }

    .summary-row {
        display: flex !important;
        gap: 6px;
    }

    .summary-card {
        box-shadow: none;
        border: 1px solid #ccc;
        padding: 8px 10px;
    }

    .summary-card .summary-count {
        font-size: 1.2rem;
    }

    .summary-card .summary-label {
        font-size: 0.7rem;
    }

    .audit-section {
        box-shadow: none;
        border: 1px solid #ccc;
        margin-bottom: 8px;
        page-break-inside: auto;
    }

    .section-header {
        padding: 8px 12px;
        cursor: default;
    }

    .section-title {
        font-size: 0.85rem;
    }

    .section-badge {
        min-width: 20px;
        height: 20px;
        font-size: 0.7rem;
        padding: 0 5px;
    }

    .section-body {
        display: block !important;
        padding: 8px 12px;
    }

    .section-description {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }

    .section-toggle {
        transform: rotate(90deg);
    }

    .audit-table {
        font-size: 0.75rem;
    }

    .audit-table th,
    .audit-table td {
        padding: 4px 6px;
    }

    .audit-table thead th {
        background-color: #f0f5fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .audit-section * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pathway-header {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .pathway-warning {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    header .header-inner {
        text-align: left;
    }

    .report-meta {
        flex-direction: column;
        gap: 12px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar select {
        min-width: 100%;
    }

    .summary-row {
        flex-direction: column;
    }
}

/* ---- "When to Pull" Guidance Panel ---- */
.pull-guide {
    text-align: left;
    background-color: #f0f6fb;
    /* NO LEFT-EDGE STRIPE. This had `border-left: 4px solid #026AB0`, a coloured
       bar down one side. That pattern is not used in this report: a tinted
       background with rounded corners already marks a panel out, and the stripe
       only breaks the shape. The border is now even on all four sides. */
    border: 1px solid #cfe0ef;
    border-radius: 8px;
    margin: 16px 0 20px;
    padding: 0;
    overflow: hidden;
}

.pull-guide > summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    color: #01508A;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    user-select: none;
    background-color: #e8f1f9;
    transition: background-color 0.15s ease;
}

.pull-guide > summary::-webkit-details-marker {
    display: none;
}

.pull-guide > summary:hover {
    background-color: #dcebf7;
}

.pull-guide-title {
    font-size: 0.98rem;
}

/* The title used to be prefixed with an information emoji through ::before.
   It rendered as a small image at a size and style set by the platform rather
   than by this stylesheet, and the words already say what the panel is. */

.pull-guide-hint {
    font-size: 0.8rem;
    font-weight: 400;
    color: #555;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pull-guide-hint::after {
    content: "\25BE";
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.pull-guide[open] > summary .pull-guide-hint::after {
    transform: rotate(180deg);
}

.pull-guide-body {
    padding: 16px 20px 20px;
    font-size: 0.92rem;
    color: #333;
    background-color: white;
    border-top: 1px solid #cfe0ef;
}

.pull-guide-body h3,
.pull-guide-body h4 {
    color: #01508A;
    font-size: 0.98rem;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #FFBA2D;
    display: inline-block;
}

.pull-guide-body p {
    margin: 8px 0;
}

.pull-guide-body ul,
.pull-guide-body ol {
    margin: 8px 0 10px;
    padding-left: 24px;
}

.pull-guide-body li {
    margin-bottom: 4px;
}

.pull-guide-body ul ul {
    margin: 4px 0;
}

.pull-guide-subheading {
    font-weight: 600;
    color: #01508A;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}

.pull-guide-callout {
    background-color: #fff8e1;
    border: 1px solid #f0d090;  /* was a 4px left-edge stripe */
    padding: 10px 14px;
    border-radius: 4px;
    margin: 12px 0;
}

.pull-guide-callout-title {
    font-weight: 700;
    color: #8a6000;
    margin: 0 0 4px !important;
    font-size: 0.95rem;
}

.pull-guide-callout p:last-child {
    margin-bottom: 0;
}

.pull-guide-table-wrapper {
    overflow-x: auto;
    margin: 10px 0 6px;
}

.pull-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background-color: white;
    border: 1px solid #cfe0ef;
}

.pull-guide-table thead {
    background-color: #026AB0;
    color: white;
}

.pull-guide-table th,
.pull-guide-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e5edf5;
    vertical-align: top;
}

.pull-guide-table th {
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: none;
}

.pull-guide-table tbody tr:nth-child(even) {
    background-color: #f7fbfe;
}

.pull-guide-table tbody tr:last-child td {
    border-bottom: none;
}

.pull-guide-note {
    font-size: 0.88rem;
    color: #555;
    font-style: italic;
    background-color: #f7fbfe;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 6px 0 0;
}

.pull-guide-source {
    margin-top: 18px !important;
    padding-top: 12px;
    border-top: 1px solid #e5edf5;
    font-size: 0.85rem;
    color: #555;
}

.pull-guide-source a {
    color: #026AB0;
    font-weight: 500;
    text-decoration: underline;
}

.pull-guide-source a:hover {
    color: #01508A;
}

/* State Course Code Reference table styles moved to
   /css/state-course-codes.css so /audit/info.html and the standalone
   /state-course-codes/ page share them. */

.code-ref-expired {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: #b03030;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Browser-hygiene advisory dialog.

   NO AMBER. It arrived from the DFP tool in amber with brown lettering, and
   with black text over that it read as a hazard sign rather than a note. It now
   uses the same blue panel as the notices below it and the "When should I pull
   the 3.10 and 3.19 reports?" guide, so everything advisory on this page looks
   like one thing. The words carry the caution; the colour does not need to.

   NO YELLOW UNDERLINE. sbcss-tool.css gives every h2 a 3px --sbcss-yellow
   border-bottom, which is a page-level section divider and looks wrong inside a
   dialog. Turned off here, as it is on the cards.
   --------------------------------------------------------------------------- */
.hygiene-dialog {
    width: min(46rem, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 26px 30px;
    /* Same fill as the card, and the same NEUTRAL edge. The dialog and the card
       carry the same heading and the same words; a warning that looks different
       in the two places reads as two different notices. */
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    background: #f2ecee;
    color: #000000;
}

.hygiene-dialog::backdrop { background: rgba(15, 23, 26, 0.55); }

.hygiene-dialog h2 {
    margin: 0 0 12px;
    padding-bottom: 0;
    border-bottom: none;
    display: block;
    color: #000000;
    font-size: 1.25rem;
}

.hygiene-dialog p,
.hygiene-dialog li { margin: 0 0 12px; color: #000000; }
.hygiene-dialog ul { margin: 0 0 12px 1.2rem; }

.hygiene-howto {
    margin-top: 4px;
    margin-bottom: 14px;
    padding: 12px 14px;
    /* GREY, NOT COLOURED. This edge has been red, then burgundy; neither
       belonged. A border is structure, not decoration — the fill already says
       which card you are in. #c2c2c2 rather than the cards' #d6d6d6 because
       this box is WHITE inside the panel, so its edge is judged against white,
       where the lighter grey nearly disappears. */
    border: 1px solid #c2c2c2;
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
}

.hygiene-howto > summary {
    color: #000000;
    font-weight: 600;
    cursor: pointer;
}

.hygiene-howto > summary:focus-visible { outline: 3px solid #6b4753; outline-offset: 2px; }

/* BLACK BUTTON, WHITE TEXT — 21:1, and 18.0:1 against the burgundy panel it sits
   on, so the one thing to click is the most definite object in the dialog. It
   was site blue, which pulled the eye somewhere else and put a third colour in
   a box that only needs pink, white and black. */
.hygiene-dialog-button {
    margin-top: 6px;
    padding: 11px 26px;
    border: 1px solid #000000;
    border-radius: 8px;
    background: #000000;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hygiene-dialog-button:hover { background: #262626; }
.hygiene-dialog-button:focus-visible { outline: 3px solid #6b4753; outline-offset: 2px; }

/* ---- The two notices that stay on the page --------------------------------
   The dialog is dismissed and gone; these are what remain in front of someone
   while they are actually choosing a file.

   NO ICONS. They carried a padlock and a compass emoji, which rendered as
   images at different sizes on different platforms and added nothing the
   headings do not already say.

   NO YELLOW UNDERLINE. sbcss-tool.css gives every h2 a 3px --sbcss-yellow
   border-bottom. That reads as a section divider across the page and looks
   wrong inside a small tinted card, so it is turned off here along with the
   inline-block and top margin that come with it.

   THE PRIVACY CARD BORROWS THE .pull-guide PALETTE — the same blues as the
   "When should I pull the 3.10 and 3.19 reports?" panel below it, so the two
   informational boxes on this page look like one family. It does NOT copy that
   panel's 4px left border: a coloured stripe down the edge is not used in this
   report. Tinted background, rounded corners and a coloured heading do the same
   job without it.

   THE WARNING CARD USES THE SAME PANEL. It was amber; with black text that read
   as a hazard sign rather than a note. The words do the warning. */
.privacy-notice,
.hygiene-notice {
    min-width: 0;
    /* 20px between the two cards. At 13px they read as one block split by a
       hairline, which is wrong: they say different things and the second is the
       one to act on. The gap has to be larger than the 8px rhythm inside a card
       or the separation is ambiguous. */
    margin-bottom: 20px;
    padding: 18px 22px;
    border-radius: 8px;
}

/* A little more air before the upload area than between the two notices, so the
   pair reads as belonging together and the work below as separate. */
.hygiene-notice { margin-bottom: 26px; }

.privacy-notice { border: 1px solid #d6d6d6; background: #f0f6fb; }
/* PINK, because this one is a warning and the blue one beside it is not. The
   pair went blue-on-blue for a step and the caution stopped announcing itself;
   the colour is doing real work here, telling you at a glance which of the two
   cards you are meant to act on.

   LIGHT BURGUNDY, not pink, and it took several passes to get there. It went
   amber (read as a hazard sign with black text), then a bright pink, then a
   paler pink that still read as pink — because paleness was never the problem.
   The fill sat on the pink hue at 45% saturation and only LOOKED washed out.

   The fill is where the colour lives now. The BORDER IS NEUTRAL GREY on both
   cards: a coloured edge was reading as decoration, and an even grey line does
   the structural job without competing with the tint it surrounds.
   Black on #f2ecee is 18.0:1. */
.hygiene-notice { border: 1px solid #d6d6d6; background: #f2ecee; }

/* Undo the sitewide h2: no yellow rule, no inline-block, no top margin. */
.privacy-notice h2,
.hygiene-notice h2 {
    margin: 0 0 6px;
    padding-bottom: 0;
    border-bottom: none;
    display: block;
    font-size: 1.08rem;
}

/* BOTH CARDS ARE BLACK TEXT. The blue heading went the same way as the brown
   one: these are notices to be read, not links or section dividers, and a
   coloured heading on a tinted card was doing decoration rather than work. The
   tint and border still tell you which card is information and which is a
   caution. Black on #f0f6fb is 19.3:1. */
.privacy-notice h2 { color: #000000; }

/* BOTH CARDS ARE THE SAME BLUE PANEL. The warning one was amber, and amber with
   black lettering read as a hazard sign. What separates the two now is the
   heading and the order they appear in, not a colour. */
.hygiene-notice h2 { color: #000000; }

/* COLOUR ONLY. This rule used to read `.privacy-notice, .privacy-notice p
   { margin: 0; color: #000000; }` — the margin:0 was meant for the paragraph
   and silently zeroed the SECTION's margin-bottom too, so the two cards sat
   flush against each other however large that value was set. Keep spacing and
   colour in separate rules. */
.privacy-notice { color: #000000; }
.privacy-notice p { margin: 0; }

.hygiene-notice,
.hygiene-notice p,
.hygiene-notice li,
.hygiene-notice .hygiene-howto,
.hygiene-notice .hygiene-howto > summary,
.hygiene-notice .hygiene-howto p { color: #000000; }

.hygiene-notice p { margin: 0 0 8px; }

.hygiene-notice .hygiene-howto { margin-top: 10px; margin-bottom: 0; }

@media (max-width: 620px) {
    .privacy-notice,
    .hygiene-notice { padding: 14px 16px; }
}