/* ==========================================================================
   Untitled Needleworks — Policy documents
   Layered on site.css. Tokens, nav and footer all come from there; this file
   only adds the reading column, the two document controls, the dark ground and
   the print sheet.

   These pages are documents, not compositions. No cloth, no stage, no reveal —
   a policy is read once, under pressure, often on a phone, sometimes printed
   and handed to someone else. Everything here serves that and nothing else.
   ========================================================================== */

/* ============================== GROUND ==============================
   site.css is light-only: one cream ground, brown type. The rest of the site
   stays that way. These pages get a second ground, and the switch is scoped to
   .doc-body so nothing here can reach the homepage.

   Three states, in this order and no other:
     1. bare :root                             — the light palette, always defined
     2. @media dark + :not([data-theme=light]) — the system preference
     3. :root[data-theme=dark]                 — the manual toggle, which wins

   Rule 3 must come last or the toggle could not override the system in the
   light direction. Every colour has its value on the bare :root, so a page
   still paints correctly if the media query never matches. */
:root {
    --doc-bg:      #F7F4ED;   /* cream-00                                   */
    --doc-raised:  #EFE9DC;   /* cream-10  — the control cluster            */
    --doc-text:    #4A3728;   /* brown-70  — body copy              10.23:1 */
    --doc-head:    #241B12;   /* brown-90  — headings               15.41:1 */
    --doc-muted:   #6F5945;   /* brown-50  — dates, meta             5.99:1 */
    --doc-link:    #A8460F;   /* orange-70 — small text              5.39:1 */
    --doc-edge:    #8A7660;   /* boundaries                          3.95:1 */
    --doc-rule:    #C4B49E;   /* decorative hairlines only                  */
    --doc-focus:   #C2571C;   /* orange-60                           4.09:1 */
    --doc-current: rgba(168, 70, 15, 0.04);  /* active contents row        */
    --doc-navbg:   rgba(247, 244, 237, 0.92);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --doc-bg:      #0B0704;   /* stage-ground — the brand's own dark    */
        --doc-raised:  #241B12;   /* brown-90                               */
        --doc-text:    #E2D9C8;   /* cream-20  — body copy          14.33:1 */
        --doc-head:    #F7F4ED;   /* cream-00  — headings           18.27:1 */
        --doc-muted:   #C4B49E;   /* brown-20  — dates, meta         9.91:1 */
        --doc-link:    #E08A4B;   /* orange-40                       7.56:1 */
        --doc-edge:    #8A7660;   /* the one token that clears 3:1 on both  */
        --doc-rule:    #4A3728;
        --doc-focus:   #C2571C;   /* 4.47:1 here — one ring serves both     */
        --doc-current: rgba(224, 138, 75, 0.08);
        --doc-navbg:   rgba(11, 7, 4, 0.92);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --doc-bg:      #0B0704;
    --doc-raised:  #241B12;
    --doc-text:    #E2D9C8;
    --doc-head:    #F7F4ED;
    --doc-muted:   #C4B49E;
    --doc-link:    #E08A4B;
    --doc-edge:    #8A7660;
    --doc-rule:    #4A3728;
    --doc-focus:   #C2571C;
    --doc-navbg:   rgba(11, 7, 4, 0.92);
    --doc-current: rgba(224, 138, 75, 0.08);
    color-scheme: dark;
}

html { background: var(--doc-bg); }

/* site.css leaves body transparent so the cloth canvas can show through from a
   negative-z layer. There is no cloth here, so the ground gets painted. */
.doc-body {
    background: var(--doc-bg);
    color: var(--doc-text);
}

/* ============================== NAV ==============================
   Same markup and the same rules as every other sub-page, with two changes: it
   carries its ground from the first pixel instead of waiting for a scroll
   listener (a document has no hero to sit over, and reveal.js is not loaded
   here), and it follows the dark ground. */
.doc-body .nav {
    background-color: var(--doc-navbg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--doc-rule);
}
.doc-body .nav__mark,
.page--light .doc-nav:not(.is-stuck) .nav__mark { color: var(--doc-head); }

/* Below 640px site.css hides the bar entirely — the footer is the navigation
   there. These pages cannot do that: the two controls live in the bar, and a
   reader on a phone is exactly who needs the print and theme options. The bar
   stays, and the controls wrap under the wordmark if they must. */
@media (max-width: 639.98px) {
    .doc-body .nav { display: block; }
    .doc-body .nav__inner { padding-block: var(--s3); gap: var(--s3); }
}

/* ============================== CONTROLS ==============================
   Two buttons and a link, in the bar. Everything is a real button or anchor —
   keyboard reachable by construction, with no roles to get wrong. */
.doc-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
}

.doc-tool {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    /* 44x44: these are touch targets on the one page where the nav bar is
       the only chrome a phone reader gets. The height was here already. The
       width was not, and below 480px the label is hidden, which left the two
       icon-only buttons 40px wide — so the floor has to be declared, not
       left to the padding. Centred, so the icon sits in the middle of the
       square the floor makes rather than against its left edge. */
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0 var(--s4);
    font-family: var(--font-text);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--doc-text);
    background: var(--doc-raised);
    border: 1px solid var(--doc-edge);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t-micro) var(--ease),
                border-color var(--t-micro) var(--ease);
}
.doc-tool:hover { color: var(--doc-link); border-color: var(--doc-link); }
.doc-tool svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* The toggle keeps one icon in both states. Swapping a moon for a sun beside a
   label that reads "Dark mode" is a mixed metaphor -- the icon would be saying
   "click for light" while the label says "this is the dark control". The moon
   is the control's subject and stays put; the state is carried by aria-pressed
   and, for everyone not using a screen reader, by the accent below. */
.doc-tool--theme[aria-pressed="true"] {
    color: var(--doc-link);
    border-color: var(--doc-link);
}

/* The toggle does nothing without scripting, so it is not rendered without it. */
.no-js .doc-tool--theme { display: none; }

@media (max-width: 479px) {
    .doc-tool { padding: 0 var(--s3); font-size: 0.6875rem; letter-spacing: 0.06em; }
    .doc-tool--label { display: none; }   /* icon only; aria-label carries it */
}

/* ============================== THE COLUMN ==============================
   One column, left where the eye starts, not centred in an ocean. Measured in
   rem rather than ch: --font-text is a system stack whose "0" advance differs
   by platform, so ch would mean a different measure on every OS. 36rem holds
   64-72 characters of English at 17px across the stacks this site ships. */
.doc {
    padding-top: calc(72px + var(--s7));
    padding-bottom: var(--s9);
}
.doc__shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: var(--gutter);
}
.doc__body { max-width: 36rem; }

.doc__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0.01em;
    color: var(--doc-head);
}
.doc__meta {
    margin-top: var(--s4);
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--doc-rule);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--doc-muted);
}

/* Sections are the document's spine. The number and the heading are one string
   in the source and stay that way — nothing here renumbers or re-orders. */
/* scroll-margin-top: an anchor jump otherwise lands with the heading behind
   the fixed nav. */
.doc__body section {
    margin-top: var(--s7);
    scroll-margin-top: calc(72px + var(--s5));
}
.doc__body h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    line-height: 1.25;
    color: var(--doc-head);
    margin-bottom: var(--s4);
}
.doc__body h3 {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--doc-head);
    margin-top: var(--s5);
    margin-bottom: var(--s3);
}
/* A heading that is not inside a <section> gets no spacing from the section
   rule, so it collides with whatever is above it. The policy hub has one: its
   welcome heading sits directly under the page title, and both are set in the
   display face at similar sizes, so without this they read as one run-on
   heading. Direct child only -- section headings are nested and keep theirs. */
.doc__body > h2 { margin-top: var(--s6); }

.doc__body p { margin-bottom: var(--s4); }
.doc__body p:last-child { margin-bottom: 0; }

.doc__body ul,
.doc__body ol {
    margin: 0 0 var(--s4) var(--s5);
    padding: 0;
}
.doc__body ul { list-style: disc; }
.doc__body ol { list-style: decimal; }
.doc__body li { margin-bottom: var(--s2); padding-left: var(--s2); }
.doc__body li::marker { color: var(--doc-muted); }

.doc__body strong { color: var(--doc-head); font-weight: 600; }

.doc__body blockquote {
    margin: var(--s5) 0;
    padding-left: var(--s5);
    border-left: 2px solid var(--doc-edge);
    color: var(--doc-muted);
}

.doc__body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--s5);
    font-size: 0.9375rem;
}
.doc__body th,
.doc__body td {
    text-align: left;
    padding: var(--s3);
    border-bottom: 1px solid var(--doc-rule);
    vertical-align: top;
}
.doc__body th { color: var(--doc-head); font-weight: 600; }

/* A wide table scrolls inside itself rather than pushing the page sideways. */
.doc__scroll { overflow-x: auto; }

.doc__body a {
    color: var(--doc-link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    /* An assembled address is one unbreakable 31-character token, which is
       wider than the column on a 320px phone. */
    overflow-wrap: anywhere;
}
.doc__body a:hover { text-decoration-thickness: 2px; }

/* One focus ring for the whole page, clearing 3:1 against both grounds.
   site.css sets no visible focus style, so this is the only one. */
.doc-body a:focus-visible,
.doc-body button:focus-visible {
    outline: 3px solid var(--doc-focus);
    outline-offset: 2px;
}

/* The tag pill, on the hub. Carried over from the old stylesheet rather than
   dropped, because the word inside it is on the page today. */
.doc__body .tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--s3);
    padding: 2px var(--s3);
    border: 1px solid var(--doc-edge);
    border-radius: 999px;
    font-family: var(--font-text);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--doc-muted);
}

/* ============================== THE SPLIT ==============================
   Two columns from 1024px: contents on the left, document on the right.

   The sidebar takes the width, the prose does not. .doc__body keeps its 36rem
   measure inside a minmax(0, 1fr) track, so the column can be 700px wide and
   the line length is still 64-72 characters. Filling the space with text would
   undo the one thing a reading column is for.

   minmax(0, 1fr) rather than 1fr: a bare 1fr track has min-width auto, so one
   unbreakable 31-character address inside it can push the grid wider than its
   container. */
.doc__split { display: block; }

@media (min-width: 1024px) {
    .doc__split {
        display: grid;
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--s8);
        /* start, not stretch: a stretched grid item is full-height, and
           position: sticky has nothing left to travel inside. */
        align-items: start;
    }
}

/* Pages with no contents list get no grid and no empty column. Three of them:
   privacypolicy.html and company-policy.html never had one, and index.html
   lost its one when the hub became a grouped list.

   They are indented to where the grid puts the document rather than centred,
   so the prose does not jump sideways when a reader moves from one policy to
   the next. The offset is built from the same two values the grid is -- the
   sidebar track and the gap -- so the two cannot drift apart, including when
   a reader has scaled their root font and 15rem is no longer 240px. */
@media (min-width: 1024px) {
    .doc__body--solo { margin-left: calc(15rem + var(--s8)); }
}

/* ============================== CONTENTS ==============================
   One component, two behaviours. On a phone it is a sticky disclosure at the
   top of the document; from 1024px it is a sticky sidebar that stays open.

   It is a real disclosure at both sizes rather than a button that stops
   working above a breakpoint, because a control whose aria-expanded stops
   matching what is on screen is worse than one that keeps working. Authored
   open so it degrades to a plain visible list with no scripting. */
.doc__toc {
    position: sticky;
    top: calc(72px + var(--s3));
    z-index: 20;
    margin-bottom: var(--s6);
    background: var(--doc-raised);
    border: 1px solid var(--doc-rule);
}

.doc__toc-h {
    margin: 0;
    font: inherit;
}

.doc__toc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
    /* 44px minimum, and the padding gets it there on its own. */
    min-height: 44px;
    padding: var(--s3) var(--s4);
    background: none;
    border: 0;
    font-family: var(--font-text);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: var(--doc-muted);
    cursor: pointer;
}
.doc__toc-btn:hover { color: var(--doc-link); }

.doc__toc-chev {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-90deg);
    transition: transform var(--t-micro) var(--ease);
}
.doc__toc-btn[aria-expanded="true"] .doc__toc-chev { transform: rotate(0deg); }

/* The collapse hook is a class on the nav, not a sibling selector on the
   button. The button sits inside its <h2> so the panel is the heading's
   sibling, not the button's, and `[aria-expanded="false"] + .panel` silently
   matched nothing -- the control said closed while the list stayed open.

   A class also means the no-scripting case is right by construction: nothing
   adds .is-collapsed, so the list is simply visible. aria-expanded is still
   the state a screen reader reads; this is only the styling hook, and both
   are set in the same place. */
.doc__toc.is-collapsed .doc__toc-panel { display: none; }

.doc__toc-panel {
    padding: 0 var(--s4) var(--s4);
    /* 26 entries do not fit a phone, and clipping them would hide half the
       document's structure. The panel scrolls inside itself instead. */
    max-height: min(60svh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.doc__toc ul { list-style: none; margin: 0; padding: 0; }
.doc__toc li { margin: 0; padding: 0; }
.doc__toc a {
    /* 44px targets: this is the navigation for the whole document. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s2) var(--s3);
    border-left: 2px solid transparent;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--doc-text);
    text-decoration: none;
}
.doc__toc a:hover {
    color: var(--doc-link);
    border-left-color: var(--doc-link);
}

/* The section the reader is in. Colour alone would fail 1.4.1, so the marker
   rule carries it too -- and the rule is what survives a monochrome print or
   a colour-blind reader. */
/* The tint is deliberately faint. At 0.08 it darkened the raised ground the
   phone panel sits on far enough to drop the active row's own text to 4.39:1 --
   the highlight was eating the contrast of the thing it highlighted. The state
   is carried by the marker rule and the weight as well, so a subtler wash loses
   nothing and clears 4.5:1 on all four grounds. */
.doc__toc a[aria-current="true"] {
    color: var(--doc-link);
    border-left-color: var(--doc-link);
    background: var(--doc-current);
    font-weight: 600;
}

@media (min-width: 1024px) {
    .doc__toc {
        top: calc(72px + var(--s5));
        margin-bottom: 0;
        /* The sidebar can outrun the viewport -- internship-terms has 26
           entries. It scrolls independently rather than being cut off. */
        max-height: calc(100svh - 72px - var(--s7));
        display: flex;
        flex-direction: column;
        background: none;
        border: 0;
        border-left: 1px solid var(--doc-rule);
    }
    .doc__toc-btn {
        padding-left: var(--s4);
        cursor: default;
    }
    /* Open by default on the desktop, and the chevron is still honest about
       the state because the same rule drives it at every width. */
    .doc__toc-panel {
        max-height: none;
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        padding-bottom: var(--s5);
    }
}

/* ============================== MOTION ==============================
   There is almost none to begin with. This is belt and braces: site.css
   already carries a reduced-motion block, and this covers what was added
   here plus the smooth scrolling the contents links would otherwise do. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .doc-tool { transition: none; }
    /* The chevron still turns -- it is the state indicator -- it just turns
       instantly instead of sweeping. */
    .doc__toc-chev { transition: none; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================== PRINT ==============================
   What the control produces, and what "Save as PDF" produces. Black on white,
   no chrome, and no colour carrying meaning — it has to survive a monochrome
   office printer and still be a complete, readable copy of the document.

   The colours are neutralised at the TOKEN level, not selector by selector.
   That matters more than it looks: an earlier version set #000 on a list of
   selectors, and every element it had not thought of — <strong>, the list
   markers — kept whatever the screen theme gave it. A reader printing from a
   browser in dark mode got cream-on-white bold labels, which is to say a legal
   document with the defined terms missing. Redefining the tokens cannot miss
   an element, because there is nothing else for one to inherit from. */
@media print {
    @page {
        size: A4;
        margin: 18mm 16mm 20mm;
    }

    /* All three theme states collapse to one: ink on paper. */
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"],
    :root:not([data-theme="light"]) {
        --doc-bg:     #FFFFFF;
        --doc-raised: #FFFFFF;
        --doc-text:   #000000;
        --doc-head:   #000000;
        --doc-muted:  #000000;
        --doc-link:   #000000;
        --doc-edge:   #000000;
        --doc-rule:   #000000;
        --doc-focus:  #000000;
        color-scheme: light;
    }

    /* Nav, footer, controls, skip link, contents list: none of it means
       anything on paper, and the contents list points at anchors that do not
       exist once the document is a sheet of A4. */
    .nav,
    .foot,
    .doc-tools,
    .skip,
    .doc__toc { display: none !important; }

    /* With the sidebar gone the grid would leave a 15rem hole down the left
       of every printed page. */
    .doc__split { display: block !important; }
    .doc__body--solo { margin-left: 0; }

    html,
    .doc-body {
        background: #FFF !important;
        color: #000 !important;
    }

    .doc { padding: 0 !important; }
    .doc__shell { max-width: none; padding: 0; }
    /* On paper the line length comes from the page margins, not the column. */
    .doc__body { max-width: none; }

    /* One family for the whole sheet. The display face is a hairline display
       type: it is the brand on screen at 52px, and at 14pt in one ink it goes
       weak and grey. Webfonts are also the first thing a print pipeline drops,
       and a heading that silently falls back is worse than one that never
       tried. Georgia is on every machine that will print this. */
    .doc-body,
    .doc__title,
    .doc__meta,
    .doc__body h2,
    .doc__body h3,
    .doc__body p,
    .doc__body li,
    .doc__body td,
    .doc__body th,
    .doc__body blockquote {
        font-family: Georgia, "Times New Roman", serif;
        color: #000 !important;
    }
    .doc__body li::marker { color: #000; }

    .doc-body,
    .doc__body p,
    .doc__body li,
    .doc__body td,
    .doc__body th {
        font-size: 11pt;
        line-height: 1.5;
    }

    .doc__title { font-size: 22pt; letter-spacing: 0; }
    .doc__meta {
        font-size: 10pt;
        border-bottom: 1pt solid #000;
        padding-bottom: 6pt;
    }
    /* A heading stranded at the foot of a page is a broken document. */
    .doc__body h2 {
        font-size: 14pt;
        font-weight: 700;
        break-after: avoid;
        page-break-after: avoid;
        margin-top: 16pt;
    }
    .doc__body h3 {
        font-size: 11.5pt;
        font-weight: 700;
        break-after: avoid;
        page-break-after: avoid;
    }
    .doc__body strong { font-weight: 700; }
    .doc__body section { margin-top: 0; }
    .doc__body p,
    .doc__body li { orphans: 3; widows: 3; }

    /* Underline is the only thing left distinguishing a link, and it survives
       monochrome. The address is the link text on these pages, so there is
       nothing that needs expanding into a footnote. */
    .doc__body a {
        color: #000 !important;
        text-decoration: underline;
    }

    .doc__body th,
    .doc__body td { border-bottom: 0.5pt solid #000; }
    .doc__body blockquote { border-left: 2pt solid #000; }
}