/* Coattail mobile. Shares the board's colour tokens so the two pages read as
   one product, but none of its layout: the board is a 900px table and this is
   a single column with fixed chrome. */
:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --pos:#0f9d58; --neg:#e5484d; --accent:#3b83f7; --hover:#f1f5f9;
  --radius:12px;
  /* The bottom bar is fixed, so every scrollable region owes it this much
     clearance plus whatever the phone's home indicator takes. */
  --bar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0d1117;--panel:#151b23;--ink:#e6edf3;--muted:#8b949e;--line:#263040;
        --hover:#1c2430;--pos:#3fb950;--neg:#f85149;}
}
*{box-sizing:border-box}
/* Opening a sheet locks body scroll, which removes the scrollbar and shifts
   the whole column sideways on desktop. Reserving the gutter keeps it still.
   No effect on phones, which have no persistent scrollbar. */
html{scrollbar-gutter:stable}
/* Author display rules outrank the UA [hidden] rule, so state it once here.
   Without this every .sheet below would be permanently open on top of the
   page, swallowing taps -- which is exactly the bug the desktop page shipped. */
[hidden]{display:none!important}

body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:calc(var(--bar-h) + var(--safe-b) + 12px);
  -webkit-text-size-adjust:100%}
h1,h2,h3{margin:0}
.muted{color:var(--muted)}
.pad{padding:16px}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.num{font-variant-numeric:tabular-nums}

/* ── phone column ───────────────────────────────────────────────────────
   The layout is built for a phone, so on anything wider it stays a phone
   rather than stretching: a row spanning 1900px of desktop is unreadable and
   the fixed bar looks like a site footer instead of app chrome. Everything
   shares one width token, including the fixed bar, which has to be centred by
   transform rather than margin because it is out of flow. */
:root{--col:440px}
.top,main{max-width:var(--col);margin-inline:auto}

@media (min-width:560px){
  /* Give the column edges on a desktop so it reads as a device, not as a
     narrow website that forgot its sidebar. */
  body{background:var(--hover)}
  .top,main{background:var(--bg)}
  .top,main,.bar{border-inline:1px solid var(--line)}
  main{min-height:60vh}
}

/* ── header ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 10px;
  border-bottom:1px solid var(--line)}
.top h1{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
#q{width:100%;padding:10px 12px;font-size:16px; /* 16px: iOS zooms below this */
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--ink)}

/* ── strategy rows ──────────────────────────────────────────────────── */
.row{padding:12px 16px;border-bottom:1px solid var(--line)}
.row-top{display:flex;align-items:center;gap:12px}
/* Full column width rather than a thumbnail beside the text: at 440px a curve
   squeezed next to the name is decoration, and the shape is the point. */
.spark{display:block;width:100%;height:40px;margin-top:10px}
.row-main{flex:1;min-width:0}
.row-name{font-weight:600;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sub{font-size:12px;color:var(--muted);margin-top:2px}
.row-ret{font-size:13px;font-weight:600;margin-top:3px}
.badge{font-size:10px;border:1px solid currentColor;border-radius:999px;
  padding:1px 5px;margin-left:6px;color:var(--accent);vertical-align:1px}
.copy{flex:none;border:1px solid var(--accent);background:transparent;
  color:var(--accent);font:600 13px inherit;padding:8px 14px;border-radius:999px;
  cursor:pointer;min-height:36px}
.copy:active{background:var(--accent);color:#fff}
.copy[disabled]{border-color:var(--line);color:var(--muted);opacity:.6}
.held{font-size:11px;color:var(--pos);margin-top:3px;font-weight:600}

/* ── bottom bar ─────────────────────────────────────────────────────── */
/* Centred by transform, not margin: it is out of flow, so `margin-inline:auto`
   does nothing and `left:0;right:0` would stretch it past the column. */
.bar{position:fixed;bottom:0;z-index:30;
  left:50%;transform:translateX(-50%);width:min(100%,var(--col));
  display:flex;align-items:stretch;
  background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);min-height:var(--bar-h)}
.bar-side{flex:0 0 27%;border:0;background:none;color:var(--ink);
  font:inherit;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:8px 4px}
.bar-side:active{background:var(--hover)}
.bar-mid{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:8px 4px;border-left:1px solid var(--line);
  border-right:1px solid var(--line)}
.bar-row{display:flex;justify-content:space-between;gap:8px;padding:0 10px}
.bar-k{font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600}
.bar-v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

/* ── sheets ─────────────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(15,23,42,.45);
  display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{background:var(--panel);width:min(100%,var(--col));
  max-height:88vh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:18px 16px
  calc(18px + var(--safe-b));border-top:1px solid var(--line)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.sheet-head h2{font-size:17px}
.x{border:0;background:none;color:var(--muted);font-size:28px;line-height:1;
  cursor:pointer;padding:0 6px}

.kv{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.kv:last-of-type{border-bottom:0}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* Slider. Big thumb: this is the primary control and it is used with a thumb,
   not a pointer. */
.amount{font-size:30px;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums;margin:14px 0 2px}
.amount-sub{text-align:center;font-size:12px;color:var(--muted);margin-bottom:14px}
input[type=range]{width:100%;margin:8px 0 4px;accent-color:var(--accent);height:28px}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.chips{display:flex;gap:8px;margin:12px 0}
.chip{flex:1;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font:600 13px inherit;padding:9px 0;border-radius:9px;cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.buy{width:100%;border:0;background:var(--accent);color:#fff;font:700 16px inherit;
  padding:15px;border-radius:12px;cursor:pointer;margin-top:14px;min-height:50px}
.buy[disabled]{opacity:.45;cursor:not-allowed}
.note{font-size:12px;color:var(--muted);line-height:1.55;margin:12px 0 0}
.warn{background:var(--hover);border-radius:9px;padding:11px;font-size:12px;
  color:var(--muted);line-height:1.55;margin-top:12px}
.big{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.empty{padding:26px 6px;text-align:center;color:var(--muted);font-size:14px}

/* ── detail page ────────────────────────────────────────────────────── */
/* The row is an <a>, so the link colour and underline have to be reset; it
   keeps real navigation semantics (long-press, focus) that a div would lose. */
a.row{color:inherit;text-decoration:none;display:block}
a.row:active{background:var(--hover)}

.top-detail{display:flex;align-items:flex-start;gap:12px}
.top-detail .back{font-size:22px;line-height:1;color:var(--muted);
  text-decoration:none;padding:2px 6px 6px 0;flex:none}
.top-titles{min-width:0}
.top-detail h1{font-size:18px;margin:0 0 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.detail{padding-bottom:calc(76px + var(--safe-b))}

.card{background:var(--panel);border-block:1px solid var(--line);
  padding:14px 16px;margin-bottom:4px}
.ranges{margin:0 0 10px}
.chart{display:block;width:100%;height:auto}
.chart-note{font-size:11px;color:var(--muted);text-align:right;margin:2px 0 0}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px;font-size:12px;
  color:var(--muted)}
.lk{display:inline-flex;align-items:center;gap:6px}
.lk b{font-variant-numeric:tabular-nums}
.sw{width:14px;height:0;border-top-width:2px;display:inline-block;flex:none}
.sw-a{border-top-style:solid;border-color:var(--accent)}
.sw-b{border-top-style:dashed;border-color:var(--muted)}

.sec{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:18px 16px 8px;display:flex;align-items:baseline;gap:8px}
.sec .count,.sec .asof{text-transform:none;letter-spacing:0;font-weight:400}
.sec .asof{margin-left:auto;font-size:11px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-block:1px solid var(--line)}
.tile{background:var(--panel);padding:11px 16px}
.tile h3{font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600;margin-bottom:3px}
.tv{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}

.holds{background:var(--panel);border-block:1px solid var(--line)}
.hold{display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-bottom:1px solid var(--line)}
.hold:last-child{border-bottom:0}
.ht{font-weight:600;font-size:13px;width:58px;flex:none;
  overflow:hidden;text-overflow:ellipsis}
/* The bar is the point of this list: concentration is visible instantly. */
.hbar{flex:1;height:7px;background:var(--hover);border-radius:4px;overflow:hidden}
.hbar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.hp{width:58px;text-align:right;font-size:12px;flex:none;
  font-variant-numeric:tabular-nums;color:var(--muted)}

.more{display:block;width:100%;background:none;border:0;color:var(--accent);
  font:600 13px inherit;padding:13px;cursor:pointer}
.about{padding:0 16px;color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.disclaimer{padding:20px 16px;font-size:11px;color:var(--muted);line-height:1.5;margin:0}

/* Sits in normal flow after the list, so the fixed bottom bar covers it until
   you scroll to the end -- which is where someone looking for a way out looks. */
.sitefoot{max-width:var(--col);margin-inline:auto;padding:18px 16px 24px;
  text-align:center}
.sitefoot a{color:var(--muted);font-size:12px;text-decoration:none}
.sitefoot a:active{color:var(--accent)}

/* Replaces the bottom bar on the detail page: one action, always reachable. */
.cta{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,var(--col));z-index:30;background:var(--panel);
  border-top:1px solid var(--line);padding:10px 16px calc(10px + var(--safe-b))}
.cta .buy{margin-top:0}