/* =========================================================================
   terminal.css - page-specific styles for the Traditional Finance (Markets)
   terminal. The shared card / gauge / tape / chart chrome comes from
   css/market-widgets.css; this file adds the "add your key" setup panel and
   the quotes board. Themed from the global tokens.
   ========================================================================= */

/* ---------- No-key setup panel ---------- */
.tf-nokey {
  display: flex; gap: 1.1rem; align-items: flex-start;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
  padding: 1.4rem 1.5rem; max-width: 760px; margin: 0 auto;
}
.tf-nokey__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent); position: relative; }
.tf-nokey__icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2.5px solid var(--color-on-accent); border-radius: 50%; }
.tf-nokey__icon::after { content: ""; position: absolute; left: 50%; top: 54%; width: 2.5px; height: 11px; background: var(--color-on-accent); transform: translate(-50%, 0) rotate(45deg); transform-origin: top; border-radius: 2px; }
.tf-nokey h2 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--color-heading); }
.tf-nokey p { color: var(--color-text-muted); font-size: .92rem; line-height: 1.6; margin: 0 0 .6rem; }
.tf-nokey ol { margin: 0 0 .7rem; padding-left: 1.2rem; color: var(--color-text); font-size: .92rem; line-height: 1.7; }
.tf-nokey a { color: var(--color-accent-deep); font-weight: 600; }
.tf-nokey code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: color-mix(in srgb, var(--color-border) 40%, transparent); padding: .1rem .35rem; border-radius: 5px; color: var(--color-heading); }
.tf-nokey__note { font-size: .82rem !important; margin-bottom: 0 !important; }

/* ---------- Quotes board ---------- */
.tvw__body--board { min-height: 300px; padding: .4rem 0 .8rem; }
.tvw__body--board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; }
.tf-group { padding: .6rem 1rem 1rem; }
.tf-group + .tf-group { border-left: 1px solid var(--color-border); }
@media (max-width: 720px) { .tf-group + .tf-group { border-left: none; border-top: 1px solid var(--color-border); } }
.tf-group__h { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-deep); padding: .3rem .2rem .5rem; }
.tf-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; width: 100%; padding: .5rem .2rem; background: none; border: none; border-top: 1px solid var(--color-border); cursor: pointer; text-align: left; font: inherit; }
.tf-row:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.tf-row__name { font-weight: 700; color: var(--color-heading); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-row__price { font-size: .8rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tf-row__chg { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.tf-row__chg.up { color: #2e9e5b; } .tf-row__chg.down { color: #cf5b5b; }

@media (max-width: 560px) { .tf-nokey { flex-direction: column; } }