/* Shop TV — full-screen wallboard (public/js/views/tv.js).
   Sized in viewport units so the same layout reads on a 32" booth monitor and a 75" floor TV.
   Always painted dark (the view forces data-theme="dark" while it is open), so it uses the
   ordinary tokens and needs no light-theme block. */

body.tv-on { overflow: hidden; }
body.tv-on .app { visibility: hidden; }

.tv {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(10px, 1.2vw, 22px);
  padding: clamp(14px, 1.6vw, 32px);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(16, 211, 154, .10), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(124, 108, 255, .10), transparent 60%),
    var(--bg);
  color: var(--txt);
  font-size: clamp(13px, .85vw, 20px);
  overflow: hidden;
}
.tv.loading .tv-lanes, .tv.loading .tv-stats { opacity: .35; }

/* header */
.tv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw; }
.tv-brand { display: flex; align-items: center; gap: .7em; font-size: 1.5em; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.tv-brand > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-brand img { height: 1.8em; width: auto; border-radius: var(--r-sm); }
.tv-mark { width: .9em; height: .9em; border-radius: 50%; background: var(--grad); box-shadow: 0 0 18px var(--accent-glow); flex: none; }
.tv-live { display: inline-flex; align-items: center; gap: .45em; font-size: .5em; font-weight: 700; letter-spacing: .14em; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: .35em .8em; border-radius: var(--r-full); }
.tv-live i { width: .65em; height: .65em; border-radius: 50%; background: var(--accent); animation: tv-pulse 1.8s ease-in-out infinite; }
.tv.stale .tv-live { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.tv.stale .tv-live i { background: var(--amber); animation: none; }
.tv-clock { text-align: center; line-height: 1.05; }
.tv-time { font-size: 3em; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tv-date { color: var(--txt-2); font-size: .95em; margin-top: .2em; }
.tv-ctl { display: flex; justify-content: flex-end; gap: .6em; transition: opacity .4s; }
.tv.idle .tv-ctl { opacity: 0; pointer-events: none; }
.tv.idle { cursor: none; }
.tv-btn { font: inherit; font-size: .8em; color: var(--txt-2); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-full);
  padding: .55em 1.1em; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; }
.tv-btn:hover { color: var(--txt); border-color: var(--accent); }
.tv-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.tv-btn kbd { font: inherit; font-size: .85em; opacity: .7; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 .35em; }

/* stats */
.tv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: clamp(8px, .9vw, 18px); transition: opacity .3s; }
.tv-stat { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9em 1.1em 1em; }
.tv-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--line-2); }
.tv-stat-v { font-size: 2.6em; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tv-stat-l { color: var(--txt-2); font-size: .85em; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-top: .35em; }
.tv-stat-s { color: var(--txt-3); font-size: .8em; margin-top: .2em; }
.tv-stat.good::before { background: var(--accent); } .tv-stat.good .tv-stat-v { color: var(--accent); }
.tv-stat.warn::before { background: var(--amber); } .tv-stat.warn .tv-stat-v { color: var(--amber); }
.tv-stat.bad::before { background: var(--red); } .tv-stat.bad .tv-stat-v { color: var(--red); }
.tv-stat.violet::before { background: var(--violet); } .tv-stat.violet .tv-stat-v { color: var(--violet); }
.tv-stat.money { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 60%); }
.tv-stat.money::before { background: var(--grad); }
.tv-spark { position: absolute; right: 1em; bottom: .8em; width: 45%; height: 55%; overflow: visible; }
.tv-spark .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tv-spark .area { fill: var(--accent-glow); stroke: none; }
.tv-spark .pt { fill: var(--accent); }

/* lanes */
.tv-lanes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(8px, .9vw, 18px); min-height: 0; transition: opacity .3s; }
.tv-lane { display: flex; flex-direction: column; min-height: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tv-lane > header { display: flex; align-items: center; gap: .5em; padding: .8em 1em; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tv-lane-nm { font-weight: 700; font-size: 1.05em; letter-spacing: .01em; }
.tv-lane-ct { background: var(--panel-2); color: var(--txt); font-weight: 700; font-size: .8em; padding: .1em .6em; border-radius: var(--r-full); font-variant-numeric: tabular-nums; }
.tv-lane-pcs { color: var(--txt-3); font-size: .8em; margin-left: auto; font-variant-numeric: tabular-nums; }
.tv-lane-late { color: var(--red); font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tv-lane-b { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .6em; padding: .7em;
  mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.tv-empty { color: var(--txt-3); text-align: center; padding: 2em 0; font-size: .9em; letter-spacing: .1em; text-transform: uppercase; }
.tv-more { color: var(--txt-3); font-size: .85em; text-align: center; padding: .3em; }

.tv-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: .7em .8em .75em; flex: none; }
.tv-card.rush { border-left: 4px solid var(--red); }
.tv-card.is-late { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent) inset; }
.tv-card.moved { animation: tv-moved 4s ease-out; }
.tv-card-top { display: flex; align-items: center; gap: .5em; font-size: .78em; }
.tv-num { font-family: var(--mono); color: var(--txt-3); }
.tv-rush { background: var(--red); color: #fff; font-weight: 800; letter-spacing: .08em; font-size: .85em; padding: .05em .5em; border-radius: var(--r-sm); }
.tv-due { margin-left: auto; font-weight: 700; color: var(--txt-2); white-space: nowrap; }
.tv-due.today { color: var(--amber); }
.tv-due.soon { color: var(--blue); }
.tv-due.late { color: var(--red); }
.tv-title { font-weight: 650; font-size: 1.05em; line-height: 1.25; margin-top: .3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-meta { display: flex; gap: .6em; color: var(--txt-2); font-size: .85em; margin-top: .3em; }
.tv-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tv-pcs { margin-left: auto; color: var(--txt); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-tags { display: flex; gap: .4em; margin-top: .45em; flex-wrap: wrap; }
.tv-tags span { font-size: .72em; color: var(--txt-2); background: var(--panel-2); border-radius: var(--r-full); padding: .15em .6em; }
.tv-tags .who { color: var(--violet); }

/* footer ticker */
.tv-foot { display: flex; align-items: center; gap: 1.2em; color: var(--txt-3); font-size: .85em; min-width: 0; }
.tv-ticker { flex: 1; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.tv-ticker-track { display: inline-flex; gap: 3em; white-space: nowrap; animation: tv-marquee 60s linear infinite; padding-left: 100%; }
.tv-tick { color: var(--txt-2); }
.tv-tick::before { content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--line-2); margin-right: .6em; vertical-align: middle; }
.tv-t-stage::before { background: var(--accent); }
.tv-t-art::before { background: var(--violet); }
.tv-t-payment::before { background: var(--amber); }
.tv-t-job::before { background: var(--blue); }
.tv-updated { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-src { color: var(--txt-3); white-space: nowrap; }
.tv-src:hover { color: var(--txt-2); }

@keyframes tv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@keyframes tv-moved {
  0% { box-shadow: 0 0 0 3px var(--accent), 0 0 32px var(--accent-glow); transform: scale(1.03); }
  70% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 20px var(--accent-glow); transform: scale(1); }
  100% { box-shadow: none; }
}
@keyframes tv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .tv-live i, .tv-card.moved { animation: none; }
  .tv-card.moved { box-shadow: 0 0 0 3px var(--accent); }
  .tv-ticker-track { animation: none; padding-left: 0; }
}

/* A phone held up to the wall still gets something usable: lanes stack and scroll. */
@media (max-width: 760px) {
  .tv { overflow-y: auto; grid-template-rows: auto auto auto auto; }
  .tv-head { grid-template-columns: 1fr auto; }
  .tv-clock { display: none; }
  .tv-lanes { grid-auto-flow: row; grid-auto-rows: auto; }
  .tv-lane, .tv-lane-b { flex: none; overflow: visible; min-height: auto; }
  .tv-lane-b { mask-image: none; }
  .tv-stat.money { grid-column: 1 / -1; }
  .tv-foot { position: sticky; bottom: 0; background: var(--bg); padding: .6em 0; margin: 0 -1em; padding-inline: 1em; }
  .tv-spark { position: static; display: block; width: 100%; height: 48px; margin-top: .6em; }
}