/* ============================================================
   Lab Notes — shared stylesheet
   Design tokens mirror index.html so notes read as pages torn
   from the same notebook. Keep the two in sync by hand; the
   token block below is the only part that must match.
   ============================================================ */

:root {
    --desk: #e7e4d8;
    --paper: #f4f1e8;
    --ink: #1c1a17;
    --muted: #4a4536;
    --faint: #a49c86;
    --line: #1c1a17;
    --linesoft: rgba(28, 26, 23, .2);
    --dashln: rgba(28, 26, 23, .35);
    --dotbg: #dcd6c4;
    --labelbg: rgba(244, 241, 232, .85);
    --gridmin: rgba(28, 26, 23, .05);
    --gridmaj: rgba(28, 26, 23, .08);
    --rulebg: rgba(28, 26, 23, .035);
}

html[data-theme="dark"] {
    --desk: #191b1f;
    --paper: #23262b;
    --ink: #d6d4c8;
    --muted: #9a9c94;
    --faint: #7c7e78;
    --line: #d6d4c8;
    --linesoft: rgba(214, 212, 200, .2);
    --dashln: rgba(214, 212, 200, .3);
    --dotbg: #2c3037;
    --labelbg: rgba(35, 38, 43, .9);
    --gridmin: rgba(214, 212, 200, .05);
    --gridmaj: rgba(214, 212, 200, .08);
    --rulebg: rgba(214, 212, 200, .04);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
a { color: inherit; }

::selection { background: rgba(120, 110, 80, .25); }

.desk {
    min-height: 100vh;
    padding: 48px 24px 80px;
    display: flex;
    justify-content: center;
    background: var(--desk);
    font-family: 'IBM Plex Mono', monospace;
    color: var(--ink);
}

.sheet {
    position: relative;
    width: 940px;
    max-width: 100%;
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--gridmin) 1px, transparent 1px),
        linear-gradient(90deg, var(--gridmin) 1px, transparent 1px),
        linear-gradient(var(--gridmaj) 1px, transparent 1px),
        linear-gradient(90deg, var(--gridmaj) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
    border: 1px solid var(--linesoft);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
}

/* ===== header ===== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 34px 12px 44px;
    border-bottom: 1.5px solid var(--line);
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.header__right { display: flex; align-items: center; gap: 20px; }
.header__page { color: var(--muted); }

.header__back {
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
}

.header__back:hover { opacity: .6; }

.toggle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    padding: 5px 12px;
    cursor: pointer;
}

/* ===== note body ===== */
.note {
    padding: 34px 44px 8px;
}

.note__eyebrow {
    font-size: 10.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
}

.note__title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 1.2px;
    font-size: 30px;
    line-height: 1.25;
    margin: 12px 0 0;
    max-width: 44ch;
}

.note__standfirst {
    font-size: 13px;
    line-height: 1.8;
    margin: 16px 0 0;
    max-width: 74ch;
    color: var(--ink);
}

/* meta strip */
.meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    margin-top: 26px;
}

.meta__cell {
    padding: 10px 14px;
    border-right: 1px solid var(--linesoft);
}

.meta__cell:last-child { border-right: none; }

.meta__k {
    font-size: 9px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
}

.meta__v {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 5px;
}

/* ===== prose ===== */
.h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-size: 12.5px;
    border-bottom: 1.5px solid var(--line);
    padding-bottom: 6px;
    margin: 40px 0 0;
}

.p {
    font-size: 13px;
    line-height: 1.85;
    margin: 16px 0 0;
    max-width: 78ch;
}

.p--lead { margin-top: 18px; }

code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .92em;
    background: var(--rulebg);
    border: 1px solid var(--linesoft);
    padding: 1px 5px;
}

.ul {
    font-size: 13px;
    line-height: 1.85;
    margin: 14px 0 0;
    padding-left: 20px;
    max-width: 78ch;
}

.ul li { margin-bottom: 8px; }

/* ===== tables ===== */
.tablewrap { overflow-x: auto; margin-top: 20px; }

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: 12px;
    border: 1px solid var(--line);
}

th {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-size: 10.5px;
    text-align: left;
    padding: 10px 13px;
    border-bottom: 1.5px solid var(--line);
    border-right: 1px solid var(--linesoft);
    vertical-align: bottom;
}

td {
    padding: 11px 13px;
    line-height: 1.6;
    border-bottom: 1px solid var(--linesoft);
    border-right: 1px solid var(--linesoft);
    vertical-align: top;
}

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

.num { white-space: nowrap; }

/* ===== callout ===== */
.callout {
    border: 1px dashed var(--dashln);
    padding: 16px 20px;
    margin-top: 22px;
}

.callout__k {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 10.5px;
    color: var(--muted);
}

.callout .p { margin-top: 10px; }

/* ===== receipts ===== */
.receipts {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.9;
}

.receipts a { border-bottom: 1px solid var(--line); text-decoration: none; }
.receipts a:hover { opacity: .6; }

/* ===== footer ===== */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding: 18px 34px 22px 44px;
    margin-top: 40px;
    border-top: 1.5px solid var(--line);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.footer a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.footer a:hover { opacity: .6; }

/* ===== responsive ===== */
@media (max-width: 760px) {
    .desk { padding: 20px 12px 48px; }
    .header { padding: 14px 18px 10px; }
    .header__right { gap: 12px; }
    .note { padding: 24px 18px 8px; }
    .note__title { font-size: 23px; }
    .meta { grid-template-columns: 1fr 1fr; }
    .meta__cell:nth-child(2n) { border-right: none; }
    .meta__cell:nth-child(-n+2) { border-bottom: 1px solid var(--linesoft); }
    .footer { padding: 16px 18px 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
}