/* Socratii Market Center (markets.html). Uses the site tokens in style.css. */

.mk-hero { padding: calc(var(--space-12) + 2.5rem) 0 var(--space-8); border-bottom: 1px solid var(--color-divider); }
.mk-hero-row { display: flex; gap: var(--space-8); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.mk-hero-copy { max-width: 46rem; }
.mk-hero h1 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; margin: var(--space-3) 0 var(--space-4); color: var(--color-text); }
.mk-hero p { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; }

.mk-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mk-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-faint); flex: none; }
.mk-status.is-live .mk-status-dot { background: var(--color-success); box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-success) 60%, transparent); animation: mk-pulse 2s infinite; }
.mk-status.is-error .mk-status-dot { background: var(--color-error); }
@keyframes mk-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .mk-status.is-live .mk-status-dot { animation: none; } }

.mk-jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-8); font-size: var(--text-sm); }
.mk-jump a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.mk-jump a:hover { text-decoration: underline; }
[data-theme='dark'] .mk-jump a { color: var(--color-gold); }

.mk-section { padding: var(--space-12) 0; scroll-margin-top: 4.5rem; }
.mk-section--alt { background: var(--color-surface-2); }
.mk-section-head { margin-bottom: var(--space-6); max-width: 46rem; }
.mk-section-head h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin-bottom: var(--space-2); color: var(--color-text); }
.mk-section-head p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.mk-section-head p + p { margin-top: var(--space-3); }
.mk-section-head a { color: var(--color-primary); font-weight: 600; }
[data-theme='dark'] .mk-section-head a { color: var(--color-gold); }
.mk-section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; max-width: none; }
.mk-section-head--row > div { max-width: 40rem; }

/* segmented controls and chips */
.mk-seg, .mk-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-presets { margin-bottom: var(--space-5); }
.mk-seg button, .mk-presets button {
  font: inherit; font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); cursor: pointer; transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}
.mk-seg button:hover, .mk-presets button:hover { border-color: var(--color-primary); color: var(--color-text); }
.mk-seg button[aria-pressed='true'], .mk-presets button[aria-pressed='true'] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme='dark'] .mk-seg button[aria-pressed='true'], [data-theme='dark'] .mk-presets button[aria-pressed='true'] { background: var(--color-gold); border-color: var(--color-gold); color: #14161c; }

/* index cards */
.mk-index-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.mk-index { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); min-height: 9.5rem; font-variant-numeric: tabular-nums; }
.mk-index-top { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); }
.mk-index-label { font-weight: 700; color: var(--color-text); }
.mk-index-note { color: var(--color-text-faint); }
.mk-index-price { font-family: var(--font-display); font-size: var(--text-xl); margin: var(--space-3) 0 var(--space-1); color: var(--color-text); }
.mk-index-change { font-weight: 700; font-size: var(--text-sm); }
.mk-index-foot { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.mk-skel { background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-offset) 50%, var(--color-surface) 100%); background-size: 200% 100%; animation: mk-shimmer 1.4s infinite; }
@keyframes mk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mk-skel { animation: none; } }

.up { color: var(--color-success); }
.down { color: var(--color-error); }
.flat { color: var(--color-text-muted); }

.mk-breadth { margin-top: var(--space-6); max-width: 40rem; }
.mk-breadth-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.mk-breadth-text strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.mk-breadth-bar { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-offset); }
.mk-breadth-bar .up { background: var(--color-success); }
.mk-breadth-bar .flat { background: var(--color-text-faint); }
.mk-breadth-bar .down { background: var(--color-error); }

/* sectors: diverging bars around a centre line */
.mk-sectors { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.mk-sector { width: 100%; display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr 5rem; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--color-text); }
.mk-sector:hover, .mk-sector:focus-visible { background: var(--color-surface); }
.mk-sector-name { font-size: var(--text-sm); font-weight: 600; }
.mk-sector-sym { color: var(--color-text-faint); font-weight: 500; font-size: var(--text-xs); margin-left: var(--space-1); }
.mk-sector-bar { position: relative; height: 10px; }
.mk-sector-bar::before { content: ''; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--color-border); }
.mk-sector-bar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.mk-sector-bar .up { background: var(--color-success); }
.mk-sector-bar .down { background: var(--color-error); }
.mk-sector-bar .flat { background: var(--color-text-faint); }
.mk-sector-val { text-align: right; font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* movers and dividend list */
.mk-movers, .mk-divlist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.mk-movers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--space-6); }
.mk-mover a, .mk-divlist a { display: grid; grid-template-columns: 4.25rem 1fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; color: var(--color-text); font-variant-numeric: tabular-nums; transition: border-color var(--transition-interactive); }
.mk-divlist a { grid-template-columns: 4.25rem 1fr auto; }
.mk-mover a:hover, .mk-divlist a:hover { border-color: var(--color-primary); }
.mk-mover-sym { font-weight: 700; font-size: var(--text-sm); }
.mk-mover-name { font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-mover-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.mk-mover-price { font-size: var(--text-sm); color: var(--color-text-muted); }
.mk-mover-chg, .mk-div-yield { font-weight: 700; font-size: var(--text-sm); min-width: 4.5rem; text-align: right; }
.mk-empty { color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-6); text-align: center; }

/* filters */
.mk-filters { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)) auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.mk-field { display: grid; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.mk-field input, .mk-field select { font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.55rem 0.7rem; min-width: 0; width: 100%; }
.mk-field input:focus, .mk-field select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.mk-reset { font: inherit; font-size: var(--text-xs); font-weight: 600; background: none; border: 0; color: var(--color-primary); cursor: pointer; padding: 0.6rem 0.25rem; white-space: nowrap; }
[data-theme='dark'] .mk-reset { color: var(--color-gold); }

/* tables */
.mk-table-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
#mkCount { font-weight: 700; color: var(--color-text); }
.mk-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mk-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.mk-table th { position: sticky; top: 0; background: var(--color-surface-2); text-align: left; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); padding: var(--space-3) 0.6rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; user-select: none; }
.mk-table th[data-sort] { cursor: pointer; }
.mk-table th[data-sort]:hover, .mk-table th[data-sort]:focus-visible { color: var(--color-text); }
.mk-table th[aria-sort='ascending']::after { content: ' \2191'; color: var(--color-primary); }
.mk-table th[aria-sort='descending']::after { content: ' \2193'; color: var(--color-primary); }
.mk-table td { padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table tbody tr:hover td { background: var(--color-surface-2); }
.mk-table .num { text-align: right; }
.mk-table td.up, .mk-table td.down { font-weight: 600; }
.mk-name { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.mk-muted { color: var(--color-text-muted); }
.mk-sym { font-weight: 700; color: var(--color-primary); text-decoration: none; }
.mk-sym:hover { text-decoration: underline; }
[data-theme='dark'] .mk-sym { color: var(--color-gold); }

.mk-range { display: inline-grid; grid-template-columns: auto 3.5rem auto; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.mk-range-track { position: relative; height: 4px; border-radius: 2px; background: var(--color-surface-offset-2); }
.mk-range-track span { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--color-primary); }
[data-theme='dark'] .mk-range-track span { background: var(--color-gold); }

.mk-star-cell { width: 2.5rem; text-align: center; }
.mk-star { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; color: var(--color-text-faint); }
.mk-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mk-star:hover { color: var(--color-gold); background: var(--color-gold-highlight); }
.mk-star[aria-pressed='true'] { color: var(--color-gold); }
.mk-star[aria-pressed='true'] svg { fill: currentColor; }

.mk-pager { display: flex; justify-content: center; margin-top: var(--space-5); }
.mk-footnote { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }

.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-10); align-items: start; }
.mk-split .btn { margin-top: var(--space-5); }

/* Plan2Vest hand-off */
.mk-p2v { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-10); border-radius: var(--radius-xl); background: var(--color-primary); color: #fff; }
.mk-p2v .eyebrow { color: var(--color-gold-highlight); }
.mk-p2v h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin: var(--space-3) 0; color: #fff; }
.mk-p2v p { color: rgba(255, 255, 255, 0.82); line-height: 1.6; font-size: var(--text-sm); }
.mk-p2v-actions { display: grid; gap: var(--space-4); justify-items: start; }
.mk-p2v .btn-primary { background: var(--color-gold); color: #14161c; border-color: var(--color-gold); }
.mk-p2v .btn-primary:hover { background: var(--color-gold-hover); }
.mk-p2v-note { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.82); line-height: 1.5; }
[data-theme='dark'] .mk-p2v { background: var(--color-surface); border: 1px solid var(--color-border); }
[data-theme='dark'] .mk-p2v h2 { color: var(--color-text); }
[data-theme='dark'] .mk-p2v p, [data-theme='dark'] .mk-p2v-note { color: var(--color-text-muted); }
[data-theme='dark'] .mk-p2v .eyebrow { color: var(--color-gold); }

.mk-disclaimer { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; max-width: 60rem; }
.mk-disclaimer a { color: var(--color-primary); font-weight: 600; }
[data-theme='dark'] .mk-disclaimer a { color: var(--color-gold); }

.mk-toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: 60; background: var(--color-text); color: var(--color-bg); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-lg); }

@media (max-width: 1100px) {
  .mk-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-field--search { grid-column: span 3; }
  .mk-hide-md { display: none; }
}
@media (max-width: 860px) {
  .mk-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-movers { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .mk-split, .mk-p2v { grid-template-columns: 1fr; }
  .mk-p2v { padding: var(--space-8) var(--space-6); }
}
@media (max-width: 640px) {
  .mk-hero { padding-top: calc(var(--space-12) + 2rem); }
  .mk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-field--search { grid-column: span 2; }
  .mk-hide-sm { display: none; }
  .mk-sector { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .mk-sector-bar { grid-column: 1 / -1; grid-row: 2; }
  .mk-mover a { grid-template-columns: 3.75rem 1fr auto; }
  .mk-mover-price { display: none; }
  .mk-name { max-width: 9rem; }
}
.mk-table td.mk-muted { white-space: normal; max-width: 9.5rem; line-height: 1.3; }