/* The shell around the room: top bar, pages, controls, the sheet and the panel.
   Reference: docs/style-sheet.html section 09. Tokens are --s-*; the room itself has its own light (stage.css).
   Evening is the default. A few lines of script in the page head set data-time on the html element from the
   viewer's own clock; "day" switches the shell to daylight. No script, no attribute: evening.
   Bootstrap is still the markup vocabulary (btn, form-control, alert...). The rules below restyle those classes from
   the tokens, so every page, including the sign-in pages, takes on the same look without being rewritten. */

:root {
  --s-bg: #1B242D;      --s-surface: #26313C;  --s-raised: #313E4B;  --s-line: #44525F;  --s-edge: #738190;
  --s-ink: #F3EEE2;     --s-ink-2: #C5CDD5;    --s-ink-3: #9BA7B2;
  --s-accent: #E5BD62;  --s-accent-ink: #1B242D; --s-focus: #FFD9A0;
  --s-danger: #F0907D;  --s-ok: #93CBA3;
  --s-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 10px 24px rgba(0,0,0,0.3);
  --sans: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
[data-time="day"] {
  --s-bg: #ECEEEF;      --s-surface: #FAF7EF;  --s-raised: #FFFFFF;  --s-line: #D8D1BE;  --s-edge: #8B8574;
  --s-ink: #1B242D;     --s-ink-2: #46535F;    --s-ink-3: #5F6B76;
  --s-accent: #7C5B12;  --s-accent-ink: #FFFFFF; --s-focus: #7C5B12;
  --s-danger: #A63A2B;  --s-ok: #2F6B45;
  --s-shadow: 0 1px 1px rgba(30,40,50,0.12), 0 8px 20px rgba(30,40,50,0.14);
  color-scheme: light;
}

html { background: var(--s-bg); }
body { margin: 0; background: var(--s-bg); color: var(--s-ink); font: 400 1rem/1.5 var(--serif); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--s-ink); margin: 0 0 0.6rem; }
h1 { font-size: 1.9rem; }
h2, .h4 { font-size: 1.3rem; }
h3, .h5 { font-size: 1.1rem; }
.h6, h6 { font-size: 0.74rem; letter-spacing: 0.1em; font-family: var(--mono); font-weight: 400; color: var(--s-ink-3); }
p { margin: 0 0 0.8rem; }
a { color: var(--s-accent); text-underline-offset: 2px; }
code { font-family: var(--mono); color: var(--s-ink); background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--s-line); opacity: 1; margin: 1rem 0; }
.text-muted, .form-text { color: var(--s-ink-3) !important; }
.text-danger { color: var(--s-danger) !important; }
.text-white-50 { color: var(--s-ink-3) !important; }
small, .small { font-size: 0.85rem; }
.lead { font-size: 1.15rem; font-weight: 400; color: var(--s-ink-2); }
h1:focus { outline: none; }
:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }
::selection { background: var(--s-accent); color: var(--s-accent-ink); }

/* ---------- Bootstrap, restyled from the tokens ---------- */
.btn {
  font: 600 0.95rem var(--sans); padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid var(--s-edge);
  background: transparent; color: var(--s-ink); line-height: 1.3; transition: none;
}
.btn:hover { background: var(--s-raised); color: var(--s-ink); border-color: var(--s-edge); }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: none; outline: 2px solid var(--s-focus); outline-offset: 2px; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; border-radius: 8px; }
.btn-lg { padding: 0.7rem 1.2rem; font-size: 1.05rem; border-radius: 10px; }
.btn-primary, .btn-primary:focus { background: var(--s-accent); color: var(--s-accent-ink); border-color: transparent; }
.btn-primary:hover, .btn-primary:active { background: var(--s-accent); color: var(--s-accent-ink); border-color: transparent; filter: brightness(1.08); }
.btn-outline-primary, .btn-outline-secondary { color: var(--s-ink); background: transparent; border-color: var(--s-edge); }
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--s-raised); color: var(--s-ink); border-color: var(--s-edge); }
.btn-outline-primary.active, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active, .btn-outline-secondary:active { background: var(--s-accent); color: var(--s-accent-ink); border-color: transparent; }
.btn-outline-danger { color: var(--s-danger); border-color: var(--s-danger); background: transparent; }
.btn-outline-danger:hover { background: var(--s-danger); color: var(--s-bg); border-color: var(--s-danger); }
.btn-danger, .btn-danger:focus { background: var(--s-danger); color: var(--s-bg); border-color: transparent; }
.btn-danger:hover { background: var(--s-danger); color: var(--s-bg); filter: brightness(1.08); }
.btn-link { color: var(--s-accent); border-color: transparent; }
.btn:disabled, .btn.disabled { opacity: 0.45; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-close { filter: invert(1); opacity: 0.8; }
[data-time="day"] .btn-close { filter: none; }

.form-control, .form-select {
  font: 400 1rem var(--serif); color: var(--s-ink); background-color: var(--s-raised); border: 1px solid var(--s-edge); border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.form-control::placeholder { color: var(--s-ink-3); opacity: 1; }
.form-control:focus, .form-select:focus { color: var(--s-ink); background-color: var(--s-raised); border-color: var(--s-focus); }
.form-control:disabled, .form-select:disabled { background-color: var(--s-surface); opacity: 0.6; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239BA7B2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.form-label, .form-floating > label { font: 600 0.85rem var(--sans); color: var(--s-ink-2); }
.form-floating > .form-control { padding-top: 1.6rem; padding-bottom: 0.5rem; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--s-ink-3); opacity: 1; }
.form-check-input { background-color: var(--s-raised); border: 1px solid var(--s-edge); }
.form-check-input:checked { background-color: var(--s-accent); border-color: var(--s-accent); }
.darker-border-checkbox.form-check-input { border-color: var(--s-edge); }
.input-group-text { background: var(--s-surface); color: var(--s-ink-2); border: 1px solid var(--s-edge); }

.card { background: var(--s-surface); color: var(--s-ink); border: 1px solid var(--s-line); border-radius: 12px; box-shadow: var(--s-shadow); }
.card-body { padding: 1rem 1.1rem; }
.alert { border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.92rem; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink-2); }
.alert-warning, .alert-danger { border-color: var(--s-danger); color: var(--s-danger); }
.alert-success { border-color: var(--s-ok); color: var(--s-ok); }
.alert-info { border-color: var(--s-edge); color: var(--s-ink-2); }
.badge { font: 600 0.72rem var(--mono); letter-spacing: 0.04em; padding: 0.15rem 0.55rem; border-radius: 999px; background: transparent !important; border: 1px solid var(--s-edge); color: var(--s-ink-2); }
.badge.bg-success { color: var(--s-ok); border-color: var(--s-ok); }

.table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; width: 100%; border-collapse: collapse; color: var(--s-ink-2); font-size: 0.92rem; }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-bottom: 1px solid var(--s-line); padding: 0.55rem 0.5rem; box-shadow: none; }
.table thead th { font: 400 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink-3); border-bottom-color: var(--s-line); }
.table td:first-child { color: var(--s-ink); font-weight: 600; font-family: var(--sans); }

.nav-pills .nav-link { color: var(--s-ink-2); border-radius: 8px; }
.nav-pills .nav-link:hover { color: var(--s-ink); background: var(--s-raised); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--s-accent); color: var(--s-accent-ink); }

.validation-message { color: var(--s-danger); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--s-ok); }
.invalid { outline: 1px solid var(--s-danger); }

/* ---------- layouts ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell-top {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem max(1rem, env(safe-area-inset-right, 0px)) 0.55rem max(1rem, env(safe-area-inset-left, 0px));
  min-height: 3.2rem; background: var(--s-surface); border-bottom: 1px solid var(--s-line);
}
.shell-top.wrap { flex-wrap: wrap; }
.shell-name { font: 800 1.05rem var(--sans); letter-spacing: -0.01em; color: var(--s-ink); text-decoration: none; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shell-name:hover { color: var(--s-accent); }
.shell-nav { display: flex; gap: 1.1rem; margin-right: auto; margin-left: 0.4rem; flex-wrap: wrap; }
.shell-nav a { font: 600 0.92rem var(--sans); color: var(--s-ink-2); text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.shell-nav a:hover { color: var(--s-ink); }
.shell-nav a.active { color: var(--s-ink); border-bottom-color: var(--s-accent); }
.shell-who { display: inline-flex; align-items: center; gap: 0.4rem; font: 600 0.85rem var(--sans); color: var(--s-ink-2); text-decoration: none; border: 1px solid var(--s-edge); border-radius: 999px; padding: 0.15rem 0.7rem 0.15rem 0.2rem; max-width: 12rem; }
.shell-who b { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--s-raised); color: var(--s-ink); font-size: 0.8rem; }
.shell-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-form { display: inline; margin: 0; flex: none; }
@media (max-width: 480px) { .shell-who { max-width: 8.5rem; } }
.shell-link { white-space: nowrap; background: none; border: 0; padding: 0.35rem 0.1rem; font: 600 0.85rem var(--sans); color: var(--s-ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.shell-link:hover { color: var(--s-ink); }
.shell-dev { font: 400 0.72rem var(--mono); color: var(--s-ink-3); white-space: nowrap; }
.shell-dev a { color: var(--s-ink-3); }

.shell-body { flex: 1; width: 100%; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) 2rem max(1rem, env(safe-area-inset-left, 0px)); }
.shell-page { max-width: 46rem; margin: 0 auto; }
.shell-page.wide { max-width: 68rem; }
.shell-page.room { max-width: none; } /* the room scales with the screen; see .room-grid > .room-main */
.shell-centre { max-width: 26rem; margin: 0 auto; text-align: center; padding-top: 2.5rem; }
.shell-centre form { text-align: left; }

#blazor-error-ui {
  background: var(--s-surface); color: var(--s-ink); border-top: 2px solid var(--s-danger); bottom: 0; display: none; left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: var(--s-danger); padding: 1rem; color: var(--s-bg); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- front door ---------- */
.door-tree { width: 4.6rem; height: auto; overflow: visible; margin: 0 auto 0.6rem; display: block; }
.door-code { display: flex; gap: 0.5rem; }
.door-code .form-control { font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; flex: 1; min-width: 0; }

/* ---------- the room page ---------- */
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.room-main { min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; }

/* Fit. The room is a fixed 16:10 shape, so it is as wide as the screen allows, but never so wide that it is taller than the
   window leaves room for. The 11rem is what is around it: the top bar, the page padding and the bar under the room. Everything
   inside the room is sized from its own width, so it scales as one piece. The bar under it stays the same width as the room. */
.room-grid > .room-main {
  width: min(100%, max(18rem, calc((100vh - 11rem) * 1.6)));
  width: min(100%, max(18rem, calc((100dvh - 11rem) * 1.6)));
  justify-self: center;
}
.room-bar .fs-exit { display: none; }
.room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.room-bar-text { margin-right: auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.room-bar { font-size: 1rem; }
.room-bar .room-hint { margin: 0; color: var(--s-ink-3); font-size: 0.9em; }

/* the words that go with the countdown sign on the wall (see wwwroot/countdown.js) */
.cd-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.45rem; margin: 0; min-width: 0; color: var(--s-ink); }
.cd-caption:empty { display: none; }
.cd-caption b { font: 800 1em var(--sans); letter-spacing: -0.01em; }
.cd-caption span { font: 400 0.86em var(--serif); color: var(--s-ink-3); }
.room-waiting {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; border-radius: 10px; width: 100%;
  background: var(--s-surface); border: 1px solid var(--s-accent); color: var(--s-ink); font: 600 0.95rem var(--sans); text-align: left; cursor: pointer;
}
.room-waiting span { margin-left: auto; color: var(--s-accent); }
.room-waiting:hover { background: var(--s-raised); }

/* ---------- full screen (see wwwroot/fullscreen.js) ----------
   data-full is set on the room view for both the browser's real full screen and the iPhone fallback (data-immersive, a fixed
   overlay). The backdrop is always dark, so the tokens are forced to evening whatever the time of day. */
.room-grid[data-full] {
  --s-bg: #1B242D; --s-surface: #26313C; --s-raised: #313E4B; --s-line: #44525F; --s-edge: #738190;
  --s-ink: #F3EEE2; --s-ink-2: #C5CDD5; --s-ink-3: #9BA7B2; --s-accent: #E5BD62; --s-accent-ink: #1B242D; --s-focus: #FFD9A0;
  --s-danger: #F0907D; --s-ok: #93CBA3;
  color-scheme: dark; color: var(--s-ink);
  display: flex; align-items: center; justify-content: center; gap: 1rem; box-sizing: border-box; padding: 0.5rem 1rem;
  background: #0A0F14; overflow: auto;
}
.room-grid[data-immersive] { position: fixed; inset: 0; z-index: 850; }
.room-grid[data-full] > .room-main {
  width: min(100%, calc((100vh - 5.5rem) * 1.6));
  width: min(100%, calc((100dvh - 5.5rem) * 1.6));
  flex: 0 1 auto;
}
.room-grid[data-full] > .sheet { flex: none; }
.room-grid[data-full] .room-bar { font-size: max(1rem, 1.05vw); }
.room-grid[data-full] .fs-enter { display: none; }
.room-grid[data-full] .fs-exit { display: inline; }
.room-grid[data-full] .room-bar, .room-grid[data-full] .room-waiting { transition: opacity 0.4s; }
.room-grid[data-full][data-idle] { cursor: none; }
.room-grid[data-full][data-idle] .room-bar { opacity: 0; }

/* the sheet: a bottom sheet on a phone, a column beside the room from 960px */
.sheet-scrim { position: fixed; inset: 0; background: rgba(8, 12, 16, 0.5); z-index: 900; border: 0; padding: 0; cursor: default; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 910; max-height: min(78vh, 40rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--s-surface); border-top: 1px solid var(--s-line); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,0.45);
  padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) max(1.1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  animation: sheetUp 0.22s ease-out both;
}
.sheet:focus { outline: none; }
.sheet-grab { width: 2.6rem; height: 4px; border-radius: 2px; background: var(--s-edge); margin: 0 auto 0.5rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
@keyframes sheetUp { from { transform: translateY(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 960px) {
  .room-grid.has-panel { grid-template-columns: minmax(0, 1fr) 21rem; }
  .sheet-scrim { display: none; }
  .sheet {
    position: sticky; top: 1rem; z-index: auto; max-height: calc(100vh - 2rem); border: 1px solid var(--s-line); border-radius: 12px;
    box-shadow: var(--s-shadow); padding: 1rem 1.1rem; animation: none;
  }
  .sheet-grab { display: none; }

  /* Reading something is an overlay on the room, not a column: a card needs the width, and the room stays visible behind. */
  .sheet-scrim.over { display: block; background: rgba(8, 12, 16, 0.4); }
  .sheet.sheet-over {
    position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); z-index: 910;
    width: min(36rem, 92vw); max-height: 90vh; padding: 1.1rem 1.3rem 1.3rem; box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    animation: popIn 0.18s ease-out both;
  }
}
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -47%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- composer (inside the sheet) ---------- */
.composer { display: flex; flex-direction: column; gap: 0.9rem; }
.composer .composer-preview { align-self: center; width: 5rem; }
.composer .composer-preview svg { width: 100%; height: auto; display: block; overflow: visible; }
.composer .chips, .composer .swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.composer .chip { width: 2.9rem; height: 2.9rem; padding: 0.3rem; border-radius: 10px; border: 1px solid var(--s-edge); background: var(--s-raised); cursor: pointer; }
.composer .chip svg { width: 100%; height: 100%; display: block; overflow: visible; }
.composer .chip.on { border-color: var(--s-accent); box-shadow: 0 0 0 2px var(--s-accent); }
.composer .swatch { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid rgba(0,0,0,0.3); background: var(--c-main); cursor: pointer; padding: 0; }
.composer .swatch.on { outline: 2px solid var(--s-focus); outline-offset: 2px; }
.composer .btn-group { display: flex; }
.composer .btn-group > .btn { flex: 1; }
.composer-submit { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.invite-link { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.invite-link code { overflow-wrap: anywhere; min-width: 0; flex: 1 1 14rem; }

.reader-panel .message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) { .sheet, .sheet.sheet-over { animation: none; } }