/* Fordmere — a hydrographic survey plate. Drafted ink on deep water, one accent for the line that is winning. */
:root{
  --water:#0A1424; --deep:#081020; --ink:#E4EFF7; --faint:#7E97AE; --rule:#1E3550;
  --stone:#20364F; --stoneEdge:#456A8C; --lead:#A98BFF; --leadSoft:rgba(169,139,255,.16);
  --grid:rgba(126,151,174,.10); --sans:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --slab:"Zilla Slab",Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--water); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
}
a{color:inherit}
code{font-family:var(--sans)}

/* ---- the fixed drafting stamp: the buy control, on screen at every width ---- */
.stamp{
  position:fixed; z-index:60; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:9px 10px 9px 13px; border:1.5px solid var(--lead); border-radius:3px;
  background:rgba(8,16,32,.94); backdrop-filter:blur(7px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.stampTic{font-weight:700; letter-spacing:.08em; font-size:13px}
.stampGo{
  font-family:var(--slab); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap;
  background:var(--lead); color:#140F22; padding:7px 14px; border-radius:2px;
}
.stampGo.cold{background:transparent; color:var(--faint); border:1px dashed var(--rule); font-family:var(--sans); font-size:12px; font-weight:500}

/* ---- the plate ---- */
.plate{max-width:1180px; margin:0 auto; padding:12px 14px 104px}
.sheetTop{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding-bottom:9px; border-bottom:1.5px solid var(--rule)}
.drawn{flex:1 1 100%}
.drawn{display:flex; align-items:center; gap:9px; text-decoration:none}
.drawn img{width:30px; height:30px; border-radius:2px; border:1px solid var(--rule)}
.drawn span{font-family:var(--slab); font-weight:700; font-size:20px; letter-spacing:.02em}
.rules-nav{display:flex; gap:14px; flex:1 1 auto; flex-wrap:wrap}
.rules-nav a{font-size:12px; color:var(--faint); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent}
.rules-nav a.on,.rules-nav a:hover{color:var(--ink); border-bottom-color:var(--lead)}
.topRight{display:flex; align-items:center; gap:8px}
#social a{color:var(--faint); text-decoration:none; font-size:12px; margin-right:8px}
#signBtn{
  font-family:var(--sans); font-size:12px; color:var(--ink); background:transparent;
  border:1px solid var(--rule); border-radius:2px; padding:6px 11px; cursor:pointer;
}
#signBtn.on{border-color:var(--lead); color:var(--lead)}

/* ---- headings ---- */
.leadIn{padding:16px 0 4px}
.leadIn h1{font-family:var(--slab); font-weight:700; font-size:27px; line-height:1.08; margin:0 0 8px}
.leadIn p{margin:0; color:var(--faint); max-width:60ch; font-size:13px}
.capline{display:flex; align-items:baseline; gap:10px; margin:16px 0 8px}
.capline h2{font-family:var(--slab); font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0}
.capline .dash{flex:1 1 auto; height:1px; background:var(--rule)}
.capline .no{font-size:11px; color:var(--faint)}

/* ---- the channel: seven columns of water ---- */
.channel{border:1.5px solid var(--rule); border-radius:3px; background:var(--deep); padding:12px 10px 14px; position:relative}
.chanHead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; font-size:11px; color:var(--faint)}
.chanHead b{color:var(--ink); font-weight:700}
.water{display:grid; grid-template-columns:16px repeat(7,1fr) 16px; gap:4px; align-items:stretch}
.bank{border-radius:2px; background:repeating-linear-gradient(135deg,var(--rule) 0 2px,transparent 2px 6px); border:1px solid var(--rule)}
.cols{display:contents}
.cell{
  position:relative; aspect-ratio:1/1; border:1px solid var(--rule); border-radius:2px; background:transparent;
  color:var(--faint); font-family:var(--sans); font-size:10px; cursor:pointer; padding:0; display:flex;
  align-items:center; justify-content:center; transition:border-color .15s,background .15s;
}
.cell:hover:not(.set){border-color:var(--stoneEdge); background:rgba(69,106,140,.12)}
.cell.set{cursor:default; background:var(--stone); border-color:var(--stoneEdge); color:var(--ink)}
.cell.lead{background:var(--leadSoft); border-color:var(--lead); color:var(--lead)}
.cell.mine{outline:2px dashed var(--ink); outline-offset:-4px}
.cell.pick{border-color:var(--lead); background:var(--leadSoft); box-shadow:inset 0 0 0 1px var(--lead)}
.cell.fresh{animation:land .8s ease-out}
@keyframes land{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.cell .ord{position:absolute; top:2px; left:3px; font-size:8px; opacity:.6}
.axis{display:grid; grid-template-columns:16px repeat(7,1fr) 16px; gap:4px; margin-top:6px}
.axis span{text-align:center; font-size:10px; color:var(--faint)}
.bankCap{font-size:9px; letter-spacing:.1em; writing-mode:vertical-rl; text-orientation:mixed; color:var(--faint); display:flex; align-items:center; justify-content:center}

/* ---- the action ---- */
.act{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}
.act .pick{flex:1 1 auto; font-size:12px; color:var(--faint); min-width:160px}
.act .pick b{color:var(--ink)}
.go{
  font-family:var(--slab); font-weight:700; font-size:16px; border:none; border-radius:2px; cursor:pointer;
  background:var(--lead); color:#140F22; padding:11px 18px;
}
.go[disabled]{background:var(--rule); color:var(--faint); cursor:not-allowed}
.ghost{background:transparent; border:1px solid var(--rule); color:var(--ink); font-family:var(--sans); font-size:12px; padding:9px 13px; border-radius:2px; cursor:pointer}

/* ---- soundings ---- */
.soundings{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1.5px solid var(--rule); border-radius:3px; overflow:hidden}
.sounding{background:var(--deep); padding:11px 12px}
.sounding .cap{display:block; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
.sounding .fig{font-size:21px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.sounding .fig.on{color:var(--lead)}
.sounding .sub{font-size:11px; color:var(--faint)}
.lines{border:1.5px solid var(--rule); border-radius:3px; background:var(--deep)}
.lineRow{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--rule); font-size:12px}
.lineRow:last-child{border-bottom:none}
.lineRow .bar{flex:1 1 auto; height:6px; background:var(--stone); border-radius:1px; overflow:hidden}
.lineRow .bar i{display:block; height:100%; background:var(--stoneEdge)}
.lineRow.top .bar i{background:var(--lead)}
.lineRow .num{font-variant-numeric:tabular-nums; color:var(--faint); white-space:nowrap}
.tape{border:1.5px solid var(--rule); border-radius:3px; background:var(--deep)}
.tapeRow{display:flex; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--rule); font-size:12px}
.tapeRow:last-child{border-bottom:none}
.tapeRow a{color:var(--faint); text-decoration:none}
.tapeRow .amt{font-variant-numeric:tabular-nums}
.empty{padding:16px 12px; color:var(--faint); font-size:12px}

/* ---- prose + record ---- */
.note{border-left:2px solid var(--lead); padding:2px 0 2px 12px; margin:14px 0; color:var(--faint); font-size:12.5px; max-width:66ch}
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding:9px 0 9px 32px; border-bottom:1px solid var(--rule); font-size:13px}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(s); position:absolute; left:0; top:9px; width:20px; height:20px; border:1px solid var(--lead); color:var(--lead); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:11px}
.fordCard{border:1.5px solid var(--rule); border-radius:3px; background:var(--deep); padding:12px; margin-bottom:10px}
.fordCard .hd{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px}
.fordCard .hd b{font-family:var(--slab); font-size:16px}
.fordCard .hd .tag{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.fordCard .hd .tag.cross{color:var(--lead)}
.fordCard .kv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; font-size:12px}
.fordCard .kv .cap{display:block; font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.09em}
.fordCard .kv .fig{font-variant-numeric:tabular-nums}
.mini{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:10px; max-width:240px}
.mini i{aspect-ratio:1/1; border:1px solid var(--rule); border-radius:1px; display:block}
.mini i.set{background:var(--stone); border-color:var(--stoneEdge)}
.mini i.lead{background:var(--lead); border-color:var(--lead)}

/* ---- colophon ---- */
.colophon{margin-top:34px; padding-top:14px; border-top:1.5px solid var(--rule); font-size:12px; color:var(--faint)}
.colRow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:3px 0}
.colRow .cap{text-transform:uppercase; letter-spacing:.1em; font-size:10px; min-width:120px}
.colRow code{color:var(--ink); word-break:break-all; font-size:11px}
.colRow button{background:transparent; border:1px solid var(--rule); color:var(--faint); border-radius:2px; font-size:11px; padding:3px 7px; cursor:pointer; font-family:var(--sans)}
.colRow.small{font-size:11px}
.colRow a{color:var(--faint)}

/* ---- tray ---- */
#tray{position:fixed; inset:0; z-index:80; background:rgba(4,9,18,.72); display:flex; align-items:flex-end; justify-content:center}
.trayCard{width:100%; max-width:440px; background:var(--deep); border:1.5px solid var(--rule); border-radius:3px 3px 0 0; padding:14px}
.trayHead{display:flex; justify-content:space-between; align-items:center; font-family:var(--slab); font-weight:700; font-size:16px; margin-bottom:10px}
.trayHead button{background:transparent; border:none; color:var(--faint); font-size:22px; cursor:pointer; line-height:1}
.trayBody .fine{font-size:12.5px; color:var(--faint); margin-bottom:12px}
.trayBody .fine b{color:var(--ink)}
.wl{display:grid; gap:8px}
.wl button{display:flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--rule); color:var(--ink); border-radius:2px; padding:9px; cursor:pointer; font-family:var(--sans); font-size:13px}
.wl img{width:20px; height:20px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:90; background:var(--ink); color:var(--water); font-size:12px; padding:8px 13px; border-radius:2px; max-width:90vw}

/* ---- wider measure ---- */
@media (min-width:720px){
  body{font-size:15px}
  .drawn{flex:0 0 auto}
  .leadIn{padding:26px 0 8px}
  .capline{margin:26px 0 10px}
  .plate{padding:22px 22px 110px}
  .leadIn h1{font-size:42px}
  .leadIn p{font-size:14px}
  .water{grid-template-columns:24px repeat(7,1fr) 24px; gap:6px}
  .axis{grid-template-columns:24px repeat(7,1fr) 24px; gap:6px}
  .cell{font-size:12px}
  .soundings{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sounding .fig{font-size:25px}
}

/* ---- the plate recomposes: channel left, soundings alongside ---- */
@media (min-width:1000px){
  .plate{padding:26px 28px 120px}
  .leadIn h1{font-size:52px; max-width:17ch}
  .draft{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:26px; align-items:start}
  .draft > .leadIn{grid-column:1 / -1}
  .chanCol{grid-column:1; min-width:0}
  .sideCol{grid-column:2; min-width:0; position:sticky; top:20px}
  .soundings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sounding .fig{font-size:23px}
  .cell{font-size:13px}
  .go{font-size:18px; padding:13px 22px}
  .stamp{left:auto; right:28px; top:18px; bottom:auto; width:auto; box-shadow:0 8px 24px rgba(0,0,0,.45)}
}
@media (min-width:1240px){
  .leadIn h1{font-size:58px}
}