/* Layout: a card table (felt, four hands, trick in the middle) with navigation and the play strip
   under it; a side column explains the current decision. One column below 1100px. */
:root{
  --bg:#edf0ec; --surface:#fbfcfa; --surface-2:#eef2ee; --ink:#18211c; --muted:#58685f; --line:#d2dad3;
  --felt:#2f6a4f; --felt-2:#21523c; --felt-ink:#e9f3ed; --felt-muted:#b2cfbf; --felt-btn:rgba(255,255,255,.1); --felt-edge:rgba(255,255,255,.28);
  --card:#fffef9; --card-ink:#1a1d1b; --card-red:#c42a2f; --card-edge:#cfd3cc;
  --red:#c42a2f; --accent:#1f58b5; --accent-ink:#ffffff; --ring:#d49a14; --tint:#e2eaf8;
  --best:#11663a; --best-bg:#d3eedb; --l1:#7f5300; --l1-bg:#fbe4b5; --l2:#a3201a; --l2-bg:#f7d0cb; --unk:#5f6b64; --unk-bg:#e2e7e3;
  --f-ui:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-num:"Barlow Semi Condensed","Arial Narrow","Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1411; --surface:#17201b; --surface-2:#1f2a24; --ink:#e2eae5; --muted:#95a69c; --line:#2c3a32;
  --felt:#1e4a37; --felt-2:#153829; --felt-ink:#ddece3; --felt-muted:#93b8a4; --felt-btn:rgba(255,255,255,.08); --felt-edge:rgba(255,255,255,.22);
  --card:#eceae2; --card-ink:#1a1d1b; --card-red:#b3242a; --card-edge:#8f9992;
  --red:#ff8278; --accent:#77a7ff; --accent-ink:#0b1426; --ring:#e9b545; --tint:#1e2b45;
  --best:#93e3b1; --best-bg:#1b4a30; --l1:#f6c869; --l1-bg:#4a370c; --l2:#ffaca4; --l2-bg:#5b1f1a; --unk:#a0ada5; --unk-bg:#28332d;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1411; --surface:#17201b; --surface-2:#1f2a24; --ink:#e2eae5; --muted:#95a69c; --line:#2c3a32;
  --felt:#1e4a37; --felt-2:#153829; --felt-ink:#ddece3; --felt-muted:#93b8a4; --felt-btn:rgba(255,255,255,.08); --felt-edge:rgba(255,255,255,.22);
  --card:#eceae2; --card-ink:#1a1d1b; --card-red:#b3242a; --card-edge:#8f9992;
  --red:#ff8278; --accent:#77a7ff; --accent-ink:#0b1426; --ring:#e9b545; --tint:#1e2b45;
  --best:#93e3b1; --best-bg:#1b4a30; --l1:#f6c869; --l1-bg:#4a370c; --l2:#ffaca4; --l2-bg:#5b1f1a; --unk:#a0ada5; --unk-bg:#28332d;
  color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.45 var(--f-ui)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.s-H,.s-D{color:var(--red)}
.s-S,.s-C{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:0 40px}

/* header */
.top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding-block:14px 8px}
.brand{font:700 1.45rem/1 var(--f-num);letter-spacing:.01em;display:flex;align-items:baseline;gap:.5rem}
.tag{font:600 .7rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.25rem .5rem}
.top select{height:2.5rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 .6rem;font:600 .95rem var(--f-ui);max-width:100%;min-width:0}
.acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn{height:2.5rem;padding:0 .9rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);font:600 .95rem var(--f-ui);cursor:pointer}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.note{margin:0 0 14px;color:var(--muted);font-size:.92rem;max-width:80ch}

/* page grid */
.app{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 22rem;grid-template-areas:"table side" "nav side" "strip side" ". side"}
.tablearea{grid-area:table;min-width:0}
#nav{grid-area:nav;min-width:0;display:flex;flex-direction:column;gap:8px}
#strip{grid-area:strip;min-width:0}
#side{grid-area:side;min-width:0;display:flex;flex-direction:column;gap:14px;align-self:start}
@media (max-width:1100px){.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"table" "nav" "strip" "side"}}
.app.noside{grid-template-columns:minmax(0,1fr);grid-template-areas:"table" "nav" "strip"}
/* landscape phone: keep the side column so the table stays on screen */
@media (max-width:1100px) and (orientation:landscape) and (max-height:540px){
  .app{grid-template-columns:minmax(0,1fr) 17rem;grid-template-areas:"table side" "nav side" "strip side" ". side"}
  .felt{padding:8px;gap:6px}.trick{font-size:.78rem}.fan{font-size:.82rem}.rk{font-size:.95rem}.hd{margin:0}
  .ddv{font-size:1.6rem}.c-info .bn{font-size:1.05rem}
}

/* felt */
.felt{background:radial-gradient(ellipse at 50% 42%,var(--felt) 0%,var(--felt-2) 100%);color:var(--felt-ink);border-radius:18px;padding:16px;display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"info n menu" "w trick e" "ctr s score";align-items:center;touch-action:pan-y}
.corners{display:contents}
.c-info{grid-area:info;align-self:start;display:flex;gap:.8rem;align-items:center;font-size:.9rem}
.c-score{grid-area:score;align-self:end;justify-self:end;text-align:right}
.c-ctr{grid-area:ctr;align-self:end}
.lab{font:600 .68rem/1.2 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--felt-muted)}
.c-info .bn{font:700 1.3rem/1.1 var(--f-num)}
.c-info div{font-size:.9rem}
.vul{display:inline-block;padding:.05rem .4rem;border-radius:4px;font-weight:600}
.vul.on{background:var(--card-red);color:#fff}
.tally{display:flex;gap:.8rem;justify-content:flex-end;font:600 .95rem var(--f-num)}
.tally b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.need{font-size:.85rem;color:var(--felt-muted)}
.ctbtn{background:var(--felt-btn);border:1px solid var(--felt-edge);border-radius:10px;padding:.4rem .7rem;text-align:left;cursor:pointer;color:var(--felt-ink);display:flex;flex-direction:column;gap:.1rem}
.ctbtn:hover{background:rgba(255,255,255,.16)}
.ctbtn .ct{font:700 1.35rem/1.1 var(--f-num)}
.ctbtn .ct .s-H,.ctbtn .ct .s-D{color:#ff9b93}
.ctbtn small{color:var(--felt-muted)}
.ddv{font:700 2.2rem/1 var(--f-num);font-variant-numeric:tabular-nums}
.ddsub{font-size:.85rem;color:var(--felt-muted)}

/* hands */
.h-n{grid-area:n;justify-self:center}
.h-s{grid-area:s;justify-self:center}
.h-w{grid-area:w;justify-self:end}
.h-e{grid-area:e;justify-self:start}
.hand{background:var(--surface);color:var(--ink);border-radius:10px;padding:.45rem .65rem .55rem;min-width:0;max-width:100%;box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* Fixed hand width, and every rank keeps room after it for a superscript DD value,
   so nothing moves as play goes round. */
.felt:not(.pfelt) .hand:not(.pics){width:15rem}
.ddon .rk{padding-right:.85em}
.rk .bd{position:absolute;top:0;right:.05em;font:700 .6rem/1 var(--f-num);padding:.1em .15em;border-radius:3px;margin:0;min-width:0}
/* Larger badges on the hand to play (View option). All hands share the wider box, so the table stays put. */
.felt.bigbd:not(.pfelt) .hand:not(.pics){width:16.5rem}
.bigbd.ddon .hand.move .rk{padding-right:1.1em}
.bigbd .hand.move .rk .bd{font-size:.8rem;top:-.05em}
.hand.move{box-shadow:0 0 0 3px var(--ring),0 1px 2px rgba(0,0,0,.25)}
.hd{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-bottom:.2rem}
.hd .nm{font:700 .95rem var(--f-num)}
.hd .role{font-size:.75rem;color:var(--muted)}
.hd .mv{font:700 .68rem/1 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;background:var(--ring);color:#1d1503;border-radius:4px;padding:.18rem .35rem}
.srow{display:flex;align-items:flex-start;gap:.25rem;min-height:1.45rem}
.sym{width:1.05rem;flex:none;font-size:1.05rem;line-height:1.35}
.rks{display:flex;flex-wrap:wrap;gap:1px;min-width:0}
.void{color:var(--muted);line-height:1.35}
.rk{position:relative;font:600 1.08rem/1.45 var(--f-num);background:none;border:0;padding:0 .16em;border-radius:5px;display:inline-flex;align-items:center;min-width:1.2em;cursor:default}
.rk.legal{cursor:pointer}
.rk.legal:hover{background:var(--surface-2)}
.rk.gone{opacity:.28}
.rec{outline:2px solid var(--ring);outline-offset:0}
.bd{display:block;font:700 .72rem/1 var(--f-num);padding:.16rem .2rem;border-radius:4px;min-width:1.45rem;text-align:center;margin-top:1px;font-variant-numeric:tabular-nums}
.b0{background:var(--best-bg);color:var(--best)}
.b1{background:var(--l1-bg);color:var(--l1)}
.b2{background:var(--l2-bg);color:var(--l2)}
.bu{background:var(--unk-bg);color:var(--unk)}
@media (pointer:coarse) and (min-width:641px){.hand.move .rk{min-width:2.2rem;min-height:2.75rem;justify-content:center}}

/* card pictures */
.pc{position:relative;flex:none;width:2.5em;height:3.5em;border-radius:.35em;background:var(--card);color:var(--card-ink);border:1px solid var(--card-edge);
  box-shadow:0 1px 2px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:flex-start;padding:.18em .22em;font:700 1em/1 var(--f-num);cursor:default}
.pc .cr{font-size:1.05em}
.pc .cs{font-size:.95em;margin-top:.05em}
.pc .s-H,.pc .s-D{color:var(--card-red)}
.fan{display:flex;padding-top:1.35rem;font-size:1rem}
.fan .pc{margin-left:-1.4em;transition:transform .12s}
.fan .pc:first-child{margin-left:0}
.fan .pc.ns{margin-left:-.95em}
.fan .pc.legal{transform:translateY(-.4em);cursor:pointer}
.fan .pc.legal:hover{transform:translateY(-.7em)}
.fan .pc.gone{opacity:.35}
.fan .pc .bd{position:absolute;top:-1.5rem;left:-1px;min-width:1.1em;padding:.14rem .12rem;font-size:.68rem}
.fan .pc.rec{outline:2px solid var(--ring);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.fan .pc{transition:none}}

/* trick */
.trick{grid-area:trick;position:relative;width:8.4em;height:9.4em;font-size:1rem;justify-self:center}
.trick .pc{position:absolute}
.tn{top:0;left:50%;transform:translateX(-50%)}
.ts{bottom:0;left:50%;transform:translateX(-50%)}
.tw{left:0;top:50%;transform:translateY(-50%)}
.te{right:0;top:50%;transform:translateY(-50%)}
.trick.faded .pc{opacity:.55}
.trick .pc.win{opacity:1;outline:2px solid var(--ring);outline-offset:1px}
.tmid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font:700 .95rem/1.1 var(--f-num);color:var(--felt-muted);white-space:nowrap}
.tmid small{display:block;font:500 .7rem var(--f-ui)}

/* DD values on the cards already played to the trick */
.trick .pc .bd{position:absolute;right:-.6em;bottom:-.6em;margin:0;font-size:.8em;min-width:0;padding:.15em .25em;box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* phone table, after BBO's phone layout: hand boxes in a 3x3 grid, played cards in the middle,
   board tile and menu in the top corners, contract/DD and tricks in the bottom corners */
.pfelt{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"brd n menu" "w trick e" "ctr s score";gap:5px;padding:6px;border-radius:10px;align-items:start}
/* Fixed box height with room for two wrapped suits, so a hand never grows or shrinks during play. */
.pfelt .hand{justify-self:stretch;padding:0 0 .25rem;border-radius:5px;overflow:hidden;box-shadow:none;min-height:11rem}
.pfelt .hd{background:var(--surface-2);padding:.12rem .35rem;margin:0 0 .1rem;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.pfelt .hd .nm{font-size:.85rem}
.pfelt .hd .role{font-size:.7rem}
.pfelt .hd .mv{display:none}
.pfelt .hand.move{box-shadow:none}
.pfelt .hand.move .hd,.pfelt .hand.move .hd .role{background:var(--ring);color:#1d1503}
.pfelt .srow{padding:0 .2rem;min-height:1.4rem;gap:.15rem}
.pfelt .sym{width:.9rem;font-size:1rem;line-height:1.5}
.pfelt .rk{font:600 1.12rem/1.4 var(--f-num);min-width:.55em;padding:0 .03em}
.pfelt.ddon .rk{padding-right:.48em}
.pfelt .hand .bd{font-size:.5rem;padding:.04em .08em;right:-.05em}
.pfelt .rks{gap:0}
.pfelt.bigbd.ddon .hand.move .rk{padding-right:.75em}
.pfelt.bigbd .hand.move .rk .bd{font-size:.68rem;padding:.04em .1em;top:0}
.pfelt .trick{font-size:.72rem;align-self:center}
/* board navigator: previous / board tile (opens the board list) / next */
.bnav{grid-area:brd;justify-self:start;align-self:start;display:flex;align-items:center;gap:.85rem}
.barrow{width:1.9rem;height:2.75rem;border-radius:7px;border:1px solid var(--felt-edge);background:var(--felt-btn);color:var(--felt-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.barrow:hover:not(:disabled){background:rgba(255,255,255,.18)}
.barrow:disabled{opacity:.3;cursor:default}
.barrow svg{width:1rem;height:1rem;fill:currentColor}
.btile{position:relative;flex:none;width:3.6rem;height:3.6rem;border-radius:6px;background:var(--surface);color:var(--ink);padding:0;cursor:pointer;
  border:.4rem solid var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 1.3rem/1 var(--f-num)}
.btile .caret{width:.75rem;height:.75rem;fill:var(--muted);margin-top:.1rem}
.pfelt .bnav{gap:.5rem}
.pfelt .barrow{width:1.5rem}
.pfelt .btile{width:3.3rem;height:3.3rem;font-size:1.15rem}
.btile.vns{border-top-color:var(--card-red);border-bottom-color:var(--card-red)}
.btile.vew{border-left-color:var(--card-red);border-right-color:var(--card-red)}
.btile .dl{position:absolute;font:700 .6rem/1 var(--f-ui);background:var(--ink);color:var(--surface);border-radius:3px;padding:2px 3px}
.dl-N{top:-.62rem;left:50%;transform:translateX(-50%)}
.dl-S{bottom:-.62rem;left:50%;transform:translateX(-50%)}
.dl-W{left:-.62rem;top:50%;transform:translateY(-50%)}
.dl-E{right:-.62rem;top:50%;transform:translateY(-50%)}
.menubtn{grid-area:menu;justify-self:end;align-self:start;width:2.75rem;height:2.75rem;border-radius:8px;background:var(--accent);color:var(--accent-ink);border:0;display:grid;place-items:center;cursor:pointer}
.menubtn svg{width:1.4rem;height:1.4rem;fill:currentColor}
.pctr{grid-area:ctr;align-self:end;justify-self:start;padding:.3rem .5rem}
.pctr .ct{font-size:1.15rem}
.pdd{font:600 .8rem var(--f-num);color:var(--felt-muted)}
.pdd b{font-size:1.2rem;color:var(--felt-ink)}
.pscore{grid-area:score;align-self:end;justify-self:end;text-align:right}
.pscore .tally{gap:.5rem}
.pscore .tally b{font-size:1.2rem}

/* navigation */
.navbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px}
.nb{width:2.75rem;height:2.75rem;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;cursor:pointer;flex:none}
.nb:hover:not(:disabled){background:var(--tint)}
.nb:disabled{opacity:.35;cursor:default}
.nb svg{width:1.1rem;height:1.1rem;fill:currentColor}
.pos{flex:1;min-width:8rem;text-align:center;line-height:1.2}
.pos .tcode{font:700 1.15rem var(--f-num);font-variant-numeric:tabular-nums}
.pos .who{font-size:.88rem;color:var(--muted)}
.banner{display:flex;gap:.5rem .8rem;align-items:center;flex-wrap:wrap;padding:.55rem .75rem;border-radius:10px;background:var(--tint);font-size:.92rem}
.banner .btn{height:2.25rem;margin-left:auto}

/* panes */
.pane{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.pane h2{font:700 .74rem/1.2 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem}
.phd{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.pane p{margin:.35rem 0}
.muted{color:var(--muted)}
.small{font-size:.86rem}

/* strip */
.strip{position:relative;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-top:.2rem}
.tk{display:flex;flex-direction:column;gap:3px;flex:none;width:3.3rem}
.th{font:600 .72rem var(--f-num);color:var(--muted);text-align:center}
.sc{position:relative;font:600 .92rem/1 var(--f-num);padding:.32rem .15rem;border-radius:5px;background:var(--surface-2);border:1px solid transparent;text-align:center;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.sc .ss{font-size:.68rem;color:var(--muted);margin-right:.18rem;font-weight:500}
.sc.b1{background:var(--l1-bg);color:var(--l1)}
.sc.b2{background:var(--l2-bg);color:var(--l2)}
.sc.b1 .ss,.sc.b2 .ss{color:inherit}
.sc.nd{background:none;border-color:var(--line)}
.sc.var{border:1px dashed var(--muted)}
.sc.fut{opacity:.45}
.sc.cur{outline:2px solid var(--accent);outline-offset:1px;opacity:1}
.sc.lead::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 .5rem .5rem 0;border-color:transparent var(--accent) transparent transparent;border-top-right-radius:4px}
.sc.empty{background:none;border:1px dashed var(--line);cursor:default;height:1.62rem}
.tw2{font:600 .7rem var(--f-num);text-align:center;color:var(--muted);min-height:1rem}
.tw2.ns,.tw2.ew{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.78rem;color:var(--muted);align-items:center}
.legend i{display:inline-block;width:.85rem;height:.85rem;border-radius:3px;vertical-align:-.12rem;margin-right:.25rem;font-style:normal}

/* decision */
.who2{font-size:.95rem}
.grp{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:.6rem;align-items:start;padding:.5rem 0;border-top:1px solid var(--line)}
.gv{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}
.gv .bd{font-size:1rem;padding:.25rem .4rem;min-width:2.4rem}
.gv small{font-size:.74rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font:600 1rem/1 var(--f-num);min-height:2.3rem;min-width:2.6rem;padding:0 .5rem;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer}
.chip:hover{background:var(--tint)}
.chip.rec{outline:2px solid var(--ring);outline-offset:1px}
@media (pointer:coarse){.chip{min-height:2.75rem;min-width:2.9rem}}
.verdict{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 .5rem;font-size:.95rem}
.pill{font:700 .72rem/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:.28rem .5rem}
.counts{font-size:.82rem;color:var(--muted);margin-top:.35rem}

/* summary and dd table */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:.32rem .3rem;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
th{font-size:.78rem;color:var(--muted);font-weight:600}
td.n,th.n{text-align:right}
.costly{display:flex;flex-direction:column;gap:4px;margin-top:.5rem}
.costly button{display:flex;gap:.6rem;align-items:center;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:.4rem .55rem;cursor:pointer;font-size:.9rem}
.costly button:hover{background:var(--tint)}
.costly .tc2{font:700 .95rem var(--f-num);min-width:2.2rem}
.costly .bd{margin:0 0 0 auto;font-size:.8rem}
.kv{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:.15rem 1rem;margin-top:.6rem;font-size:.92rem}
.kv span:nth-child(even){text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ddt td,.ddt th{text-align:center;padding:.3rem .2rem}
.ddt td.hl{background:var(--tint);font-weight:700;border-radius:4px}
.ddt th:first-child,.ddt td:first-child{text-align:left}

/* pane hide buttons, panel checkboxes */
.hidebtn{background:none;border:0;color:var(--muted);font:600 .78rem var(--f-ui);cursor:pointer;padding:.3rem .4rem;margin:-.3rem -.4rem 0 0;border-radius:6px}
.hidebtn:hover{background:var(--surface-2);color:var(--ink)}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:9px;padding:.45rem .7rem;min-height:2.5rem;cursor:pointer;font-weight:600}
.chk input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}

/* flipped play record (phones): one row per trick, one column per seat */
.ptab{table-layout:fixed}
.ptab th,.ptab td{padding:3px 2px;border-bottom:0;text-align:center}
.ptab th{font:600 .72rem var(--f-num)}
.ptab th small{display:block;font:500 .66rem var(--f-ui);color:var(--muted)}
.ptab td:first-child,.ptab th:first-child{width:2rem;color:var(--muted);font:600 .75rem var(--f-num)}
.ptab td:last-child,.ptab th:last-child{width:3.2rem;font:600 .75rem var(--f-num)}
.ptab .sc{width:100%;display:block}
.sc.tl{box-shadow:inset 0 -2px 0 var(--muted)}
.ptab .more td{color:var(--muted);font-size:.8rem;padding-top:.4rem}

.menulist{display:flex;flex-direction:column;gap:6px}
.menulist button{text-align:left;padding:.75rem .85rem;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;font-weight:600}
.menulist button:hover{background:var(--tint)}
.about p{margin:0 0 .7rem;line-height:1.45}
.about a{color:var(--accent)}

@media (max-width:640px){
  .top,.note{display:none}
  .wrap{padding-block:0 24px}
  .tablearea{margin-inline:-16px}
  .pfelt{border-radius:0;padding:5px 4px;gap:5px 4px}
  .app,.app.noside{grid-template-columns:minmax(0,1fr);grid-template-areas:"table" "nav" "side" "strip";gap:10px}
  .navbar{justify-content:space-between;padding:6px}
  .app,.app.noside{gap:8px}
  .pos{display:none}
}

/* dialog */
dialog{border:0;border-radius:14px;padding:0;width:min(34rem,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(8,16,12,.5)}
.dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.dh h3{margin:0;font:700 1.15rem var(--f-num)}
.db{padding:4px 16px 16px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font:600 .8rem var(--f-ui);color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;overflow:hidden;align-self:flex-start;max-width:100%}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:.5rem .75rem;cursor:pointer;border-right:1px solid var(--line);min-height:2.5rem;display:flex;align-items:center;font-weight:600}
.seg label:last-of-type{border-right:0}
.seg input:checked+label{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:-3px}
.hint{font-size:.88rem;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:.55rem .7rem;margin:0}
textarea{width:100%;min-height:5.5rem;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:.6rem;font:.85rem/1.4 ui-monospace,Consolas,monospace;resize:vertical}
.boardlist{display:flex;flex-direction:column;gap:6px}
.boardlist button{text-align:left;padding:.6rem .75rem;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer}
.boardlist button:hover{background:var(--tint)}
.boardlist small{display:block;color:var(--muted)}
.boardlist button[aria-current]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* app additions (not in the mockup) */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
.top .sub{color:var(--muted);font-size:.92rem}
.boardlist{max-height:min(60vh,32rem);overflow-y:auto}
.bd.pend{background:var(--unk-bg);color:var(--unk)}
.err{color:var(--l2)}
input[type=file]{font:inherit;max-width:100%}
#toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;max-width:min(36rem,calc(100vw - 32px));
  background:var(--ink);color:var(--surface);border-radius:10px;padding:.6rem .9rem;box-shadow:0 8px 30px rgba(0,0,0,.3);font-size:.92rem}