/* =============================================================================
   Hawaii Automation — interactive demo page.
   Loaded only by demo.html. Depends on the tokens declared in site.css.

   Layout goal: room, plate, phone, automations and the activity log all sit in
   one view, so a visitor never has to scroll to connect cause and effect.
   ========================================================================== */

.page-header--demo {
  background: linear-gradient(160deg, #002e46 0%, #013a58 55%, #06506f 100%);
  padding-block: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
}
.page-header--demo h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); }
.page-header--demo .lede { font-size: var(--fs-base); margin-top: var(--s-2); }

.demo { background: var(--paper); padding-block: clamp(1.25rem, .8rem + 1.6vw, 2rem); }

/* ---------------------------------------------------------------- the grid */
.demo__grid {
  display: grid;
  gap: 1rem;
  grid-template-areas: "room" "panel" "phone" "side";
}
@media (min-width: 760px) and (max-width: 1119px) {
  .demo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    grid-template-areas: "room  phone"
                         "panel phone"
                         "side  side";
  }
}
@media (min-width: 1120px) {
  .demo__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 285px) minmax(260px, .95fr);
    grid-template-areas: "room  phone side"
                         "panel phone side";
    align-items: start;
  }
}
.demo__room  { grid-area: room; }
.demo__panel { grid-area: panel; }
.demo__phone { grid-area: phone; display: flex; justify-content: center; }
.demo__side  { grid-area: side; display: flex; flex-direction: column; gap: var(--s-3); }

/* ---------------------------------------------------------------- the room */
.room {
  --ambient: 1; --cove: 0; --ceiling: 1; --curtain: 1; --fan-speed: 0s;
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: #0d151c; isolation: isolate;
}
.room svg { width: 100%; height: auto; display: block; }

.r-wall    { fill: #2b3942; }
.r-floor   { fill: #1d272e; }
.r-ceiling { fill: #243039; }
.r-frame   { fill: none; stroke: #16202a; stroke-width: 5; }
.r-mullion { stroke: #16202a; stroke-width: 4; }
.r-moon    { fill: #e8eef2; opacity: .85; }
.r-flex    { stroke: #1a242c; stroke-width: 3; fill: none; }
.r-shade   { fill: #39474f; }
.r-hub     { fill: #39474f; }
.r-blades  { fill: #5a686f; }
.r-console { fill: #3a2f27; }
.r-tv-stand{ fill: #2a333a; }
.r-tv-screen { fill: #11181d; }

.r-bulb { fill: #fff3d6; opacity: calc(.25 + var(--ceiling) * .75);
  filter: drop-shadow(0 0 10px rgba(255, 216, 154, calc(var(--ceiling) * .95))); }
.r-cone { opacity: calc(var(--ceiling) * .5); transition: opacity .45s var(--ease); }

.r-cove { fill: #39474f; }
.room[style*="--cove"] .r-cove { fill: color-mix(in srgb, #ffcf87 calc(var(--cove) * 100%), #39474f); }
.r-coveglow { opacity: calc(var(--cove) * .85); transition: opacity .45s var(--ease); }

/* Curtains gather towards the frame. --curtain is the open fraction (0..1), so
   scaling toward the outer edge reads as fabric bunching rather than sliding
   off the canvas — and it tracks a partial percentage from the knob. */
.r-curtain {
  fill: #6c4f3d; transform-box: fill-box;
  transition: transform .45s var(--ease);
  transform: scaleX(calc(1 - 0.72 * var(--curtain)));
}
.r-curtain--l { transform-origin: left center; }
.r-curtain--r { transform-origin: right center; }

.r-blades { transform-box: fill-box; transform-origin: center; }
.room.fan-on .r-blades { animation: fan-spin var(--fan-speed) linear infinite; }
@keyframes fan-spin { to { transform: rotate(360deg); } }

.r-tv-pic { opacity: 0; transition: opacity .35s var(--ease); }
.room.tv-on .r-tv-pic { opacity: 1; }
.room.tv-on .r-tv-screen { filter: drop-shadow(0 0 24px rgba(80, 140, 220, .55)); }

/* ---- split AC above the TV ---------------------------------------------- */
.r-ac-body   { fill: #e8ecef; }
.r-ac-vent   { fill: #c3cbd1; }
.r-ac-screen { fill: #11181d; transition: fill .3s var(--ease); }
.r-ac-temp {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  fill: #5a646b; transition: fill .3s var(--ease);
}
.room.ac-on .r-ac-screen { fill: #06161b; }
.room.ac-on .r-ac-temp   { fill: #7fe3c4; }

/* power indicator: red when off, green when running */
.r-ac-led {
  fill: #d8503f;
  filter: drop-shadow(0 0 4px rgba(216, 80, 63, .85));
  transition: fill .3s var(--ease);
}
.room.ac-on .r-ac-led {
  fill: #3ec97d;
  filter: drop-shadow(0 0 6px rgba(62, 201, 125, .95));
}

/* airflow, only while it is running */
.r-ac-flow {
  fill: none; stroke: #9fd8ff; stroke-width: 2.4; stroke-linecap: round;
  opacity: 0; transition: opacity .35s var(--ease);
}
.room.ac-on .r-ac-flow { opacity: .55; animation: ac-breathe 2.4s ease-in-out infinite; }
@keyframes ac-breathe {
  0%, 100% { opacity: .2; transform: translateY(0); }
  50%      { opacity: .6; transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .room.ac-on .r-ac-flow { animation: none; opacity: .5; }
}

/* ---- LED strip under the console ----------------------------------------- */
/* Cool white, so it reads as tape light and never gets confused with the warm
   cove strip at the ceiling. */
.r-strip-bar { fill: #39474f; transition: fill .35s var(--ease), filter .35s var(--ease); }
.room.strip-on .r-strip-bar {
  fill: #cfeaff; filter: drop-shadow(0 0 7px rgba(150, 210, 255, .95));
}
.r-strip-glow {
  fill: #86c6ff; opacity: 0; transition: opacity .4s var(--ease);
}
.room.strip-on .r-strip-glow { opacity: .32; }

/* ---- floor lamp ---------------------------------------------------------- */
.r-lamp-base  { fill: #39474f; }
.r-lamp-pole  { stroke: #4b585f; stroke-width: 3; fill: none; }
.r-lamp-shade { fill: #c9a06a; }
.r-lamp-glow {
  fill: #ffd9a0; opacity: calc(var(--lamp, 0) * .3);
  transition: opacity .4s var(--ease);
}
.room { --lamp: 0; }

.r-dim { fill: #04080c; opacity: calc(.78 - var(--ambient) * .78);
  transition: opacity .5s var(--ease); pointer-events: none; }

.room__tag {
  position: absolute; font-family: var(--font-mono); font-size: 10.5px;
  background: rgba(4, 12, 18, .72); color: #cfe0ea; border: 1px solid rgba(255, 255, 255, .14);
  padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(6px);
}
.room__tag { left: 11px; top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .r-curtain, .r-cone, .r-coveglow, .r-dim, .r-tv-pic { transition: none; }
  .room.fan-on .r-blades { animation: none; }
}

/* --------------------------------------------------------------- the plate */
/* stretch, not center: `align-items: center` would shrink the plate to its
   content width instead of filling the column. */
.plate-wrap { display: flex; flex-direction: column; align-items: stretch; }

.plate {
  display: grid;
  grid-template-columns: 1fr .48fr 1fr .5fr;
  gap: 3px;
  width: 100%;
  padding: 9px;
  border-radius: 13px;
  background: linear-gradient(150deg, #4a5157 0%, #3b4248 40%, #33393e 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .14);
  border: 1px solid #2b3135;
}
.plate__bay {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: #2f3539; border-radius: 7px; padding: 8px 6px;
}
.plate__code {
  font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); text-align: center;
}

/* ---- knob module ---------------------------------------------------------
   Four keys in the four corners, dial centred over where they meet — the
   layout of the 4 Key Knob face. Each key pushes its icon and label to its
   own outer corner so the dial never sits on top of them.                    */
.knobmod { position: relative; width: 100%; display: grid; place-items: center; }
.knobmod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; }

.knobmod .knob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

/* corner alignment: 1 = top-left, 2 = top-right, 3 = bottom-left, 4 = bottom-right */
.knobmod__grid .ckey { min-height: 74px; }
.knobmod__grid .ckey:nth-child(1) { align-items: flex-start;   justify-content: flex-start; padding: 7px 24px 20px 7px; }
.knobmod__grid .ckey:nth-child(2) { align-items: flex-end;     justify-content: flex-start; padding: 7px 7px 20px 24px; }
.knobmod__grid .ckey:nth-child(3) { align-items: flex-start;   justify-content: flex-end;   padding: 20px 24px 7px 7px; }
.knobmod__grid .ckey:nth-child(4) { align-items: flex-end;     justify-content: flex-end;   padding: 20px 7px 7px 24px; }
.knobmod__grid .ckey:nth-child(1) .pkey__dot { top: 6px; left: 6px; right: auto; }
.knobmod__grid .ckey:nth-child(2) .pkey__dot { top: 6px; right: 6px; }
.knobmod__grid .ckey:nth-child(3) .pkey__dot { bottom: 6px; left: 6px; top: auto; right: auto; }
.knobmod__grid .ckey:nth-child(4) .pkey__dot { bottom: 6px; right: 6px; top: auto; }
.knobmod__grid .ckey:nth-child(1) .ckey__label,
.knobmod__grid .ckey:nth-child(3) .ckey__label { text-align: left; }
.knobmod__grid .ckey:nth-child(2) .ckey__label,
.knobmod__grid .ckey:nth-child(4) .ckey__label { text-align: right; }

/* Note: the ring, face and LED are absolutely positioned and anchor to .knob
   itself — never set `position: static` on a knob or they escape to the nearest
   positioned ancestor and render at the wrong size. */

/* ---- keys ---------------------------------------------------------------- */
.ckey {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 7px 4px;
  border-radius: 5px; border: 0;
  background: linear-gradient(170deg, #3c4347 0%, #343a3e 100%);
  color: #8d979d; cursor: pointer;
  transition: background-color .18s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.ckey:hover { background: #434a4f; }
.ckey:active { transform: translateY(1px); }
.ckey:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

.ckey__icon { line-height: 0; opacity: .85; }
.ckey__label { font-size: 9px; line-height: 1.2; text-align: center; letter-spacing: .01em; }

.pkey__dot {
  position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #5b646a;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ckey.is-lit {
  background: linear-gradient(170deg, #4a4336 0%, #3e382d 100%);
  color: #ffd79a;
  box-shadow: inset 0 0 20px rgba(255, 180, 70, .22);
}
.ckey.is-lit .ckey__icon { opacity: 1; }
.ckey.is-lit .pkey__dot {
  background: #ffb020;
  box-shadow: 0 0 7px 2px rgba(255, 176, 32, .75), 0 0 15px 5px rgba(255, 176, 32, .3);
}
@media (prefers-reduced-motion: reduce) { .ckey { transition: none; } }


/* ---- plain key modules (no dial) ----------------------------------------- */
.plate__bay--single,
.plate__bay--double { justify-content: stretch; gap: 3px; }

.ckey--single { width: 100%; flex: 1; min-height: 100px; gap: 6px; }
.ckey--single .ckey__label { font-size: 9.5px; }

/* 2 Key module: one key above the other */
.ckey--stack { width: 100%; flex: 1; min-height: 50px; gap: 4px; padding: 7px 4px; }
.ckey--stack .ckey__label { font-size: 9px; }

/* ---- the rotary dial ----------------------------------------------------- */
.knob {
  --dial: 0;
  --size: 100px;
  position: relative; width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #4d555b, #24292d 72%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
  display: grid; place-items: center; cursor: grab; touch-action: none;
  border: 1px solid #22272a; z-index: 2;
  user-select: none; -webkit-user-select: none;
}
.knob:active, .knob.is-dragging { cursor: grabbing; }
.knob.is-dragging { box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 0 5px rgba(232, 147, 12, .28); }
.knob:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

/* the dial arc: a conic gradient masked into a ring, 270° from lower-left */
.knob__ring {
  position: absolute; inset: 5px; border-radius: 50%;
  /* --dial is unitless 0-100. It MUST be multiplied by an angle: a bare
     percentage stop in a conic-gradient means a fraction of a whole turn, which
     is why `calc(30% * 2.7)` used to paint ~292deg instead of 81deg. */
  background: conic-gradient(from 225deg,
    #ffb020 0deg,
    #ffb020 calc(var(--dial) * 2.7deg),
    rgba(255, 255, 255, .1) calc(var(--dial) * 2.7deg),
    rgba(255, 255, 255, .1) 270deg,
    transparent 270deg);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63%);
          mask: radial-gradient(circle, transparent 0 62%, #000 63%);
  pointer-events: none;
}
.knob__face {
  position: relative; width: calc(var(--size) * .64); height: calc(var(--size) * .64);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #171b1e, #0a0d0f);
  display: grid; place-items: center; align-content: center; gap: 1px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.knob__sc { font-family: var(--font-mono); font-size: 6.5px; color: #6f7a81; letter-spacing: .08em; }
.knob__val { display: flex; align-items: baseline; gap: 1px; color: #fff; }
.knob__val b { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1; }
.knob__val i { font-style: normal; font-size: 8px; color: #8d979d; }
.knob__led {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #4a5056;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
  pointer-events: none;
}
.knob.is-live .knob__led { background: #ffb020; box-shadow: 0 0 8px 2px rgba(255, 176, 32, .8); }

/* ---- socket face --------------------------------------------------------- */
.socket {
  position: relative; width: 100%; max-width: 74px; aspect-ratio: 1 / .95; border-radius: 6px;
  background: linear-gradient(170deg, #3c4347, #32383c);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .35);
}
.socket__hole { position: absolute; background: #14181b; border-radius: 2px; }
.socket__hole--l { width: 7px; height: 12px; top: 20%; left: 24%; transform: rotate(-12deg); }
.socket__hole--r { width: 7px; height: 12px; top: 20%; right: 24%; transform: rotate(12deg); }
.socket__hole--e { width: 8px; height: 13px; bottom: 24%; left: 50%; margin-left: -4px; }
.socket__usb {
  position: absolute; right: 11%; bottom: 13%; width: 6px; height: 13px;
  border-radius: 3px; background: #0f1214; box-shadow: inset 0 0 0 1.5px #525a60;
}

/* --------------------------------------------------------------- the phone */
.phone { width: min(100%, 285px); }
.phone__frame {
  border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, #353c42, #1a1f23);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .13);
}
/* Pin the screen to handset proportions and let the app scroll inside it —
   the dashboard is taller than a phone, exactly as the real one is. */
.phone__screen {
  position: relative; border-radius: 23px; overflow: hidden;
  background: #101619; color: #e6edf1;
  padding: 9px 10px 11px;
  display: flex; flex-direction: column; gap: 7px;
  aspect-ratio: 9 / 18.6;
}

.app__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 7px;
  padding-right: 3px; margin-right: -3px;
  scrollbar-width: thin; scrollbar-color: #35454f transparent;
}
.app__scroll::-webkit-scrollbar { width: 4px; }
.app__scroll::-webkit-scrollbar-track { background: transparent; }
.app__scroll::-webkit-scrollbar-thumb { background: #35454f; border-radius: 99px; }
.app__scroll::-webkit-scrollbar-thumb:hover { background: #455865; }

/* a hint that there is more below the fold */
.phone__screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(to top, #101619, transparent);
  pointer-events: none;
}

/* Pinned rows must not shrink: the screen is a fixed-height flex column, so a
   default flex-shrink would squash them to nothing once the app overflows. */
.app__status {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; color: #8da0ad; padding: 1px 3px 2px;
}
.app__status-icons { display: flex; gap: 5px; }

.app__alert {
  flex: none;
  background: #4a1f1a; border: 1px solid #8a3a2e; color: #ffb9ac;
  border-radius: 9px; padding: 7px 10px; font-size: 11px; font-weight: 600;
}
.app__alert[hidden] { display: none; }

.app__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); padding: 1px 3px; }
.app__home { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: #6f8595; margin-bottom: 1px; }
.app__head h3 { font-size: 17px; color: #fff; letter-spacing: -.02em; }
.app__summary { font-size: 10px; color: #7d94a3; white-space: nowrap; }

.app__label {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #5f7382; padding: 2px 3px 0;
}

/* ---- live solar gauge ---------------------------------------------------- */
.solar {
  background: #1a2328; border: 1px solid #253038; border-radius: 13px;
  padding: 8px 10px 9px; flex: none;
}
.solar__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.solar__label {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #5f7382;
}
.solar__status {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .02em;
  color: #e0a23a; background: rgba(232, 162, 58, .14);
  border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.solar.is-exporting .solar__status { color: #5fd0a8; background: rgba(95, 208, 168, .14); }

.solar__body { display: grid; grid-template-columns: 84px 1fr; gap: 9px; align-items: center; margin-top: 4px; }
.solar__dial { width: 84px; height: auto; display: block; }
.solar__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.g-seg { fill: none; stroke-width: 7; stroke-linecap: butt; }
.g-seg--red   { stroke: #d8503f; }
.g-seg--amber { stroke: #e3a53a; }
.g-seg--green { stroke: #46ab74; }

.g-needle {
  --deg: -90deg;
  transform-origin: 60px 60px; transform: rotate(var(--deg));
  transition: transform 1.1s cubic-bezier(.33, 1.1, .5, 1);
}
.g-needle line { stroke: #f1f6f9; stroke-width: 2.6; stroke-linecap: round; }
.g-needle circle { fill: #f1f6f9; }
@media (prefers-reduced-motion: reduce) { .g-needle { transition: none; } }

.solar__value {
  display: flex; align-items: baseline; gap: 2px; color: #fff;
}
.solar__value b { font-family: var(--font-display); font-size: 21px; font-weight: 800; line-height: 1; }
.solar__value i { font-style: normal; font-size: 10px; color: #8da0ad; }

.solar__rows { display: flex; flex-direction: column; gap: 2px; }
.solar__rows span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.solar__rows em {
  font-style: normal; font-family: var(--font-mono); font-size: 8px;
  letter-spacing: .08em; text-transform: uppercase; color: #5f7382;
}
.solar__rows b { font-size: 11px; font-weight: 600; color: #dce7ee; font-family: var(--font-mono); }

.app__scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.app__scenes button {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  padding: 8px 5px; border-radius: 10px;
  background: #1a2328; color: #b6c7d2; border: 1px solid #253038;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.app__scenes button:hover { background: #202c33; color: #fff; }
.app__scenes button.is-active { background: #e8930c; border-color: #e8930c; color: #1a1205; }

.app__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tile-wrap { position: relative; }

.tile {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 9px; border-radius: 12px;
  background: #1a2328; border: 1px solid #253038; color: #b6c7d2;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.tile:hover { background: #202c33; }
.tile:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tile__icon { line-height: 0; color: #7d94a3; transition: color .2s var(--ease); }
.tile__name { font-size: 10px; font-weight: 600; line-height: 1.2; color: #dce7ee; }
.tile__state { font-family: var(--font-mono); font-size: 9px; color: #6f8595; }

.tile.is-on { background: #f6c66a; border-color: #f6c66a; color: #2a1f06; }
.tile.is-on .tile__icon  { color: #7a5a08; }
.tile.is-on .tile__name  { color: #2a1f06; }
.tile.is-on .tile__state { color: #6b4f07; }

/* ---- slider card (curtain position) -------------------------------------- */
/* The card is the wrap, not the button: an <input> cannot live inside a
   <button>, so the two are siblings and the wrap carries the chrome. */
.tile-wrap--slider {
  grid-column: 1 / -1;
  background: #1a2328; border: 1px solid #253038; border-radius: 12px;
  padding: 8px 10px 7px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.tile-wrap--slider .tile {
  background: none; border: 0; padding: 0;
  flex-direction: row; align-items: center; gap: 7px;
}
.tile-wrap--slider .tile:hover { background: none; }
.tile-wrap--slider .tile__name { flex: 1; }
.tile-wrap--slider .tile__state { font-size: 10px; }

.tile-wrap--slider.is-on { background: #f6c66a; border-color: #f6c66a; }
.tile-wrap--slider.is-on .tile__icon  { color: #7a5a08; }
.tile-wrap--slider.is-on .tile__name  { color: #2a1f06; }
.tile-wrap--slider.is-on .tile__state { color: #6b4f07; }
.tile-wrap--slider.is-on .tile__marks { color: #8a6a12; }

/* the range itself — track painted from a unitless --fill */
.tile__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: none; cursor: pointer;
  touch-action: pan-y;
}
.tile__range:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 99px; }

.tile__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(to right,
    #6aa6d8 calc(var(--fill, 0) * 1%), #2a3740 calc(var(--fill, 0) * 1%));
}
.tile__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; margin-top: -5px;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.tile__range::-moz-range-track { height: 6px; border-radius: 99px; background: #2a3740; }
.tile__range::-moz-range-progress { height: 6px; border-radius: 99px; background: #6aa6d8; }
.tile__range::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.tile-wrap--slider.is-on .tile__range::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    #7a5a08 calc(var(--fill, 0) * 1%), rgba(0, 0, 0, .18) calc(var(--fill, 0) * 1%));
}
.tile-wrap--slider.is-on .tile__range::-moz-range-track { background: rgba(0, 0, 0, .18); }
.tile-wrap--slider.is-on .tile__range::-moz-range-progress { background: #7a5a08; }

.tile__marks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em;
  text-transform: uppercase; color: #5f7382; margin-top: -3px;
}

@media (pointer: coarse) {
  .tile__range { height: 26px; }
  .tile__range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; }
  .tile__range::-moz-range-thumb { width: 20px; height: 20px; }
}

.tile__step { position: absolute; right: 6px; top: 6px; display: flex; gap: 3px; }
.tile__step button {
  width: 20px; height: 20px; border-radius: 6px; line-height: 1;
  font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .1); color: #cfdbe3;
}
.tile__step button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.tile__step button:disabled { opacity: .3; cursor: not-allowed; }
.tile.is-on ~ .tile__step button { background: rgba(0, 0, 0, .16); color: #4a3703; }
.tile.is-on ~ .tile__step button:hover:not(:disabled) { background: rgba(0, 0, 0, .28); }

/* ------------------------------------------------- side column: autos + log */
.side-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-3);
}
.side-block--log { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.side-label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2);
}
.side-label span { letter-spacing: .04em; text-transform: none; color: var(--amber-700); }

.side-reset {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--navy);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.side-reset:hover { background: var(--surface-2); border-color: var(--navy-300); }

/* ---- compact automation buttons ----------------------------------------- */
.autos { display: flex; flex-direction: column; gap: 5px; }

.auto {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2);
  align-items: center; text-align: left; width: 100%;
  padding: 8px 9px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease);
}
.auto:hover { background: #fff; border-color: var(--navy-300); transform: translateX(2px); }
.auto:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.auto__icon {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: #e9f1f5; color: var(--navy); flex: none;
}
.auto__txt { display: flex; flex-direction: column; min-width: 0; }
.auto__txt b { font-family: var(--font-display); font-size: 12.5px; color: var(--navy); line-height: 1.2; }
.auto__txt em {
  font-style: normal; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .04em; color: var(--teal); margin-top: 1px;
}
.auto__txt i { font-style: normal; font-size: 10.5px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.auto__go { color: var(--ink-3); line-height: 0; flex: none; }
.auto:hover .auto__go { color: var(--amber); }

.auto[aria-busy="true"] { background: #fff6e6; border-color: var(--amber); }
.auto[aria-busy="true"] .auto__icon { background: var(--amber); color: #1a1205; }
.auto[aria-busy="true"] .auto__go::after {
  content: ""; display: block; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--amber); border-top-color: transparent;
  animation: spin .7s linear infinite;
}
.auto[aria-busy="true"] .auto__go svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auto[aria-busy="true"] .auto__go::after { animation: none; }
  .auto:hover { transform: none; }
}

/* ---- activity log -------------------------------------------------------- */
.demo__log {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2);
  overflow: hidden;
}
.demo__log li { padding-left: 13px; position: relative; line-height: 1.4; }
.demo__log li::before {
  content: "\203A"; position: absolute; left: 0; color: var(--amber); font-weight: 700;
}
.demo__log li:first-child { color: var(--navy); font-weight: 600; }

/* ============================================================== touch sizes */
@media (pointer: coarse) {
  .knob { --size: 120px; }
  .ckey { min-height: 64px; }
  .knobmod__grid .ckey { min-height: 78px; }
  .tile__step button { width: 28px; height: 28px; font-size: 15px; }
  .app__scenes button { padding: 11px 6px; font-size: 12px; }
  .tile { padding: 11px; }
  .auto { padding: 11px; }
  .side-reset { padding: 7px 14px; }
}

/* ===================================================== small screens tweaks */
/* Phones stack room above plate, so the room scrolls away while you press keys.
   Pin it under the header instead; the plate, phone and log scroll beneath it.
   The paper band above/below masks content sliding under the rounded corners.
   Skipped on short (landscape) screens, where it would cover most of the view. */
@media (max-width: 759px) and (min-height: 560px) {
  .demo__room {
    position: sticky; top: var(--header-h); z-index: 5;
    background: var(--paper);
    padding-block: 8px; margin-block: -8px;
  }
  /* never more than ~36% of the screen: crop the scene evenly top and bottom */
  .room { display: flex; align-items: center; max-height: 36vh; max-height: 36svh; }
  .room svg { flex: none; }
}
@media (max-width: 759px) {
  .plate { grid-template-columns: 1fr; gap: 6px; }
  .plate__bay { padding: 10px; }
  .knobmod__grid { max-width: 340px; margin-inline: auto; }
  /* plain keys line up with the knob modules' 340px key grid */
  .plate__bay--single .ckey,
  .plate__bay--double .ckey { width: 100%; max-width: 340px; margin-inline: auto; }
  .socket { max-width: 86px; }
  .phone { width: min(100%, 320px); }
}
@media (max-width: 400px) {
  .knob { --size: 108px; }
  .ckey__label { font-size: 8.5px; }
}