/*
 * Hypehammer, the game.
 * A trading floor at night: dark panels, figures in tabular numerals, green and red for moves
 * (always with an arrow and a sign, never colour alone), and one signal colour, the hammer
 * yellow, kept for actions, for the price tag of a chart and for the short stroke that marks
 * each board's title.
 */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #0a0e1a;
  --bar: #0d1222;
  --panel: #111729;
  --panel-raised: #151d35;
  --line: #1e2742;
  --line-soft: #172038;
  --line-strong: #2a3556;
  --text: #e9edf7;
  --text-soft: #a3adc8;
  --text-faint: #8a95b5;
  --link: #9db8ff;
  --link-hover: #c4d4ff;
  --up: #34d399;
  --down: #ff7a85;
  --up-wash: rgb(52 211 153 / 0.14);
  --down-wash: rgb(255 122 133 / 0.14);
  --strike: #ffd43b;
  --strike-hover: #ffe066;
  --on-strike: #14161c;
  --warm: #ff9d5c;
  --warm-wash: rgb(255 157 92 / 0.12);
  --warm-text: #ffc9a3;
  --invested: #6e8cff;
  --quiet: #1a2340;
  --quiet-hover: #212c4f;
  --me-wash: rgb(255 212 59 / 0.07);

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --gutter: clamp(1rem, 3.5vw, 2rem);
  --pad: clamp(1rem, 2.5vw, 1.25rem);
  --measure: 36rem;
  --radius: 10px;
  --tabbar: 4.25rem;
  /* Room under the tab bar for the iPhone home indicator, or for Android's navigation bar when
     the page is drawn behind it. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

/* Firefox for Android (since version 150, with the address bar at the top) reports the navigation
   bar's height as a bottom inset while its toolbar is shown, though the page stops above that
   bar: the tab bar would grow by as much each time one scrolls up (Mozilla bug 2057232). Firefox
   paints its own strip behind Android's navigation bar and keeps the page above it, so the tab
   bar needs no room there. */
@supports (-moz-appearance: none) {
  :root {
    --safe-bottom: 0px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

/* The tab bar covers the bottom of the screen on phones: focused fields stay above it. */
html:has(body.has-tabbar) {
  scroll-padding-bottom: calc(var(--tabbar) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-stretch: 108%;
  font-weight: 780;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}

h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem);
}

h2 {
  font-size: 1.0625rem;
  font-stretch: 110%;
  font-weight: 750;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0;
}

/* Lines break where they read well. Texts fill the width of their block and never end on a lone
   word ("pretty", helped by the browser script for short tails); titles, labels, short notes and
   centred texts spread their words evenly over their lines. */
body {
  text-wrap-style: pretty;
}

h1,
h2,
h3,
th,
dt,
.kicker,
.lead,
.board-note,
.order-detail,
.stats-note,
.figure-label,
.t-title,
.heatmap strong,
.ticket-note,
.ticket-when,
.site-footer p {
  text-wrap-style: balance;
}

/* A group of words that moves to the next line as a whole; when it is wider than the line, its
   own lines are evenly spread. */
.phrase {
  display: inline-block;
  text-wrap-style: balance;
}

.change {
  white-space: nowrap;
}

/* A date or a name that must not be split across two lines. */
.nowrap {
  white-space: nowrap;
}

abbr[title] {
  text-decoration: none;
  cursor: help;
}

/* Scroll containers hold their hidden texts: positioned against the page, they would widen it. */
.chips,
.indices,
.tabs,
.table-wrap,
.data-table-scroll {
  position: relative;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--strike);
  color: var(--on-strike);
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.is-up {
  color: var(--up);
}

.is-down {
  color: var(--down);
}

.is-flat {
  color: var(--text-soft);
}

.muted {
  color: var(--text-soft);
}

.small {
  font-size: 0.9rem;
}

/* Top bar ------------------------------------------------------------------------------ */

.topbar {
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 82rem;
  margin-inline: auto;
  padding: 0.65rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #fff;
  font-size: 1.05rem;
  font-stretch: 115%;
  font-weight: 850;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
}

/* The war hammer, a little taller than the letters, without making the bar taller. */
.wordmark-mark {
  width: 1.75em;
  height: 1.75em;
  margin: -0.3em 0;
  flex: none;
}

.wordmark-text {
  box-shadow: inset 0 -0.2em 0 var(--strike);
  padding-bottom: 0.1em;
}

.wordmark:hover {
  color: #fff;
  text-decoration: none;
}

.mainnav {
  display: none;
  gap: 1.4rem;
  margin-left: 1rem;
  align-self: stretch;
}

.mainnav a {
  display: flex;
  align-items: center;
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 620;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-block: -0.65rem;
  padding-top: 2px;
}

.mainnav a:hover {
  color: #fff;
}

.mainnav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--strike);
}

/* Long labels give way to short ones until the bar has room for the league switcher. */
.mainnav .nav-full {
  display: none;
}

@media (min-width: 66rem) {
  .mainnav .nav-full {
    display: inline;
  }

  .mainnav .nav-short {
    display: none;
  }
}

.topbar-end {
  flex: 1 1 0;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Market bar, under the header: the clock (when orders close), then the ticker tape. On phones,
   one above the other; on larger screens, side by side, the clock first. */
.marketbar {
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}

.marketbar .clock {
  padding: 0.45rem var(--gutter);
}

.marketbar .clock + .tape {
  border-top: 1px solid var(--line-soft);
}

@media (min-width: 52rem) {
  .marketbar {
    display: flex;
    align-items: stretch;
  }

  .marketbar .clock {
    flex: 0 1 auto;
    max-width: 50%;
    border-right: 1px solid var(--line);
  }

  .marketbar .clock + .tape {
    flex: 1 1 0;
    min-width: 0;
    border-top: 0;
  }
}

.clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.clock strong {
  color: var(--text);
  font-weight: 700;
}

.clock-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-faint);
}

.clock.is-open .clock-dot {
  background: var(--up);
}

.clock.is-waiting .clock-dot {
  background: var(--strike);
}

.clock-session {
  display: none;
}

.clock-countdown::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--text-faint);
}

@media (prefers-reduced-motion: no-preference) {
  .clock.is-open .clock-dot {
    animation: pulse 2s ease-in-out infinite;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (min-width: 100rem) {
  .clock-session {
    display: inline;
  }
}

/* League switcher: a <details> menu, works without JavaScript. */
.switcher {
  position: relative;
  min-width: 0;
}

.switcher > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--quiet);
  color: var(--text);
  font-weight: 650;
  font-size: 0.88rem;
  cursor: pointer;
}

.switcher > summary:hover {
  background: var(--quiet-hover);
}

.switcher > summary::-webkit-details-marker {
  display: none;
}

.switcher > summary::after {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  margin-left: 0.15rem;
}

.switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 10;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.4rem;
  background: var(--panel-raised);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
}

.switcher-menu form {
  margin: 0;
}

.switcher-menu button,
.switcher-menu a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 560;
  text-align: left;
  text-decoration: none;
}

.switcher-menu button:hover,
.switcher-menu a:hover {
  background: var(--quiet-hover);
  color: #fff;
}

.switcher-menu [aria-current="true"] {
  font-weight: 760;
}

.switcher-menu [aria-current="true"]::after {
  content: "✓";
  color: var(--strike);
}

.switcher-menu hr {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: 0.35rem 0;
}

.profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.profile-link:hover,
.profile-link[aria-current="page"] {
  background: var(--strike);
  color: var(--on-strike);
  text-decoration: none;
}

/* Avatars (domain/avatars.ts): emoji in the round badge of a player, the initial otherwise. */
.has-avatar {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--sans);
  font-weight: 400;
  line-height: 1;
}

.profile-link.has-avatar {
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 1.35rem;
}

.profile-link.has-avatar:hover,
.profile-link.has-avatar[aria-current="page"] {
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 2px var(--strike);
}

.player {
  white-space: nowrap;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--quiet);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.avatar.has-avatar {
  font-size: 0.95rem;
}

/* Members not ranked yet, named under the season ranking. */
.waiting-player {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.waiting-player .avatar {
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.35rem;
  font-size: 0.75rem;
}

/* Profile photo: shown instead of the avatar, cropped to the round badge. */
.has-photo {
  overflow: hidden;
  padding: 0;
}

.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-link.has-photo {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.profile-link.has-photo:hover,
.profile-link.has-photo[aria-current="page"] {
  background: var(--panel-raised);
  outline: 2px solid var(--strike);
  outline-offset: -2px;
}

.avatar-step {
  margin: 1.1rem 0 0.6rem;
  font-size: 0.95rem;
}

.avatar-step + .error-text {
  margin-bottom: 0.6rem;
}

.photo-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
}

.photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.photo-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.photo-upload form[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.photo-current {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--strike);
  object-fit: cover;
}

.file-button {
  cursor: pointer;
}

.file-button:focus-within {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

/* 36 choices (the initial and 35 avatars): 6 full rows on a phone, 4 on a wider screen. */
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  justify-items: center;
}

@media (min-width: 36rem) {
  .avatar-picker {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

.avatar-picker button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 2.75rem;
  height: auto;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--quiet);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

.avatar-picker button.has-avatar {
  font-size: 1.45rem;
  font-weight: 400;
}

.avatar-picker button:hover {
  background: var(--quiet-hover);
  color: var(--text);
}

.avatar-picker button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--strike);
  background: var(--quiet-hover);
}

/* Ticker tape: the latest session's biggest moves, scrolling slowly. */
.tape {
  overflow: hidden;
  font-size: 0.84rem;
}

.tape-track {
  display: flex;
  width: max-content;
}

.tape ul {
  display: flex;
  gap: 2.25rem;
  margin: 0;
  padding: 0.5rem 1.125rem;
  list-style: none;
  white-space: nowrap;
}

.tape a {
  color: var(--text);
  text-decoration: none;
}

.tape a:hover .tape-name {
  text-decoration: underline;
}

.tape-day {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
}

.tape-name {
  font-weight: 650;
}

.tape-price {
  margin-inline: 0.3rem;
  color: var(--text-soft);
}

.tape-change {
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .tape-track {
    animation: tape 90s linear infinite;
  }

  .tape:hover .tape-track,
  .tape:focus-within .tape-track {
    animation-play-state: paused;
  }
}

@keyframes tape {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Without motion, the tape is a strip one can swipe or scroll. */
@media (prefers-reduced-motion: reduce) {
  .tape {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tape::-webkit-scrollbar {
    display: none;
  }

  .tape ul[aria-hidden="true"] {
    display: none;
  }
}

/* Bottom tab bar on phones. */
.tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bar);
  border-top: 1px solid var(--line-strong);
}

.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 650;
  text-decoration: none;
}

.tabbar svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbar a[aria-current="page"] {
  color: #fff;
}

.tabbar a[aria-current="page"] svg {
  stroke: var(--strike);
  stroke-width: 2.2;
}

body.has-tabbar {
  padding-bottom: calc(var(--tabbar) + var(--safe-bottom));
}

/* Signed in on a phone, the hammer, the name, the league switcher and the profile share one line:
   everything tightens a little so that "Le grand marché" stays whole down to 360 pixels. */
@media (max-width: 26.99rem) {
  body.has-tabbar .wordmark {
    gap: 0.3em;
    font-size: 0.98rem;
  }

  body.has-tabbar .wordmark-mark {
    width: 1.55em;
    height: 1.55em;
  }

  body.has-tabbar .topbar-inner {
    column-gap: 0.5rem;
  }

  body.has-tabbar .topbar-end {
    gap: 0.4rem;
  }

  .switcher > summary {
    gap: 0.35rem;
    padding: 0.3rem 0.55rem 0.3rem 0.65rem;
    font-size: 0.84rem;
  }

  .profile-link {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (max-width: 23.3rem) {
  body.has-tabbar .wordmark {
    gap: 0.28em;
    font-size: 0.93rem;
  }

  body.has-tabbar .wordmark-mark {
    width: 1.6em;
    height: 1.6em;
  }

  body.has-tabbar .topbar-end {
    gap: 0.35rem;
  }

  .switcher > summary {
    gap: 0.3rem;
    padding: 0.3rem 0.5rem 0.3rem 0.6rem;
    font-size: 0.82rem;
  }
}

/* Five tabs on the narrowest phones: "Portefeuille" keeps some air around it. Signed out, a smaller
   hammer leaves "Se connecter" on one line. */
@media (max-width: 22.5rem) {
  .tabbar a {
    font-size: 0.68rem;
  }

  body:not(.has-tabbar) .wordmark {
    gap: 0.3em;
  }

  body:not(.has-tabbar) .wordmark-mark {
    width: 1.35em;
    height: 1.35em;
  }
}

.topbar .button {
  white-space: nowrap;
}

@media (min-width: 52rem) {
  .wordmark {
    font-size: 1.3rem;
  }

  .mainnav {
    display: flex;
  }

  .tabbar {
    display: none;
  }

  body.has-tabbar {
    padding-bottom: 0;
  }

  html:has(body.has-tabbar) {
    scroll-padding-bottom: 0;
  }
}

/* Page frame ------------------------------------------------------------------------------ */

main {
  flex: 1;
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) var(--gutter) 3rem;
}

main:focus {
  outline: none;
}

.narrow {
  max-width: 40rem;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}

.kicker {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lead {
  margin-top: 0.5rem;
  max-width: var(--measure);
  color: var(--text-soft);
  font-size: 1rem;
}

.lead-line {
  display: block;
}

.grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 60rem) {
  .grid-2 {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }

  .grid-2-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .grid-value {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  }

  .grid-portfolio {
    align-items: stretch;
  }
}

/* Visitors without an account: the ticket invites them to play. */
.visitor-pitch {
  margin-bottom: 1.1rem;
}

.visitor-ticket .ticket-note {
  margin-top: 0.85rem;
}

/* On phones, a bar stuck to the bottom of the screen leads to the order ticket. */
.trade-dock {
  position: sticky;
  bottom: calc(var(--tabbar) + var(--safe-bottom));
  z-index: 10;
  display: flex;
  gap: 0.6rem;
  margin: 1.25rem calc(-1 * var(--gutter)) 0;
  padding: 0.65rem var(--gutter);
  background: rgb(13 18 34 / 0.94);
  border-top: 1px solid var(--line-strong);
  transition:
    opacity 0.15s,
    visibility 0.15s;
}

.trade-dock .button {
  flex: 1;
}

/* Visitors have no tab bar: the bar goes down to the bottom edge. */
body:not(.has-tabbar) .trade-dock {
  bottom: 0;
  padding-bottom: calc(0.65rem + var(--safe-bottom));
}

.trade-dock.is-away {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 52rem) {
  .trade-dock {
    bottom: 0;
  }
}

@media (min-width: 60rem) {
  .trade-dock {
    display: none;
  }
}

/* On phones, the order ticket comes right after the chart. */
@media (max-width: 59.99rem) {
  .stack.value-main {
    display: contents;
  }

  .value-main > * {
    order: 3;
  }

  .value-main > :first-child {
    order: 1;
  }

  .value-side {
    order: 2;
  }
}

.grid + .stack,
.grid-portfolio {
  margin-bottom: 1.25rem;
}

.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1.25rem;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
}

/* A board: one panel of the trading screen. */
.board {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem var(--pad) 1.1rem;
  min-width: 0;
}

/* A board's head runs across the whole board, above a line: its title must stand out from the
   bold names in the rows below, by its size and by a short stroke of the hammer yellow. */
.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: -1rem calc(-1 * var(--pad)) 0.9rem;
  padding: 0.95rem var(--pad) 0.85rem;
  border-bottom: 1px solid var(--line);
}

.board-head h2,
.section-head h2 {
  font-size: 1.25rem;
}

.board-head h2::before,
.section-head h2::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.9em;
  margin-right: 0.6rem;
  border-radius: 2px;
  background: var(--strike);
  vertical-align: -0.05em;
}

.board-note {
  font-size: 0.82rem;
  color: var(--text-faint);
}

a.board-note {
  color: var(--link);
}

.board-foot {
  margin-top: 0.85rem;
  font-size: 0.9rem;
}

.board-foot h3 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.section-title {
  margin-bottom: 0.9rem;
}

/* Figures ------------------------------------------------------------------------------------- */

.figure-block {
  display: grid;
  gap: 0.4rem;
}

.figure-label,
h1.figure-label {
  color: var(--text-faint);
  font-size: 0.78rem;
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-figure {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.3rem);
  font-weight: 800;
  font-stretch: 105%;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.hero-unit {
  color: var(--text-soft);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.figure-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: 0.35rem;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.figure-meta strong {
  color: var(--text);
}

.change-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.change-pill.is-up {
  background: var(--up-wash);
}

.change-pill.is-down {
  background: var(--down-wash);
}

.change-pill.is-flat {
  background: var(--quiet);
}

/* Stats and key figures: small labelled numbers. */
.stats,
.kpis {
  display: grid;
  gap: 1rem 1.25rem;
  margin: 0;
}

.stats {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.stats dt,
.kpis dt,
.split-legend dt,
.ohlc dt {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stats dd,
.kpis dd {
  margin: 0.25rem 0 0;
  font-size: 1.15rem;
  font-weight: 720;
  white-space: nowrap;
}

.stats dd.stats-note,
.kpis dd.stats-note,
.stats-note {
  margin-top: 0.15rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 450;
  white-space: normal;
}

.stats dd small {
  display: block;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 450;
}

.stats-tight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpis {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.kpis > div {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.kpis dd {
  font-size: 1.4rem;
  font-weight: 760;
}

/* Quote rows (lists of pages) ---------------------------------------------------------------- */

.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quote {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 5.2rem 4.8rem;
  grid-template-areas:
    "title spark price change"
    "sector spark price change";
  column-gap: 0.9rem;
  align-items: center;
  padding-block: 0.6rem;
  border-top: 1px solid var(--line-soft);
}

.quote-title {
  grid-area: title;
  font-weight: 620;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.quote-title::after {
  content: "";
  position: absolute;
  inset: 0;
}

.quote:hover .quote-title {
  color: var(--strike);
}

.quote-sector {
  grid-area: sector;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.quote-spark {
  grid-area: spark;
  width: 84px;
  height: 26px;
}

.spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.spark-ref {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.quote-price {
  grid-area: price;
  justify-self: end;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 720;
}

.quote-change {
  grid-area: change;
  justify-self: end;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* A form right under its explanation, in a board (profile). */
.board > p.muted + form {
  margin-top: 0.75rem;
}

/* The invitation to receive the morning recap by e-mail, under the session summary. */
.hammer-recap {
  margin-top: 0.5rem;
}

/* The player's place in a ranking, in words, above the table. */
.standing-line {
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.standing-line strong {
  font-size: 1.2em;
}

.quote-empty {
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text-soft);
}

@media (max-width: 30rem) {
  .quote {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title price"
      "sector change";
    row-gap: 0.2rem;
  }

  .quote-spark {
    display: none;
  }
}

/* Tables -------------------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
}

.table-wrap:focus-visible {
  outline-offset: -3px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.93rem;
}

th,
td {
  padding: 0.6rem 0.5rem;
  border-top: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:first-child td {
  border-top: 0;
}

tbody tr:hover td {
  background: rgb(255 255 255 / 0.02);
}

.t-num {
  text-align: right;
  white-space: nowrap;
}

.t-title {
  font-weight: 600;
}

.t-title a {
  color: var(--text);
  text-decoration: none;
}

.t-title a:hover {
  color: var(--strike);
  text-decoration: underline;
}

.t-price {
  font-weight: 650;
}

.t-change {
  font-weight: 700;
}

.t-action {
  text-align: right;
  width: 1%;
}

.row-rank {
  display: inline-block;
  width: 1.7rem;
  color: var(--text-faint);
  font-weight: 700;
}

.row-sector {
  display: block;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 450;
}

/* "plafond" or "plancher" under a session move at the daily limit. */
.move-limit {
  display: block;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: help;
}

.mover-change {
  display: grid;
  justify-items: end;
}

.screener .t-title {
  position: relative;
  padding-left: 1.9rem;
}

.screener .row-rank {
  position: absolute;
  left: 0;
  top: 0.6rem;
}

.screener .row-sector {
  display: inline;
  margin-left: 0.5rem;
}

@media (max-width: 40rem) {
  .screener .row-sector {
    display: block;
    margin-left: 0;
  }
}

.screener .quote-spark {
  display: inline-block;
  vertical-align: middle;
}

.rank {
  width: 2.5rem;
  color: var(--text-faint);
  font-weight: 760;
}

.podium-1 .rank {
  color: var(--strike);
}

tr.is-me td {
  background: var(--me-wash);
}

tr.is-me td:first-child {
  box-shadow: inset 3px 0 0 var(--strike);
  padding-left: 0.6rem;
}

tr.is-gap td {
  border-top: 3px double var(--line-strong);
}

.me-tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: var(--strike);
  color: var(--on-strike);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.rank-move {
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.rank-move.is-flat {
  color: var(--text-faint);
}

.tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--quiet);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 650;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.tag.is-warning {
  background: var(--warm-wash);
  color: var(--warm-text);
}

/* A line bought at the latest session: no move yet, so a word instead of a change. */
.t-change .line-new {
  margin-left: 0;
  font-weight: 600;
}

/* A line with a sale waiting for the next session. */
.tag.line-selling {
  background: rgb(110 140 255 / 0.16);
  color: var(--link-hover);
}

/* A whole line on its way out: its figures step back, its name and the way to keep it do not. */
tr.is-leaving td:not(.t-title):not(.t-action) {
  opacity: 0.6;
}

.position-note {
  margin: 0.85rem 0 0;
}

/* The session to come, on its own line under the chart's help; one sentence per line in a note. */
.chart-next,
.note-line {
  display: block;
}

/* "Annuler la vente" stays on one line: the column makes room. */
.t-action .button-small {
  white-space: nowrap;
}

/* On phones, a line's tag goes under its name, aligned with it, rather than wrapped mid-air. */
@media (max-width: 40rem) {
  table:not(.table-stack) .t-title .line-selling {
    display: block;
    width: fit-content;
    margin: 0.2rem 0 0.1rem;
  }
}

@media (max-width: 40rem) {
  .hide-small {
    display: none;
  }
}

/* On phones, wide tables become stacked rows: the title on its own line, figures below. */
@media (max-width: 40rem) {
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table-stack,
  .table-stack tbody {
    display: block;
  }

  .table-stack tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr));
    gap: 0.45rem 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line-soft);
  }

  .table-stack td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .table-stack td.t-wide {
    grid-column: 1 / -1;
    order: -1;
  }

  .table-stack td.t-action {
    grid-column: 1 / -1;
    width: auto;
  }

  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--text-faint);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .table-stack .t-num {
    text-align: left;
    white-space: normal;
  }

  .table-wrap:has(.table-stack) {
    overflow-x: visible;
  }

  tr.is-me td:first-child {
    padding-left: 0.4rem;
  }
}

/* Forms --------------------------------------------------------------------------------------- */

form {
  margin: 0;
}

.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.field label,
.label {
  font-weight: 650;
  font-size: 0.93rem;
}

.hint {
  color: var(--text-soft);
  font-size: 0.85rem;
}

input[type="email"],
input[type="text"],
input[type="search"],
input[type="number"] {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.9rem;
  border: 1px solid #2c3757;
  border-radius: var(--radius);
  background: var(--bg);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

input::placeholder {
  color: var(--text-faint);
}

input:focus {
  border-color: var(--link);
}

input[aria-invalid="true"] {
  border-color: var(--down);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.input-row > input {
  flex: 1 1 12rem;
  width: auto;
}

.input-suffix {
  position: relative;
  flex: 1 1 12rem;
}

.input-suffix input {
  padding-right: 5rem;
}

.input-suffix span {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 0.88rem;
  pointer-events: none;
}

.input-big input {
  min-height: 3.4rem;
  font-size: 1.35rem;
  font-weight: 700;
}

.search input {
  min-height: 3.1rem;
  background: var(--bar);
}

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.check input {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.15rem 0 0;
  accent-color: var(--strike);
}

.check .hint {
  display: block;
  font-weight: 400;
}

.check > span {
  font-weight: 620;
}

/* A yes-or-no question asked inside a form (the morning recap, on the welcome page). */
.choice {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.choice legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 650;
  font-size: 0.93rem;
}

.choice .hint {
  margin: -0.2rem 0 0.2rem;
}

.choice .check {
  min-height: 2.75rem;
  align-items: center;
  padding: 0 0.9rem;
  border: 1px solid #2c3757;
  border-radius: var(--radius);
  cursor: pointer;
}

.choice .check input {
  margin: 0;
}

.choice .check:has(input:checked) {
  border-color: var(--strike);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.9rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--strike);
  color: var(--on-strike);
  font: inherit;
  font-stretch: 108%;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--strike-hover);
  color: var(--on-strike);
  text-decoration: none;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button-secondary {
  background: var(--quiet);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.button-secondary:hover {
  background: var(--quiet-hover);
  color: #fff;
}

.button-quiet {
  min-height: 2.4rem;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--link);
  font-weight: 650;
}

.button-quiet:hover {
  background: var(--quiet);
  color: var(--link-hover);
}

.button-danger {
  background: var(--down);
  color: #1a0f12;
}

.button-danger:hover {
  background: #ff96a0;
  color: #1a0f12;
}

/* Selling is an action like buying: same yellow, the panel says which side. */
.button-sell {
  background: var(--strike);
  color: var(--on-strike);
}

.button-small {
  min-height: 2.25rem;
  padding: 0 0.8rem;
  font-size: 0.88rem;
}

.button-block {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1.05rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.presets button {
  min-height: 2.3rem;
  padding: 0 0.5rem;
  background: var(--quiet);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.86rem;
  font-weight: 650;
}

.presets button:hover {
  background: var(--quiet-hover);
  color: #fff;
}

.estimate {
  color: var(--warm-text);
  font-size: 0.85rem;
}

.estimate:empty {
  display: none;
}

/* Chips: sector filters. Swiped sideways on touch screens, without a scrollbar: overlay
   scrollbars (Windows 11, phones) would be drawn over the chips. With a mouse, they wrap. */
.chips {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.chips a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-soft);
  font-size: 0.86rem;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
}

.chips a:hover {
  border-color: var(--text-faint);
  color: #fff;
}

.chips a[aria-current="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

/* Segmented controls (period, chart type) and tabs (palmarès, order side). */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bar);
}

.seg a {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0 0.65rem;
  border-radius: 6px;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.seg a:hover {
  color: #fff;
}

.seg a[aria-current="true"] {
  background: var(--line-strong);
  color: #fff;
}

.tabs {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  margin: -0.25rem calc(-1 * var(--pad)) 0.25rem;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs a {
  flex: none;
  padding: 0.55rem 0;
  border-bottom: 2px solid transparent;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.tabs a:hover {
  color: #fff;
}

.tabs a[aria-current="true"] {
  color: #fff;
  border-bottom-color: var(--strike);
}

/* Messages ----------------------------------------------------------------------------------- */

.flash {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--text-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.flash.is-ok {
  border-left-color: var(--up);
}

.flash.is-error {
  border-left-color: var(--down);
}

.flash.is-warning {
  border-left-color: var(--warm);
}

.callout {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: var(--bar);
  font-size: 0.9rem;
}

.callout.is-warning {
  background: var(--warm-wash);
  color: var(--warm-text);
}

.callout strong {
  font-weight: 720;
  color: #ffd9bd;
}

.callout:not(.is-warning) strong {
  color: var(--text);
}

main > .callout {
  margin-bottom: 1.25rem;
}

.error-text {
  color: var(--down);
  font-weight: 620;
}

/* Home ----------------------------------------------------------------------------------------- */

.hammer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem var(--pad);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #121a33;
}

.hammer-text {
  display: grid;
  flex: 1 1 26rem;
  gap: 0.2rem;
}

.hammer p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

.hammer p strong {
  color: var(--text);
}

.hammer p strong.is-up {
  color: var(--up);
}

.hammer p strong.is-down {
  color: var(--down);
}

.hammer p a {
  color: var(--text);
  font-weight: 650;
}

.hammer p .is-up,
.hammer p .is-down {
  font-weight: 700;
}

.hammer-icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

/* Market at a glance: the market index, its last 30 sessions, the breadth and the sectors. */
.glance {
  display: grid;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.glance-figure {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.2rem 0 0.35rem;
}

.glance-figure .num {
  font-size: 1.9rem;
  font-weight: 780;
  letter-spacing: -0.02em;
}

.glance-title {
  margin: 1.1rem 0 0.25rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* A long list of movers in two columns, read top to bottom. */
@media (min-width: 36rem) {
  .movers-split {
    column-count: 2;
    column-gap: 2rem;
  }

  .movers.movers-split li {
    break-inside: avoid;
  }

  .movers.movers-split li:first-child {
    border-top: 1px solid var(--line-soft);
  }
}

@media (min-width: 36rem) {
  .glance {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

/* On phones the home page is one column: the market comes after the player's own boards. */
@media (max-width: 59.99rem) {
  .grid-home > .stack {
    display: contents;
  }

  .grid-home .home-later {
    order: 1;
  }
}

.portfolio-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem;
  margin-bottom: 1.1rem;
}

.portfolio-chart {
  flex: 1 1 16rem;
  max-width: 26rem;
}

.areaspark {
  display: block;
  width: 100%;
}

.mini-dates {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.split-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.8rem 0 0;
}

.split-legend dd {
  margin: 0.2rem 0 0;
  font-size: 1.1rem;
  font-weight: 720;
}

.movers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.movers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 5rem;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.93rem;
}

.movers li:first-child {
  border-top: 0;
}

.movers a {
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movers a:hover {
  color: var(--strike);
}

.movers li > :last-child {
  justify-self: end;
  font-weight: 700;
}

.movers .num {
  color: var(--text-soft);
}

/* Buzz agenda: a date leaf, what happens, the pages it should move. On a wide board (the market
   page) the events sit in two columns; the list clips the rule above its first row. */
.agenda-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
  column-gap: 2.5rem;
  overflow: hidden;
  list-style: none;
  margin: -0.6rem 0 0;
  padding: 0;
}

.agenda-list > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  margin-top: -1px;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-soft);
}

.agenda-date {
  display: grid;
  justify-items: center;
  padding: 0.3rem 0 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-raised);
  color: var(--text-faint);
  font-size: 0.7rem;
  line-height: 1.15;
}

.agenda-date strong {
  color: var(--text);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.agenda-list .is-soon .agenda-date {
  border-color: var(--strike);
}

.agenda-when {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--strike);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agenda-what {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  text-wrap: pretty;
}

.agenda-pages {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.88rem;
}

.agenda-pages li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--line-soft);
}

.agenda-pages li:first-child {
  border-top: 0;
}

/* Long titles wrap rather than lose their end ("… de 2026"), in lines of even length. */
.agenda-pages a {
  color: var(--text-soft);
  font-weight: 560;
  text-decoration: none;
  text-wrap: balance;
}

.agenda-pages a:hover {
  color: var(--strike);
}

.agenda-pages .change {
  font-weight: 700;
}

/* Split bars and colour keys ------------------------------------------------------------------ */

.splitbar {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

.swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.4rem;
  border-radius: 2px;
  vertical-align: 0.02em;
}

.fill-up {
  fill: var(--up);
  background: var(--up);
}

.fill-flat {
  fill: #4a5678;
  background: #4a5678;
}

.fill-down {
  fill: var(--down);
  background: var(--down);
}

.fill-invested {
  fill: var(--invested);
  background: var(--invested);
}

.fill-reserved {
  fill: var(--strike);
  background: var(--strike);
}

.fill-free {
  fill: var(--line-strong);
  background: var(--line-strong);
  outline: 1px solid #4a5678;
}

.fill-alloc-1 {
  fill: #6e8cff;
  background: #6e8cff;
}

.fill-alloc-2 {
  fill: #a78bfa;
  background: #a78bfa;
}

.fill-alloc-3 {
  fill: #38bdf8;
  background: #38bdf8;
}

.fill-alloc-4 {
  fill: #f472b6;
  background: #f472b6;
}

.fill-alloc-5 {
  fill: #fb923c;
  background: #fb923c;
}

.fill-alloc-6 {
  fill: #c4b5fd;
  background: #c4b5fd;
}

.fill-alloc-other {
  fill: #64748b;
  background: #64748b;
}

.alloc {
  list-style: none;
  margin: 0.9rem 0 0.75rem;
  padding: 0;
  font-size: 0.92rem;
}

.alloc li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line-soft);
}

.alloc li:first-child {
  border-top: 0;
}

.alloc li > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alloc .muted {
  display: inline-block;
  min-width: 3rem;
  text-align: right;
}

.weight {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sharebar {
  display: inline-block;
  border-radius: 3px;
  overflow: hidden;
}

.sharebar-track {
  fill: var(--quiet);
}

.sharebar-fill {
  fill: var(--invested);
}

/* Market ---------------------------------------------------------------------------------------- */

.breadth {
  flex: 0 1 24rem;
  min-width: min(100%, 18rem);
}

.breadth-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 0.84rem;
}

.breadth-figures > span {
  white-space: nowrap;
}

.indices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indices a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 0.7rem 0.85rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}

.indices a:hover {
  border-color: var(--line-strong);
  background: var(--panel-raised);
  color: var(--text);
}

.indices a[aria-current="true"] {
  border-color: var(--strike);
}

.index-name {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 650;
}

.index-figures {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.index-figures strong {
  font-size: 1.2rem;
}

.index-figures > span {
  font-size: 0.82rem;
  font-weight: 700;
}

.index-spark {
  display: block;
  width: 100%;
  height: 1.9rem;
}

@media (max-width: 40rem) {
  .indices {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 10.5rem;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .indices::-webkit-scrollbar {
    display: none;
  }

  .indices li {
    scroll-snap-align: start;
  }
}

/* Buzz map: the most read pages, coloured by their session change. */
.heatmap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  grid-auto-rows: 4.4rem;
  grid-auto-flow: dense;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.heatmap li {
  min-width: 0;
  border-radius: 8px;
}

.heatmap li.tile-big {
  grid-column: span 2;
  grid-row: span 2;
}

.heatmap a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}

.heatmap a:hover {
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6);
  color: #fff;
}

.heatmap strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.heatmap .tile-big strong {
  font-size: 1.1rem;
}

.heatmap strong.tile-cut {
  display: block;
}

.heatmap .tile-cut span {
  display: block;
  overflow: hidden;
  font-size: inherit;
  text-overflow: ellipsis;
}

.heatmap span {
  font-size: 0.78rem;
  white-space: nowrap;
}

.heatmap .tile-big span {
  font-size: 0.92rem;
}

/* The tile colour already says up or down: the change keeps its arrow, in white. */
.heatmap .is-up,
.heatmap .is-down,
.heatmap .is-flat {
  color: inherit;
  font-weight: 700;
}

/* White text keeps at least 4.5:1 on every tile (measured 31 October 2026). */
.heat-0 {
  background: #232c47;
}

.heat-up-1 {
  background: #17423a;
}

.heat-up-2 {
  background: #1b6450;
}

.heat-up-3 {
  background: #1d835d;
}

.heat-down-1 {
  background: #45242f;
}

.heat-down-2 {
  background: #6e2a3a;
}

.heat-down-3 {
  background: #9c3446;
}

.heat-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.6rem;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.heat-scale {
  display: flex;
  gap: 2px;
}

.heat-scale span {
  width: 1.2rem;
  height: 0.5rem;
  border-radius: 2px;
}

@media (max-width: 30rem) {
  .heatmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .heatmap li.tile-big {
    grid-row: span 1;
  }
}

/* Value page ---------------------------------------------------------------------------------- */

.crumbs {
  color: var(--text-faint);
  font-size: 0.85rem;
}

.crumbs a {
  color: var(--text-soft);
}

.article-title {
  margin-top: 0.3rem;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-top: 0.9rem;
}

.price-mark {
  font-size: clamp(2.6rem, 2rem + 2.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-delta {
  font-weight: 700;
}

.ratio-note {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.ratio-note strong {
  color: var(--text);
}

.buzz {
  flex: 0 1 22rem;
  min-width: min(100%, 18rem);
  padding: 0.85rem 1.1rem 0.75rem;
}

.buzz-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.buzz-head .kicker {
  margin: 0;
}

.buzz-figure {
  margin: 0.35rem 0 0.5rem;
  color: var(--text-soft);
  font-size: 0.88rem;
}

.buzz-figure strong {
  margin-right: 0.3rem;
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 800;
}

.buzz-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.gauge {
  display: block;
  width: 100%;
  overflow: visible;
}

.gauge-low {
  fill: var(--line-strong);
}

.gauge-high {
  fill: var(--warm);
  opacity: 0.75;
}

.gauge-mark {
  stroke: var(--text-soft);
  stroke-width: 2;
}

.gauge-needle {
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
}

.chart-head {
  align-items: center;
}

.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ohlc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.6rem 0.75rem;
  margin: 1rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  background: var(--bar);
  font-size: 0.88rem;
}

.ohlc dd {
  margin: 0.1rem 0 0;
  font-weight: 700;
  white-space: nowrap;
}

.chart-help {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.why {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.why-term {
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  background: var(--bar);
  color: var(--text-soft);
  font-size: 0.88rem;
}

.why-term strong {
  color: var(--text);
  font-size: 1rem;
}

.why-term.is-result {
  background: rgb(255 212 59 / 0.14);
}

.why-term.is-result strong {
  color: var(--strike);
}

.why-op {
  color: var(--text-faint);
  font-size: 0.82rem;
}

.agitation {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}

.agitation span {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.agitation span.is-on {
  background: var(--warm);
}

/* Order ticket: buy and sell. Without JavaScript both panels show, one under the other. */
.ticket-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 1rem;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--bar);
}

.ticket-tabs button {
  min-height: 2.5rem;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.95rem;
  border-radius: 7px;
}

.ticket-tabs button:hover {
  background: var(--quiet);
  color: #fff;
}

.ticket-tabs button[aria-selected="true"] {
  background: var(--line-strong);
  color: #fff;
}

.ticket-panel {
  display: grid;
  gap: 0.9rem;
}

.ticket-panel + .ticket-panel {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.ticket.has-tabs .ticket-panel + .ticket-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ticket-title {
  font-size: 1rem;
}

.ticket.has-tabs .ticket-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ticket-panel form {
  display: grid;
  gap: 0.9rem;
}

.ticket-panel .field {
  margin-bottom: 0;
}

.ticket-rows {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.ticket-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.28rem 0;
}

.ticket-rows dt {
  color: var(--text-soft);
}

.ticket-rows dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
}

/* A crowd premium above 5 %, or an auto-sell floor that is not below the price. */
.ticket-rows dd.is-warm,
.hint.is-warm {
  color: var(--warm-text);
}

/* The order just placed, spelled out at the top of the ticket. */
.ticket-placed {
  margin-bottom: 1rem;
}

[data-stop-gap]:empty {
  display: none;
}

/* What the next session would publish if the audience holds, or returns to its normal. */
.projection {
  margin-bottom: 1rem;
}

.projection-head {
  margin-bottom: 0.4rem;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.projection-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  text-align: center;
}

.projection-cases > div {
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
  background: var(--bar);
}

.projection-cases > div.is-down {
  background: rgb(255 122 133 / 0.1);
}

.projection-cases > div.is-up {
  background: rgb(52 211 153 / 0.1);
}

.projection-cases .case-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text-faint);
  font-size: 0.75rem;
  text-wrap: balance;
}

.projection-cases strong {
  font-size: 0.95rem;
}

.scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  text-align: center;
}

.scenarios > div {
  padding: 0.45rem 0.3rem;
  border-radius: 8px;
  background: var(--bar);
}

.scenarios > div.is-down {
  background: rgb(255 122 133 / 0.1);
}

.scenarios > div.is-up {
  background: rgb(52 211 153 / 0.1);
}

.scenarios span {
  display: block;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.scenarios strong {
  font-size: 0.95rem;
}

.ticket-when {
  margin-top: 1rem;
}

/* The notes under the order button, centred like it. */
.ticket-note,
.ticket-when {
  text-align: center;
}

.ticket-when strong {
  color: var(--text);
}

.order-panels {
  display: grid;
  gap: 1.25rem;
}

/* Charts ----------------------------------------------------------------------------------------- */

.tchart {
  position: relative;
  margin: 0;
}

.tchart-main,
.tchart-volume {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
}

.tchart-plot {
  display: block;
  width: 100%;
  overflow: visible;
  touch-action: pan-y;
}

.tchart-plot:focus-visible {
  outline-offset: 2px;
}

.tchart-axis {
  display: block;
  overflow: visible;
}

.tchart-axis text {
  fill: var(--text-faint);
  font-family: var(--sans);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.tchart-tag {
  fill: var(--strike);
}

.tchart .tchart-axis .tchart-tag-text {
  fill: var(--on-strike);
  font-size: 12px;
  font-weight: 800;
}

.tchart-grid {
  stroke: #1a2340;
  stroke-width: 1;
}

.tchart-ref {
  stroke: #55628a;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.tchart-last {
  stroke: var(--strike);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.6;
}

.tchart-line {
  fill: none;
  stroke: var(--link);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tchart-area {
  fill: var(--link);
  opacity: 0.1;
}

.tchart.is-up .tchart-line,
.areaspark.is-up .tchart-line {
  stroke: var(--up);
}

.tchart.is-up .tchart-area,
.areaspark.is-up .tchart-area {
  fill: var(--up);
}

.tchart.is-down .tchart-line,
.areaspark.is-down .tchart-line {
  stroke: var(--down);
}

.tchart.is-down .tchart-area,
.areaspark.is-down .tchart-area {
  fill: var(--down);
}

.tchart-compare {
  fill: none;
  stroke: var(--link);
  stroke-width: 1.8;
  stroke-dasharray: 6 5;
}

.candle.is-up {
  fill: var(--up);
  stroke: var(--up);
}

.candle.is-down {
  fill: var(--down);
  stroke: var(--down);
}

.candle line {
  stroke-width: 1.4;
}

.candle rect {
  stroke: none;
}

.tchart-volume {
  margin-top: 0.4rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.3rem;
}

.tchart-volume svg {
  display: block;
  width: 100%;
}

.vbar {
  opacity: 0.5;
}

.vbar.is-up {
  fill: var(--up);
}

.vbar.is-down {
  fill: var(--down);
}

.tchart-volume-label {
  align-self: center;
  padding-left: 8px;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tchart-dates {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 60px 0 0;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.tchart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 0.5rem;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.tchart-legend:empty {
  display: none;
}

.key-ref,
.key-compare {
  display: inline-block;
  width: 1.4rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.key-ref {
  border-top: 1px dashed #7d89ad;
}

.key-compare {
  border-top: 2px dashed var(--link);
}

.tchart-cross {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgb(233 237 247 / 0.45);
  pointer-events: none;
}

.chart-tip {
  position: absolute;
  top: 0.4rem;
  z-index: 2;
  display: grid;
  min-width: 8.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #18203b;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.35;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
}

.chart-tip strong {
  color: #fff;
  font-size: 1rem;
}

.data-table {
  margin-top: 0.6rem;
  font-size: 0.88rem;
}

.data-table summary {
  color: var(--link);
  cursor: pointer;
  font-weight: 600;
}

.data-table table {
  margin-top: 0.5rem;
}

.data-table-scroll {
  max-height: 18rem;
  overflow-y: auto;
}

/* Lists of orders --------------------------------------------------------------------------------- */

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-top: 1px solid var(--line-soft);
}

.order-list li:first-child {
  border-top: 0;
}

/* The button's text lines up with the right edge of the board, like the notes above it. */
.order-list .button-quiet {
  margin-right: -0.75rem;
}

.order-page {
  color: var(--text);
  font-weight: 600;
}

a.order-page:hover {
  color: var(--strike);
}

.order-detail {
  display: block;
  color: var(--text-faint);
  font-size: 0.82rem;
}

/* Invite ------------------------------------------------------------------------------------------- */

.invite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.invite input {
  flex: 1 1 14rem;
  font-size: 0.95rem;
  background: var(--bar);
}

/* The share sheet, where the browser offers one: the main way to invite, on a row of its own. */
.invite [data-share] {
  flex: 1 1 100%;
}

/* Empty states and welcome ----------------------------------------------------------------------- */

.empty {
  padding: 1.5rem 0 0.5rem;
  color: var(--text-soft);
}

.empty strong {
  display: block;
  color: var(--text);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.05rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--strike);
  color: var(--on-strike);
  font-weight: 800;
  font-size: 0.92rem;
}

.steps strong {
  display: block;
}

/* Sign-in ----------------------------------------------------------------------------------------- */

.auth {
  max-width: 30rem;
  margin: clamp(1rem, 6vw, 4rem) auto 0;
}

.auth h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
}

.auth .lead {
  margin-bottom: 1.5rem;
}

.auth-email {
  display: block;
  margin: 0.3rem 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.auth-board {
  margin-top: 2rem;
}

/* Rules and legal pages ------------------------------------------------------------------------- */

.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: 2.25rem;
  font-size: 1.35rem;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 0.8rem;
  color: #d3d9ea;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li + li {
  margin-top: 0.45rem;
}

.formula {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--strike);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  font-family: var(--serif);
  font-size: 1.2rem;
}

/* Player's guide ---------------------------------------------------------------------------------- */

.guide h3 {
  margin-top: 1.6rem;
  font-size: 1.1rem;
}

.guide-toc {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.prose .guide-toc ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2 18rem;
  column-gap: 2rem;
}

.prose .guide-toc li {
  margin-top: 0;
  padding-block: 0.2rem;
  break-inside: avoid;
}

.guide-toc li::marker {
  color: var(--text-faint);
}

.guide-figure {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.guide-chart {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
}

.guide-chart-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.prose .guide-chart-note {
  margin-top: 0.6rem;
  color: var(--text-soft);
}

.guide-dash {
  flex: none;
  width: 1.6rem;
  border-top: 1px dashed #55628a;
}

.guide-marker circle {
  fill: var(--strike);
}

.guide-marker text {
  fill: var(--on-strike);
  font-size: 13px;
  font-weight: 800;
}

/* The legend takes the numbers of the markers on the drawing. */
.prose .guide-legend {
  counter-reset: marker;
  list-style: none;
  margin-top: 0.9rem;
  padding: 0;
  font-size: 0.95rem;
}

.guide-legend li {
  counter-increment: marker;
  position: relative;
  padding-left: 2rem;
}

.guide-legend li::before {
  content: counter(marker);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--strike);
  color: var(--on-strike);
  font-size: 0.8rem;
  font-weight: 800;
}

.prose .steps {
  padding-left: 0;
  margin-top: 1rem;
}

.guide .steps strong {
  color: var(--text);
}

.guide-summary strong {
  display: inline;
}

.guide .callout {
  font-size: 0.95rem;
}

.guide .button-row {
  margin-top: 1.5rem;
}

/* Footer ------------------------------------------------------------------------------------------ */

.site-footer {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(82rem - 2 * var(--gutter));
  margin-inline: auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  margin-top: 0.5rem;
}

.footer-links a {
  color: var(--text-soft);
}

@media (forced-colors: active) {
  .candle rect,
  .vbar,
  .splitbar rect {
    fill: CanvasText;
  }
}

@media print {
  .topbar,
  .tape,
  .tabbar,
  .site-footer {
    display: none;
  }
}

/* Public home ------------------------------------------------------------------------------------ */
/* The game's front door at hypehammer.com, which replaced the separate landing site in November
   2026: the pitch and a board of real prices side by side on wide screens, then a day on the
   market, why fame does not pay, and the house rules. */

.home {
  display: grid;
  gap: clamp(2.75rem, 7vw, 5rem);
  margin-top: clamp(0.25rem, 3vw, 2.5rem);
}

.home-hero {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.home-pitch h1 {
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.home-pitch .lead {
  margin: 1.1rem 0 1.6rem;
  font-size: 1.08rem;
}

/* The promise, for solo players and leagues alike, right under the explanation. */
.home-pitch .home-tagline {
  margin-top: -0.6rem;
  color: var(--text);
  font-weight: 620;
}

.home-pitch .hint {
  max-width: var(--measure);
  margin-top: 1.1rem;
}

.home-board .board-foot {
  margin-top: 0.6rem;
}

.home-section h2,
.home-closing h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem);
}

.home-section > .lead {
  margin-top: 0.75rem;
}

/* A day on the market: a timeline, the hammer marked in yellow. */
.home-day {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.home-day li {
  position: relative;
  padding-top: 1.1rem;
  border-top: 2px solid var(--line-strong);
}

.home-day li::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--text-faint);
  border-radius: 50%;
  background: var(--bg);
}

.home-day li.is-hammer::before {
  border-color: var(--strike);
  border-radius: 2px;
  background: var(--strike);
}

.home-day strong {
  font-size: 1.08rem;
}

.home-day p {
  margin-top: 0.35rem;
  color: var(--text-soft);
}

@media (min-width: 52rem) {
  .home-day {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  /* The line runs on through the gap between two steps. */
  .home-day li:not(:last-child) {
    margin-right: -2.5rem;
    padding-right: 2.5rem;
  }
}

/* Fame does not pay: three charts on one scale. */
.home-fame {
  display: grid;
  gap: 2rem;
  margin-top: 1.75rem;
}

@media (min-width: 52rem) {
  .home-fame {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.home-fame figure {
  margin: 0;
  min-width: 0;
}

.home-fame svg {
  display: block;
  border-bottom: 1px solid var(--line-strong);
}

.home-fame figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  margin-top: 0.8rem;
}

.home-fame-name {
  font-weight: 680;
  overflow-wrap: anywhere;
}

.home-fame figcaption .num {
  font-size: 1.15rem;
  font-weight: 760;
}

.home-fame-text {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.93rem;
}

.home-fame-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.home-fame-ref {
  flex: none;
  width: 1.75rem;
  border-top: 1px dashed #55628a;
}

/* The house rules: two columns of short promises. */
.home-rules {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin: 1.5rem 0 0;
}

@media (min-width: 44rem) {
  .home-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-rules dt {
  font-weight: 700;
}

.home-rules dd {
  margin: 0.3rem 0 0;
  color: var(--text-soft);
}

.home-closing {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 2px solid var(--line-strong);
}

.home-closing p {
  max-width: var(--measure);
  margin-top: 0.75rem;
  color: var(--text-soft);
}

.home-closing .button-row {
  margin-top: 1.25rem;
}