/* ==========================================================================
   Home, the Room and a session's page (design/artboards/Main.dc.html,
   MobileHome.dc.html, Sessions.dc.html; owner decisions 2026-10-20: Home is
   what comes next, the Room the archive). Layout only, on the app.css
   vocabulary and tokens: no new colors, shadows, radii or motion values.
   ========================================================================== */

/* Disclosures styled as quiet links, buttons or fold rows: no marker. */
.home-confirm > summary,
.home-prep-more > summary,
.room-versions > summary,
.session-transcript-fold > summary,
.hw-fold > summary {
  list-style: none;
}

.home-confirm > summary::-webkit-details-marker,
.home-prep-more > summary::-webkit-details-marker,
.room-versions > summary::-webkit-details-marker,
.session-transcript-fold > summary::-webkit-details-marker,
.hw-fold > summary::-webkit-details-marker {
  display: none;
}

/* A POST form that sits inline, like 'Not now' beside 'Add sessions'. */
.home-inline-form {
  display: flex;
  align-items: center;
}

/* The film on Home (owner decisions 2026-10-30; the design: claude.ai/artifact/XXdCzFEjb3Wk9NjyoR23Bw, option A). A
   client's tile sits in the header on the right column's width, four columns of twelve. It rises beside the date, so the
   header keeps its height and nothing under it moves. */
.home > .page-head > .page-head-row {
  flex-wrap: nowrap;
}

.home > .page-head .page-head-title {
  flex: 1;
  min-width: 0;
}

.home > .page-head .page-head-actions {
  flex: none;
  width: calc(100% / 3 - 16px);
  margin-top: -42px;
}

.film-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.film-frame {
  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  background: var(--ink-100);
  transition: transform var(--t-press) var(--ease-out);
}

.film-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-tile > .film-frame {
  width: 144px;
  height: 81px;
}

/* The play mark of the email's poster: a navy disc and a gold triangle, under the thumbnail's words. */
.film-disc {
  position: absolute;
  top: 55.6%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--gold-500);
  transition: background-color var(--t-hover) var(--ease-standard);
}

.film-disc > .icon {
  fill: currentColor;
}

.film-chip {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: var(--radius-control);
  background: var(--ink-900);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
}

.film-words {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.film-title {
  color: var(--ink-900);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.film-opener:hover .film-disc {
  background: var(--navy-700);
}

.film-opener:hover .film-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.film-opener:active .film-frame {
  transform: scale(0.98);
}

/* A prospect's band under the hero and Skills. */
.home-film {
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.film-poster {
  display: block;
  flex: none;
  width: 416px;
}

.film-poster > .film-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.film-poster .film-disc {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}

.film-poster .film-disc > .icon {
  width: 28px;
  height: 28px;
}

.home-film-words {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
  min-width: 0;
}

/* The player: 16:9 in a dark card over the scrim; a window too low for it shrinks the picture, not the head or the foot. */
dialog.film-player {
  width: min(960px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--ink-900);
  color: var(--white);
}

dialog.film-player[open] {
  display: flex;
  flex-direction: column;
}

dialog.film-player::backdrop {
  background: var(--scrim);
}

.film-player-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 6px 6px 6px 24px;
}

.film-player-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 16px;
  min-width: 0;
}

.film-player-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.film-video {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: var(--ink-900);
}

.film-player-foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 24px;
}

/* A phone's player (home.js sets the format at the click): the Reel on the whole screen, the X over its clear top. */
dialog.film-player[data-format="reel"] {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  justify-content: center;
  border-radius: 0;
}

.film-player[data-format="reel"] .film-player-head {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  min-height: 0;
  padding: 6px;
}

.film-player[data-format="reel"] .film-player-words {
  display: none;
}

.film-player[data-format="reel"] .film-close {
  background: var(--ink-900);
  color: var(--white);
}

.film-player[data-format="reel"] .film-video {
  aspect-ratio: 9 / 16;
}

@media (max-width: 1023px) {
  .home > .page-head .page-head-actions {
    width: auto;
  }

  .film-words {
    display: none;
  }

  .home-film {
    flex-direction: column;
    align-items: stretch;
  }

  .film-poster {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .home > .page-head .page-head-actions {
    margin-top: -22px;
  }

  .film-tile > .film-frame {
    width: 96px;
    height: 54px;
  }

  .film-tile .film-disc {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
  }

  .film-tile .film-disc > .icon {
    width: 12px;
    height: 12px;
  }
}

/* 1. Home (owner decision 2026-10-27, the approved home-proposed mockup): the hero leads with progress, then This week,
   the prep while a session is booked, Skills and Around Quant Solvings. */

.home,
.room {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* A client's cards come in the phones' order (hero, prep, This week, Skills, Around: repair of 2026-10-27, so focus
   never jumps back up the page). Desktop sets them in two columns, each card at its own height, so a long This week
   never stretches the hero into an empty band: the hero over Skills on the left, This week over Around on the right.
   This week takes the hero's row and the next, Skills the next and the last, Around the last, which is flexible: the
   grid sizes the hero's row to the hero, gives the next row only what This week needs beyond it, and the last row the
   rest, so both columns end together. The rows' 24px gaps are the cards' bottom margins, so a row This week does not
   need stays empty (the approved mockup's two even rows when the hero and This week are of a height). With the prep (a
   session booked) the prep takes Skills' place, Around keeps its own height beside its long fold, and Skills takes the
   row under them, its map on the left and its key on the right. */
@media (min-width: 1024px) {
  /* The hero's row at its content height (max-content, 2026-10-27): with 'auto' the grid gave This week's second row a
     few pixels it did not need, so a card as tall as the hero ended 6px below it. */
  .home-grid {
    grid-template-rows: max-content auto 1fr auto;
    row-gap: 0;
  }

  .home-grid > .home-hero {
    grid-column: 1 / span 8;
    grid-row: 1;
    margin-bottom: 24px;
  }

  .home-grid > .home-week {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    margin-bottom: 24px;
  }

  .home-grid > .home-prep,
  .home-grid > .home-skills {
    grid-column: 1 / span 8;
    grid-row: 2 / span 2;
  }

  .home-grid > .home-prep {
    margin-bottom: 24px;
  }

  .home-grid > .home-around {
    grid-column: 9 / span 4;
    grid-row: 3;
  }

  /* Around ends with Skills, so its rows share the card's height, each title in the middle of its row, rather than
     leave an empty foot under the last one (owner request 2026-10-27). Beside the prep it keeps its own height. */
  .home-grid > .home-around > .home-rows {
    flex: 1;
  }

  .home-grid > .home-around > .home-rows > li {
    display: flex;
    flex: 1;
  }

  .home-grid > .home-around > .home-rows > li > .home-row {
    flex: 1;
  }

  /* Skills ends with Around when Around is the taller card (four rows, Spanish at 1024 to 1100): its tracks share the
     extra height between their rows, rather than leave an empty band over See skills (owner request 2026-10-27). Beside
     the prep it is a row of its own and never stretched. */
  .home-grid:not(:has(> .home-prep)) > .home-skills-map > .home-tracks {
    flex: 1;
    align-content: space-evenly;
  }

  /* A prospect's small Skills beside the hero is stretched to the hero's height: its map sits, with the levels under
     it, in the middle of the space between the count and See skills, its auto top margin sharing that space with the
     foot's; without levels it also grows to the card's width (with them it would run the card past the hero and stretch
     the hero instead). Owner request 2026-10-27. */
  .home-wide > .skillmap {
    margin-top: auto;
  }

  .home-wide:not(:has(> .home-levels)) > .skillmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-wide:not(:has(> .home-levels)) > .skillmap .skillmap-track {
    gap: 4px;
  }

  .home-wide:not(:has(> .home-levels)) > .skillmap .step-sm {
    flex: 1;
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }

  /* A prospect's Around across the row under the hero and Skills, its rows side by side (owner request 2026-10-27). */
  .home-around-strip > .home-rows {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: 32px;
  }

  .home-around-strip > .home-rows > li + li {
    border-top: 0;
  }

  /* Each link fills its column, so every chevron sits at the same height and the whole column opens it; the small top
     lines stay level at the top of each column. */
  .home-around-strip > .home-rows > li {
    display: flex;
  }

  .home-around-strip > .home-rows > li > .home-row {
    flex: 1;
  }

  .home-around-strip > .home-rows > li > .home-row > .fold-main {
    align-self: flex-start;
  }

  .home-grid:has(> .home-prep) > .home-around {
    align-self: start;
    margin-bottom: 24px;
  }

  .home-grid:has(> .home-prep) > .home-skills-map {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-column: 1 / -1;
    grid-row: 4;
    align-content: start;
    column-gap: 48px;
  }

  .home-grid:has(> .home-prep) > .home-skills-map > .home-skills-head {
    grid-column: 1 / -1;
  }

  .home-grid:has(> .home-prep) > .home-skills-map > .home-tracks {
    grid-row: 2 / span 3;
  }

  .home-grid:has(> .home-prep) > .home-skills-map > :not(.home-skills-head, .home-tracks) {
    grid-column: 2;
  }
}

/* On desktop a prospect's map draws a step not started as the client's map does, an outline, never a grey block that
   reads as loading (2026-10-27). Not in forced colors, where an outline on every step would draw them all alike: there
   the started steps keep their outline and the rest stay blank, as before. */
@media (min-width: 1024px) and (forced-colors: none) {
  .home-wide > .skillmap .step-sm.step-none::before {
    border: 1px solid var(--ink-300);
    background: var(--white);
  }
}

/* From 1024 to 1279 px the hero's right side narrows, so its left keeps room for the track and its two lines. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) 1px 232px;
    column-gap: 32px;
    padding: 32px;
  }
}

/* The hero's left: the program in gold, the count, the track and the 'Done' and 'Next' lines, 32 apart as drawn. */
.home-hero > .hero-start {
  gap: 32px;
}

.home-hero-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The program in gold, over the dark ground's ink-300 micro. */
.home-hero .home-hero-program {
  color: var(--gold-400);
}

.home-hero-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.home-hero-of {
  color: var(--ink-300);
  font-size: 16px;
  line-height: 24px;
}

.home-hero-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* One segment per session, leaning like the pips: held and used white, booked a white outline, the next one to book a
   gold outline, the later ones faint; the day codes under them. */
.home-hero-track {
  display: flex;
  gap: 6px;
}

/* At most an 8-up block's segment wide: a program of one or two sessions draws short segments, never one bar across. */
.home-seg {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 48px;
}

.home-seg-bar {
  display: block;
  height: 8px;
  background: var(--white-16);
  transform: var(--slant);
}

.home-seg-held .home-seg-bar,
.home-seg-used .home-seg-bar {
  background: var(--white);
}

.home-seg-booked .home-seg-bar {
  border: 1.5px solid var(--white);
  background: transparent;
}

.home-seg-next .home-seg-bar {
  border: 1.5px solid var(--gold-400);
  background: transparent;
}

.home-seg-later .home-seg-bar {
  background: var(--white-16);
}

.home-seg-day {
  overflow: hidden;
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.home-seg-held .home-seg-day {
  color: var(--white);
}

.home-seg-booked .home-seg-day {
  color: var(--ink-300);
}

.home-seg-next .home-seg-day {
  color: var(--gold-400);
}

/* Forced colors drop backgrounds: the segments keep their states as fills and borders, the next one dashed, the later
   ones grey, so the track never reads backwards (as the level mark, app.css). */
@media (forced-colors: active) {
  .home-seg-bar,
  .home-seg-booked .home-seg-bar,
  .home-seg-next .home-seg-bar,
  .home-seg-later .home-seg-bar {
    forced-color-adjust: none;
    border: 1.5px solid CanvasText;
    background: Canvas;
  }

  .home-seg-held .home-seg-bar,
  .home-seg-used .home-seg-bar {
    background: CanvasText;
  }

  .home-seg-next .home-seg-bar {
    border-style: dashed;
  }

  .home-seg-later .home-seg-bar {
    border-color: GrayText;
  }
}

/* 'Done' and 'Next': the mark and the micro word in one column, the day's title beside them. */
.home-hero-path {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
}

.home-hero-path-line {
  display: contents;
}

.home-hero-path-line > dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-300);
}

.home-hero-path-line > dd {
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.home-hero-path-next > dt,
.home-hero-path-next > dt > .micro {
  color: var(--gold-400);
}

/* The hero's right: the next session (or the next one to book) at the top, the one gold action at the foot. */
.home-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-next-title {
  margin-top: 6px;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.home-offer {
  color: var(--ink-300);
  font-size: 13px;
  line-height: 20px;
  text-wrap: pretty;
}

/* '20 % de descuento' keeps its figure and its sign together. */
.home-offer-discount {
  color: var(--gold-400);
  font-weight: 600;
  white-space: nowrap;
}

.home-hero-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.home-hero-lines {
  display: flex;
  flex-direction: column;
}

.home-hero-title {
  font-size: 15px;
  line-height: 24px;
}

/* The intro call's Join and Move, in a prospect's hero. */
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: var(--target);
}

.home-count-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* A client's: the counts or 'Same time next week' over the gold button, the completion's line or the refill under it. */
.home-hero-act {
  gap: 12px;
}

/* The gold label wraps inside its button rather than running past a narrow hero ('Pasar a Intermediate'). */
.home-hero-act > .btn-gold {
  height: auto;
  min-height: var(--control-h);
  padding-block: 12px;
  white-space: normal;
  text-align: center;
}

.home-refill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

/* The prep under the hero: Join, Move and Cancel in view, the rest in a fold. */
.home-prep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: var(--target);
}

.home-prep-join {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-prep-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--target);
  border-top: 1px solid var(--ink-200);
  padding-top: 16px;
  cursor: pointer;
}

.home-prep-topic {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-prep-more[open] > .home-prep-summary .fold-chevron {
  transform: rotate(180deg);
}

/* Open, the field under it says the topic: the summary keeps its label, so 'Add a topic' shows only where a click opens it. */
.home-prep-more[open] > .home-prep-summary .home-prep-topic {
  display: none;
}

.home-prep-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}

/* Carlos's lines keep the line breaks he wrote. */
.home-prep-last,
.room-notes dd {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.home-skills-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.home-levels {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
}

.home-levels > li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Skills (2026-10-27): the 9 tracks in the map's 3 x 3, each its name over its 4 steps at 20px; the legend's steps at
   12px; the steps the next session adds a dashed navy outline. */
.home-tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}

/* The steps sit at the foot of their row, so a name that wraps (phones, Spanish) never lifts its steps above the rest. */
.home-track {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.home-track-name {
  color: var(--ink-700);
  font-size: 13px;
  line-height: 20px;
}

.home-track-steps {
  display: flex;
  gap: 6px;
}

.step-next::before {
  border: 1.5px dashed var(--navy-900);
  background: var(--white);
}

.home-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 20px;
}

.home-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-legend .step {
  width: 12px;
  height: 12px;
}

/* This week (2026-10-27): the micro label left and the due chip right, the step's one outline action, its rows, and
   the week at the foot over a hairline (pushed down when the card is stretched beside the hero). */
.home-week-head {
  justify-content: space-between;
}

.home-week-action {
  gap: 8px 24px;
}

.home-week-ring {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
}

.home-week-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-week-row .week-ring {
  width: 56px;
  height: 56px;
}

.home-week-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Its target reaches 12px above and below its 20px lines (44px for one), without moving the lines around it. */
.home-week-link {
  align-self: flex-start;
  padding-block: 12px;
  margin-block: -12px;
}

/* The rows under This week (due work, the course, the work with Carlos, the newest notes) and Around's. */
.home-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-200);
}

.home-rows > li + li {
  border-top: 1px solid var(--ink-200);
}

.home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  color: var(--ink-700);
  text-decoration: none;
}

.home-row:hover {
  color: var(--ink-900);
}

.home-row-title {
  overflow: hidden;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Around Quant Solvings (2026-10-27): its titles wrap, an outside page's with the external mark after it, and no word
   is left alone on a last line (text-wrap works on the block, .home-row-name, never on the inline title: 2026-10-27). */
.home-links .home-row-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

.home-row-name {
  display: block;
  min-width: 0;
}

.home-links .home-row-name {
  text-wrap: pretty;
}

/* The external mark keeps to the title's last word, wherever it wraps (repair of 2026-10-27: it fell to a line alone). */
.home-row-tail {
  white-space: nowrap;
}

.home-row-tail > .icon {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-500);
  vertical-align: -2px;
}

/* A micro line's parts ('Factors ·', 'updated every weekday'): it breaks between them, a long one inside itself. */
.home-part {
  display: inline-block;
}

/* 2. The Room: the sessions on the left (7 columns), the course exercises on the right (5). In the source
   the sessions come first, which is how phones read them. */

.room-section,
.room-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.room-side {
  gap: 48px;
}

/* The program timeline (owner decision 2026-10-27, the approved Room mockup): the current program's progress beside
   'Sessions' (its pips, then 'Beginner · 1 of 8'), every other program's at the head of its card; then the card's rows
   split by hairlines, each a mark that leans like the pips, its text and at most one quiet link on the right (under the
   text on phones). A session held here in full keeps its card's 16px rhythm; a folded, booked or later row is one line
   of each, 12px apart. */
.room-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 8px 12px;
  min-width: 0;
}

/* A Full Program's 24 sessions: narrower pips, so its bar keeps one row beside 'Sessions' on desktop. */
.room-progress-long .pip {
  width: 12px;
}

.room-program-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-200);
}

.room-timeline {
  display: flex;
  flex-direction: column;
}

.room-tl {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--ink-200);
}

.room-tl-compact {
  padding: 12px 0;
}

.room-tl:first-child {
  padding-top: 0;
  border-top: 0;
}

.room-tl:last-child {
  padding-bottom: 0;
}

/* Done navy, booked and next a navy outline, later an outline, a session that did not take place grey. */
.room-tl-mark {
  display: block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink-300);
  background: var(--white);
  transform: var(--slant);
}

.room-tl-done .room-tl-mark {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

.room-tl-booked .room-tl-mark,
.room-tl-next .room-tl-mark {
  border-color: var(--navy-900);
}

.room-tl-missed .room-tl-mark {
  background: var(--ink-200);
}

/* A session in full: the mark sits on its chip's row. */
.room-tl-full .room-tl-mark {
  margin-top: 4px;
}

.room-tl-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.room-tl-full .room-tl-body {
  gap: 16px;
}

.room-tl-body > .card-head {
  min-height: 16px;
}

.room-tl-full .room-tl-body > .card-head {
  min-height: 24px;
}

/* Its place and its title read as one, as every other row's. */
.room-tl-full .room-tl-body > .card-head + .room-tl-title {
  margin-top: -12px;
}

.room-tl-title {
  color: var(--ink-900);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.room-tl-name {
  color: var(--ink-700);
  font-size: 17px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.room-tl-later .room-tl-name {
  color: var(--ink-500);
}

.room-tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.room-tl-chips + .room-notes,
.room-tl-title + .room-notes {
  padding-top: 12px;
}

/* The row's one link: its 44px target centred on the first two lines. */
.room-tl-side {
  margin-top: -6px;
}

.room-topic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.room-topic > .field {
  width: 100%;
}

/* A session's homework inside its card: a panel, never a card in a card. */
.room-hw {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
}

/* The work due soonest: the full navy line, as an emphasis card. */
.room-hw-emphasis {
  border-color: var(--navy-900);
}

/* The Room's card keeps four lines of each; the session's page shows them whole. */
.room-notes-short dd {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* An open consequence takes its own line under the links. */
.home-confirm[open] {
  flex-basis: 100%;
  order: 1;
}

.home-confirm-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 8px;
}

.room-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--navy-800);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.room-verdict .text-small {
  font-weight: 400;
}

.room-instructions {
  white-space: pre-line;
}

/* A homework's head (2026-10-27): its chip, and on the right the due date or the day it was sent, read or reviewed. */
.hw-head {
  justify-content: space-between;
}

/* 'Hand in' (2026-10-27): the summary is the button and 'Ask Carlos' sits beside it; open, the form takes the row and
   the summary turns to an outline, so Submit holds the one fill; the ways to hand in sit under it while it is closed. */
.hw-hand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hw-hand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.hw-fold[open] {
  flex-basis: 100%;
}

.hw-fold > .hw-form {
  padding-top: 16px;
}

.hw-fold[open] > .btn-primary {
  background: var(--white);
  color: var(--navy-800);
  font-weight: 500;
}

.hw-fold[open] > .btn-primary:hover {
  border-color: var(--navy-800);
  background: var(--ink-100);
  color: var(--navy-800);
}

.hw-hand:has(.hw-fold[open]) > .hw-hint {
  display: none;
}

/* A reading (2026-10-20): the micro 'Reading' over the post's title, a link while the client may open it. */
.room-reading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.room-step {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 20px;
}

/* Submit as: the segmented radios show one panel. Without :has() every panel stays visible and the
   chosen kind still decides what is sent. */
.hw-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hw-form:has(.segmented-input[value="text"]:checked) .hw-panel:not(.hw-panel-text),
.hw-form:has(.segmented-input[value="file"]:checked) .hw-panel:not(.hw-panel-file),
.hw-form:has(.segmented-input[value="link"]:checked) .hw-panel:not(.hw-panel-link) {
  display: none;
}

.room-version-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.room-version {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.room-version-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.room-version-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  overflow-wrap: anywhere;
}

/* A session's files (2026-10-20): the images as previews in a hairline frame that hugs them, then ruled rows (the
   name, then the type and size in mono). Small on the Room's card under a micro head, the column's width on the
   session's page. */
.room-card-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.room-files {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.room-figures {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.room-files-compact .room-figures {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.room-figure {
  display: block;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--white);
}

.room-figure:hover {
  border-color: var(--ink-300);
}

.room-figure-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.room-files-compact .room-figure-img {
  max-height: 96px;
  width: auto;
}

.room-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  min-width: 0;
}

.room-files .room-file {
  padding: 2px 0;
}

.room-file-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--target);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.room-file-facts {
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

/* 3. A session's page: the notes, steps and homework (8 columns), the client's own topic and link (4). */

.session-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-steps > .room-step {
  color: var(--ink-700);
}

.session-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* The transcript Carlos pasted (2026-10-20): the day it was added, the text folded under a quiet summary, then
   'Delete transcript' with its consequence stated before the button. */
.session-transcript {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.session-transcript-fold {
  width: 100%;
}

.session-transcript-fold[open] > .transcript-text {
  padding-top: 8px;
}

/* 'Search your sessions' (2026-10-20): the box and its button on one line; the results as a column of cards, each its
   meta, its title link, where it matched and the excerpt with the matched words in ink-900 weight 600 (no fill). */
.room-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.room-search .search {
  width: 360px;
}

.room-hits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.room-hit-title {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.room-hit-line {
  margin: 0;
  max-width: 640px;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.room-hit-mark {
  background: none;
  color: var(--ink-900);
  font-weight: 600;
}

/* 4. One column under 1024 px (2026-10-27): the hero, the prep, This week, Skills, Around, their source order since the
   repair of 2026-10-27. Phones (MobileHome.dc.html): the prep folded, a prospect's Skills left to its page, the Skills
   count on its own line under the heading. */

@media (max-width: 767px) {
  .home,
  .room {
    gap: 24px;
  }

  .home-wide {
    display: none;
  }

  .home-hero-top {
    gap: 8px;
  }

  .home-skills-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .home-tracks {
    gap: 16px 12px;
  }

  .home-track-steps {
    gap: 4px;
  }

  .home-track-steps .step {
    width: 16px;
    height: 16px;
  }

  .room-grid {
    row-gap: 32px;
  }

  .room-side {
    gap: 32px;
  }

  .room-hw {
    padding: 12px;
  }

  /* The timeline stacks: the row's link drops under its text. */
  .room-tl {
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 12px;
  }

  .room-tl-side {
    grid-column: 2;
    justify-self: start;
    margin-top: 0;
  }

  .room-search .search {
    flex: 1 1 auto;
    width: auto;
  }
}

/* Under 360 px three tracks to a row would leave a track less than its 4 steps: two to a row. */
@media (max-width: 359px) {
  .home-tracks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}