/* ============================================================
   Alpha Finance: /tools/staking-calculator/
   Only what this page adds to the calculator skeleton (tools.css) and
   the house tiles and tables (funding.css). The whole answer fits one
   screen: a dense form left; tiles, the rewards strip and the chart right.
   ============================================================ */

/* ---------- one screen: the form left, every answer right ---------- */

.stk .liqshero { padding-bottom: 14px; }
.stk-top { padding-top: 0; padding-bottom: 14px; }
.stk-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* a denser form than the other calculators: it shares the screen with the chart */
.stk-form { display: flex; flex-direction: column; }
.stk-form .lpanel-body { flex: 1; }
.stk .cform { padding: 16px 18px 16px; }
.stk .cfield { padding-bottom: 13px; }
.stk .cfield label, .stk .cfield .lab { margin-bottom: 6px; }
.stk .cfield input[type="number"], .stk .cfield select { height: 38px; font-size: 13.5px; }
.stk .cseg { height: 38px; }
.stk .cseg button { white-space: nowrap; }
.stk .crow { gap: 12px; }
.stk .chint { margin-top: 6px; font-size: 11.5px; }
.stk .chint .neg { color: var(--neg-text); }
.stk .stk-last { margin-top: -4px; }
.stk-chips { margin-top: 8px; gap: 6px; }
.stk-chips button { flex: 1; height: 30px; padding: 0 8px; white-space: nowrap; }
/* the live chip sizes to its provider and rate; a long name gives way first */
.stk-chips button.is-live {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 48%;
  padding: 0 12px 0 10px;
}
.stk-chips button.is-live .stk-ic { flex: none; margin: 0; }
.stk-chips button.is-live span { overflow: hidden; text-overflow: ellipsis; }
.stk-chips button[hidden] { display: none; }

.stk-out { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stk-tiles .fnstat-v { font-size: 26px; margin-top: 10px; }
.stk-tiles .fnstat-v.up { color: var(--pos-text); }
.stk-tiles .fnstat-s { line-height: 1.5; }
.stk-chartbox { flex: 1; display: flex; flex-direction: column; }
.stk-chartbox .fr-bar { padding: 10px 16px; }

/* the USD / coin switch sits beside the amount, as the chips do elsewhere */
.cwith .cseg-sm { flex: none; width: 118px; }

/* the first year's rewards, four stats in one strip */
.cstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  transition: opacity 0.2s;
}
.cstrip.is-idle { opacity: 0.35; }
.cstrip > div { min-width: 0; padding: 0 16px; border-left: 1px solid var(--line); }
.cstrip > div:first-child { padding-left: 0; border-left: 0; }
.cstrip span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.cstrip b {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--pos-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cstrip i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- marks ----------
   Every token and provider the page names carries its logo: inline beside
   the name in hints, tiles, chips, tables and the guide. */
.stk-ic {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: -2px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
  object-fit: cover;
}
.stk .prose .stk-ic { width: 15px; height: 15px; margin: 0 5px 0 1px; vertical-align: -2px; }
.stk-chips button .stk-ic, .cseg button .stk-ic { width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }
.cstrip i .stk-ic, .fnstat-s .stk-ic { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; }
.stk-h .stk-ic { width: 15px; height: 15px; margin: 0 5px 0 2px; vertical-align: -3px; }
.frates td .stk-ic { width: 13px; height: 13px; }
.stk-prov td.co .fr-cic { object-fit: cover; }

/* the token picker shows the chosen token's mark inside the field */
.stk-pick-coin { position: relative; }
.stk-pick-coin img {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
}
.stk-pick-coin img[hidden] { display: none; }
.stk .cfield select.has-ic { padding-left: 37px; }

/* ---------- the panels under the calculator ---------- */

.stk-sec { padding-top: 0; }
.stk-tables { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.stk-h {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  margin: 0;
}
.stk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.stk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.stk-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--lime); }
.stk-legend .lg-po { border-top: 1.5px solid var(--text-2); opacity: 0.7; }
.stk-legend .lg-hold { border-top: 1.5px dashed var(--faint); }
.stk-legend span[hidden] { display: none; }

.stk-chart { position: relative; flex: 1; padding: 10px 14px 4px; }
.stk-chart canvas { display: block; width: 100%; height: 236px; touch-action: pan-y; cursor: crosshair; }

table.stk-sched, table.stk-prov { min-width: 0; }
.stk-sched td.co small, .stk-prov td.co small { margin-left: 8px; }
.stk-prov tbody tr.stk-pick { cursor: pointer; }
.stk-prov tbody tr.stk-pick:focus-visible td { outline: none; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.stk-prov tbody tr.is-sel td { background: color-mix(in srgb, var(--lime) 6%, transparent); }
.stk-prov tbody tr.is-sel td.co b { color: var(--lime); }

@media (max-width: 1180px) {
  .stk-grid { grid-template-columns: 1fr; }
  .stk-tables { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stk-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stk-tiles .fnstat:first-child { grid-column: 1 / -1; }
  .stk-tiles .fnstat-v { font-size: 22px; }
  .cstrip { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .cstrip > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stk-chart { padding: 10px 8px 4px; }
  .stk-legend { margin-left: 0; }
}