/* ============================================================================
   docs.css - Shared stylesheet for PGx Toolkit documentation
   Translational Software Incorporated

   Serves two targets from one source:
     * Screen - an online reference: collapsible sections, readable column
     * Print  - a clean, branded, paginated document (US Letter)

   Companion file: _template.html (the skeleton every guide is built from).
   ========================================================================= */

/* --- Design tokens ------------------------------------------------------ */
:root {
    /* Brand */
    --brand:              #0078d4;
    --brand-hover:        #106ebe;
    --brand-dark:         #005a9e;
    --brand-tint:         #eff6fc;

    /* Neutrals */
    --bg-1:               #ffffff;
    --bg-2:               #f5f5f5;
    --bg-3:               #f0f0f0;
    --stroke-1:           #d1d1d1;
    --stroke-2:           #e5e5e5;
    --fg-1:               #242424;
    --fg-2:               #424242;
    --fg-3:               #616161;

    /* Semantic (callouts, badges) */
    --ok:                 #0e7a0d;
    --ok-tint:            #f1faf1;
    --warn:               #9d5d00;
    --warn-tint:          #fff9f0;
    --danger:             #a4262c;
    --danger-tint:        #fdf3f4;

    /* Type */
    --font-base:          "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    --font-mono:          Consolas, "Cascadia Mono", "Courier New", monospace;

    --size-100:           12px;
    --size-200:           14px;
    --size-300:           16px;
    --size-400:           20px;
    --size-500:           24px;
    --size-600:           28px;
    --size-700:           34px;

    --weight-regular:     400;
    --weight-semibold:    600;
    --weight-bold:        700;

    /* Shape and spacing */
    --radius-md:          4px;
    --radius-lg:          8px;
    --shadow-card:        0 1px 2px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.10);

    --sp-1:               4px;
    --sp-2:               8px;
    --sp-3:               12px;
    --sp-4:               16px;
    --sp-5:               24px;
    --sp-6:               32px;
    --sp-7:               48px;

    --measure:            54rem;   /* readable column width */
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: var(--sp-6) var(--sp-4) var(--sp-7);
    background: var(--bg-2);
    color: var(--fg-1);
    font-family: var(--font-base);
    font-size: var(--size-300);
    line-height: 1.6;
}

/* --- Page shell --------------------------------------------------------- */
.doc {
    max-width: var(--measure);
    margin: 0 auto;
    background: var(--bg-1);
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

/* --- Masthead ----------------------------------------------------------- */
.doc-masthead {
    border-bottom: 3px solid var(--brand);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.doc-logo {
    display: block;
    width: 190px;
    height: auto;
    margin-bottom: var(--sp-4);
}

.doc-title {
    margin: 0 0 var(--sp-2);
    font-size: var(--size-700);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    color: var(--fg-1);
}

.doc-subtitle {
    margin: 0 0 var(--sp-3);
    font-size: var(--size-400);
    font-weight: var(--weight-regular);
    color: var(--fg-3);
    line-height: 1.4;
}

/* Version / date / owner strip */
.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin: 0;
    font-size: var(--size-200);
    color: var(--fg-3);
}

.doc-meta div { margin: 0; }

.doc-meta dt {
    display: inline;
    font-weight: var(--weight-semibold);
    color: var(--fg-2);
}

.doc-meta dt::after { content: " "; }
.doc-meta dd { display: inline; margin: 0; }

/* --- Headings ----------------------------------------------------------- */
h1, h2, h3, h4 {
    font-weight: var(--weight-semibold);
    color: var(--fg-1);
    line-height: 1.3;
}

h2 { font-size: var(--size-500); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--size-400); margin: var(--sp-5) 0 var(--sp-2); }
h4 { font-size: var(--size-300); margin: var(--sp-4) 0 var(--sp-2); color: var(--fg-2); }

p { margin: 0 0 var(--sp-4); }

a       { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }

a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

hr {
    border: 0;
    border-top: 1px solid var(--stroke-2);
    margin: var(--sp-6) 0;
}

/* --- Table of contents -------------------------------------------------- */
.doc-toc {
    background: var(--bg-2);
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
}

.doc-toc h2 {
    margin: 0 0 var(--sp-3);
    font-size: var(--size-200);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fg-3);
}

.doc-toc ol { margin: 0; padding-left: 1.4em; }
.doc-toc li { margin-bottom: var(--sp-1); }

/* --- Collapsible section ------------------------------------------------ */
.section {
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-4);
    background: var(--bg-1);
    overflow: hidden;
}

.section > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-2);
    cursor: pointer;
    list-style: none;          /* Firefox marker */
    user-select: none;
}

.section > summary::-webkit-details-marker { display: none; }
.section > summary:hover { background: var(--bg-3); }

/* Brand accent bar on the left of each section header */
.section > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    align-self: stretch;
    background: var(--brand);
    border-radius: 2px;
}

.section > summary h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--size-400);
}

/* Chevron drawn in CSS, so no per-section SVG is needed */
.section > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: var(--sp-1);
    border-right: 2px solid var(--fg-3);
    border-bottom: 2px solid var(--fg-3);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.section[open] > summary::after { transform: rotate(45deg); }

.section-body { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.section-body > :last-child { margin-bottom: 0; }

/* Expand/collapse-all controls (screen only) */
.doc-controls {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.doc-controls button {
    font: inherit;
    font-size: var(--size-200);
    padding: var(--sp-1) var(--sp-3);
    color: var(--brand);
    background: var(--bg-1);
    border: 1px solid var(--stroke-1);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.doc-controls button:hover { background: var(--brand-tint); border-color: var(--brand); }

/* --- Callouts ----------------------------------------------------------- */
.callout {
    border: 1px solid var(--stroke-1);
    border-left: 4px solid var(--fg-3);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-4);
}

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

.callout-title {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--size-200);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--sp-1);
}

.callout.note   { border-left-color: var(--brand);  background: var(--brand-tint);  }
.callout.tip    { border-left-color: var(--ok);     background: var(--ok-tint);     }
.callout.warn   { border-left-color: var(--warn);   background: var(--warn-tint);   }
.callout.danger { border-left-color: var(--danger); background: var(--danger-tint); }

.callout.note   .callout-title { color: var(--brand-dark); }
.callout.tip    .callout-title { color: var(--ok); }
.callout.warn   .callout-title { color: var(--warn); }
.callout.danger .callout-title { color: var(--danger); }

/* --- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 0 var(--sp-4); }

table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--size-200);
}

th, td {
    border: 1px solid var(--stroke-1);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: top;
}

thead th {
    background: var(--bg-3);
    font-weight: var(--weight-semibold);
    color: var(--fg-1);
}

tbody tr:nth-child(even) { background: var(--bg-2); }

caption {
    caption-side: bottom;
    padding-top: var(--sp-2);
    font-size: var(--size-100);
    color: var(--fg-3);
    text-align: left;
}

/* --- Code --------------------------------------------------------------- */
code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--bg-3);
    padding: 1px 5px;
    border-radius: 3px;
}

pre {
    font-family: var(--font-mono);
    font-size: var(--size-200);
    line-height: 1.5;
    background: var(--bg-2);
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    overflow-x: auto;
    margin: 0 0 var(--sp-4);
}

pre code { background: none; padding: 0; font-size: inherit; }

/* --- Checklist ---------------------------------------------------------- */
.checklist { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }

.checklist li {
    position: relative;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    border-bottom: 1px solid var(--stroke-2);
}

.checklist li:last-child { border-bottom: 0; }

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1em;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--fg-3);
    border-radius: 3px;
    background: var(--bg-1);
}

/* --- Badges ------------------------------------------------------------- */
.badge {
    display: inline-block;
    font-size: var(--size-100);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    padding: 1px var(--sp-2);
    border-radius: 10px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.badge.ok      { color: var(--ok); }
.badge.warn    { color: var(--warn); }
.badge.danger  { color: var(--danger); }
.badge.info    { color: var(--brand); }
.badge.neutral { color: var(--fg-3); }

/* --- Step list ---------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; margin: 0 0 var(--sp-4); padding: 0; }

.steps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 var(--sp-4) var(--sp-6);
}

.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: var(--size-100);
    font-weight: var(--weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Footer ------------------------------------------------------------- */
.doc-footer {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--stroke-2);
    font-size: var(--size-100);
    color: var(--fg-3);
}

.doc-footer p { margin: 0 0 var(--sp-1); }

/* --- Visibility helpers ------------------------------------------------- */
.print-only { display: none; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Small screens ------------------------------------------------------ */
@media (max-width: 600px) {
    body { padding: 0; }

    .doc {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: var(--sp-5) var(--sp-4) var(--sp-6);
    }

    .doc-title { font-size: var(--size-600); }
}

/* ============================================================================
   PRINT
   ========================================================================= */
@page {
    size: letter;
    margin: 0.75in 0.75in 0.9in;
}

@page :first { margin-top: 0.6in; }

@media print {
    /* Flatten the screen shell back to a plain document */
    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
        line-height: 1.45;
        padding: 0;
    }

    .doc {
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    /* Chrome that has no meaning on paper */
    .doc-controls,
    .no-print { display: none !important; }

    .print-only { display: block !important; }

    /* Every collapsible section prints open. The inline beforeprint handler in
       the template sets `open`; these rules strip the interactive affordances. */
    .section {
        border: 0;
        margin-bottom: var(--sp-4);
        break-inside: auto;
    }

    .section > summary {
        background: none;
        padding: 0;
        cursor: auto;
        break-after: avoid;
    }

    .section > summary::after  { display: none; }  /* no chevron on paper */
    .section > summary::before { display: none; }  /* accent bar reads as noise */

    .section > summary h2 {
        font-size: 14pt;
        border-bottom: 1px solid #999;
        padding-bottom: 3pt;
        width: 100%;
    }

    .section-body { padding: var(--sp-3) 0 0; }

    /* Masthead */
    .doc-masthead { border-bottom-width: 2pt; break-after: avoid; }
    .doc-logo     { width: 160px; }
    .doc-title    { font-size: 22pt; }
    .doc-subtitle { font-size: 12pt; }

    /* The on-screen TOC is dead weight on paper for a short guide;
       add class="no-print" to .doc-toc in that case. */
    .doc-toc { background: none; border: 1px solid #ccc; break-inside: avoid; }

    /* Keep blocks intact and headings attached to their content */
    h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

    .callout,
    .steps > li,
    .checklist li,
    figure { break-inside: avoid; page-break-inside: avoid; }

    p, li { orphans: 3; widows: 3; }

    /* Long code blocks may legitimately span pages; keep them readable */
    pre {
        background: #f7f7f7;
        border: 1px solid #ccc;
        font-size: 9pt;
        white-space: pre-wrap;      /* no clipped right edge on paper */
        word-wrap: break-word;
        break-inside: auto;
    }

    /* A hyphen is a break opportunity, so a long option name like
       --usemockdemographics splits across two lines inside a narrow table cell
       and reads as broken. Inline code in a cell is short enough to keep whole;
       block code is left alone, since it wraps deliberately. */
    td > code, th > code, td code, th code { white-space: nowrap; }

    /* Repeat table headers on every page a long table spans */
    table { font-size: 9.5pt; break-inside: auto; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr    { break-inside: avoid; }

    /* Keep callout tints legible if the user prints without backgrounds */
    .callout {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Links print black, but external targets are spelled out */
    a { color: #000; text-decoration: underline; }

    a[href^="http"]::after {
        content: " <" attr(href) ">";
        font-size: 8.5pt;
        font-family: var(--font-mono);
        word-break: break-all;
    }

    /* In-page anchors (TOC, cross-references) would just print "<#id>" */
    a[href^="#"]::after { content: ""; }

    /* Running footer. Chromium repeats position:fixed blocks on every page;
       the 0.9in bottom @page margin reserves room for it. */
    .print-footer {
        display: block !important;
        position: fixed;
        bottom: -0.55in;
        left: 0;
        right: 0;
        border-top: .5pt solid #999;
        padding-top: 3pt;
        font-size: 8pt;
        color: #444;
    }
}