/* sop/sidebar.css — SOP section left rail + page layout (experimental).
   Shared across the SOP landing page and its sub-pages so the rail styling
   lives in one place. Paired with sidebar.js, which renders the rail markup.
   Selectors are class-based so they override the site's global dark `nav`
   rules (the rail is a <nav>, but should be light/open, not the top bar). */

/* --- Layout: rail sits in the left gutter; the content card keeps its width --- */
.sop-shell {
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}
.sop-shell > main {
    max-width: 1100px;
    margin: 0;
    padding: 2rem 0 4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.sop-sidebar {
    flex: 0 0 240px;
    padding: 2rem 0 1rem;
}

/* --- Rail: light and open, blends into the page (overrides the dark top-nav) --- */
.sop-side-nav {
    position: sticky;
    top: 1.5rem;
    background: none;
    padding: 0;
    font-size: 0.875rem;
}
.sop-side-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e5e5;
}
.sop-side-group {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #737373;
    margin: 0;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid #e5e5e5;
}
.sop-side-list {
    display: block;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}
.sop-side-list li { margin: 0; }
.sop-side-list a {
    display: block;
    padding: 0.35rem 0.75rem;
    color: #2563eb;
    text-decoration: none;
    border-radius: 4px;
    line-height: 1.35;
}
.sop-side-list a:hover { background: #f0f0f0; text-decoration: underline; }
.sop-side-list a.active { color: #1a1a1a; font-weight: 600; background: #eef2ff; }
.sop-side-id {
    display: block;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 0.6875rem;
    font-weight: 400;
    color: #9ca3af;
}
.sop-side-list a.active .sop-side-id { color: #2563eb; }

/* --- Landing-page overview card --- */
.sop-overview { background: #ffffff; border: 2px solid #d4d4d4; border-radius: 8px; padding: 1.75rem 2rem; }
.sop-overview > p { font-size: 1rem; margin-bottom: 1rem; }
.sop-overview h2 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid #e5e5e5; }
.sop-overview h2:first-of-type { margin-top: 0.5rem; }
.sop-overview-list { list-style: none; margin: 0; padding: 0; }
.sop-overview-list li { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9375rem; color: #525252; line-height: 1.5; }
.sop-overview-list li:last-child { border-bottom: none; }
.sop-overview-list a { font-weight: 600; font-size: 1.0625rem; color: #2563eb; text-decoration: none; }
.sop-overview-list a:hover { text-decoration: underline; }
.sop-overview-id { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.75rem; color: #737373; margin-left: 0.5rem; }

/* --- De-carded SOP page header (title presented like other pages, not boxed) --- */
.sop-page-header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid #d4d4d4; }
.sop-page-header h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sop-meta-line { color: #525252; font-size: 0.875rem; line-height: 1.5; }
.sop-meta-line .sop-id { font-family: ui-monospace, "SF Mono", monospace; color: #525252; margin: 0; }

/* --- SOP views: one clean card per view; the rail toggles which is shown --- */
.sop-view { display: none; }
.sop-view.active { display: block; }
.sop-card { background: #ffffff; border: 2px solid #d4d4d4; border-radius: 8px; padding: 1.75rem 2rem; }
.sop-card > h2:first-child, .sop-card > h3:first-child { margin-top: 0; }
.sop-card h2 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid #e5e5e5; }
.sop-card h3 { font-size: 1rem; font-weight: 600; color: #374151; margin: 1.25rem 0 0.5rem; }
.sop-card p { margin-bottom: 0.75rem; font-size: 0.9375rem; }
.sop-card ul, .sop-card ol { margin: 0 0 1rem 1.5rem; font-size: 0.9375rem; }
.sop-card li { margin-bottom: 0.375rem; }
.sop-card a { color: #2563eb; text-decoration: none; }
.sop-card a:hover { text-decoration: underline; }
.sop-card code { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.875em; background: #f0f0f0; padding: 0.05rem 0.3rem; border-radius: 3px; }
.sop-card table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: 0.875rem; }
.sop-card th, .sop-card td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
.sop-card th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #525252; background: #f9fafb; }
.sop-card tbody tr:hover { background: #fafafa; }
.sop-callout { background: #fef3c7; border-left: 4px solid #d97706; padding: 0.75rem 1rem; margin: 0.9rem 0 0.5rem; border-radius: 0 4px 4px 0; font-size: 0.9375rem; }
.sop-callout strong { color: #92400e; }

/* version list + change log, formatted lightly inside the Details card */
.sop-versions { list-style: none; margin: 0 0 1rem; padding: 0; }
.sop-versions li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.875rem; }
.sop-versions .date { color: #737373; }
.sop-changelog-entry { padding: 0.6rem 0 0.75rem; border-top: 1px solid #f0f0f0; }
.sop-changelog-entry:first-of-type { border-top: none; }
.sop-changelog-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.sop-changelog-date { font-size: 0.8125rem; color: #737373; margin: 0.15rem 0 0.4rem; }

/* --- Rail nested sub-menu (Procedure / Details) under the active SOP --- */
.sop-side-sub { display: block; list-style: none; margin: 0.15rem 0 0.35rem 0.75rem; padding: 0 0 0 0.85rem; border-left: 1px solid #e5e5e5; }
.sop-side-list .sop-side-sub a { display: block; padding: 0.3rem 0.6rem; color: #525252; font-size: 0.8125rem; border-radius: 4px; text-decoration: none; }
.sop-side-list .sop-side-sub a:hover { background: #f0f0f0; text-decoration: none; }
.sop-side-list .sop-side-sub a.active { color: #1a1a1a; font-weight: 600; background: #eef2ff; }

/* caret affordance: SOP items expand into Procedure / Details */
.sop-caret { display: inline-block; margin-left: 0.35rem; font-size: 0.7rem; color: #9ca3af; }
.sop-caret::before { content: "\25B8"; }       /* right-pointing: collapsed */
.sop-caret.open::before { content: "\25BE"; }  /* down-pointing: expanded */

/* --- Responsive: stack the rail above the content on narrow screens --- */
@media (max-width: 900px) {
    .sop-shell { flex-direction: column; gap: 0; padding: 0 1rem; }
    .sop-sidebar { flex-basis: auto; width: 100%; padding: 1rem 0 0; }
    .sop-side-nav { position: static; }
    .sop-shell > main { padding-top: 1.5rem; }
}

/* --- Print: hide the rail, expand to full width, show all views --- */
@media print {
    .sop-sidebar { display: none; }
    .sop-shell { display: block; max-width: none; padding: 0; }
    .sop-shell > main { max-width: none; padding: 0; }
    .sop-view { display: block; }
    .sop-card { border: 1px solid #000; break-inside: avoid; }
}