/* Home, drawn as an LCD watch face that FITS THE SCREEN. Everything is sized in em from one unit, --u, so the whole face scales as one piece:
   - stacked (small or portrait windows): a scrolling two-column page, fixed 13 px unit;
   - fit (from 1200 x 620): one 120 x 58 unit face with no scrolling, scaled to the window;
   - large monitors (from 1800 x 900): a 168 x 78 unit face that shows more (tool descriptions, the Seat Studio plan, a taller Today strip) at the same readable text size.
   Day is a lit LCD, night a backlit one. Loaded after relay.css. Every animation is inside prefers-reduced-motion: no-preference. */
body[data-room-theme] .module-view.home-view, .module-view.home-view { display: block; overflow-y: auto; height: calc(100vh - 56px); background: #0E1819; color: #EDE4CB; --lcd-bg: #A9E89B; --lcd-ink: #0A1A0B; --lcd-dim: #2D5A32; --lcd-rule: #0A1A0B; --u: 13px; color-scheme: light; }
body[data-mode=dark][data-room-theme] .module-view.home-view, body[data-mode=dark] .module-view.home-view { background: #080E0F; --lcd-bg: #0C2210; --lcd-ink: #B3F7A3; --lcd-dim: #84CF7C; --lcd-rule: #3F8A45; color-scheme: dark; }
.home-wrap { max-width: 1100px; margin: 0 auto; padding: 14px 14px 40px; font-size: var(--u); }
.hc-icon { display: inline-block; width: 2em; height: 2em; flex: none; background: currentColor; -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; }
.hc-icon.sm { width: 1.4em; height: 1.4em; }

/* ---------- the case: top strip, screen, bottom strip ---------- */
.lcd { background: #162122; border: 1px solid rgb(237 228 203 / .28); border-radius: 2.2em; padding: .9em 1.1em .8em; box-shadow: inset 0 0 0 .4em #162122, inset 0 0 0 calc(.4em + 1px) rgb(237 228 203 / .16); }
.lcd-top { display: flex; align-items: center; gap: 1.6em; padding: .1em .8em .8em; color: #EDE4CB; flex-wrap: wrap; }
.home-bands { height: 5.4em; width: auto; flex: none; overflow: hidden; pointer-events: none; }
.home-bands .b-lit { display: none; }
.lcd-id { display: flex; flex-direction: column; gap: .35em; flex: none; }
.lcd-brand { font: 800 1.9em/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.lcd-proto { font: 700 .95em var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: #AFC48B; white-space: nowrap; }
.home-hello { flex: 1 1 18em; min-width: 0; }
.home-view .home-board { display: inline-flex; align-items: center; justify-content: center; gap: .7em; flex: none; min-height: max(28px, 3em); padding: 0 1.3em; background: #EDE4CB !important; color: #162122 !important; border: 1px solid #EDE4CB !important; border-radius: 5px; box-shadow: none !important; font: 800 1.15em var(--font); letter-spacing: .02em; translate: none; }
.home-topright { display: flex; flex-direction: column; gap: .5em; flex: none; align-items: stretch; }
.home-backup { display: flex; gap: .5em; }
.lcd-bottom .home-backup { margin-left: auto; }
.lcd-now .home-backup .home-sm { flex: 1 1 0; }
.home-view .home-sm { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: max(24px, 2.3em); padding: 0 .8em; background: transparent !important; color: #EDE4CB !important; border: 1px solid rgb(237 228 203 / .5) !important; border-radius: 5px; box-shadow: none !important; font: 700 .95em var(--font); white-space: nowrap; translate: none; }
.home-view .home-sm:hover:not(:disabled), .home-view .home-sm:focus-visible { background: rgb(237 228 203 / .16) !important; border-color: #EDE4CB !important; }
.home-view .home-board:hover:not(:disabled), .home-view .home-board:focus-visible { background: #FFFBEF !important; }
.home-view .home-board .hc-icon { background: #162122; }
.home-date { margin: 0 0 .2em; font: 700 .95em var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #AFC48B; }
.home-title { margin: 0; font: 800 2.5em/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: #EDE4CB; }
.home-sub { margin: .35em 0 0; color: #C9D3B8; font-size: 1.15em; line-height: 1.35; }
.lcd-screen { position: relative; background: var(--lcd-bg); border: 3px solid #050A0A; border-radius: 1em; overflow: hidden; color: var(--lcd-ink); }
.lcd-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5em 1.4em; padding: .8em .8em .1em; color: #EDE4CB; min-height: 2.2em; }
.lcd-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .3em 1.2em; font: 700 .95em var(--font-mono); letter-spacing: .32em; text-transform: uppercase; }
.lcd-legend i { width: .7em; height: .7em; background: #6BB6B0; display: block; } .lcd-legend i:nth-of-type(2) { background: #AFC48B; } .lcd-legend i:nth-of-type(3) { background: #E8BB56; } .lcd-legend i:nth-of-type(4) { background: #C4623A; }

/* ---------- the grid: 60 columns so every row divides exactly ---------- */
.lcd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--lcd-rule); }
.lcd-cell { background: var(--lcd-bg); color: var(--lcd-ink); padding: .9em 1.1em 1em; min-width: 0; display: flex; flex-direction: column; gap: .55em; border: 0; border-radius: 0; box-shadow: none; grid-column: span 2; }
.home-card[data-mod=namedrop], .home-card[data-mod=timer], .home-card[data-mod=groupmaker] { grid-column: span 1; }
.lcd-label { margin: 0; font: 700 1em var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--lcd-dim); display: block; }
.lcd-big { margin: 0; font: 800 2.4em/1.08 var(--font-display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.lcd-big.small { font-size: 1.8em; }
.lcd-sub, .home-classline, .hc-line { margin: 0; font: 600 1.05em/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lcd-dim); }
.lcd-room { margin: 0; font: 700 1.2em var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.lcd-row { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; }
.lcd-clockrow { display: flex; align-items: flex-end; gap: 1.3em; padding: .2em 0; }
.lcd-ampm { font: 800 1.3em var(--font-mono); letter-spacing: .08em; align-self: flex-end; padding-bottom: .4em; }
.lcd-seg { display: inline-flex; align-items: center; gap: calc(var(--h, 40px) * .1); height: var(--h, 40px); color: var(--lcd-ink); transform: skewX(-7deg); transform-origin: 50% 100%; }
.lcd-seg svg { height: 100%; width: auto; display: block; fill: currentColor; overflow: visible; }
.lcd-seg .g { opacity: .1; } .lcd-seg .g.on { opacity: 1; }
.lcd-gauge { display: flex; gap: 2px; height: 1.2em; align-items: stretch; }
.lcd-gauge i { flex: 1 1 0; max-width: 1em; background: var(--lcd-ink); opacity: .13; } .lcd-gauge i.on { opacity: 1; }

/* keys, fields, chips */
.home-view .lcd-screen button { background: transparent !important; color: var(--lcd-ink) !important; border: 2px solid var(--lcd-ink) !important; border-radius: 3px; box-shadow: none !important; font: 700 1.05em var(--font-mono); letter-spacing: .08em; text-transform: uppercase; min-height: max(24px, 2.6em); padding: 0 .9em; translate: none; }
.home-view .lcd-screen button:hover:not(:disabled), .home-view .lcd-screen button:focus-visible { background: var(--lcd-ink) !important; color: var(--lcd-bg) !important; }
.home-view .lcd-screen button:disabled { opacity: .4; }
.home-view .lcd-screen .hc-open { background: var(--lcd-ink) !important; color: var(--lcd-bg) !important; width: 100%; justify-content: center; margin-top: auto; }
.home-view .lcd-screen .hc-open:hover:not(:disabled) { background: transparent !important; color: var(--lcd-ink) !important; }
.home-view .lcd-screen .hc-open::after { content: "\2192"; margin-left: .6em; }
.home-view .lcd-screen select { width: 100%; min-height: max(24px, 2.6em); background: transparent !important; color: var(--lcd-ink) !important; border: 2px solid var(--lcd-ink) !important; border-radius: 3px; font: 700 1.05em var(--font-mono); letter-spacing: .05em; text-transform: uppercase; box-shadow: none; appearance: auto; }
.home-view .lcd-screen select option { background: var(--lcd-bg); color: var(--lcd-ink); }
.hc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.hc-actions .hc-btn { min-width: 0; padding: 0 .4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tile name" "tile chip"; align-items: center; column-gap: .8em; row-gap: .3em; min-width: 0; }
.hc-tile { grid-area: tile; display: grid; place-items: center; width: 3.2em; height: 3.2em; background: var(--c); color: #0A1A0B; border: 2px solid var(--lcd-ink); border-radius: 3px; flex: none; }
.hc-name { grid-area: name; margin: 0; font: 800 1.45em/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .04em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
.hc-chip { grid-area: chip; justify-self: start; align-self: start; font: 700 .9em var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: .1em .5em; border: 2px solid var(--lcd-ink); color: var(--lcd-ink); border-radius: 2px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hc-chip.warn { background: var(--lcd-ink); color: var(--lcd-bg); }
.hc-body { display: grid; gap: .35em; align-content: start; min-width: 0; }
.hc-desc { margin: 0; line-height: 1.4; font-size: 1.2em; }
.hc-plan { border: 2px solid var(--lcd-ink); border-radius: 3px; min-height: 8em; display: grid; place-items: center; overflow: hidden; background: var(--lcd-bg); }
.hc-plan.bd-planhost { min-height: 11em; }
.hc-plan svg { width: 100%; height: 100%; max-height: 18em; display: block; }
.hc-empty { margin: 0; font: 600 1em var(--font-mono); color: var(--lcd-dim); text-transform: uppercase; }
.lcd-progress { margin-top: .1em; }

/* Today: the whole day as a strip of periods (a list when stacked) */
.lt-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.home-view .lcd-screen .lt-edit { min-height: max(24px, 2.2em); }
.lt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-list li { min-width: 0; display: flex; }
.home-view .lcd-screen .lt-item { width: 100%; display: grid; grid-template-columns: 7.5em 1fr auto; align-items: center; gap: .8em; text-align: left; padding: .35em .8em; }
.lt-time, .lt-room { font: 700 .95em var(--font-mono); letter-spacing: .04em; white-space: nowrap; }
.lt-name { font: 800 1.15em var(--font-display); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-view .lcd-screen .lt-item[data-state=past] { border-color: var(--lcd-dim) !important; color: var(--lcd-dim) !important; font-weight: 600; }
.home-view .lcd-screen .lt-item[data-state=now] { background: var(--lcd-ink) !important; color: var(--lcd-bg) !important; }
.home-view .lcd-screen .lt-item[data-state=next] { box-shadow: inset 0 0 0 2px var(--lcd-ink) !important; }

/* Needs attention: chips in the bottom strip (parchment on the dark case) */
.home-alerts { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; color: #EDE4CB; }
.home-alerts .lcd-label { color: #E3A07F; margin: 0; }
.ha-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.home-view .home-alerts .ha-item { display: inline-flex; align-items: center; gap: .7em; min-height: max(24px, 2.4em); padding: 0 .9em; background: transparent !important; color: #EDE4CB !important; border: 1px solid #E3A07F !important; border-radius: 4px; font: 650 1em var(--font-mono); letter-spacing: .04em; text-transform: none; cursor: pointer; }
.home-view .home-alerts .ha-item:hover { background: rgb(227 160 127 / .18) !important; }
.home-alerts .ha-ok { display: inline-flex; align-items: center; min-height: max(24px, 2.4em); padding: 0 .9em; border: 1px solid rgb(237 228 203 / .35); border-radius: 4px; font: 650 1em var(--font-mono); letter-spacing: .04em; color: #C9D3B8; }
.ha-item strong { font-weight: 800; } .ha-go { font-weight: 800; color: #E3A07F; }

/* ---------- timetable editor ---------- */
dialog.tt { width: min(800px, calc(100vw - 24px)); max-height: calc(100vh - 48px); overflow: auto; padding: 20px 22px; }
.tt .dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tt-lead { color: var(--muted); margin: 8px 0 14px; max-width: 62ch; line-height: 1.5; }
.tt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tt-row { display: grid; grid-template-columns: 112px 112px minmax(130px, 1fr) 96px minmax(110px, 1fr) auto; gap: 8px 10px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.tt-days { display: flex; gap: 4px; flex-wrap: wrap; grid-column: 1 / -1; }
.tt-day { min-width: 42px; min-height: 36px; padding: 0 6px; font: 700 11px var(--font-mono); letter-spacing: .04em; }
.tt-day[aria-pressed=true] { background: var(--mod) !important; color: #202D2C !important; border-color: #202D2C !important; }
.tt-f { display: grid; gap: 4px; min-width: 0; } .tt-f span { font: 700 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tt-f input, .tt-f select { width: 100%; min-height: 36px; }
.tt-empty { color: var(--muted); padding: 14px 0; margin: 0; }
.tt-compass { display: grid; gap: 10px; padding: 12px 0 14px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); margin-bottom: 4px; }
.tt-crow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tt-help { margin: 0; padding: 8px 10px; border-left: 4px solid var(--mod, #9FB4C7); background: color-mix(in srgb, var(--mod, #9FB4C7) 18%, var(--raised)); color: var(--ink); font-size: 13px; line-height: 1.45; border-radius: 0 4px 4px 0; }
.tt-saved { margin: 0; padding: 7px 10px; font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--ink); background: color-mix(in srgb, var(--ok, #2F6B3A) 14%, var(--raised)); border-left: 4px solid var(--ok, #2F6B3A); border-radius: 0 4px 4px 0; }
.tt-saved[hidden] { display: none; }
.tt-snote { margin: 0; min-height: 1.3em; font-weight: 650; } .tt-snote.bad { color: #8A3B1D; } body[data-mode=dark] .tt-snote.bad { color: #E3A07F; }
.tt-priv { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; max-width: 72ch; }
.tt-auto { color: var(--ink); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.tt-auto input { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; }
.tt-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; }
.tt-msg { flex: 1; min-width: 160px; margin: 0; font-weight: 700; color: #8A3B1D; } body[data-mode=dark] .tt-msg { color: #E3A07F; }
.tt-msg:empty { display: none; }


/* ---------- fit: one face, no scrolling (laptops and up) ---------- */
@media (min-width: 1200px) and (min-height: 620px) {
  body[data-room-theme] .module-view.home-view, .module-view.home-view { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; --W: 120; --H: 58; --pad: 12px; --u: min(calc((100vw - 2 * var(--pad)) / var(--W)), calc((100vh - 56px - 2 * var(--pad)) / var(--H))); }
  .home-wrap { width: calc(var(--u) * var(--W)); height: calc(var(--u) * var(--H)); max-width: none; padding: 0; margin: 0; }
  .lcd { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .lcd-top { flex-wrap: nowrap; }
  .home-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lcd-screen { min-height: 0; display: flex; }
  .lcd-grid { flex: 1; min-height: 0; grid-template-columns: repeat(60, minmax(0, 1fr)); grid-template-rows: 17.5fr 10.5fr 20fr; }
  .lcd-cell { grid-column: span 12; overflow: hidden; padding: .75em 1em .85em; gap: .4em; }
  .lcd-now { grid-column: span 24; } .lcd-next { grid-column: span 14; } .lcd-clock { grid-column: span 22; }
  .lcd-class { grid-column: span 20; } .lcd-today { grid-column: span 40; }
  .home-card[data-mod] { grid-column: span 12; }
  .hc-extra { display: none; }
  .lcd-big { font-size: 2.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lcd-big.small { font-size: 1.6em; }
  .lcd-clockrow { padding: 0; }
  .lcd-datelong { margin-top: auto; }
  .lcd-today { flex-direction: row; align-items: stretch; gap: .9em; }
  .lt-head { flex-direction: column; align-items: flex-start; justify-content: space-between; flex: none; width: 9.5em; gap: .4em; }
  .lt-list { flex-direction: row; flex: 1; min-width: 0; min-height: 0; }
  .lt-list li { flex: 1 1 0; }
  .home-view .lcd-screen .lt-item { grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "t r" "n n"; gap: .15em .5em; align-items: start; padding: .35em .6em; height: 100%; min-height: 0; overflow: hidden; }
  .lt-time { grid-area: t; font-size: .9em; } .lt-room { grid-area: r; font-size: .9em; } .lt-name { grid-area: n; }
  .lt-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; font-size: 1.05em; }
  .lcd-cell > * { flex-shrink: 0; } .lcd-cell > .lt-list { flex-shrink: 1; }
}
/* ---------- large monitors: the same readable text, with room for more ---------- */
@media (min-width: 1800px) and (min-height: 900px) {
  body[data-room-theme] .module-view.home-view, .module-view.home-view { --W: 168; --H: 78; --pad: 14px; }
  .lcd-grid { grid-template-rows: 16.5fr 12fr 34.5fr; }
  .hc-extra { display: block; }
  .home-card[data-mod=seating] .hc-body { flex: 1; min-height: 0; grid-template-rows: auto auto 1fr; }
  .hc-plan { min-height: 0; }
  .home-sub { white-space: normal; }
  .lcd-big { font-size: 2.5em; } .lcd-big.small { font-size: 1.9em; }
  .lt-list { align-items: stretch; }
  .home-view .lcd-screen .lt-item { padding: .7em .9em; }
  .lt-name { -webkit-line-clamp: 3; font-size: 1.3em; }
}
/* ---------- stacked: small or portrait windows scroll ---------- */
@media (max-width: 1199px), (max-height: 619px) {
  .home-sub { white-space: normal; }
  .home-card[data-mod=seating], .home-card[data-mod=noise] { grid-column: span 2; }
  .home-card[data-mod=seating] .hc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-card[data-mod=seating] .hc-plan { grid-column: 2; grid-row: 1 / span 3; }
}
@media (min-width: 640px) and (max-width: 1199px), (min-width: 640px) and (max-height: 619px) { .lcd-now, .lcd-next, .lcd-clock, .lcd-class { grid-column: span 1; } }
@media (max-width: 760px) { .home-wrap { padding: 10px 10px 40px; } .home-bands { height: 4.4em; } .lcd-brand { font-size: 1.5em; } .lcd-proto { letter-spacing: .2em; } .home-title { font-size: 2em; } .lcd-legend { letter-spacing: .2em; } }
@media (max-width: 560px) {
  .lcd-grid { grid-template-columns: 1fr; } .lcd-cell, .home-card[data-mod] { grid-column: span 1 !important; }
  .home-card[data-mod=seating] .hc-body { grid-template-columns: 1fr; } .home-card[data-mod=seating] .hc-plan { grid-column: 1; grid-row: auto; }
  .lcd { border-radius: 1.6em; padding: .7em .7em .6em; } .lcd-top { gap: 1em; } .home-sub, .lcd-datelong { display: none; } }
@media print { .home-view, dialog.tt { display: none !important; } }

/* ---------- motion: all of it only when the visitor allows motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .home-bands .b-lit { display: inline; opacity: .38; }
  .home-bands .b-sh, .home-bands .b { stroke-dasharray: 1000; stroke-dashoffset: 0; animation: band-draw 1.15s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * 140ms); }
  .home-bands .b-lit { animation: band-run 9s linear infinite; animation-delay: calc(1.6s + var(--i) * 1.7s); }
  @keyframes band-draw { from { stroke-dashoffset: 1000; } }
  @keyframes band-run { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -930; } }
  .lcd-seg .colon { animation: lcd-blink 1s steps(1, end) infinite; }
  @keyframes lcd-blink { 0% { opacity: 1; } 50% { opacity: .12; } }
  .lcd-screen::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: lcd-glow 8s ease-in-out infinite alternate; }
  @keyframes lcd-glow { from { opacity: 0; } to { opacity: .07; } }
  .lcd-grid > * { animation: lcd-in .3s ease-out both; }
  .lcd-grid > :nth-child(2) { animation-delay: 40ms; } .lcd-grid > :nth-child(3) { animation-delay: 80ms; } .lcd-grid > :nth-child(4) { animation-delay: 120ms; } .lcd-grid > :nth-child(5) { animation-delay: 160ms; } .lcd-grid > :nth-child(6) { animation-delay: 200ms; } .lcd-grid > :nth-child(7) { animation-delay: 240ms; } .lcd-grid > :nth-child(n+8) { animation-delay: 280ms; }
  @keyframes lcd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .home-hello { animation: lcd-in .4s ease-out both; }
}