/*
 * Authorized Loitering: Your File (the dashboard)
 *
 * Styles for the signed-in game pages, loaded after bureau.css and using
 * its colors and type. Written phone-first: one column that becomes two
 * on wider screens, with the game's tab bar fixed to the bottom.
 *
 * Served as a plain file (no build step) so a push deploys it.
 *
 * @package   public.css
 * @copyright 2026 One Man's Junk Games
 */

.casefile { flex: 1; padding-top: 14px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 16px; }
.casefile__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px 24px; align-items: start; }
.casefile__col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.casefile h2.mono { font-weight: 500; }

/* ---- Where to go ---- */

.seat { padding: 12px; background: var(--ticket); border: 2.5px solid var(--ink); display: flex; flex-direction: column; gap: 10px; }
.seat__text { display: flex; flex-direction: column; gap: 2px; }
.seat__room { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; }

/* ---- The Matter ---- */

.matter { flex: none; max-width: none; margin-top: 0; }
.matter__body { border: 1.5px solid var(--ink); }
.matter__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1.5px solid var(--rule); }
.matter__row--title { padding: 10px; }
.matter__title { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.02; }
.matter__note { padding: 9px 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.file__boxes i.is-stamped { background: var(--stamp); }

/* ---- The floor and its doors ---- */

.progress { display: flex; flex-direction: column; gap: 6px; }
.progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.progress__title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.progress__count { font-family: var(--mono); font-size: 15px; font-weight: 600; white-space: nowrap; }

.meter { height: 10px; border: 2px solid var(--ink); background: var(--paper); }
.meter span { display: block; height: 100%; background: var(--stamp); }
.meter--small { flex: 1; height: 8px; border-width: 1.5px; background: var(--ground); }

.doors { margin: 8px 0 0; padding: 0; list-style: none; background: var(--paper); border: 2px solid var(--ink); }
.doors li { min-height: 48px; padding: 8px 12px; border-bottom: 1.5px solid var(--rule); display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.doors li:last-child { border-bottom: 0; }
.doors li.is-here { background: #E7ECDF; }
.doors li.is-locked b, .doors li.is-locked .doors__count { color: var(--muted); }
.doors__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.doors b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; }
.doors__tag { flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.doors__tag--here { color: var(--stamp); }
.doors__bar { display: flex; align-items: center; gap: 8px; }
.doors__count { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; }

.lift { margin-top: 8px; padding: 10px 12px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lift .mono { font-size: 11px; color: var(--ticket); }
.lift p { font-size: 14px; line-height: 1.3; }
.lift a { color: var(--paper); }
.lift a:hover, .lift a:focus-visible { color: var(--ticket); }
.lift__button { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 2.5px dashed #B5C4B8; color: #B5C4B8; font-family: var(--mono); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.lift__button.is-open { border-style: solid; border-color: var(--paper); background: var(--ticket); color: var(--ink); }

/* ---- Leads, the latest certificate, standing ---- */

.empty { padding: 12px; background: var(--paper); border: 2px dashed var(--ink); font-size: 14px; line-height: 1.4; color: var(--muted); }
.casefile__col > h2.mono { margin-bottom: -8px; }

.standing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.standing__tile { background: var(--paper); border: 2px solid var(--ink); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
a.standing__tile--link { color: var(--ink); text-decoration: none; }
a.standing__tile--link:hover { background: var(--ticket); }
.standing__tile b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.02; text-transform: uppercase; }

.casefile__account { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; font-size: 14px; font-weight: 600; }
.casefile__account a, .casefile__account button { min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--ink); font: inherit; text-decoration: underline; cursor: pointer; }
.casefile__account a:hover, .casefile__account button:hover { color: var(--stamp); }

/* ---- The schedule of loitering grades ---- */

.grades { margin: 0; padding: 0; list-style: none; background: var(--paper); border: 2px solid var(--ink); }
.grades li { min-height: 52px; padding: 8px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; border-bottom: 1.5px solid var(--rule); }
.grades li:last-child { border-bottom: 0; }
.grades__no { grid-row: span 2; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--muted); }
.grades b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.05; }
.grades__at { grid-row: span 2; font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.grades__line { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--muted); }
.grades li.is-current { background: var(--ink); color: var(--paper); }
.grades li.is-current .grades__no, .grades li.is-current .grades__line { color: var(--ticket); }
.grades li.is-next { background: var(--ticket); }
.grades li.is-next .grades__no, .grades li.is-next .grades__line { color: var(--ink); }
.grades li.is-sealed b { display: flex; flex-direction: column; gap: 4px; }
.grades li.is-sealed i { display: block; height: 11px; max-width: 220px; background: var(--rule); }
.grades li.is-sealed .grades__at { color: var(--muted); }

.grades__unlock { grid-column: 2; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.grades li.is-sealed .grades__unlock { color: var(--muted); }

.looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 24px; }
.looks fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.looks legend { padding: 0; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.looks label { min-height: 48px; padding: 6px 10px; display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; font-weight: 600; }
.looks label:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--ink); }
.looks input { width: 20px; height: 20px; accent-color: var(--ink); }
.looks__swatch { flex-shrink: 0; width: 54px; height: 30px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.looks__swatch i { display: block; padding: 0 4px; border: 2px solid currentColor; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: 0.08em; transform: rotate(-8deg); }

/* ---- The Registry ---- */

a.chip { display: inline-flex; align-items: center; text-decoration: none; }
a.chip[aria-current="page"] { background: var(--ink); color: var(--paper); }
.board { margin: 0; padding: 0; list-style: none; background: var(--paper); border: 2px solid var(--ink); }
.board li { min-height: 54px; padding: 7px 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1.5px solid var(--rule); }
.board li:last-child { border-bottom: 0; }
.board__place { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--muted); }
.board__who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.board__who b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.board__who .small { color: var(--muted); }
.board__you { margin-left: 4px; padding: 0 5px; background: var(--ink); color: var(--ticket); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; vertical-align: 2px; }
.board__staff { margin-left: 4px; padding: 0 5px; border: 1.5px solid var(--stamp); color: var(--stamp); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; vertical-align: 2px; }
.board li.is-mine .board__staff { border-color: var(--ink); color: var(--ink); }
.board__value { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.board li.is-mine { background: var(--ticket); }
.board li.is-mine .board__place, .board li.is-mine .board__who .small { color: var(--ink); }
.board li:nth-child(1) .board__place { color: var(--stamp); }
.board--mine { border-style: dashed; }

/* ---- The ID card and the profile ---- */

.idcard { background: var(--paper-form, var(--paper)); border: 2.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.idcard__top { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; background: var(--ink); color: var(--ticket); font-size: 11px; }
.idcard__body { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; }
.idcard__photo { flex-shrink: 0; border: 2.5px solid var(--ink); }
.idcard__lines { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.idcard__no { font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; }
.idcard__alias { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.idcard__rank { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.05; text-transform: uppercase; }
.idcard__stamp { position: absolute; right: 10px; top: 12px; font-size: 12px; opacity: 0.85; }
.idcard__lines { padding-right: 4px; }
.idcard__no { padding-right: 70px; }

/* The card page: the photo stays in view while its parts are chosen. */
.maker__preview { position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--ground); }
.maker__deal { display: flex; gap: 8px; flex-wrap: wrap; }
.maker__deal .chip { flex: 1; }
.maker__group { display: flex; flex-direction: column; gap: 14px; }
.maker__group[hidden] { display: none; }
.maker__part { margin: 0; padding: 0; border: 0; min-width: 0; }
.maker__part legend { padding: 0; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.maker__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.maker__opt { position: relative; min-height: 44px; padding: 6px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; }
.maker__opts--colors .maker__opt { justify-content: flex-start; text-align: left; }
.maker__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.maker__opt:has(input:checked) { background: var(--ink); color: var(--paper); }
.maker__opt:has(input:focus-visible) { outline: 3px solid var(--stamp); outline-offset: 2px; }
.maker__opt.is-locked { border-style: dashed; color: var(--muted); cursor: not-allowed; }
.maker__opt.is-locked input { cursor: not-allowed; }
.maker__opt small { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.maker__dot { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--paper); }
.particulars { margin: 0; background: var(--paper); border: 2px solid var(--ink); }
.particulars > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1.5px solid var(--rule); }
.particulars > div:last-child { border-bottom: 0; }
.particulars dt { color: var(--muted); font-size: 14px; }
.particulars dd { margin: 0; text-align: right; font-weight: 600; font-size: 14px; }
.board__who a { color: inherit; text-decoration: none; }
.board__who a:hover { text-decoration: underline; }
button.link { padding: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.error { color: var(--stamp); font-size: 14px; font-weight: 600; }

/* ---- Settings ---- */

.settings__stack { display: flex; flex-direction: column; gap: 14px; }
.settings__title { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.settings__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings__label { margin-bottom: 4px; font-size: 11px; color: var(--muted); }
.settings__links { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.settings__links .btn { text-align: center; text-decoration: none; }
.settings__qr { align-self: flex-start; padding: 8px; background: #FFFFFF; border: 2px solid var(--ink); line-height: 0; }
.settings__qr svg { width: 168px; height: 168px; }
.settings__key { display: block; padding: 8px 10px; background: var(--ground); border: 2px dashed var(--ink); font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.settings__codes { margin: 0; padding: 10px 12px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; background: var(--ground); border: 2px dashed var(--ink); font-family: var(--mono); font-size: 13px; }
.settings__keys { margin: 0; padding: 0; list-style: none; border: 2px solid var(--ink); }
.settings__keys li { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1.5px solid var(--rule); }
.settings__keys li:last-child { border-bottom: 0; }
.settings__keys li > span { min-width: 0; display: flex; flex-direction: column; }

/* ---- The tab bar ---- */

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--paper); border-top: 2.5px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.tabs__inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-left: 0; padding-right: 0; }
.tabs__item { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; }
.tabs__item[aria-current="page"] { color: var(--stamp); box-shadow: inset 0 4px 0 var(--stamp); }
.tabs__item[aria-disabled="true"] { color: #7A8B80; }

@media (min-width: 760px) { .standing { gap: 24px; } }

/* ---- Leads and the journal ---- */

.leads { margin: 0; padding: 0; list-style: none; background: var(--paper); border: 2px solid var(--ink); }
.leads li { padding: 8px 12px; border-bottom: 1.5px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.leads li:last-child { border-bottom: 0; }
.leads b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.05; }
a.slip { text-decoration: none; }

.kinds { margin: 0; padding: 0; list-style: none; background: var(--paper); border: 2px solid var(--ink); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kinds li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; box-shadow: 0 1.5px 0 var(--rule), 1.5px 0 0 var(--rule); font-size: 13.5px; }
.kinds b { font-family: var(--mono); font-size: 13px; font-weight: 600; }

/* ---- The journal: a drawer of forms per room ---- */

.floor-tabs { display: flex; gap: 0; border-bottom: 2.5px solid var(--ink); overflow-x: auto; }
.floor-tabs a { flex: 0 1 auto; min-height: 46px; padding: 6px 14px 6px 8px; display: flex; align-items: center; gap: 9px; border: 2px solid var(--ink); border-bottom: 0; margin-right: -2px; background: var(--ground); color: var(--muted); text-decoration: none; white-space: nowrap; }
.floor-tabs a:hover { background: var(--paper); color: var(--ink); }
.floor-tabs a.is-shown { background: var(--paper); color: var(--ink); box-shadow: inset 0 4px 0 var(--stamp); }
.floor-tabs__label { flex-shrink: 0; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 15px; display: flex; align-items: center; justify-content: center; border: 2px solid currentColor; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.floor-tabs a.is-shown .floor-tabs__label { background: var(--ink); border-color: var(--ink); color: var(--ticket); }
.floor-tabs__name { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.floor-tabs__count { font-family: var(--mono); font-size: 11px; font-weight: 600; }
@media (max-width: 520px) { .floor-tabs a { flex: 1 1 0; min-width: 0; padding-right: 8px; } .floor-tabs__name { overflow: hidden; text-overflow: ellipsis; } .floor-tabs__count { display: none; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.cabinet { display: flex; flex-direction: column; gap: 22px; }
.drawer { display: flex; flex-direction: column; gap: 8px; }
.drawer__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.drawer__top h2 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.drawer .meter--small { flex: none; }

.forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.form { position: relative; min-height: 104px; padding: 8px 9px; display: flex; flex-direction: column; gap: 5px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; text-align: left; }
.form b { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.04; }
.form__top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.form__foot { margin-top: auto; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.form__mark { padding: 0 4px; border: 1.5px solid var(--ink-stamp, var(--stamp)); color: var(--ink-stamp, var(--stamp)); transform: rotate(-5deg); }
.form--held { background: var(--paper-form, var(--paper)); }
button.form { cursor: pointer; box-shadow: 3px 3px 0 var(--rule); }
button.form:hover { box-shadow: 3px 3px 0 var(--ink); }
.form--unlisted { background: var(--ticket); }
.form--unlisted .form__top, .form--unlisted .form__foot { color: var(--ink); }
.form--open { border-style: dashed; border-color: var(--rule); background: transparent; }
button.form--open { box-shadow: none; }
button.form--open:hover { border-color: var(--ink); box-shadow: none; }
.form__hinted { padding: 0 4px; background: var(--ticket); color: var(--ink); }
.vouchers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; background: var(--ticket); border: 2px solid var(--ink); }
.vouchers b { font-size: 13px; white-space: nowrap; }
.vouchers .small { color: var(--ink); }
.cert__body--open { padding-top: 14px; }
.cert__note { text-align: center; color: var(--paper); }
#hint form[hidden], #hint p[hidden] { display: none; }
#hint .cert__form { background: var(--paper); }
.form--open b { color: var(--muted); font-weight: 600; }
.form--redacted b { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.form--redacted i { display: block; height: 12px; background: var(--ink); }
.form--redacted i + i { width: 62%; }
.cabinet[data-show="held"] .form--open, .cabinet[data-show="open"] .form--held { display: none; }

/* ---- The elevator: the view from inside the car ---- */

.car { width: 100%; max-width: 640px; margin: 0 auto; border: 2.5px solid var(--ink); background: #7C8F84; overflow: hidden; }
.car__ceiling { height: 26px; background: #17231F; display: flex; align-items: center; justify-content: center; border-bottom: 2.5px solid var(--ink); }
.car__ceiling i { width: 62%; height: 8px; border-radius: 4px; background: #FFF6D6; box-shadow: 0 0 18px 6px rgba(255, 246, 214, 0.55); }
.car__walls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 10px 0; background: linear-gradient(180deg, #6B7E73 0%, #8FA296 22%, #8FA296 100%); }
.car__front { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.car__rail { height: 9px; margin-top: 10px; background: linear-gradient(180deg, #F7E08A, #C99F2C); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.car__floor { height: 26px; background: repeating-linear-gradient(90deg, #6B2F2A 0 18px, #5A2622 18px 36px); }

.indicator { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #0E1613; border: 2.5px solid var(--ink); color: var(--ticket); font-family: var(--mono); font-weight: 600; text-shadow: 0 0 10px rgba(239, 203, 82, 0.8); }
.indicator__floor { font-size: 24px; line-height: 1; }
.indicator__arrow { width: 16px; font-size: 14px; }
.car.is-moving .indicator__arrow { animation: lift-blink 0.52s steps(2) infinite; }

.doorway { position: relative; flex: 1; min-height: 300px; overflow: hidden; border: 2.5px solid var(--ink); background: #0E1613; }
.doorway__beyond { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; background: linear-gradient(180deg, #FFF6D6 0%, #EAE3CD 55%, #C9BE9F 55%, #C9BE9F 100%); color: var(--ink); }
.doorway__beyond b { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 0.9; }
.doorway__beyond span { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.car.is-moving .doorway__beyond { color: transparent; background: repeating-linear-gradient(180deg, #0E1613 0 46px, #55685F 46px 52px, #0E1613 52px 98px); background-size: 100% 98px; animation: lift-shaft 0.42s linear infinite; }
.car.is-sinking .doorway__beyond { animation-direction: reverse; }
.doorway__door { position: absolute; top: 0; bottom: 0; width: calc(50% - 1.5px); background: repeating-linear-gradient(90deg, rgba(23, 35, 31, 0.07) 0 1px, transparent 1px 5px), linear-gradient(90deg, #AEBAB3 0%, #DFE6E1 45%, #B9C4BE 100%); transition: transform 0.6s cubic-bezier(0.6, 0, 0.3, 1); }
.doorway__door--left { left: 0; border-right: 2px solid var(--ink); }
.doorway__door--right { right: 0; border-left: 2px solid var(--ink); }
.car.is-open .doorway__door--left { transform: translateX(-94%); }
.car.is-open .doorway__door--right { transform: translateX(94%); }
.car.is-moving .car__walls { animation: lift-shake 0.16s linear infinite; }

.keys { position: relative; min-width: 0; padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 9px; border: 2.5px solid var(--ink); background: linear-gradient(90deg, #A9B5AF 0%, #D8DFDA 22%, #BEC9C3 55%, #D8DFDA 85%, #A9B5AF 100%); box-shadow: inset 0 0 0 3px rgba(244, 246, 239, 0.55); }
.keys__screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #6F7F78; border: 1.5px solid var(--ink); }
.keys__screw--a { left: 5px; top: 5px; } .keys__screw--b { right: 5px; top: 5px; } .keys__screw--c { left: 5px; bottom: 5px; } .keys__screw--d { right: 5px; bottom: 5px; }
.keys__display { min-height: 40px; padding: 5px 7px; display: flex; align-items: center; background: #0E1613; border: 2px solid var(--ink); color: var(--ticket); font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; }
.keys__foot { margin-top: 2px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; color: #4A5A53; }



/* The buttons: every floor in the building, lowest at the bottom left as on a real panel. Lit ones can be ridden to. */
.keys__grid { display: flex; flex-wrap: wrap-reverse; gap: 5px 4px; }
.key, .keys__blank { flex: 0 0 calc((100% - 32px) / 9); min-width: 0; aspect-ratio: 1; }
.key { padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #5E6E67; border-radius: 50%; background: #BCC7C1; box-shadow: 0 2px 0 #5E6E67; color: #5E6E67; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
button.key { cursor: pointer; }
button.key:focus-visible { outline: 2.5px dashed var(--stamp); outline-offset: 2px; }
.key--open, .key--here { border: 2.5px solid var(--ink); color: var(--ink); font-size: 12.5px; }
.key--open { background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFF3C2 55%, #EFCB52 100%); box-shadow: 0 3px 0 var(--ink), 0 0 10px 1px rgba(239, 203, 82, 0.75); }
.key--open:hover { background: #FFF9DE; }
.key--open:active, .key.is-lit { transform: translateY(3px); box-shadow: 0 0 14px 3px rgba(239, 203, 82, 0.95); background: var(--ticket); }
.key--here { background: var(--ink); color: var(--ticket); transform: translateY(3px); box-shadow: 0 0 0 3px var(--ticket); }
.key--shut:active { transform: translateY(2px); box-shadow: none; }
.key.is-refused { animation: lift-refuse 0.3s; }
.keys__blank { position: relative; display: flex; align-items: center; justify-content: center; }
.keys__blank::before { content: ""; width: 78%; height: 34%; border-radius: 99px; background: #9AA8A1; border: 1.5px solid #5E6E67; }
.keys__blank em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.keys__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: #3F4F48; }
.keys__legend span { display: inline-flex; align-items: center; gap: 5px; }
.keys__legend i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--ticket); }
.keys__legend i.is-here { background: var(--ink); box-shadow: 0 0 0 1.5px var(--ticket); }
.keys__legend i.is-dark { background: #BCC7C1; border-color: #5E6E67; }

/* ---- The building directory, on the wall either side of the elevator ---- */

.wrap--lift { max-width: 1440px; }
.liftlobby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.liftlobby > .car { order: -1; }
@media (min-width: 620px) { .car__walls { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); } .doorway { min-height: 360px; } .keys__display { font-size: 12px; } }
@media (min-width: 820px) { .liftlobby { grid-template-columns: repeat(2, minmax(0, 1fr)); } .liftlobby > .car { grid-column: 1 / -1; } }
/* Wide enough for the wall either side: the boards hang well clear of the doors. */
@media (min-width: 1360px) { .liftlobby { grid-template-columns: minmax(0, 300px) 640px minmax(0, 300px); justify-content: center; gap: 20px 64px; } .liftlobby > .car { grid-column: auto; order: 0; } .dir__list { max-height: 560px; } }
/* The three buttons under the floors, which every panel has and no panel explains. */
.keys__aux { display: flex; justify-content: center; gap: 10px; padding-top: 2px; border-top: 1.5px solid rgba(23, 35, 31, 0.25); margin-top: 2px; padding-top: 9px; }
.keys__aux button { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #DCE3DD 55%, #B4C0B9 100%); box-shadow: 0 2px 0 var(--ink); color: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: -0.06em; cursor: pointer; }
.keys__aux button:active { transform: translateY(2px); box-shadow: none; }
.keys__aux button.is-alarm { background: #C9463B; color: #FFF6D6; }
.dir { min-width: 0; border: 2.5px solid var(--ink); background: #8A6B3F; padding: 6px; box-shadow: inset 0 0 0 2px rgba(255, 246, 214, 0.35); }
.dir__head { padding: 6px 8px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #FFF6D6; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }
.dir__head small { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; }
.dir__list { position: relative; margin: 0; padding: 4px 0; list-style: none; max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; border: 2px solid var(--ink); background: repeating-linear-gradient(180deg, #17231F 0 5px, #1D2B26 5px 6px); color: #F4F6EF; scrollbar-color: #5E6E67 #17231F; }
.dir__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 8px; padding: 7px 10px 7px 6px; align-items: baseline; color: #AEBAB3; }
.dir__row + .dir__row { border-top: 1px dashed rgba(244, 246, 239, 0.14); }
.dir__no { font-family: var(--mono); font-size: 14px; font-weight: 600; text-align: right; color: #7F8E87; }
.dir__what { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dir__what b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: #DFE6E1; }
.dir__what span { font-size: 13px; line-height: 1.3; }
.dir__rule { color: #FFF6D6; }
.dir__note { align-self: flex-start; margin-top: 2px; padding: 1px 6px; border: 1.5px solid currentColor; font-family: var(--mono); font-size: 10px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dir__row.is-open .dir__no, .dir__row.is-here .dir__no { color: var(--ticket); text-shadow: 0 0 8px rgba(239, 203, 82, 0.7); }
.dir__row.is-open .dir__what b, .dir__row.is-here .dir__what b { color: #FFFFFF; }
.dir__row.is-open, .dir__row.is-here { color: #DFE6E1; }
.dir__row.is-open .dir__note { color: var(--ticket); }
.dir__row.is-here { background: rgba(239, 203, 82, 0.13); box-shadow: inset 4px 0 0 var(--ticket); }
.dir__row.is-here .dir__note { background: var(--ticket); border-color: var(--ticket); color: var(--ink); }
.dir__row.is-called { background: rgba(244, 246, 239, 0.12); }

.placard { width: 100%; max-width: 560px; margin: 0 auto; padding: 10px 12px; background: var(--paper); border: 2px solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.placard > .mono { font-size: 11px; color: var(--muted); }
.placard ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.35; }
.placard li { display: flex; gap: 10px; }
.placard li b { flex-shrink: 0; width: 22px; font-size: 12px; text-align: center; }

@keyframes lift-shaft { to { background-position: 0 98px; } }
@keyframes lift-shake { 0% { transform: translateY(0); } 25% { transform: translateY(1px); } 75% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes lift-blink { 50% { opacity: 0.25; } }
@keyframes lift-refuse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .doorway__door { transition: none; } .car.is-moving .car__walls, .car.is-moving .doorway__beyond, .car.is-moving .indicator__arrow, .key.is-refused { animation: none; } }

/* ---- The room ---- */

.play { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; align-items: start; }
@media (min-width: 900px) { .play { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }
.play__stage, .play__side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.play__progress { display: flex; align-items: center; gap: 10px; }
.play__progress .mono { font-size: 11px; }
.play__progress .meter { flex: 1; }
.play__progress .progress__count { font-size: 13px; }

.hall { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); border: 2px solid var(--ink); }
@media (min-width: 560px) { .hall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hall button { min-height: 48px; padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; border: 0; border-radius: 0; background: var(--ticket); box-shadow: 0 1.5px 0 var(--ink), 1.5px 0 0 var(--ink); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hall button:hover:enabled { background: var(--paper); }
.hall button:focus-visible { outline: 2.5px dashed var(--stamp); outline-offset: -4px; }
.hall button:disabled { background: transparent; color: var(--muted); cursor: default; }
.hall button.is-here { background: var(--ink); color: var(--paper); }
.hall b { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.hall span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }

.scene { display: block; width: 100%; height: auto; border: 2.5px solid var(--ink); background: var(--wall); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.thing { cursor: pointer; outline: none; }
.thing .hit { fill: transparent; }
.thing.is-down { opacity: 0.72; }
.thing:focus-visible .hit { stroke: var(--stamp); stroke-width: 2.5; stroke-dasharray: 5 4; }
.thing text { pointer-events: none; }

.clock-hand { transform-box: fill-box; transform-origin: 50% 50%; animation: clock-turn 12s steps(12) infinite; }
.thing[data-state="stopped"] .clock-hand { animation-play-state: paused; }
.thing[data-state="reversed"] .clock-hand { animation-direction: reverse; }
@keyframes clock-turn { to { transform: rotate(360deg); } }
.notice-sheet { transform-box: fill-box; transform-origin: 50% 0; transition: transform 0.15s; }
.thing[data-state="crooked"] .notice-sheet { transform: rotate(9deg); }
.door-wings { transform-box: fill-box; transform-origin: 50% 50%; animation: door-turn 2.4s linear infinite; }
.thing[data-state="stuck"] .door-wings { animation-play-state: paused; }
.thing[data-state="reversed"] .door-wings { animation-direction: reverse; }
@keyframes door-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .clock-hand, .door-wings { animation: none; } .notice-sheet { transition: none; } }

.remark { background: var(--paper); border: 2px solid var(--ink); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-height: 84px; }
.remark p { font-size: 16px; line-height: 1.35; }
.remark { transition: box-shadow 0.2s; }
.remark.is-warm { box-shadow: inset 5px 0 0 var(--ticket); }
.strip[hidden], .slip[hidden] { display: none; }
.strip__actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.strip__actions .btn[hidden] { display: none; }

.pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pockets__label { grid-column: 1 / -1; font-size: 11px; color: var(--muted); margin-bottom: -2px; }
.pockets__slot { min-height: 48px; padding: 4px 8px; border: 2px solid var(--ink); border-top-width: 5px; border-radius: 0 0 8px 8px; background: var(--ticket); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.effects { margin: 0; padding: 6px 10px; border: 2px solid var(--ink); border-left-width: 6px; background: var(--ticket); font-size: 14px; font-weight: 600; line-height: 1.3; }
.effects .mono { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pockets__slot:hover:enabled { background: var(--paper); }
.pockets__slot:disabled { border-style: dashed; border-top-style: solid; border-color: var(--rule); background: transparent; color: var(--muted); font-weight: 400; cursor: default; }
#left[hidden] { display: none; }

/* ---- Arriving by elevator: the car's doors open on the room ---- */

.view { position: relative; }
.arrive { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border: 2.5px solid var(--ink); }
.arrive__door { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, rgba(23, 35, 31, 0.07) 0 1px, transparent 1px 5px), linear-gradient(90deg, #AEBAB3 0%, #DFE6E1 45%, #B9C4BE 100%); animation: 0.75s cubic-bezier(0.6, 0, 0.3, 1) 0.55s forwards; }
.arrive__door--left { left: 0; border-right: 2px solid var(--ink); animation-name: arrive-left; }
.arrive__door--right { right: 0; border-left: 2px solid var(--ink); animation-name: arrive-right; }
.arrive__floor { position: absolute; left: 50%; top: 12px; min-width: 64px; height: 38px; padding: 0 12px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; background: #0E1613; border: 2.5px solid var(--ink); color: var(--ticket); font-family: var(--mono); font-size: 22px; font-weight: 600; text-shadow: 0 0 10px rgba(239, 203, 82, 0.8); animation: arrive-ding 1.3s ease-in forwards; }
@keyframes arrive-left { to { transform: translateX(-101%); } }
@keyframes arrive-right { to { transform: translateX(101%); } }
@keyframes arrive-ding { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arrive { display: none; } }

/* ---- A certificate just issued: a slip that files itself ---- */

.toasts { position: fixed; top: 8px; left: 0; right: 0; z-index: 30; padding: 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { pointer-events: auto; width: min(100%, 430px); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2.5px solid var(--ink); border-radius: 0; background: var(--paper-form, var(--paper)); color: var(--ink); box-shadow: 4px 4px 0 rgba(23, 35, 31, 0.4); font: inherit; text-align: left; cursor: pointer; animation: toast-in 0.2s ease-out; transition: opacity 0.25s, transform 0.25s; }
.toast--unlisted { background: var(--ticket); }
.toast--voucher { background: var(--ticket); text-decoration: none; border-style: dashed; }
.toast--voucher .toast__label, .toast--voucher .toast__line { color: var(--ink); }
.toast--rank { background: var(--ink); color: var(--paper); text-decoration: none; border-color: var(--ticket); }
.toast--rank .toast__label { color: var(--ticket); }
.toast--rank .toast__line { color: #C8D5C5; }
.toast__unlock { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ticket); }
.toast.is-leaving { opacity: 0; transform: translateY(-10px); }
.toast__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toast__label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.toast--unlisted .toast__label { color: var(--ink); }
.toast__title { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.04; }
.toast__line { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.toast .stamp { font-size: 13px; animation: cert-stamp 0.22s 0.14s ease-in backwards; }
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast .stamp { animation: none; transition: none; } }

/* ---- A certificate, in full ---- */

.cert { width: min(358px, calc(100vw - 32px)); padding: 0; border: 0; background: transparent; color: var(--ink); }
.cert::backdrop { background: rgba(23, 35, 31, 0.72); }
.cert[open] { display: flex; flex-direction: column; gap: 10px; }
.cert__form { background: var(--paper-form, var(--paper)); border: 2.5px solid var(--ink); padding: 5px; }
.cert[open] .cert__form { animation: cert-in 0.18s ease-out; }
.cert__top { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--ink); border-bottom: 0; font-size: 11px; color: var(--muted); }
.cert__body { position: relative; border: 1.5px solid var(--ink); padding: 34px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cert__body h2 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.cert__stamp { position: absolute; right: 10px; top: 8px; font-size: 18px; }
.cert__unlisted { position: absolute; left: 12px; top: 12px; padding: 1px 6px; background: var(--ink); color: var(--ticket); font-size: 11px; }
.cert__unlisted[hidden] { display: none; }
.cert--unlisted .cert__form { background: var(--ticket); }
.cert[open] .cert__stamp { animation: cert-stamp 0.22s 0.12s ease-in backwards; }
@keyframes cert-in { from { transform: translateY(10px); opacity: 0; } }
@keyframes cert-stamp { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cert[open] .cert__form, .cert[open] .cert__stamp { animation: none; } }

/* ---- The profile: an Applicant's dossier ---- */

.dossier__seen { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dossier__seen i { flex-shrink: 0; width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 50%; }
.dossier__seen.is-here { color: var(--ink); }
.dossier__seen.is-here i { border-color: var(--ink); background: #3FA86B; }
.dossier__line { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--ink); color: var(--night-text); font-size: 16px; line-height: 1.35; font-style: italic; }
.dossier__line .mono { color: var(--ticket); font-size: 11px; font-style: normal; }
.dossier__figures { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dossier__figures > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--paper); border: 2px solid var(--ink); }
.dossier__figures dd { margin: 0; font-family: var(--mono); font-size: 32px; font-weight: 600; line-height: 1; }
.dossier__figures dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dossier__standing { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dossier__standing a { min-height: 76px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--ticket); border: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.dossier__standing b { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 0.9; }
.dossier__standing b::before { content: '#'; font-size: 20px; vertical-align: 6px; }
.dossier__standing span { font-size: 13px; font-weight: 600; line-height: 1.15; }
.dossier__standing small { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400; }
.dossier__compare { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 2px solid var(--ink); }
.dossier__bar { display: flex; height: 22px; border: 2px solid var(--ink); background: var(--ground); }
.dossier__bar span { min-width: 0; }
.dossier__bar .is-theirs, .dossier__compare li.is-theirs::before { background: var(--stamp); }
.dossier__bar .is-both, .dossier__compare li.is-both::before { background: var(--ink); }
.dossier__bar .is-yours, .dossier__compare li.is-yours::before { background: var(--ticket); }
.dossier__compare ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.dossier__compare li { display: flex; align-items: center; gap: 6px; }
.dossier__compare li::before { content: ''; width: 12px; height: 12px; border: 1.5px solid var(--ink); }
.dossier__compare li b { font-family: var(--mono); }
.dossier__floor { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 2px solid var(--ink); }
.dossier__floor + .dossier__floor { margin-top: 8px; }
.dossier__floor ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dossier__floor li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 46px; align-items: center; gap: 10px; font-size: 14px; }
.dossier__floor li .mono { text-align: right; font-size: 12px; }
.dossier__certs .small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dossier__band { padding: 0 5px; border: 1.5px solid var(--ink); font-family: var(--mono); font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.dossier__band--rare { background: var(--ticket); }
.dossier__band--classified { background: var(--ink); color: var(--ticket); }

/* The sign-in sheet: who is in the building. */
.board--sheet li { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 60px; }
.board--sheet li:nth-child(1) .board__place { color: var(--muted); }
.board__photo { display: block; width: 44px; height: 44px; border: 1.5px solid var(--ink); background: var(--paper); line-height: 0; }
.board__photo svg { display: block; width: 100%; height: 100%; }
.board__when { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.board__dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--stamp); vertical-align: 1px; }
.board--out { border-style: dashed; }
.board--out .board__photo { filter: grayscale(1); opacity: 0.7; }
.board--out .board__when { color: var(--muted); }
a.chip--here { display: inline-flex; align-items: center; text-decoration: none; margin-left: auto; }
@media (max-width: 520px) { .board__when { font-size: 11px; white-space: normal; max-width: 84px; } a.chip--here { margin-left: 0; } }

/* The journal's page for the building: world certificates with their terms. */
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.world { min-height: 150px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; border: 2px dashed var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; }
.world b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.04; text-transform: uppercase; letter-spacing: 0.01em; }
.world__terms { font-size: 13.5px; line-height: 1.35; }
.world__standing { margin-top: auto; padding-top: 6px; border-top: 1.5px solid var(--rule); font-family: var(--mono); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.world--held { border-style: solid; border-color: var(--ink); background: var(--paper-form, var(--paper)); cursor: pointer; }
.world--held:hover { background: var(--ticket); }
.world .form__foot { margin-top: auto; }

/* The new Applicant's leaflet, and the outline on everything touchable until the first tap. */
.leaflet { padding: 10px 12px; background: var(--ticket); border: 2px solid var(--ink); }
.leaflet__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11.5px; }
.leaflet ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 6px; }
.leaflet li { counter-increment: step; position: relative; padding-left: 34px; font-size: 14px; line-height: 1.35; }
.leaflet li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 2px solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.leaflet li.is-done::before { content: "\2713"; background: var(--ink); color: var(--ticket); }
.leaflet li.is-done { color: var(--muted); }
.leaflet li.is-done b { text-decoration: line-through; }
.leaflet li b { display: block; }
.leaflet p { margin: 8px 0 0; }
.view.is-new .thing .hit { stroke: var(--stamp); stroke-width: 2; stroke-dasharray: 5 4; animation: beckon 1.6s ease-in-out infinite; }
@keyframes beckon { 50% { stroke-opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .view.is-new .thing .hit { animation: none; } }

/* Your File: the way into each open room, and the ticket under the sign. */
.doors__go { flex-shrink: 0; min-height: 32px; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.doors__go:hover, .doors__go:focus-visible { background: var(--ticket); }
.doors form { margin: 0; }
.sign__ticket { display: block; margin-top: 1px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }

/* The line under the room: how to play, and the sound switch. */
.play__hint { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.play__hint .link { flex-shrink: 0; }

/* Floor 3: things on timers show that they are running. */
.lt-timer-hand { transform-origin: 23px 27px; animation: f3-sweep 30s linear forwards; }
@keyframes f3-sweep { from { transform: rotate(-70deg); } to { transform: rotate(0deg); } }
.lt-ring, .lt-lamp, [data-object="microwave"] [data-s="running"], [data-object="fridge"] [data-s="alarm"], [data-object="door"] [data-s="alarm"] { animation: f3-blink 0.7s steps(2, jump-none) infinite; }
@keyframes f3-blink { to { opacity: 0.35; } }
.lt-dangle { transform-box: fill-box; transform-origin: 50% 0; animation: f3-sway 1.8s ease-in-out infinite alternate; }
@keyframes f3-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .lt-timer-hand, .lt-ring, .lt-lamp, .lt-dangle, [data-object="microwave"] [data-s="running"], [data-object="fridge"] [data-s="alarm"], [data-object="door"] [data-s="alarm"] { animation: none; } }

/* ---- The building directory as the public reads it: the same boards, hung at full length ---- */
.public-dir { padding-top: 22px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.public-dir__intro { max-width: 720px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.public-dir__intro h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
.public-dir__intro .btn { display: inline-block; width: auto; padding-left: 28px; padding-right: 28px; }
.public-dir__back { margin-left: 12px; font-weight: 600; }
.public-dir__boards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 860px) { .public-dir__boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dir--open .dir__list { max-height: none; overflow: visible; }
.dir--open .dir__head { margin: 0; }
.public-dir__foot { text-align: center; }