/* SOCCLE — floor-ratchet vault terminal. Brutalist architectural / drafting board. */

@import url('https://api.fontshare.com/v2/css?f[]=jetbrains-mono@400,500,700&display=swap');

:root {
  /* warm architectural concrete */
  --paper: #EDE8DC;
  --paper-2: #E4DECF;
  --ink: #181816;
  --ink-soft: #2A2823;
  --line: #181816;
  --line-faint: rgba(24,24,22,0.16);
  --line-hair: rgba(24,24,22,0.10);
  --mute: #7C786E;
  --ochre: #C59A45;
  --ochre-deep: #A87E2E;
  --green: #3CA96D;
  --red: #B5483A;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }

/* sharp corners everywhere */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ============ TOP NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 28px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.04em; }
.brand .mark { width: 22px; height: 22px; display: block; }
.nav-links { display: flex; gap: 26px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-links a { opacity: 0.72; }
.nav-links a:hover { opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.floor-pill { font-size: 11px; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }
.floor-pill .dot { width: 7px; height: 7px; background: var(--ochre); border-radius: 0; display: inline-block; }
.btn-connect {
  border: 1px solid var(--line); padding: 8px 16px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); font-weight: 500;
}
.btn-connect:hover { background: var(--ochre-deep); }
.btn-connect.connected { background: var(--paper); color: var(--ink); }

/* ============ TICKER MARQUEE ============ */
.ticker {
  background: var(--ink); color: var(--paper);
  overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line);
  height: 30px; display: flex; align-items: center;
}
.ticker-track { display: inline-block; padding-left: 100%; animation: scroll 38s linear infinite; font-size: 11px; letter-spacing: 0.05em; }
.ticker-track .sep { color: var(--ochre); margin: 0 14px; }
.ticker-track .pos { color: var(--green); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ============ HERO ============ */
.hero { border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 460px; }
.hero-left { padding: 44px 28px 40px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.crumb { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.crumb b { color: var(--ink); font-weight: 500; }
.crumb .arr { margin: 0 8px; color: var(--ochre); }
.hero-headline { font-size: clamp(44px, 7.2vw, 96px); font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; margin: 26px 0 22px; }
.hero-headline .up { color: var(--ochre); }
.hero-desc { max-width: 440px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn-solid { background: var(--ink); color: var(--paper); padding: 14px 24px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.btn-solid:hover { background: var(--ochre-deep); }
.btn-line { border: 1px solid var(--line); padding: 14px 24px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-line:hover { background: var(--ink); color: var(--paper); }

.hero-right { padding: 28px 28px 32px; display: flex; flex-direction: column; }
.station-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.station-head .live { color: var(--green); }
.floor-big { font-size: clamp(40px, 6vw, 68px); font-weight: 700; letter-spacing: -0.03em; margin: 22px 0 6px; }
.floor-big .unit { font-size: 0.4em; color: var(--mute); font-weight: 400; letter-spacing: 0.05em; margin-left: 8px; }
.floor-sub { display: flex; gap: 28px; font-size: 12px; color: var(--mute); }
.floor-sub b { color: var(--ink); font-weight: 500; }
.floor-sub .pos { color: var(--green); }
.progress-wrap { margin-top: auto; padding-top: 28px; }
.progress-label { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.progress-bar { height: 8px; background: var(--paper-2); border: 1px solid var(--line); position: relative; }
.progress-fill { height: 100%; background: var(--ochre); width: 0%; transition: width 0.6s; }

/* ============ METRICS ============ */
.metrics { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.metric { padding: 26px 22px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: none; }
.metric .lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.metric .val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.metric .sub { font-size: 11px; color: var(--mute); margin-top: 4px; }

/* ============ SECTION SHELL ============ */
.section { border-bottom: 1px solid var(--line); padding: 56px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; max-width: 560px; }
.section-head .tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

/* ============ FEE SPLIT ============ */
.split-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.split-col { padding: 30px 26px; border-right: 1px solid var(--line); }
.split-col:last-child { border-right: none; }
.split-col .bps { font-size: 13px; letter-spacing: 0.08em; color: var(--ochre-deep); font-weight: 500; margin-bottom: 10px; }
.split-col h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 12px; }
.split-col p { font-size: 12px; color: var(--ink-soft); line-height: 1.65; }
.split-note { margin-top: 20px; font-size: 11px; color: var(--mute); letter-spacing: 0.04em; }

/* ============ COURSE HISTORY ============ */
.courses-table { width: 100%; border: 1px solid var(--line); border-collapse: collapse; }
.courses-table th, .courses-table td { padding: 12px 14px; text-align: left; font-size: 12px; border-bottom: 1px solid var(--line-faint); }
.courses-table th { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.courses-table tr:last-child td { border-bottom: none; }
.courses-table .num { color: var(--mute); }
.courses-table .up { color: var(--green); }
.courses-table a { border-bottom: 1px solid var(--line-faint); }
.courses-table a:hover { color: var(--ochre-deep); border-color: var(--ochre); }
.empty { padding: 30px; text-align: center; color: var(--mute); font-size: 12px; }

/* ============ FLOOR CHART ============ */
.chart-wrap { border: 1px solid var(--line); padding: 18px; margin-top: 28px; background: var(--paper-2); }
.chart-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.chart { width: 100%; height: 150px; display: block; }

/* ============ POSITION BUILDER ============ */
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.pos-form { padding: 30px 28px; border-right: 1px solid var(--line); }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.field input { width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 12px 14px; font-size: 14px; font-weight: 500; }
.field input:focus { outline: none; border-color: var(--ochre); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tier { border: 1px solid var(--line); padding: 14px 10px; text-align: center; cursor: pointer; }
.tier .t-name { font-size: 12px; font-weight: 700; }
.tier .t-boost { font-size: 11px; color: var(--ochre-deep); margin-top: 4px; }
.tier.active { background: var(--ink); color: var(--paper); }
.tier.active .t-boost { color: var(--ochre); }
.preview { font-size: 12px; color: var(--mute); margin-top: 4px; }
.preview b { color: var(--ink); }
.pos-plaque { padding: 30px 28px; background: var(--ink); color: var(--paper); }
.plaque-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); margin-bottom: 18px; }
.plaque-svg { display: block; margin: 0 auto 20px; }
.plaque-data { font-size: 12px; line-height: 2; }
.plaque-data .k { color: var(--mute); display: inline-block; width: 130px; }
.plaque-data .v { color: var(--paper); font-weight: 500; }

/* ============ TRADE PANEL ============ */
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.trade-col { padding: 26px 24px; border-right: 1px solid var(--line); }
.trade-col:last-child { border-right: none; }
.trade-col h4 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.trade-bal { font-size: 11px; color: var(--mute); margin-bottom: 14px; }
.trade-bal b { color: var(--ink); font-weight: 500; }
.guard { margin-top: 14px; font-size: 11px; padding: 10px 12px; border: 1px solid var(--line-faint); }
.guard.ok { border-color: var(--green); color: var(--green); }
.guard.bad { border-color: var(--red); color: var(--red); }

/* ============ RISKS ============ */
.risks { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.risk { padding: 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-faint); }
.risk:nth-child(2n) { border-right: none; }
.risk .r-id { font-size: 11px; color: var(--ochre-deep); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 8px; }
.risk h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.risk p { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* ============ CONTRACTS ============ */
.contracts { border: 1px solid var(--line); }
.contract-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line-faint); font-size: 12px; }
.contract-row:last-child { border-bottom: none; }
.contract-row .name { font-weight: 500; min-width: 200px; }
.contract-row .addr { color: var(--mute); font-size: 11px; }
.contract-row a { color: var(--ochre-deep); border-bottom: 1px solid var(--line-faint); }

.note-strip { background: var(--ink); color: var(--paper); padding: 22px 28px; font-size: 12px; letter-spacing: 0.02em; line-height: 1.7; }
.note-strip b { color: var(--ochre); }

/* ============ FOOTER ============ */
.footer { border-top: 1px solid var(--line); padding: 28px; font-size: 11px; color: var(--mute); display: flex; justify-content: space-between; letter-spacing: 0.04em; }

/* ============ TABS (mobile) ============ */
.tabs { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero-grid, .pos-grid, .trade-grid { grid-template-columns: 1fr; }
  .hero-left { border-right: none; border-bottom: 1px solid var(--line); }
  .pos-form, .trade-col { border-right: none; border-bottom: 1px solid var(--line); }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metric:nth-child(3) { border-right: none; }
  .split-grid { grid-template-columns: 1fr; }
  .split-col { border-right: none; border-bottom: 1px solid var(--line); }
  .risks { grid-template-columns: 1fr; }
  .risk { border-right: none; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { border-right: 1px solid var(--line); }
  .metric:nth-child(2n) { border-right: none; }
  .hero-left, .hero-right { padding: 28px 20px; }
  .wrap { padding: 0 20px; }
  .nav { padding: 0 20px; }
  .floor-pill { display: none; }
  .courses-table th:nth-child(3), .courses-table td:nth-child(3) { display: none; }
}