/* Tape & Wire — markets desk
   Light, paper-ground terminal. IBM Plex trio; amber structural accent. */

:root{
  --ground:#F4F5F8;
  --panel:#FFFFFF;
  --panel2:#EFF1F5;
  --line:#DBDFE7;
  --line-soft:#E9ECF1;
  --ink:#151920;
  --dim:#545D6B;
  --faint:#727B89;
  --accent:#A9640A;
  --accent-line:#E2B575;
  --accent-fill:#FBF1DE;
  --up:#0E7A52;
  --down:#C22A1C;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --r:4px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

button,input{font-family:inherit;font-size:inherit}
button{cursor:pointer}
.btn{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--dim);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:6px 11px;
  white-space:nowrap;
}
.btn:hover{color:var(--ink);border-color:var(--faint)}
.btn.on,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{color:#fff;filter:brightness(1.07)}

/* ------------------------------- masthead ------------------------------- */
.mast{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:12px max(16px,2vw);
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.05}
.brand span{color:var(--accent)}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:3px}

.mast-mid{display:flex;flex-direction:column;gap:7px;min-width:0}
.symbox{display:flex;gap:6px}
.symbox input{
  flex:1;min-width:0;
  background:var(--ground);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12.5px;
  padding:6px 10px;
}
.symbox input::placeholder{color:var(--faint);font-family:var(--sans)}
.chiprow{display:flex;gap:5px;flex-wrap:wrap}
.chiprow button{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--dim);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  padding:3px 8px;
}
.chiprow button:hover{border-color:var(--accent-line);color:var(--accent)}
.chiprow button.on{background:var(--accent-fill);border-color:var(--accent-line);color:var(--accent);font-weight:600}

.mast-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.clockwrap{display:flex;align-items:center;gap:8px}
.clock{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.tz{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint)}
.badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r);padding:3px 7px;color:var(--dim);white-space:nowrap;
}
.badge.live{color:var(--up);border-color:#A9D9C5;background:#E4F3EC}
.badge.pre,.badge.post{color:var(--accent);border-color:var(--accent-line);background:var(--accent-fill)}

@media (max-width:1080px){
  .mast{grid-template-columns:minmax(0,1fr);gap:12px}
  .mast-right{align-items:flex-start}
}

/* ------------------------------- editor ------------------------------- */
.editor{background:var(--accent-fill);border-bottom:1px solid var(--accent-line)}
.editor-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:26px;
  padding:16px max(16px,2vw) 18px;max-width:1680px;margin:0 auto;
}
@media (max-width:820px){.editor-inner{grid-template-columns:minmax(0,1fr);gap:14px}}
.ed-copy h2{margin:0 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.ed-copy p{margin:0;color:var(--dim);font-size:12.5px;line-height:1.55;max-width:60ch}
.ed-copy code{font-family:var(--mono);font-size:11.5px;background:#fff;border:1px solid var(--accent-line);border-radius:3px;padding:0 4px}
.addrow{display:flex;gap:6px;margin-bottom:9px}
.addrow input{
  flex:1;min-width:0;background:#fff;border:1px solid var(--accent-line);border-radius:var(--r);
  color:var(--ink);font-family:var(--mono);font-size:12.5px;padding:6px 10px;
}
.addrow input::placeholder{color:var(--faint);font-family:var(--sans)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  display:inline-flex;align-items:stretch;background:#fff;border:1px solid var(--accent-line);
  border-radius:var(--r);overflow:hidden;font-family:var(--mono);font-size:11.5px;
}
.chip .nm{padding:4px 7px;letter-spacing:.02em}
.chip button{background:none;border:0;border-left:1px solid var(--accent-line);color:var(--faint);padding:0 6px;font-family:var(--mono);font-size:11px}
.chip button:hover{background:var(--accent-fill);color:var(--ink)}
.chip button.x:hover{background:#FBEAE7;color:var(--down)}
.chip button[disabled]{opacity:.3;cursor:default}
.ed-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}

/* ------------------------------- tape ------------------------------- */
.tapewrap{background:var(--panel);border-bottom:1px solid var(--line);min-height:78px}

/* ------------------------------- page ------------------------------- */
.page{max-width:1680px;margin:0 auto;padding:0 max(16px,2vw)}
.band{padding:22px 0 4px}
.band-desk{padding-top:16px}
.band-h{margin:0 0 12px}
.band-h h2{
  margin:0;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.015em;
}
.band-h p{margin:3px 0 0;color:var(--dim);font-size:12.5px;max-width:78ch}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  min-width:0;
}
.card-h{
  display:flex;align-items:center;gap:9px;
  margin:0;padding:8px 11px;
  border-bottom:1px solid var(--line);
  background:var(--panel2);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
}
.card-h .src{margin-left:auto;font-weight:400;letter-spacing:.06em;color:var(--faint);text-transform:none;font-size:10px}
.tv-slot{width:100%}

/* Three columns that always finish level. The grid stretches every column to
   the tallest one, and the card marked .grow in each column expands to take
   up whatever slack is left — so a short widget can never leave a hole. */
.deck{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,4.6fr) minmax(0,3.4fr);
  gap:12px;align-items:stretch;
}
.rail,.stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.card.grow{display:flex;flex-direction:column;flex:1 1 auto}
.card.grow .tv-slot{flex:1 1 auto;min-height:300px}
.card.grow .wire-body{flex:1 1 auto;min-height:360px;max-height:none}

.pairdeck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-width:0}
@media (max-width:700px){.pairdeck{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1280px){
  .deck{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stage{grid-column:span 2;order:-1}
}
@media (max-width:760px){
  .deck{grid-template-columns:minmax(0,1fr)}
  .stage{grid-column:auto}
  .card.grow .tv-slot{min-height:420px}
}

/* ------------------------------- live video ------------------------------- */
.tvframe{position:relative;width:100%;aspect-ratio:16/9;background:#0D1016;max-width:100%}
.tvframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tvnote{margin:0;padding:7px 11px;border-top:1px solid var(--line-soft);color:var(--faint);font-size:11px;line-height:1.45}
.minisel{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--dim);
  font-family:var(--mono);font-size:10px;padding:2px 4px;max-width:118px;
}
.minibtn{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--faint);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;margin-left:4px;
}
.minibtn:hover{color:var(--ink);border-color:var(--faint)}
.minibtn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* Pinned: the card lifts out to the corner. The iframe is only restyled,
   never re-parented, so the stream keeps playing through the switch. */
.tvcard.pinned{
  position:fixed;right:16px;bottom:16px;width:min(384px,calc(100vw - 32px));
  z-index:60;box-shadow:0 12px 34px rgba(16,20,28,.26);border-color:var(--accent-line);
}
.tvcard.pinned .tvnote{display:none}
.tvslotkeep{display:none}
.tvcard.pinned + .tvslotkeep{display:block;height:232px}
@media (max-width:640px){
  .tvcard.pinned{right:8px;bottom:8px;width:calc(100vw - 16px)}
  .tvcard.pinned + .tvslotkeep{height:0}
}

/* ------------------------------- sentiment ------------------------------- */
.sent-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;align-items:start}
@media (max-width:900px){.sent-deck{grid-template-columns:minmax(0,1fr)}}

.headline{display:flex;align-items:flex-end;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.headline .score{font-family:var(--mono);font-size:40px;font-weight:600;line-height:.95;letter-spacing:-.03em}
.headline .verdict{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.15}
.headline .of{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.1em}
.headline .blurb{margin:3px 0 0;color:var(--dim);font-size:12px;line-height:1.45;max-width:42ch}

.meter{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.meter:last-of-type{border-bottom:0}
.meter .mname{font-size:12.5px;font-weight:500}
.meter .mval{font-family:var(--mono);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.meter .mtrack{grid-column:1/-1;position:relative;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.meter .mtrack i{position:absolute;inset:0 auto 0 0;border-radius:3px}
.meter .mfoot{grid-column:1/-1;display:flex;gap:8px;align-items:baseline;font-size:11.5px;color:var(--faint);line-height:1.4}
.meter .mstate{
  font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:2px;padding:0 4px;white-space:nowrap;
}
.mstate.calm{color:var(--up);border-color:#A9D9C5;background:var(--up-fill)}
.mstate.mid{color:var(--accent);border-color:var(--accent-line);background:var(--accent-fill)}
.mstate.hot{color:var(--down);border-color:#EDB6AE;background:var(--down-fill)}
.meter .mdate{margin-left:auto;font-family:var(--mono);font-size:10px}
.method{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);color:var(--faint);font-size:11px;line-height:1.5}

/* ------------------------------- wire ------------------------------- */
.wirectl{display:flex;gap:4px;margin-left:10px}
.pill{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;color:var(--faint);
}
.pill:hover{color:var(--ink)}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.wire-body{max-height:600px;overflow-y:auto}
.item{display:grid;grid-template-columns:3px minmax(0,1fr);border-bottom:1px solid var(--line-soft)}
.item:last-child{border-bottom:0}
.item .stripe{background:var(--line-soft)}
.item.policy .stripe{background:var(--accent)}
.item.politics .stripe{background:#6E6396}
.item-body{padding:9px 12px 11px}
.item-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.item-meta .src{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.item-meta .when{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.item-meta .cat{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:2px;padding:0 4px;color:var(--faint);
}
.item.policy .cat{border-color:var(--accent-line);color:var(--accent);background:var(--accent-fill)}
.item.politics .cat{border-color:#BDB6D6;color:#584E7D;background:#F1EFF7}
.item h3{margin:0;font-family:var(--serif);font-size:14.5px;font-weight:600;line-height:1.35;text-wrap:balance}
.item h3 a{color:var(--ink)}
.item h3 a:hover{color:var(--accent);text-decoration:none}
.item p{margin:4px 0 0;color:var(--dim);font-size:12px;line-height:1.5;max-width:64ch}
.note{padding:14px 12px;color:var(--faint);font-size:12.5px;line-height:1.6}
.note code{font-family:var(--mono);font-size:11.5px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:0 4px;color:var(--dim)}

/* ------------------------------- macro ------------------------------- */
.macro-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.macro-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.macro-card figcaption{
  display:flex;align-items:baseline;gap:8px;padding:8px 11px;border-bottom:1px solid var(--line);
  background:var(--panel2);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
}
.macro-card figcaption em{margin-left:auto;font-style:normal;font-weight:400;letter-spacing:.05em;text-transform:none;color:var(--faint)}
.macro-card img{display:block;width:100%;height:auto;background:#fff}
.macro-card a{display:block}
.credit{margin:10px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--faint)}

/* ------------------------------- footer ------------------------------- */
.foot{margin-top:30px;border-top:1px solid var(--line);background:var(--panel)}
.foot-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;
  max-width:1680px;margin:0 auto;padding:22px max(16px,2vw);
}
.foot-grid h3{margin:0 0 5px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.foot-grid p{margin:0;color:var(--dim);font-size:12px;line-height:1.6;max-width:52ch}
.foot-bar{
  border-top:1px solid var(--line-soft);
  padding:10px max(16px,2vw);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint);
  display:flex;gap:9px;flex-wrap:wrap;
  max-width:1680px;margin:0 auto;
}
.foot-bar .sep{opacity:.45}

/* TradingView's own attribution line, restyled to sit quietly */
.tradingview-widget-copyright{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  padding:5px 11px;color:var(--faint);
}
.tradingview-widget-copyright a{color:var(--faint)}
.tradingview-widget-copyright .blue-text{color:var(--faint)}
.tradingview-widget-copyright a:hover .blue-text{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}