/* Night garden around a lit dollhouse: the page is the dark yard, the canvas is the house. */
:root {
  --night: #1b2046;
  --night-2: #252b5c;
  --ink: #f3ead2;
  --muted: #aeb2d8;
  --lamp: #f2c84a;
  --wood: #6a4022;
  --wood-l: #c48a4e;
  --paper: #f7f1df;
  --paper-ink: #2a1d16;
  --pixel: "Pixelify Sans", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 17px;
  line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 48px;
}
.page { max-width: 1000px; margin: 0 auto; display: grid; gap: 20px; }
.head { display: grid; gap: 6px; justify-items: center; text-align: center; }   /* centred (owner, 2026-10-27) */
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.1; text-wrap: balance; }
h1 .num { color: var(--lamp); }
#lede { margin: 0; color: var(--muted); max-width: 62ch; }
#lede.wide { max-width: none; white-space: pre-line; }   /* following a job (2026-10-26): two lines over the whole width */
#lede .lede-job { color: var(--lamp); text-underline-offset: 3px; }   /* the followed job's id opens it in the column (2026-10-27) */
h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; }

.page > * { min-width: 0; }
.stage { display: flex; justify-content: center; min-width: 0; }
.screen { position: relative; max-width: 100%; }
/* the daily letter, over the house */
.letter-pop { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, 0.35); }
.letter-pop .letter { width: min(460px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 12px; }
.letter-pop .letter h2 { margin: 0; }
.letter-pop .letter button { justify-self: end; }
/* the station behind the panel over the piano (2026-10-26): the pattern large, the console's numbers in three columns */
.letter-pop .station-card { width: min(560px, 100%); }
.station-grid { display: block; width: 100%; height: auto; border: 1.5px solid var(--paper-ink); background: #040804; }
.station-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; margin: 0; font-size: 0.85rem; }
.station-numbers div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--wood-l); padding-bottom: 2px; }
.station-numbers dt { opacity: 0.75; }
.station-numbers dd { margin: 0; font-weight: 600; }
/* his whiteboard large (2026-10-25): wider than a letter; the diagram scrolls sideways inside it on a phone */
.letter-pop .board-card { width: min(760px, 100%); }
.letter-pop .changelog-card { width: min(620px, 100%); max-height: calc(100vh - 24px); }
.changelog-list h3 { margin: 14px 0 6px; font-size: 0.85rem; letter-spacing: 0.04em; }
.changelog-list h3:first-child { margin-top: 0; }
.changelog-list ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.changelog-list li { line-height: 1.45; }
.board-svg { overflow-x: auto; }
.board-svg svg { display: block; width: 100%; min-width: 420px; height: auto; border: 1.5px solid var(--paper-ink); }
.board-card pre { font-size: 0.8rem; }
/* switching between the seats of a parallel step (2026-10-25) */
.board-seats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; }
html[data-look] .board-seats button { justify-self: auto; font-size: 11px; padding: 5px 8px; letter-spacing: 0.04em; text-transform: none; }
html[data-look] .board-seats button[aria-current] { background: var(--paper-ink); color: var(--paper); opacity: 1; }
/* another seat's card switches the house to it; it looks like every other card, only the pointer and keyboard focus show it */
.board-svg .board-step { cursor: pointer; }
.board-svg .board-step:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
#game {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2;
  image-rendering: pixelated; image-rendering: crisp-edges;
  border: 4px solid var(--wood); box-shadow: 0 0 0 1px var(--wood-l);
  background: #131a3e;
}

.controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.controls:not(:has(> :not([hidden]))) { display: none; }      /* the seat and job rows switched off (2026-10-27): no empty row */
.seat-form, .toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* one row (2026-10-25): the seat, then the job; on narrow screens each part wraps onto its own line */
.seat-form { flex: 0 0 auto; }
/* following a job (2026-10-25): the list is 18rem at most, not as wide as its longest option, and shrinks first */
.job-form { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.job-form button { white-space: nowrap; }
#job-select { flex: 0 1 18rem; width: 18rem; min-width: 7rem; font: inherit; color: var(--paper-ink); background: var(--paper);
  border: 2px solid var(--wood-l); padding: 6px 8px; }
/* the light / dark switch: icon and the other mode's name, as on explorer.imd.fun */
.mode-btn { display: inline-flex; align-items: center; gap: 8px; }
.mode-btn svg { flex: none; }
html[data-mode="light"] .mode-btn .moon, html:not([data-mode="light"]) .mode-btn .sun { display: none; }
#job-select:disabled { opacity: 0.7; }
/* talking to him (2026-10-24): one command line under the seat row, his answer under it, like the original game's prompt */
.talk { display: grid; gap: 6px; }
.talk-line { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; border: 2px solid var(--wood-l); background: var(--night-2); }
.talk-line:focus-within { border-color: var(--lamp); }
.talk-prompt { color: var(--lamp); font-weight: 600; }
#talk-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: inherit; caret-color: var(--lamp); }
#talk-input::placeholder { color: var(--muted); opacity: 0.8; }
.talk-reply { margin: 0; min-height: 1.4em; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-reply:empty { display: none; }
.talk-reply .who { color: var(--lamp); }
.talk-reply a { color: var(--lamp); }
label { color: var(--muted); }
input[type=number] {
  width: 5.5rem; font: inherit; color: var(--paper-ink); background: var(--paper);
  border: 2px solid var(--wood-l); padding: 6px 8px;
}
button {
  font: inherit; font-weight: 600; color: var(--paper-ink); background: var(--lamp);
  border: 2px solid var(--wood); padding: 6px 12px; cursor: pointer;
}
button.quiet { background: transparent; color: var(--ink); border-color: var(--wood-l); }
button[aria-pressed=true] { background: var(--wood-l); color: var(--paper-ink); }
button:hover { filter: brightness(1.08); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }

/* the connected wallet, at the right end of the seat row */
.wallet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.wallet p { margin: 0; color: var(--muted); }
.doors { display: flex; flex-wrap: wrap; gap: 8px; }
.doors:empty { display: none; }
.door { background: var(--wood-l); color: var(--paper-ink); }

.below { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.below:has(.side[hidden]) { grid-template-columns: 1fr; }     /* the counters switched off: the diary takes the row */
@media (max-width: 720px) { .below { grid-template-columns: 1fr; } }
.diary ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.diary li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 8px; }
.diary li time { color: var(--muted); font-variant-numeric: tabular-nums; }
.diary li.empty { display: block; color: var(--muted); }
.side { display: grid; gap: 20px; }
.counters dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.counters dl div { background: var(--night-2); padding: 8px 10px; border-left: 3px solid var(--wood-l); }
.counters dt { color: var(--muted); font-size: 0.85rem; }
.counters dd { margin: 0; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.small { color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; }
@media (max-width: 420px) { .counters dl { grid-template-columns: repeat(2, 1fr); } }

.letter { background: var(--paper); color: var(--paper-ink); padding: 16px 18px; border: 2px solid var(--wood-l); box-shadow: 4px 4px 0 var(--wood); }
.letter h2 { font-family: var(--pixel); }
.letter pre { margin: 0; font-family: var(--type); font-size: 0.98rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

code { font-family: var(--type); font-size: 0.95em; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

.knock { display: grid; gap: 8px; background: var(--paper); color: var(--paper-ink); padding: 14px 16px;
  border: 3px solid var(--lamp); box-shadow: 4px 4px 0 var(--wood); }
.knock h2 { margin: 0; }
.knock p { margin: 0; max-width: 70ch; }
.knock code { background: #ebe1c6; padding: 0 4px; }
.knock button { justify-self: start; }

.legend { max-width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 18px 20px;
  background: var(--paper); color: var(--paper-ink); border: 3px solid var(--wood); box-shadow: 6px 6px 0 var(--wood); }
.legend::backdrop { background: rgba(10, 12, 32, 0.7); }
.legend h2 { margin: 0 0 8px; font-size: 1.35rem; }
.legend table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 0.95rem; }
.legend th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--wood-l); padding: 6px 8px; }
.legend td { border-bottom: 1px solid #e4d8b8; padding: 6px 8px; vertical-align: top; }
.legend td:first-child { width: 58%; }
.small-ink { margin: 0; font-size: 0.92rem; color: #5a4632; max-width: 70ch; }
.legend form { margin: 4px 0 0; }
.legend-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.legend-head h2 { margin: 0; }
.quiet-ink { background: transparent; color: var(--paper-ink); border-color: var(--wood-l); }

/* the header: the logo on the left, the name in the middle, the light / dark switch on the right (2026-10-27, owner: "only
   the LCP on the left, the dark/light mode switch at the right, and the LITTLE COMPUTER PEPES in the middle"): three
   columns, the name centred on the bar whatever the sides hold (the logo and the name sit in .brand-row, which steps
   aside); narrower than 560px the name is centred between the two and wraps rather than widening the page */
.topbar { max-width: 1000px; margin: 0 auto 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px 20px; align-items: center; }
.topbar .brand-row { display: contents; }
.topbar .menu-wrap { justify-self: start; }
.topbar .brand { justify-self: center; text-align: center; }
.topbar .toggles { justify-self: end; justify-content: flex-end; }
@media (max-width: 560px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .topbar .brand { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}
.brand { font-weight: 600; font-size: 1.15rem; color: var(--ink); text-decoration: none; padding: 6px 12px; border: 2px solid var(--wood-l); }
.brand:hover { color: var(--lamp); }
.brand:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
/* the logo, made like explorer.imd.fun's IMD mark (2026-10-24): a box with pepe's head, a rule and LCP, in the page's
   own two colours; on hover the head turns like the explorer's diamond (a globe turn every 2.4 s) */
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.logo { display: flex; align-items: stretch; height: 40px; border: 1.5px solid var(--ink); background: var(--night);
  color: var(--ink); text-decoration: none; transition: background-color 0.2s; }
.logo:hover { background: color-mix(in srgb, var(--ink) 14%, var(--night)); }
.logo:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.logo-mark { display: flex; align-self: stretch; align-items: center; justify-content: center; width: calc(40px - 1.5px);
  border-right: 1.5px solid var(--ink); perspective: 60px; }
/* align-self (2026-10-28, owner: the rule between the frog and LCP should look like the explorer's IMD button): the IMD look's
   `.topbar button { align-items: center }` shrank the frog's cell (a button) to its 19 px icon, and its rule with it */
.logo-mark svg { display: block; }
.logo:hover .logo-mark svg, .logo:focus-visible .logo-mark svg { animation: 2.4s linear infinite globe; }
.logo-label { display: flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.3em;
  padding: 0 calc(16px - 0.3em) 0 16px; }
@keyframes globe { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
/* a name's faint lead in the column's head (2026-10-28): 0x's "0", barely visible on either ground */
.name-faint { opacity: 0.2; }
/* the IMD logo on the right (2026-10-28): the explorer's IMD button as it is, the diamond first, no mirror */
/* a phone: the two marks alone (as in full screen), so the name in the middle keeps its room */
@media (max-width: 520px) { .topbar .logo .logo-label { display: none; } .topbar .logo .logo-mark { border: 0; } }
@media (prefers-reduced-motion: reduce) { .logo:hover .logo-mark svg, .logo:focus-visible .logo-mark svg { animation: none; } }

/* the frog's menu (2026-10-27, src/menu.js): the logo is its button and keeps its look (none of the bar's button rules);
   the menu drops under it in the panel's own look: the page's ground, a rule round it, one row per entry with its state at
   the right end, the link to the original last. Open, the frog looks as on hover */
.menu-wrap { position: relative; min-width: 0; }
html[data-look] .topbar .logo { height: 40px; padding: 0; border: 1.5px solid var(--ink); border-radius: 0; background: var(--night); color: var(--ink);
  font: inherit; letter-spacing: normal; text-transform: none; filter: none; }
html[data-look] .topbar .logo:hover, html[data-look] .topbar .logo[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 14%, var(--night)); }
html[data-look] .topbar .logo .logo-label { letter-spacing: 0.3em; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(19rem, calc(100vw - 32px)); padding: 6px 0;
  background: var(--night); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
html[data-look] .topbar .menu .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 44px; margin: 0;
  padding: 6px 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; filter: none; }
html[data-look] .topbar .menu .menu-item:hover { background: var(--hover-bg, var(--night-2)); }
html[data-look] .topbar .menu .menu-item:focus-visible { outline: 2px solid var(--lamp); outline-offset: -3px; }
.menu-item svg { flex: none; }
.menu-label { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.menu-sub { color: var(--muted); font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 400; overflow-wrap: anywhere; }
.menu-state { flex: none; min-width: 2.6em; text-align: right; color: var(--muted); }
.menu-item[aria-checked="true"] .menu-state { color: var(--lamp); font-weight: 600; }
.menu-rule { height: 1.5px; margin: 6px 0; background: var(--wood-l); }
.diary-col h2, .counters h2 { min-height: 1.4em; }
.looks { display: inline-flex; gap: 0; }
.looks button + button { border-left-width: 0; }

/* The IMD look (2026-10-24): imd.fun's black page, IBM Plex Mono, outlined square controls, a terminal for the diary. */
html[data-look="imd"] {
  --night: #000000;
  --night-2: #0b0b0b;
  --ink: #f4f4f2;
  --muted: #9a9a96;
  --lamp: #38d050;
  --wood: #f4f4f2;
  --wood-l: #5c5c58;
  --paper: #f4f4f2;
  --paper-ink: #0b0b0b;
  --term: #040404;
  --term-edge: #18301c;
  --on-ink: #000000;          /* text on an ink-filled control */
  --hover-bg: #141414;
  --field: #000000;
  --brand-hover: #e6e6e6;
  --pixel: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
/* The IMD look in light mode (2026-10-24), like explorer.imd.fun's light mode: the switch in the top bar (main.js,
   setMode; the column's list follows it). Only the page around the house changes; the house keeps its own sky. */
html[data-look="imd"][data-mode="light"] {
  --night: #ffffff;
  --night-2: #f4f4f2;
  --ink: #0b0b0b;
  --muted: #5c5c58;
  --lamp: #1f9d55;            /* the green, darker so it reads on white */
  --wood: #0b0b0b;
  --wood-l: #9a9a96;
  --paper: #f4f4f2;
  --paper-ink: #0b0b0b;
  --term: #f7f7f5;
  --term-edge: #cfe3d2;
  --on-ink: #ffffff;
  --hover-bg: #ececea;
  --field: #ffffff;
  --brand-hover: #2c2c2a;
  color-scheme: light;
}
html[data-look="imd"] body { font-size: 14px; line-height: 1.55; }
html[data-look="imd"] h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: 0.01em; }
html[data-look="imd"] h2 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[data-look="imd"] #game { image-rendering: auto; border: 1.5px solid var(--ink); box-shadow: none; background: #000; }
html[data-look="imd"] button {
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px;
}
html[data-look="imd"] button.quiet { border-color: var(--wood-l); }
html[data-look="imd"] button[aria-pressed=true] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-look="imd"] button:hover { filter: none; background: var(--hover-bg); }
html[data-look="imd"] button[aria-pressed=true]:hover { background: var(--ink); }
html[data-look="imd"] button:focus-visible, html[data-look="imd"] input:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
html[data-look="imd"] input[type=number] { background: var(--field); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0; }
html[data-look="imd"] #job-select { background: var(--field); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0; }
html[data-look="imd"] select:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
html[data-look="imd"] .door { background: transparent; color: var(--ink); }
html[data-look="imd"] .brand { background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--ink); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }
html[data-look="imd"] .brand:hover { color: var(--on-ink); background: var(--brand-hover); }
/* The top bar sized and placed like explorer.imd.fun's (measured 2026-10-24), so the two line up side by side: 16px
   from the top (12px up to 640px wide), the side gutter clamp(16px, 4vw, 34px), 40px controls with 1.5px rules,
   12px labels at weight 500 and 0.06em, the name at 13px/600/0.3em, the next row 82px from the top (80px narrow). */
html[data-look="imd"] body {
  padding-top: 16px;
  padding-left: max(clamp(16px, 4vw, 34px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 34px), env(safe-area-inset-right, 0px));
}
html[data-look="imd"] .topbar { gap: 8px 12px; margin-bottom: 26px; }
html[data-look="imd"] .topbar .toggles { gap: 12px; }
html[data-look="imd"] .brand, html[data-look="imd"] .topbar button { display: inline-flex; align-items: center; height: 40px; }
html[data-look="imd"] .brand { padding: 0 calc(16px - 0.3em) 0 16px; }
html[data-look="imd"] .topbar button { padding: 0 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; }
@media (max-width: 640px) {
  html[data-look="imd"] body { padding-top: 12px; }
  html[data-look="imd"] .topbar { gap: 10px; margin-bottom: 28px; }
  html[data-look="imd"] .topbar .toggles { gap: 10px; }
  html[data-look="imd"] .topbar button { padding: 0 12px; font-size: 10.5px; }
}
@media (max-width: 480px) {                                    /* a phone: the name a size down, on two lines where it must */
  html[data-look="imd"] .brand { height: auto; min-height: 40px; padding: 4px 10px; font-size: 11px; letter-spacing: 0.16em; line-height: 1.3; }
}
html[data-look="imd"] .diary { background: var(--term); border: 1.5px solid var(--term-edge); padding: 12px 14px; }
html[data-look="imd"] .diary ol { font-size: 12.5px; }
html[data-look="imd"] .talk-line { background: var(--term); border-color: var(--term-edge); height: 40px; }
html[data-look="imd"] .talk-prompt { color: var(--lamp); }
html[data-look="imd"] #talk-input { font-size: 13px; }
html[data-look="imd"] .talk-reply { font-size: 12.5px; }
/* in full screen, the talk line and his answer in the colour of the ground in front of the house (2026-10-28, owner: "adapt both
   input and outputfields background colors to the color in front of the house", then "change the bg colors of text fields back in
   non-fullscreen mode to how it was before, only in fullscreen use house colors"): themes/imd.js garden() paints it C.paper, by
   day and by night; on it ink, a muted grey and the house's darker green (the light one is too faint on paper) */
html[data-look="imd"] { --ground: #f4f4f2; --ground-ink: #0b0b0b; --ground-muted: #5c5c58; --ground-accent: #208030; --ground-edge: #bbbbb6; }
html[data-look="imd"][data-full] .talk-line { background: var(--ground); border-color: var(--ground-edge); }
html[data-look="imd"][data-full] .talk-line:focus-within { border-color: var(--ground-accent); }
html[data-look="imd"][data-full] .talk-prompt { color: var(--ground-accent); }
html[data-look="imd"][data-full] #talk-input { color: var(--ground-ink); caret-color: var(--ground-ink); }
html[data-look="imd"][data-full] #talk-input::placeholder { color: var(--ground-muted); opacity: 1; }
html[data-look="imd"][data-full] .talk-reply { background: var(--ground); color: var(--ground-ink); border: 1.5px solid var(--ground-edge); padding: 6px 12px; }
html[data-look="imd"][data-full] .talk-reply .who, html[data-look="imd"][data-full] .talk-reply a { color: var(--ground-accent); }
html[data-look="imd"] .diary li { grid-template-columns: 1rem 3.4rem 1fr; }
html[data-look="imd"] .diary li::before { content: ">"; color: var(--lamp); }
html[data-look="imd"] .diary li:first-child time, html[data-look="imd"] .diary li:first-child::before { color: var(--lamp); }
html[data-look="imd"] .diary li.empty::before { content: none; }
html[data-look="imd"] .counters dl div { background: var(--term); border-left: 2px solid var(--lamp); }
html[data-look="imd"] .counters dd { font-size: 1.15rem; }
html[data-look="imd"] .letter, html[data-look="imd"] .knock { border: 1.5px solid var(--ink); box-shadow: none; }
html[data-look="imd"] .knock { border-color: var(--lamp); }
html[data-look="imd"] .knock code { background: #e6e6e6; }
html[data-look="imd"] .legend { border: 1.5px solid var(--ink); box-shadow: none; }
html[data-look="imd"] .legend::backdrop { background: rgba(0, 0, 0, 0.75); }
html[data-look="imd"] .legend th { border-bottom-color: var(--paper-ink); }
html[data-look="imd"] .legend td { border-bottom-color: #d6d6d2; }
html[data-look="imd"] .small-ink { color: #5c5c58; }
html[data-look="imd"] .letter button, html[data-look="imd"] .knock button, html[data-look="imd"] .legend button { color: var(--paper-ink); border-color: var(--paper-ink); }

/* The house's own column (own pane, 2026-10-26, src/column.js): the swarm's jobs and seats, or a page Pepe shows. From
   900px wide it is fixed on the right at the grip's width (--column-w, 30-70 % of the window, set by column.js) and the
   house is centred in what is left; narrower it follows the house in the page, full width, 80vh tall, with no grip.
   Its border is the page's own colour, the panel's too (2026-10-27, owner: "color the border around the jobs etc panel in
   the same color like the panel and the site"): no line shows, in light or dark; the grip keeps its bar. */
.column { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 80vh; min-height: 360px;
  border: 1.5px solid var(--night); background: var(--night); }
.column-head { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 6px 4px 12px; border-bottom: 1.5px solid var(--wood-l); }
.column-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.column-head a { color: var(--lamp); }
html[data-look] .column-head button { height: 32px; padding: 0 10px; font-size: 11px; }
html[data-look] .column-head .column-x { width: 32px; padding: 0; font-size: 18px; line-height: 1; letter-spacing: 0; text-transform: none; }
.column-body { grid-row: 2; position: relative; min-height: 0; }      /* row 2 with or without the head */
.column-body iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: var(--night); }
#column-page { background: #ffffff; }
.column-grip { display: none; }
.column.dragging iframe { pointer-events: none; }               /* the drag goes on over the frames */
@media (min-width: 900px) {
  body.with-column, html[data-look] body.with-column { padding-right: calc(var(--column-w, 44vw) + 24px); }   /* over the look's gutter */
  .column { position: fixed; top: var(--column-top, 0px); right: 0; bottom: 0; z-index: 5; width: var(--column-w, 44vw); height: auto;
    min-height: 0; border-width: 1.5px 0 0 1.5px; }
  /* the page's header spans the house and the column (owner, 2026-10-26: "make the LCP header take all width above the two
     panels"); the column starts under it (column.js sets --column-top) */
  body.with-column .topbar { max-width: none; margin-right: calc(-1 * var(--column-w, 44vw) - 24px); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  html[data-look="imd"] body.with-column .topbar { padding-right: max(clamp(16px, 4vw, 34px), env(safe-area-inset-right, 0px)); }
  .column-grip { display: block; position: absolute; top: 0; bottom: 0; left: -6px; width: 11px; z-index: 1; cursor: col-resize; touch-action: none; }
  .column-grip::after { content: ""; position: absolute; top: 50%; left: 4px; width: 3px; height: 40px; margin-top: -20px; background: var(--wood-l); }
  .column-grip:hover::after, .column-grip:focus-visible::after, .column.dragging .column-grip::after { background: var(--lamp); }
  .column-grip:focus-visible { outline: none; }
  .column.dragging, body:has(.column.dragging) { cursor: col-resize; user-select: none; }
}

/* The house in full screen (2026-10-27, src/full.js; owner: "add a "fullscreen mode" for the house, which isnt actually
   fullscreen everytime, only when theres no panel right, except it takes the full panel screen, while jobs list etc. keeps
   being visible"). html[data-full]: house (the column shut: the screen or the window), side (the column open on a wide
   window: everything left of it, under the top bar), flow (the column open under the house: the page as it is). The title,
   the lede, the diary and the rest of the page give way in all three; in house and side the house and the talk line are
   fixed boxes main.js fitFull measures (--house-*, --talk-*), the talk line under the house, beside it, or over the ground
   strip in front of it (data-place). The frog stays: the top bar's left end (side), or the screen's corner (house). */
html[data-full] .head, html[data-full] .controls, html[data-full] .below, html[data-full] .knock, html[data-full] .radio-line { display: none !important; }
html[data-full="house"] body, html[data-full="side"] body { overflow: hidden; }
html[data-full="house"] body, html[data-look][data-full="house"] body { padding: 0; }
html[data-full="house"] .topbar { margin: 0; }
html[data-full="house"] .topbar .brand, html[data-full="house"] .topbar .toggles { display: none; }
html[data-full="house"] .menu-wrap { position: fixed; top: 10px; left: 10px; z-index: 21; }
/* full screen (2026-10-28, owner: "in full screen mode only show the actual logos left and right without the text"): the frog's and
   IMD's marks alone, at the left and the right; no labels, no name. With the column shut the IMD mark floats in the right corner */
html[data-full] .topbar .logo-label, html[data-full] .topbar .brand { display: none; }
html[data-full] .topbar .logo .logo-mark { border: 0; }
html[data-full="house"] .topbar .toggles { display: flex; position: fixed; top: 10px; right: 10px; z-index: 21; }
html[data-full="house"] .stage, html[data-full="side"] .stage { position: fixed; left: var(--house-x); top: var(--house-y); width: var(--house-w); z-index: 1; }
html[data-full="house"] .talk, html[data-full="side"] .talk { position: fixed; left: var(--talk-x); top: var(--talk-y); width: var(--talk-w); height: var(--talk-h);
  z-index: 6; grid-template-rows: auto minmax(0, 1fr); align-content: start; }
html[data-full] .talk[data-place] .talk-reply { min-height: 0; max-height: 100%; overflow: auto; overscroll-behavior: contain; }
/* no room beside or under the house: the line and his reply side by side on the ground strip, under his rooms, readable
   on the paper in either mode (their own ground and an ink rule round each); the house's popups end above it */
html[data-full] .talk[data-place="over"] { display: flex; gap: 6px; align-items: stretch; }
html[data-full] .talk[data-place="over"] .talk-line { flex: 0 0 46%; height: 100%; min-height: 0; padding: 0 8px; background: var(--ground, var(--night)); border: 1.5px solid var(--ground-edge, var(--ink)); }
html[data-full] .talk[data-place="over"] .talk-line:focus-within { border-color: var(--ground-accent, var(--lamp)); }
html[data-full] .talk[data-place="over"] #talk-input { padding: 0; }
html[data-full] .talk[data-place="over"] .talk-reply { flex: 1 1 0; min-width: 0; height: 100%; margin: 0; padding: 2px 8px; background: var(--ground, var(--night));
  border: 1.5px solid var(--ground-edge, var(--ink)); font-size: 12px; line-height: 1.4; }
html[data-full] .talk[data-place="over"] .talk-reply:empty { display: none; }
html[data-full] .letter-pop { padding-bottom: calc(12px + var(--strip-h, 0px)); }
html[data-full] #news-pop { padding-bottom: 12px; }

/* the radio (2026-10-25): the line under the command line names the station and theidm.fun; the frame of their stream
   page is audio only and stays out of the layout (hidden by size and opacity, not display: none, so it keeps playing) */
.radio-line { margin: -6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 0.95rem; }
.radio-line b { color: var(--ink); font-weight: 600; }
.radio-line a { color: var(--lamp); }
.radio-line .quiet { margin-left: auto; }
#radio { position: fixed; left: 0; bottom: 0; width: 0; height: 0; }   /* out of the page grid: no empty row between his reply and the diary (owner, 2026-10-26) */
.radio-frame { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; border: 0; opacity: 0.01; pointer-events: none; }
/* the light / dark switch shows its icon only (owner, 2026-10-25); the mode's name stays for screen readers */
.mode-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mode-btn { position: relative; }

/* The IMD Daily in the house (2026-10-26): the issue's pages in the popup over the house */
#news-pop { position: fixed; z-index: 20; }                /* the reader covers the page, not just the house: a page needs the height */
.letter-pop .news-card { width: min(760px, 100%); max-height: calc(100vh - 24px); }
.news-stage { position: relative; display: grid; justify-content: center; background: #e9e6dc; border: 1.5px solid var(--paper-ink); min-height: 220px; touch-action: pan-y; overflow: hidden; }
#news-page { display: block; height: auto; max-width: 100%; background: #ffffff; }
.news-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 12px; text-align: center; color: var(--paper-ink); background: rgba(255, 255, 255, 0.85); }
.news-msg:empty { display: none; }
.news-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.news-nav span { color: var(--paper-ink); font-size: 0.9rem; }