/* Reference sheets inside the student area (StudentReferenceContent.vue), the
   second general subject of /materials. PUBLIC bundle, like student.css and
   student-session-deck.css: the student pages render outside the admin shell, so
   this file must never gain an "admin" prefix (bundle-css.mjs partitions the two
   bundles on the literal `/css/admin`, and a mis-named file arrives UNSTYLED in
   production while dev looks fine).

   A file of its own rather than more of student.css for the same reason the
   session deck got one: several sessions work this area at once and two of them
   must not be editing one sheet.

   Every class here is `.sref-` prefixed and nothing here redefines a borrowed
   one. The component does borrow three families whole and on purpose, and they
   are NOT restyled here: `.stu-prep-osbar` / `.stu-prep-os*` (the Mac / Windows
   switch, so the two tabs of one page show one control) and `.stu-prep-extlink`
   (the area's one external-link affordance). Editing them belongs in
   student.css, where their other caller can be seen.

   Tokens only, from global.css. No new colour is introduced: the one raw value
   below is #0B0C12, which is the deep-dive terminal band's ink and is already
   the background of `.stu-prep-code` in student.css. */

/* ── The page's opening block ─────────────────────────────────── */

.sref-intro {
    margin: 0 0 var(--space-sm);
    max-width: 72ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
}

.sref-intro--sub {
    margin-bottom: var(--space-lg);
    color: var(--text-secondary);
}

/* ── The topic tabs ──────────────────────────────────────────────
   AN UNDERLINED BAR AND NOT THE AREA'S `.stu-tabs` PILL TRACK. The materials
   page already stacks a category pill track and a subject rail above this
   panel, so a third row of pills would read as one more control of the same
   level. This is the one place in the student area that deliberately declines
   the pill vocabulary, and the shape is what tells the reader it is a level
   down.

   ONE ROW AT EVERY WIDTH, scrolling sideways when it does not fit, which is why
   a tab wears the tool's short name from the data (`section.tab`) and not the
   section title. A wrapped underlined bar puts the container hairline under the
   last row only, leaving the selected tab's rule floating in the middle of the
   strip. Six short names fit one line inside the 948px panel with room to
   spare; a phone is the width that scrolls.

   Same overflow split as the materials rail and category strip: x auto, y
   hidden, and `overscroll-behavior-x` rather than the shorthand, so a vertical
   swipe that starts on the tabs still scrolls the page. */

.sref-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.sref-tabs::-webkit-scrollbar {
    display: none;
}

/* NO WEIGHT CHANGE ON THE SELECTED TAB. The strip does not wrap, so a tab that
   grew when selected would shove its neighbours sideways on every press - most
   visible on a phone, where the strip is already scrolled. Colour and the rule
   under it carry the state on their own. */
.sref-tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: none;
    /* Sits ON the container hairline rather than above it, so the selected rule
       replaces that 1px instead of stacking a second line under it. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sref-tab:hover {
    color: var(--text-color);
}

.sref-tab:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.sref-tab--active,
.sref-tab--active:hover {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

/* ── The open topic ───────────────────────────────────────────────
   One card, holding whichever tab is selected. The glass recipe of `.stu-card`,
   written out rather than borrowed: the head and the body carry their own
   padding, so the card itself must have none, and a bare `padding: 0` on
   `.stu-card` here would silently flatten every other card in the student area
   that this sheet happens to load beside. */

.sref-section {
    margin-bottom: var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--shadow-md);
}

/* The panel is the tabpanel of the strip above and carries `tabindex="0"`, so
   it takes focus from the keyboard and has to show it. */
.sref-section:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* The `<h2>` itself is the row: the tab above carries the tool's short name and
   this carries the full title, which is the pair that lets the strip stay one
   line. */
.sref-section__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    font-size: inherit;
    font-weight: inherit;
}

.sref-section__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    font-size: 16px;
    color: var(--primary-color);
}

.sref-section__title {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
}

.sref-section__body {
    padding: var(--space-md) 20px var(--space-lg);
}

.sref-section__intro {
    margin: 0 0 var(--space-lg);
    max-width: 72ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── A group: a heading, an optional lead-in, one table ───────── */

.sref-group {
    margin-bottom: var(--space-lg);
}

.sref-group__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
}

.sref-group__note {
    margin: 0 0 10px;
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* THE TABLE SCROLLS, THE PAGE NEVER DOES. `#app` is `overflow-x: clip` in
   global.css, so a table wider than the panel would be CUT OFF rather than
   reachable. Only the x axis is named here: setting `overscroll-behavior` as
   well would stop a vertical swipe that starts on a table from scrolling the
   page, which is most of the page on a phone. */
.sref-tablewrap {
    overflow-x: auto;
}

/* `fixed` and not `auto`: the column widths are then a decision rather than a
   race between a 25-character Hebrew label and an 86-character PowerShell line,
   and a long value wraps inside its own column instead of squeezing the label
   into a vertical ribbon. */
.sref-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.sref-table__th {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 400;
    text-align: right;
    vertical-align: bottom;
}

/* The label column has no visible heading: it is self-evident on the page and
   the column's accessible name is carried by a `.stu-visually-hidden` span in
   the markup, so a screen reader still announces one.

   IT TAKES THE MAJORITY, which is the split one value column allows and two did
   not. The label carries a Hebrew phrase AND its explanatory note, both of which
   wrap; the value is one key combination, and the widest that is not already a
   wrapping error message measures 415px against the 435px this leaves it. The
   column grows relatively as the panel narrows (the two bands at the bottom),
   because a combination has a floor and a paragraph does not. */
.sref-table__th--label {
    width: 52%;
}

/* English only, so the mono face is safe here. Hebrew inside `--font-mono`
   falls through to a Hebrew fallback and reads as a different typeface, which
   is why every Hebrew string on this page is in the body font.

   THE GUTTER IS LOGICAL AND THE CELL MUST STAY RTL. `padding-inline-end`
   resolves against the ELEMENT's own direction, so this 12px is the physical
   LEFT gutter only for as long as this `<th>` inherits the page's RTL - the
   same side, and the same 12px, that `.sref-table__cell` puts under it. Put a
   `dir="ltr"` back on the cell to isolate its Latin label and this one
   declaration silently moves to the physical right, leaving the column heading
   inset from the edge its own values are flush against, in both platform
   orders. The label is isolated with a `<bdi>` in the markup for that reason.
   Same for `--all` below, which has no `dir` either. */
.sref-table__th--os {
    width: 48%;
    padding-inline-end: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-color);
}

/* A table whose every row holds on both systems heads its value column with an
   accessible name and nothing visible (see `split` in the component), where
   "macOS" would state a difference the table does not make. Body font, not the
   mono face above: there is no Latin label to set. Same width as the platform
   column, which is what keeps `table-layout: fixed` giving every table on the
   page the same column edge. */
.sref-table__th--all {
    width: 48%;
    padding-inline-end: 12px;
}

.sref-table__row > * {
    padding-block: 11px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.sref-table__row:last-child > * {
    border-bottom: none;
}

/* A row header, so `th` resets: no bold, no centring. */
.sref-table__label {
    padding-inline-end: 16px;
    font-weight: 400;
    text-align: right;
}

.sref-table__label-text {
    display: block;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-color);
}

.sref-table__note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.sref-table__cell {
    padding-inline-end: 12px;
    text-align: right;
}

/* A row that has no value on the SELECTED platform but does carry a note keeps
   its empty cell on purpose: the absence is the fact and the note beside it is
   the answer ("ב-Windows מקישים Win+Shift+S..."), where a dash or a "none" here
   would be a claim the data does not make. A row with neither is not rendered
   at all - the component drops it, and the group with it if nothing survives. */

/* `max-width` IS LOAD-BEARING, NOT TIDINESS. This is a flex container inside a
   `table-layout: fixed` cell, and a flex item's `min-width: auto` refuses to
   shrink below its own min-content: without the clamp here and the `min-width:
   0` below, a 217px file path sat inside a 155px column, pushed past the table
   and gave `.sref-tablewrap` something to scroll on a phone - which is the
   sideways swipe dropping the second platform column was meant to end. */
.sref-val {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 6px 8px;
}

/* `pre-wrap` keeps the double space the data uses to separate two forms on one
   row, and wraps where a space already is, so a shell command breaks between
   its arguments and never inside one. `break-word` is the escape hatch for a
   value that is a single unbreakable token wider than its column: on a phone
   three of them are (`Cmd+Shift+Backspace`, `Option+Shift+Down` and the example
   file path), and those do break mid-token. That is the accepted cost of a
   table that fits the screen - the alternative is a minimum width that makes
   every one of the 220 rows swipeable for the sake of three. */
.sref-val__code {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.sref-val__copy {
    flex-shrink: 0;
    padding: 3px 9px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sref-val__copy:hover {
    border-color: var(--primary-border);
    color: var(--primary-color);
}

.sref-val__copy:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ── Prose under the tables: the why, where a table carries the what ── */

.sref-prose {
    margin-top: var(--space-lg);
    max-width: 72ch;
}

.sref-prose__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
}

.sref-prose__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-color);
}

/* The dark chip marks a terminal block, the same ink as `.stu-prep-code` in
   student.css and the deep-dive band it came from. The copy button sits under
   the code rather than over it: these blocks are multi-line, and a floating
   button would sit on top of the first line's end. */
.sref-codeblock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: #0B0C12;
}

/* `pre` and not `pre-wrap`: a multi-line command block keeps its own line
   breaks and scrolls inside this box, so no command is ever silently rewrapped
   into something that would not run. */
.sref-code {
    display: block;
    width: 100%;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    white-space: pre;
}

.sref-codeblock__copy {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sref-codeblock__copy:hover {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.sref-codeblock__copy:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* ── Sources ──────────────────────────────────────────────────── */

.sref-links {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.sref-links__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
}

.sref-links__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin: 0;
}

/* ── Tablet ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* The panel loses width to the subject rail before the phone band folds it
       away, and the Hebrew label is the column that can give some back. */
    .sref-table__th--label {
        width: 44%;
    }

    /* Must move with its neighbour or the two kinds of table stop sharing their
       column edge: both declare 44 + this. */
    .sref-table__th--os,
    .sref-table__th--all {
        width: 56%;
    }
}

/* ── Phone ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Touch floor. The strip already scrolls sideways at every width, so a
       phone needs nothing but the taller target. */
    .sref-tab {
        min-height: 44px;
        padding-inline: 14px;
        font-size: 14px;
    }

    .sref-section__head {
        gap: 12px;
        padding: 14px 16px;
    }

    .sref-section__icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .sref-section__title {
        font-size: 16.5px;
    }

    .sref-section__body {
        padding: var(--space-md) 16px var(--space-lg);
    }

    /* NO MINIMUM WIDTH, AND THAT IS THE POINT OF ONE VALUE COLUMN. Two of them
       needed 460px on a 292px table, so every row cost a sideways swipe; one
       fits the phone outright and the table never scrolls. The label takes a
       little more of it here, because a Hebrew label wraps and a key
       combination mostly does not. `.sref-tablewrap` stays for the long
       PowerShell lines, which wrap inside their own column. */
    .sref-table__th--label {
        width: 40%;
    }

    .sref-table__th--os,
    .sref-table__th--all {
        width: 60%;
    }

    /* A touch target, on a control that is 11.5px of text on a desktop. */
    .sref-val__copy {
        min-height: 32px;
        padding-inline: 12px;
    }
}