/* Osiershaw — the reed bed. Written for this drop: a split pane with a seam you can drag, a hitch bar that holds the
   address, Pathway Gothic One for words and Manrope for every figure. Dark olive ground, one pale-green glow. */
:root{
  --ground:#0D0F05; --moss:#151A0C; --line:#262B18; --ink:#ECEADB; --mute:#8E9AA6; --reed:#56657A; --reeddim:#3C4756; --reedlit:#7F8FA3;
  --glow:#C6F28E; --glowdim:#5E7A3C; --warm:#E9B872;
  --poster:"Pathway Gothic One",Impact,"Arial Narrow",sans-serif; --figs:Manrope,system-ui,sans-serif;
  --split:64%; --hitch:66px; --eaves:52px; --seam:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
a{color:var(--glow)}
button{font:inherit}
.figs{font-family:var(--figs);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hush{color:var(--mute)}

/* ---- the frame: eaves on top, the two panes, the hitch pinned underneath ---- */
#shawl{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto}
#eaves{flex:0 0 var(--eaves);display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line)}
.reedmark{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;min-width:0}
.reedmark img{width:30px;height:30px;border-radius:50%;background:var(--moss);flex:0 0 auto}
.reedmark b{font-family:var(--poster);font-weight:400;font-size:24px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.eaveclock{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--poster);font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eaveclock b{color:var(--glow);font-weight:400}
.eaveclock .figs{color:var(--ink);font-size:14px;letter-spacing:0}
.tiebtn{flex:0 0 auto;border:1px solid var(--reeddim);background:transparent;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiebtn[data-on="1"]{border-color:var(--glow);color:var(--glow)}

#panes{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:var(--hitch)}
.pane{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
#bedpane{flex:0 0 var(--split);padding:12px 14px 18px}
#seam{flex:0 0 var(--seam);display:flex;align-items:center;justify-content:center;background:var(--moss);border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:row-resize;touch-action:none;user-select:none;-webkit-user-select:none}
#seam i{display:block;width:46px;height:4px;border-radius:2px;background:var(--reeddim)}
#seam:hover i,#seam[data-drag="1"] i,#seam:focus-visible i{background:var(--glow)}
#seam:focus-visible{outline:none}
#wirepane{flex:1 1 auto;display:flex;flex-direction:column}

/* ---- the bed ---- */
.bedkick{font-family:var(--poster);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bedkick .clockfig{color:var(--glow);font-size:13px;letter-spacing:0}
.bedhead{font-family:var(--poster);font-weight:400;font-size:38px;line-height:.95;margin:0 0 6px;letter-spacing:.01em}
.bedsub{margin:0 0 10px;color:var(--mute);font-size:13px;font-style:italic}
.bed{width:100%;display:block;height:auto}
.osierhit{fill:transparent;cursor:pointer}
.osier line{stroke:var(--reed);stroke-width:3;stroke-linecap:round;transition:stroke .2s}
.osier[data-lit="1"] line{stroke:var(--reedlit)}
.osier[data-pick="1"] line{stroke:var(--ink)}
.osnum{font-family:var(--figs);font-weight:700;font-size:12px;fill:var(--mute)}
.osier[data-pick="1"] .osnum{fill:var(--ink)}
.bedline{stroke:var(--line);stroke-width:2}
.lantern .halo{fill:var(--glow);opacity:.14;animation:breathe 2.6s ease-in-out infinite}
.lantern .core{fill:var(--glow)}
.lantern text{font-family:var(--figs);font-weight:800;font-size:11px;fill:var(--ground)}
.eyes ellipse{fill:var(--glow)}
.eyes.mine ellipse{fill:none;stroke:var(--glow);stroke-width:1.2;stroke-dasharray:2 2}
.shown{font-family:var(--figs);font-weight:700;font-size:11px;fill:var(--glow)}
@keyframes breathe{0%,100%{opacity:.12}50%{opacity:.3}}
.tally{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 10px;font-size:13px;color:var(--mute)}
.tally b{color:var(--ink);font-family:var(--figs);font-weight:700}

/* ---- the stile: the one action ---- */
.stile{border:1px solid var(--line);background:var(--moss);border-radius:12px;padding:12px 14px}
.stilehead{font-family:var(--poster);font-weight:400;font-size:22px;letter-spacing:.03em;margin:0 0 6px;text-transform:uppercase;line-height:1.1}
.stilerow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;font-size:14px;color:var(--mute)}
.stilerow b{font-family:var(--figs);font-weight:800;font-size:22px;color:var(--ink)}
.stilegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 8px}
.stilegrid .stilerow{flex-direction:column;align-items:flex-start;gap:0;margin:0;font-size:12px;min-width:0}
.stilegrid .stilerow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* on a phone the live shaw needs the room more than the strapline does — the primer card on the wire carries it */
@media (max-width:999px){ #bedpane[data-live="1"] .bedsub{display:none} }
@media (min-width:720px) and (max-width:999px){ :root{--split:68%} }
.stakebox{display:flex;align-items:center;gap:8px;margin:8px 0}
.stakebox input{flex:1 1 auto;min-width:0;width:100%;background:var(--ground);border:1px solid var(--reeddim);color:var(--ink);border-radius:8px;padding:9px 10px;font:700 18px var(--figs);font-variant-numeric:tabular-nums}
.stakebox input:focus{outline:none;border-color:var(--glow)}
.stakebox span{color:var(--mute);font-size:13px;white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.chips button{border:1px solid var(--reeddim);background:transparent;color:var(--mute);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:var(--figs);font-weight:700}
.chips button:hover{color:var(--ink);border-color:var(--reed)}
.gobtn{width:100%;min-height:50px;border:0;border-radius:10px;background:var(--glow);color:var(--ground);font-family:var(--poster);font-size:24px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;line-height:1}
.gobtn:disabled{opacity:.38;cursor:default}
.gobtn[data-dark="1"]{background:transparent;border:1px solid var(--reeddim);color:var(--mute)}
.stilenote{margin:10px 0 0;font-size:13px;color:var(--mute);font-style:italic}
.stilenote b{color:var(--ink);font-style:normal;font-family:var(--figs)}
.stilenote em{color:var(--glow);font-style:normal}
.stilewarn{color:var(--warm)}

/* ---- the wire ---- */
.wiretabs{position:sticky;top:0;z-index:2;display:flex;gap:2px;padding:6px 10px 0;background:var(--ground);border-bottom:1px solid var(--line)}
.wiretabs a{flex:1 1 0;text-align:center;padding:8px 4px 9px;color:var(--mute);text-decoration:none;font-family:var(--poster);font-size:17px;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.wiretabs a[aria-current="page"]{color:var(--glow);border-bottom-color:var(--glow)}
.wire{flex:1 0 auto;padding:8px 14px 12px}
.wireline{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;min-width:0}
.wireline b{font-family:var(--poster);font-weight:400;font-size:14px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;white-space:nowrap}
.wireline span{min-width:0;overflow-wrap:anywhere}
.wireline u{text-decoration:none;color:var(--mute);font-family:var(--figs);font-weight:600;font-size:12px;white-space:nowrap}
.wireline[data-k="lit"] b{color:var(--glow)}
.wireline[data-k="emerged"] b{color:var(--warm)}
.wireline[data-k="settled"] b,.wireline[data-k="opened"] b{color:var(--ink)}
.wireline:first-of-type{animation:print .5s ease-out}
@keyframes print{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wirecard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0}
.wirecard h3{font-family:var(--poster);font-weight:400;font-size:20px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px}
.wirecard ul{margin:0;padding-left:18px;font-size:13px;color:var(--mute)}
.wirecard li{margin:4px 0;font-style:italic}
.wirecard li b{color:var(--ink);font-family:var(--figs);font-style:normal}
.wirecard p{margin:6px 0;font-size:14px}
.wirecard .stat{display:inline-block;margin:4px 14px 0 0;font-size:13px;color:var(--mute)}
.wirecard .stat b{color:var(--ink);font-family:var(--figs)}
.leaf h2{font-family:var(--poster);font-weight:400;font-size:28px;letter-spacing:.03em;margin:8px 0 6px;text-transform:uppercase;line-height:1}
.leaf p{margin:8px 0;font-size:14px;color:var(--mute);font-style:italic}
.leaf p b{color:var(--ink);font-style:normal}
.leaf p em{color:var(--glow);font-style:normal}
.scrollx{overflow-x:auto;margin:8px 0}
.reedtable{width:100%;border-collapse:collapse;font-size:13px;min-width:440px}
.reedtable th{text-align:left;font-family:var(--poster);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:6px 8px;border-bottom:1px solid var(--line);font-size:14px}
.reedtable td{padding:7px 8px;border-bottom:1px dashed var(--line);vertical-align:middle}
.reedtable td.figs{font-weight:700}
.smallgo{min-height:32px;border:0;border-radius:8px;background:var(--glow);color:var(--ground);font-family:var(--poster);font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:0 12px;cursor:pointer}
.smallgo:disabled{opacity:.4}
.undergrowth{padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.undergrowth div{margin:4px 0;overflow-wrap:anywhere}
.undergrowth code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);font-size:11px}

/* ---- the hitch: the address, in full, one tap to copy. Fixed at every width. ---- */
#hitch{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--hitch);background:var(--moss);border-top:1px solid var(--glowdim);padding:7px 14px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto auto 1fr;grid-template-areas:"tag copy gmgn ." "addr addr addr addr";align-items:center;column-gap:10px;row-gap:2px}
.hitchtag{grid-area:tag;font-family:var(--poster);font-size:16px;letter-spacing:.08em;color:var(--glow);white-space:nowrap}
.hitchaddr{grid-area:addr;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--ink);overflow-wrap:anywhere;word-break:break-all;line-height:1.25;user-select:all;-webkit-user-select:all}
.hitchaddr[data-live="0"]{color:var(--mute);user-select:none;-webkit-user-select:none}
.hitchcopy{grid-area:copy;border:1px solid var(--glow);background:transparent;color:var(--glow);border-radius:999px;padding:2px 12px;font-size:12px;font-weight:700;cursor:pointer;min-height:24px;line-height:1.2}
.hitchcopy:disabled{border-color:var(--reeddim);color:var(--mute);cursor:default}
.hitchcopy[data-done="1"]{background:var(--glow);color:var(--ground)}
.hitchgmgn{grid-area:gmgn;font-size:12px;color:var(--mute);text-decoration:none;border-bottom:1px dotted var(--reeddim);white-space:nowrap}

/* ---- the thicket (sheet) and the note ---- */
#thicket{position:fixed;inset:0;z-index:30;background:rgba(6,8,2,.72);display:flex;align-items:flex-end;justify-content:center}
.thicketbox{width:100%;max-width:520px;background:var(--moss);border:1px solid var(--line);border-radius:14px 14px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
.thickethead{display:flex;justify-content:space-between;align-items:center;font-family:var(--poster);font-size:22px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.thicketshut{border:0;background:transparent;color:var(--mute);font-size:26px;cursor:pointer;line-height:1}
.thicketbody p{margin:8px 0;font-size:14px}
.thicketbody b{font-family:var(--figs)}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;border:1px solid var(--reeddim);background:transparent;color:var(--ink);border-radius:10px;padding:10px;cursor:pointer;font-size:15px}
.wellpick img{width:26px;height:26px;border-radius:6px}
.reednote{position:fixed;left:50%;bottom:calc(var(--hitch) + 12px);transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;z-index:40;max-width:90vw;text-align:center}

/* ---- wider: one column still, more room ---- */
@media (min-width:720px){
  html{font-size:16px}
  #bedpane{padding:18px 22px 22px}
  .bedhead{font-size:52px}
  .bedsub{font-size:14px}
  .wire{padding:10px 22px 14px}
  .stilehead{font-size:24px}
}

/* ---- desktop: the split turns sideways ---- */
@media (min-width:1000px){
  :root{--split:58%;--hitch:52px;--eaves:58px}
  #panes{flex-direction:row}
  #bedpane{flex:0 0 var(--split);padding:24px 28px 28px}
  #seam{flex:0 0 var(--seam);cursor:col-resize;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  #seam i{width:4px;height:46px}
  #wirepane{flex:1 1 auto}
  .reedmark b{font-size:28px}
  .eaveclock{font-size:20px}
  .eaveclock .figs{font-size:16px}
  .bedhead{font-size:66px}
  .bedsub{font-size:15px}
  .tally{font-size:14px}
  .stile{padding:16px 18px}
  .stilehead{font-size:26px}
  .gobtn{font-size:28px;min-height:56px}
  .wiretabs a{font-size:18px}
  .wireline{font-size:14px}
  #hitch{grid-template-columns:auto 1fr auto auto;grid-template-areas:"tag addr copy gmgn";padding:0 20px;row-gap:0}
  .hitchaddr{font-size:14px;overflow-wrap:normal;word-break:normal;white-space:nowrap}
  #thicket{align-items:center;padding:20px}
  .thicketbox{border-radius:14px;padding-bottom:16px}
}