/* Safety documents — /resources/ SOP and Lab Safety Plan pages.
   Scoped to .safety-* classes. Reuses the site tokens from main.css
   (navy/blue palette, Saira Condensed display, IBM Plex Mono eyebrows). */

:root {
    --call-danger-band: #b42318;
    --call-danger-bg: #fdeeee;
    --call-warning-band: #b54708;
    --call-warning-bg: #fdf3e1;
    --call-note-band: #1d5f9e;
    --call-note-bg: #edf3fa;
    --call-info-band: #1d5f9e;
    --call-info-bg: #edf3fa;
}

:root[data-theme="dark"] {
    --call-danger-band: #f97066;
    --call-danger-bg: rgba(240, 68, 56, 0.13);
    --call-warning-band: #fdb022;
    --call-warning-bg: rgba(247, 144, 9, 0.13);
    --call-note-band: #8fb8e8;
    --call-note-bg: rgba(127, 178, 229, 0.13);
    --call-info-band: #8fb8e8;
    --call-info-bg: rgba(127, 178, 229, 0.13);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --call-danger-band: #f97066;
        --call-danger-bg: rgba(240, 68, 56, 0.13);
        --call-warning-band: #fdb022;
        --call-warning-bg: rgba(247, 144, 9, 0.13);
        --call-note-band: #8fb8e8;
        --call-note-bg: rgba(127, 178, 229, 0.13);
        --call-info-band: #8fb8e8;
        --call-info-bg: rgba(127, 178, 229, 0.13);
    }
}

/* ---- hero ---- */
.safety-hero {
    padding: 130px 0 64px;
}

.safety-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--mist);
    margin-bottom: 1.25rem;
}

.crumbs li + li::before {
    content: "/";
    margin-right: 0.5rem;
    color: var(--mist);
}

.crumbs a {
    color: var(--blue-hi);
    border-bottom: 1px solid transparent;
}

.crumbs a:hover {
    border-bottom-color: var(--blue-hi);
}

.safety-eyebrow {
    color: var(--blue-hi);
    margin-bottom: 0.8rem;
}

.safety-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    color: #ffffff;
    max-width: 20ch;
}

.safety-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 2rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--navy-line);
}

.safety-meta div {
    margin: 0;
}

.safety-meta dt {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 0.25rem;
}

.safety-meta dd {
    margin: 0;
    color: var(--snow);
    font-size: 0.95rem;
}

/* ---- layout ---- */
.safety-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* ---- desktop TOC ---- */
.safety-toc {
    position: sticky;
    /* Fixed site header is 64px tall; keep the stuck sidebar clear of it. */
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow: auto;
}

.toc-heading {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 0.75rem;
}

.toc-desktop nav ul,
.toc-mobile nav ul {
    list-style: none;
}

.toc-desktop nav > ul > li {
    margin-bottom: 0.15rem;
}

.toc-desktop nav a {
    display: block;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
    padding: 0.3rem 0 0.3rem 0.85rem;
    border-left: 2px solid var(--line);
}

.toc-desktop nav a:hover {
    color: var(--heading);
}

.toc-desktop nav a[aria-current="true"] {
    color: var(--blue);
    border-left-color: var(--blue);
    font-weight: 600;
}

.toc-desktop nav ul ul a {
    padding-left: 1.7rem;
    font-size: 0.8rem;
}

.toc-desktop nav ul ul ul a {
    padding-left: 2.5rem;
    font-size: 0.78rem;
}

/* ---- mobile TOC ---- */
.toc-mobile {
    display: none;
    border: 1px solid var(--line);
    background: var(--wash);
    margin-bottom: 1.5rem;
}

.toc-mobile summary {
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--heading);
}

.toc-mobile nav {
    padding: 0 1.1rem 1rem;
}

.toc-mobile nav a {
    display: block;
    color: var(--blue);
    padding: 0.35rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
}

/* ---- article typography ---- */
.safety-doc {
    min-width: 0;
    max-width: 78ch;
}

.safety-doc h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--heading);
    margin: 2.75rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    /* Fixed site header is 64px tall; keep anchor targets clear of it. */
    scroll-margin-top: 5.5rem;
}

.safety-doc h3 {
    font-size: 1.2rem;
    color: var(--heading);
    margin: 2rem 0 0.75rem;
    scroll-margin-top: 5.5rem;
}

.safety-doc h4 {
    font-size: 1.02rem;
    color: var(--heading);
    margin: 1.5rem 0 0.6rem;
    scroll-margin-top: 5.5rem;
}

.safety-doc p,
.safety-doc li {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--ink);
}

.safety-doc p {
    margin-bottom: 1rem;
}

.safety-doc ul,
.safety-doc ol {
    margin: 0 0 1.25rem 1.4rem;
}

.safety-doc li {
    margin-bottom: 0.4rem;
}

.safety-doc li::marker {
    color: var(--blue);
    font-weight: 600;
}

.safety-doc a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent);
    text-underline-offset: 2px;
}

.safety-doc a:hover {
    text-decoration-color: var(--blue);
}

.h-anchor {
    display: none;
    margin-left: 0.5rem;
    font-size: 0.8em;
    text-decoration: none;
}

.safety-doc h2:hover .h-anchor,
.safety-doc h3:hover .h-anchor,
.safety-doc h4:hover .h-anchor,
.safety-doc h2:focus-within .h-anchor,
.safety-doc h3:focus-within .h-anchor,
.safety-doc h4:focus-within .h-anchor {
    display: inline;
}

/* ---- standing notice + document control ---- */
.standing-notice {
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--blue);
    background: var(--wash);
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.doc-control {
    border: 1px solid var(--line);
    background: var(--paper);
    margin-bottom: 2rem;
}

.doc-control summary {
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--heading);
}

.doc-control-list {
    padding: 0 1.1rem;
}

.doc-control-list div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.doc-control-list dt {
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.doc-control-list dd {
    margin: 0;
    color: var(--ink);
}

.doc-control-note {
    padding: 0.75rem 1.1rem 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.doc-control-note:last-child {
    padding-bottom: 1rem;
}

/* ---- quick-reference card ---- */
.qr-card {
    border: 1px solid var(--line-2);
    border-top: 4px solid var(--navy);
    background: var(--wash);
    margin: 0 0 2.5rem;
}

.qr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--navy);
    color: var(--snow);
}

.qr-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-hi);
}

.qr-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

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

.qr-panel {
    background: var(--paper);
    padding: 1.1rem 1.25rem;
}

.qr-operate,
.qr-emergency,
.qr-note {
    grid-column: 1 / -1;
}

.qr-emergency {
    border-left: 4px solid var(--call-danger-band);
}

.qr-operate {
    border-left: 4px solid var(--call-note-band);
}

.qr-panel-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--heading);
    margin-bottom: 0.6rem;
}

.qr-panel-body {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink);
}

.qr-panel-body ul,
.qr-panel-body ol {
    margin: 0 0 0 1.2rem;
}

.qr-panel-body li {
    margin-bottom: 0.3rem;
}

.qr-panel-body p {
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}

.qr-panel-body > *:last-child {
    margin-bottom: 0;
}

/* ---- callouts ---- */
.callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.9rem;
    border: 1px solid var(--line-2);
    border-left-width: 5px;
    padding: 1rem 1.2rem;
    margin: 1.5rem 0;
    background: var(--paper);
}

.callout-danger {
    border-left-color: var(--call-danger-band);
    background: var(--call-danger-bg);
}

.callout-warning {
    border-left-color: var(--call-warning-band);
    background: var(--call-warning-bg);
}

.callout-note {
    border-left-color: var(--call-note-band);
    background: var(--call-note-bg);
}

.callout-info {
    border-left-color: var(--call-info-band);
    background: var(--call-info-bg);
}

.callout-label {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}

.callout-danger .callout-label {
    color: var(--call-danger-band);
}

.callout-warning .callout-label {
    color: var(--call-warning-band);
}

.callout-note .callout-label {
    color: var(--call-note-band);
}

.callout-info .callout-label {
    color: var(--call-info-band);
}

.callout-body {
    grid-column: 1 / -1;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--ink);
}

.callout-body > *:last-child {
    margin-bottom: 0;
}

.callout-body p {
    margin-bottom: 0.6rem;
}

/* ---- tables ---- */
.tbl-scroll {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--line-2);
}

.tbl-scroll:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.6;
    background: var(--paper);
}

.tbl caption {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.7rem 1rem;
    background: var(--wash);
    border-bottom: 1px solid var(--line-2);
}

.tbl th,
.tbl td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td {
    border-bottom: none;
}

.tbl thead th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--heading);
    background: var(--wash);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}

.tbl tbody th[scope="row"] {
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
}

.tbl td p,
.tbl th p {
    margin: 0;
    font-size: inherit;
}

/* ---- definition list (label/value panels, e.g. §6.1 controls) ---- */
.deflist {
    margin: 1.5rem 0;
    padding: 0;
    border: 1px solid var(--line-2);
    background: var(--paper);
}

.deflist-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
}

.deflist-row:last-child {
    border-bottom: none;
}

.deflist dt {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--heading);
}

.deflist dt p,
.deflist dd p {
    margin: 0;
    font-size: inherit;
}

.deflist dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--ink);
}

/* ---- checklist ---- */
.checklist {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    border: 1px solid var(--line-2);
}

.safety-doc .checklist {
    margin-left: 0;
}

.check-item {
    border-bottom: 1px solid var(--line);
}

.check-item:last-child {
    border-bottom: none;
}

.check-item label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.8rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    align-items: start;
}

.check-item input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.3rem;
    accent-color: var(--blue);
}

.check-text {
    font-size: 0.92rem;
    color: var(--ink);
}

.check-text p {
    margin: 0;
    font-size: inherit;
}

.check-pass {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--faint);
}

.check-pass p {
    margin: 0;
    font-size: inherit;
}

/* ---- prev / next ---- */
.prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-2);
}

.prevnext-link {
    display: block;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    background: var(--wash);
    padding: 1rem 1.2rem;
    text-decoration: none;
}

.prevnext-next {
    text-align: right;
}

.prevnext-dir {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 0.3rem;
}

.prevnext-doc {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.5;
}

/* ---- safety cards on the resources index ---- */
.safety-index-block {
    margin-bottom: 4rem;
}

.safety-relate {
    margin-top: 0.75rem;
    max-width: 75ch;
}

.safety-relate p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.safety-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: 0.6rem;
}

/* ---- responsive ---- */
@media (max-width: 1020px) {
    .safety-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .safety-toc {
        display: none;
    }

    .toc-mobile {
        display: block;
    }

    .safety-doc {
        max-width: 100%;
    }
}

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

    .deflist-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .prevnext {
        grid-template-columns: 1fr;
    }

    .doc-control-list div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    /* Hazard tables collapse into stacked label/value cards. */
    .tbl-hazard thead {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .tbl-hazard,
    .tbl-hazard tbody,
    .tbl-hazard tr,
    .tbl-hazard td {
        display: block;
        width: 100%;
    }

    .tbl-hazard tr {
        border-bottom: 2px solid var(--line-2);
    }

    .tbl-hazard tr:last-child {
        border-bottom: none;
    }

    .tbl-hazard td {
        border-bottom: 1px solid var(--line);
        padding: 0.6rem 0.9rem 0.6rem;
    }

    .tbl-hazard td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-mono);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--faint);
        margin-bottom: 0.25rem;
    }
}

/* ---- secondary-label contrast ----
   Small uppercase metadata labels would sit at ~3.5:1 in --faint on paper,
   below WCAG AA 4.5:1 for normal text. --muted keeps the same hue family
   and passes on paper/wash in both colour schemes. Scoped to safety docs;
   the global --faint token is untouched. */
.toc-heading,
.check-pass,
.prevnext-dir,
.doc-control-list dt,
.tbl-hazard td::before,
.safety-card-meta,
.soon-tag,
.rc-foot-soon {
    color: var(--muted);
}

/* ---- print ---- */
@media print {
    .site-nav,
    .safety-toc,
    .toc-mobile,
    .prevnext,
    .crumbs,
    .h-anchor {
        display: none;
    }

    .safety-hero {
        padding: 0 0 1rem;
        background: none;
    }

    .safety-hero.hero-fade::after {
        display: none;
    }

    .safety-hero-inner {
        padding: 0;
    }

    .safety-title,
    .safety-meta dd,
    .safety-eyebrow,
    .crumbs {
        color: #000;
    }

    .safety-meta {
        border-top: 1px solid #999;
    }

    .safety-meta dt {
        color: #333;
    }

    .safety-layout {
        display: block;
        padding: 0;
        max-width: 100%;
    }

    .safety-doc {
        max-width: 100%;
    }

    .safety-doc h2,
    .safety-doc h3,
    .safety-doc h4 {
        break-after: avoid;
    }

    .tbl-scroll {
        overflow: visible;
        border: 1px solid #999;
    }

    .tbl {
        font-size: 9pt;
    }

    .tbl-hazard thead {
        position: static;
        width: auto;
        height: auto;
    }

    .tbl-hazard {
        display: table;
    }

    .tbl-hazard tbody {
        display: table-row-group;
    }

    .tbl-hazard tr {
        display: table-row;
    }

    .tbl-hazard td {
        display: table-cell;
    }

    .tbl-hazard td::before {
        content: none;
    }

    .callout {
        break-inside: avoid;
        border: 1px solid #666;
        border-left-width: 5px;
        background: none;
    }

    .callout-label {
        color: #000;
    }

    .qr-card,
    .checklist,
    .standing-notice,
    .doc-control {
        break-inside: avoid;
    }

    .check-item input[type="checkbox"] {
        appearance: none;
        border: 1px solid #000;
        width: 10pt;
        height: 10pt;
    }
}