/* Selkirk Stone paint line — shared styles.
   Layout: tablet = header bar + scrolling screen of big touch tiles;
   TV = name bar over 1–2 side-by-side mold panels, sized from the TV's own width (--u = 1% of width).
   Single light theme in Selkirk Stone brand colors, by design (factory floor + TV). */
:root {
  --green: #395040;
  --green-press: #2a3c30;
  --tan: #c2b199;
  --tan-tint: #f5f1ea;
  --tan-press: #e6ddcf;
  --red: #754841;
  --red-press: #5c3833;
  --charcoal: #2f3436;
  --bg: #ffffff;
  --fg: #1c241f;
  --muted: #4f5a52;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", "Roboto", "Segoe UI", sans-serif;
  color-scheme: light;
}
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
button:focus-visible, select:focus-visible { outline: 4px solid var(--fg); outline-offset: 3px; }

.mc-1 { background: var(--green); color: #fff; }
.mc-2 { background: var(--red); color: #fff; }
.mc-3 { background: var(--tan); color: var(--fg); }
.mc-4 { background: var(--charcoal); color: #fff; }

.mark-stone {
  display: inline-block; flex: none; width: 1.1em; height: 1.1em; border-radius: .12em;
  background: linear-gradient(var(--green) 0 30%, var(--bg) 30% 36%, var(--tan) 36% 64%, var(--bg) 64% 70%, var(--red) 70%);
}

/* ================= TABLET REMOTE ================= */
.tab { height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; background: var(--bg); font-size: 20px; user-select: none; }
.tab .bar {
  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--tan-tint); border-bottom: 5px solid var(--green);
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.tab .brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: .06em; text-transform: uppercase; min-height: 72px; }
.tab .back, .tab .home {
  font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: .04em;
  min-height: 72px; padding: 0 26px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
}
.tab .back { background: var(--green); color: #fff; border: 0; }
.tab .back:active { background: var(--green-press); }
.tab .back .arrow { font-size: 34px; line-height: 1; }
.tab .home { background: var(--bg); color: var(--fg); border: 3px solid var(--tan); margin-left: auto; }
.tab .home:active { background: var(--tan-press); }
.tab .pills { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tab .pill, .tab .ontv {
  display: flex; flex-direction: column; justify-content: center; min-height: 58px;
  padding: 4px 12px; border-radius: 8px; border: 2px solid var(--tan); background: var(--bg);
}
.tab .pill small, .tab .ontv small { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tab .pill b, .tab .ontv b { font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.tab .ontv { border-color: var(--green); background: #e9efea; }
.tab .ontv small { color: var(--green); }

.tab-main {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 18px;
  padding-block: 20px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.tab h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.tab h1 .h1-line { display: block; color: var(--muted); font-size: .72em; }
.tab .prompt { margin: 0; color: var(--muted); font-size: 22px; font-weight: 600; }

.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tiles.big { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); flex: 1; }
.tile {
  font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--fg); background: var(--tan-tint); border: 3px solid var(--tan); border-radius: 12px;
  min-height: 100px; padding: 14px 18px; text-align: left; cursor: pointer; line-height: 1.1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tile::after { content: "›"; font-size: 46px; color: var(--green); line-height: 1; }
.tile.soon { color: var(--muted); background: var(--bg); }
.tile.soon::after { content: "Soon"; font-size: 15px; font-family: var(--body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 2px solid var(--tan); border-radius: 6px; padding: 4px 8px; }
.tiles.big .tile { font-size: 64px; font-weight: 800; min-height: 220px; justify-content: center; }
.tiles.big .tile::after { display: none; }
.tile:active { background: var(--tan-press); }

.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 3px dashed var(--tan); border-radius: 12px; padding: 40px 20px; text-align: center;
}
.empty p { margin: 0; font-family: var(--display); font-weight: 800; font-size: 50px; text-transform: uppercase; letter-spacing: .04em; }
.empty span { color: var(--muted); font-size: 22px; }

.tab-molds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); align-items: start; }
.tab-mold { border: 3px solid var(--tan); border-radius: 12px; overflow: hidden; min-width: 0; }
.tab-mold-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; }
.tab-mold-label { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: .05em; text-transform: uppercase; }
.tab-tv { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 2px solid currentColor; border-radius: 6px; padding: 3px 8px; opacity: .85; }
.video-btn {
  margin-left: auto; min-height: 60px; padding: 0 20px; border-radius: 10px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .05em; text-transform: uppercase;
  background: var(--bg); color: var(--fg); border: 0;
}
.video-btn .play { margin-right: 8px; font-size: 18px; color: var(--red); }
.video-btn:active { background: var(--tan-press); }
.tab-step {
  display: grid; grid-template-columns: 52px 170px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 12px 10px 14px; border-top: 2px solid var(--tan-tint);
}
.tab-num { font-family: var(--display); font-weight: 800; font-size: 50px; color: var(--green); text-align: center; line-height: 1; }
.tab-chip, .tv-chip {
  display: block; text-align: center; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  border-style: solid; line-height: 1.05;
}
.tab-chip { font-size: 24px; padding: 12px 6px; border-width: 3px; border-radius: 8px; }
.tab-amt { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.tab-cov { font-size: 18px; font-weight: 600; color: var(--muted); }
.tab-note { font-size: 16px; font-style: italic; color: var(--muted); }
.view-btn {
  min-height: 64px; padding: 0 16px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .05em; text-transform: uppercase;
  background: var(--bg); color: var(--green); border: 3px solid var(--green);
}
.view-btn:active { background: var(--tan-press); }
.tab-banner {
  flex: none; display: flex; align-items: center; gap: 16px; background: var(--red); color: #fff;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.tab-banner small { display: block; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tab-banner b { font-family: var(--display); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.tab-banner .stop { margin-left: auto; min-height: 64px; padding: 0 30px; border-radius: 10px; border: 0; background: #fff; color: var(--red); font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .05em; cursor: pointer; }

@media (max-width: 700px) {
  .tab h1 { font-size: 34px; }
  .tiles.big .tile { font-size: 46px; min-height: 140px; }
  .tab .home { margin-left: 0; }
  .tab-molds { grid-template-columns: 1fr; }
  .tab-step { grid-template-columns: 40px minmax(0, 1fr); }
  .tab-num { grid-row: span 3; font-size: 40px; }
  .tab-step .view-btn { grid-column: 2; }
}

/* ================= TV DISPLAY ================= */
.tv { --u: 9.6px; --k: 1; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); cursor: none; user-select: none; }
.tv * { cursor: none; }
.tv-frame { height: 100%; display: flex; flex-direction: column; }
.tv-top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.6); border-bottom: calc(var(--u) * .45) solid var(--tan);
}
.tv-name { font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 3.4); letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; min-width: 0; }
.tv-name .sep { color: var(--tan); }
.tv-screen { flex: none; font-weight: 700; font-size: calc(var(--u) * 1.2); letter-spacing: .14em; color: var(--muted); }
.tv-molds { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1); }
.tv-molds.n2 { grid-template-columns: 1fr 1fr; }
.tv-mold { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: calc(var(--u) * .3) solid var(--tan); border-radius: calc(var(--u) * .8); overflow: hidden; }
.tv-mold-head { flex: none; font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 3.2); letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: calc(var(--u) * .7) calc(var(--u) * 1.4); }
.tv-steps { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 calc(var(--u) * 1.2); position: relative; }
.tv-step {
  flex: 1 0 auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
  gap: calc(var(--u) * 1.4 * var(--k)); padding-block: calc(var(--u) * .5 * var(--k));
  border-bottom: calc(var(--u) * .15) solid var(--tan-tint);
}
.tv-step:last-child { border-bottom: 0; }
.tv-num { font-family: var(--display); font-weight: 800; color: var(--green); font-size: calc(var(--u) * 4.4 * var(--k)); line-height: 1; min-width: .6em; text-align: center; }
.tv-chip { width: calc(var(--u) * 13 * var(--k)); font-size: calc(var(--u) * 2.1 * var(--k)); padding: calc(var(--u) * .8 * var(--k)) calc(var(--u) * .4); border-width: calc(var(--u) * .25); border-radius: calc(var(--u) * .6); }
.tv-text { min-width: 0; overflow-wrap: anywhere; }
.tv-amt { font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 3 * var(--k)); text-transform: uppercase; line-height: 1.05; letter-spacing: .02em; }
.tv-cov { font-weight: 600; font-size: calc(var(--u) * 1.75 * var(--k)); color: var(--muted); line-height: 1.2; }
.tv-note { font-style: italic; font-size: calc(var(--u) * 1.5 * var(--k)); color: var(--muted); line-height: 1.2; }
.tv.dev .too-long { outline: calc(var(--u) * .4) solid #c0261d; outline-offset: calc(var(--u) * -.4); }
.tv.dev .too-long::after { content: "TOO LONG — trim wording"; position: absolute; right: 0; bottom: 0; background: #c0261d; color: #fff; font-weight: 700; font-size: calc(var(--u) * 1.4); padding: calc(var(--u) * .3) calc(var(--u) * .8); }

.tv-media { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); }
.tv-media-title { flex: none; font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 3.4); text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.tv-media-title span { display: block; font-family: var(--body); font-weight: 600; font-size: calc(var(--u) * 2.4); text-transform: none; letter-spacing: 0; color: var(--muted); }
.tv-media-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tv-media-body img, .tv-media-body video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(var(--u) * .6); background: #000; }
.tv-media-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: calc(var(--u) * .3) dashed var(--tan); border-radius: calc(var(--u) * .8); font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 4); text-transform: uppercase; color: var(--muted); }
.tv-media-bar { flex: none; height: calc(var(--u) * .6); background: var(--tan-tint); border-radius: 99px; overflow: hidden; }
.tv-media-bar span { display: block; height: 100%; background: var(--green); animation-name: drain; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes drain { from { width: 100%; } to { width: 0%; } }

.tv-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); text-align: center; padding: calc(var(--u) * 3); position: relative; }
.tv-idle .mark { display: flex; align-items: center; gap: calc(var(--u) * 1); font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 2.4); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.tv-idle-name { font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 4.2); text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }
.tv-idle-name .sep { color: var(--tan); }
.tv-idle-line { font-size: calc(var(--u) * 2); font-weight: 600; color: var(--muted); }
.tv-idle-screen { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.2); font-weight: 700; font-size: calc(var(--u) * 1.2); letter-spacing: .14em; color: var(--muted); }

.tv-offline {
  display: none; position: absolute; left: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2);
  background: var(--charcoal); color: #fff; font-weight: 700; font-size: calc(var(--u) * 1.1); letter-spacing: .06em;
  padding: calc(var(--u) * .4) calc(var(--u) * .9); border-radius: 99px; opacity: .85;
}
.tv.offline .tv-offline { display: block; }

.dev-picker { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 8px; align-items: center; background: #fff; border: 2px solid #c0261d; border-radius: 8px; padding: 6px 8px; font: 700 14px var(--body); color: #c0261d; z-index: 5; }
.dev-picker, .dev-picker * { cursor: default; }
.dev-picker select { font: 600 16px var(--body); max-width: 60vw; }

@media (prefers-reduced-motion: reduce) { .tv-media-bar span { animation: none; } }

/* Update button (tablet home screen) */
.tab .home.update .spin { font-size: 30px; line-height: 1; color: var(--green); }
.tab .home.update:disabled { opacity: .7; }