/* Tabuleiro Tropical — terminal skin.
   Deliberately dark-only: this is a trading-desk surface, not a themed page. */

:root {
  /* SURFACES — lifted off pure black. Bright text on #000 haloes and tires the
     eye over a long session; a slightly cool, slightly raised ground is calmer
     without losing the terminal feel. */
  --bg:        #0e1116;
  --panel:     #12161d;
  --panel-hi:  #171d27;
  --line:      #232b38;
  --line-soft: #1a2029;

  /* INK — deliberately desaturated, and the core of the redesign. Panel titles
     and labels used to be amber, so twenty elements of chrome competed with the
     data for attention. Chrome now recedes; saturation always means information. */
  --ink:       #e6ebf3;   /* 14.4:1 on panel — primary values      */
  --ink-2:     #98a3b6;   /*  6.8:1 — secondary                    */
  --ink-3:     #67718a;   /*  3.5:1 — labels, axes, panel titles   */

  /* SEMANTIC MARKS — placed in OKLCH inside the dark-mode lightness band
     [0.48, 0.67] and checked with the palette validator rather than by eye.
     The previous set failed: all five colours sat at L 0.68–0.79, so nothing
     could recede, and up↔down separated by only ΔE 7.3 under deuteranopia.
     This set: worst CVD ΔE 10.0, worst normal-vision ΔE 20.5, all in band.
     Up and down differ in LIGHTNESS as well as hue, so they stay distinct
     even in full colour blindness. */
  --up:        #00ae75;
  --down:      #b8284d;
  --amber:     #c88100;
  --blue:      #3c83ce;

  /* TEXT TIER — these colours also carry numbers. A mark may legally sit below
     3:1 against the surface; text may not. Only `down` needed lifting
     (2.84:1 → 4.55:1). Strokes and text use this tier, fills use the tier above. */
  --up-ink:    #12c184;   /* 6.9:1 */
  --down-ink:  #da566e;   /* 4.6:1 */
  --amber-ink: #e0a52c;   /* 7.4:1 */
  --blue-ink:  #5a97dc;   /* 5.4:1 */

  --amber-dim: #6d4a05;
  --flat:      #7c8699;
  --cyan:      #5a97dc;
  --violet:    #9b8cff;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; overflow: hidden; }

/* ------------------------------------------------------------- top chrome */
header {
  display: flex; align-items: center; gap: 16px;
  padding: 7px 12px;
  background: linear-gradient(#12151b, #0b0d11);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.brand { color: var(--amber-ink); font-weight: 700; letter-spacing: .14em; font-size: 12px; white-space: nowrap; }
.brand small { color: var(--ink-3); font-weight: 400; letter-spacing: .06em; margin-left: 8px; }

.cmd {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  background: #050608; border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 2px; max-width: 620px;
}
.cmd:focus-within { border-color: var(--amber-ink); }
.cmd span { color: var(--amber-ink); font-weight: 700; }
.cmd input {
  flex: 1; background: none; border: 0; outline: 0;
  color: var(--ink); font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
}
.cmd input::placeholder { color: var(--ink-3); letter-spacing: .02em; }

.clock { color: var(--ink-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- the tape */
.tape {
  flex: 0 0 auto; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden;
  background: #0a0c10; border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tape::-webkit-scrollbar { display: none; }
.tape-item {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 14px; border-right: 1px solid var(--line-soft); white-space: nowrap;
}
.tape-item .t-label { color: var(--ink-3); font-size: 11px; letter-spacing: .09em; }
.tape-item .t-price { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.tape-item .t-chg   { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- panel grid */
main {
  flex: 1 1 auto; display: grid; gap: 1px; padding: 1px;
  background: var(--line-soft);
  grid-template-columns: minmax(300px, 1.05fr) minmax(330px, 1.25fr) minmax(320px, 1fr);
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "equities  chart   news"
    "macro     geo     geo";
  overflow: hidden;
}
#p-equities { grid-area: equities; }
#p-chart    { grid-area: chart; }
#p-news     { grid-area: news; }
#p-macro    { grid-area: macro; }
#p-geo      { grid-area: geo; }

.panel { background: var(--panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.panel-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 5px 9px; background: var(--panel-hi);
  border-bottom: 1px solid var(--line);
}
.panel-head h2 {
  margin: 0; font-size: 10.5px; letter-spacing: .15em; color: var(--ink-3);
  font-weight: 700; white-space: nowrap;
}
.panel-head .spacer { flex: 1; }
.panel-head .meta { font-size: 10px; color: var(--ink-3); letter-spacing: .05em; white-space: nowrap; }

/* tabs inside a panel head */
.tabs { display: flex; gap: 2px; }
.tab {
  background: none; border: 1px solid transparent; color: var(--ink-3);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  padding: 2px 7px; cursor: pointer; border-radius: 2px;
}
.tab:hover { color: var(--ink-2); background: #1a1e26; }
.tab[aria-selected="true"] { color: var(--amber-ink); border-color: var(--amber-dim); background: #221a08; }

.panel-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.panel-body::-webkit-scrollbar { width: 8px; height: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: #232833; border-radius: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ quote table */
table.q { width: 100%; border-collapse: collapse; }
table.q th {
  position: sticky; top: 0; z-index: 1;
  background: #0f1216; color: var(--ink-3);
  font-size: 9.5px; letter-spacing: .11em; font-weight: 500; text-align: right;
  padding: 4px 8px; border-bottom: 1px solid var(--line);
}
table.q th:first-child { text-align: left; }
table.q td {
  padding: 3px 8px; text-align: right; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line-soft); font-size: 12px; white-space: nowrap;
}
table.q td:first-child { text-align: left; }
table.q tbody tr { cursor: pointer; }
table.q tbody tr:hover { background: #161a21; }
table.q tbody tr.sel { background: #1a212c; box-shadow: inset 2px 0 0 var(--amber-ink); }
.sym { color: var(--ink); font-weight: 600; letter-spacing: .03em; }
.nm  { color: var(--ink-3); font-size: 10px; display: block; margin-top: 1px;
       overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

/* Direction is never color-alone: an arrow glyph and a signed number carry it
   too, so the table survives red/green colour-vision deficiency and print. */
.up   { color: var(--up-ink); }
.down { color: var(--down-ink); }
.flat { color: var(--flat); }
.arrow { font-size: 9px; margin-right: 2px; }

.spark { display: block; }

/* ------------------------------------------------------------------ chart */
.chart-wrap { position: relative; height: 100%; display: flex; flex-direction: column; }
.chart-hd { padding: 8px 12px 2px; }
.chart-hd .c-sym { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.chart-hd .c-name { color: var(--ink-3); font-size: 11px; margin-left: 8px; }
.chart-hd .c-px { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.chart-hd .c-chg { font-size: 12.5px; font-variant-numeric: tabular-nums; margin-left: 10px; }
.chart-stats { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 12px; color: var(--ink-3); font-size: 10.5px; }
.chart-stats b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart-svg { flex: 1 1 auto; min-height: 0; }

.tip {
  position: absolute; pointer-events: none; opacity: 0;
  background: #050608; border: 1px solid var(--line);
  padding: 5px 8px; font-size: 11px; border-radius: 2px; z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,.6); white-space: nowrap;
  transition: opacity .08s;
}
.tip .t-d { color: var(--ink-3); font-size: 10px; }
.tip .t-v { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------------------------------------------- news */
.news-item { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); cursor: pointer; display: block; text-decoration: none; }
.news-item:hover { background: #161a21; }
.news-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.news-src { color: var(--ink-3); font-size: 9.5px; letter-spacing: .1em; font-weight: 600; }
.news-time { color: var(--ink-3); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.news-title { color: var(--ink); font-size: 12px; line-height: 1.35; }
.news-item:hover .news-title { color: var(--amber-ink); }

/* ------------------------------------------------------------ macro table */
.macro-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
             padding: 5px 10px; border-bottom: 1px solid var(--line-soft); }
.macro-lbl { color: var(--ink-2); font-size: 11px; letter-spacing: .05em; }
.macro-lbl small { display: block; color: var(--ink-3); font-size: 9.5px; letter-spacing: .04em; }
.macro-val { color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.macro-dlt { font-size: 10.5px; font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }

/* ------------------------------------------------------------- prediction */
.pm-item { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.pm-q { color: var(--ink); font-size: 11.5px; line-height: 1.3; margin-bottom: 4px; }
.pm-bar { height: 4px; background: #1b1f27; border-radius: 2px; overflow: hidden; }
.pm-fill { height: 100%; background: var(--blue); border-radius: 2px; }
.pm-foot { display: flex; justify-content: space-between; margin-top: 3px; font-size: 9.5px; color: var(--ink-3); }
.pm-prob { color: var(--blue-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- messages */
.msg { padding: 14px; color: var(--ink-3); font-size: 11px; line-height: 1.5; }
.msg b { color: var(--ink-2); display: block; margin-bottom: 4px; letter-spacing: .06em; }
.msg code { color: var(--blue-ink); background: #11151b; padding: 1px 4px; border-radius: 2px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot.live { background: var(--up-ink); }
.dot.stale { background: var(--amber-ink); }
.dot.dead { background: var(--down-ink); }

.skel { padding: 10px; }
.skel div { height: 9px; background: linear-gradient(90deg,#12151b,#1b1f27,#12151b);
            background-size: 200% 100%; animation: sh 1.3s infinite; margin-bottom: 7px; border-radius: 2px; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* --------------------------------------------------------------- help bar */
footer {
  flex: 0 0 auto; display: flex; gap: 16px; align-items: center;
  padding: 4px 12px; background: #0a0c10; border-top: 1px solid var(--line);
  font-size: 10px; color: var(--ink-3); letter-spacing: .06em; overflow-x: auto; white-space: nowrap;
}
footer kbd {
  background: #191d25; border: 1px solid var(--line); border-bottom-width: 2px;
  padding: 1px 5px; border-radius: 3px; color: var(--ink-2); font-family: var(--mono); font-size: 9.5px;
}

@media (max-width: 1100px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(240px, 1fr));
    grid-template-areas: "chart chart" "equities news" "geo geo";
    overflow-y: auto;
  }
  #p-macro { display: none; }
}

/* ===================================================== FUNDAMENTAL BRIEFING */
.fa-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 5, 7, .93); backdrop-filter: blur(3px);
  display: flex; flex-direction: column;
}
.fa-overlay[hidden] { display: none !important; }

.fa-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; background: var(--panel-hi); border-bottom: 1px solid var(--line);
}
.fa-head .fa-tick { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.fa-head .fa-nm { color: var(--ink-2); font-size: 12px; }
.fa-head .fa-sec { color: var(--ink-3); font-size: 10px; letter-spacing: .1em; border: 1px solid var(--line); padding: 2px 7px; border-radius: 2px; }
.fa-head .spacer { flex: 1; }
.fa-close {
  background: none; border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  padding: 4px 10px; cursor: pointer; border-radius: 2px;
}
.fa-close:hover { border-color: var(--amber-dim); color: var(--amber-ink); }

.fa-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; }
.fa-body::-webkit-scrollbar { width: 9px; }
.fa-body::-webkit-scrollbar-thumb { background: #262b36; border-radius: 4px; }

.fa-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); margin-bottom: 12px; }
.fa-card { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 11px 13px; min-width: 0; }
.fa-card > h3 {
  margin: 0 0 9px; font-size: 9.5px; letter-spacing: .16em; color: var(--ink-3);
  font-weight: 700; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px;
}
.fa-card.wide { grid-column: 1 / -1; }

/* key numbers */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px 14px; }
.kv div { min-width: 0; }
.kv .k { color: var(--ink-3); font-size: 9px; letter-spacing: .09em; display: block; margin-bottom: 2px; }
.kv .v { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv .v small { font-size: 10px; color: var(--ink-3); font-weight: 400; margin-left: 2px; }

/* piotroski */
.pio-grid { display: grid; gap: 3px; }
.pio-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; padding: 2px 0; }
.pio-mark { width: 15px; text-align: center; font-weight: 700; font-size: 10px; }
.pio-row.pass .pio-mark { color: var(--up); }
.pio-row.fail .pio-mark { color: var(--down); }
.pio-row span:last-child { color: var(--ink-2); }
.pio-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.pio-score { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* history table */
table.hist { width: 100%; border-collapse: collapse; font-size: 11px; }
table.hist th { color: var(--ink-3); font-size: 9px; letter-spacing: .09em; text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--line); font-weight: 500; }
table.hist th:first-child { text-align: left; }
table.hist td { padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
table.hist td:first-child { text-align: left; color: var(--ink); }
.src-note { color: var(--ink-3); font-size: 10px; line-height: 1.5; margin-top: 9px; }
.disclaimer {
  color: var(--ink-3); font-size: 10px; line-height: 1.55; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: 3px; margin-top: 4px;
}
.fa-loading { padding: 40px; text-align: center; color: var(--ink-3); font-size: 12px; letter-spacing: .1em; }

/* Google-News-proxied publishers are marked so their provenance is visible. */
.news-src .via { color: var(--ink-3); margin-left: 3px; font-weight: 400; cursor: help; }

/* ================================================== BRIEF (simple mode) ===
   The default surface: plain language first, dense terminal one key away.
   Deliberately lower information density than the panels — for a reader, not
   an operator. */
.brief {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background: radial-gradient(1200px 600px at 50% -10%, #12161d 0%, var(--bg) 62%);
}
.brief[hidden] { display: none !important; }
.brief-inner { max-width: 860px; margin: 0 auto; padding: 26px 22px 60px; }

.brief-top { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.brief-top .brand { font-size: 12px; }
.brief-top .spacer { flex: 1; }
.brief-switch {
  background: none; border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  padding: 6px 13px; cursor: pointer; border-radius: 2px;
}
.brief-switch:hover { border-color: var(--amber-dim); color: var(--amber-ink); }

.brief-hero { margin-bottom: 26px; }
.brief-kicker { color: var(--ink-3); font-size: 10.5px; letter-spacing: .18em; margin-bottom: 8px; }
.brief-num { font-size: 60px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.brief-sub { color: var(--ink-3); font-size: 11.5px; margin-top: 8px; letter-spacing: .04em; }

.brief-story { margin-bottom: 30px; }
.brief-story p {
  color: var(--ink); font-size: 15px; line-height: 1.62; margin: 0 0 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.brief-story p.note { color: var(--ink-3); font-size: 12.5px; }
.brief-story b { color: var(--amber-ink); font-weight: 600; }

.brief-h { color: var(--ink-3); font-size: 10px; letter-spacing: .18em; margin: 0 0 12px; font-weight: 600; }

.driver { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
          padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.driver-name { color: var(--ink); font-size: 13.5px; }
.driver-move { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.driver-effect { grid-column: 1 / -1; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }

.hold-row { display: grid; grid-template-columns: 88px 76px 1fr; gap: 12px; align-items: baseline;
            padding: 8px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.hold-row:hover { background: #12161d; }
.hold-sym { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.hold-chg { font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.hold-why { color: var(--ink-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sig-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.sig {
  border: 1px solid var(--line); border-radius: 2px; padding: 5px 9px;
  font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sig b { color: var(--ink-3); font-weight: 400; margin-right: 5px; letter-spacing: .06em; }
.brief-foot { color: var(--ink-3); font-size: 10.5px; line-height: 1.6; margin-top: 34px;
              border-top: 1px solid var(--line-soft); padding-top: 14px; }
.brief-loading { padding: 90px 0; text-align: center; color: var(--ink-3); font-size: 12px; letter-spacing: .14em; }

/* ------------------------------------------------ analysis (no verdict) */
.norm-hero { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.norm-hero .k { color: var(--ink-3); font-size: 9px; letter-spacing: .09em; display: block; margin-bottom: 3px; }
.big-num { display: block; font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.norm-arrow { color: var(--ink-3); font-size: 22px; padding-bottom: 4px; }
/* Caveats are part of the finding, so they read as body text in a quiet box,
   not as an alarm: amber rule, no fill colour competing with the numbers. */
.norm-warn { border-left: 2px solid var(--amber-dim); padding: 2px 0 2px 10px; margin-top: 10px; }
.norm-warn p { margin: 0 0 6px; color: var(--ink-2); font-size: 11px; line-height: 1.5; }
.disclaimer b { color: var(--ink-2); font-weight: 600; }