/* Session 1 material inside the student area (StudentSession1Content.vue), the
   third general subject of /materials. PUBLIC bundle, like student.css,
   student-reference.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 for the same reason the reference sheets got one: several
   sessions work this area at once and two of them must not be editing one
   sheet.

   Every class here is `.ses1-` prefixed and nothing here redefines a borrowed
   one. Three families are borrowed WHOLE and are NOT restyled here:
   `.stu-prep-osbar` / `.stu-prep-os*` (the Mac / Windows switch, so all three
   tabs of one page show one control), `.stu-prep-code` (the LTR command block
   with its copy button) and `.stu-prep-extlink` (the area's one external-link
   affordance). Editing any of them belongs in student.css, where their other
   callers can be seen.

   Tokens only, from global.css. The two raw values below are #0B0C12, the deep
   dive terminal ink already used by `.stu-prep-code`, and #16A34A, the one
   green in the area, used ONLY for the "done when" test because that line is
   the workshop's whole self-check and has to be findable at a glance on a
   half-finished repository at 14:30 on a Friday. */

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

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

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

/* ── The index: one chip per part of the page ─────────────────────
   Buttons and not anchors, because a collapsed part has no body in the DOM to
   jump to: the press opens it first and scrolls second. Same decision, and the
   same shape, as the reference sheets index. */

.ses1-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-md);
}

.ses1-index__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ses1-index__item:hover {
    border-color: var(--primary-border);
    background: #fff;
}

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

.ses1-index__item--open {
    border-color: var(--primary-border);
    background: var(--primary-light);
}

.ses1-index__icon {
    display: inline-flex;
    font-size: 15px;
    color: var(--primary-color);
}

.ses1-index__label {
    white-space: nowrap;
}

/* ── Open all / close all ───────────────────────────────────────── */

.ses1-bulk {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: var(--space-lg);
}

.ses1-bulk__btn {
    padding: 6px 0;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--primary-color);
    cursor: pointer;
}

.ses1-bulk__btn:hover {
    opacity: 0.75;
}

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

.ses1-bulk__note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* The line beside the Mac / Windows switch, saying what the switch does on THIS
   page: it emphasises a command block. It had a counterpart on the reference
   sheet until 2026-09-03, when that switch stopped emphasising anything and
   started dropping the other platform outright - there is nothing left to
   borrow there, and nothing there to keep in step with. */
.ses1-osnote {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── One part of the material, as a TAB PANEL ─────────────────────
   It used to be a collapsible accordion of five parts, all in one document. The
   2026-09-04 redesign makes it a real tab bar with exactly one panel open
   (StudentMeetingMaterial.vue owns the bar), so the opener button, the chevron
   and the open-all control are gone and the head is a plain header. The GLASS
   SHELL stays, deliberately the same as the reference sheet's `.sref-section`,
   so a student moving between the two meets one kind of block.

   The panel carries no bottom margin of its own: the page's rhythm below it
   belongs to `.stu-meeting__material`. */

.ses1-section {
    margin-bottom: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ses1-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light);
}

.ses1-section__icon {
    display: inline-flex;
    flex: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    font-size: 15px;
    color: var(--primary-color);
}

.ses1-section__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.ses1-section__title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
}

.ses1-section__scent {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ses1-section__chevron {
    flex: none;
    font-size: 13px;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.ses1-section__chevron--open {
    transform: rotate(-180deg);
}

.ses1-section__body {
    padding: var(--space-md) 18px var(--space-lg);
}

.ses1-section__intro {
    margin: 0 0 var(--space-md);
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ── The homework spec ────────────────────────────────────────────
   Three lines and nothing else. It is the shape every agent task in this course
   is written in, so it is set as a labelled list rather than as prose. */

.ses1-spec {
    margin: 0 0 var(--space-md);
    padding: 0;
    list-style: none;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    background: var(--primary-light);
}

.ses1-spec__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.ses1-spec__row:last-child {
    border-bottom: none;
}

.ses1-spec__label {
    flex: none;
    font-weight: 500;
    color: var(--primary-color);
}

.ses1-spec__value {
    flex: 1 1 22ch;
    min-width: 0;
}

/* The one real test, and the reason this page exists in a room where every
   laptop can open a file it has not published. */
.ses1-proof {
    margin: 0 0 var(--space-md);
    padding: 14px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-color);
}

.ses1-proof__label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.ses1-submit {
    margin: 0;
    padding: 12px 16px;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-color);
}

.ses1-submit__due {
    color: var(--primary-color);
}

/* ── One workshop step ────────────────────────────────────────────
   A card and not a table row: a step carries five different kinds of thing (an
   action, commands, an expected result, a test, a fallback) and a table gives
   the longest of them the same measure as the shortest. */

/* `minmax(0, 1fr)` and the `min-width: 0` below are load-bearing, not tidiness.
   A grid item's automatic minimum size is its MIN-CONTENT width, and one step
   carries a single very long command line, so without these the whole column
   stretches to that line and every one of the fourteen cards is dragged wider
   than the panel. The command block scrolls inside itself; the card must not. */
.ses1-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.ses1-step {
    min-width: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.ses1-step__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
}

.ses1-step__n {
    flex: none;
    min-width: 3.4em;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--primary-color);
}

.ses1-step__title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
}

.ses1-step__body {
    padding: 14px 16px;
}

.ses1-step__action {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-color);
}

.ses1-step__cmds {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin: 0 0 12px;
}

/* The borrowed command chip is a flex row whose <code> already scrolls; this
   only stops the chip itself from setting the column's minimum width. It adds
   no visual rule and belongs here rather than in student.css, where the same
   family serves a page that never puts one inside a grid. */
.ses1-step__cmds .stu-prep-code {
    min-width: 0;
}

/* The per-platform command block keeps BOTH systems on screen and inks the
   selected one, exactly as the reference sheets do: students read over a
   neighbour's shoulder all term, and a step that exists on one system only is
   only understandable while the other half is still visible. */
.ses1-step__oslabel {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ses1-step__cmdgroup--muted {
    opacity: 0.45;
}

.ses1-step__line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.ses1-step__lbl {
    flex: none;
    font-weight: 500;
}

.ses1-step__lbl--done {
    color: #16A34A;
}

.ses1-step__lbl--fallback {
    color: var(--accent-warm);
}

.ses1-step__val {
    flex: 1 1 20ch;
    min-width: 0;
}

/* ── The extensions and the errors ────────────────────────────── */

.ses1-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ses1-item {
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.ses1-item__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
}

.ses1-item__n {
    display: inline-block;
    min-width: 1.6em;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--primary-color);
}

.ses1-item__what {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-color);
}

.ses1-item__done {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.ses1-item__done b {
    font-weight: 500;
    color: #16A34A;
}

/* An error message is Latin and is never allowed to reflow inside RTL prose,
   so it sits on its own isolated LTR line above its explanation. */
.ses1-err__msg {
    display: block;
    margin: 0 0 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: #0B0C12;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: #E8EEF8;
    overflow-x: auto;
}

/* ── The per-item summaries ─────────────────────────────────────── */

.ses1-sum {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.ses1-sum__card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    overflow: hidden;
}

.ses1-sum__opener {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    font-family: var(--font-body);
    text-align: right;
    cursor: pointer;
}

.ses1-sum__opener:hover {
    background: var(--fsp-hover-bg);
}

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

.ses1-sum__titles {
    flex: 1 1 auto;
    min-width: 0;
}

/* `display: block` is load-bearing on both, and its absence was a real defect:
   the two are SPANs inside a button (a <p> inside a <button> is invalid HTML,
   which is why they are spans), so without it the title and the subtitle run
   together into one unbroken line - "…והחדר המעורבחמש דקות שקובעות…" - on every
   one of the sixteen cards. */
.ses1-sum__title {
    display: block;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
}

.ses1-sum__sub {
    display: block;
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* An item the day did not reach is still published, and says so on its own face
   rather than being quietly missing: a student who was in the room needs to
   know which four of these are meeting 2 and not something they slept through. */
.ses1-sum__flag {
    flex: none;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    background: var(--accent-warm-light);
    font-size: 12px;
    color: var(--accent-warm);
}

.ses1-sum__chevron {
    flex: none;
    font-size: 12px;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.ses1-sum__chevron--open {
    transform: rotate(-180deg);
}

.ses1-sum__body {
    padding: 0 16px 16px;
}

.ses1-sum__block {
    margin: 0 0 12px;
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color);
}

.ses1-sum__block:last-child {
    margin-bottom: 0;
}

.ses1-sum__lbl {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
}

.ses1-sum__refs {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}

.ses1-sum__ref {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.ses1-sum__ref:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 1024px) {
    .ses1-section__body {
        padding: var(--space-md) 14px var(--space-lg);
    }

    .ses1-step__head {
        padding: 12px 14px;
    }

    .ses1-step__body {
        padding: 14px;
    }
}

/* ── Phone ────────────────────────────────────────────────────────
   The steps are what a student opens on a phone, standing next to a laptop, so
   nothing here may collapse to a width the commands then scroll sideways
   inside: the labelled lines stack, and only the command block itself keeps its
   own horizontal scroll. */

@media (max-width: 767px) {
    .ses1-index__item {
        min-height: 38px;
        padding: 0 12px 0 14px;
        font-size: 13px;
    }

    .ses1-section__head {
        padding: 14px;
        gap: 10px;
    }

    .ses1-section__title {
        font-size: 16px;
    }

    .ses1-section__body {
        padding: var(--space-md) 12px var(--space-md);
    }

    .ses1-step__head {
        padding: 12px;
    }

    .ses1-step__title {
        font-size: 15px;
    }

    .ses1-step__body {
        padding: 12px;
    }

    .ses1-step__line {
        flex-direction: column;
        gap: 2px;
    }

    .ses1-step__val {
        flex: 1 1 auto;
    }

    .ses1-spec__row {
        flex-direction: column;
        gap: 2px;
        padding: 12px 14px;
    }

    .ses1-sum__opener {
        padding: 12px;
    }

    .ses1-sum__body {
        padding: 0 12px 14px;
    }
}