/* =====================================================================
   desk.css · curves.watch business-grade desk layer
   Loaded after base.css + theme.css. Inherits the theme tokens and adds
   the instrument-panel components (panels, tiles, chart boxes, controls).
   Palette is the icon's: blue #4a7bff -> cyan #46dfff on navy #05070d.
   ===================================================================== */
:root{
  --grad:linear-gradient(120deg,#4a7bff 0%,#3aa8ff 48%,#46dfff 100%);
  --gradsoft:linear-gradient(120deg,rgba(74,123,255,.16),rgba(70,223,255,.10));
  --card:#0a0f1e; --card2:#0d1424;
  --hair2:1px solid rgba(120,146,226,.18);
  --glow:0 0 0 1px rgba(70,223,255,.10), 0 18px 48px -28px rgba(74,123,255,.75);
  --r:10px;
}

/* ---------- section furniture ---------- */
.cw-sec{padding:46px 0}
.cw-kick{color:var(--accent2)}
.cw-sechead h2{background:none}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:var(--hair);border-radius:var(--r);overflow:hidden;position:relative;
}
.panel+.panel{margin-top:16px}
.panel-h{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:var(--hair);background:rgba(255,255,255,.014);
}
.panel-h h3{margin:0;font-size:13px;letter-spacing:.01em}
.panel-h .sub{font-family:var(--mono);font-size:11px;color:var(--body);opacity:.8}
.panel-h .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-b{padding:16px}
.panel-b.tight{padding:0}

/* ---------- hero desk ---------- */
.cw-hero{position:relative;overflow:hidden;border-bottom:var(--hair);
  background:
    radial-gradient(1200px 520px at 78% -18%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%),
    radial-gradient(800px 420px at 8% 120%,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 70%),
    var(--bg);
}
.cw-hero-inner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:30px;padding:34px 0 30px;align-items:start}
@media(max-width:1080px){.cw-hero-inner{grid-template-columns:1fr;gap:22px}}
.cw-hero h1{max-width:16ch}
.cw-hero .cw-lede{font-size:16.5px;line-height:1.62;max-width:60ch;color:var(--body)}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.trust li{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:var(--hair);border-radius:999px;padding:6px 11px;color:var(--body);
  background:rgba(255,255,255,.02)
}
.trust li b{color:var(--ink);font-weight:600}

.deskcard{
  background:linear-gradient(180deg,rgba(16,24,51,.86),rgba(9,14,28,.94));
  border:var(--hair);border-radius:var(--r);backdrop-filter:blur(6px);box-shadow:var(--glow)
}
.deskbar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--body)
}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 4px rgba(70,223,255,.14)}
.simtag{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  border:1px solid rgba(246,181,69,.4);color:var(--warn);border-radius:999px;padding:3px 9px
}
.chart{width:100%;display:block}
.chart.hero{height:392px}
@media(max-width:1080px){.chart.hero{height:320px}}
.chart.md{height:300px}
.chart.sm{height:230px}
.chart.xs{height:180px}
.chart.lg{height:360px}

/* readout strip under a chart */
.readout{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--hair);border-top:var(--hair)
}
@media(max-width:820px){.readout{grid-template-columns:repeat(2,minmax(0,1fr))}}
.readout div{background:rgba(8,12,24,.72);padding:11px 14px;min-width:0}
.readout span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--body);opacity:.75;line-height:1.3;min-height:25px}
.readout b{display:block;font-family:var(--mono);font-size:15px;color:var(--ink);margin-top:4px;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readout b.up{color:var(--ok)}
.readout b.warn{color:var(--warn)}
.readout b.hi{color:var(--accent2)}

/* ---------- KPI tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.tile{
  background:linear-gradient(180deg,rgba(16,24,51,.66),rgba(9,14,28,.72));
  border:var(--hair);border-radius:var(--r);padding:14px 15px;position:relative;overflow:hidden
}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);opacity:.75}
.tile .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--body);opacity:.8;display:block;min-height:26px}
.tile b{display:block;font-family:var(--mono);font-size:clamp(17px,2vw,22px);color:var(--ink);
  line-height:1.15;margin-top:6px;font-weight:600}
.tile em{display:block;font-family:var(--mono);font-size:11px;font-style:normal;color:var(--body);
  opacity:.82;margin-top:6px}
.tile.ok b{color:var(--ok)} .tile.hi b{color:var(--accent2)} .tile.warn b{color:var(--warn)}

/* ---------- desk grid ---------- */
.dgrid{display:grid;gap:16px}
.dgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dgrid.c2u{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media(max-width:980px){.dgrid.c2,.dgrid.c2u{grid-template-columns:1fr}}

/* ---------- controls ---------- */
.ctrls{display:grid;gap:14px}
.ctrl{display:grid;gap:6px}
.ctrl .lab{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--body)}
.ctrl .lab b{margin-left:auto;color:var(--ink);font-size:13px;letter-spacing:0}
.ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;margin:6px 0 2px;
  background:linear-gradient(90deg,var(--accent) var(--fill,0%),rgba(120,146,226,.22) var(--fill,0%))
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;cursor:pointer;
  border:2px solid var(--accent);box-shadow:0 0 0 4px rgba(74,123,255,.22)
}
.ctrl input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);cursor:pointer}
.ctrl .hint{font-family:var(--mono);font-size:10.5px;color:var(--body);opacity:.7}

.seg{display:inline-flex;border:var(--hair);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.02)}
.seg button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:var(--body);padding:6px 12px;cursor:pointer
}
.seg button[aria-pressed="true"]{background:var(--gradsoft);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(70,223,255,.28)}

.field-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field-inline input[type=text]{
  width:min(220px,100%);padding:11px 13px;background:rgba(6,10,22,.9);border:var(--hair);
  color:var(--ink);border-radius:var(--r);font:14px var(--mono)
}

/* ---------- legend ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 14px;border-top:var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--body)}
.legend i{width:16px;height:3px;border-radius:2px;display:inline-block;margin-right:7px;vertical-align:middle}
.legend .l1{background:#4a7bff} .legend .l2{background:#46dfff}
.legend .l3{background:linear-gradient(90deg,#4a7bff,#46dfff)}
.legend .l4{background:repeating-linear-gradient(90deg,#f6b545 0 4px,transparent 4px 8px)}
.legend span{display:inline-flex;align-items:center}

/* ---------- table ---------- */
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:var(--hair);white-space:nowrap}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--body);opacity:.85;font-weight:500}
.tbl td{font-family:var(--mono);color:var(--body)}
.tbl td:first-child{color:var(--ink)}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tbl td.n{text-align:right}
.tbl tbody tr:last-child td{border-bottom:0}

/* ---------- cohort rows ---------- */
.coh{display:grid;gap:10px}
.cohrow{display:grid;grid-template-columns:54px minmax(0,1fr) 68px 96px;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px}
@media(max-width:620px){.cohrow{grid-template-columns:48px minmax(0,1fr) 62px;gap:8px}.cohrow .meta{display:none}}
.cohrow .w{color:var(--ink)}
.cohrow .track{height:6px;border-radius:99px;background:rgba(120,146,226,.18);overflow:hidden}
.cohrow .track i{display:block;height:100%;background:var(--grad);width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.cohrow .pct{text-align:right;color:var(--accent2)}
.cohrow .meta{text-align:right;color:var(--body);opacity:.75}

/* ---------- misc ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;border:var(--hair);border-radius:999px;padding:5px 11px;color:var(--body)}
.pill.g{color:var(--ok);border-color:rgba(71,211,155,.4)}
.pill.w{color:var(--warn);border-color:rgba(246,181,69,.4)}
.note{font-size:12.5px;color:var(--body);opacity:.82;margin:10px 0 0}
.echarts-host{width:100%}
.formula{
  font-family:var(--mono);font-size:12.5px;color:var(--chart-ink,#cfd6f2);
  background:rgba(6,10,22,.7);border:var(--hair);border-radius:var(--r);padding:12px 14px;
  overflow-x:auto;white-space:nowrap
}
.formula b{color:var(--accent2);font-weight:600}
.brand .mk{width:26px;height:26px;border-radius:50%;display:block}
.foot-grid .mono{color:var(--ink)}