/* watch.css - the Watch window over the Team box (his order, 2026-11-06).
   Theme tokens only, so dark and light both follow. */

html.wt-noscroll, html.wt-noscroll body{ overflow:hidden; }

.wt-overlay{ position:fixed; inset:0; z-index:9800; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); padding:20px; box-sizing:border-box; }
.wt-window{ width:min(1240px, 100%); height:min(820px, 100%); display:flex; flex-direction:column;
  background:var(--dk-panel); color:var(--dk-text); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.45), inset 0 0 0 1px var(--dk-line); }

/* the head */
.wt-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--dk-line); }
.wt-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.wt-who .tm-dot{ flex:none; }
.wt-names{ min-width:0; }
.wt-name{ font-size:16px; font-weight:700; }
.wt-status{ font-size:12.5px; color:var(--dk-muted); line-height:1.4; }
.wt-head-btns{ display:flex; align-items:center; gap:8px; flex:none; }
.wt-err{ font-size:12px; color:var(--dk-red); max-width:240px; }
.wt-live{ border:0; border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600;
  background:var(--dk-row); color:var(--dk-text); cursor:pointer; }
.wt-live.on{ background:var(--dk-green-bg, rgba(14,203,129,.14)); color:var(--dk-green); cursor:default; }
.wt-live.on::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--dk-green); margin-right:6px; vertical-align:1px; animation:wtPulse 1.6s ease-in-out infinite; }
.wt-close{ border:0; background:var(--dk-row); color:var(--dk-text); width:32px; height:32px; border-radius:8px;
  font-size:20px; line-height:1; cursor:pointer; }
.wt-close:hover, .wt-live:not(.on):hover{ background:var(--dk-hover); }

/* the body: the screen, and the last hour beside it */
.wt-body{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 330px; }
.wt-screen{ display:flex; flex-direction:column; min-width:0; min-height:0; margin:14px; border-radius:10px;
  background:var(--dk-page); box-shadow:inset 0 0 0 1px var(--dk-line-strong); overflow:hidden; }
.wt-bar{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--dk-row);
  font-size:12.5px; min-width:0; }
.wt-bar-dots{ flex:none; width:38px; height:10px;
  background:radial-gradient(circle at 5px 5px, var(--dk-red) 4px, transparent 4.5px),
             radial-gradient(circle at 19px 5px, var(--dk-amber) 4px, transparent 4.5px),
             radial-gradient(circle at 33px 5px, var(--dk-green) 4px, transparent 4.5px); opacity:.8; }
.wt-bar-title{ flex:none; font-weight:700; }
.wt-bar-what{ flex:1; min-width:0; color:var(--dk-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wt-bar-when{ flex:none; color:var(--dk-muted); }
.wt-stage{ position:relative; flex:1; min-height:0; overflow:auto; }
.wt-why{ display:flex; gap:8px; align-items:baseline; padding:8px 12px; border-top:1px solid var(--dk-line);
  font-size:12.5px; line-height:1.45; }
.wt-why-who{ flex:none; font-weight:700; color:var(--dk-text-2); }
.wt-why-text{ color:var(--dk-text); }

.wt-side{ display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--dk-line); }
.wt-side-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 6px; }
.wt-h{ font-size:12px; font-weight:600; color:var(--dk-text-2); margin:10px 0 6px; }
.wt-side-head .wt-h{ margin:0; }
.wt-count{ font-size:12px; color:var(--dk-muted); }
.wt-list{ flex:1; min-height:0; overflow-y:auto; padding:0 8px 10px; display:flex; flex-direction:column; gap:2px;
  overscroll-behavior:contain; }
.wt-empty-side{ font-size:12.5px; color:var(--dk-muted); padding:8px 6px; }
.wt-line{ display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; border:0; border-radius:8px;
  padding:7px 8px; background:transparent; color:var(--dk-text); font:inherit; cursor:pointer; }
.wt-line:hover{ background:var(--dk-row); }
.wt-line.on{ background:var(--dk-row); box-shadow:inset 3px 0 0 var(--dk-text); }
.wt-line.refused .wt-line-text{ color:var(--dk-red); }
.wt-line-icon{ flex:none; width:20px; text-align:center; font-size:14px; line-height:20px; }
.wt-line-main{ display:flex; flex-direction:column; min-width:0; }
.wt-line-text{ font-size:12.5px; line-height:1.4; overflow-wrap:anywhere; }
.wt-line-time{ font-size:11.5px; color:var(--dk-muted); }
.wt-foot{ padding:8px 16px; font-size:11.5px; color:var(--dk-muted); border-top:1px solid var(--dk-line); }

/* what is drawn on the screen */
.wt-view{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:10px; min-height:100%; box-sizing:border-box; }
.wt-view.fresh{ animation:wtIn .45s ease-out; }
.wt-view.fresh::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background:var(--dk-green); opacity:.7; animation:wtScan .9s ease-out forwards; }
.wt-idle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  min-height:260px; height:100%; padding:20px; box-sizing:border-box; }
.wt-idle-icon{ font-size:34px; opacity:.85; }
.wt-idle-text{ font-size:14px; color:var(--dk-text-2); line-height:1.45; max-width:520px; }
.wt-idle-note{ font-size:12.5px; color:var(--dk-muted); line-height:1.45; max-width:520px; }
.wt-v-head{ display:flex; flex-direction:column; gap:4px; }
.wt-v-title{ font-size:15px; font-weight:700; }
.wt-v-sub{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.wt-v-price{ font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.wt-v-change{ font-size:13px; color:var(--dk-text-2); }
.wt-v-change.up, .wt-tile-value.up, .wt-pnl.up{ color:var(--dk-green); }
.wt-v-change.down, .wt-tile-value.down, .wt-pnl.down{ color:var(--dk-red); }
.wt-v-note{ font-size:12px; color:var(--dk-muted); }
.wt-chart{ height:380px; min-height:260px; flex:1; border-radius:8px; background:var(--dk-panel); }
.wt-chart.small{ height:220px; flex:none; }
.wt-chip{ display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--dk-row); color:var(--dk-text-2); white-space:nowrap; }
.wt-chip.live{ background:var(--dk-green-bg, rgba(14,203,129,.14)); color:var(--dk-green); }
.wt-chip.bad{ background:var(--dk-red-bg, rgba(246,70,93,.14)); color:var(--dk-red); }
.wt-chip.faint{ color:var(--dk-muted); }
.wt-chips{ display:flex; flex-wrap:wrap; gap:6px; }

.wt-price{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:260px; }
.wt-price-sym{ font-size:15px; font-weight:600; color:var(--dk-text-2); }
.wt-price-big{ font-size:48px; font-weight:700; font-variant-numeric:tabular-nums; }

.wt-news{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.wt-story{ display:flex; flex-direction:column; gap:5px; background:var(--dk-panel); border-radius:8px; padding:10px;
  min-width:0; overflow:hidden; }
.wt-story-img{ width:calc(100% + 20px); margin:-10px -10px 4px; aspect-ratio:16/9; object-fit:cover; display:block;
  background:var(--dk-row); }
.wt-story-meta{ font-size:11.5px; color:var(--dk-muted); }
.wt-story-title{ font-size:13.5px; font-weight:600; color:var(--dk-text); text-decoration:none; line-height:1.35; }
a.wt-story-title:hover{ text-decoration:underline; }
.wt-story-sum{ font-size:12.5px; color:var(--dk-text-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; }

.wt-map{ width:100%; border-radius:8px; overflow:hidden; background:var(--dk-panel); }
.wt-map canvas{ display:block; }
.wt-level{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--dk-muted); margin-top:4px; }
.wt-level.now{ background:var(--dk-red); }
.wt-level.watch{ background:var(--dk-amber); }

.wt-rows{ display:flex; flex-direction:column; gap:4px; }
.wt-row{ display:flex; align-items:flex-start; gap:10px; background:var(--dk-panel); border-radius:8px; padding:8px 10px; }
.wt-row-main{ flex:1; min-width:0; }
.wt-row-title{ font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.wt-row-sub{ font-size:12px; color:var(--dk-muted); line-height:1.4; overflow-wrap:anywhere; }
.wt-pnl{ flex:none; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }

.wt-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.wt-tile{ background:var(--dk-panel); border-radius:8px; padding:10px 12px; min-width:0; }
.wt-tile-label{ font-size:11.5px; color:var(--dk-muted); }
.wt-tile-value{ font-size:17px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere; }
.wt-card{ background:var(--dk-panel); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.wt-card-big{ font-size:20px; font-weight:700; }
.wt-card-sub{ font-size:13px; color:var(--dk-text-2); }
.wt-may{ margin:0; padding-left:18px; font-size:13px; line-height:1.55; color:var(--dk-text); }
.wt-may.bad{ color:var(--dk-red); }
.wt-ok{ font-size:13px; color:var(--dk-text-2); background:var(--dk-panel); border-radius:8px; padding:8px 12px; }
.wt-stopped{ font-size:13px; color:var(--dk-text); background:var(--dk-red-bg, rgba(246,70,93,.14));
  box-shadow:inset 0 0 0 1px var(--dk-red); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.wt-stopped.big{ margin:auto 0; padding:16px; }
.wt-stopped-title{ font-size:14px; font-weight:700; color:var(--dk-red); }
.wt-caution{ font-size:12.5px; color:var(--dk-text); background:var(--dk-amber-bg, rgba(240,185,11,.14));
  border-radius:8px; padding:8px 12px; line-height:1.45; }
.wt-code{ margin:0; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.55;
  background:var(--dk-panel); border-radius:8px; padding:10px 12px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* light mode: the page and the panels are one grey, so the boxes on the screen take the row grey */
html[data-theme="light"] .wt-tile, html[data-theme="light"] .wt-row, html[data-theme="light"] .wt-story,
html[data-theme="light"] .wt-card, html[data-theme="light"] .wt-ok, html[data-theme="light"] .wt-code,
html[data-theme="light"] .wt-chart, html[data-theme="light"] .wt-map{ background:var(--dk-row); }

/* the Watch button on each bot in the Team box */
html[data-theme] #screen-profile #teamCard .btn.tm-watch{ display:inline-flex; align-items:center; gap:6px; }
#teamCard .tm-watch::before{ content:""; width:15px; height:15px; background:currentColor;
  -webkit-mask:var(--ico-eye) center/contain no-repeat; mask:var(--ico-eye) center/contain no-repeat; }
#teamCard .tm-side{ display:flex; align-items:center; gap:10px; }
:root{ --ico-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

@keyframes wtPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes wtIn{ from{ opacity:.25; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes wtScan{ from{ transform:translateY(0); opacity:.8; } to{ transform:translateY(240px); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .wt-view.fresh, .wt-view.fresh::after, .wt-live.on::before{ animation:none; }
  .wt-view.fresh::after{ display:none; }
}

/* a phone: the screen on top, the last hour under it */
@media (max-width: 860px){
  .wt-overlay{ padding:0; }
  .wt-window{ height:100%; border-radius:0; }
  .wt-body{ grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) minmax(150px, 34%); }
  .wt-screen{ margin:8px; }
  .wt-side{ border-left:0; border-top:1px solid var(--dk-line); }
  .wt-head{ padding:10px 12px; }
  .wt-status{ font-size:12px; }
  .wt-bar-title{ display:none; }
  .wt-chart{ height:300px; }
  .wt-price-big{ font-size:36px; }
  .wt-news{ grid-template-columns:minmax(0, 1fr); }
  .wt-foot{ display:none; }
}