/* Economic calendar widget — public /calendar/ page.
   The rules are ported from the dashboard's CALENDAR page block so both surfaces
   look the same; the dashboard-only design tokens the block reads are re-declared
   on .fxcal here, exactly the way /course/course.css re-declares them for the
   public course. Everything is scoped under .fxcal so nothing leaks into the
   landing-page chrome in page.css. */

.fxcal {
  --surface: #151a22;
  --surface2: #1a2030;
  --border:  #1f2733;
  --accent-rgb: 0, 212, 255;
  --muted:   #8fa3b8;
  --muted-text: #91a6bd;
  --sub-text: #b3c4d6;
  --text:    #c8d6e5;
  --ui-meta: 12px;
  --ui-body: 11px;
  --ui-label: 12px;
  color: var(--text);
}

.cal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-tab {
  padding: 10px 18px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  color: var(--sub-text); font-family: var(--sans); font-size: var(--ui-meta); font-weight: 700; letter-spacing: 1.4px;
  transition: border-color .15s, color .15s, background .15s;
}
.cal-tab:hover { border-color: rgba(var(--accent-rgb), 0.5); color: #fff; }
.cal-tab.active { border-color: var(--accent); color: #fff; background: rgba(var(--accent-rgb), 0.10); }
.cal-tab-n { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cal-tab.active .cal-tab-n { color: var(--accent); }

.cal-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.cal-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-filter-label { font-size: var(--ui-body); font-weight: 700; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }
.cal-chip {
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.6px;
  transition: border-color .12s, color .12s, background .12s;
}
.cal-chip:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.45); }
.cal-chip.on { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
/* Impact chips keep their own colour when active so the legend and the rows
   agree without a separate key. */
.cal-chip.imp-high.on { border-color: var(--sell); background: rgba(255,61,87,0.14); }
.cal-chip.imp-medium.on { border-color: #ffab3d; background: rgba(255,171,61,0.14); }
.cal-chip.imp-low.on { border-color: #6b8199; background: rgba(107,129,153,0.16); }
.cal-chip-mini { padding: 5px 9px; font-size: 10px; letter-spacing: 1.2px; font-weight: 700; }

/* Table left, reaction panel right. The panel is sticky so it stays beside
   whatever row the cursor is on, however far down the week you scroll. */
.cal-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.cal-left { min-width: 0; }
.cal-panel {
  position: sticky; top: 82px;
  display: flex; flex-direction: column; gap: 13px;
  padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.cal-nfa {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(255,61,87,0.09); border: 1px solid rgba(255,61,87,0.45);
}
.cal-nfa-tag { color: var(--sell); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
.cal-nfa-short { font-size: 10px; color: #c99aa2; }
.cal-panel-empty { padding: 22px 4px; text-align: center; font-size: 11px; color: var(--muted); }

/* Signed-out stand-in for the read. Deliberately almost wordless: the dimmed
   SAMPLE pills do the explaining, because the shape of the answer is obvious at
   a glance. Cyan -> ice white, matching the site-wide gradient. */
.cal-lock { display: flex; flex-direction: column; gap: 11px; }
.cal-lock-head { display: flex; flex-direction: column; gap: 7px; }
.cal-lock-tag {
  align-self: flex-start; font-family: var(--mono); font-size: 8.5px; font-weight: 900; letter-spacing: 1.6px;
  padding: 3px 8px; border-radius: 5px;
  color: #04070d; background: linear-gradient(90deg, #22ddff, #eaf6ff);
}
.cal-lock-title {
  font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: -0.2px;
  background: linear-gradient(92deg, #22ddff, #eaf6ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* The sample is illustrative, so it is held back from the live pills it
   imitates — full opacity here would read as a real call on a real event. */
.cal-lock-sample {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 11px; border-radius: 10px;
  background: linear-gradient(150deg, rgba(34,221,255,0.055), rgba(234,246,255,0.02));
  border: 1px dashed rgba(34,221,255,0.30);
  opacity: 0.6; pointer-events: none;
}
.cal-lock-body { font-size: 11px; line-height: 1.5; color: var(--muted); }
.cal-lock-why {
  font-size: 11.5px; line-height: 1.55; color: #dbeffa;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(150deg, rgba(34,221,255,0.10), rgba(234,246,255,0.03));
  border: 1px solid rgba(34,221,255,0.30);
}
.cal-lock-cta {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font-family: var(--mono); font-size: 10.5px; font-weight: 900; letter-spacing: 1.3px;
  padding: 12px 14px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(92deg, #22ddff, #7fe9ff 45%, #eaf6ff); color: #04070d;
  box-shadow: 0 6px 18px rgba(34,221,255,0.18);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cal-lock-cta:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(34,221,255,0.26);
}
.cal-lock-note { font-family: var(--mono); font-size: 9px; letter-spacing: 1.1px; color: var(--muted); text-align: center; }

.cal-panel-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.cal-panel-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cal-panel-time { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cal-panel-title { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35; }
.cal-panel-sec { display: flex; flex-direction: column; gap: 8px; }
.cal-panel-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }

/* One pill vocabulary for the whole panel: the surprise, the currency bias
   and every asset. Green = up, red = down, grey = no lean — the same reading
   as a candle, so it needs no legend. */
.cal-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-pill {
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border: 1px solid transparent;
}
.cal-pill.up { background: rgba(0,230,118,0.13); border-color: rgba(0,230,118,0.42); color: var(--buy); }
.cal-pill.down { background: rgba(255,61,87,0.13); border-color: rgba(255,61,87,0.42); color: var(--sell); }
.cal-pill.flat { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--muted); }
.cal-pill.strong { padding: 5px 11px; font-size: 10.5px; letter-spacing: 1.2px; }
.cal-pill.asset { font-family: var(--mono); letter-spacing: 0.4px; }
.cal-pill-arrow { margin-left: 5px; font-size: 8.5px; }
.cal-pill-arrow.lead { margin: 0 5px 0 0; }
.cal-nums { font-family: var(--mono); font-size: 11.5px; color: #fff; }
.cal-nums-vs { margin: 0 6px; font-size: 9.5px; color: var(--muted); letter-spacing: 0; }

.cal-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.cal-table { width: 100%; border-collapse: collapse; }
.cal-table thead th {
  padding: 12px 14px; text-align: left; white-space: nowrap;
  background: var(--surface2); border-bottom: 1px solid var(--border);
  font-size: var(--ui-body); font-weight: 700; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase;
}
.cal-table td { padding: 11px 14px; border-bottom: 1px solid rgba(31,39,51,0.7); font-size: 12.5px; color: var(--text); vertical-align: top; }
.cal-table tbody tr:last-child td { border-bottom: none; }
.cal-table tbody tr.cal-row { cursor: pointer; }
.cal-table tbody tr.cal-row:hover td { background: rgba(255,255,255,0.04); }
.cal-table tbody tr.cal-row.pinned td { background: rgba(var(--accent-rgb),0.08); }
/* The event column does not carry the description (it lives on the panel), so it
   can be capped and the value columns stop being pushed off-screen. */
.cal-table td:nth-child(4) { max-width: 340px; }
.cal-daterow td {
  padding: 10px 14px; background: rgba(255,255,255,0.025);
  font-size: var(--ui-body); font-weight: 700; letter-spacing: 1.8px; color: var(--sub-text); text-transform: uppercase;
}
.cal-daterow.is-today td { color: var(--accent); background: rgba(var(--accent-rgb), 0.07); }
.cal-time { font-family: var(--mono); font-size: 12px; color: var(--sub-text); white-space: nowrap; }
.cal-cur { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; }
.cal-event { color: #e2ecf6; line-height: 1.4; }
.cal-val { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.cal-val.empty { color: #55677d; }
.cal-val.actual { color: #fff; font-weight: 700; }
/* Deliberately NOT green/red. Whether an Actual above its forecast is good news
   depends on the release (payrolls up is not the same as unemployment up), so
   the arrow states the direction and claims nothing about it. */
.cal-arrow { margin-left: 5px; font-size: 9.5px; }
.cal-arrow.above { color: var(--accent); }
.cal-arrow.below { color: #ffab3d; }
.cal-imp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.cal-imp.high { background: var(--sell); }
.cal-imp.medium { background: #ffab3d; }
.cal-imp.low { background: #6b8199; }
/* Rows already released read dimmer than the ones still ahead, so "what is left
   today" is visible without reading every clock value. */
.cal-row.past td { opacity: 0.45; }
.cal-row.past:hover td, .cal-row.past.pinned td { opacity: 0.85; }
.cal-eta { margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--accent); }
.cal-nowrow td { padding: 0; border-bottom: none; }
.cal-nowline { position: relative; height: 1px; background: var(--accent); }
.cal-nowline span {
  position: absolute; left: 14px; top: -8px;
  padding: 1px 7px; border-radius: 5px; background: var(--accent);
  color: #05202a; font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
}

.cal-state { padding: 40px 16px; text-align: center; font-size: var(--ui-meta); font-weight: 700; letter-spacing: 1.2px; color: var(--muted-text); }
.cal-state button {
  display: block; margin: 14px auto 0; padding: 8px 18px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-size: var(--ui-body); font-weight: 700; letter-spacing: 1.4px;
}
.cal-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 12px; font-size: 11px; color: var(--muted);
}
.cal-foot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.cal-foot .live { color: var(--buy); }
.cal-refresh {
  margin-left: auto; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--sub-text);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  transition: border-color .15s, color .15s;
}
.cal-refresh:hover { border-color: var(--accent); color: #fff; }
.cal-refresh:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 1180px) {
  .cal-body { grid-template-columns: minmax(0,1fr) 250px; }
}
@media (max-width: 1000px) {
  /* One column, and the panel is hoisted ABOVE the table with order:-1 — on a
     touch screen there is no hover, the reader taps a row to pin it, and a panel
     underneath would put the answer off-screen. */
  .cal-body { grid-template-columns: minmax(0,1fr); }
  .cal-panel { position: static; order: -1; }
}
@media (max-width: 900px) {
  /* The table keeps its columns and scrolls sideways rather than reflowing — a
     release without its Forecast next to its Actual is not worth showing. */
  .cal-table-wrap { overflow-x: auto; }
  .cal-table { min-width: 680px; }
}
@media (max-width: 780px) {
  .cal-refresh { margin-left: 0; }
}