/* Clearwick — the book. One instrument: a 99-rung price ladder with a clearing line across it. */
:root{
  --ground:#0A0806; --ground2:#12100C; --edge:#241E15; --edge2:#33291B;
  --ink:#F6EFE4; --ink2:#A29683; --ink3:#6B6153;
  --gold:#FFAE3C; --gold-dim:#8A5F1F; --hot:#FFF4DC; --cold:#5C7C8A;
  --strip:46px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px; line-height:1.5; letter-spacing:-0.01em;
  padding-top:var(--strip); padding-bottom:calc(var(--strip) + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace;font-variant-ligatures:none}

/* ---- fixed chrome -------------------------------------------------- */
.strip{
  position:fixed; inset:0 0 auto 0; height:var(--strip); z-index:40;
  display:flex; align-items:center; gap:14px; padding:0 14px;
  background:rgba(10,8,6,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);
}
.mark{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.markslab{
  width:19px;height:22px;border-radius:2px;flex:0 0 auto;
  background:
    linear-gradient(var(--hot),var(--hot)) 0 8px/100% 2px no-repeat,
    repeating-linear-gradient(180deg,var(--gold) 0 3px,var(--ground) 3px 4px);
  box-shadow:0 0 9px rgba(255,174,60,.45);
}
.markname{font-family:"Instrument Serif",Georgia,serif;font-size:21px;letter-spacing:.02em;line-height:1}
.stripstate{display:flex;align-items:center;gap:7px;color:var(--ink2);font-size:11px;letter-spacing:.09em;text-transform:uppercase;min-width:0;overflow:hidden;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);flex:0 0 auto}
.dot.cold{background:var(--ink3);box-shadow:none}

/* the buy control lives in fixed chrome at every width — never in the footer */
.buybar{
  position:fixed; z-index:45;
  left:0; right:0; bottom:0; height:var(--strip);
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(0deg,#2A1B06,#3A2607);
  border-top:1px solid var(--gold-dim);
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:12px;
}
.buyword{color:var(--gold)}
.buytick{color:var(--ink)}
.buynote{color:var(--ink3);letter-spacing:.04em;text-transform:none;font-weight:400;font-size:11px}
.buybar.live{background:linear-gradient(0deg,#3A2607,#5A3A08)}
.buybar.live .buynote{display:none}

/* ---- nav ------------------------------------------------------------ */
.seg{display:flex;gap:2px;padding:12px 14px 0;max-width:1160px;margin:0 auto}
.seg a{
  flex:1 1 0; text-align:center; padding:8px 4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); border:1px solid var(--edge); border-radius:2px; background:var(--ground2);
}
.seg a.on{color:var(--ground);background:var(--gold);border-color:var(--gold);font-weight:800}

/* ---- stage ---------------------------------------------------------- */
.stage{max-width:1160px;margin:0 auto;padding:14px}
.lede{font-family:"Instrument Serif",Georgia,serif;font-size:30px;line-height:1.08;letter-spacing:-.01em;margin:6px 0 8px}
.lede em{font-style:italic;color:var(--gold)}
.sub{color:var(--ink2);margin:0 0 16px;max-width:62ch}

.deck{display:grid;grid-template-columns:1fr;gap:14px}

/* ---- the instrument ------------------------------------------------- */
.instr{
  border:1px solid var(--edge); border-radius:3px; background:
    radial-gradient(120% 80% at 50% 0%,#16130D 0%,var(--ground2) 55%,var(--ground) 100%);
  padding:14px; position:relative; overflow:hidden;
}
.instrhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.instrtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.clock{font-size:11px;letter-spacing:.1em;color:var(--gold)}
.clock.cold{color:var(--ink3)}

.rungs{position:relative;height:392px;margin:0 0 4px;border-left:1px solid var(--edge2);padding-left:34px}
.axis{position:absolute;left:0;top:0;width:32px;height:100%;pointer-events:none}
.axmark{position:absolute;right:4px;transform:translateY(-50%);font-size:10px;color:var(--ink3)}
.rung{position:absolute;left:34px;height:3px;border-radius:1px;background:var(--gold-dim);transition:width .4s ease}
.rung.over{background:var(--gold);box-shadow:0 0 7px rgba(255,174,60,.5)}
.rung.mine{background:var(--hot);box-shadow:0 0 9px rgba(255,244,220,.7)}
.priceline{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--gold);pointer-events:none;transition:top .45s cubic-bezier(.3,.8,.3,1)}
.pricetag{
  position:absolute;right:0;top:-9px;background:var(--gold);color:var(--ground);
  font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:2px;white-space:nowrap;
}
.drawline{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--hot);pointer-events:none;box-shadow:0 0 14px rgba(255,244,220,.6)}
.drawtag{position:absolute;right:0;top:-10px;background:var(--hot);color:var(--ground);font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:2px}
.pick{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--cold);pointer-events:none;opacity:.85}
.picktag{position:absolute;left:0;top:-9px;background:var(--cold);color:var(--ground);font-size:10px;font-weight:800;padding:2px 6px;border-radius:2px}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink3);font-size:12px;padding:0 24px;line-height:1.6}

/* ---- the commit ----------------------------------------------------- */
.commit{border-top:1px solid var(--edge);margin-top:12px;padding-top:12px}
.readout{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px}
.readnum{font-family:"Instrument Serif",Georgia,serif;font-size:58px;line-height:.86;color:var(--gold)}
.readside{color:var(--ink2);font-size:11px;line-height:1.5}
.readside b{color:var(--ink);font-weight:600}
.dial{width:100%;-webkit-appearance:none;appearance:none;background:transparent;margin:4px 0 12px;height:26px}
.dial::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--edge2),var(--gold-dim));border-radius:2px}
.dial::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--edge2),var(--gold-dim));border-radius:2px}
.dial::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:2px;background:var(--gold);border:0;box-shadow:0 0 12px rgba(255,174,60,.55);cursor:grab}
.dial::-moz-range-thumb{width:22px;height:22px;border-radius:2px;background:var(--gold);border:0;box-shadow:0 0 12px rgba(255,174,60,.55);cursor:grab}
.act{
  display:block;width:100%;padding:15px;border:0;border-radius:2px;background:var(--gold);color:var(--ground);
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.act:disabled{background:var(--edge2);color:var(--ink3);cursor:default}
.act.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-dim)}
.note{color:var(--ink3);font-size:11px;margin-top:9px;min-height:16px;line-height:1.5}
.note.bad{color:#E4785A}
.note.good{color:var(--gold)}

/* ---- side matter ---------------------------------------------------- */
.aside{display:grid;gap:14px;align-content:start}
.slab{border:1px solid var(--edge);border-radius:3px;background:var(--ground2);padding:13px}
.slabtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.pair{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dotted var(--edge)}
.pair:last-child{border-bottom:0}
.pair span{color:var(--ink2)}
.pair b{font-weight:600}
.big{font-family:"Instrument Serif",Georgia,serif;font-size:34px;line-height:1;color:var(--gold)}
.tape{display:grid;gap:0}
.tick{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dotted var(--edge);font-size:11px;color:var(--ink2)}
.tick:last-child{border-bottom:0}
.tick b{color:var(--ink);font-weight:600}
.quiet{color:var(--ink3);font-size:12px;line-height:1.6}
.prose p{color:var(--ink2);margin:0 0 10px}
.prose h3{font-family:"Instrument Serif",Georgia,serif;font-size:21px;font-weight:400;margin:18px 0 6px;color:var(--ink)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding:9px 0 9px 30px;position:relative;border-bottom:1px dotted var(--edge);color:var(--ink2)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:9px;width:20px;text-align:center;color:var(--gold);font-weight:800}
.steps li b{color:var(--ink);font-weight:600}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:12px;min-width:520px}
th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:400;padding:7px 9px;border-bottom:1px solid var(--edge)}
td{padding:8px 9px;border-bottom:1px dotted var(--edge);color:var(--ink2);white-space:nowrap}
td b{color:var(--ink);font-weight:600}
.won{color:var(--gold)}
.lost{color:var(--ink3)}
.addr{word-break:break-all;white-space:normal;color:var(--ink2);font-size:11px}

/* ---- footer --------------------------------------------------------- */
.shelf{max-width:1160px;margin:22px auto 0;padding:16px 14px 26px;border-top:1px solid var(--edge);color:var(--ink3);font-size:11px;line-height:1.8}
.shelfline b{color:var(--ink2);font-weight:600}
.shelflinks{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.shelflinks a{color:var(--gold-dim);border-bottom:1px solid var(--edge2)}

/* ---- middle: a wider measure, a bigger instrument -------------------- */
@media (min-width:720px){
  body{padding-bottom:0}
  .buybar{
    left:auto; right:12px; bottom:auto; top:8px; height:30px; width:auto;
    padding:0 13px; border-radius:2px; border:1px solid var(--gold-dim); border-top:1px solid var(--gold-dim);
  }
  .stage{padding:18px}
  .seg{padding:16px 18px 0}
  .lede{font-size:38px}
  .rungs{height:470px}
  .readnum{font-size:70px}
  .shelf{padding:18px}
}

/* ---- wide: the page recomposes into instrument + activity ------------ */
@media (min-width:1000px){
  .strip{gap:18px;padding:0 20px}
  .markname{font-size:24px}
  .seg{max-width:1160px}
  .seg a{flex:0 0 132px}
  .lede{font-size:46px;max-width:19ch}
  .deck{grid-template-columns:minmax(0,1fr) 372px;align-items:start}
  .deck.solo{grid-template-columns:minmax(0,1fr)}
  .rungs{height:560px}
  .readnum{font-size:92px}
  .instr{padding:20px}
  table{min-width:0}
}