/* bulldial.com — the homepage's market modules.
 *
 * When the front page became the cockpit, three modules had no cockpit
 * equivalent and were worth keeping: the news band, the markets band,
 * and the alerts card. Their styles moved here unchanged so the merged
 * page does not load the retired dial stylesheet — whose instrument
 * classes (.d-*, .hero, .scale) would collide with the panel
 * renderer's own.
 */

/* -- section heads (bands inside the Market section) ----------------
   The same pattern the canvas sections use above (dials.css, design
   pass #3): a short accent tick under the title rather than a full-width
   rule, so the Market bands read as part of the same page. */
.sec-head {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: 12px;
}
.sec-head::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 2px; border-radius: 2px; background: var(--accent);
}
.sec-head h2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.022em; flex: 1; }
.sec-head .btn { flex: none; }
.note { color: var(--ink-2); font-size: var(--t-sm); max-width: 74ch; margin-top: var(--sp-3); }

/* -- alerts card ----------------------------------------------------- */
.alerts { margin-top: var(--sp-7); }
.alerts-native { margin-top: var(--sp-4); }
.alerts-native + #subscribe-form { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.alerts h2 { font-size: var(--t-h2); font-weight: 650; letter-spacing: -0.02em; }
#subscribe-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
#subscribe-form .field { flex: 1; min-width: 220px; }
#subscribe-form .btn { padding-inline: 22px; }
#website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe-msg { margin-top: var(--sp-3); font-size: var(--t-sm); color: var(--ink-2); min-height: 1.2em; }

/* -- news band ------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════ news ═══
   Three stories, equal weight, the publisher's art on top of each — a
   different form from /news.html's lead-and-rail, on purpose: the
   front page shows what happened, the news page is where it is read.
   On a phone the row scrolls sideways under the thumb. */

#news-band { margin-top: var(--sp-7); }
.front-three {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.ft { display: block; min-width: 0; }
.ft-img { margin: 0 0 10px; }
.ft-img img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-2); background: var(--surface-2);
}
.fn-kicker {
  display: block; font-size: var(--t-label); font-weight: 650;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 5px;
}
.fn-src { color: var(--accent); }
.ft-h {
  display: block; font-size: var(--t-h3); font-weight: 650; line-height: 1.32;
  letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
  transition: color var(--d-1) var(--smooth);
}
.ft:hover .ft-h { color: var(--accent); }
@media (max-width: 760px) {
  .front-three {
    display: flex; gap: var(--sp-3);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4);
  }
  .front-three::-webkit-scrollbar { display: none; }
  .ft { flex: 0 0 78vw; max-width: 360px; scroll-snap-align: start; }
}

/* -- markets band ---------------------------------------------------- */
/* ════════════════════════════════════════════════════════════ markets ═══
   Two small tables: the largest five, and the day's movers. Rows are
   links into /markets.html. */

#markets-band { margin-top: var(--sp-7); }
.mkt-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
@media (max-width: 720px) { .mkt-cols { grid-template-columns: 1fr; } }
/* The tables sit in the same panel the System section uses: bare tables
   on the sunk ground read as scaffolding, not as instruments. */
.mkt-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 6px 18px 10px;
  transition: border-color var(--d-2) var(--smooth), box-shadow var(--d-2) var(--ease);
}
.mkt-panel:hover { border-color: var(--line-2); box-shadow: var(--e-2); }
.mkt-table { border-collapse: collapse; font-size: var(--t-sm); width: 100%; }
.mkt-table caption {
  text-align: left; font-size: var(--t-label); font-weight: 650;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-3);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--line-2);
}
.mkt-table tr { cursor: pointer; transition: background var(--d-1) var(--smooth); }
.mkt-table tr:hover { background: var(--surface-2); }
.mkt-table td { padding: 9px 6px; border-top: 1px solid var(--line); white-space: nowrap; }
.mkt-table tr:first-of-type td { border-top: 0; }
.mkt-table td:first-child { padding-left: 0; }
.mkt-table td:last-child { padding-right: 0; }
.mk-name { overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 60%; }
.mk-sym { font-weight: 650; }
.mk-full { color: var(--ink-3); font-size: var(--t-xs); }
.mk-px { text-align: right; color: var(--ink-2); }
.mk-chg { text-align: right; width: 5.5em; }