/* Bridge Coach: the bridge app's "classic felt" look (same tokens), clean and minimal, big tap targets on phones. */
:root{
  --felt-img:radial-gradient(ellipse at 50% 30%,#1b7a4a 0%,#12613b 45%,#0b4a2c 100%);
  --top-bg:#093d24; --top-fg:#fff; --top-muted:#bac9c2; --on-felt:#fff; --on-felt-muted:rgba(255,255,255,.8);
  --accent:#ffc83d; --on-accent:#1a1a1a; --card-red:#d0101e;
  --sheet-bg:#fff; --sheet-fg:#111; --sheet-muted:#5c5c5c; --sheet-line:#e3e3e3; --sheet-line2:#cfcfcf; --sheet-soft:#f3f3ef; --sheet-link:#0f5a36;
  --green:#0f5a36; --pos:#15803d; --neg:#c8101c; --gold-bg:#fff6dc; --gold-line:#e9c255;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Roboto,system-ui,sans-serif;
  --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased;color:var(--on-felt)}
body{background:var(--felt-img) fixed,#0b4a2c;padding-bottom:calc(24px + var(--safeB))}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--sheet-muted)}
.red{color:var(--card-red)}
/* header */
.top{position:sticky;top:0;z-index:20;height:calc(56px + var(--safeT));padding:var(--safeT) 14px 0;display:flex;align-items:center;gap:14px;background:var(--top-bg);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;white-space:nowrap}
.mark{width:28px;height:28px;border-radius:7px}
.tabs{display:flex;gap:4px;flex:1;min-width:0}
.tab{border:0;background:none;color:var(--top-muted);font-weight:600;padding:0 14px;height:40px;border-radius:10px;white-space:nowrap}
.tab .sm{display:none}
.tab.on{background:rgba(255,255,255,.12);color:#fff}
.hdr-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.ask-btn{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;height:34px;padding:0 14px;font-weight:700;font-size:13px;white-space:nowrap}
.ask-btn .sm{display:none}
.ask-btn.on{background:#fff;color:var(--green)}
.qatt{margin-top:12px;border-top:1px solid var(--sheet-line);padding-top:12px;display:grid;gap:10px}
.qatt .ck{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;min-height:44px}
.qatt .ck input{width:22px;height:22px;margin-top:1px;flex:none}
.chip.question{background:#f1ecff;color:#5b3fb5;border-color:#dcd2fb}
.replies-pill{border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13px;height:34px;padding:0 14px;white-space:nowrap}
/* layout */
main{max-width:1240px;margin:0 auto;padding:16px}
.card{background:var(--sheet-bg);color:var(--sheet-fg);border-radius:16px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.card + .card{margin-top:14px}
.card h2{margin:0 0 10px;font-size:18px}
.card h3{margin:0 0 8px;font-size:15px}
.grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.gate{min-height:60vh;display:grid;place-items:center}
.gate .card{max-width:420px;text-align:center}
.btn{border:0;border-radius:12px;min-height:46px;padding:0 18px;font-weight:700;background:var(--green);color:#fff}
.btn.sec{background:#fff;color:var(--sheet-fg);border:1px solid var(--sheet-line2)}
.btn.gold{background:var(--accent);color:var(--on-accent)}
.btn.danger{background:#fff;color:var(--neg);border:1px solid #f1b8b8}
.btn:disabled{opacity:.45;cursor:default}
.btn.sm{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lnk{border:0;background:none;color:var(--sheet-link);font-weight:600;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.back{border:0;background:none;color:#fff;font-weight:700;font-size:16px;padding:8px 0;margin-bottom:8px;min-height:44px}
input[type=text],input[type=number],textarea{border:1px solid var(--sheet-line2);border-radius:10px;background:#fff;color:var(--sheet-fg);padding:9px 10px;min-height:42px;width:100%}
textarea{min-height:80px;resize:vertical;line-height:1.4}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
label.f{display:block;font-size:12.5px;font-weight:700;color:var(--sheet-muted);margin:0 0 4px}
.seg{display:inline-flex;border:1px solid var(--sheet-line2);border-radius:12px;overflow:hidden}
.seg button{border:0;background:#fff;min-width:48px;min-height:42px;padding:0 12px;font-weight:700;color:var(--sheet-fg)}
.seg button + button{border-left:1px solid var(--sheet-line2)}
.seg button.on{background:var(--green);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;background:var(--sheet-soft);color:var(--sheet-muted);border:1px solid var(--sheet-line)}
.chip.new{background:#eef4ff;color:#1f4fbf;border-color:#c9d8f7}
.chip.answered{background:#effaf2;color:var(--pos);border-color:#bfe3cb}
.chip.grouped{background:var(--gold-bg);color:#8a6200;border-color:var(--gold-line)}
.chip.agreed{background:var(--pos);color:#fff;border-color:var(--pos)}
.chip.rejected{background:#fdecec;color:var(--neg);border-color:#f1b8b8}
.chip.open,.chip.change{background:var(--gold-bg);color:#8a6200;border-color:var(--gold-line)}
.chip.building,.chip.testing{background:#eef4ff;color:#1f4fbf;border-color:#c9d8f7}
.chip.live{background:var(--pos);color:#fff;border-color:var(--pos)}
.errs{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fdecec;color:var(--neg);font-size:13.5px}
.errs div + div{margin-top:3px}
.note{font-size:13px;color:var(--sheet-muted)}
/* builder */
.opts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.seat-tabs{display:none;margin-bottom:10px}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seat{border:1px solid var(--sheet-line);border-radius:14px;padding:12px;background:#fcfcfa}
.seat.set{border-color:var(--gold-line);background:#fffdf5}
.seat h3{display:flex;justify-content:space-between;align-items:center}
.seat h3 .clr{font-size:12.5px}
.seat .hcp{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.seat .shape{display:grid;grid-template-columns:1fr;gap:2px;margin-top:8px}
.seat .anyo{min-height:34px!important}
.seat .anyo{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sheet-muted);white-space:nowrap;min-height:42px}
.seat .anyo input{width:20px;height:20px}
.seat .suits{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 6px;align-items:center}
.seat .suits .sy{font-size:18px;width:20px;text-align:center}
.seat .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.actions .btn{flex:1 1 auto}
.saved{margin-top:14px;border-top:1px solid var(--sheet-line);padding-top:12px}
.plist{display:flex;flex-wrap:wrap;gap:8px}
.pitem{display:inline-flex;align-items:stretch;border:1px solid var(--sheet-line2);border-radius:12px;overflow:hidden;background:#fff}
.pitem button{border:0;background:none;min-height:40px;padding:0 12px;font-weight:600}
.pitem .del{border-left:1px solid var(--sheet-line);color:var(--sheet-muted);padding:0 10px}
.pitem.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.saverow{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:10px}
/* board */
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bhead h2{margin:0}
.bver{font-size:12px;color:var(--sheet-muted)}
.hands{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:". n ." "w c e" ". s .";gap:8px;align-items:center;background:var(--felt-img);border-radius:14px;padding:12px}
.hand{background:#fff;border-radius:10px;padding:7px 10px;box-shadow:0 2px 4px rgba(0,0,0,.3);font-size:14.5px;line-height:1.45;justify-self:center;min-width:120px}
.hand .who{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--sheet-muted);display:flex;justify-content:space-between;gap:8px}
.hand .who.vul{color:var(--card-red)}
.hand .ln{white-space:nowrap;font-weight:600}
.hand .ln .s{display:inline-block;width:18px}
.h-n{grid-area:n}.h-e{grid-area:e}.h-s{grid-area:s}.h-w{grid-area:w}
.hands .ctr{grid-area:c;text-align:center;color:rgba(255,255,255,.85);font-size:12.5px;line-height:1.5}
.auc{margin-top:14px}
.auc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.auc-h{font-size:12px;font-weight:800;color:var(--sheet-muted);text-align:center;padding:4px 0;border-bottom:2px solid var(--sheet-line)}
.auc-h.vul{color:var(--card-red)}
.call{border:1px solid var(--sheet-line);border-radius:10px;background:#fff;padding:7px 8px;text-align:left;min-height:62px;display:flex;flex-direction:column;gap:3px}
.call b{font-size:17px}
.call .ex{font-size:12px;color:var(--sheet-muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.call.pass b{color:var(--sheet-muted);font-weight:600}
.call.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:var(--gold-bg)}
.call.commented::after{content:'💬';font-size:11px;align-self:flex-end;margin-top:auto}
.blank{min-height:1px}
.exp{grid-column:1/-1;border:1px solid var(--gold-line);background:#fffdf6;border-radius:12px;padding:12px;margin:2px 0 6px}
.exp .rule{font-size:14.5px;line-height:1.45}
.exp .shows{margin-top:4px;font-size:13px;color:var(--sheet-muted)}
.exp .form{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.exp .sbrow{display:grid;grid-template-columns:auto 170px;gap:8px;align-items:center;justify-content:start}
.banner{background:#effaf2;border:1px solid #bfe3cb;color:var(--sheet-fg);border-radius:14px;padding:12px 14px;margin-bottom:14px;display:grid;grid-template-columns:1fr auto;gap:6px 10px}
.banner .t{font-weight:800;color:var(--pos)}
.banner .x{border:0;background:none;font-size:18px;color:var(--sheet-muted);min-width:40px;min-height:40px;grid-row:1/span 3;grid-column:2}
.banner p{margin:0;font-size:14px;line-height:1.4}
.empty{text-align:center;padding:26px 10px;color:var(--sheet-muted)}
/* lists */
.item{border:1px solid var(--sheet-line);border-radius:14px;padding:12px;background:#fff}
.item + .item{margin-top:10px}
.item.unread{border-color:var(--gold-line);background:#fffdf5}
.ihead{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.ihead .when{font-size:12px;color:var(--sheet-muted)}
.quote{margin:8px 0 0;font-size:14.5px;line-height:1.45;white-space:pre-wrap}
.reply{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--sheet-soft);font-size:14px;line-height:1.45;white-space:pre-wrap}
.reply b{display:block;font-size:12px;color:var(--sheet-muted);margin-bottom:2px}
.mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;font-size:13px;text-align:center;margin-top:8px;max-width:340px}
.mini .h{font-size:11px;font-weight:800;color:var(--sheet-muted)}
.mini .c{padding:2px 0;border-radius:5px}
.mini .c.me{background:var(--gold-bg);box-shadow:0 0 0 2px var(--accent) inset;font-weight:800}
/* proposals */
.prop h3{font-size:16px;margin:0}
.sec{margin-top:12px}
.sec > .k{font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--sheet-muted);margin-bottom:4px}
.rule-box{white-space:pre-wrap;font-size:14.5px;line-height:1.5;background:var(--sheet-soft);border-radius:10px;padding:10px 12px}
.conf{border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.conf.ok{background:#effaf2;color:#135c2f;border:1px solid #bfe3cb}
.conf.bad{background:#fdecec;color:#8b0f18;border:1px solid #f1b8b8;font-weight:600}
.ex-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ex-item{border:1px solid var(--sheet-line);border-radius:10px;padding:8px 10px}
.ex-item .mini{margin-top:4px}
.ex-item .n{font-size:13px;margin-top:4px;color:var(--sheet-muted)}
.decide{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.status-line{margin-top:12px;padding:10px 12px;border-radius:10px;background:#effaf2;color:#135c2f;font-weight:700}
.status-line.rej{background:#fdecec;color:#8b0f18}
.thread{margin-top:12px;border-top:1px solid var(--sheet-line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;background:var(--sheet-soft)}
.msg.me{align-self:flex-end;background:#e3f3e8}
.msg .by{display:block;font-size:11.5px;font-weight:700;color:var(--sheet-muted);margin-bottom:2px}
.msgform{display:grid;grid-template-columns:1fr auto;gap:8px}
.msgform textarea{min-height:46px}
/* admin */
.adm summary{cursor:pointer;list-style:none;min-height:40px;display:block}
.adm summary::-webkit-details-marker{display:none}
.adm > .card{box-shadow:none;padding:10px 0 0;border-radius:0}
.adm > .card > .ihead:first-child{display:none}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.counter{border:1px solid var(--sheet-line);border-radius:12px;padding:10px 12px}
.counter b{display:block;font-size:24px}
.counter span{font-size:12.5px;color:var(--sheet-muted)}
.backlog{width:100%;border-collapse:collapse;font-size:14px}
.backlog th,.backlog td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--sheet-line);vertical-align:top}
.backlog th{font-size:12px;color:var(--sheet-muted)}
/* system book */
.bk-head{max-width:900px;margin:0 auto 14px}
.bk-intro{margin:0 0 6px;font-size:14.5px;line-height:1.45}
.bk-head .errs{margin-top:8px}
input[type=search]{border:1px solid var(--sheet-line2);border-radius:10px;background:#fff;color:var(--sheet-fg);padding:9px 12px;min-height:46px;width:100%;margin-top:10px;font-size:15.5px}
input[type=search]:focus{outline:2px solid var(--green);outline-offset:0}
#bookBody{max-width:900px;margin:0 auto}
.bk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.bk-ch{display:grid;grid-template-columns:1fr auto;gap:4px 10px;text-align:left;border:1px solid var(--sheet-line);border-radius:14px;background:#fff;color:var(--sheet-fg);padding:14px;min-height:64px;align-items:start}
.bk-ch:hover{border-color:var(--green)}
.bk-ch .t{font-weight:800;font-size:16px}
.bk-ch .n{font-size:12.5px;font-weight:700;color:var(--green);white-space:nowrap}
.bk-ch .d{grid-column:1/-1;font-size:13px;color:var(--sheet-muted);line-height:1.4}
.bk-ch::after{content:'›';grid-column:2;grid-row:1;justify-self:end;display:none}
.bk-sec{margin-top:16px}
.bk-sec h3{margin:0 0 8px;font-size:16px}
.bk-sec > .note{margin:0 0 8px}
.bk-rule{overflow-wrap:anywhere}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bk-pat{font-size:16px;line-height:1.35;padding-top:6px}
.bk-pat b{font-weight:800}
.bk-cbtn{flex:none}
.bk-mean{margin-top:6px;font-size:14.5px;line-height:1.45}
.bk-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.bk-tags .chip{font-weight:600}
.chip.bk-t{background:#eef6f1;color:var(--green);border-color:#cfe6d8}
.chip.bk-t.fg{background:#fff4e0;color:#8a5a00;border-color:#f0d9a8}
.chip.bk-unc{background:#fdecec;color:var(--neg);border-color:#f5c9cb}
.chip.book{background:#e8f1fb;color:#1d4f8f;border-color:#c9dcf3}
.bk-exs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:8px}
.bk-ex{border:1px solid var(--sheet-line);border-radius:10px;padding:6px 8px 8px;min-width:0}
.bk-ex .note{margin-top:2px}
.bk-mini{margin-top:4px;max-width:none}
.item > .bk-mini,.ex-item > .bk-mini{max-width:340px;margin-top:8px}
.bk-mini .c.opp{color:var(--sheet-muted)}
.bk-mini .c.ap{color:var(--sheet-muted);font-style:italic}
.bk-hands summary{cursor:pointer;margin-top:6px;min-height:28px;display:list-item}
.bk-hands > div{line-height:1.6;margin-top:4px}
.bk-noex{margin-top:8px;font-style:italic}
.bk-form{display:grid;gap:8px;margin-top:10px;border-top:1px solid var(--sheet-line);padding-top:10px}
.bk-form .sbrow{display:grid;grid-template-columns:auto 170px;gap:8px;align-items:center;justify-content:start}
.bk-form .row{display:flex;gap:8px;flex-wrap:wrap}
.bk-banner{margin:10px 0 0}
.bk-where{margin:14px 0 4px;font-weight:700}
.bk-cr{margin-top:8px;font-size:14px;line-height:1.45;background:var(--sheet-soft);border-radius:10px;padding:8px 10px}
.bk-foot{margin:16px 0 0}
/* phone */
@media (max-width:820px){
  .top{height:auto;flex-wrap:wrap;padding:calc(var(--safeT) + 8px) 10px 6px;gap:6px 10px}
  .brand{font-size:17px;height:36px}
  .hdr-r{order:2}
  .ask-btn .lg{display:none}.ask-btn .sm{display:inline}
  .ask-btn,.replies-pill{height:38px}
  .tabs{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{height:44px;padding:0 12px;font-size:14.5px;flex:1}
  .tab .sm{display:inline}.tab .lg{display:none}
  .seat .suits{grid-template-columns:auto 1fr}
  main{padding:10px}
  .card{padding:14px;border-radius:14px}
  .grid2{grid-template-columns:1fr}
  .seat-tabs{display:flex}
  .seat-tabs .seg{width:100%}
  .seat-tabs .seg button{flex:1}
  .seats{grid-template-columns:1fr}
  .seats .seat:not(.active){display:none}
  .hand{min-width:0;padding:6px 8px;font-size:14px}
  .hands{padding:8px;gap:6px}
  .call{padding:6px 6px;min-height:58px}
  .call b{font-size:16px}
  .call .ex{font-size:11px}
  .decide{grid-template-columns:1fr 1fr 1fr}
  .saverow{grid-template-columns:1fr auto}
  .saverow .btn.sec{grid-column:1/-1}
  .backlog .hide-sm{display:none}
  .bk-list{grid-template-columns:1fr}
  .bk-exs{grid-template-columns:1fr}
  .bk-form .sbrow{grid-template-columns:1fr}
  .bk-pat{font-size:15.5px}
}