/* ============================================================================
   Conference Room  |  Crestron CH5 panel

   Dark panel with a single accent colour (the --yellow tokens, which follow
   --brand when the portfolio site sets one). Selected things are a SOLID
   accent fill with contrasting text - the highest-contrast readout available
   on a dark panel.

   TARGET: Crestron TSW-1070 - 10.1 in, 1920 x 1200 landscape.
   1 vmin = 12 px = 1.13 mm on the glass.  Type is sized in vmin so the same
   archive still scales to a TSW-770 or XPanel, but every value below was
   picked from the PHYSICAL size on a 10.1 in panel read at 2 - 4 ft:

     .src-name    4.6vmin =  55 px = 6.3 mm    (primary button text)
     .src-sub     2.7vmin =  32 px = 3.7 mm    (secondary line)
     .col-title   2.6vmin =  31 px = 3.5 mm    (section headings)
     .ftr         2.4vmin =  29 px = 3.3 mm    (smallest text on panel)
     .vol-readout 7.5vmin =  90 px = 10.2 mm   (volume readout)

   Touch targets: source tiles ~265 px (30 mm), volume keys 156 px (18 mm),
   mute 138 px (16 mm) - all well above the 10 mm minimum.

   Layout uses CSS grid for all gaps.  Flexbox `gap` is deliberately avoided
   (Chromium 84+) so the panel renders correctly on older TSW firmware.
   ========================================================================== */

:root {
  --ink:       #0E0F10;
  --ink-2:     #171A1C;
  --panel:     #1F2225;
  --panel-2:   #2A2E32;
  --line:      rgba(255,255,255,.12);
  --yellow:    var(--brand, #F5C503);
  --yellow-hi: var(--brand-hi, #FFDE3D);
  --yellow-lo: var(--brand-lo, #C79E02);
  --red:       #DC3545;
  --red-solid: #C22C3B;
  --txt:       #F2F3F4;
  --txt-dim:   #9BA2A8;
  --on-yellow: var(--brand-ink, #141414);   /* text/icons sitting on a yellow fill */

  --gap:      2.4vmin;
  --radius:   1.6vmin;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--txt);
  font-family: "Barlow Condensed", "Roboto Condensed", "Segoe UI", -apple-system, system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(115% 85% at 80% 6%, color-mix(in srgb, var(--yellow) 10%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 64%);
}

/* ============================ HEADER ============================ */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4vmin 3.2vmin 2.0vmin;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--yellow) 0%, var(--yellow) 34%, transparent 100%) 1;
}
.hdr-logo { height: 9.2vmin; width: 26vmin; border-radius: 1vmin; color: var(--yellow); --logo-ph-size: 2.2vmin; }
.hdr-right { display: flex; align-items: center; }
.hdr-info  { text-align: right; line-height: 1.2; }
.hdr-room  { font-size: 3.4vmin; font-weight: 700; letter-spacing: .02em; }
.hdr-clock { font-size: 2.6vmin; color: var(--txt-dim); font-variant-numeric: tabular-nums; }

/* Exit to the Teams Rooms app. Deliberately quiet - it must not compete
   with the source list - but still a 10 mm target on TSW-1070 glass. */
.hdr-exit {
  display: flex;
  align-items: center;
  height: 8.4vmin;
  margin-left: 3.2vmin;          /* flex gap avoided on purpose */
  padding: 0 2.6vmin;
  border-radius: 1.2vmin;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.05);
  color: var(--txt-dim);
  font-size: 2.6vmin;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .1s ease, color .1s ease, border-color .1s ease, transform .06s ease;
}
.hdr-exit svg { width: 4vmin; height: 4vmin; margin-right: 1.4vmin; }
.hdr-exit:active,
.hdr-exit.is-pressed {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--on-yellow);
  transform: scale(.97);
}

/* ============================= BODY ============================= */
.body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: calc(var(--gap) * 1.4);
  padding: calc(var(--gap) * 1.4) 3.2vmin;
  min-height: 0;
}
.col { display: flex; flex-direction: column; min-height: 0; }
.col-title {
  font-size: 2.6vmin;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 1.6vmin;
}

/* -------------------------- SOURCE LIST ------------------------- */
.src-list {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
  min-height: 0;
}

.src {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 3vmin 0 4vmin;
  text-align: left;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel) 0%, #16191B 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
/* accent bar down the left edge - lights up on feedback */
.src::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.1vmin;
  background: rgba(255,255,255,.12);
  transition: background .12s ease;
}

.src-ico {
  flex: 0 0 auto;
  width: 10vmin; height: 10vmin;
  margin-right: 3vmin;              /* flex gap avoided on purpose */
  display: grid; place-items: center;
  color: var(--yellow);
  opacity: .9;
  transition: opacity .12s ease, filter .12s ease;
}
.src-ico svg, .src-ico img { width: 100%; height: 100%; display: block; }

.src-txt  { display: flex; flex-direction: column; min-width: 0; }
.src-name { font-size: 4.6vmin; font-weight: 700; letter-spacing: .01em; line-height: 1.12; }
.src-sub  { font-size: 2.7vmin; color: var(--txt-dim); margin-top: .8vmin; line-height: 1.2; }

/* pressed - momentary feedback while the finger is down */
.src.is-pressed { transform: scale(.985); background: var(--panel-2); }

/* SELECTED - solid safety yellow, black text. Driven by the feedback join. */
.src.is-active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--on-yellow);
  box-shadow: 0 1.2vmin 3vmin color-mix(in srgb, var(--yellow) 20%, transparent);
}
.src.is-active::before { background: var(--on-yellow); }
.src.is-active .src-sub { color: rgba(20,20,20,.72); }
.src.is-active .src-ico { opacity: 1; color: var(--on-yellow); }
/* Only the mono (single-colour yellow) glyphs get darkened on the yellow fill -
   without it they would be yellow-on-yellow and vanish. The Teams mark keeps
   its brand purple: it reads fine on yellow, and knocking it to a black
   silhouette makes it unrecognisable, which defeats having a logo at all. */
.src.is-active .src-ico img.ico-mono { filter: brightness(0) saturate(100%); }

/* System Off tile - red when it is the active state */
.src-off .src-ico { color: var(--txt-dim); }
.src-off.is-active {
  background: var(--red-solid);
  border-color: var(--red-solid);
  color: #fff;
  box-shadow: 0 1.2vmin 3vmin rgba(194,44,59,.22);
}
.src-off.is-active::before { background: rgba(0,0,0,.45); }
.src-off.is-active .src-ico { color: #fff; opacity: 1; }
.src-off.is-active .src-sub { color: rgba(255,255,255,.78); }

/* --------------------------- VOLUME ----------------------------- */
.vol-wrap {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--gap);
  padding: var(--gap);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel) 0%, #16191B 100%);
  border: 1px solid var(--line);
  min-height: 0;
}

/* readout lives ABOVE the bar - it never sits on top of the yellow fill */
.vol-readout {
  text-align: center;
  font-size: 7.5vmin;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
  letter-spacing: .01em;
}

/* vertical level bar - fill height is driven by the analog join */
.vmeter {
  position: relative;
  border-radius: 1.2vmin;
  background: #0A0C0D;
  border: 1px solid var(--line);
  overflow: hidden;
  touch-action: none;          /* the drag handler owns the gesture */
  min-height: 0;
}
.vmeter > i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(0deg, var(--yellow-lo) 0%, var(--yellow) 55%, var(--yellow-hi) 100%);
}
/* animate the fill only after first paint, so the opening level draws instantly */
html.is-ready .vmeter > i {
  transition: height .08s linear;
}
.vmeter.is-muted > i { background: linear-gradient(0deg, #3D4348 0%, #5C646B 100%); }

.vol-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.vbtn {
  height: 13vmin;
  display: grid; place-items: center;
  border-radius: 1.2vmin;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--txt);
  transition: background .1s ease, transform .06s ease;
}
.vbtn svg { width: 6.6vmin; height: 6.6vmin; }
.vbtn.is-pressed {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--on-yellow);
  transform: scale(.97);
}

.mute {
  height: 11.5vmin;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1.2vmin;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 3.2vmin; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mute svg { width: 6.8vmin; height: 4.9vmin; }
.mute .mute-txt { margin-left: 2vmin; }
.mute .mx { display: none; }
.mute.is-active {
  background: var(--red-solid);
  border-color: var(--red-solid);
  color: #fff;
}
.mute.is-active .mx { display: block; }
.mute.is-active .wv { display: none; }

/* ============================ FOOTER ============================ */
.ftr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6vmin 3.2vmin 2.2vmin;
  font-size: 2.4vmin;
  color: var(--txt-dim);
  border-top: 1px solid var(--line);
}
.ftr-src b { color: var(--yellow); font-weight: 700; }

/* =========================== MODAL ============================== */
.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;     /* `inset` needs Chromium 87 */
  display: none;
  place-items: center;
  background: rgba(3,4,5,.82);
  z-index: 40;
}
.modal.is-open { display: grid; }
.modal-box {
  width: min(72vmin, 80%);
  padding: 5vmin 4.5vmin 4vmin;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: .6vmin solid var(--yellow);
  box-shadow: 0 3vmin 8vmin rgba(0,0,0,.65);
  text-align: center;
}
.modal-msg { font-size: 3.6vmin; line-height: 1.45; margin-bottom: 4vmin; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.btn {
  height: 12vmin;
  border-radius: 1.2vmin;
  font-size: 3.2vmin; font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.btn-yes { background: var(--red-solid); border-color: var(--red-solid); color: #fff; }
.btn.is-pressed { transform: scale(.97); }

/* utility */
.is-hidden { display: none !important; }

/* Portrait panels - stack the two columns */
@media (orientation: portrait) {
  .body { grid-template-columns: 1fr; grid-template-rows: 1.5fr 1fr; }
}