/* static/dash/chart_at.css
   AT Chart — TERMINAL (BLACK GLASS + CRACKED UNDERLAY)
   Goals (per your notes):
   - Background: PURE BLACK (no gradients)
   - Objects/buttons: ~85% black “glass”
   - “Cracked glass” texture sits UNDER objects (inside each glass panel), not on page bg
   - Remove bold typography (no heavy weights)
   - Add thin subtle border + hover/focus
   - DO NOT break scroll contract (right panel scroll stays inside)
   - NO ROUNDED CORNERS
*/

/* =========================
   TOKENS
   ========================= */
:root{
  --at-bg: #000;

  /* glass (85% black) */
  --at-glass: rgba(0,0,0,0.85);
  --at-glass-2: rgba(0,0,0,0.80);

  /* thin borders */
  --at-bd: rgba(255,255,255,0.08);
  --at-bd-hover: rgba(255,255,255,0.14);

  /* text */
  --at-text:  rgba(255,255,255,0.92);
  --at-dim:   rgba(255,255,255,0.76);
  --at-faint: rgba(255,255,255,0.56);

  /* focus ring */
  --at-focus: rgba(255,255,255,0.18);

  /* fonts */
  --at-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --at-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* layout */
  --chartat-h: 620px;
  --chartat-gap: 12px;
  --chartat-pad: 12px;

  /* button sizing */
  --at-btn-pad-y: 16px;
  --at-btn-pad-x: 16px;
  --at-btn-minh: 66px;

  /* blur */
  --at-blur: 10px;

  /* shadow */
  --at-shadow: 0 18px 36px rgba(0,0,0,0.92);

  /* crack intensity (very subtle) */
  --at-crack-a: rgba(255,255,255,0.040);
  --at-crack-b: rgba(255,255,255,0.026);
}

/* hard rule: never round */
.chart-at-root,
.chart-at-root *{ border-radius:0 !important; }

/* =========================
   ROOT + LAYOUT
   ========================= */
.chart-at-root{
  width:100%;
  min-width:0;
  height:auto;
  color: var(--at-text);
  background: var(--at-bg) !important; /* ✅ pure black */
}

/* main row (hard height) */
.chart-toprow{
  display:flex;
  gap: var(--chartat-gap);
  align-items:stretch;
  min-width:0;

  height: var(--chartat-h) !important;
  min-height: var(--chartat-h) !important;
  max-height: var(--chartat-h) !important;
}

/* =========================
   GLASS PANEL PRIMITIVE
   (cracks underlay INSIDE each object)
   ========================= */
.chart-box,
.chart-polygon__hdr,
.chart-date__navbtn,
.chart-date__label,
.chart-at__pick,
.chart-at__focus-card,
.chart-at__ev,
.evalbar,
.eval-col{
  position:relative;
  isolation:isolate;

  background: var(--at-glass) !important;   /* ✅ ~85% black glass */
  border: 1px solid var(--at-bd) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    var(--at-shadow);

  -webkit-backdrop-filter: blur(var(--at-blur));
  backdrop-filter: blur(var(--at-blur));
}

/* cracked underlay (UNDER the glass surface, not page bg) */
.chart-box::before,
.chart-polygon__hdr::before,
.chart-date__navbtn::before,
.chart-date__label::before,
.chart-at__pick::before,
.chart-at__focus-card::before,
.chart-at__ev::before,
.evalbar::before,
.eval-col::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    repeating-linear-gradient(135deg,
      var(--at-crack-a) 0 1px,
      rgba(255,255,255,0.00) 1px 22px),
    repeating-linear-gradient(45deg,
      var(--at-crack-b) 0 1px,
      rgba(255,255,255,0.00) 1px 30px);

  opacity:0.42;              /* subtle */
  mix-blend-mode: screen;    /* “light catching scratches” */
}

/* content sits above cracks */
.chart-box > *,
.chart-polygon__hdr > *,
.chart-date__navbtn > *,
.chart-date__label > *,
.chart-at__pick > *,
.chart-at__focus-card > *,
.chart-at__ev > *,
.evalbar > *,
.eval-col > *{
  position:relative;
  z-index:1;
}

/* hover + focus (thin “kellie/delicate” border) */
.chart-box:hover,
.chart-polygon__hdr:hover,
.chart-date__navbtn:hover,
.chart-date__label:hover,
.chart-at__pick:hover,
.chart-at__focus-card:hover,
.chart-at__ev:hover,
.evalbar:hover,
.eval-col:hover{
  border-color: var(--at-bd-hover) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 40px rgba(0,0,0,0.95);
}

.chart-date__navbtn:focus-visible,
.chart-date__label:focus-visible,
.chart-at__pick:focus-visible{
  outline:none !important;
  border-color: var(--at-bd-hover) !important;
  box-shadow:
    0 0 0 2px var(--at-focus) inset,
    0 20px 40px rgba(0,0,0,0.95);
}

/* =========================
   LEFT: CHART BOX
   ========================= */
.chart-polygon.chart-box{
  flex: 1 1 auto;
  min-width:0;

  height: var(--chartat-h) !important;
  min-height: var(--chartat-h) !important;
  max-height: var(--chartat-h) !important;

  overflow:hidden !important;
}

/* inner layout */
.chart-polygon{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:0;

  padding: var(--chartat-pad);
  box-sizing:border-box;
}

/* header strip (same glass primitive; just spacing) */
.chart-polygon__hdr{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:6px;

  padding: 10px 12px 12px 12px;
}

/* title/meta — remove heavy bold */
.chart-polygon__title{
  font-family: var(--at-sans);
  font-weight: 600;              /* was 700 -> softer */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.10;
  color: var(--at-text);
}
.chart-polygon__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color: var(--at-dim);
  font-size: 12px;
  font-family: var(--at-sans);
  font-weight: 400;
  opacity:0.92;
}
.chart-polygon__metaitem{ padding: 1px 0; }

/* plot wrapper */
.chart-polygon__chart{
  flex: 1 1 auto;
  min-height:0;
  min-width:0;

  width:100%;
  height:auto !important;
  max-height:none !important;

  padding-bottom: 10px;

  overflow:hidden !important;
  position: relative !important;
  box-sizing:border-box;

  background: #000 !important; /* ✅ pure black */
}

/* Force plotly to respect parent sizing + black plane */
.chart-polygon__chart .js-plotly-plot,
.chart-polygon__chart .plot-container,
.chart-polygon__chart .svg-container{
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  background: #000 !important;
}

/* Hard-hide Plotly modebar */
.chart-at-root .modebar,
.chart-at-root .modebar-container{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* =========================
   RIGHT: PANEL (hard height + inner scroll) ✅ keep scroll
   ========================= */
.chart-side{
  width: 460px;
  min-width: 420px;

  height: var(--chartat-h) !important;
  min-height: var(--chartat-h) !important;
  max-height: var(--chartat-h) !important;

  display:flex;
  flex-direction:column;
  gap: var(--chartat-gap);

  overflow:hidden !important; /* ✅ scroll inside only */
  min-height:0;
}

/* inner scroller */
.chart-side__scroll{
  flex: 1 1 auto;
  min-height:0;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  display:flex;
  flex-direction:column;
  gap: var(--chartat-gap);

  padding: 0;

  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.20) rgba(255,255,255,0.06);
}
.chart-side__scroll::-webkit-scrollbar{ width:8px; }
.chart-side__scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); }
.chart-side__scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.20); border:0; }

/* =========================
   DATE BOX
   ========================= */
.chart-date{ padding: 12px; }

.chart-date__title{
  font-family: var(--at-sans);
  color: var(--at-dim);
  font-weight: 600;              /* softer */
  letter-spacing: 0.10em;
  font-size: 12px;
  margin-bottom: 8px;
  text-transform:uppercase;
}

.chart-date__carousel{
  display:flex;
  align-items:stretch;
  gap:10px;
}

/* nav buttons */
.chart-date__navbtn{
  width:54px;
  min-width:54px;
  height:54px;

  cursor:pointer;
  font-family: var(--at-sans);
  color: rgba(255,255,255,0.92);
  font-weight: 600;              /* softer */
  letter-spacing: 0.10em;

  outline:none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.chart-date__navbtn:hover{ transform: translateY(-1px); }

.chart-date__label{
  flex:1 1 auto;
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family: var(--at-sans);
  color: var(--at-text);
  font-weight: 600;              /* softer */
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform:uppercase;

  outline:none !important;
}

/* =========================
   AT PANEL
   ========================= */
.chart-at{ padding: 12px; }

.chart-at__title{
  font-family: var(--at-sans);
  color: var(--at-dim);
  font-weight: 600;              /* softer */
  letter-spacing: 0.10em;
  font-size: 12px;
  margin-bottom: 8px;
  text-transform:uppercase;
}
.chart-at__meta{
  font-family: var(--at-sans);
  color: var(--at-dim);
  font-size: 12px;
  margin-bottom: 6px;
  opacity:0.92;
  font-weight: 400;
}
.chart-at__detail{
  color: rgba(255,255,255,0.90);
  font-size: 13px;
  margin-bottom: 12px;
  line-height:1.35;
  font-family: var(--at-sans);
  font-weight: 400;
}

/* buttons list */
.chart-at__btns{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* PICK BUTTONS */
.chart-at__pick{
  width:100%;
  text-align:left;
  cursor:pointer;

  min-height: var(--at-btn-minh);

  font-family: var(--at-sans);
  color: rgba(255,255,255,0.92);
  font-weight: 400;

  padding: var(--at-btn-pad-y) var(--at-btn-pad-x);

  outline:none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.chart-at__pick:hover{ transform: translateY(-1px); }

/* selected */
.chart-at__pick.is-on{
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 22px 44px rgba(0,0,0,0.97);
}

/* label inside button */
.chart-at__btn-label{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.chart-at__btn-name{
  font-weight: 600;              /* softer than 700, still header-ish */
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* meta pill */
.chart-at__btn-meta{
  font-size: 12px;
  opacity: 0.92;

  padding: 4px 10px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);

  font-family: var(--at-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  white-space:nowrap;
}

/* separators */
.chart-at__hr{
  border:0;
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 12px 0;
}

/* =========================
   FOCUS / EVIDENCE / EVAL
   ========================= */
.chart-at__focus-h,
.eval-head{
  font-family: var(--at-sans);
  color: var(--at-dim);
  letter-spacing: 0.10em;
  font-weight: 600;              /* softer */
  font-size: 12px;
  margin-bottom: 8px;
  text-transform:uppercase;
}

.chart-at__focus-card{ padding: 10px; }
.chart-at__focus-name{
  font-family: var(--at-sans);
  font-weight: 600;              /* softer */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--at-text);
  margin-bottom: 6px;
}
.chart-at__focus-txt{
  color: var(--at-dim);
  font-size: 13px;
  line-height: 1.35;
  margin: 4px 0;
  font-family: var(--at-sans);
  font-weight: 400;
}
.chart-at__focus-txt.dim{ color: var(--at-faint); }

.chart-at__evlist{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chart-at__ev{ padding: 10px; }
.chart-at__ev-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 6px;
}
.chart-at__ev-id{
  font-family: var(--at-mono);
  font-weight: 600;              /* was 900 -> softer */
  color: rgba(255,255,255,0.84);
}
.chart-at__ev-title{
  font-family: var(--at-sans);
  font-weight: 600;              /* softer */
  letter-spacing: 0.02em;
  color: var(--at-text);
}
.chart-at__ev-txt{
  color: var(--at-dim);
  font-size: 13px;
  line-height: 1.35;
  font-family: var(--at-sans);
  font-weight: 400;
}
.chart-at__hint{
  color: var(--at-dim);
  font-size: 12px;
  opacity: 0.9;
  font-family: var(--at-sans);
  font-weight: 400;
}

.evalbar{ padding: 12px; }
.eval-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.eval-col{ padding: 10px; min-width:0; }

.eval-h{
  font-family: var(--at-sans);
  color: var(--at-text);
  font-weight: 600;              /* softer */
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.eval-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px dashed rgba(255,255,255,0.10);
}
.eval-row:first-of-type{ border-top: 0; }
.eval-k{
  color: var(--at-dim);
  font-size: 12px;
  font-family: var(--at-mono);
  font-weight: 400;
}
.eval-v{
  color: var(--at-text);
  font-weight: 600;              /* softer */
  font-size: 12px;
  text-align:right;
  font-family: var(--at-mono);
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 920px){
  :root{ --chartat-h: clamp(280px, 46vh, 440px); }

  .chart-toprow{
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .chart-polygon.chart-box{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .chart-polygon__chart{
    height: clamp(280px, 46vh, 440px) !important;
    flex: 0 0 auto !important;
  }

  .chart-side{
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .chart-side__scroll{ overflow: visible !important; }

  .eval-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  @media (min-width: 520px){
    .eval-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
}

/* ===========================
   finance_fx_full — SAFE (no clipping)
   =========================== */
.finfx-root,
.finance-fx-full{
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  overflow: visible !important;
}
.finfx-sec{
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  overflow: visible !important;
}
.finfx-sec--chart{
  min-height: 0;
  overflow: visible !important;
  padding-bottom: 12px;
}
.finfx-sec--chart .chart-at-root,
.finfx-sec--chart .chart-toprow,
.finfx-sec--chart .chart-polygon,
.finfx-sec--chart .chart-side{
  min-height: 0;
}

/* =========================
   RIGHT PANEL — SCROLL FIX
   - default: scroll on .chart-side (fallback)
   - if .chart-side__scroll exists: lock parent + scroll inside
   ========================= */

/* ✅ Fallback: if renderer does NOT provide .chart-side__scroll */
.chart-side{
  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.20) rgba(255,255,255,0.06);
}
.chart-side::-webkit-scrollbar{ width:8px; }
.chart-side::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); }
.chart-side::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.20); border:0; }

/* ✅ Preferred contract: when inner scroller exists, parent must NOT scroll */
@supports selector(:has(*)){
  .chart-side:has(.chart-side__scroll){
    overflow: hidden !important;
  }
}

/* Ensure inner scroller can actually take height */
.chart-side__scroll{
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}