/* Cedeholm — a drafting sheet. Deep plate navy, white engineering line, one signal red.
   Words in Khand, every figure in the mono: display faces set the digit 1 as a bare stroke. */
:root{
  --ground:#05101E; --plate:#0A1B2E; --ridge:#143048;
  --ink:#DFE9F5; --faint:#7E96AE;
  --red:#FF4B3E; --reddim:#8E2A22;
  --tb:64px; --sb:66px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  background-image:linear-gradient(rgba(223,233,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(223,233,245,.045) 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--ink); font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px; line-height:1.55; -webkit-text-size-adjust:100%;
  padding-top:var(--tb); padding-bottom:calc(var(--sb) + env(safe-area-inset-bottom,0px));
}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:Khand,"JetBrains Mono",sans-serif; font-weight:600; letter-spacing:.01em; margin:0}

/* ---------- the title block ---------- */
#titleblock{
  position:fixed; inset:0 0 auto 0; z-index:40; height:var(--tb);
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:34px 30px;
  grid-template-areas:"mark mark go" "nav nav link";
  align-items:center; gap:0 10px; padding:0 10px;
  background:var(--plate); border-bottom:1px solid var(--ridge);
  box-shadow:0 1px 0 rgba(223,233,245,.08), 0 10px 26px rgba(5,16,30,.75);
}
.tbmark{grid-area:mark; display:flex; align-items:center; gap:8px; text-decoration:none; min-width:0}
.tbmark img{width:22px; height:22px; border:1px solid var(--ridge)}
.tbmark span{font-family:Khand,sans-serif; font-size:21px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.tbgo{
  grid-area:go; display:flex; align-items:baseline; gap:7px; text-decoration:none; white-space:nowrap;
  padding:5px 10px; border:1px solid var(--red); color:var(--red); font-size:11px; letter-spacing:.06em;
}
.tbgo b{font-size:12px; letter-spacing:.04em}
.tbgo[data-state="live"]{background:var(--red); color:var(--ground); font-weight:700}
.tbgo[data-state="soon"]{border-color:var(--reddim); color:rgba(255,75,62,.72)}
.tbread{grid-area:read; display:none; gap:9px; font-size:10.5px; color:var(--faint); letter-spacing:.04em; white-space:nowrap; overflow:hidden}
.tbread span+span{padding-left:9px; border-left:1px solid var(--ridge)}
.tbnav{grid-area:nav; display:flex; gap:14px; align-items:center; font-size:11px}
.tbnav a{color:var(--faint); text-decoration:none; letter-spacing:.05em}
.tbnav a:hover{color:var(--ink)}
.tblink{
  grid-area:link; justify-self:end; background:none; border:1px solid var(--ridge); color:var(--faint);
  font:inherit; font-size:10.5px; padding:4px 9px; cursor:pointer; letter-spacing:.04em; white-space:nowrap;
}
.tblink.linked{border-color:var(--red); color:var(--red)}

/* ---------- sheet body ---------- */
.drafting{max-width:560px; margin:0 auto; padding:16px 12px 26px; display:flex; flex-direction:column; gap:16px}
.brief h1{font-size:31px; line-height:1.03; letter-spacing:.005em}
.brief h1 em{font-style:normal; color:var(--red)}
.briefsub{margin:9px 0 0; color:var(--faint); font-size:12px; line-height:1.6}
.briefdims{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.dimchip{border:1px solid var(--ridge); padding:4px 8px; font-size:10.5px; color:var(--faint); letter-spacing:.03em}
.dimchip b{color:var(--ink); font-weight:700}

/* ---------- the yard: the plate of seats ---------- */
.yardcap{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px}
.yardcap h2{font-size:20px; letter-spacing:.06em; text-transform:uppercase}
.yardcap span{font-size:10.5px; color:var(--faint); letter-spacing:.04em}
.seatgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.seatbox{
  position:relative; aspect-ratio:1/1; background:transparent; cursor:default;
  border:1px solid rgba(223,233,245,.22); color:var(--faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font:inherit; font-size:10px; padding:0; transition:border-color .12s, background .12s;
}
.seatbox.vacant{border-style:dashed; border-color:rgba(223,233,245,.3)}
.seatbox.vacant:not(:disabled){cursor:pointer}
.seatbox.vacant:not(:disabled):hover{border-color:var(--ink); border-style:solid}
.seatbox.taken{border-color:var(--ink); background:rgba(223,233,245,.09); color:var(--ink)}
.seatbox.gone{border-color:var(--red); background:var(--red); color:var(--ground)}
.seatbox.yours{box-shadow:inset 0 0 0 2px rgba(255,75,62,.5)}
.seatbox.yours.taken{cursor:pointer}
.seatbox.chosen{border-color:var(--red); border-style:solid; background:rgba(255,75,62,.26); color:var(--ink)}
.sbi{font-size:9px; opacity:.6; letter-spacing:.02em}
.sbstamp{font-size:10px; font-weight:700; letter-spacing:.01em}

/* ---------- the offer ladder ---------- */
.ladder{margin-top:16px; border:1px solid var(--ridge); padding:11px}
.lcap{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; color:var(--faint); letter-spacing:.05em; margin-bottom:8px}
.lcap b{font-family:"JetBrains Mono",monospace; font-size:24px; font-weight:700; color:var(--red); letter-spacing:-.01em}
.lspan{display:grid; grid-template-columns:repeat(12,1fr); gap:3px}
.lstep{height:26px; border:1px solid var(--ridge); background:rgba(223,233,245,.04); position:relative}
.lstep.done{background:rgba(255,75,62,.18); border-color:rgba(255,75,62,.4)}
.lstep.lnow{background:var(--red); border-color:var(--red)}
.lfoot{display:flex; justify-content:space-between; font-size:9.5px; color:var(--faint); margin-top:5px; letter-spacing:.04em}

/* ---------- the threshold ---------- */
.threshbar{margin-top:14px; border:1px solid var(--ridge); padding:11px}
.threshsay{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; color:var(--faint); letter-spacing:.05em; margin-bottom:8px}
.threshnum{font-size:15px; font-weight:700; color:var(--ink)}
.threshnum.carries{color:var(--red)}
.threshtrack{position:relative; height:12px; background:rgba(223,233,245,.07); border:1px solid var(--ridge)}
.threshfill{position:absolute; inset:0 auto 0 0; background:var(--red); transition:width .35s ease}
.threshpin{position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--ink)}
.threshpin::after{content:"half"; position:absolute; top:-13px; left:3px; font-size:8.5px; color:var(--faint); letter-spacing:.06em}

/* ---------- the margin column ---------- */
.margin{display:flex; flex-direction:column; gap:14px}
.marginbox{border:1px solid var(--ridge); padding:12px}
.marginhead{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; font-family:Khand,sans-serif; font-weight:600}
.hollowline{color:var(--faint); font-size:11.5px; line-height:1.6; border-left:2px solid var(--ridge); padding-left:9px}

.printer{display:flex; flex-direction:column}
.printrow{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; padding:5px 0; border-bottom:1px dotted var(--ridge); font-size:11px; animation:printin .28s ease both}
@keyframes printin{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.prkind{font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:1px 5px; border:1px solid var(--ridge); color:var(--faint)}
.prkind.sold{border-color:var(--red); color:var(--red)}
.prwho{color:var(--faint); overflow:hidden; text-overflow:ellipsis}
.prwho a{text-decoration:none; color:var(--ink)}
.prwhen{color:var(--faint); font-size:10px; white-space:nowrap}

.specsheet{display:flex; flex-direction:column}
.specrow{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px dotted var(--ridge); font-size:11.5px}
.speckey{color:var(--faint); letter-spacing:.03em}
.specval{text-align:right; font-weight:500}

.revline{display:grid; grid-template-columns:1fr auto; gap:6px; align-items:baseline; padding:6px 0; border-bottom:1px dotted var(--ridge)}
.revsay{color:var(--faint); font-size:11px}
.revfig{font-size:15px; font-weight:700}
.revfig.warm{color:var(--red)}

.lgrow{display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:baseline; padding:6px 0; border-bottom:1px dotted var(--ridge); font-size:11px}
.lgid{color:var(--faint); font-size:10px}
.lgverdict{letter-spacing:.03em}
.lgverdict.carried{color:var(--red); font-weight:700}
.lgfig{white-space:nowrap}

.prosebox p{color:var(--faint); font-size:12px; line-height:1.68; margin:0 0 11px}
.prosebox p b,.prosebox p strong{color:var(--ink); font-weight:700}
.proseh{font-size:19px; letter-spacing:.04em; text-transform:uppercase; margin:18px 0 7px}
.prosebox code{color:var(--ink); word-break:break-all; font-size:11px}

/* ---------- the command strip ---------- */
#strikebar{
  position:fixed; inset:auto 0 0 0; z-index:40; min-height:var(--sb);
  display:flex; align-items:center; gap:10px; padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
  background:var(--plate); border-top:1px solid var(--ridge); box-shadow:0 -10px 26px rgba(5,16,30,.8);
}
.strikeecho{flex:1 1 auto; min-width:0; color:var(--faint); font-size:11px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.strikeecho b{color:var(--ink)}
.strikego{
  flex:0 0 auto; background:var(--red); color:var(--ground); border:1px solid var(--red);
  font:inherit; font-weight:700; font-size:12px; letter-spacing:.03em; padding:11px 15px; cursor:pointer; white-space:nowrap;
}
.strikego:disabled{background:transparent; color:var(--faint); border-color:var(--ridge); cursor:not-allowed}

/* ---------- the end plate ---------- */
.endplate{border-top:1px solid var(--ridge); padding-top:13px; display:flex; flex-direction:column; gap:7px}
.endrow{display:flex; gap:9px; align-items:baseline; font-size:10.5px; color:var(--faint)}
.endrow b{color:var(--ink); letter-spacing:.06em; text-transform:uppercase; flex:0 0 52px; font-family:Khand,sans-serif; font-size:13px}
.endaddr{word-break:break-all; color:var(--faint)}
.endaddr a{color:var(--faint)}
.endrow button{background:none; border:1px solid var(--ridge); color:var(--faint); font:inherit; font-size:10px; padding:2px 6px; cursor:pointer}
.endsay{color:var(--faint); font-size:10.5px; letter-spacing:.04em; margin-top:3px}
.endsay a{color:var(--red); text-decoration:none; margin-left:10px}

/* ---------- drawer + flash ---------- */
#drawer{position:fixed; inset:0; z-index:60; background:rgba(5,16,30,.86); display:flex; align-items:flex-end; justify-content:center; padding:0}
#drawer[hidden]{display:none!important}
.drawerbox{width:100%; max-width:520px; background:var(--plate); border:1px solid var(--ridge); border-bottom:none; max-height:88vh; overflow:auto}
.drawerhead{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--ridge); font-family:Khand,sans-serif; font-size:17px; letter-spacing:.09em; text-transform:uppercase}
.drawershut{background:none; border:none; color:var(--faint); font-size:22px; line-height:1; cursor:pointer; padding:0 4px}
.drawerbody{padding:14px}
.drawerbody p{color:var(--faint); font-size:12px; line-height:1.65; margin:0 0 10px}
.drawerbody p b{color:var(--ink)}
.pickerlist{display:flex; flex-direction:column; gap:8px}
.pickerlist button{display:flex; align-items:center; gap:10px; background:none; border:1px solid var(--ridge); color:var(--ink); font:inherit; font-size:12px; padding:10px; cursor:pointer}
.pickerlist img{width:20px; height:20px}
.flashnote{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--sb) + 16px); z-index:70; background:var(--plate); border:1px solid var(--red); color:var(--ink); font-size:11.5px; padding:9px 13px; max-width:88vw}

/* ---------- 720px: a wider measure, a bigger object, eight across ---------- */
@media (min-width:720px){
  :root{--tb:58px}
  body{font-size:14px}
  #titleblock{grid-template-columns:auto auto 1fr auto auto; grid-template-rows:1fr;
    grid-template-areas:"mark read nav link go"; gap:0 18px; padding:0 20px}
  .tbread{display:flex; font-size:11px}
  .tbnav{justify-content:flex-end}
  .drafting{max-width:760px; padding:26px 22px 34px; gap:22px}
  .brief h1{font-size:46px}
  .briefsub{font-size:13.5px; max-width:60ch}
  .seatgrid{grid-template-columns:repeat(8,1fr); gap:8px}
  .seatbox{font-size:11px}
  .lcap b{font-size:32px}
  .yardcap h2{font-size:25px}
  .strikeecho{font-size:12.5px}
}

/* ---------- 1000px: the sheet recomposes into plate + margin ---------- */
@media (min-width:1000px){
  .drafting{
    max-width:1180px; display:grid; gap:26px 30px;
    grid-template-columns:minmax(0,1fr) 370px;
    grid-template-areas:"brief brief" "yard margin" "end end";
    padding:34px 28px 44px;
  }
  .brief{grid-area:brief}
  .yard{grid-area:yard}
  .margin{grid-area:margin; align-self:start}
  .endplate{grid-area:end}
  .brief h1{font-size:58px; max-width:19ch}
  .briefsub{font-size:14px}
  .seatgrid{gap:10px}
  .seatbox{font-size:12px}
  .sbi{font-size:10px}
  .sbstamp{font-size:12px}
  .lcap b{font-size:40px}
  .lstep{height:34px}
  .endrow b{flex-basis:70px}
}
@media (min-width:1260px){
  .drafting{grid-template-columns:minmax(0,1fr) 400px}
  .brief h1{font-size:64px}
}