/* room.css: March's room in J's design kit, Moon Gate, at the FULL dose (kit/tokens.css,
   kit/kit.css and kit/assets/, copied whole from design-kit/kit; the rules are
   design-kit/KIT.md, whose "doses" table names this room as the full-dose place).
   This file only places the kit's parts for this page: it writes no colour of its own
   (every colour is a kit variable) and uses only the kit's sizes. The picture inside
   the canvas is a guest and keeps its own pixels. Daylight only; never red; never
   overflow hidden on html or body (the page must scroll in any panel). */

/* ---------- the gate: her name in the ensō door, her own words under it ---------- */
/* her paragraph is longer than the kit's one-line lead, so the gate grows to hold it */
.gate { height: 1110px; }
.topnav .seal { margin-right: auto; }
.topnav ul a { display: inline-flex; align-items: center; gap: 6px; }
.topnav ul a:hover { color: var(--ink); }
.door-through h1 { margin-top: 0; }
/* the spark carries whether she is awake: the one alive thing up here */
.door .spark { right: 34px; bottom: 70px; }
.gate-say { width: 700px; margin-left: -350px; top: 708px; }
.intro .lead { font-size: var(--t-body); line-height: 1.75; }
.intro .meta { margin-top: 18px; color: var(--ink); }
.intro #season { font-weight: 600; max-width: 600px; margin-inline: auto; }
.intro .hint { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--leaf); }

/* ---------- small words ---------- */
.meta { font-size: var(--t-small); color: var(--ink-2); line-height: 1.55; }
.label { margin-bottom: 0; }
a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--leaf); }
.topnav a, .btn, a.btn { text-decoration: none; }
.empty, .bad { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }

/* ---------- the picture: a guest in the kit's panel, a real leaf over its corner ---------- */
.stage { margin-top: 10px; }
.stage .panel-bar { padding: 18px 30px; }
/* the caption sits beside the name, clear of the leaf over the corner */
.stage .panel-bar #caption { margin-left: 6px; }
.stage-body { padding: 26px 30px 26px; }
.stage canvas {
  display: block; cursor: pointer; width: 100%; aspect-ratio: 2 / 1; margin: 0 auto;  /* room.js snaps the width to whole pixels */
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: var(--wall); border-radius: var(--r-shot); box-shadow: var(--sh-shot);
}
.stage .leaf-over { right: -96px; top: -118px; }
.under { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); margin-top: 22px; flex-wrap: wrap; }
/* the replay strip: one dot per stop, the stop now in spring */
#strip { display: flex; align-items: center; gap: 12px; min-height: 18px; flex-wrap: wrap; }
#dots { display: flex; gap: 5px; flex-wrap: wrap; }
#dots i { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
#dots i.past { background: var(--leaf); box-shadow: none; }
#dots i.now { background: var(--spring); box-shadow: 0 0 0 3px var(--spring-wash); }
#lastrun { margin-top: 14px; }

/* ---------- the last session in numbers: columns on the wall, split by hairlines ---------- */
#nums { margin-top: 70px; }
#nums .label { color: var(--leaf); }
#nums .stat { font-size: var(--t-title); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 4px; }
#nums .stat small { font-size: var(--t-lead); font-weight: 700; color: var(--ink-2); letter-spacing: 0; margin-left: .22em; }
#nums .stat b { font-weight: inherit; margin-left: .5em; }

/* ---------- Today: the one huge word ---------- */
.today { margin-top: 120px; position: relative; }
.today-row { display: flex; align-items: flex-end; gap: 60px; margin-top: 10px; }
.today-row p { max-width: 420px; margin-left: auto; padding-bottom: 14px; color: var(--ink-2); font-size: var(--t-note); }

/* ---------- the folds: each list is a row on the wall whose header line opens it ---------- */
.folds { margin-top: 46px; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); scroll-margin-top: 20px; transition: background .6s ease; border-radius: 4px; }
.fold > .strap { display: flex; align-items: center; gap: 18px; padding: 20px 4px; cursor: pointer; user-select: none; font: inherit; }
.fold > .strap .name { font-size: var(--t-lead); font-weight: 800; letter-spacing: -.015em; }
.fold > .strap .meta { margin-left: auto; text-align: right; font-weight: 600; }
.fold > .strap .mark { width: var(--i-lg); height: var(--i-lg); color: var(--ink-2); transition: transform .4s ease; }
.fold.open > .strap .mark { transform: rotate(180deg); }
.fold > .strap:hover .disc { background: var(--spring-wash); color: var(--leaf); box-shadow: none; }
.fold > .body { display: none; padding: 4px 4px 44px 74px; }
.fold.open > .body { display: block; }
/* a click on the picture lights the fold it opens, for a moment */
.fold.lit { background: var(--spring-wash); }
.body > p.meta { margin-bottom: 22px; max-width: 760px; }

/* ---------- the cards: the kit's soft box ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px 24px 22px; }
.card.faced { grid-column: 1 / -1; }
.card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.card .tag { height: 28px; font-size: var(--t-label); font-weight: 700; }
.card .title { font-size: var(--t-lead); line-height: 1.35; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.card .title, .card .note, #desk li { overflow-wrap: anywhere; }
.card .title a { color: inherit; }
.card .note { font-size: var(--t-small); color: var(--ink-2); line-height: 1.55; }
/* a picture she saw is seen through a round window in the card, as the kit's card has it */
.card > img { display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: 50% 0; box-shadow: 0 0 0 1px var(--line); background: var(--wall); }
/* a build running in place, or what it prints: real work, so a soft-cornered screen, never round */
.card iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: var(--r-shot); box-shadow: var(--sh-shot); background: var(--paper); }
.card pre.well { border-radius: var(--r-shot); background: var(--wall); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; font-size: var(--t-small); white-space: pre-wrap; max-height: 300px; overflow: auto; }
.card .acts { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; margin-top: 4px; }
.titlecard {
  display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; padding: 18px; text-align: center;
  background: var(--spring-wash); color: var(--leaf); font-size: var(--t-label); line-height: 1.4;
}
/* a page opened in place */
.inpage, #page { border-top: 1px solid var(--line); padding-top: 16px; overflow-wrap: anywhere; }
#page { margin-top: 18px; max-width: 760px; }
.inpage h2, #page h2 { font-size: var(--t-lead); line-height: 1.3; font-weight: 800; color: var(--ink); margin: 20px 0 8px; }
.inpage h3, #page h3 { font-size: var(--t-body); font-weight: 700; color: var(--ink); margin: 16px 0 6px; }
.inpage p, #page p { margin-top: 10px; font-size: var(--t-small); color: var(--ink-2); }
#page p { font-size: var(--t-body); }
.inpage ul, #page ul { margin: 10px 0 0 20px; font-size: var(--t-small); }

/* plain lists on the wall */
#shelf ul, #desk ul { list-style: none; max-width: 760px; }
#shelf li, #desk li { padding: 12px 0; border-bottom: 1px solid var(--line); }
#shelf li:last-child, #desk li:last-child { border-bottom: 0; }
#desk .cards { margin-bottom: 26px; }
#desk > .label { margin: 8px 0 4px; }

/* the cloud and the notebook: lines with a hairline between */
.lines { list-style: none; max-width: 820px; }
.lines li { padding: 16px 0; border-top: 1px solid var(--line); }
.lines li:first-child { border-top: 0; padding-top: 4px; }
.lines li .meta { display: block; margin-top: 4px; }
.lines li .label { display: block; margin-bottom: 6px; }
#notebook > p { padding-top: 14px; }

/* the two tables: Quill's ledger and the log, ruled on the wall */
.tablewrap { overflow-x: auto; }
table.rows { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
table.rows th { text-align: left; font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); padding: 0 14px 10px 0; border-bottom: 1.5px solid var(--ink); }
table.rows td { vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
table.rows td:first-child { color: var(--ink); font-weight: 600; }
#quill td:nth-child(5) { width: 50%; }
#quill td:nth-child(3) { min-width: 150px; }
#quill > p { padding-bottom: 16px; }
.verdict-no { color: var(--ink) !important; font-weight: 800; }
/* short columns never break; the long ones take the room */
#log td:nth-child(1), #log td:nth-child(2), #log td:nth-child(4), #log td:nth-child(5),
#quill td:nth-child(1), #quill td:nth-child(2), #quill td:nth-child(4), #quill td:nth-child(6) { white-space: nowrap; }

/* the wall: each day a title on a hairline */
.day-head { margin: 44px 0 22px; padding-top: 18px; border-top: 1.5px solid var(--ink); display: flex; align-items: baseline; gap: 18px; }
.day-head:first-child { margin-top: 6px; }
.day-head .label { order: 2; margin-left: auto; }
.day-head .display { font-size: var(--t-title); line-height: 1.1; letter-spacing: -.03em; }
.day-head .rule { display: none; }

/* ---------- the foot: the wide gold seal signs the page ---------- */
.foot { margin-top: 120px; }
.foot .credits { margin-left: 0; }
.foot .btn { margin-left: auto; }

/* ---------- narrower screens: the gold title steps aside before it would leave the page ---------- */
@media (max-width: 1240px) {
  .gate-title, .vtext { display: none; }
}

/* ---------- a phone (J reads this on an Android phone): the gate gets its own smaller layout ---------- */
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .gate { height: auto; padding-bottom: 36px; }
  .topnav .wrap { height: 72px; }
  /* the door, shrunk to fit: the kit draws it 560 wide from the centre line */
  .door { transform: scale(.6); transform-origin: 50% 0; top: 120px; }
  .door-through h1 { font-size: 92px; }
  .gate-band { left: calc(50% - 53px); width: 118px; }
  .gate-shadow { left: -880px; top: -120px; }
  .gate-say { position: relative; left: auto; margin: 0 auto; width: auto; top: auto; padding: 476px 22px 0; }
  .intro .lead { text-align: left; }
  .stage .panel-bar { padding: 14px 18px; }
  .stage-body { padding: 16px 14px 18px; }
  .stage { margin-top: 40px; }
  .stage .leaf-over { right: -128px; top: -112px; transform: scale(.62); }
  #nums { margin-top: 48px; grid-auto-flow: row; grid-template-columns: 1fr 1fr; row-gap: 26px; }
  #nums > * { padding: 0 16px; border-left: 0; }
  #nums > :nth-child(2n) { border-left: 1px solid var(--line); }
  #nums > :nth-child(2n+1) { padding-left: 0; }
  #nums .stat { font-size: 34px; }
  #dots { gap: 4px; }
  #dots i { width: 7px; height: 7px; }
  .today { margin-top: 80px; }
  .today .display { font-size: 76px; }
  .today-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .today-row p { margin-left: 0; padding-bottom: 0; }
  .fold > .strap { gap: 12px; padding: 16px 0; }
  .fold > .strap .disc.plain { width: 40px; height: 40px; }
  .fold > .strap .disc.plain svg { width: var(--i-md); height: var(--i-md); }
  .fold > .body { padding: 0 0 34px; }
  .card { padding: 20px 18px 18px; }
  .card iframe { height: 420px; }
  .foot .wrap { flex-wrap: wrap; }
  .foot .btn { margin-left: 0; }
}
@media (max-width: 560px) {
  /* the tables turn into stacked rows: each cell a small block with its column's name above it,
     the short ones side by side, a long one taking the whole line */
  table.rows tr:first-child { display: none; }
  table.rows tr { display: flex; flex-wrap: wrap; column-gap: 22px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
  table.rows td { padding: 4px 0; border: 0; white-space: normal !important; }
  table.rows td.w { flex-basis: 100%; order: 2; }
  table.rows td:empty { display: none; }
  table.rows td::before {
    content: attr(data-l); display: block;
    font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf);
  }
}