/* components.css — cards, callouts, chart frame, controls, tables */

/* ---------- buttons ---------- */
.ghost, .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .7rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .03em;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
  transition: all .14s var(--ease);
}
.ghost:hover, .btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.btn[data-on="1"] {
  background: var(--accent); color: #12100a; border-color: var(--accent); font-weight: 600;
}

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button {
  padding: .3rem .6rem; border: 0; background: none; border-radius: 4px;
  font-family: var(--mono); font-size: .69rem; color: var(--text-3); cursor: pointer;
  transition: all .14s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[data-on="1"] { background: var(--accent); color: #12100a; font-weight: 620; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.05rem 1.1rem;
}
.card > h3 { margin-bottom: .35rem; display: flex; align-items: center; gap: .45rem; }
.card > p { font-size: .885rem; color: var(--text-2); max-width: none; }
/* not scoped to .card — tags also appear in tables and inline captions */
.tag {
  display: inline-block;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  padding: .08rem .38rem; border-radius: 99px; vertical-align: middle;
  white-space: nowrap;              /* never wrap inside the pill */
  background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border);
}

/* ---------- callouts ---------- */
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: .85rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .89rem; color: var(--text-2);
}
.note b { color: var(--text); }
.note.warn { border-left-color: var(--down); background: var(--down-bg); }
.note.good { border-left-color: var(--up); background: var(--up-bg); }
.note .h {
  display: block; font-family: var(--mono);
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .3rem;
}
.note.warn .h { color: var(--down); }
.note.good .h { color: var(--up); }

/* ---------- stat tiles ---------- */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: .8rem .9rem;
  display: flex; flex-direction: column; min-width: 0;
}
/* Reserve two lines for the label so a wrapping caption in one tile does not
   push its value below the values in its neighbours. */
.stat .k {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  min-height: 2.1em; line-height: 1.35;
}
.stat .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.42rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--text); margin-top: .2rem; line-height: 1.1;
}
.stat .v.up { color: var(--up); }
.stat .v.down { color: var(--down); }
.stat .v.acc { color: var(--accent); }
/* margin-top:auto pins sub-text to the bottom, so tiles of differing content
   height still share a baseline across the row */
.stat .s { font-size: .74rem; color: var(--text-3); margin-top: auto; padding-top: .15rem; line-height: 1.4; }

/* ---------- chart frame ---------- */
.chart-frame {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.chart-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .7rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.chart-bar .sym {
  font-family: var(--mono); font-size: .74rem; font-weight: 620;
  letter-spacing: .05em; color: var(--text);
}
.chart-bar .spacer { flex: 1; }
.chart-canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }

.chart-readout {
  display: flex; gap: .9rem; flex-wrap: wrap;
  padding: .45rem .7rem; border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono); font-size: .69rem; color: var(--text-3);
  min-height: 30px;
}
.chart-readout span b { color: var(--text-2); font-weight: 500; }
.chart-readout .up b { color: var(--up); }
.chart-readout .down b { color: var(--down); }

/* captions are full sentences — sans, not the terminal mono used for data */
.chart-cap {
  font-size: .82rem; color: var(--text-3); margin-top: .55rem;
  line-height: 1.55; max-width: 72ch;
}

/* ---------- legend ---------- */
.legend { display: flex; gap: .9rem; flex-wrap: wrap; font-family: var(--mono); font-size: .68rem; color: var(--text-3); }
.legend i { display: inline-flex; align-items: center; gap: .35rem; font-style: normal; }
.legend i::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--sw, var(--text-3));
}

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
table.tbl { border-collapse: collapse; width: 100%; font-size: .855rem; }
table.tbl th, table.tbl td {
  padding: .55rem .75rem; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tbl thead th {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); font-weight: 500;
  background: var(--surface-2);
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.tbl .n { text-align: right; }          /* header and cell must agree */
table.tbl td.up { color: var(--up); }
table.tbl td.down { color: var(--down); }
table.tbl td.wrap { white-space: normal; min-width: 220px; color: var(--text-2); }
table.tbl th.wrap { white-space: normal; }

/* ---------- calculator / control rows ---------- */
.ctrl { display: flex; flex-direction: column; gap: .3rem; }
.ctrl label {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.ctrl label output {
  font-size: .92rem; letter-spacing: 0; text-transform: none;
  color: var(--accent); font-weight: 620;
}
.ctrl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; background: none; cursor: pointer;
}
.ctrl input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: var(--surface-3);
}
.ctrl input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 99px; background: var(--surface-3);
}
.ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5.5px; border-radius: 99px;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ctrl input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 99px; border: 2px solid var(--surface);
  background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ---------- misc ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .85rem; }
.kv dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); align-self: center; }
.kv dd { color: var(--text-2); }

/* Two grid tracks, two grid items: the ::before arrow and exactly one child.
   Adding a second child pushes the text onto a new row and into the 16px
   marker column, which is what was happening before. */
ul.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; }
ul.ticks li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: .55rem;
  align-items: start;                     /* arrow sits on the first line */
  font-size: .885rem; line-height: 1.55; color: var(--text-2);
}
ul.ticks li::before {
  content: "→"; color: var(--accent);
  font-family: var(--mono); font-size: .8rem;
  line-height: inherit;                   /* share the text's baseline grid */
}
ul.ticks li > * { min-width: 0; }
ul.ticks li b { color: var(--text); }

hr.rule { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }