/* Home page only. Components come from system.css; this file is layout and the fee-split bar. */

/* ---------------------------------------------------------------- hero */
.home-hero .shout > span { display: block; }
.home-hero .lead { margin-top: 24px; }
.home-hero-cta { margin-top: 28px; }
@media (min-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  /* sized so that the English first line stays on one line next to the helm */
  .home-hero .shout { font-size: clamp(54px, 8.4vw, 134px); }
  .home-hero .lead { margin-top: 32px; }
  .home-hero-cta { margin-top: 36px; }
}
@media (max-width: 479px) {
  .home-hero-cta > .btn { flex: 1 1 100%; }
}
.home-helm svg { shape-rendering: crispEdges; transform-origin: 50% 50%; animation: home-sway 9s ease-in-out infinite; }
@keyframes home-sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

/* ---------------------------------------------------------------- stat board */
.home-unit { font-size: 0.42em; font-weight: 800; letter-spacing: 0.04em; color: var(--fg-2); margin-left: 0.3em; text-transform: uppercase; }
.home-asof { margin-top: 12px; min-height: 18px; }
.home-asof[data-tone="warn"] { color: var(--alert-fg); font-weight: 700; }

/* ---------------------------------------------------------------- first paint */
/* Until the snapshot is read the sections below the stat board keep their space but stay
   invisible: home.js decides their order (an empty fleet puts "How it works" first) BEFORE they
   are shown, so nothing visible ever jumps. home.js always clears the attribute, also on errors. */
#main[data-board="loading"] > #watch,
#main[data-board="loading"] > #fleet,
#main[data-board="loading"] > #how { visibility: hidden; }

/* ---------------------------------------------------------------- section heads */
.home-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.home-sec-note { max-width: 46ch; font-size: 14px; }
@media (min-width: 900px) { .home-sec-head { margin-bottom: 32px; } .home-sec-note { text-align: right; } }

/* ---------------------------------------------------------------- the watch */
.home-lanes { min-height: 480px; }
.home-lanes .lane-token .chip { flex: 0 0 auto; }
.home-lanes .lane-prize .cap { display: block; margin-top: 2px; }
.home-lanes .lane[data-free="true"] .lane-prize .fig { color: var(--alert-fg); }
.home-lanes .lane-time[data-ended="true"] { color: var(--alert-fg); }
.home-lanes .lane[data-empty="true"] .fuse { opacity: 0.55; }
a.lane { transition: background-color 0.12s; }
a.lane:hover { background: rgba(22, 20, 15, 0.06); }
.home-watch-foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.home-watch-foot:empty { display: none; }
.home-watch-empty { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1; text-transform: uppercase; max-width: 24ch; }
@media (min-width: 900px) {
  .home-lanes .lane { grid-template-columns: 88px minmax(0, 1.25fr) minmax(0, 1.15fr); }
}
@media (min-width: 1200px) {
  .home-lanes .lane-token { flex-wrap: nowrap; }
  .home-lanes .lane-prize { white-space: nowrap; }
}
@media (max-width: 899px) {
  .home-lanes .lane-prize .cap { display: none; }
}

/* ---------------------------------------------------------------- fleet */
.home-fleet-controls { --gap: 10px; }
.home-fleet-foot { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
#fleet-table .table th, #fleet-table .table td { padding-inline: 12px; }
#fleet-table .table th:first-child, #fleet-table .table td:first-child { padding-left: 20px; }
#fleet-table .table th:last-child, #fleet-table .table td:last-child { padding-right: 20px; }
#fleet-table .table td.t-watch { min-width: 12ch; }
#fleet-table .chip + .chip { margin-left: 6px; }
#fleet-table tr[data-free="true"] .t-rank { color: var(--alert-fg); }

/* ---------------------------------------------------------------- how it works */
.home-how > .head { margin-bottom: 28px; }
.home-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: none; }
.home-step { position: relative; padding: 20px 0 22px 64px; border-top: 3px solid var(--rule); min-width: 0; }
.home-step-no { position: absolute; left: 0; top: 14px; font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 0.8; font-variant-numeric: tabular-nums; }
.home-step > .sub { margin-bottom: 10px; }
.home-step > p { color: var(--fg-2); max-width: 44ch; }
@media (min-width: 900px) {
  .home-how > .head { margin-bottom: 40px; }
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .home-step { padding: 22px 0 0 0; }
  .home-step-no { position: static; display: block; font-size: 112px; margin-bottom: 18px; }
}

.home-split-block { margin-top: 36px; padding-top: 24px; border-top: 3px solid var(--rule); }
.home-split-block > .cap-up { display: block; margin-bottom: 14px; color: var(--fg); }
.home-split { display: flex; height: 72px; border-radius: var(--r-ctl); overflow: hidden; box-shadow: inset 0 0 0 2px var(--fg); }
.home-split > span {
  flex: var(--share, 1) 1 0; min-width: 0;
  display: flex; align-items: center; padding-left: clamp(6px, 1.4vw, 18px);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 4.4vw, 56px); line-height: 1; font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap;
}
.home-split > span + span { border-left: 2px solid var(--fg); }
.home-split > [data-part="steward"] { background: var(--fg); color: var(--surface); }
.home-split > [data-part="dowry"] { background: var(--deck); color: var(--ink); }
.home-split > [data-part="protocol"] { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--rule-soft) 7px 10px); color: var(--fg); }

.home-split-legend { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.home-split-legend > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; align-items: start; min-width: 0; }
.home-split-legend .home-swatch { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 3px; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--fg); }
.home-split-legend [data-part="steward"] .home-swatch { background: var(--fg); }
.home-split-legend [data-part="dowry"] .home-swatch { background: var(--deck); }
.home-split-legend [data-part="protocol"] .home-swatch { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--fg-2) 3px 5px); }
.home-split-legend strong { font-weight: 700; }
.home-split-legend .cap { grid-column: 2; }
@media (min-width: 900px) {
  /* legend columns line up with the bar segments */
  .home-split-legend { grid-template-columns: var(--split-cols, 60fr 25fr 15fr); gap: 0; }
  .home-split-legend > li { padding-left: clamp(8px, 1.4vw, 18px); padding-right: 12px; grid-template-columns: minmax(0, 1fr); }
  .home-split-legend .home-swatch { display: none; }
  .home-split-legend .cap { grid-column: 1; }
  .home-split { height: 88px; }
}
.home-match { margin-top: 24px; max-width: 78ch; font-weight: 500; }
.home-how-cta { margin-top: 32px; }
@media (max-width: 479px) { .home-how-cta > .btn { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) { .home-helm svg { animation: none; } }