/* Dark by default: this is opened at 07:00 and after the close, often in the
   dark, and a white flash on a phone at those hours is its own small hostility. */

:root {
  --bg: #0f1115;
  --card: #181b22;
  --line: #262b35;
  --text: #e7e9ee;
  --muted: #949bab;
  --buy: #3ecf8e;
  --sell: #ff6b6b;
  --accent: #4c8dff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

header { padding: 24px 20px 8px; }
h1 { margin: 0; font-size: 28px; letter-spacing: -0.02em; }
/* The wordmark stands in for the heading text. Sized in CSS rather than left
   at its natural size so it holds on a phone as well as a monitor. */
.brand { line-height: 0; }
.brand img { width: 220px; height: auto; max-width: 62vw; }

/* Sits under the wordmark on every screen. One paragraph, so it wraps
   rather than stacking -- this is above every page, and a tall header is
   paid for on each of them. */
.tagline {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.45;
  max-width: 52ch;
}
/* The payoff, quieter. At the same weight it reads as a fourth item in the
   list rather than the conclusion of one. */
.tagline span { color: var(--muted); }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.tabs { display: flex; gap: 8px; padding: 12px 20px; }
.tab {
  flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer;
}
.tab.active { background: var(--card); color: var(--text); }

main { padding: 4px 20px 40px; }
.hidden { display: none !important; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin-bottom: 12px; cursor: pointer;
}
.card:active { transform: scale(0.995); }

.card-top { display: flex; justify-content: space-between; align-items: baseline; }
.symbol { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.action { font-size: 13px; font-weight: 650; padding: 3px 9px; border-radius: 999px; }
.action.BUY  { background: rgba(62,207,142,.15); color: var(--buy); }
.action.SELL { background: rgba(255,107,107,.15); color: var(--sell); }

.prices { display: flex; gap: 18px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.prices b { color: var(--text); font-weight: 600; }
.why { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.expires { margin-top: 8px; font-size: 12px; color: var(--muted); }

.empty { color: var(--muted); text-align: center; padding: 48px 20px; }

/* Approval sheet */
.sheet {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; z-index: 20;
}
.sheet-inner {
  background: var(--card); width: 100%; border-radius: 18px 18px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.sheet h2 { margin: 0 0 12px; font-size: 20px; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 16px; font-size: 15px; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
input {
  width: 100%; padding: 14px; font-size: 18px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 16px; }

.row { display: flex; gap: 10px; }
button { font-family: inherit; }
.primary, .secondary {
  flex: 1; padding: 15px; border-radius: 12px; font-size: 16px;
  font-weight: 600; border: none; cursor: pointer;
}
.primary { background: var(--accent); color: #fff; }
.primary:disabled { opacity: .5; }
.secondary { background: transparent; border: 1px solid var(--line); color: var(--text); }
.link {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer;
}
.error { color: var(--sell); font-size: 14px; margin: 12px 0 0; }

footer { padding: 0 20px 32px; }
footer p { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }

/* Settings */
.card.static { cursor: default; }
.card.static h2 { margin: 0 0 10px; font-size: 18px; }
.why.small { font-size: 13px; }
.card.static label { margin-top: 14px; }
.card.static input[type="text"], .card.static input[type="password"] { margin-bottom: 2px; }
.check { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text); font-size: 15px; }
.check input { width: auto; }
.card.static .row { margin-top: 18px; }

/* ---- the record -------------------------------------------------------- */
/* Deliberately plain. The scorecard's credibility comes from the numbers being
   checkable, and dressing it up like a marketing page works against that. */
.stats { display: grid; gap: 14px; margin-top: 4px; }
.stat { display: grid; gap: 2px; }
.stat-label { font-size: 0.82rem; opacity: 0.7; }
.stat-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat-value .of { font-size: 0.8rem; opacity: 0.65; font-variant-numeric: normal; }
/* The unflattering categories get the same weight as the wins, not smaller
   type in a corner. */
.stat-note { font-size: 0.78rem; opacity: 0.65; line-height: 1.45; }

/* ---- account warnings --------------------------------------------------- */
/* Loud for the urgent ones and quiet for the rest. A subscriber who sees the
   same styling for "you may be about to owe shares" and "you already hold some
   of this" learns to skim both. */
.warnings { display: grid; gap: 10px; margin: 0 0 16px; }
.warn {
  border-left: 3px solid currentColor;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.warn-urgent { color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.warn-note   { color: inherit; background: rgba(127, 127, 127, 0.10); opacity: 0.9; }
.warn b { display: block; margin-bottom: 2px; }
.warn-summary { font-size: 0.85rem; opacity: 0.75; }

/* ------------------------------------------------------------- positions */

.checked-note { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
.checked-note.small { font-size: 13px; margin-top: 18px; }

.pos {
  border-top: 1px solid var(--line);
  padding: 10px 0 2px;
}
.pos-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pos-head b { font-size: 16px; letter-spacing: 0.01em; }
.pos-size { color: var(--muted); font-size: 13px; }

.pos-figures, .pos-totals {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.pos-figures { margin-top: 4px; }
.pos-totals {
  margin: 2px 0 6px; padding-bottom: 10px;
  font-size: 16px;
}
.pos-label { color: var(--muted); font-size: 13px; }

.up { color: var(--buy); }
.down { color: var(--sell); }
.flat { color: var(--muted); }

/* ------------------------------------------------------------------ sign in */

.providers { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* Anchors, not buttons: a provider flow is a browser redirect and has to leave
   this page, so it must behave like a link -- openable in a new tab, and
   working with JavaScript broken. */
.provider {
  display: block; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); font-size: 15px; font-weight: 600;
  text-align: center; text-decoration: none;
  /* 44px minimum: a thumb target on a phone, and it costs a desktop nothing. */
  min-height: 44px; box-sizing: border-box;
}
.provider:hover { border-color: var(--accent); }
.provider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----------------------------------------------------------- recovery codes */

/* Monospaced and widely spaced: these get copied onto paper by hand, and the
   alphabet already excludes the characters people mistranscribe. */
.codes ol { margin: 12px 0 0; padding-left: 22px; }
.codes li { margin: 6px 0; }
.codes code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px; letter-spacing: 0.08em;
}

/* Used where the absence of recovery is being described, which is a live risk
   rather than a suggestion. */
.warn { color: var(--sell); }

/* ------------------------------------------------------------- public front */

/* The first thing a stranger sees. Slightly larger than an ordinary card
   because it is doing the explaining, and the numbers inside it are the pitch. */
.front-hero h2 { font-size: 22px; letter-spacing: -0.01em; }
.front-hero .stats { margin-top: 16px; }

/* The denominator, never smaller than a whisper. A win rate printed without
   what it is out of is the thing this product is selling against, so the two
   must not be styled as headline and footnote. */
.front-hero .of { color: var(--muted); font-weight: 500; }
.front-hero b { color: var(--text); }

/* ------------------------------------------------- email and password form */

/* Separated from the provider buttons above it, because it is the other kind of
   answer to the same question and running them together reads as one long list
   of equally likely options. Most people will use a provider. */
#password-form {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
#password-form label:first-of-type { margin-top: 0; }
#password-form .row { margin-top: 16px; }

/* ------------------------------------------------------------------ desktop */
/* The phone layout above stays the default and is not rebuilt here. It is what
   most of this is opened on, and widening a mobile-first sheet degrades far more
   gracefully than narrowing a desktop-first one.
 
   What actually goes wrong on a monitor is not that anything breaks: it is that
   everything stretches. Five short words become five 300px buttons, a sentence
   runs to two hundred characters, and a settings form with two fields fills a
   27-inch screen. The fixes below are all the same fix -- stop things growing
   past the width at which they were legible. */

@media (min-width: 720px) {
  /* A measure, not a width. Text set across 1500px is unreadable however much
     room the monitor has, because the eye loses the line on the way back. */
  header, .tabs, main, footer {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sized to their labels. `flex: 1` divides the row evenly, which is right on a
     phone where the row IS the width, and absurd on a monitor. */
  .tab { flex: 0 0 auto; padding: 10px 20px; }
  .tabs { gap: 10px; }

  /* There is a pointer now, so say what is clickable. A signal card opens the
     approval sheet; a static card is a form and already says `cursor: default`. */
  .card:not(.static):hover { border-color: var(--accent); }

  /* Prose narrower than the card it sits in. The stats beside it want the full
     width; the sentences do not. */
  .why { max-width: 68ch; }

  /* Two or three across instead of a single stacked column. On a phone these
     stack because there is no room; on a monitor stacking them makes a
     scorecard look longer and thinner than it is.

     Capped rather than `1fr`: equal fractions of 880px push two figures to
     opposite ends of the card, which reads as two unrelated facts rather than a
     row of them. A number and its label want to stay near their neighbours. */
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
    gap: 18px 32px;
    justify-content: start;
  }

  /* Buttons stop growing. `flex: 1` on a phone gives a thumb a target; on a
     monitor it gives a mouse a 400px "Save" button. */
  .row { justify-content: flex-start; }
  .primary, .secondary { flex: 0 1 auto; min-width: 160px; padding: 13px 22px; }
  .card.static .row { gap: 12px; }

  /* A bottom sheet is a phone idiom -- it comes up under the thumb. With a
     mouse it should be a dialog in the middle of the screen, at a size that
     matches the little it contains. */
  .sheet { align-items: center; justify-content: center; }
  .sheet-inner {
    width: min(460px, 92vw);
    border-radius: 18px;
    border: 1px solid var(--line);
    padding: 24px;
  }

  /* The sign-in choices are a short list of options, not a stack of full-width
     bars. */
  .providers { max-width: 380px; }

  /* Recovery codes read in two columns rather than one long strip, which is
     also closer to how somebody will write them down. */
  .codes ol { columns: 2; column-gap: 32px; }
}

/* Wider still: hold the measure rather than continuing to grow. Beyond about
   this point extra pixels add nothing a reader wants. */
@media (min-width: 1200px) {
  header, .tabs, main, footer { max-width: 960px; }
}