/* Layoff-Exercise — the participant's three-step round 1 (26 August 2026).
   Loaded by rank_entry.html, rank_brief.html and first_ranking.html.

   THE SAME OBJECT AS THE LANDING PAGE. index.html draws a Sylcorp personnel
   folder, closed, with eight tabbed files inside it (welcome.css). These
   pages are that folder OPEN on a desk: the manila card, the tab in the top
   corner, the ruled sheet, and the eight files with their letter tabs. The
   palette below is welcome.css's, reused verbatim rather than re-picked, so
   the two pages read as one product and neither can drift on its own.

   Three rules this sheet must not break:

   1. NOTHING MAY HINT AT AN ORDER (LO-003). The ranking list is reshuffled
      per participant, so every file card is identical: same paper, same tab,
      same weight. No dog-ears, no tilts, no "featured" card. Where a card
      moves, it is because the reader moved it.
   2. LOGICAL OFFSETS, NOT LEFT/RIGHT. Ten locales, Arabic among them; every
      inline offset uses inset-inline / margin-inline / padding-inline so the
      whole object mirrors with the page.
   3. THE DRAG ALTERNATIVE STAYS VISIBLE. rank-a11y.js injects arrow buttons
      into each row; this sheet gives them room and never hides them behind a
      hover state. Layoff is at WCAG 2.2 AA with zero errors and 2.5.7
      (Dragging Movements) is why those buttons exist.
*/

:root {
    --fld-paper:      #f8f8f5;   /* the sheet */
    --fld-paper-2:    #efefeb;   /* a file inside the folder */
    --fld-edge:       #dbdad3;   /* paper edges */
    --fld-edge-soft:  #e2e1da;
    --fld-manila:     #c6ae85;   /* the folder itself */
    --fld-manila-2:   #b99f74;
    --fld-manila-3:   #ad9268;
    --fld-ink:        #1b2026;
    --fld-ink-soft:   #5e6873;
    --fld-accent:     #1e3c72;   /* the tool's navy, for actions only */
}

/* ── page frame ─────────────────────────────────────────────────────────── */
.fld-page {
    max-width: 44rem;
    margin-inline: auto;
    padding: 2.6rem 1rem 3rem;
}
.fld-page--wide { max-width: 58rem; }

.fld-step {
    margin: 0 0 .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fld-ink-soft);
}
.fld-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--fld-ink);
}
.fld-lede {
    margin: 0 0 1.5rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--fld-ink-soft);
    max-width: 56ch;
}
.fld-note {
    margin: .45rem 0 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--fld-ink-soft);
}
.fld-note--privacy {
    max-width: 60ch;
    margin-top: 1.2rem;
}

/* ── step one: a single card ────────────────────────────────────────────── */
.fld-card {
    background: var(--fld-paper);
    border: 1px solid var(--fld-edge);
    border-radius: 10px;
    padding: 1.8rem 1.6rem 1.6rem;
    box-shadow: 0 1px 2px rgba(27, 32, 38, .05),
                0 8px 24px -16px rgba(27, 32, 38, .35);
}
.fld-field { margin-bottom: 1.1rem; }
.fld-field label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--fld-ink);
}
.fld-field input {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .8rem;
    font: inherit;
    font-size: 1rem;
    color: var(--fld-ink);
    background: #fff;
    border: 1px solid var(--fld-edge);
    border-radius: 7px;
}
.fld-field input:focus-visible {
    outline: 2px solid var(--fld-accent);
    outline-offset: 1px;
    border-color: var(--fld-accent);
}
#class_code { text-transform: uppercase; letter-spacing: .06em; }

.fld-alert {
    margin: 0 0 1.1rem;
    padding: .7rem .85rem;
    border-radius: 7px;
    border: 1px solid #f0b8b0;
    background: #fdf1ef;
    color: #7a2318;
    font-size: .92rem;
    line-height: 1.5;
}

/* ── the open folder ────────────────────────────────────────────────────── */
/* The company name sits on a TAB that sticks up from the folder's top-left
   corner — the shape of a folder icon, not a label printed on the cover
   (owner, 11 September 2026). The tab is the same manila as the strip below
   it and overlaps that strip by a hair, so the two read as one piece; its
   far edge slopes down the way a manila tab does. The folder's own top-left
   corner is square where the tab lands on it. `--fld-tab-h` is the room the
   page leaves above the folder for it. */
.fld-open {
    --fld-tab-h: 1.55rem;
    position: relative;
    margin-top: calc(1.6rem + var(--fld-tab-h));
    padding: 1.6rem 1.1rem 1.4rem;
    background:
        linear-gradient(180deg, var(--fld-manila) 0 1.2rem,
                                var(--fld-manila-2) 1.2rem 100%);
    border-radius: 0 12px 12px 12px;
    box-shadow: inset 0 -2px 0 var(--fld-manila-3),
                0 10px 30px -20px rgba(27, 32, 38, .55);
}
.fld-open__tab,
.fld-folder__tab {
    position: absolute;
    top: calc(-1 * var(--fld-tab-h) + 1px);
    inset-inline-start: 0;
    height: var(--fld-tab-h);
    box-sizing: border-box;
    padding: .3rem 1.9rem .2rem 1.15rem;
    background: var(--fld-manila);
    border-radius: 10px 0 0 0;
    clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 100%, 0 100%);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
    color: #4a3a1e;
    white-space: nowrap;
}
.fld-open__sheet {
    background: var(--fld-paper);
    border: 1px solid var(--fld-edge);
    border-radius: 8px;
    padding: 1.6rem 1.5rem 1.4rem;
}

.fld-para {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.68;
    color: var(--fld-ink);
    max-width: 68ch;
}
.fld-para--closing {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fld-edge-soft);
    color: var(--fld-ink-soft);
}
.fld-h2 {
    margin: 1.8rem 0 .9rem;
    font-size: 1.12rem;
    color: var(--fld-ink);
}

/* ── the eight files ────────────────────────────────────────────────────── */
.fld-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}
.fld-file {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    /* room for the letter tab, on the inline-start edge in every locale */
    padding: .85rem 1rem .85rem 1rem;
    background: var(--fld-paper-2);
    border: 1px solid var(--fld-edge);
    border-radius: 7px;
}
/* The letter tab. A plain square of slightly heavier paper — identical on
   every file, because which file matters is the reader's answer, not ours. */
.fld-file__tab {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 5px;
    background: var(--fld-manila);
    color: #3d2f18;
    font-weight: 800;
    font-size: .92rem;
}
.fld-file__body { min-width: 0; }
.fld-file__name {
    margin: 0 0 .15rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--fld-ink);
}
.fld-file__short {
    display: block;
    font-weight: 500;
    font-size: .88rem;
    color: var(--fld-ink-soft);
}
.fld-file__text {
    margin: .35rem 0 0;
    font-size: .93rem;
    line-height: 1.62;
    color: var(--fld-ink);
}

/* ── the ranking list ───────────────────────────────────────────────────── */
.fld-open--rank { padding-bottom: 1.1rem; }

.fld-rail {
    margin: 0 0 .55rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #4a3a1e;
}
.fld-rail--bottom { margin: .55rem 0 0; }

.fld-files--rank { gap: .5rem; }

.fld-file--rank {
    align-items: center;
    background: var(--fld-paper);
    cursor: grab;
}
.fld-file--rank:active { cursor: grabbing; }
/* The only movement in the sheet, and it follows the pointer rather than
   suggesting anything about the file underneath it. */
.fld-file--rank.dragging {
    opacity: .55;
    box-shadow: 0 6px 18px -8px rgba(27, 32, 38, .5);
}
.fld-file__rank {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--fld-accent);
    color: #fff;
    font-weight: 700;
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}
.fld-file__grip {
    margin-inline-start: auto;
    color: #9aa1aa;
    font-size: 1.15rem;
    line-height: 1;
}
/* rank-a11y.js drops its up/down buttons in here. They are part of the row,
   not a hover affordance: dragging is not available to every reader. */
.fld-file--rank .rank-a11y-btn {
    margin-inline-start: .3rem;
}

.fld-instructions {
    margin: 1.2rem 0 0;
    padding: 1rem 1.1rem;
    background: #f2f5f9;
    border-inline-start: 4px solid var(--fld-accent);
    border-radius: 0 7px 7px 0;
}
.fld-instructions p { margin: 0 0 .4rem; font-size: .94rem; line-height: 1.55; }
.fld-instructions p:last-child { margin-bottom: 0; }

/* ── actions ────────────────────────────────────────────────────────────── */
.fld-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    margin-top: 1.5rem;
}
.fld-btn {
    display: inline-block;
    padding: .75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: .98rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.fld-btn--primary {
    width: 100%;
    background: var(--fld-accent);
    color: #fff;
}
.fld-actions .fld-btn--primary { width: auto; }
.fld-btn--primary:hover { background: #17305c; }
.fld-btn--quiet {
    background: transparent;
    color: var(--fld-accent);
    border-color: var(--fld-edge);
}
.fld-btn--quiet:hover { background: #eef2f7; }
.fld-btn:focus-visible { outline: 2px solid var(--fld-accent); outline-offset: 2px; }


@media (max-width: 34rem) {
    .fld-open { padding-inline: .6rem; }
    .fld-open__sheet { padding: 1.1rem .9rem; }
    .fld-file { padding: .75rem .8rem; }
}

/* Round 2 keeps its own entry fields (the rounds are separated by the
   classroom presentations, so re-typing is a deliberate re-entry point), and
   they sit in the same card the step-one page uses. */
.fld-card--r2 { margin-bottom: 1.2rem; }
.fld-select {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .8rem;
    font: inherit;
    font-size: 1rem;
    color: var(--fld-ink);
    background: #fff;
    border: 1px solid var(--fld-edge);
    border-radius: 7px;
}
.fld-select:focus-visible {
    outline: 2px solid var(--fld-accent);
    outline-offset: 1px;
    border-color: var(--fld-accent);
}

/* ── the closed folder ───────────────────────────────────────────────────────
   The folder now arrives CLOSED on the briefing and ranking pages and opens
   from its cover (owner, 26 August 2026).

   It is a native <details>/<summary>. That is the only reason it is safe to
   put the exercise behind a click: the disclosure works with JavaScript off,
   under the CSP, from the keyboard, and browsers open it themselves for
   find-in-page. Everything below is appearance — if this whole stylesheet
   fails to load, the reader still gets a working disclosure triangle with the
   briefing under it.

   NOTE the difference from the landing page (welcome.css), which is
   deliberate rather than inconsistent: there the folder is open by default and
   cannot be re-closed, because an entrance that can be reopened on demand
   turns into a toy. Here opening IS the action the page is asking for. */

.fld-folder { --fld-tab-h: 1.55rem; margin-top: calc(1.6rem + var(--fld-tab-h)); }

/* The closed cover wears the same protruding tab as the open folder (the
   shared rule above), so the object is recognisably one thing in both
   states; its top-left corner is square under the tab for the same reason. */
.fld-folder__cover {
    display: flex;
    align-items: center;
    gap: .9rem;
    position: relative;
    padding: 1.5rem 1.3rem 1.5rem;
    background:
        linear-gradient(180deg, var(--fld-manila) 0 1.2rem,
                                var(--fld-manila-2) 1.2rem 100%);
    border-radius: 0 12px 12px 12px;
    box-shadow: inset 0 -2px 0 var(--fld-manila-3),
                0 10px 30px -20px rgba(27, 32, 38, .55);
    cursor: pointer;
    list-style: none;          /* Firefox */
}
.fld-folder__cover::-webkit-details-marker { display: none; }   /* Safari */

.fld-folder__cover:hover { filter: brightness(1.03); }
.fld-folder__cover:focus-visible {
    outline: 3px solid var(--fld-accent);
    outline-offset: 2px;
}

/* The company tab on the closed cover is drawn by the shared rule next to
   .fld-open__tab (the open folder's) — one shape, two states. */
.fld-folder__caption {
    flex: 1 1 auto;
    font-size: .95rem;
    font-weight: 600;
    color: #3d2f18;
}
.fld-folder__cta {
    flex: 0 0 auto;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    background: var(--fld-accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
}
/* A chevron, so the control still reads as a disclosure once the words are
   gone in the open state. <details> sets aria-expanded itself, so a screen
   reader is told which way it is regardless of this. */
.fld-folder__cover::after {
    content: "";
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-inline-start: .1rem;
    border-right: 2px solid #4a3a1e;
    border-bottom: 2px solid #4a3a1e;
    transform: rotate(45deg);
    transition: transform .18s ease;
}
@media (prefers-reduced-motion: reduce) {
    .fld-folder__cover::after { transition: none; }
}

/* Open: the cover shrinks to a slim tab strip and hands the sheet the room.
   The open folder's own stamp is hidden — the summary is carrying it now, and
   two "SYLCORP" marks one above the other read as a mistake. */
.fld-folder[open] .fld-folder__cover {
    padding: .55rem 1.3rem;
    border-radius: 0 12px 0 0;
    box-shadow: none;
    background: var(--fld-manila);
}
.fld-folder[open] .fld-folder__caption,
.fld-folder[open] .fld-folder__cta { display: none; }
.fld-folder[open] .fld-folder__cover::after { transform: rotate(-135deg); }
.fld-folder[open] .fld-open {
    margin-top: 0;
    padding-top: 1.1rem;
    border-radius: 0 0 12px 12px;
    background: var(--fld-manila-2);
}
.fld-folder[open] .fld-open__tab { display: none; }

/* The submit button lives INSIDE the folder on the ranking pages, so it
   cannot be pressed before the list has been seen. */
.fld-actions--inside {
    margin-top: 1.1rem;
    justify-content: center;
}

/* Step one: the folder open with the form on the sheet. Narrower than the
   briefing's, because a two-field form in a 58rem folder reads as a form
   someone forgot to finish. */
.fld-open--entry { margin-top: 0; }
.fld-open--entry .fld-open__sheet { padding: 1.7rem 1.6rem 1.5rem; }
.fld-open--entry .fld-title { margin-bottom: .4rem; }
.fld-open--entry .fld-lede { margin-bottom: 1.4rem; }

/* ── the join sheet ──────────────────────────────────────────────────────────
   The page with the QR code (templates/share_card.html, 3 September 2026). It
   is a PARTICIPANT page — README §3 — and until now it was the one that did
   not look like it: a grey card floating on nothing, while the page its QR
   code sends people to (step one, above) sits on the open folder.

   So the join sheet lies on the SAME folder. The card itself is the
   fleet-shared component in share-card.css, which is byte-identical in eight
   tools and must never be edited here; everything below only makes room for it
   on the manila. `.share-card` IS the sheet on this folder, so there is no
   `.fld-open__sheet` inside — a sheet on a sheet would be one paper too many.

   The card is 980 px wide by the fleet sheet, so this folder is wider than
   step one's; the overrides are two classes deep and therefore beat
   share-card.css whichever order the two files load in. */
.fld-page--share { max-width: 66rem; }
.fld-open--share {
    margin-top: 0;
    padding: 2.5rem 1.4rem 1.5rem;
}
.fld-open--share .share-page { padding: 0; }
.fld-open--share .share-card { max-width: none; }

/* On a phone the folder's own margins cost the card 75 px, and the shared
   card's header bar stops fitting its two buttons below about 300 px — the
   card's `overflow: hidden` then swallows "Download JPG" rather than wrapping
   it. The manila stays, because it is the continuity with step one, but it
   narrows to an edge. */
@media (max-width: 640px) {
    .fld-page--share { padding-inline: .4rem; }
    .fld-open--share { padding: 2.1rem .45rem .6rem; }
}

/* Printed and captured (Download JPG), the folder is 40 cm² of brown ink for
   nothing — the room is looking at the card. */
@media print {
    .fld-open--share {
        background: none;
        box-shadow: none;
        padding: 0;
    }
    .fld-open--share .fld-open__tab { display: none; }
}

/* ── the demographics sheet ──────────────────────────────────────────────────
   The optional questions after the ranking (27 August 2026, visual only — the
   fields, ids, order and every word come from i18n unchanged). The same open
   folder as step one: this is the last sheet of the paperwork, so it sits on
   the same desk instead of on the old floating white card. */
.fld-note--sheet { margin: 0 0 1.5rem; max-width: 60ch; }
.fld-note a { color: var(--fld-accent); }

/* ── the closing ─────────────────────────────────────────────────────────────
   The thank-you page (27 August 2026, visual only). The story ends where it
   began: the landing page's Sylcorp folder, now closed again — the decision is
   made and filed. Drawn flat rather than reusing welcome.css's 3D object: that
   file animates the way IN and is sized for a hero, while this is a quiet
   full-stop. Decorative and aria-hidden in the template, like the landing's.
   The old page here was a blue-gradient hero card — the one cheerful-corporate
   moment left in a flow that LO-003 keeps deliberately plain. */
.fld-done { text-align: center; }
.fld-done .fld-title { margin-bottom: .4rem; }
.fld-done .fld-lede { margin-inline: auto; }
.fld-done__icon { margin: 0 0 .5rem; font-size: 1.6rem; line-height: 1; }

.fld-done__stage { margin: 2rem auto; max-width: 21rem; }
.fld-done__folder {
    position: relative;
    height: 7.4rem;
    background: linear-gradient(165deg, var(--fld-manila), var(--fld-manila-2) 60%, var(--fld-manila-3));
    border-radius: 10px;
    box-shadow: inset 0 -2px 0 var(--fld-manila-3),
                0 14px 34px -20px rgba(27, 32, 38, .55);
}
/* The sheet, just visible above the closed cover: the work is in the folder,
   not gone. Behind the cover via z-index, so the cover's face stays clean. */
.fld-done__folder::before {
    content: "";
    position: absolute;
    inset-inline: 1.6rem;
    top: -.55rem;
    height: 1.2rem;
    background: var(--fld-paper);
    border: 1px solid var(--fld-edge);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    z-index: -1;
}
/* The folder's own tab, behind the sheet — the same anatomy as the landing
   page's object, one tab instead of eight because the folder is shut. */
.fld-done__folder::after {
    content: "";
    position: absolute;
    inset-inline-start: 1.1rem;
    top: -1.05rem;
    width: 5.5rem;
    height: 1.3rem;
    background: var(--fld-manila-2);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18);
    z-index: -2;
}
/* The same stamp the folder wears everywhere else — company name and the
   eight identifiers, so the object needs no translation in any locale. */
.fld-done__stamp {
    position: absolute;
    inset-inline-start: 1.4rem;
    top: 1.3rem;
    text-align: start;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fld-done__stamp b {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #503f24;
}
.fld-done__stamp span {
    display: block;
    margin-top: .5rem;
    font-size: .66rem;
    letter-spacing: .42em;
    color: #6d5b38;
}

.fld-done__card { text-align: center; margin-top: .4rem; }
.fld-done__card h2 {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fld-ink);
}
.fld-done__card p {
    margin: 0;
    font-size: .96rem;
    line-height: 1.62;
    color: var(--fld-ink-soft);
}
.fld-done .fld-actions { justify-content: center; }

/* ── the educator's sign-in (27 August 2026) ─────────────────────────────────
   The same open folder as step one, quieter: no step counter, no files, no
   animation. Only the few rules the participant sheet did not already need.

   It replaced a page that asked for `.bo-body--login`, a class no stylesheet
   here defines — so the card sat unstyled in the top-left corner. Nothing
   below invents a second look; it borrows the one the exercise already has. */
.fld-page--signin {
    max-width: 30rem;
    padding-top: 3.4rem;
}
.fld-signin-brand {
    display: block;
    margin: 0 auto 1.6rem;
    width: fit-content;
}
.fld-signin-brand img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
}
/* The links under the form are quiet, not decoration: an educator who cannot
   sign in needs the reset, and a participant who followed a stale link needs
   the way back to their own exercise. */
.fld-note--signin {
    margin-top: .9rem;
    text-align: center;
}
.fld-note--signin a {
    color: var(--fld-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fld-note--signin a:hover { color: #17305c; }

/* The success twin of .fld-alert — used for "your password was reset". */
.fld-alert--ok {
    border-color: #b7ddc2;
    background: #f0f8f3;
    color: #1d5233;
}

/* The deletion link is printed in full on the closing page (3 September 2026):
   it is shown once and cannot be re-sent, so a participant must be able to
   copy it — and a 60-character token must wrap rather than push the card
   sideways on a phone. */
.fld-link-break {
    word-break: break-all;
    overflow-wrap: anywhere;
}