/* Tokens. Every color, size and radius the page uses lives here.
   Type scale: xs 11 / sm 12.5 / md 14 / lg 16 / xl 20 / 2xl 26. Radii: --r for boxes, --pill for chips and buttons.
   --field is the border for inputs and outlined buttons (>= 3:1 against every background it sits on). */
:root{
  --paper:#F7F8F5; --surface:#FFFFFF; --ink:#1E3A2F; --ink-2:#4E5F57; --line:#D9DED9; --field:#7A867F;
  --gold:#A8862F; --gold-pin:#86691E; --gold-ink:#5E4A12; --moss:#2F6B4F; --moss-bg:#E3EFE8; --clay:#8F3B2E;
  --sel:#EEF3EE; --hover:#FAFBF9; --dq-bg:#FBF4F2; --dq-sel:#F3E3DF; --dq-hover:#F7ECE9;
  --yes:#1F5C3B; --yes-bg:#DDEFE3; --maybe:#8A5A12; --maybe-bg:#F6ECD9; --no:#8F3B2E; --no-bg:#F5E3DF; --none-bg:#EEF0EE;
  --rej-pin:#8C948F; --map-bg:#EEF0EA; --backdrop:rgba(30,58,47,.35); --shadow:0 6px 20px rgba(30,58,47,.18);
  --serif:"Fraunces",Georgia,serif; --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --r:8px; --pill:999px;
  --rail-w:400px;
  /* chart colors (Guests dashboard). seg0-7 is a categorical order that passes the color-blindness and
     contrast checks as a sequence; exp0-3 is the one-hue ramp for the EXPECTED? bands; seg-none is blank / other. */
  --seg0:#1F7F4E; --seg1:#C2860A; --seg2:#B8432F; --seg3:#2F6DB5; --seg4:#D0628A; --seg5:#5C8A1A; --seg6:#8E4FA0; --seg7:#00968A;
  --seg-none:#C5CCC8; --exp0:#173F2A; --exp1:#2E6E4C; --exp2:#4F9A71; --exp3:#8ABFA0;
  /* one color family per guest dimension, so no two charts share a color (2026-10-06). The sides' colors are the
     wedding's own (settings side_a_color / side_b_color; app.js sets these four from them on load and on every settings
     change, the -2 tints from data/guests.js tintOf). Guest of uses the Side families: a side's second group takes the
     tint. The defaults here are a new wedding's pair (partner + partner, slate and sage, the database's defaults), so a
     page shown before the settings arrive matches what a new wedding gets. */
  --side-a:#4a5b6e; --side-a-2:#aeb5be; --side-b:#5e8c61; --side-b-2:#b7cbb8;
  --family:#6B3FA0; --friend:#B89BE0; --alist:#B06F00; --blist:#F0C46A;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:var(--fs-md);line-height:1.45;display:flex;flex-direction:column}
a{color:var(--moss)}
[hidden]{display:none !important}

/* ---- buttons: primary, secondary (.sec / .dbtn), quiet (.link); .delbtn is secondary in clay ---- */
button.primary,button.sec,.dbtn,button.link,.delbtn{font:inherit;font-size:var(--fs-md);font-weight:500;line-height:1.2;border-radius:var(--pill);cursor:pointer;padding:7px 14px;min-height:34px}
button.primary{border:1px solid var(--ink);background:var(--ink);color:#fff}
button.sec,.dbtn{border:1px solid var(--field);background:var(--surface);color:var(--ink)}
button.sec:hover,.dbtn:hover{background:var(--sel)}
button.link{border:1px solid transparent;background:none;color:var(--moss);padding:7px 6px}
button.link:hover{text-decoration:underline}
.delbtn{border:1px solid var(--clay);background:var(--surface);color:var(--clay)}
.delbtn:hover,.delbtn:focus-visible{background:var(--clay);color:#fff}
button:disabled{opacity:.45;cursor:default}
.delbtn:disabled{background:var(--surface);color:var(--clay)}
.dbtn.dclear{color:var(--clay)}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--moss);outline-offset:2px}

/* ---- header ---- */
header{display:flex;align-items:center;gap:10px 18px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
header h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:0;letter-spacing:-0.01em;line-height:1.1}
header .spacer{flex:1}
/* "Priced at" (guest count) and Bar: in the Venues rail (#vPrice) and, for "Priced at", the Caterers tools (#cPrice); app.js route() moves it */
.pricerow{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.pricerow .barpop{margin-left:auto}
#cPrice{margin-left:auto}
.pricerow .guests{flex:1 1 auto;min-width:0}.pricerow .guests select{max-width:none;flex:none}
.pricerow .guests input[type=range]{flex:1 1 60px;width:auto;min-width:60px}
.exppop > summary{font-size:var(--fs-sm)}
.guests{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.barcfg{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-2)}
.barcfg .bl{font-weight:600;color:var(--ink)}
.barcfg input[type=number]{width:52px;font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:3px 5px;background:var(--surface);color:var(--ink)}
.barcfg select{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:3px 5px;background:var(--surface);color:var(--ink)}
.barpop{position:relative;display:block}
.barpop > summary{cursor:pointer;list-style:none;display:flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid var(--field);border-radius:var(--pill);background:var(--surface);color:var(--ink-2);white-space:nowrap}
.barpop > summary::-webkit-details-marker{display:none}
.barpop > summary::after{content:"▾";color:var(--ink-2);font-size:var(--fs-xs)}
.barpop[open] > summary{border-color:var(--moss)}
.barpop .barasmp{width:280px}
.barasmp{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;width:250px;display:grid;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.barasmp label{display:flex;justify-content:space-between;gap:8px;align-items:center}
.expw{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:8px}
.asmh{margin:0;font-weight:600;color:var(--ink)}
.guests.scen > output{order:2}.guests.scen > input{order:3}.guests.scen > .ovrbtn{order:4}
.approx{font-weight:700;margin-right:1px}
.barflag{color:var(--clay)}
.bared{display:grid;gap:8px;border-radius:var(--r)}
.bartiers{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.btier{display:flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:var(--pill);padding:2px 4px 2px 8px}
.btier.on{border-color:var(--moss);background:var(--moss-bg)}
.btier input{width:90px}.btier select{font-size:var(--fs-sm)}
.brule{display:grid;grid-template-columns:120px 90px 90px minmax(0,1fr) 28px;gap:6px;align-items:center}
.bared input,.bared select,.bared textarea{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;background:var(--surface);color:var(--ink);min-width:0}
.bared .x{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:16px}
.barres{font-size:var(--fs-sm)}.barres b{font-size:var(--fs-md)}
.bardesc textarea{width:100%}
.barpre{white-space:pre-wrap;font:inherit;font-size:var(--fs-sm);margin:4px 0 0}
.baract{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){.brule{grid-template-columns:1fr 1fr;}.brule .x{justify-self:end}}
.guests input{width:140px;accent-color:var(--moss)}
.guests select:not([hidden]) ~ input{width:100px}
.guests output{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);min-width:2.2em;font-size:var(--fs-md)}
.guests select{max-width:10em;font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:3px 5px;background:var(--surface);color:var(--ink)}
.guests output.ovr{color:var(--clay)}
.guests .ovrbtn{border:1px solid var(--clay);background:var(--surface);color:var(--clay);border-radius:999px;padding:0 6px;font:inherit;font-size:var(--fs-xs);line-height:18px;cursor:pointer}
.guests .ovrbtn:hover,.guests .ovrbtn:focus-visible{background:var(--clay);color:#fff}
.acct{display:flex;gap:8px;align-items:center}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:36px;height:36px;border-radius:var(--pill);border:1px solid var(--field);display:grid;place-items:center;color:var(--ink);background:var(--surface)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:18px;height:18px}
.menu[open] summary{background:var(--sel)}
.menupanel{position:absolute;right:0;top:calc(100% + 6px);z-index:25;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;display:grid}
.menupanel .me{margin:0;padding:8px 10px 10px;font-size:var(--fs-sm);color:var(--ink-2);border-bottom:1px solid var(--line);margin-bottom:4px}
.menupanel .me b{color:var(--ink);font-weight:600}
.menupanel button,.menupanel a{all:unset;box-sizing:border-box;display:block;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:var(--fs-md);color:var(--ink)}
.menupanel button:hover,.menupanel a:hover,.menupanel button:focus-visible,.menupanel a:focus-visible{background:var(--sel)}
.menupanel .sub{color:var(--ink-2);font-size:var(--fs-sm)}
.menupanel hr{border:0;border-top:1px solid var(--line);margin:4px 0}

/* ---- layout ---- */
main{flex:1;display:grid;grid-template-columns:var(--rail-w) 6px 1fr;min-height:0}
#dragbar{cursor:col-resize;background:var(--line);touch-action:none}
#dragbar:hover,#dragbar.dragging{background:var(--moss)}
body.dragging{cursor:col-resize;user-select:none}
body.dragging #map{pointer-events:none}
#rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.controls{padding:12px 16px 10px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{font:inherit;font-size:var(--fs-sm);border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:5px 11px;border-radius:var(--pill);cursor:pointer;min-height:30px}
.chips button[aria-pressed="true"]{border-color:var(--moss);background:var(--surface);color:var(--ink);font-weight:500}
.chips button[aria-pressed="true"]::before{content:"✓ ";color:var(--moss)}
.chips button[aria-pressed="false"] .n{opacity:.8}
.chips .n{color:var(--ink-2);font-weight:400}
.selects{display:flex;gap:8px}
.controls select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);background:var(--surface);color:var(--ink);padding:6px 8px;border-radius:var(--r);flex:1 1 0;min-width:0}
.controls .count{margin:0;font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;min-height:28px}
.controls .count > span{flex:1;min-width:0}
.controls .count button{font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--moss);cursor:pointer;padding:0;text-decoration:underline}
.controls .count .resetbtn{flex:none;text-decoration:none;font-weight:500;color:var(--ink);border:1px solid var(--field);background:var(--surface);padding:4px 11px;border-radius:var(--pill)}
.controls .count .resetbtn:hover{background:var(--sel)}
#vSearch{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);background:var(--surface);color:var(--ink);padding:7px 10px;border-radius:var(--r);width:100%;box-sizing:border-box;min-width:0}
#vSearch:focus-visible{outline:2px solid var(--moss);outline-offset:-1px}

/* ---- list ---- */
#list{overflow-y:auto;overflow-x:hidden;flex:1;list-style:none;margin:0;padding:0 0 24px}
.sect,.msg{padding:14px 16px 6px;font-size:var(--fs-sm);color:var(--ink-2);border-top:1px solid var(--line)}
.msg{padding-bottom:14px;line-height:1.5}
.msg.err{color:var(--clay)}
.msg button{font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--moss);cursor:pointer;padding:0;text-decoration:underline}
.sect.dq{color:var(--clay)}
.item{border-bottom:1px solid var(--line);display:grid;grid-template-columns:40px minmax(0,1fr)}
.item > .cmp{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:flex-end;padding-left:12px;cursor:pointer}
.item > .cmp input{width:18px;height:18px;accent-color:var(--moss);cursor:pointer}
.item > button{all:unset;box-sizing:border-box;grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;padding:11px 16px 11px 10px;cursor:pointer}
.item > button:hover{background:var(--hover)}
.item > button:focus-visible{outline:2px solid var(--moss);outline-offset:-2px}
.item > .detail{grid-column:1/-1}
.item.selected > button,.item.selected > .cmp{background:var(--sel)}
.item.pinhover > button,.item.pinhover > .cmp{background:var(--hover);box-shadow:inset 3px 0 0 var(--moss)}
.item.flash{animation:vflash 1.4s ease-out}
@keyframes vflash{0%,35%{outline:2px solid var(--gold);outline-offset:-2px}100%{outline:2px solid transparent;outline-offset:-2px}}
@media (prefers-reduced-motion:reduce){.item.flash{animation:none}}
.vnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.vnav button{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);background:var(--surface);color:var(--ink);padding:4px 11px;border-radius:var(--pill);cursor:pointer}
.vnav button:hover:not(:disabled){background:var(--hover)}
.vnav button:disabled{opacity:.4;cursor:default}
.item .name{grid-column:1;grid-row:1;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.item.selected .name{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);line-height:1.2}
.item .where{grid-column:1;grid-row:2;color:var(--ink-2);font-size:var(--fs-sm)}
.item .price{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--serif);font-size:var(--fs-xl);color:var(--gold-ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.item .price.none{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink-2)}
.item .price small{display:block;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);margin-top:1px}
.item .nfiles{color:var(--ink-2)}
.item.dq{background:var(--dq-bg)}
.item.dq > .cmp{box-shadow:inset 4px 0 0 var(--clay)}
.item.dq .name{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(143,59,46,.5)}
.item.dq .price{color:var(--ink-2);opacity:.7}
.item.dq > button:hover{background:var(--dq-hover)}
.item.dq.selected > button,.item.dq.selected > .cmp,.item.dq .detail{background:var(--dq-sel)}
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:1px 7px;border-radius:var(--pill);margin-right:6px;vertical-align:1px}
.dqtag{color:var(--clay);background:var(--dq-sel)}
.tourtag{color:var(--moss);background:var(--moss-bg)}
.tournext{color:var(--gold-ink);background:var(--maybe-bg)}
.tournext.past{color:var(--clay);background:var(--dq-sel)}
/* Tours strip above the venue list: scheduled tours not yet marked toured */
#tours{padding:8px 16px 10px;border-bottom:1px solid var(--line);background:var(--surface);max-height:30vh;overflow:auto;flex:none}
#tours h3{margin:0 0 4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
#tours ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#tours li{display:flex;align-items:center;gap:8px}
#tours .tgo{flex:1;min-width:0;display:flex;gap:10px;align-items:baseline;font:inherit;font-size:var(--fs-md);text-align:left;background:none;border:0;padding:5px 0;color:var(--ink);cursor:pointer}
#tours .tgo:hover .tname{text-decoration:underline}
#tours .twhen{flex:none;min-width:9.5em;color:var(--gold-ink);font-weight:600;font-variant-numeric:tabular-nums}
#tours li.past .twhen{color:var(--clay)}
#tours .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tours .sec,#tours .link{font-size:var(--fs-sm);padding:4px 10px;min-height:28px}
.shorttag{color:var(--gold-ink);background:var(--maybe-bg)}
.booktag{color:var(--moss);background:var(--moss-bg);font-weight:600}
/* vote dots: B and N, colored by vote */
.vdots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}
.vdot{width:17px;height:17px;border-radius:50%;font:600 10px/17px var(--sans);text-align:center;background:var(--none-bg);color:var(--ink-2);text-decoration:none;display:inline-block}
.vdot.Yes{background:var(--yes-bg);color:var(--yes)}.vdot.Maybe{background:var(--maybe-bg);color:var(--maybe)}.vdot.No{background:var(--no-bg);color:var(--no)}
.vdot.none{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}

/* ---- expanded card: read view ---- */
.detail{padding:4px 16px 16px;background:var(--sel);display:none}
.item.selected .detail{display:block}
.detail h4{margin:16px 0 0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.detail h4 + dl{margin-top:4px}
.detail dl{display:grid;grid-template-columns:118px minmax(0,1fr);gap:6px 12px;margin:10px 0 0}
.detail dt{color:var(--ink-2);font-size:var(--fs-sm)}
.detail dd{margin:0;overflow-wrap:anywhere;min-width:0}
.detail dl.rv dd{white-space:pre-line}
.dqline{margin:10px 0 0;color:var(--clay);font-weight:500}
.box{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.rv-price .big{font-family:var(--serif);font-size:var(--fs-2xl);line-height:1.1;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.rv-price .lbl{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}
.rv-price.none .lbl{margin:0}
.rv-flag{margin:8px 0 0;font-size:var(--fs-sm);color:var(--maybe)}
.rv-price details{margin-top:8px}
.rv-price summary{cursor:pointer;color:var(--moss);font-size:var(--fs-sm)}
.rv-price dl{grid-template-columns:1fr auto;gap:3px 12px;margin-top:6px;font-size:var(--fs-sm)}
.rv-price dl dd{text-align:right;font-variant-numeric:tabular-nums}
.rv-price dl .tot{font-weight:600;color:var(--ink);border-top:1px solid var(--line);padding-top:4px}
.keyfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.keyfacts > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;min-width:0}
.keyfacts .k{font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.keyfacts .v{font-weight:500;overflow-wrap:anywhere}
.keyfacts .v.unk{color:var(--ink-2);font-weight:400;font-style:italic}
.keyfacts .v.bad{color:var(--clay)}
.keyfacts .v small{display:block;font-weight:400;font-size:var(--fs-sm)}
.missing{margin:10px 0 0;font-size:var(--fs-sm);color:var(--maybe)}
.quick{margin-top:12px}
.cardacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.cardlinks{display:flex;gap:4px 16px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-sm)}
.editbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:8px 10px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.editbar p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.detail .place{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.detail .place:empty{display:none}
.detail .place img{width:96px;height:72px;object-fit:cover;border-radius:var(--r);flex:none}
.detail .place .meta{font-size:var(--fs-sm);color:var(--ink-2)}
.detail .place .meta b{color:var(--ink);font-weight:500}
.detail .files{font-size:var(--fs-sm);color:var(--ink-2);margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.detail .files ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px}
.detail .files li{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-md);color:var(--ink)}
.detail .files .ext{flex:none;font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;padding:1px 5px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:var(--ink-2);min-width:36px;text-align:center}
.detail .files a{overflow-wrap:anywhere}
/* Photos (photos.js): the card's grid of thumbnails, and the lightbox #phDlg */
.detail .photos{font-size:var(--fs-sm);color:var(--ink-2);margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.detail .photos+.files{margin-top:10px;padding-top:0;border-top:0}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-top:6px}
.ph{position:relative;aspect-ratio:1;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph img:not([src]){display:none}
.ph .phname{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px;font-size:var(--fs-xs);color:var(--ink-2);text-align:center;overflow-wrap:anywhere;overflow:hidden}
.ph.phok .phname{display:none}
.ph:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#phDlg{width:min(1100px,calc(100vw - 24px));max-width:none;max-height:96vh;background:#161616;color:#eee;border:0;border-radius:var(--r);padding:12px 14px}
#phDlg::backdrop{background:rgba(0,0,0,.82)}
#phDlg .phtop{display:flex;align-items:baseline;gap:12px}
#phDlg h2{flex:1;margin:0;font:inherit;font-size:var(--fs-md);font-weight:500;overflow-wrap:anywhere}
#phDlg .phcount{font-size:var(--fs-sm);color:#bbb;white-space:nowrap}
#phDlg .phstage{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40vh;margin-top:8px}
#phImg{max-width:calc(100% - 92px);max-height:76vh;object-fit:contain;display:block}
#phImg:not([src]){display:none}
#phDlg .phnav{flex:none;font:inherit;font-size:34px;line-height:1;background:none;border:0;color:#eee;cursor:pointer;padding:8px 12px;border-radius:var(--pill)}
#phDlg .phnav:hover:not(:disabled){background:rgba(255,255,255,.12)}
#phDlg .phnav:disabled{opacity:.3;cursor:default}
#phDlg .phmsg{text-align:center;color:#bbb;margin:8px 0 0}
#phDlg .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
#phDlg .link{color:#eee;background:none;border:0;text-decoration:underline}
#phDlg .sec{color:#eee;background:transparent;border:1px solid #666}
#phDlg .sec:hover{background:rgba(255,255,255,.12)}
#phDlg .delbtn{background:transparent;border:1px solid var(--clay);color:#f0b9a3}
#phDlg .phconf{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:600px){#phDlg{padding:10px}#phDlg .phnav{padding:8px 6px;font-size:30px}#phImg{max-width:calc(100% - 72px);max-height:62vh}}
/* A file row's remove "×" and its in-row "Remove <name>?" (file-remove.js; Venues, Caterers, Vendors) */
button.fdel{flex:none;border:0;background:none;color:var(--ink-2);cursor:pointer;font:inherit;font-size:18px;line-height:1;padding:2px 8px;margin-left:2px;min-width:32px;min-height:28px;border-radius:var(--r);vertical-align:middle}
button.fdel:hover{color:var(--clay);background:var(--surface)}
li.fconfirm{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
li.fconfirm .fconfq{overflow-wrap:anywhere;min-width:0}
li.fconfirm button{font-size:var(--fs-sm);padding:4px 10px;min-height:28px}
.detail .ro,.ro{color:var(--ink-2);font-size:var(--fs-sm)}

/* ---- votes ---- */
.votes{margin:10px 0 4px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.votes .vrow{display:grid;grid-template-columns:64px auto 1fr;gap:4px 10px;align-items:baseline;padding:3px 0}
.votes .vwho{font-size:var(--fs-sm);color:var(--ink-2)}
.votes .vcom{font-size:var(--fs-md);color:var(--ink-2);overflow-wrap:anywhere}
.vchip{justify-self:start;display:inline-block;font-size:var(--fs-sm);font-weight:600;padding:2px 10px;border-radius:var(--pill);background:var(--none-bg);color:var(--ink-2)}
.vchip.Yes{background:var(--yes-bg);color:var(--yes)}.vchip.Maybe{background:var(--maybe-bg);color:var(--maybe)}.vchip.No{background:var(--no-bg);color:var(--no)}
.votes .vbtn{margin-top:10px}
.votes .vchips{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.votes .vchip{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.votes .vchip-name{color:var(--ink-2)}
.votes .vchip-value{font-weight:600;color:var(--ink)}
.votes .vchip-state{font-size:var(--fs-xs);color:var(--ink-2);font-weight:400}
.votes .vote-btn{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);border-radius:var(--pill);background:var(--surface);color:var(--ink);padding:1px 9px;cursor:pointer}
.votes .vote-btn[aria-pressed="true"][data-vote="Yes"]{background:var(--yes-bg);color:var(--yes);border-color:var(--yes)}
.votes .vote-btn[aria-pressed="true"][data-vote="Maybe"]{background:var(--maybe-bg);color:var(--maybe);border-color:var(--maybe)}
.votes .vote-btn[aria-pressed="true"][data-vote="No"]{background:var(--no-bg);color:var(--no);border-color:var(--no)}
.votes .vcom{margin:8px 0 0}
.votes .vmine{display:grid;gap:6px;margin-top:10px}.votes .vmine .vcsave{justify-self:end}
.votes .vmine textarea{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;background:var(--surface);color:var(--ink);width:100%;min-height:48px;resize:vertical}
.vpanel{margin-top:10px;display:grid;gap:8px}
.vopts{display:flex;gap:8px}
.vopts button{flex:1;font:inherit;font-weight:500;min-height:44px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer}
.vopts button[aria-pressed="true"][data-v="Yes"]{background:var(--yes);border-color:var(--yes);color:#fff}
.vopts button[aria-pressed="true"][data-v="Maybe"]{background:var(--maybe);border-color:var(--maybe);color:#fff}
.vopts button[aria-pressed="true"][data-v="No"]{background:var(--no);border-color:var(--no);color:#fff}
.vpanel .vact{display:flex;gap:12px;align-items:center;justify-content:flex-end}
.vpanel .err{margin:0}

/* ---- form fields (edit mode, dialogs, login) ---- */
#login input,#addForm input,#addForm select,.detail .ed input,.detail .ed select,.detail .ed textarea,.vpanel textarea,.qvenue input:not([type=radio]),.qvenue select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;background:var(--surface);color:var(--ink);width:100%}
.vpanel textarea,.detail .ed textarea{min-height:58px;resize:vertical}
.detail .ed dd{position:relative}
.detail .ed .saving{outline:2px solid var(--gold);outline-offset:-1px}
.detail .ed .saved{outline:2px solid var(--moss);outline-offset:-1px}
.detail .ed .bad{outline:2px solid var(--clay);outline-offset:-1px}
.detail .ed .ferr{display:block;color:var(--clay);font-size:var(--fs-sm);margin-top:2px}
.detail dl.ed dt.full,.detail dl.ed dd.full{grid-column:1/-1}
.detail dl.ed dt.full{margin-top:6px}
.err{color:var(--clay);font-size:var(--fs-sm);margin:4px 0 0;min-height:1em}
.hint{color:var(--ink-2);font-size:var(--fs-sm);margin:0}
.numf{display:flex;align-items:center;gap:6px}
.numf span{color:var(--ink-2);font-size:var(--fs-sm);flex:none}
.numf input{flex:1;min-width:0}
.datef{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.datef input[type=date]{flex:1;min-width:0}
.dnone{color:var(--ink-2);font-size:var(--fs-sm)}
.charges{display:grid;gap:10px;border-radius:var(--r)}
.charges.saving{outline:2px solid var(--gold);outline-offset:3px}
.charges.saved{outline:2px solid var(--moss);outline-offset:3px}
.charges.bad{outline:2px solid var(--clay);outline-offset:3px}
.chg{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px 10px;display:grid;gap:6px}
.chgtop{display:flex;gap:6px;align-items:center}
.chgtop .cname{flex:2;min-width:0}
.chgtop .numf{flex:1;min-width:90px}
.cup,.cdel{flex:none;border:0;background:none;font-size:var(--fs-lg);cursor:pointer;width:40px;height:40px;border-radius:var(--r)}
.cup{color:var(--ink-2)}.cdel{color:var(--clay)}
.cup:hover,.cdel:hover{background:var(--sel)}
.chgon{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-sm);color:var(--ink)}
.chgon > span{color:var(--ink-2)}
.chgon label{display:inline-flex;gap:6px;align-items:center;cursor:pointer;min-height:32px;white-space:nowrap}
.detail .ed .chgon input{width:18px;height:18px;flex:none;padding:0;accent-color:var(--moss)}
.chgamt{font-size:var(--fs-sm);color:var(--ink-2)}
.charges .cadd{justify-self:start}
.vdel{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.vdel .delconf{display:grid;gap:8px}
.vdel .delconf p{margin:0}
.vdel .delact{display:flex;gap:12px;align-items:center;justify-content:flex-end}

/* ---- map + pins ---- */
.mapwrap{position:relative;min-height:0}
#map{width:100%;height:100%;min-height:320px;background:var(--map-bg)}
#keyerr{position:absolute;inset:0;display:none;place-items:center;padding:24px;text-align:center;color:var(--ink-2)}
.mapbtn{margin:10px;font:inherit;font-size:var(--fs-sm);font-weight:500;border:1px solid var(--field);background:var(--surface);color:var(--ink);padding:7px 12px;border-radius:var(--pill);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pin{font-family:var(--serif);font-weight:600;font-size:var(--fs-md);line-height:1;color:#fff;background:var(--gold-pin);padding:6px 9px 7px;border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.35);position:relative;white-space:nowrap;transform:translateY(-6px)}
.pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px;z-index:-1}
.pin.quiet{background:var(--surface);color:var(--ink);padding:5px 6px}
.pin.quiet svg{display:block;width:16px;height:16px}
.pin.active{background:var(--ink);outline:3px solid #fff}
.pin.quiet.active{background:var(--ink);color:#fff}
/* status pins: rejected = small gray dot; idea/contacted = hollow; quote received = gold; shortlist = gold + ring + heart; toured = green border */
.pin.hollow{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink-2)}
.pin.hollow.quiet{padding:4px 5px}
.pin.hollow.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pin.short{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold),0 1px 2px rgba(0,0,0,.35)}
.pin.loved::before{content:"♥";position:absolute;top:-9px;right:-9px;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--clay);font:600 11px/17px var(--sans);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.pin .pv{position:absolute;left:-5px;top:-5px;display:flex;gap:2px}
.pin .pv i{width:9px;height:9px;border-radius:50%;background:var(--none-bg);box-shadow:0 0 0 1.5px #fff}
.pin .pv i.Yes{background:var(--yes)}.pin .pv i.Maybe{background:var(--maybe)}.pin .pv i.No{background:var(--no)}
.pin.rej{width:12px;height:12px;padding:0;border-radius:50%;background:var(--rej-pin);opacity:.6;box-shadow:0 0 0 2px #fff;transform:none;font-size:0;border:0}
/* toured: a green border, on any fill */
.pin.toured,.pin.hollow.toured{border:2.5px solid var(--moss)}
.pin.rej::after,.pin.rej .pv{display:none}
.pin.rej.active{opacity:1;background:var(--ink)}
.pin.hover{outline:3px solid #fff;box-shadow:0 0 0 5px var(--moss),0 2px 6px rgba(0,0,0,.35);transform:translateY(-6px) scale(1.12)}
.pin.rej.hover{opacity:1;transform:scale(1.5)}
.cluster{transform:translateY(50%);min-width:34px;height:34px;padding:0 10px;border-radius:var(--pill);border:2px solid #fff;background:var(--ink);color:#fff;font:600 var(--fs-md)/30px var(--sans);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);white-space:nowrap}
.cluster small{font-weight:400;opacity:.85;margin-left:4px}
.cluster:hover{background:var(--moss)}

/* ---- compare ---- */
#cmpbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:6px 6px 6px 18px;box-shadow:var(--shadow);font-size:var(--fs-sm);max-width:calc(100vw - 32px)}
body.cmp-on #list{padding-bottom:96px}
#compare{position:absolute;inset:0;z-index:5;background:var(--paper);display:flex;flex-direction:column;min-height:0}
.cmphead{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.cmphead h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);margin:0}
.cmpscroll{overflow:auto;flex:1;min-height:0}
#cmpTable{border-collapse:separate;border-spacing:0;font-size:var(--fs-md);min-width:100%}
#cmpTable th,#cmpTable td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:170px;max-width:280px;overflow-wrap:anywhere}
#cmpTable thead th{position:sticky;top:0;background:var(--surface);font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);z-index:1}
#cmpTable th[scope=row]{position:sticky;left:0;background:var(--paper);color:var(--ink-2);font-weight:500;font-size:var(--fs-sm);min-width:112px;max-width:130px;z-index:1}
#cmpTable thead th:first-child{left:0;z-index:2}
#cmpTable tr.gap th,#cmpTable tr.gap td{border-top:6px solid var(--line)}
#cmpTable td.big{font-family:var(--serif);font-size:var(--fs-xl);color:var(--gold-ink)}
#cmpTable .sub{display:block;color:var(--ink-2);font-size:var(--fs-sm);font-family:var(--sans)}
#cmpTable .warn{color:var(--clay)}
#printArea{display:none}

/* ---- login, dialogs, toast ---- */
#login{position:fixed;inset:0;z-index:20;background:var(--paper);display:grid;place-items:center;padding:16px}
#login form,#addForm{display:grid;gap:6px;width:min(340px,100%)}
#login h2,#addForm h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:0 0 10px}
#login button{margin-top:8px;justify-self:start}
#login .pick{display:grid;gap:6px;width:min(340px,100%)}
#login label{font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px}
#login .wslist{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
#login .wslist a{display:block;padding:12px 14px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:500}
#login .wslist a:hover{background:var(--sel)}
#login .wslist .sub{display:block;color:var(--ink-2);font-size:var(--fs-sm);font-weight:400}
#login .ok{color:var(--moss);font-size:var(--fs-sm);margin:4px 0 0}
/* /signup and /setup (signup.html, setup.html) */
#login .setupbox{display:grid;gap:10px;width:min(340px,100%)}
#login .setupbox form,#login .setupbox .pick{width:100%}
#login .authlink{color:var(--moss);font-size:var(--fs-sm);margin-top:10px;justify-self:start;overflow-wrap:anywhere}
#login .homelink{margin:0 0 6px}
#login .or{color:var(--ink-2);font-size:var(--fs-sm);margin:8px 0 0}
#login #sentMsg,#login #who{overflow-wrap:anywhere}
/* The wedding setup's five steps (wedding-setup.js; in /setup and /login) */
#login .wsetup{width:min(340px,100%)}
#login .wsetup form{width:100%}
#login .wsetup h2{outline:none}
#login .wcount{margin:0 0 -6px}
#login .wchoices{display:grid;gap:6px;margin:0 0 4px}
#login .wchoice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:10px 12px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:var(--fs-md);cursor:pointer}
#login .wchoice input{width:auto;margin:0;flex:none}
#login .wchoice label{margin:0;color:var(--ink);font-size:var(--fs-md);cursor:pointer}
#login .wchoice.wstyle .hint{flex-basis:100%;padding-left:24px}
#login .wchoice:has(input:checked){border-color:var(--ink);background:var(--sel)}
#login .wcolors{display:grid;gap:4px;margin-top:8px}
#login .wcolor{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
#login .wswatch{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--field)}
#login .wcname{min-width:0;overflow-wrap:anywhere;font-size:var(--fs-md)}
#login .wcolor button{margin-top:0}
#login input.wcolorin{position:absolute;left:0;bottom:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
#login .wnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#login .wnav button{margin-top:0}
#login .wlabel{font-size:var(--fs-sm);color:var(--ink-2);margin:6px 0 0}
#login .wtownpick{display:grid;gap:6px}
#login .wtownslot gmp-place-autocomplete{width:100%}
#login .wtown,#login .wzone{margin:4px 0 0;overflow-wrap:anywhere}
#login .wtown button,#login .wzone button{margin-top:0;padding:2px 4px;min-height:0}
#login .wtown span{font-weight:500}
#login .wzonepick{display:grid;gap:6px}
#login .wsetup select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;background:var(--surface);color:var(--ink);width:100%}
#login .wsummary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 4px}
#login .wsummary dt{color:var(--ink-2);font-size:var(--fs-sm)}
#login .wsummary dd{margin:0;overflow-wrap:anywhere}
/* The "Privacy · Terms" footer of the sign-in pages (login, signup, setup, invite): the pane in the first grid row, the
   footer under it; the overlay scrolls when a tall pane and the footer don't fit. */
#login.withlegal{grid-template-rows:1fr auto;overflow-y:auto}
#login footer.legal{font-size:var(--fs-sm);color:var(--ink-2);padding:8px 0 4px}
#login footer.legal a{color:var(--ink-2)}
/* /privacy and /terms (privacy.html, terms.html): one readable column, the page itself scrolls. */
body.legalpage{display:block;height:auto}
main.legaldoc{display:block;flex:none;max-width:720px;margin:0 auto;padding:24px 16px 48px;overflow-wrap:anywhere}
.legaldoc h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:8px 0 4px}
.legaldoc h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);margin:28px 0 6px}
.legaldoc p,.legaldoc li{font-size:var(--fs-lg);line-height:1.55}
.legaldoc ul{padding-left:22px}
.legaldoc li{margin:6px 0}
.legaldoc .hint{font-size:var(--fs-md);color:var(--ink-2);margin:0 0 12px}
.legaldoc .legalnote{background:var(--moss-bg);border-radius:var(--r);padding:10px 14px}
.legaldoc .legalback{font-size:var(--fs-md);margin:0}
.legaldoc .legalback:last-child{margin-top:32px}
.legaldoc .legaltop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legaldoc .legalmark{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);color:var(--ink);text-decoration:none}
#addDlg,#qDlg,#mDlg,#emailDlg,#hoDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;max-width:calc(100vw - 32px);color:var(--ink)}
#addDlg::backdrop,#qDlg::backdrop,#mDlg::backdrop,#emailDlg::backdrop,#hoDlg::backdrop,#reopenDlg::backdrop{background:var(--backdrop)}
#addForm label{font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px}
#addForm .row2,.qvenue .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#addNameRow{display:grid;gap:4px}#addNameRow .hint{margin:0}
#addTypeCustomRow{display:grid;gap:4px;margin-top:6px}#addTypeCustomRow[hidden]{display:none}
.typef{display:grid;gap:6px}.typef .typecustom[hidden]{display:none}
#addTyped{display:grid;gap:4px}#addTyped .hint{margin:0}#addTyped[hidden],#addSearch[hidden]{display:none}
.addmode{margin:2px 0 4px}
.addrsug{list-style:none;margin:2px 0 4px;padding:4px 0;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);max-width:100%}
.addrsug li{padding:9px 12px;cursor:pointer;font-size:var(--fs-md);line-height:1.3}
.addrsug li[aria-selected=true],.addrsug li:hover{background:var(--sel)}.addmode button.link,.addrf.editing + .hint + .atype{padding:4px 0;min-height:0}
/* the card's Address field: the place, and Change (opens a Places search in its place) */
.addrf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addrv{flex:1;min-width:0}.addrv small{color:var(--ink-2)}
.addrf.editing .acslot,.addrf.editing .addrtyped{flex:1 1 160px;min-width:0}.addrf.editing .towntyped{flex:1 1 110px;min-width:0}.addrf.editing gmp-place-autocomplete{width:100%}
.addrf + .hint{margin:4px 0 0;font-size:var(--fs-sm)}
#addForm .actions{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:12px}
#acBox gmp-place-autocomplete{width:100%}
gmp-place-autocomplete{color-scheme:light !important}                 /* the site is light-only; Google's box otherwise follows the OS */
.pickedplace{margin:6px 0 2px}
.pickedplace small{display:block;color:var(--ink-2);font-size:var(--fs-sm)}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--pill);font-size:var(--fs-md);box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
#toast .toastact{font:inherit;font-weight:600;color:#F3D98B;background:none;border:0;padding:2px 4px;margin-left:6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#toMap{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:14;display:flex;gap:6px;align-items:center;box-shadow:var(--shadow)}
#toMap svg{width:16px;height:16px}
body.cmp-on #toMap{bottom:76px}

/* ---- quote upload + review ---- */
#qDlg{width:min(640px,calc(100vw - 32px));max-height:90vh;overflow:auto}
#qDlg h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:0 0 6px}
#qDlg .actions{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:14px;position:sticky;bottom:-20px;background:var(--surface);padding:10px 0 4px}
.qdrop{display:grid;place-items:center;text-align:center;gap:6px;border:1.5px dashed var(--field);border-radius:var(--r);padding:28px 16px;margin:12px 0 4px;cursor:pointer;color:var(--ink-2);background:var(--paper)}
.qdrop.over{border-color:var(--moss);background:var(--sel)}
.qdrop input{position:absolute;opacity:0;width:1px;height:1px}
.qdrop:focus-within{outline:2px solid var(--moss);outline-offset:2px}
.qdrop b{color:var(--moss);text-decoration:underline;font-weight:500}
.qwork{margin:16px 0 4px;color:var(--ink-2)}
.qwork progress{width:100%;accent-color:var(--moss)}
.qflags{display:grid;gap:6px;margin:10px 0}
.qflag{border-left:3px solid var(--clay);background:var(--dq-bg);padding:6px 10px;border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-sm);color:var(--clay);overflow-wrap:anywhere}
.qflag b{display:block;font-weight:600}
.qsum{font-size:var(--fs-sm);color:var(--ink-2);margin:8px 0}
.qopt{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);margin:6px 0;cursor:pointer}
.qopt input,.qrow input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--moss);margin:1px 0 0}
.qfields{border-top:1px solid var(--line);margin-top:10px}
.qf{border-bottom:1px solid var(--line);padding:8px 0}
.qrow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 10px;align-items:start;cursor:pointer}
.qrow .qcol{font-size:var(--fs-sm);color:var(--ink-2);font-weight:500}
.qrow .qvals{grid-column:2/-1;font-size:var(--fs-md);overflow-wrap:anywhere;white-space:pre-line}
.qrow .qcur{color:var(--ink-2)}
.qrow .qcur.blank{font-style:italic}
.qrow .qnew{color:var(--ink);font-weight:600}
.qrow .qsame{color:var(--moss);font-size:var(--fs-sm)}
.qconf{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:1px 7px;border-radius:var(--pill)}
.qconf.high{background:var(--yes-bg);color:var(--yes)}.qconf.medium{background:var(--maybe-bg);color:var(--maybe)}.qconf.low{background:var(--no-bg);color:var(--no)}
.qf details{margin:4px 0 0 32px;font-size:var(--fs-sm);color:var(--ink-2)}
.qf details summary{cursor:pointer;color:var(--moss)}
.qf blockquote{margin:4px 0 0;padding:4px 10px;border-left:2px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.qvenue{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:10px 0;display:grid;gap:6px}
.qvenue legend{font-weight:600;padding:0 4px}
.qvenue label.qcand{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.qvenue label.qcand input{margin-top:3px;accent-color:var(--moss)}
.qvenue label.qcand span small{display:block;color:var(--ink-2);font-size:var(--fs-sm)}
.qvenue .lbl{font-size:var(--fs-sm);color:var(--ink-2);margin-top:4px}
.qvenue gmp-place-autocomplete{width:100%}
.qnote{background:var(--sel);border-radius:var(--r);padding:6px 10px;font-size:var(--fs-sm)}
.qsect{margin:14px 0 4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.qhave{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--ink-2)}
.qhave li{padding:4px 0;border-bottom:1px solid var(--line)}
.qhave .qcol{font-weight:500;margin-right:6px}
.qhave details{margin:2px 0 0}
/* email import */
#mDlg{width:min(760px,calc(100vw - 32px));max-height:90vh;overflow:auto}
#mDlg h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:0 0 6px}
#mDlg .actions{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:14px;position:sticky;bottom:-20px;background:var(--surface);padding:10px 0 4px}
.mbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.mbar label{display:flex;gap:6px;align-items:center;font-size:var(--fs-sm);color:var(--ink-2)}
.mbar select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink)}
.mprog{font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.msect{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 6px}
.mcard{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
.mcard h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);margin:0 0 4px}
.mcard h3 small{font-family:var(--sans);font-weight:400;font-size:var(--fs-sm);color:var(--ink-2)}
.mthreads{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px;font-size:var(--fs-sm)}
.mthreads small,.mnrow small{display:block;color:var(--ink-2)}
.matts{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.matts .lbl{font-size:var(--fs-sm);color:var(--ink-2);font-weight:500}
.matts small{color:var(--ink-2)}
.mnone{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.mnone summary{cursor:pointer;color:var(--moss);font-size:var(--fs-sm)}
.mnrow{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.qsect{margin:14px 0 4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.qhave{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--ink-2)}
.qhave li{padding:4px 0;border-bottom:1px solid var(--line)}
.qhave .qcol{font-weight:500;margin-right:6px}
.qhave small{color:var(--ink-2)}
.qhave details{margin:2px 0 0}
.mnopts{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.mnrow.mcard{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0;margin:0}
.mnall{margin:8px 0}
.mact{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.mact .err{margin-right:auto;font-size:var(--fs-sm)}
.mflags summary{cursor:pointer;color:var(--clay);font-size:var(--fs-sm);margin:8px 0 4px}
#emailBtn.hasitems{border-color:var(--moss);color:var(--moss);font-weight:600}
#emailBtn{white-space:nowrap}
.mprog.err{color:var(--clay)}
/* From email (emails.js): the review panel */
#emailDlg{width:min(680px,calc(100vw - 32px));max-height:90vh;overflow:auto}
.eform h2{margin:0 0 8px}
.eaddr p{margin:0 0 6px}
.eaddrline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.eaddrline code{overflow-wrap:anywhere;font-size:var(--fs-sm);background:var(--sel);border-radius:var(--r);padding:4px 8px}
.elist{display:grid;gap:10px;margin-top:10px}
.ecard{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.ecard h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);margin:0 0 4px;overflow-wrap:anywhere}
.efrom{margin:0 0 6px;font-size:var(--fs-sm);overflow-wrap:anywhere}.efrom small{color:var(--ink-2)}
.ewarn,.estatus{margin:4px 0;font-size:var(--fs-sm)}.ewarn{color:var(--clay)}
.eatts{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px;font-size:var(--fs-sm)}
.eatts li{overflow-wrap:anywhere}.eatts small{color:var(--ink-2)}
.ehelp{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.etext{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:var(--fs-sm);max-height:40vh;overflow:auto;background:var(--sel);border-radius:var(--r);padding:8px 10px;margin:8px 0}
.eact{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;align-items:center;margin-top:8px}
.ematch{margin:6px 0;font-size:var(--fs-sm);font-weight:500;overflow-wrap:anywhere}
.enew,.epick{display:grid;gap:6px;margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);min-width:0}
.enew label,.epick label{display:grid;gap:2px;min-width:0}
.epick .eact{margin-top:2px}
.eatts input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--moss);margin:0 6px 0 0;vertical-align:-3px}
@media (max-width:600px){#emailBtn{padding:6px 10px;font-size:var(--fs-sm)}}

/* Phones: drop the fixed-height app shell and let the page scroll, so the list gets
   the whole screen below a shorter map instead of a sliver under it. The filter bar
   sticks to the top while the list scrolls, and a "Map" button brings the map back. */
/* ---- views nav + per-view header buttons ---- */
.views{display:flex;gap:4px;margin-left:8px}
.views a{padding:5px 12px;border-radius:var(--pill);color:var(--ink-2);text-decoration:none;font-weight:500}
.views a:hover{background:var(--sel)}
.views a[aria-current]{background:var(--ink);color:#fff}
body:not([data-view="venues"]) .venue-only{display:none !important}
body:not([data-view="venues"]):not([data-view="caterers"]) .vc-only{display:none !important}

/* ---- Guests view ---- */
.gview{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.gview.carded{grid-template-columns:minmax(0,1fr) 380px}
.gmain{overflow:auto;min-height:0;padding:14px 20px 40px}
.gtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ghead{margin:0;flex:1;font-size:var(--fs-lg);color:var(--ink-2);font-variant-numeric:tabular-nums}
.ghead b{color:var(--ink);font-weight:600}.ghead b.ovr{color:var(--clay)}
.ghead .gparties{margin-left:8px;font-size:var(--fs-sm)}
.gacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;max-width:100%}
.gdashbtn{display:none}
.gdash{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:14px 0;align-items:start}
@media (min-width:821px){.gdash .gwide{grid-column:span 2}}
.gbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0}
.gbar h3{margin:0 0 8px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.gbar h3 small{font-weight:400;letter-spacing:0;text-transform:none;margin-left:4px}
.gbar h3 .sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c);margin:0 4px 0 8px;vertical-align:-1px}
.gmetric{grid-column:1/-1;display:flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--ink-2)}
.gmetric button{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:3px 12px;border-radius:var(--pill);cursor:pointer}
.gmetric button:first-of-type{margin-left:4px}
.gmetric button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:500;background:var(--sel)}
/* donuts */
.gdrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.dsvg{display:block;width:96px;height:96px;overflow:visible}
.gdonut .gleg .gl{white-space:normal;line-height:1.2}
.dtrack{fill:none;stroke:var(--none-bg);stroke-width:14}
.dseg{fill:none;stroke:var(--c);stroke-width:14;transform:rotate(-90deg);transform-origin:50px 50px;cursor:pointer;
  transition:stroke-dasharray .45s ease,stroke-dashoffset .45s ease,stroke-width .15s,opacity .2s}
.dseg.hl,.dseg.on{stroke-width:19}
.dseg.dim{opacity:.3}.dseg.dim.hl{opacity:.7}
.dcv{font-size:19px;font-weight:600;fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums}
.dcl{font-size:9.5px;fill:var(--ink-2);text-anchor:middle}
/* headcount */
.hrows{display:grid;gap:7px}
.hrow{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(110px,auto);gap:10px;align-items:center;font-size:var(--fs-sm)}
.hlab{color:var(--ink-2)}
.htrack{position:relative;height:16px;display:block}
.htrack i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;transition:width .45s ease}
.hghost{background:var(--none-bg)}
.hbar{background:var(--c)}
.hval{font-variant-numeric:tabular-nums;color:var(--ink)}.hval small{color:var(--ink-2)}
/* stacked progress bars */
.gstack + .gstack{margin-top:10px}
.gstack h4{margin:0 0 4px;font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.strack{display:flex;height:16px;border-radius:4px;overflow:hidden;margin-left:-2px}
.sseg{display:block;flex:0 1 0;min-width:0;border-left:2px solid var(--surface);background:var(--c);cursor:pointer;transition:flex-grow .45s ease,opacity .2s}
.sseg.dim{opacity:.3}.sseg.hl{filter:brightness(1.15)}.sseg.on{box-shadow:inset 0 0 0 2px var(--ink)}
.glegs.ginline{display:flex;flex-wrap:wrap;gap:2px 6px}
.glegs.ginline .gleg{grid-template-columns:10px auto auto}
/* groups */
.gdash .ggroups{grid-column:1/-1}
.grows{columns:2 360px;column-gap:28px}
.grow{all:unset;break-inside:avoid;box-sizing:border-box;display:grid;grid-template-columns:minmax(80px,160px) minmax(0,1fr) 44px;gap:10px;align-items:center;width:100%;padding:3px 6px;border-radius:4px;cursor:pointer;font-size:var(--fs-sm)}
.grow:hover,.grow.hl{background:var(--hover)}.grow.on{background:var(--sel);font-weight:600}.grow.dim{opacity:.45}
.grow:focus-visible{outline:2px solid var(--moss)}
.grow .gl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .gn{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gtrack{display:flex;gap:2px;height:12px}
.gtrack i{display:block;background:var(--c);transition:width .45s ease}.gtrack i:last-child{border-radius:0 4px 4px 0}
/* legend rows (donuts and stacks) */
.glegs{display:grid;gap:1px;min-width:0}
.gleg{all:unset;box-sizing:border-box;display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:6px;align-items:center;padding:3px 6px;border-radius:4px;cursor:pointer;font-size:var(--fs-sm)}
.gleg:hover,.gleg.hl{background:var(--hover)}.gleg.on{background:var(--sel);font-weight:600}
.gleg:focus-visible{outline:2px solid var(--moss)}
.gleg .sw{width:10px;height:10px;border-radius:2px;background:var(--c)}
.gleg .gl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gleg .gn{color:var(--ink);font-variant-numeric:tabular-nums}.gleg .gn small{color:var(--ink-2);margin-left:2px}
/* the shared chart tooltip */
.gtip{position:fixed;left:0;top:0;z-index:40;pointer-events:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r);padding:6px 10px;font-size:var(--fs-sm);max-width:280px;display:grid;gap:1px}
.gtip b{font-size:var(--fs-md);color:var(--ink);font-variant-numeric:tabular-nums}.gtip span{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.dseg,.htrack i,.sseg,.gtrack i{transition:none}}
/* filter bar + live total: sticks to the top while the charts and table scroll under it */
.gfbar{position:sticky;top:-14px;z-index:3;background:var(--paper);margin:10px -20px 8px;padding:10px 20px;border-bottom:1px solid var(--line)}
.gfrow{display:flex;gap:8px 10px;align-items:flex-end;flex-wrap:wrap}
.gfsel{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.gfdd{display:grid;gap:1px;font-size:var(--fs-xs);color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.gfdd select{font:inherit;font-size:var(--fs-sm);text-transform:none;letter-spacing:0;border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;background:var(--surface);color:var(--ink);max-width:200px}
.gfdd.on{color:var(--moss);font-weight:600}.gfdd.on select{border-color:var(--moss);box-shadow:inset 0 0 0 1px var(--moss);background:var(--moss-bg);font-weight:600}
/* Guests filter bar: <details> checklists (several picks per dimension) */
details.gfdd{position:relative}
details.gfdd summary{list-style:none;cursor:pointer;display:grid;gap:1px}
details.gfdd summary::-webkit-details-marker{display:none}
details.gfdd .gfv{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;font-weight:400;border:1px solid var(--field);border-radius:var(--r);padding:4px 24px 4px 6px;background:var(--surface);color:var(--ink);
  min-width:84px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}
details.gfdd .gfv::after{content:"▾";position:absolute;right:7px;top:50%;transform:translateY(-50%);color:var(--ink-2);font-size:11px}
details.gfdd[open] .gfv::after{content:"▴"}
details.gfdd summary:focus-visible .gfv{outline:2px solid var(--moss);outline-offset:1px}
details.gfdd.on .gfv{border-color:var(--moss);box-shadow:inset 0 0 0 1px var(--moss);background:var(--moss-bg);font-weight:600}
.gfpop{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:220px;max-width:min(320px,90vw);max-height:min(360px,60vh);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:4px;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);font-size:var(--fs-sm)}
.gfopt{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 8px;border-radius:4px;cursor:pointer}
.gfopt:hover{background:var(--sel)}
.gfopt input{margin:0;accent-color:var(--moss)}
.gfopt .sw{width:10px;height:10px;border-radius:2px;background:var(--c)}
.gfopt:not(:has(.sw)){grid-template-columns:auto minmax(0,1fr) auto}
.gfopt small{color:var(--ink-2);font-variant-numeric:tabular-nums}
.gfpfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:4px;padding:4px 4px 0 8px;color:var(--ink-2);min-height:28px}
.gfpfoot:has(span:empty):not(:has(button)){display:none}
.gfpfoot b{color:var(--moss);font-variant-numeric:tabular-nums}
.gfpfoot .gfall{padding:2px 6px;min-height:0;font-size:var(--fs-sm)}
.gresult{display:flex;align-items:baseline;gap:4px 22px;flex-wrap:wrap;margin-top:10px;font-variant-numeric:tabular-nums}
.grn{display:flex;align-items:baseline;gap:5px;color:var(--ink-2)}
.grn b{font-size:22px;font-weight:600;color:var(--ink);line-height:1}
.grn.main b{font-size:34px;color:var(--moss)}
.grdesc{margin:0;flex-basis:100%;font-size:var(--fs-sm);color:var(--ink)}
.grdesc b{font-weight:600}.grdesc .gclear{padding:0 4px}
#gSearch{font:inherit;border:1px solid var(--field);border-radius:var(--pill);padding:6px 12px;min-width:220px;background:var(--surface);color:var(--ink)}
.gbulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;border:1px solid var(--gold);background:var(--maybe-bg);border-radius:var(--r);font-size:var(--fs-sm)}
.gbulk select,.gbulk input{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;background:var(--surface);color:var(--ink)}
.gbody{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.gtable{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
.gtable th{position:sticky;top:0;background:var(--surface);text-align:left;border-bottom:1px solid var(--line);font-weight:600;z-index:1}
.gsort{all:unset;cursor:pointer;display:block;padding:8px 10px;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.gsort:focus-visible{outline:2px solid var(--moss);outline-offset:-2px}
.gtable td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.gtable tbody tr{cursor:pointer}
.gtable tbody tr:hover{background:var(--hover)}
.gtable tbody tr.sel{background:var(--sel)}
.gtable tbody tr:focus{outline:2px solid var(--moss);outline-offset:-2px}
.gtable .gck{width:34px;text-align:center;padding:0 4px}.gtable .gck input{width:16px;height:16px;accent-color:var(--moss)}
.gtable .c-party{font-weight:500;min-width:180px}
.gtable .c-people{text-align:right;font-variant-numeric:tabular-nums;width:60px}
.gtable td input,.gtable td select{font:inherit;border:1px solid var(--field);border-radius:4px;padding:3px 5px;width:100%;min-width:70px;background:var(--surface);color:var(--ink)}
.gtable td .ferr,.gcard .ferr{display:block;color:var(--clay);font-size:var(--fs-sm)}
.gtable .saving,.gcard .saving{outline:2px solid var(--gold)}.gtable .saved,.gcard .saved{outline:2px solid var(--moss)}.gtable .bad,.gcard .bad{outline:2px solid var(--clay)}
.gv{display:inline-block;font-size:var(--fs-sm);padding:0 8px;border-radius:var(--pill);background:var(--none-bg);color:var(--ink-2);white-space:nowrap}
.gv[data-side="b"]{background:var(--moss-bg);color:var(--moss)}
.gv[data-side="a"]{background:var(--maybe-bg);color:var(--gold-ink)}
.gv[data-v="A LIST"],.gv[data-v="100%"],.gv[data-v="Yes"]{background:var(--yes-bg);color:var(--yes)}
.gv[data-v="<50%"],.gv[data-v="0%"],.gv[data-v="No"]{background:var(--no-bg);color:var(--no)}
.gfoot{margin:8px 2px 0;font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}.gfoot b{color:var(--ink)}
.gexport{display:inline-flex;gap:12px;margin-left:10px;flex-wrap:wrap}.gexport .link[disabled]{opacity:.45;cursor:default}
.gamail{margin:8px 0 2px;display:grid;gap:4px}.gamail summary{cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2)}.gamail[open] summary{margin-bottom:4px}
.gcard{display:block;border-left:1px solid var(--line);overflow:auto;min-height:0;padding:14px 18px 30px}
.gcardhead{display:flex;align-items:flex-start;gap:8px}
.gcardhead h2{flex:1;margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);line-height:1.2;overflow-wrap:anywhere}
.gcardhead h2 input{font:inherit;font-size:var(--fs-lg);border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;width:calc(100% - 80px)}
.pencil{all:unset;cursor:pointer;color:var(--ink-2);padding:0 4px;font-size:var(--fs-md)}.pencil:hover{color:var(--ink)}
.pencil:focus-visible{outline:2px solid var(--moss)}
.gcard dl.ed{grid-template-columns:100px 1fr}
.gcard .ed input,.gcard .ed select,.gcard .ed textarea{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 7px;background:var(--surface);color:var(--ink);width:100%}
.gcard .cardlinks{margin-top:12px}
#gDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(560px,calc(100vw - 32px));color:var(--ink)}
#gDlg::backdrop{background:var(--backdrop)}
.gform{display:grid;gap:6px}
.gform h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:0 0 8px}
.gform label{font-size:var(--fs-sm);color:var(--ink-2)}
.gform input,.gform select,.gform textarea{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;background:var(--surface);color:var(--ink);width:100%}
.gform .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gform .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.gform .actions{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:12px}
.gmgroups{list-style:none;margin:0;padding:0}
.gmgroups li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.gmgroups li.hint{display:block}
.gmside{font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere;max-width:10em}
.gmadd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,9em) auto;gap:8px;align-items:center;margin-top:6px}
@media (max-width:560px){
  .gmgroups li{grid-template-columns:minmax(0,1fr) auto}
  .gmgroups li button{grid-column:1 / -1;justify-self:start}
  .gmadd{grid-template-columns:minmax(0,1fr) minmax(0,8em)}
  .gmadd button{grid-column:1 / -1;justify-self:start}
}
.gtabs{display:flex;gap:6px;margin-bottom:6px}
.gtabs button{font:inherit;border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:5px 12px;border-radius:var(--pill);cursor:pointer}
.gtabs button[aria-selected="true"]{border-color:var(--ink);color:var(--ink);font-weight:500}
.gidef{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;display:grid;gap:6px}
#giAllowed dl{margin:6px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;font-size:var(--fs-sm)}#giAllowed dt{font-weight:600}#giAllowed dd{margin:0;color:var(--ink-2)}
.gidef legend{font-size:var(--fs-sm);color:var(--ink-2)}
.gimap{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.gipre{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.gipre table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.gipre th,.gipre td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left}
.gipre tr.bad{background:var(--dq-bg);color:var(--clay)}
/* ---- Caterers view (list + card; shares the Guests view's layout and the venue list's rows) ---- */
.cview .ctools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
.cview .ctools select{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink)}
.clist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.clist .item:last-child{border-bottom:0}
.stag{background:var(--none-bg);color:var(--ink-2)}
.ccmpbar{position:sticky;bottom:12px;margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);box-shadow:var(--shadow)}
#cCompare{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
#cCompare .cmpscroll{max-height:60vh}
#cCard .pre{white-space:pre-line}
#cDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(640px,calc(100vw - 32px));color:var(--ink)}
#cDlg::backdrop{background:var(--backdrop)}
#cCmpTable{border-collapse:separate;border-spacing:0;font-size:var(--fs-md);min-width:100%}
#cCmpTable th,#cCmpTable td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:170px;max-width:280px;overflow-wrap:anywhere}
#cCmpTable thead th{position:sticky;top:0;background:var(--surface);font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);z-index:1}
#cCmpTable th[scope=row]{position:sticky;left:0;background:var(--paper);color:var(--ink-2);font-weight:500;font-size:var(--fs-sm);min-width:112px;max-width:130px;z-index:1}
#cCmpTable thead th:first-child{left:0;z-index:2}
#cCmpTable tr.gap th,#cCmpTable tr.gap td{border-top:6px solid var(--line)}
#cCmpTable td.big{font-family:var(--serif);font-size:var(--fs-xl);color:var(--gold-ink)}
#cCmpTable .sub{display:block;color:var(--ink-2);font-size:var(--fs-sm);font-family:var(--sans)}
#cCmpTable .warn{color:var(--clay)}

/* ---- Seating view: unseated panel | room | table card; the room is SVG in feet ---- */
/* ---------- Seating: a three-column editor on a computer (unseated list | room | table card); on a phone the
   room fills the screen and the list / card live in a bottom sheet (#stSheet). The sheet is display:contents on
   a computer so its two panels sit in the grid. ---------- */
.stview{display:flex;flex-direction:column;min-height:0}
.stview > .msg{margin:16px 20px}
.stwrap{flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr) 330px;grid-template-areas:"panel canvas card"}
.stsheet{display:contents}
.stgrip{display:none}
.stpanel{grid-area:panel;border-right:1px solid var(--line);background:var(--surface);padding:12px 14px 20px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
.stcard{grid-area:card;background:var(--paper)}
.stcanvas{grid-area:canvas;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--map-bg)}
/* the unseated list */
.sthead{display:flex;align-items:center;gap:8px}
.sttabs{display:flex;gap:2px;background:var(--none-bg);border-radius:var(--pill);padding:3px;flex:1}
.sttabs button{flex:1;font:inherit;font-size:var(--fs-sm);font-weight:500;border:0;background:transparent;color:var(--ink-2);padding:6px 10px;border-radius:var(--pill);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.sttabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(30,58,47,.15)}
.sttabs .ro{font-variant-numeric:tabular-nums;margin-left:2px}
.stsearch{position:relative}
.stsearch svg{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;pointer-events:none}
.stsearch input{width:100%;font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--pill);padding:7px 12px 7px 33px;background:var(--surface);color:var(--ink)}
.stsearch input:focus-visible{outline:2px solid var(--moss);outline-offset:1px}
.stres{display:grid;gap:4px}.stres:empty{display:none}
.stres > .ro{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em}
.stjump{display:flex;align-items:center;gap:8px;font:inherit;font-size:var(--fs-sm);text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;cursor:pointer;color:var(--ink);transition:background .15s,border-color .15s}
.stjump i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.stjump span{margin-left:auto;color:var(--ink-2);font-size:var(--fs-xs);white-space:nowrap}
.stjump:hover{background:var(--sel);border-color:var(--moss)}
.stopts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.stopts .stmore[open]{flex-basis:100%;order:2}
.stopts .stgrpby{margin-left:auto}
.stmore{font-size:var(--fs-sm)}
.stmore summary{cursor:pointer;color:var(--moss);font-weight:500}
.stmore summary b{background:var(--moss);color:#fff;border-radius:var(--pill);padding:0 6px;font-size:var(--fs-xs)}
.stmore[open] summary{margin-bottom:6px}
.stpanel select{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);width:100%}
.stfilters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stall{font-size:var(--fs-sm);color:var(--ink-2);display:flex;gap:6px;align-items:center;margin-top:6px}
.stgrpby{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.stgrpby select{width:auto;padding:3px 6px}
.sthint{margin:2px 0 0}
.stchips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.stgrp{border-top:1px solid var(--line);padding:6px 0 4px}
.stgrp summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;font-size:var(--fs-sm);font-weight:600;padding:2px 0 6px;list-style:none}
.stgrp summary::-webkit-details-marker{display:none}
.stgrp summary::before{content:"▸";color:var(--ink-2);transition:transform .2s;display:inline-block}
.stgrp[open] summary::before{transform:rotate(90deg)}
.stgrp summary .ro{font-weight:400;font-size:var(--fs-xs)}
.stpickall{margin-left:auto;font-size:var(--fs-xs)}
.stempty{text-align:center;padding:16px 0}
/* party chips: an avatar in the lens color, the name, the head count */
.stchip{font:inherit;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;max-width:100%}
.stchip:hover{border-color:var(--c);box-shadow:0 2px 6px rgba(30,58,47,.12);transform:translateY(-1px)}
.stchip:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.stchip .stav{width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;flex:none;letter-spacing:.02em}
.stchip .stn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stchip .stp{font-variant-numeric:tabular-nums;font-weight:600;background:var(--none-bg);border-radius:var(--pill);padding:0 7px;font-size:var(--fs-xs)}
.stchip.picked{background:var(--moss-bg);border-color:var(--moss);box-shadow:0 0 0 2px var(--moss)}
.stchip.picked .stav{font-size:0}.stchip.picked .stav::after{content:"✓";font-size:13px}
.stghost{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:5px 12px 5px 5px;border-radius:var(--pill);font-size:var(--fs-sm);box-shadow:0 14px 30px rgba(30,58,47,.35);will-change:transform;transition:background .15s}
.stghost.ok{background:var(--moss)}
.pkav{display:inline-flex;flex:none}
.pkav i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--sans);font-style:normal;color:#fff;border:2px solid var(--ink);margin-left:-8px}
.pkav i:first-child{margin-left:0}
.stghost.ok .pkav i{border-color:var(--moss)}
.stfly{position:fixed;z-index:60;pointer-events:none;width:26px;height:26px;border-radius:50%;color:#fff;font:600 10px/22px var(--sans);text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.25);border:2px solid #fff}
.stconfetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:70}
/* toolbar and the numbers */
.sttools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.sttools .stadd{display:flex;gap:4px;align-items:center;font-size:var(--fs-sm);color:var(--ink-2)}
.sttools .dbtn{min-height:30px;padding:4px 10px;font-size:var(--fs-sm)}
.sttools .spacer{flex:1}
button.stsparkle{background:linear-gradient(135deg,var(--moss-bg),var(--maybe-bg));border-color:var(--gold)}
.stsummary{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;padding:6px 14px;font-size:var(--fs-sm);color:var(--ink-2);background:var(--surface);border-bottom:1px solid var(--line)}
.stsummary b{color:var(--ink);font-variant-numeric:tabular-nums}
.stsummary select{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);border-radius:var(--r);padding:2px 6px;background:var(--surface);color:var(--ink);max-width:220px}
.stprog{display:flex;align-items:center;gap:8px}
.ring{width:36px;height:36px;transform:rotate(-90deg);flex:none}
.ring circle{fill:none;stroke-width:4}
.ring .rbg{stroke:var(--none-bg)}
.ring .rfg{stroke:var(--moss);stroke-linecap:round;transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1),stroke .4s}
.stsummary.done .ring .rfg{stroke:var(--gold)}
.rtxt{display:flex;flex-direction:column;line-height:1.05}
.rtxt b{font-family:var(--serif);font-size:var(--fs-xl);font-weight:600}
.rtxt small{font-size:var(--fs-sm);color:var(--ink-2)}
.rtxt .rl{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.stsummary.done .rtxt b{color:var(--gold-ink)}
.stwarn{color:var(--clay);font-weight:500}
/* the room */
.stroomwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#F5F6F0,var(--map-bg) 75%)}
.stroom{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stroom:active{cursor:grabbing}
.stroom .floor{fill:#FCFBF7}
.stroom .floorsh{fill:#1E3A2F;opacity:.07}.stroom .floorsh2{fill:#1E3A2F;opacity:.04}
.stroom .g1{fill:none;stroke:#ECE8DE;stroke-width:.03}
.stroom .g5{fill:none;stroke:#DFDACB;stroke-width:.05}
.stroom.z-far .grid{opacity:.35}
.stroom .walls{fill:none;stroke:#C5CDC6;stroke-width:.35}
.stroom .dim{font:.9px var(--sans);fill:var(--ink-2);text-anchor:middle;letter-spacing:.05em}
.stroom .resize{cursor:nwse-resize}
.stroom .resize .rzhit{fill:transparent}
.stroom .resize .rzico{stroke:var(--moss);stroke-width:.22;stroke-linecap:round;fill:none}
.stroom .obj{cursor:pointer;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.stroom .obj.notrans,.stroom .obj.dragging{transition:none}
.stroom .obj.dragging{cursor:grabbing}
.stroom .obj:focus{outline:none}
.stroom .obj:focus-visible .tb{stroke:var(--moss);stroke-width:.3}
.stroom .obj .tsh{fill:#1E3A2F;opacity:.1}
.stroom .obj.dance .tsh{opacity:.07}
.stroom .obj.lifted .body{filter:url(#stLift)}
.stroom .obj.lifted .in{transform:scale(1.04)}
.stroom .obj .tb{fill:url(#stCloth);stroke:#D8D1BE;stroke-width:.08}
.stroom .obj .tbr{fill:none;stroke:#ECE6D6;stroke-width:.06}
.stroom .obj.dance .tb{fill:url(#stParquet);stroke:#B8945F;stroke-width:.12}
.stroom .obj.dance .tbr{stroke:#FFF8EA;stroke-opacity:.7;stroke-width:.1}
.stroom .obj.stage .tb{fill:url(#stStage);stroke:none}
.stroom .obj.stage .lip{fill:#62756B}
.stroom .obj.bar .tb{fill:url(#stBar);stroke:none}
.stroom .obj .ico{fill:none;stroke:#fff;stroke-width:.12;stroke-linecap:round;stroke-linejoin:round}
.stroom .obj .tl{font-family:var(--serif);font-weight:600;fill:var(--ink);text-anchor:middle}
.stroom .obj.stage .tl,.stroom .obj.bar .tl{fill:#fff}
.stroom .obj.dance .tl{fill:#6B4F2A;font-style:italic;font-weight:400}
.stroom .obj .tc{font-family:var(--sans);fill:var(--ink-2);text-anchor:middle;font-variant-numeric:tabular-nums}
.stroom.z-far .obj .tc{display:none}
.stroom .obj.full .tc{fill:var(--moss);font-weight:600}
.stroom .obj.over .tc{fill:var(--clay);font-weight:600}
.stroom .obj.over .tb{stroke:var(--clay);stroke-width:.2}
.stroom .obj.sel .tb{stroke:var(--moss);stroke-width:.16}
/* chairs and guests */
.stroom .chair .ch{fill:#EEEADF;stroke:#D7D0BD;stroke-width:.05}
.stroom .chair .bk{fill:#D7D0BD}
.stroom .chair .av{stroke:#fff;stroke-width:.09}
.stroom .chair .ini{font:600 .34px var(--sans);fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;display:none}
.stroom.z-near .chair .ini{display:block}
.stroom .chair.pop .av{animation:stpop .5s cubic-bezier(.2,1.6,.4,1) backwards;animation-delay:var(--d,0ms);transform-box:fill-box;transform-origin:center}
@keyframes stpop{from{transform:scale(0);opacity:0}}
.stroom .chair.pv .ch{fill:var(--moss-bg);stroke:var(--moss);stroke-width:.12;animation:stpv .8s ease-in-out infinite alternate}
.stroom .obj.drop-no .chair.pv .ch{fill:var(--no-bg);stroke:var(--clay)}
@keyframes stpv{to{opacity:.5}}
.stroom .obj.drop-ok .tb{stroke:var(--moss);stroke-width:.24}
.stroom .obj.drop-no .tb{stroke:var(--clay);stroke-width:.24}
.stroom.focus .chair.on:not(.fc) .av{opacity:.15}
.stroom.focus .chair.fc .av{stroke:var(--ink);stroke-width:.12}
.stroom .pc{font:500 .5px var(--sans);fill:var(--ink-2);dominant-baseline:central;display:none;pointer-events:none}
.stroom:not(.z-far) .obj.sel .pc,.stroom.stmini .pc{display:block}
/* selection, handles, guides */
.stroom .selring{fill:none;stroke:var(--moss);stroke-width:.12;stroke-dasharray:.5 .35;animation:stants 1.2s linear infinite}
@keyframes stants{to{stroke-dashoffset:-1.7}}
.stroom .rotl{stroke:var(--moss);stroke-width:.08}
.stroom .hhit{fill:transparent}
.stroom .roth{cursor:grab}
.stroom .roth .hdot{fill:var(--moss);stroke:#fff;stroke-width:.12}
.stroom .sizeh{cursor:nwse-resize}
.stroom .sizeh .hdot{fill:#fff;stroke:var(--moss);stroke-width:.15}
.stroom .guide{stroke:var(--seg4);stroke-width:.08;stroke-dasharray:.4 .25}
.stroom .halo{fill:none;stroke:var(--gold);stroke-width:.25;transform-box:fill-box;transform-origin:center;pointer-events:none}
@media (prefers-reduced-motion:reduce){.stroom .obj,.ring .rfg{transition:none}.stroom .selring,.stroom .chair.pv .ch{animation:none}}
/* floating bits over the room */
.stglass{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stlegend{position:absolute;left:12px;bottom:12px;z-index:3;max-width:min(440px,calc(100% - 24px));background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(30,58,47,.12);padding:8px 10px;font-size:var(--fs-sm)}
.lgtoggle{display:none}
.lgsel{display:flex;align-items:center;gap:8px;color:var(--ink-2);margin-bottom:6px}
.lgsel select{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);border-radius:var(--pill);padding:2px 8px;background:var(--surface);color:var(--ink)}
.lgkeys{display:flex;flex-wrap:wrap;gap:2px 4px}
.lgk{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:var(--fs-xs);border:1px solid transparent;background:transparent;border-radius:var(--pill);padding:2px 8px 2px 4px;cursor:pointer;color:var(--ink)}
.lgk i{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
.lgk small{color:var(--ink-2);font-variant-numeric:tabular-nums}
.lgk:hover{background:var(--sel)}
.lgk.on{border-color:var(--ink);background:var(--surface)}
.lgk.more{color:var(--moss)}
.stpick{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:6px 8px;border-radius:14px;box-shadow:0 10px 26px rgba(30,58,47,.3);font-size:var(--fs-sm);line-height:1.25;animation:stdrop .3s cubic-bezier(.2,.9,.3,1.2);max-width:calc(100% - 24px)}
.stpick[hidden]{display:none}
.stpick small{opacity:.8}
.stpick button.sec{min-height:30px;padding:3px 10px;background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.stpick button.link{color:#F3D98B}
@keyframes stdrop{from{transform:translate(-50%,-12px);opacity:0}}
.stctl{position:absolute;right:12px;top:12px;z-index:3;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--pill);padding:3px;box-shadow:0 4px 14px rgba(30,58,47,.12)}
.stctl button{width:34px;height:34px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .15s}
.stctl button:hover:not(:disabled){background:var(--sel)}
.stctl button:disabled{opacity:.3;cursor:default}
.stctl svg,.stfab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stctl .sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.stfab{display:none}
.stfabmenu[hidden]{display:none}
.stfabmenu{display:grid;gap:5px;position:absolute;left:12px;top:10px;z-index:6;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(30,58,47,.28);padding:12px;animation:stmenu .2s cubic-bezier(.2,.9,.3,1.1);transform-origin:top left;max-height:calc(100% - 20px);overflow:auto}
@keyframes stmenu{from{transform:scale(.88);opacity:0}}
.fmh{margin:0 4px 2px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.fmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px}
.stfabmenu button{font:inherit;font-size:var(--fs-md);text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 12px;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.stfabmenu button:hover,.stfabmenu button:focus-visible{background:var(--sel);border-color:var(--moss)}
.sttip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 22px rgba(30,58,47,.18);padding:8px 10px;font-size:var(--fs-sm);min-width:160px;max-width:260px}
.sttip[hidden]{display:none}
.sttip ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.sttip li{display:flex;align-items:center;gap:6px}
.sttip li i{width:9px;height:9px;border-radius:50%;flex:none}
.sttip small{color:var(--ink-2)}
.sttip p{margin:2px 0 0}
/* the table card */
.stclose{margin-left:auto;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:20px;line-height:1;cursor:pointer;color:var(--ink-2)}
.stclose:hover{background:var(--sel)}
.stminiwrap{display:flex;justify-content:center;margin:8px 0 4px;padding:6px;background:#FCFBF7;border:1px solid var(--line);border-radius:14px}
.stroom.stmini{position:static;width:100%;max-width:230px;height:auto;max-height:210px;pointer-events:none}
.stcompbar{display:flex;height:8px;border-radius:var(--pill);overflow:hidden;gap:2px;margin:12px 0 6px}
.stcompkey{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-xs);color:var(--ink-2)}
.stcompkey span{display:inline-flex;align-items:center;gap:4px}
.stcompkey i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.stwho{list-style:none;margin:10px 0;padding:0;display:grid;gap:4px}
.stwho li{display:flex;align-items:center;gap:4px}
.stwho .stchip{flex:1;min-width:0}
.stx{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);font-size:18px;cursor:pointer;flex:none}
.stx:hover{background:var(--no-bg);color:var(--clay)}
.stdiet{font-size:var(--fs-sm);color:var(--ink-2)}
.stover{color:var(--clay)}
.sttiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 12px}
.sttiles div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center}
.sttiles b{display:block;font-family:var(--serif);font-size:var(--fs-xl);font-weight:600;font-variant-numeric:tabular-nums}
.sttiles span{font-size:10px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.sttables{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sttables button{width:100%;display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;align-items:center;gap:10px;font:inherit;font-size:var(--fs-sm);border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;cursor:pointer;color:var(--ink);text-align:left;transition:background .15s,border-color .15s}
.sttables button:hover{border-color:var(--moss);background:var(--sel)}
.sttables .ttl{font-weight:600}
.sttables .tbar{display:flex;gap:2px}
.sttables .tbar i{flex:1;height:8px;border-radius:2px;background:var(--none-bg);max-width:14px}
.sttables .tn{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sttables .full .tn{color:var(--moss);font-weight:600}
.sttables .over .tn{color:var(--clay);font-weight:600}
.sttips{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2)}
.sttips summary{cursor:pointer;color:var(--moss)}
.sttips ul{padding-left:18px;margin:6px 0 0;display:grid;gap:4px}
kbd{font:500 var(--fs-xs) var(--sans);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--surface);color:var(--ink)}
button.stshowbtn{background:var(--ink);color:#fff;border-color:var(--ink)}
/* presentation mode: the room tilted on a dark stage, a spotlight on the current table, a caption with who sits there */
.stshow{position:fixed;inset:0;z-index:90;background:radial-gradient(ellipse at 50% 30%,#2C3F37,#0F1814 80%);color:#fff;opacity:0;transition:opacity .35s;overflow:hidden;font-family:var(--sans)}
.stshow.in{opacity:1}.stshow.out{opacity:0}
.shstage{position:absolute;inset:0;perspective:1700px}
.shtilt{position:absolute;inset:8% 4% 6%;transform:rotateX(24deg);transform-origin:50% 62%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.stshow.ov .shtilt{transform:rotateX(14deg)}
.stroom.shroom{position:absolute;inset:0;width:100%;height:100%;cursor:default;touch-action:auto}
.stroom.shroom .obj{cursor:default;transition:opacity .9s}
.stshow:not(.ov) .shroom .obj:not(.spot){opacity:.42}
.shlight{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 52%,transparent 16%,rgba(8,14,11,.6) 72%);transition:opacity 1s}
.stshow.ov .shlight{opacity:.3}
@media (min-width:821px){.stshow:not(.ov) .shlight{background:radial-gradient(circle at 34% 52%,transparent 14%,rgba(8,14,11,.6) 62%)}}
.shhead{position:absolute;left:28px;top:22px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.shhead h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:0;letter-spacing:-.01em}
.shhead p{margin:2px 0 0;opacity:.75;font-size:var(--fs-md)}
.shcap{position:absolute;right:28px;top:50%;transform:translate(24px,-50%);opacity:0;transition:opacity .55s,transform .55s cubic-bezier(.2,.8,.2,1);width:min(330px,38vw);max-height:70vh;overflow:auto;background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:18px 20px}
.shcap.in{opacity:1;transform:translate(0,-50%)}
.shcap h3{font-family:var(--serif);font-weight:400;font-size:32px;margin:0}
.shcap .shn{margin:2px 0 12px;opacity:.75}
.shcap ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:var(--fs-lg)}
.shcap li{display:flex;align-items:center;gap:10px}
.shcap li i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.shcap small{opacity:.7}
.shnav{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 8px}
.shnav button{width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer}
.shnav button:hover,.shnav button:focus-visible{background:rgba(255,255,255,.14);outline:none}
.shdots{display:flex;gap:5px;flex-wrap:wrap;max-width:40vw;padding:0 6px}
.shdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s,transform .3s}
.shdots i.on{background:#F3D98B;transform:scale(1.4)}
.shnav .shx{font-size:26px}
@media (max-width:820px){
  .shtilt{inset:14% -6% 34%}
  .shhead{left:16px;top:14px}.shhead h2{font-size:22px}
  .shcap{left:12px;right:12px;top:auto;bottom:86px;width:auto;max-height:34vh;transform:translateY(24px)}
  .shcap.in{transform:none}
  .shcap h3{font-size:24px}
  .shdots{display:none}
}
/* who sits where (a full-screen list) */
.stphone[hidden]{display:none}
.stphone{position:fixed;inset:0;z-index:30;background:var(--paper);overflow:auto;padding:0 16px 40px}
.stphead{display:flex;align-items:center;position:sticky;top:0;background:var(--paper);padding:12px 0;z-index:1}
.stphead h2{font-family:var(--serif);font-weight:400;margin:0;font-size:var(--fs-xl)}
.stptable{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px 12px;margin-bottom:8px}
.stptable h3{margin:0;font-size:var(--fs-md)}
.stptable ul{margin:4px 0 0;padding:0;list-style:none}
.stptable li i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
#stDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(560px,calc(100vw - 32px));color:var(--ink)}
#stDlg::backdrop{background:var(--backdrop)}
.stplan{max-height:50vh;overflow:auto;display:grid;gap:8px}
.stplan section{border:1px solid var(--line);border-radius:var(--r);padding:6px 10px}
.stplan h3{margin:0;font-size:var(--fs-md)}.stplan p{margin:2px 0 0;font-size:var(--fs-sm)}
.sgform textarea{width:100%;font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;background:var(--surface);color:var(--ink)}
.sgform .actions{flex-wrap:wrap}
.sgsum{font-size:var(--fs-md);margin:10px 0 4px}
.sgmode{display:grid;gap:6px;margin:4px 0 10px}
.sgmode label{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;cursor:pointer;font-weight:400}
.sgmode label:has(input:checked){border-color:var(--moss);background:var(--moss-bg)}
.sgmode input{width:auto;margin:0}.sgmode .ro{grid-column:2;font-size:var(--fs-sm)}
.sgwho{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px 6px;margin:0 0 10px}
.sgwho legend,.sgbuild legend{font-size:var(--fs-sm);color:var(--ink-2);padding:0 4px}
.sgfilters{display:flex;flex-wrap:wrap;gap:6px}
.sgfilters .gfdd select{max-width:190px}
.sgcount{margin:8px 0 2px;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}.sgcount b{font-size:var(--fs-md)}
.sgways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;margin-top:4px}
.sgway{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface)}
.sgway h3{margin:0;font-size:var(--fs-md)}.sgway p,.sgway label{margin:0;font-size:var(--fs-sm);font-weight:400}
.sgway select{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;background:var(--surface);color:var(--ink)}
.sgway button{align-self:flex-start;margin-top:auto}
.sgdone{border:1px solid var(--moss);background:var(--moss-bg);border-radius:var(--r);padding:10px 12px;margin-top:8px}
.sgdone p{margin:4px 0}.sgdone details{margin:6px 0;font-size:var(--fs-sm)}.sgdone summary{cursor:pointer;color:var(--moss)}
.sgplan{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-top:8px;background:var(--surface)}
.sgplan>h3{margin:0 0 4px;font-size:var(--fs-md)}.sgplan p{margin:4px 0}.sgplan .stplan{margin:8px 0;max-height:40vh}
.sgplan details{margin:6px 0;font-size:var(--fs-sm)}.sgplan summary{cursor:pointer;color:var(--moss)}.sgplan ul{margin:4px 0 0;padding-left:18px}
@media (max-width:820px){.sgways{grid-template-columns:1fr}}
.sgbuild{display:flex;flex-wrap:wrap;gap:8px 14px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px 10px;margin:0 0 10px}
.sgnum{display:grid;gap:2px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:400}
.sgnum input{width:90px}
.sgform .qnote ul{margin:4px 0 0;padding-left:18px}
#stDlg:has(.sgform),#stDlg:has(.arform){width:min(720px,calc(100vw - 32px));max-height:90vh}
.arsave{display:flex;gap:8px;margin:8px 0}
.arsave input{flex:1;min-width:0;font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;background:var(--surface);color:var(--ink)}
.arlist{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:50vh;overflow:auto}
.arlist li{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.arlist li > div{display:grid;gap:1px;min-width:0}.arlist .ro{font-size:var(--fs-sm)}
.aracts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Restore's question takes the item's full width, its buttons under it. */
.arlist li:has(.arq){flex-wrap:wrap}.arlist li:has(.arq) .aracts{flex-basis:100%;justify-content:flex-start}.arq{flex-basis:100%}
.artag{font-size:var(--fs-xs);padding:0 6px;border-radius:var(--pill);background:var(--none-bg);color:var(--ink-2);font-weight:400}
/* ---- Ask the planner (ask.js) ---- */
.views a,.askbtn{white-space:nowrap}
.askbtn{font:inherit;font-weight:500;margin-left:6px;padding:5px 12px;border-radius:var(--pill);border:1px solid var(--moss);background:var(--moss-bg);color:var(--moss);cursor:pointer}
.askbtn:hover{background:var(--surface)}
#askDlg{border:1px solid var(--line);border-radius:var(--r);padding:0;width:min(680px,calc(100vw - 32px));height:min(720px,calc(100vh - 64px));color:var(--ink);background:var(--paper)}
#askDlg[open]{display:flex;flex-direction:column}
#askDlg::backdrop{background:var(--backdrop)}
.askhead{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.askhead h2{flex:1;margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-xl)}
.asklog{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.askq{align-self:flex-end;max-width:85%;background:var(--ink);color:#fff;padding:7px 12px;border-radius:12px 12px 2px 12px;white-space:pre-wrap}
.aska{align-self:flex-start;max-width:92%;background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:12px 12px 12px 2px}
.aska p{margin:4px 0}.aska ul{margin:4px 0;padding-left:20px}.aska b{font-weight:600}
.askshow{margin-top:6px;text-align:left}
.asklinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.asklinks a{font-size:var(--fs-sm);padding:2px 10px;border:1px solid var(--line);border-radius:var(--pill);text-decoration:none}
.asklinks a:hover{background:var(--sel)}
.askex{display:grid;gap:2px;justify-items:start}.askex .link{text-align:left;padding:4px 0}
.askform{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.askform textarea{flex:1;min-width:0;font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:6px 8px;resize:none;background:var(--surface);color:var(--ink)}
/* ---- Budget strip (under the header, every view) and Pairings (budget.js) ---- */
.budget{display:flex;align-items:baseline;gap:6px 22px;flex-wrap:wrap;width:100%;padding:7px 20px;border:0;border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
.budget:hover{background:var(--sel)}
.budget .bslot{white-space:nowrap}
.budget .bl{color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs);margin-right:2px}
.budget b{font-weight:500}
.budget .bn{font-family:var(--serif);font-size:var(--fs-lg);color:var(--gold-ink)}
.budget small{color:var(--ink-2);margin-left:3px}
.budget .bwhy{color:var(--ink-2);font-size:var(--fs-xs);border:1px solid var(--line);border-radius:var(--pill);padding:0 6px;margin-right:4px}
.budget .bstar{color:var(--gold);margin-right:3px}
.budget .bnone{color:var(--ink-2);font-style:italic}
.budget .bwarn{color:var(--clay);font-size:var(--fs-xs)}
.budget .btot .bn{font-size:var(--fs-xl);color:var(--ink)}
.budget .btot.part .bn{color:var(--ink-2)}
.budget .bplus{color:var(--clay);font-weight:500}
.budget .bopen{margin-left:auto;color:var(--moss);font-weight:500}
.pinstar{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);background:var(--surface);color:var(--ink);border-radius:var(--pill);padding:3px 10px;cursor:pointer;white-space:nowrap}
.detail > .pinstar{margin:0 0 8px}
.pinstar[aria-pressed="true"]{border-color:var(--gold);background:#F7F0DC;color:var(--gold-ink)}
.pinstar.mini{border:0;background:none;padding:0 4px;font-size:var(--fs-lg);color:var(--field);line-height:1}
.pinstar.mini[aria-pressed="true"]{color:var(--gold);background:none}
#pairDlg{border:1px solid var(--line);border-radius:var(--r);padding:0;width:min(1200px,calc(100vw - 32px));max-height:88vh;color:var(--ink);flex-direction:column}
#pairDlg[open]{display:flex}
#pairDlg::backdrop{background:var(--backdrop)}
#pairBody{display:flex;flex-direction:column;min-height:0;flex:1}
#pairDlg h2 .sub{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink-2);margin-left:6px}
#pairDlg .pnote{margin:10px 20px}
#pairTable{border-collapse:separate;border-spacing:0;min-width:100%;font-size:var(--fs-md)}
#pairTable th,#pairTable td{padding:8px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:150px}
#pairTable thead th{position:sticky;top:0;background:var(--surface);z-index:1;font-weight:600}
#pairTable th.pv{position:sticky;left:0;background:var(--surface);min-width:220px;z-index:1}
#pairTable thead th.pv{z-index:2}
#pairTable .psort{font:inherit;border:0;background:none;color:inherit;padding:0;cursor:pointer;text-align:left}
#pairTable .psort:hover{color:var(--moss)}
#pairTable .sub{display:block;font-size:var(--fs-xs);color:var(--ink-2);font-weight:400}
#pairTable .pt{font-family:var(--serif);font-size:var(--fs-lg);color:var(--gold-ink)}
#pairTable .pvn{color:var(--ink);font-weight:500;text-decoration:none}
#pairTable .pvn:hover{text-decoration:underline}
#pairTable th.pc .pinstar.mini{padding-left:0}
#pairTable tr.cant td,#pairTable tr.cant th{background:var(--none-bg);color:var(--field)}
#pairTable tr.cant .pt,#pairTable tr.cant .pvn{color:var(--field)}
#pairTable tr.cant .pvn{text-decoration:line-through}

@media (max-width:820px){
  #askDlg{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;border-radius:0;border:0}
  .askbtn{padding-left:10px;padding-right:10px}
  .budget{padding:6px 16px;gap:2px 14px}
  .budget .bslot:not(.btot) b,.budget .bwhy{display:none}
  html,body{height:auto}
  body{display:block}
  header{padding:10px 16px;gap:8px 12px}
  header h1{font-size:var(--fs-xl)}
  header .spacer{display:none}
  .acct{margin-left:auto}
  .guests{order:3;width:100%}
  .guests input,.guests select:not([hidden]) ~ input{flex:1;width:auto;min-width:0}
  main{display:flex;flex-direction:column}
  #dragbar{display:none}
  .mapwrap{order:1;height:40vh;height:40svh;min-height:220px}
  #map{min-height:0}
  #rail{order:2;border-right:0;border-top:1px solid var(--line)}
  .controls{position:sticky;top:0;z-index:3;box-shadow:0 2px 6px rgba(30,58,47,.08)}
  #list{overflow:visible;padding-bottom:80px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .chips button{flex:none}
  /* one column for labels + fields, and 16px inputs so iOS doesn't zoom on focus */
  .detail dl,.detail dl.ed{grid-template-columns:1fr;gap:2px}
  .detail dl dt{margin-top:8px}
  .rv-price dl{grid-template-columns:1fr auto;gap:3px 12px}
  .rv-price dl dt{margin-top:0}
  .keyfacts{grid-template-columns:1fr 1fr}
  #vSearch,#login input,#addForm input,#addForm select,.detail .ed input,.detail .ed select,.detail .ed textarea,.vpanel textarea,.qvenue input:not([type=radio]),.qvenue select{font-size:var(--fs-lg);padding:9px 10px}
  .item > button{padding:13px 16px 13px 10px}
  .votes .vrow{grid-template-columns:56px auto}
  .votes .vcom{grid-column:1/-1;padding-left:66px}
  button.primary,button.sec,.dbtn,.delbtn{min-height:40px}
  #addDlg,#qDlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--r) var(--r) 0 0;max-height:92svh;overflow:auto}
  #addForm{width:100%}
  #compare{position:fixed;inset:0;z-index:30}
  #cmpbar{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);justify-content:space-between}
  .menupanel{position:fixed;left:12px;right:12px;top:56px}
  /* Guests on a phone: a searchable list; the card opens over it */
  .gview,.gview.carded{display:block}
  .gmain{padding:12px 16px 40px;overflow:visible}
  .gdash{grid-template-columns:1fr;display:none}
  .gview.dashopen .gdash{display:grid}
  .gdashbtn{display:inline-block}
  .ghead{flex-basis:100%}
  #gSearch{flex:1 1 100%;min-width:0;font-size:var(--fs-lg)}
  .gfbar{top:0;margin:8px -16px;padding:8px 16px}
  .gfdd select,details.gfdd .gfv{max-width:44vw}
  .gtable .c-side,.gtable .c-class,.gtable .c-group,.gtable .c-priority,.gtable .c-expected,.gtable .c-rsvp,.gtable .c-seating_table_ref,.gtable .c-hotel_ref,.gtable .gck{display:none}
  .gtable .c-party{min-width:0}
  .gcard{position:fixed;inset:0;z-index:25;background:var(--paper);border-left:0}
  .gcard .ed input,.gcard .ed select,.gcard .ed textarea{font-size:var(--fs-lg)}
  .gcard dl.ed{grid-template-columns:1fr}
  .views{margin-left:0}
  /* Seating on a phone: the room fills the screen under the header; the list and the table card are a bottom sheet */
  body.st-on{overflow:hidden;overscroll-behavior:none}
  body.st-on .budget{display:none}
  body.st-on #toast{bottom:auto;top:calc(var(--st-top,0px) + 64px)}
  .stsheet .sthead{position:sticky;top:-2px;z-index:2;background:var(--surface);padding:2px 0 6px}
  .stsheet .stsearch{position:sticky;top:40px;z-index:2;background:var(--surface);padding-bottom:6px;margin-top:-6px}
  .stview{position:fixed;left:0;right:0;top:var(--st-top,0);bottom:0;z-index:5;background:var(--map-bg)}
  .stwrap{display:block;position:absolute;inset:0}
  .stcanvas{position:absolute;inset:0}
  .sttools{display:none}
  .stroomwrap{position:absolute;inset:0}
  .stsummary{position:absolute;top:8px;left:8px;right:8px;z-index:3;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px 10px;gap:14px;box-shadow:0 4px 14px rgba(30,58,47,.12)}
  .stsummary::-webkit-scrollbar{display:none}
  .stsummary > *{flex:none}
  .stsummary select{font-size:16px;max-width:170px}
  .ring{width:32px;height:32px}
  .stctl{top:auto;right:10px;bottom:calc(var(--sheet-vis,168px) + 12px);flex-direction:column;border-radius:22px;transition:bottom .38s cubic-bezier(.2,.85,.25,1)}
  .stctl #stZoomIn,.stctl #stZoomOut,.stctl .sep{display:none}
  .stctl button{width:42px;height:42px}
  .stlegend{left:10px;bottom:calc(var(--sheet-vis,168px) + 12px);padding:3px;max-width:calc(100% - 82px);transition:bottom .38s cubic-bezier(.2,.85,.25,1)}
  .stlegend:not(.open) .lgbody{display:none}
  .stlegend.open .lgbody{padding:4px 6px 6px;max-height:40vh;overflow:auto}
  .lgtoggle{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:var(--fs-sm);border:0;background:transparent;padding:7px 9px;color:var(--ink);min-height:36px}
  .lgdots{display:inline-flex}
  .lgdots i{width:13px;height:13px;border-radius:50%;margin-left:-4px;border:2px solid #fff}
  .lgdots i:first-child{margin-left:0}
  .lgsel select{font-size:16px}
  .lgk{font-size:var(--fs-sm);padding:5px 10px 5px 6px}
  .stfab{display:grid;place-items:center;position:absolute;right:10px;top:62px;z-index:4;width:50px;height:50px;border-radius:50%;border:0;background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(30,58,47,.35);transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
  .stfab[aria-expanded=true]{transform:rotate(45deg)}
  .stfab svg{width:22px;height:22px}
  .stfabmenu{left:auto;right:10px;top:120px;width:min(310px,calc(100% - 20px));border-radius:18px;transform-origin:top right;max-height:calc(100% - 140px)}
  .stfabmenu button{min-height:46px}
  .stpick{top:62px;left:10px;right:70px;transform:none;max-width:none;animation:stdrop2 .3s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes stdrop2{from{transform:translateY(-12px);opacity:0}}
  .sttip{display:none !important}
  .stsheet{display:flex;flex-direction:column;position:absolute;left:0;right:0;bottom:0;height:92%;z-index:5;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(30,58,47,.18);transition:transform .38s cubic-bezier(.2,.85,.25,1);will-change:transform;padding-bottom:env(safe-area-inset-bottom);transform:translateY(calc(100% - 168px))}
  .stsheet.dragging,.stsheet.instant{transition:none}
  .stgrip{display:flex;justify-content:center;padding:9px 0 5px;touch-action:none;cursor:grab;flex:none}
  .stgrip span{width:42px;height:5px;border-radius:3px;background:var(--line)}
  .stsheet .stpanel,.stsheet .stcard{grid-area:auto;position:static;inset:auto;z-index:auto;border:0;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 16px 28px;background:var(--surface)}
  .stsheet .sthead,.stsheet .gcardhead{touch-action:none}
  .stsheet:not(.carded) .stcard{display:none}
  .stsheet.carded .stpanel{display:none}
  .stsearch input,.stpanel select{font-size:16px}
  .stchip{font-size:var(--fs-md);padding:4px 8px 4px 4px;min-height:38px}
  .stchip .stav{width:28px;height:28px;font-size:11px}
  .stchip:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .stchip.picked:hover{border-color:var(--moss)}
  .stx{width:40px;height:40px}
  .sttables button{padding:10px 12px}
  .stroom.stmini{max-width:190px}
}
/* ---- Music view (music.js): the song pool on the left, the board of moment cards, a slide-over editor ---- */
main.muview{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top top" "msg msg" "pool board"}
.mutop{grid-area:top;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.muview > .msg{grid-area:msg;margin:12px 20px 0}
.mupool{grid-area:pool;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--surface);transition:background .15s}
.mphead{display:flex;align-items:center;gap:8px;padding:12px 14px 6px}
.mphead h2{margin:0;font-family:var(--serif);font-weight:600;font-size:var(--fs-lg)}
.mphead input{flex:1;min-width:0;font:inherit;border:1px solid var(--field);border-radius:var(--pill);padding:5px 12px;background:var(--surface);color:var(--ink)}
.mptabs{display:flex;flex-wrap:wrap;gap:4px;padding:2px 14px 6px}
.mptabs button{font:inherit;font-size:var(--fs-xs);font-weight:500;border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:3px 9px;border-radius:var(--pill);cursor:pointer}
.mptabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.mptabs .n{opacity:.75;font-weight:400}
.mphint{padding:0 14px 6px}
.mpsync{display:flex;align-items:center;gap:8px;margin:2px 10px 8px;padding:8px 10px;border-radius:var(--r);background:var(--moss-bg);color:var(--moss);font-size:var(--fs-sm)}
.mpsync span{flex:1}.mpsync button.sec{min-height:28px;padding:3px 10px;font-size:var(--fs-sm)}
.sptag{background:var(--moss-bg);color:var(--moss)}.mrow .sptag{margin-left:6px;font-size:9px;padding:0 5px}
.sptable .spacts{white-space:nowrap;text-align:right}.sptable .spacts button{min-height:28px;padding:3px 10px;font-size:var(--fs-sm)}
.spsync{display:inline-flex;align-items:center;gap:2px;margin-right:6px;color:var(--ink)}.spsync button.link{padding:0 4px;min-height:0}
.mpool{flex:1;overflow:auto;margin:0;padding:0 8px 8px}
.mpempty{list-style:none;color:var(--ink-2);font-size:var(--fs-sm);padding:16px 8px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);margin:4px}
.mpfoot{display:flex;gap:4px;padding:6px 10px;border-top:1px solid var(--line)}
.mpfoot button.link{font-size:var(--fs-sm);padding:4px 6px;min-height:0}
.mupool.mdropon{background:var(--moss-bg)}
.muboard{grid-area:board;overflow:auto;min-height:0;padding:14px 20px 120px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-content:start;align-items:start}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-width:0;transition:border-color .15s,box-shadow .15s}
.mcard.selected{border-color:var(--moss);box-shadow:inset 0 3px 0 var(--moss)}
.mcard.mdropon{border-color:var(--moss);box-shadow:0 0 0 2px var(--moss-bg),var(--shadow)}
.mcard.mclist{background:var(--paper);border-style:dashed}
.mchead{padding:9px 12px 6px;border-bottom:1px solid var(--line)}
.mcard.empty .mchead{border-bottom:0}
.mcname{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:8px;cursor:pointer;width:100%}
.mcname:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.mcname .mcn{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);line-height:1.2}
.mcname:hover .mcn{text-decoration:underline;text-decoration-color:var(--line)}
.mcname .tag{margin-left:auto}
.mtime{font-variant-numeric:tabular-nums;font-weight:600;color:var(--gold-ink);font-size:var(--fs-sm);white-space:nowrap}
.mcrun{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--fs-xs);color:var(--ink-2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.mcrun .mbar{flex:1;min-width:50px;height:5px;margin:0;border-radius:3px;background:var(--none-bg);overflow:hidden;display:block}
.mcrun .mbar b{display:block;height:100%;background:var(--moss);border-radius:3px}
.mcrun.over .mbar b{background:var(--clay)}.mcrun.over .mdiff{color:var(--clay);font-weight:600}
.mcrun.under .mbar b{background:var(--gold)}.mcrun.on .mdiff{color:var(--yes);font-weight:600}
.mmeta{margin:4px 0 0;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.mtag{background:var(--moss-bg);color:var(--moss);border-radius:var(--pill);padding:0 7px;font-weight:500}
.mcue b{font-weight:700;color:var(--ink);font-size:10px;letter-spacing:.04em}
.mlist{list-style:none;margin:0;padding:2px 0}
.mcard .mlist:empty{padding:0}
.mrow{display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;align-items:center;gap:0 6px;padding:3px 10px 3px 4px;border-left:3px solid transparent;cursor:grab;user-select:none;-webkit-user-select:none}
.mrow + .mrow{border-top:1px solid var(--line)}
.mrow:hover{background:var(--hover)}
.mrow.selected{background:var(--sel)}
.mrow.st-Locked{border-left-color:var(--yes)}.mrow.st-Shortlist{border-left-color:var(--gold)}
.mrow.flash{animation:vflash 1.4s ease-out}
.mrow.rej{cursor:default;opacity:.8}
.mgrip{all:unset;box-sizing:border-box;width:18px;height:28px;display:grid;place-items:center;cursor:grab;color:var(--line);touch-action:none;border-radius:4px}
.mrow:hover .mgrip,.mgrip:focus-visible{color:var(--ink-2)}
.mgrip svg{width:8px;height:14px;fill:currentColor}
.mgrip:focus-visible{outline:2px solid var(--moss)}
.mopen{all:unset;box-sizing:border-box;min-width:0;cursor:pointer;padding:3px 0;display:grid;gap:0}
.mopen:focus-visible{outline:2px solid var(--moss)}
.mt{font-weight:500;font-size:var(--fs-sm);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msub{font-size:var(--fs-xs);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.slot .mt{font-style:italic;color:var(--ink-2);font-weight:400}
.mrow.rej .mt{text-decoration:line-through;text-decoration-color:rgba(143,59,46,.5)}
.mexp{display:inline-block;font-size:9px;font-weight:700;line-height:13px;padding:0 3px;border-radius:3px;background:var(--ink-2);color:#fff;margin-left:5px;vertical-align:1px;font-style:normal}
.mflag{margin-left:5px;font-size:11px}.mflag.must{color:var(--gold)}.mflag.dnp{color:var(--clay)}
.mrow .dqtag{margin-left:6px;font-size:9px;padding:0 5px}
.mrow .vdots{margin-left:5px}.mrow .vdot{width:14px;height:14px;font-size:8px;line-height:14px}
.mlen{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.mplay{font:inherit;font-size:9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--moss);cursor:pointer;padding:0;opacity:0;transition:opacity .1s}
.mrow:hover .mplay,.mplay:focus-visible{opacity:1}
.mplay:hover{background:var(--moss);color:#fff;border-color:var(--moss)}
.mplay.none{border:0;background:none;cursor:default;display:inline-block}
.mvote{grid-column:2/-1;display:flex;gap:3px;padding:0 0 4px}
.mvote button{font:inherit;font-size:10px;font-weight:500;padding:1px 8px;border:1px solid var(--field);border-radius:var(--pill);background:var(--surface);color:var(--ink);cursor:pointer}
.mvote button[aria-pressed="true"][data-vote="Yes"]{background:var(--yes);border-color:var(--yes);color:#fff}
.mvote button[aria-pressed="true"][data-vote="Maybe"]{background:var(--maybe);border-color:var(--maybe);color:#fff}
.mvote button[aria-pressed="true"][data-vote="No"]{background:var(--no);border-color:var(--no);color:#fff}
.mcadd{display:flex;align-items:center;gap:2px;padding:4px 6px 6px 10px;border-top:1px solid var(--line);margin-top:auto}
.mcard.empty .mcadd{border-top:0}
.mcadd input{flex:1;min-width:0;font:inherit;font-size:var(--fs-sm);border:1px solid transparent;border-radius:var(--r);padding:4px 6px;background:transparent;color:var(--ink)}
.mcadd input:hover{border-color:var(--line)}
.mcadd input:focus{border-color:var(--field);background:var(--surface);outline:none}
.mcadd input::placeholder{color:var(--ink-2);opacity:.8}
.micon{font:inherit;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;padding:0}
.micon:hover{background:var(--sel);color:var(--moss)}
.micon.mslot{width:auto;border-radius:var(--pill);padding:0 8px;font-size:var(--fs-xs);white-space:nowrap}
.micon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.mrejn{all:unset;cursor:pointer;font-size:var(--fs-xs);color:var(--ink-2);padding:0 12px 6px}
.mrejn:hover{color:var(--clay);text-decoration:underline}
button.link.msend{align-self:flex-start;font-size:var(--fs-sm);padding:0 12px 8px;min-height:0}
button.link.msend:disabled{color:var(--ink-2);cursor:default;text-decoration:none}
.mghost{position:fixed;z-index:60;pointer-events:none;box-shadow:var(--shadow);border-radius:var(--r);border:1px solid var(--moss);background:var(--surface);margin:0;list-style:none;transform:rotate(-1.5deg);opacity:.95}
.mdragging{opacity:.3}
body.mudragging,body.mudragging *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}
/* While a song is dragged the row moves between lists: no scroll anchoring, so the page never jumps under the pointer. */
html:has(body.mudragging),body.mudragging,body.mudragging *{overflow-anchor:none}
/* the slide-over editor: floats over the board, takes no room when closed */
.mudrawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);z-index:35;background:var(--paper);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(30,58,47,.14);overflow:auto;padding:14px 18px 30px;transform:translateX(100%);transition:transform .2s ease-out}
.mudrawer.in{transform:none}
@media (prefers-reduced-motion:reduce){.mudrawer{transition:none}}
.mudrawer .membed{margin:8px 0}
.mwhy{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.mwhy select{width:auto !important;flex:1}
.mchecks{display:flex;gap:18px;margin:6px 0}
.gform .mchecks label{display:flex;gap:6px;align-items:center;color:var(--ink)}
.gform .mchecks input{width:auto}
.muview .gcard input[type=checkbox]{width:18px;height:18px;accent-color:var(--moss)}
.muview .gcard .votes .vrow{grid-template-columns:64px auto}
.mvopts{margin-top:8px}.mvopts button{min-height:38px}
#muDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(600px,calc(100vw - 32px));color:var(--ink)}
#muDlg::backdrop{background:var(--backdrop)}
@media (hover:none){.mgrip{color:var(--ink-2);width:30px;height:38px}.mrow{grid-template-columns:30px minmax(0,1fr) auto auto;cursor:default}.mplay{opacity:1;width:30px;height:30px;font-size:11px}}
@media (max-width:820px){
  main.muview{display:block}
  .mutop{padding:10px 16px}
  .mupool{border-right:0;border-bottom:1px solid var(--line);max-height:46vh}
  .muboard{grid-template-columns:1fr;padding:12px 16px 140px;overflow:visible}
  .mutop .gacts{flex-wrap:wrap}
  .views{flex-wrap:nowrap;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;scroll-snap-type:x proximity}
  .views::-webkit-scrollbar{display:none}.views a,.askbtn{padding:5px 10px;flex:0 0 auto;scroll-snap-align:start}.askbtn{margin-left:2px}
}
@media print{
  #printArea table.msongs td:last-child,#printArea table.mtl td:last-child{white-space:normal;text-align:left}
  #printArea section.ptable{break-inside:auto}
  #printArea .ptable h2{margin-top:10pt}
  #printArea .msongs th,#printArea .mtl th{text-align:left;font-size:9pt;color:#555;border-bottom:1px solid #999;padding:2pt 6pt}
}
/* ---- Spotify (spotify.js): import dialog and the docked background player ---- */
.sprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sprow input{flex:1;min-width:0}
.sprow select{width:auto !important;flex:1}
.sprow label{white-space:nowrap}
.spchk{display:flex;gap:6px;align-items:center;color:var(--ink) !important}.spchk input{width:auto !important}
.splists{list-style:none;margin:4px 0 0;padding:0;max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.splists li{border-top:1px solid var(--line)}.splists li:first-child{border-top:0}
.splists .hint{padding:10px}
.splist{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;gap:12px;padding:9px 12px;cursor:pointer}
.splist:hover,.splist:focus-visible{background:var(--sel)}
.splist:disabled{cursor:default;color:var(--ink-2)}.splist:disabled:hover{background:none}
.spsearch .sptable .mplay{opacity:1}
.spscroll{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:6px}
.sptable{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
.sptable td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:middle}
.sptable tr:first-child td{border-top:0}
.sptable td:first-child{width:28px}.sptable td:first-child input{width:18px;height:18px;accent-color:var(--moss)}
.sptable td:nth-child(3){white-space:nowrap;font-variant-numeric:tabular-nums}
.sptable select{width:100%;max-width:190px;font:inherit;font-size:var(--fs-sm);padding:4px 6px}
.sptable tr.dup{color:var(--ink-2)}
#muDlg:has(.spick){width:min(760px,calc(100vw - 32px))}
.spdock{position:fixed;right:16px;bottom:16px;z-index:40;width:360px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 8px 8px}
.spbar{display:flex;align-items:center;gap:4px;font-size:var(--fs-sm)}
.spbar .spname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.spbar button.link{padding:2px 6px;min-height:0;font-size:var(--fs-sm)}
.spbar a.link,.membedopen{color:var(--moss);font-weight:600;text-decoration:none;padding:2px 6px;font-size:var(--fs-sm);white-space:nowrap}.spbar a.link:hover,.membedopen:hover{text-decoration:underline}
.membedopen{display:inline-block;margin-top:4px;padding-left:0}
.spbar a.link[hidden]{display:none}
.spframe{margin-top:4px}.spframe iframe{display:block}
.spdock.min{width:auto;max-width:300px;padding:4px 8px}
.spdock.min .spframe{position:absolute;left:-10000px;top:0;width:300px}   /* out of sight, still playing */
@media (max-width:820px){.spdock{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto}.spdock.min{left:auto}}
@media print{.spdock{display:none !important}}
@media print{
  #printArea .msongs th,#printArea .mtl th{text-align:left;font-size:9pt;color:#555;border-bottom:1px solid #999;padding:2pt 6pt}
  #printArea table.msongs td:last-child,#printArea table.mtl td:last-child{white-space:normal;text-align:left}
  #printArea section.ptable{break-inside:auto}
  #printArea .ptable h2{margin-top:10pt}
}

@media print{
  @page{size:letter portrait;margin:.5in}
  body{display:block;background:#fff;height:auto}
  body > *:not(#printArea){display:none !important}
  #printArea{display:block;color:#000;font-family:var(--sans);font-size:11pt}
  #printArea h1{font-family:var(--serif);font-weight:400;font-size:20pt;margin:0 0 4pt}
  #printArea .pmeta{color:#444;margin:0 0 14pt}
  #printArea .pcard{break-inside:avoid;border:1px solid #bbb;border-radius:6pt;padding:10pt 12pt;margin:0 0 10pt}
  #printArea .pcard h2{font-family:var(--serif);font-weight:600;font-size:14pt;margin:0}
  #printArea .paddr{color:#444;margin:2pt 0 6pt}
  #printArea .pbig{font-family:var(--serif);font-size:16pt;margin:0 0 6pt}
  #printArea dl{display:grid;grid-template-columns:1.3in 1fr;gap:2pt 10pt;margin:0}
  #printArea dt{color:#555}
  #printArea dd{margin:0}
  #printArea .pbreak{break-before:page}
  #printArea .proom svg{position:static;width:100%;height:auto;max-height:8.5in;display:block}
  #printArea .ptable{break-inside:avoid;border-bottom:1px solid #ccc;padding:4pt 0}
  #printArea .ptable h2{font-family:var(--serif);font-size:13pt;margin:0}
  #printArea .ptable ul{margin:2pt 0 0;padding-left:14pt}
  #printArea .pparty{border-collapse:collapse;width:100%;font-size:11pt}
  #printArea .pparty td{padding:2pt 6pt;border-bottom:1px solid #ddd}
  #printArea .pparty td:last-child{white-space:nowrap;text-align:right}
}
.rv-price .barwhy{color:var(--ink-2);font-size:var(--fs-sm)}

/* ---------- Tasks (HANDOFF-9 B) ---------- */
main.tkview{display:block;padding-bottom:60px}
.tkmode{display:inline-flex;border:1px solid var(--line);border-radius:var(--pill);overflow:hidden}
.tkmode button{font:inherit;font-size:var(--fs-sm);border:0;background:var(--surface);color:var(--ink-2);padding:6px 12px;cursor:pointer}
.tkmode button[aria-pressed=true]{background:var(--ink);color:#fff}
.tksum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:4px 20px 10px}
.tkstat{display:grid;justify-items:start;font:inherit;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:6px 12px;cursor:pointer;color:var(--ink-2);font-size:var(--fs-sm);min-width:84px}
.tkstat b{font-size:var(--fs-xl);color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.tkstat.late b{color:var(--clay)}.tkstat:hover{background:var(--hover)}
.tkwed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-left:auto;font-size:var(--fs-sm);color:var(--ink-2)}
.tkwed input{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;background:var(--surface);color:var(--ink);margin-left:4px}
.tkfilters{display:flex;flex-wrap:wrap;align-items:end;gap:8px 10px;padding:0 20px 10px;border-bottom:1px solid var(--line)}
#tkSearch{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:6px 9px;background:var(--surface);color:var(--ink);min-width:180px;flex:0 1 240px}
.tkbody{padding:6px 20px}
.tkgroup{margin:14px 0 18px}
.tkgroup h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:var(--fs-lg)}
.tkprog{display:inline-block;width:90px;height:6px;border-radius:3px;background:var(--none-bg);overflow:hidden}.tkprog i{display:block;height:100%;background:var(--moss)}
.tkgroup h3 .ro{font-size:var(--fs-sm);font-weight:400;font-variant-numeric:tabular-nums}
.tktable{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.tktable th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--line)}
.tktable td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tktable tr.sel td{background:var(--sel)}.tktable tbody tr:hover td{background:var(--hover)}.tktable tr.sel:hover td{background:var(--sel)}
.tktable .tkst{width:128px}.tktable .tkown{width:110px}.tktable .tkdu{width:96px}.tktable .tkpri{width:100px}
.tkin{font:inherit;font-size:var(--fs-sm);border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--ink);padding:3px 4px;max-width:100%;cursor:pointer}
.tkin:hover,.tkin:focus{border-color:var(--field);background:var(--surface)}
.tkst .tkin{font-weight:600}.tkin.empty{color:var(--field)}
tr.st-Done .tkst .tkin{color:var(--yes)}tr.st-Waiting .tkst .tkin{color:var(--maybe)}tr.st-Inprogress .tkst .tkin{color:var(--moss)}tr.st-Dropped .tkst .tkin{color:var(--field)}
tr.st-Done .tkopen,tr.st-Dropped .tkopen{color:var(--ink-2);text-decoration:line-through}
.tkopen{all:unset;cursor:pointer;color:var(--ink);font-weight:500}.tkopen:hover{text-decoration:underline}.tkopen:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
tr.sub .tkopen{padding-left:14px;font-weight:400}
.tkwait{display:inline-block;margin-left:6px;font-size:var(--fs-xs);color:var(--maybe);background:var(--maybe-bg);border-radius:var(--pill);padding:0 7px}
.tklink{display:inline-block;margin-left:6px;font-size:var(--fs-xs);color:var(--moss);background:var(--moss-bg);border-radius:var(--pill);padding:0 7px;text-decoration:none}
/* Tasks complete themselves: "auto" beside a task Done automatically; the card's note under its status */
.tkauto{display:inline-block;margin-left:6px;font-size:var(--fs-xs);color:var(--ink-2);background:var(--none-bg);border-radius:var(--pill);padding:0 7px}
.tkautonote{display:block;margin-top:2px}
/* The un-booking dialog (app.js): one line per reopened task, each with its two buttons */
#reopenDlg{max-width:min(480px,calc(100vw - 32px))}
.rolist{list-style:none;margin:0;padding:0}.rolist li + li{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.rolist .rotext{margin:0 0 8px}
.tkdue{font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}.tkdue.soon{color:var(--maybe);font-weight:600}.tkdue.late{color:var(--clay);font-weight:600}.tkdue.derived{font-style:italic}
.tkdone{font-size:var(--fs-sm);margin-top:4px}
.tkquick input{font:inherit;font-size:var(--fs-sm);width:100%;box-sizing:border-box;border:1px dashed var(--line);border-radius:var(--r);background:transparent;padding:6px 8px;margin-top:6px;color:var(--ink)}
.tkquick input:focus{border-style:solid;border-color:var(--moss);background:var(--surface);outline:none}
.tkboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;margin-top:10px}
.tkcol{background:var(--none-bg);border-radius:var(--r);padding:8px;min-height:120px}
.tkcol.over{outline:2px dashed var(--moss);outline-offset:-2px}
.tkcol h3{margin:2px 4px 8px;font-size:var(--fs-md)}
.tkcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:8px;cursor:grab;display:grid;gap:4px}
.tkcard.sel{border-color:var(--moss);box-shadow:inset 0 0 0 1px var(--moss)}.tkcard.drag{opacity:.5}
.tkcard b{font-weight:500}.tkmeta{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:var(--fs-xs)}.tkcard .tklink{margin-left:0;justify-self:start}
.tkchip{font-size:var(--fs-xs);border-radius:var(--pill);padding:0 7px}.tkchip.pri[data-v=High]{background:var(--no-bg);color:var(--no)}.tkchip.pri[data-v=Low]{background:var(--none-bg);color:var(--ink-2)}
.tkempty{margin:4px;font-size:var(--fs-sm)}
#tkCard h2{font-size:var(--fs-lg);margin:0}
.tknotes{white-space:pre-wrap;font:inherit;font-size:var(--fs-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;margin:0 0 6px;max-height:240px;overflow:auto}
.tknoteadd{display:grid;gap:6px;justify-items:end}.tknoteadd textarea{font:inherit;width:100%;box-sizing:border-box;border:1px solid var(--field);border-radius:var(--r);padding:6px 8px}
.tkfiles,.tksubs{margin:0 0 6px;padding-left:18px;font-size:var(--fs-sm)}
.tksubs li.st-Done a{text-decoration:line-through;color:var(--ink-2)}
.tkattach{display:inline-flex;align-items:center;cursor:pointer}
#tkDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(560px,calc(100vw - 32px));color:var(--ink)}
#tkDlg::backdrop{background:var(--backdrop)}
.tkfill{max-height:50vh;overflow:auto}.tkfill table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.tkfill td,.tkfill th{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}
.tksug{max-height:55vh;overflow:auto;margin:8px 0}.tksug h3{font-size:var(--fs-sm);margin:12px 0 4px}
.tksugline{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:6px 0;border-bottom:1px solid var(--line);list-style:none}
.tksug ul{margin:0;padding:0}.tksugline > select,.tksugline > .tksugon{grid-column:2;grid-row:1 / span 2;max-width:45vw}
.tksugline.other .tksugt{font-style:italic}.tksugon{font-size:var(--fs-sm);color:var(--moss)}.tksugall{display:flex;align-items:center;gap:6px;margin-top:8px}
@media (max-width:820px){
  .tkmode{display:none}
  .tksum,.tkfilters,.tkbody{padding-left:16px;padding-right:16px}
  .tkwed{margin-left:0}
  .tkstat{min-width:0;flex:1 1 70px;padding:5px 8px}
  .tktable thead{display:none}
  .tktable tr{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);grid-template-areas:"task task task task" "st own pri due";align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
  .tktable td{border:0;padding:1px 2px}
  .tktable .tktask{grid-area:task;padding-left:4px}.tktable .tkst{grid-area:st;width:auto}.tktable .tkdu{grid-area:due;width:auto;text-align:right;padding-right:4px}.tktable .tkown{grid-area:own;width:auto}.tktable .tkpri{grid-area:pri;width:auto}
  .tkin{font-size:var(--fs-sm);min-height:32px;padding:2px 2px}
}

/* ---------- Timeline (HANDOFF-9 C) ---------- */
main.tlview{display:block;padding-bottom:60px}
#tlBar{padding-top:6px}
.tlday{margin:14px 0 20px}
.tlday h3{margin:0 0 8px;font-size:var(--fs-lg);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tlday h3 .ro{font-size:var(--fs-sm);font-weight:400}
.tlwarnn{font-size:var(--fs-xs);color:var(--no);background:var(--no-bg);border-radius:var(--pill);padding:1px 8px;font-weight:600}
.tllist{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);margin-left:6px}
.tlitem{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:8px 10px 8px 14px;position:relative;cursor:pointer;border-radius:0 var(--r) var(--r) 0}
.tlitem::before{content:"";position:absolute;left:-7px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--moss)}
.tlitem[data-cat=Dancing]::before{background:var(--gold);border-color:var(--gold-pin)}.tlitem[data-cat=Ceremony]::before{background:var(--moss)}
.tlitem.notime::before{border-style:dashed;border-color:var(--field)}
.tlitem:hover{background:var(--hover)}.tlitem.sel{background:var(--sel)}
.tltime{display:grid;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--ink-2);align-content:start}
.tltime b{font-size:var(--fs-md);color:var(--ink)}.tltime small{font-size:var(--fs-xs)}
.tlopen{all:unset;cursor:pointer;font-weight:600}.tlopen:hover{text-decoration:underline}.tlopen:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.tlmeta{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}.tlmeta .tklink{margin-left:0}
.tlcat{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}
.tlchecks{list-style:none;margin:4px 0 0;padding:0;font-size:var(--fs-xs);display:grid;gap:2px}
.tlchecks li{border-radius:var(--r);padding:1px 7px;justify-self:start}
.tlchecks li.warn{color:var(--no);background:var(--no-bg)}.tlchecks li.info{color:var(--ink-2);background:var(--none-bg)}
.tlcardacts{margin:10px 0}
#tlDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(560px,calc(100vw - 32px));color:var(--ink)}
#tlDlg::backdrop{background:var(--backdrop)}
#tlDlg label input{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:4px 6px;margin-left:6px}
@media (max-width:820px){
  .tlitem{grid-template-columns:78px minmax(0,1fr);gap:8px;padding-left:12px}
}

/* ---------- Calendar ---------- */
main.calview{display:block;padding-bottom:60px}
.calbar{padding-top:8px;justify-content:space-between;align-items:center}
.calnav{display:flex;align-items:center;gap:8px}
.calnav h3{margin:0;min-width:9.5em;text-align:center;font-family:var(--serif);font-size:var(--fs-xl);font-weight:500}
.calnav .sec{padding:4px 12px;min-height:32px;font-size:var(--fs-lg);line-height:1}
.calkinds{display:flex;gap:6px;flex-wrap:wrap}
.calkinds button{font:inherit;font-size:var(--fs-sm);border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:5px 11px;border-radius:var(--pill);cursor:pointer;min-height:30px;display:inline-flex;align-items:center;gap:6px}
.calkinds button[aria-pressed=true]{border-color:var(--ink-2);background:var(--surface);color:var(--ink);font-weight:500}
.calkinds button[aria-pressed=false] .cdot{opacity:.35}
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%}
.cdot.tour{background:var(--gold)}.cdot.tasting{background:var(--seg3)}.cdot.task{background:var(--moss)}
.calbody{padding:12px 20px;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface)}
.cwd{font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding:6px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.cday{min-height:108px;padding:4px 5px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.cday.out{background:var(--paper)}.cday.out .cnum{color:var(--field)}
.cnum{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--ink-2);align-self:flex-end;min-width:22px;text-align:center;border-radius:var(--pill);line-height:22px}
.cday.today .cnum{background:var(--ink);color:#fff;font-weight:600}
.cday.wed{background:var(--dq-bg)}
.cev{display:block;font-size:var(--fs-sm);line-height:1.3;padding:2px 6px;border-radius:5px;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid transparent}
.cev:hover{filter:brightness(.96);text-decoration:underline}
.cev.tour{background:var(--maybe-bg);border-left-color:var(--gold);color:var(--gold-ink)}
.cev.tasting{background:#E3ECF7;border-left-color:var(--seg3);color:#1D4673}
.cev.task{background:var(--moss-bg);border-left-color:var(--moss);color:var(--yes)}
.cev.wedding{background:var(--clay);color:#fff;font-weight:600}
.cev.done{background:var(--none-bg);border-left-color:var(--field);color:var(--ink-2)}
.cev.overdue{background:var(--no-bg);border-left-color:var(--clay);color:var(--no)}
.cev.derived{font-style:italic;background:transparent;border:1px dashed var(--moss);border-left-width:3px}
.cev .ck{margin-right:3px;color:var(--moss)}
.cev .cwhat{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.03em;opacity:.8}
.cmore{font-size:var(--fs-xs);padding:0 6px;min-height:0;align-self:flex-start}
.calup{display:grid;gap:16px}
.calup h4{margin:0 0 6px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.calup h4.late{color:var(--clay)}
.cagenda{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cagenda li{display:grid;gap:3px}
.cagenda .cadate{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.cagenda li.today .cadate{color:var(--ink)}
.cagenda li.today .cadate::after{content:" · today";font-weight:400}
.cagenda .cev{white-space:normal}
.calnone{margin:4px 0}
@media (max-width:820px){
  .calbody{grid-template-columns:minmax(0,1fr);padding:10px 16px}
  .calbar{padding-left:16px;padding-right:16px}
  .calnav h3{min-width:0;flex:1}
  .calnav{flex:1 1 100%}
  .calup section:last-child{display:none}            /* the agenda already lists the month */
}

/* ---------- a venue's bar options (venues.js barBoxHTML) ---------- */
.rv-bar .barnow{margin:2px 0 8px}
.rv-bar.saving{opacity:.6;pointer-events:none}
.baropts{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:2px}
.baropts li{border-radius:6px;padding:3px 6px}
.baropts li.on{background:var(--moss-bg)}
.baropts label{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 10px;align-items:baseline;cursor:pointer;font-size:var(--fs-sm)}
.baropts input{margin:2px 0 0;align-self:start}
.baropts .bop{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.baropts .bot{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:5.5em;text-align:right}
.baropts small.barflag{display:block;margin-left:24px;font-size:var(--fs-xs);color:var(--ink-2)}
.rv-bar details{margin-top:6px;font-size:var(--fs-sm)}
.rv-bar .lbl{margin:0 0 2px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.rv-bar summary{cursor:pointer;color:var(--moss)}
.barsum{font-size:var(--fs-sm);margin:0 0 8px;padding:8px 10px;background:var(--paper);border-radius:6px}
.barsum p{margin:0 0 3px}.barsum p:last-child{margin:0}
.barsum .bsq{margin-top:6px;font-weight:600}
.rv-bar .baract{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rv-bar .baract:empty{display:none}
.barreview{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.barreview .lbl .ro{text-transform:none;letter-spacing:0;font-weight:400}
.baropts .bonr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:baseline;font-size:var(--fs-sm)}
.barcmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rv-range{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.bchg{margin:0 0 8px;padding-left:18px;font-size:var(--fs-sm)}
.rv-inhouse summary{cursor:pointer;color:var(--moss);font-size:var(--fs-sm)}
.rv-inhouse .bol small{display:block;color:var(--ink-2);font-size:var(--fs-xs)}
#vMode{font:inherit;font-size:var(--fs-sm);border:1px solid var(--field);border-radius:var(--r);padding:3px 5px;background:var(--surface);color:var(--ink);flex:1 1 100%}

/* ---- HANDOFF-10: the title links home ---- */
header h1 .homelink{color:inherit;text-decoration:none}
header h1 .homelink:hover{color:var(--moss)}

/* ---- Overview (#home): the Guests dashboard's card style (.gbar), tokens only ---- */
main.hmview{display:block;overflow:auto;padding:16px 20px 60px}
.hmview .gbar{margin:0}
.hmbody,.hmask{max-width:1180px;margin:0 auto}
.hmtop{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.hmstat{display:flex;flex-direction:column;gap:2px}
.hmstat input[type=date]{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);margin-top:6px;max-width:100%}
.hmloud{border-color:var(--clay);box-shadow:inset 3px 0 0 var(--clay)}
.hmbig{margin:0;font-family:var(--serif);font-size:var(--fs-2xl);line-height:1.15;color:var(--ink)}
.hmbig small{font-family:var(--sans);font-size:var(--fs-md);color:var(--gold-ink)}
.hmgold{color:var(--gold-ink)}
.hmnone{color:var(--ink-2)}
.hmloud .hmnone{color:var(--clay)}
.hmsub{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.hmedit summary{cursor:pointer;font-size:var(--fs-sm);color:var(--moss);margin-top:4px}
.hmcardlink{color:inherit;text-decoration:none;display:block}
.hmcardlink:hover .hmbig{text-decoration:underline;text-decoration-thickness:1px}
.hmpick{display:flex;gap:8px;align-items:baseline;color:var(--ink);text-decoration:none;padding:3px 0;font-size:var(--fs-md)}
.hmpick:hover{text-decoration:underline}
.hmpick.done b{color:var(--moss);font-weight:600}
.hmcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px}
.hmcol{display:grid;gap:12px;min-width:0}
.gbar h3 .hmcount{float:right;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink)}
.gbar h3 .hmmore{float:right;text-transform:none;letter-spacing:0;font-weight:500}
.hmbar{height:6px;border-radius:var(--pill);background:var(--none-bg);overflow:hidden;margin:0 0 6px}
.hmbar i{display:block;height:100%;background:var(--moss);border-radius:var(--pill)}
@media (prefers-reduced-motion:no-preference){.hmbar i{transition:width .4s ease}}
.hmlist{list-style:none;margin:0;padding:0}
.hmlist li + li{border-top:1px solid var(--line)}
.hmrow{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:baseline;width:100%;padding:7px 2px;cursor:pointer;color:var(--ink);font-size:var(--fs-md)}
.hmrow:hover .hmv{text-decoration:underline}
.hmrow:focus-visible{outline:2px solid var(--moss);outline-offset:1px;border-radius:4px}
.hmk{flex:none;min-width:7.5em;color:var(--ink-2);font-size:var(--fs-sm)}
.hmv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hmdate{color:var(--gold-ink);font-weight:600;font-variant-numeric:tabular-nums}
.hmlist li.done .hmv{color:var(--moss);font-weight:600}
.hmlist li.none .hmv{color:var(--ink-2)}
.hmlist li.late .hmv,.hmlist li.late .hmdate{color:var(--clay)}
.hmprompt .hmv{color:var(--ink-2)}
.hmgo{flex:none;color:var(--moss);font-size:var(--fs-sm)}
.hmfoot{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.hmfoot .link{padding:2px 0;min-height:0;font-size:var(--fs-sm)}
.hmempty{margin:4px 0;color:var(--ink-2)}
.hmstrips{margin-bottom:12px}
.hmstrip{display:flex;gap:10px;align-items:baseline;padding:7px 2px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.hmstrip:first-of-type{border-top:0}
.hmstrip:hover .hmv{text-decoration:underline}
.hmask .hmaskrow{display:flex;gap:8px}
.hmask input{flex:1;min-width:0;font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:7px 10px;background:var(--surface);color:var(--ink)}
.hmask label{display:block}

/* ---- Vendors (shares the Caterers layout) ---- */
.pfilters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pfilters select{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink)}
.pmine{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-sm);color:var(--ink-2)}
.pnav{display:inline-flex;gap:2px}.pnav .link{padding:4px 8px;font-size:var(--fs-lg)}
.pnewcat{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#pDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(560px,calc(100vw - 32px));color:var(--ink)}
#pDlg::backdrop{background:var(--backdrop)}
.pcatlist{list-style:none;margin:8px 0;padding:0;border:1px solid var(--line);border-radius:var(--r)}
.pcatlist li{display:flex;gap:8px;align-items:center;padding:6px 10px;flex-wrap:wrap}
.pcatlist li + li{border-top:1px solid var(--line)}
.pcatlist .pneed{display:flex;gap:6px;align-items:center;flex:1;min-width:8em}
.pcatlist .pckind{display:flex;gap:4px;align-items:center;font-size:var(--fs-sm);color:var(--ink-2)}.pcatlist .pckind select{font:inherit;max-width:14em}
.pcatlist .pcact{display:flex;gap:2px}.pcatlist .pcact .link{padding:3px 6px;min-height:0;font-size:var(--fs-sm)}
.pcatlist .pcren{flex:1;display:flex;gap:6px}.pcatlist .pcren input{flex:1;min-width:0}
.pcadd{display:flex;gap:8px}.pcadd input{flex:1;min-width:0}
.pcatlist input:not([type=checkbox]),.pcadd input{font:inherit;border:1px solid var(--field);border-radius:var(--r);padding:5px 8px}

/* ---- phones: a bottom bar replaces the scrolling nav; the header keeps the title, Ask and the menu ---- */
.tabbar,.tabsheet{display:none}
@media (max-width:820px){
  .views a{display:none}
  .views{overflow:visible}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px max(4px,env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{all:unset;box-sizing:border-box;flex:1;text-align:center;padding:10px 2px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);border-radius:var(--r);cursor:pointer}
  .tabbar a[aria-current],.tabbar button.on{color:var(--ink);background:var(--sel);font-weight:600}
  .tabbar :focus-visible{outline:2px solid var(--moss)}
  .tabsheet:not([hidden]){display:block;position:fixed;inset:0;z-index:34;background:var(--backdrop)}
  .tabsheet nav{position:absolute;left:8px;right:8px;bottom:calc(58px + env(safe-area-inset-bottom));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;padding:6px}
  .tabsheet a{padding:13px 12px;color:var(--ink);text-decoration:none;border-radius:6px;font-weight:500}
  .tabsheet a[aria-current]{background:var(--sel)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .spdock{bottom:calc(62px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(70px + env(safe-area-inset-bottom))}
  main.hmview{padding:12px 16px 40px}
  .hmtop{grid-template-columns:1fr 1fr;gap:8px}
  .hmcols{grid-template-columns:1fr}
  .hmbig{font-size:var(--fs-xl)}
  .hmk{min-width:6em}
  .hmask input,.hmstat input[type=date]{font-size:var(--fs-lg)}
}
@media (max-width:420px){.hmtop{grid-template-columns:1fr}}
/* full-screen phone layers stop above the bottom bar */
@media (max-width:820px){
  :root{--tabh:calc(58px + env(safe-area-inset-bottom))}
  .stview,.stphone,.gcard,.mudrawer,#compare{bottom:var(--tabh)}
  #cmpbar,#toMap{bottom:calc(var(--tabh) + 10px)}
}
.pcatlist input[type=checkbox]{width:auto;margin:0;padding:0}
.pcatlist .pneed{font-size:var(--fs-md);color:var(--ink)}
.pcadd input{width:auto}
.hmview .hmask{margin:0 auto}
.cdot.payment{background:var(--clay)}
.cdot.consult{background:var(--seg6)}
.cev.consult{background:#F1E8F4;border-left-color:var(--seg6);color:#5E2F6B}
.cev.consult.past{background:var(--none-bg);border-left-color:var(--field);color:var(--ink-2)}
.cev.payment{background:var(--dq-bg);border-left-color:var(--clay);color:var(--clay)}
/* Vendors: the money strip */
.psum{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:12px 0 4px}
.psum:empty{display:none}
.pstat{display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;min-width:120px;color:var(--ink);text-decoration:none}
.pstat b{font-family:var(--serif);font-size:var(--fs-xl);font-weight:400;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.pstat span{font-size:var(--fs-sm);color:var(--ink-2)}
.pstat.paid b{color:var(--moss)}
.pstat.late b{color:var(--clay)}
a.pstat:hover span{text-decoration:underline}
.pnote{flex-basis:100%;margin:0;font-size:var(--fs-sm)}.pnote:empty{display:none}
.pcon{font-size:var(--fs-sm)}
.ppaid{padding:2px 0;min-height:0;font-size:var(--fs-sm)}
@media (max-width:820px){.pstat{flex:1 1 40%;min-width:0}}
/* Overview: this month at a glance (shown only when the month has something on it) */
.hmgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-variant-numeric:tabular-nums}
.hmdow{font-size:var(--fs-xs);color:var(--ink-2);padding:2px 0}
.hmday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 5px;border-radius:6px;font-size:var(--fs-sm);color:var(--ink);text-decoration:none;min-height:34px}
.hmday b{font-weight:400}
.hmday.past{color:var(--ink-2)}
.hmday.has{background:var(--sel)}
.hmday.has b{font-weight:600}
a.hmday:hover{outline:1px solid var(--moss)}
.hmday.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.hmday.wed{background:var(--clay);color:#fff}
.hmday i{display:flex;gap:2px;font-style:normal}.hmday .cdot{width:6px;height:6px}
.hmkey{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.hmkey .cdot{width:7px;height:7px}
/* the month card: compact */
.hmmonth .hmday{min-height:0;padding:3px 0 4px}
.hmmonth .hmgrid{max-width:420px;margin:0 auto}
/* both columns end flush: the last card in each stretches to the taller column's height */
.hmcols{align-items:stretch}
.hmcol{display:flex;flex-direction:column}
.hmcol > :last-child{flex:1}
@media (max-width:820px){.hmcol > :last-child{flex:none}}
.hmcols.placing{align-items:start}.hmcols.placing .hmcol > :last-child{flex:none}
/* Overview: the couple photo, front and center. --ar = the photo's width / height; --ar-wide / --ar-phone = the banner's shape (home.js). */
.hmhero{max-width:1180px;margin:0 auto 12px}
.hmhero:empty{display:none}
.hmphoto{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.hmimg{overflow:hidden}
.hmimg img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.hmnames{font-family:var(--serif);font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-0.01em}
.hmwhen{font-size:var(--fs-lg)}
.hmcount{font-size:var(--fs-md);opacity:.85}
/* landscape: a banner no taller than 1:2.8 of its width (wider panoramas show whole), names over the bottom edge */
.hmphoto.wide .hmimg{aspect-ratio:var(--ar-wide);max-height:540px;min-height:200px}
.hmphoto.wide figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 18px;background:linear-gradient(transparent,rgba(20,32,26,.62));color:#fff;display:flex;flex-direction:column;gap:2px;pointer-events:none}
/* portrait / square: the whole photo beside a panel */
.hmphoto.tall{display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.hmphoto.tall .hmimg{height:clamp(300px,36vw,440px);aspect-ratio:var(--ar);max-width:min(62vw,720px)}
.hmphoto.tall figcaption{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:28px 40px}
.hmphoto.tall .hmwhen{color:var(--gold-ink);font-size:var(--fs-xl)}.hmphoto.tall .hmcount{color:var(--ink-2);opacity:1}
.hmphoto.tall .hmnames{font-size:clamp(34px,4.6vw,56px)}
.hmphotoacts{position:absolute;top:12px;right:12px;display:flex;gap:6px;align-items:center;opacity:0;transition:opacity .2s}
.hmphoto:hover .hmphotoacts,.hmphoto:focus-within .hmphotoacts{opacity:1}
@media (hover:none){.hmphotoacts{opacity:1}}
@media (prefers-reduced-motion:reduce){.hmphotoacts{transition:none}}
.hmphotoacts .sec{background:rgba(255,255,255,.92)}
/* phone layout: on phones, and in the Adjust photo editor's Phone preview (.hmphone, 358 px wide) */
@media (max-width:820px){
  .hmphoto.wide .hmimg{aspect-ratio:var(--ar-phone);max-height:none}
  .hmphoto.wide figcaption{padding:36px 16px 12px}
  .hmphoto.tall{grid-template-columns:1fr}
  .hmphoto.tall .hmimg{height:auto;width:100%;max-width:none;aspect-ratio:var(--ar-phone)}
  .hmphoto.tall figcaption{padding:16px 18px 18px}
  .hmphotoacts{top:8px;right:8px;flex-wrap:wrap;justify-content:flex-end}
  .hmedhead .hmedseg{display:none}
}
.hmphone .hmphoto.wide .hmimg{aspect-ratio:var(--ar-phone);max-height:none}
.hmphone .hmphoto.wide figcaption{padding:36px 16px 12px}
.hmphone .hmphoto.tall{grid-template-columns:1fr}
.hmphone .hmphoto.tall .hmimg{height:auto;width:100%;max-width:none;aspect-ratio:var(--ar-phone)}
.hmphone .hmphoto.tall figcaption{padding:16px 18px 18px}
.hmphone .hmnames{font-size:28px}.hmphone .hmphoto.tall .hmnames{font-size:34px}
.hmphoto.empty{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:120px;border:1.5px dashed var(--field);border-radius:var(--r);background:var(--surface);color:var(--ink-2);text-align:center;cursor:pointer;padding:12px}
.hmphoto.empty .hmnames{font-size:var(--fs-2xl);color:var(--ink)}
.hmphoto.empty p{margin:0;font-size:var(--fs-md)}
button.hmphoto.empty:hover{border-color:var(--moss);color:var(--moss)}
button.hmphoto.empty:focus-visible{outline:2px solid var(--moss);outline-offset:2px}

/* Adjust photo editor */
#hmEdDlg{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;width:min(1240px,calc(100vw - 32px));max-height:calc(100svh - 32px);color:var(--ink);background:var(--paper)}
#hmEdDlg::backdrop{background:var(--backdrop)}
.hmedhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hmedhead h2{flex:1;margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl)}
.hmedtools{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-bottom:12px;font-size:var(--fs-sm);color:var(--ink-2)}
.hmedtools label{display:inline-flex;align-items:center;gap:8px}
.hmedtools input[type=range]{width:150px;accent-color:var(--moss)}
.hmedseg{display:inline-flex;border:1px solid var(--field);border-radius:var(--pill);overflow:hidden;background:var(--surface)}
.hmedseg button{font:inherit;font-size:var(--fs-sm);border:0;background:none;padding:6px 12px;color:var(--ink-2);cursor:pointer}
.hmedseg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.hmprev{margin:0 auto;max-width:1180px}
.hmprev.hmphone{width:358px;max-width:100%}
.hmphoto.editing .hmimg{cursor:grab;touch-action:none}
.hmphoto.editing .hmimg:active{cursor:grabbing}
.hmphoto.editing{box-shadow:0 0 0 2px var(--gold)}
#hmEdDlg .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* A viewer (access level "viewer"): a note under the header. Nothing is hidden from it (Ben, 2026-10-08): changes it
   tries fail with the API's "view-only" message instead. */
.viewonly-note{flex-basis:100%;margin:0;font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- the workspace shell (UI port): who is signed in, Coming soon, pages shown instead of a view ---- */
.acct .who{font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.soonlabel{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:var(--pill);background:var(--none-bg);color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;line-height:1.5;vertical-align:middle;white-space:nowrap}
[aria-disabled="true"].soon{opacity:.6;cursor:default}
.views a.soon:hover{background:none}
.askbtn.soon:hover{background:var(--moss-bg)}
.menupanel button.soon{cursor:default}
.tabbar .soonlabel,.tabsheet .soonlabel{display:block;width:max-content;margin:2px auto 0;font-size:10px}
main.soonview{flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:40px 16px}
.soonbox{max-width:440px;text-align:center}
.soonbox h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-2xl);margin:0 0 10px}
.soonbox .soonmsg{color:var(--ink-2);margin:8px 0}
@media (max-width:820px){.acct .who{max-width:45vw}}
/* While views carry a Coming soon label the nav is wider than the header: let it wrap rather than run off the page */
@media (min-width:821px){
  /* The nav takes the width that is left (flex-basis 0, so it never forces the user block onto a new line) and wraps inside itself */
  header .spacer{display:none}
  .views{flex:1 1 0;min-width:0;flex-wrap:wrap;row-gap:4px}
  header h1,.acct{flex:none;align-self:flex-start}
  .acct{margin-left:auto}   /* stays at the right end on pages without the nav (no access, a single view) */
  .views:not([hidden]){min-width:12em}   /* a long workspace name can't squeeze the nav to nothing: it wraps below instead */
  header h1{padding-top:3px;flex:0 1 auto;min-width:0;max-width:40%;overflow-wrap:anywhere}   /* a long name wraps inside its share of the row */
}
/* The menu never runs past either edge of the screen */
.menupanel{max-width:calc(100vw - 24px)}

/* ---------- Members (#members): the Tasks table's look, as a grid of list items; one stacked card per person on phones ---------- */
main.mbview{display:block;padding-bottom:60px}
.mbwrap{--mbcols:minmax(0,1.7fr) minmax(0,1.1fr) 130px 90px 190px;max-width:1100px;padding:6px 20px}
.mbwrap > .msg{border-top:0;padding-left:0;padding-right:0}
.mbhead,.mblist li{display:grid;grid-template-columns:var(--mbcols);gap:4px 14px;align-items:center}
.mbhead{padding:4px 8px;border-bottom:1px solid var(--line);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:600}
.mbhead:has(+ .mblist:empty){display:none}
.mblist{list-style:none;margin:0;padding:0}
.mblist li{padding:8px;border-bottom:1px solid var(--line)}
.mblist li:hover{background:var(--hover)}
.mbwho{display:grid;gap:2px;min-width:0}
.mbname{font:inherit;font-weight:500;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.mbemail{font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere}
.mblist li input,.mblist li select,.mbinvite input,.mbinvite select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.mbtitlec,.mbrolec,.mbstatusc{min-width:0}
.mbtitle,.mbrole{overflow-wrap:anywhere}
.mbstatus{display:inline-block;font-size:var(--fs-xs);font-weight:600;border-radius:var(--pill);padding:1px 9px}
.mbstatus.act{color:var(--moss);background:var(--moss-bg)}
.mbstatus.pend{color:var(--gold-ink);background:var(--none-bg)}
.mbacts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px 6px}
.mbinvite{margin-top:22px;max-width:760px}
.mbinvite h3{margin:0 0 10px}
.mbfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end}
.mbfields label{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 3px}
.mbsend{display:flex}
.mbinvite .err{margin-top:8px}
/* Firms on the Members page: the "[Firm name]" badge, Unlink [Firm], and Assign from your firm's empty line */
.mbfirm{justify-self:start;max-width:100%;font-size:var(--fs-xs);font-weight:600;color:var(--moss);background:var(--moss-bg);border-radius:var(--pill);padding:1px 9px;overflow-wrap:anywhere}
.mbunlink{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mbunlink .delbtn{max-width:100%;overflow-wrap:anywhere;text-align:left}
.mbnone{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width:820px){
  .mbwrap{padding:6px 16px}
  .mbhead{display:none}
  .mblist li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"who who" "titl role" "stat acts";padding:12px 4px;gap:8px 12px}
  .mbwho{grid-area:who}.mbtitlec{grid-area:titl}.mbrolec{grid-area:role}.mbstatusc{grid-area:stat}.mbacts{grid-area:acts}
  .mbfields{grid-template-columns:minmax(0,1fr)}
  .mbsend button{width:100%}
}
/* ---------- Your firm (#firm): the Members list's look; staff, invitations and weddings as rows ---------- */
.frmh{margin:22px 0 6px;font-size:var(--fs-md)}
.frmpick{display:flex;gap:8px;align-items:center;margin:8px 0}
.frmpick select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);min-width:0;max-width:100%}
.frmlist li{grid-template-columns:minmax(0,1fr) auto auto auto}
.frmwho{display:grid;gap:2px;min-width:0}
.frmlist a.mbname{color:var(--moss)}
.mbstatus.exp{color:var(--clay);background:var(--none-bg)}
.frmview .mbinvite{margin-top:12px}
.frmview .frmrenbtn{font-size:var(--fs-sm);padding:2px 6px;min-height:0;margin-left:6px}
.frmrename{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:8px;vertical-align:middle;max-width:100%}
.frmrename[hidden]{display:none}
.frmrename input{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);min-width:0;width:16em;max-width:100%}
.frmrename button{font-size:var(--fs-sm);padding:4px 10px;min-height:28px}
@media (max-width:820px){
  .frmlist li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:none;gap:6px 12px}
  .frmwho{grid-column:1 / -1}
  .frmlist .mbacts{margin-left:auto}
}
/* ---------- Wedding settings (#settings): one card per section, a two-column grid of fields; one column on phones ---------- */
main.wsetview{display:block;padding-bottom:60px}
.wsetwrap{max-width:860px;padding:12px 20px;display:grid;gap:14px}
.wsetwrap > .msg,.wsetro{margin:0}
.wsetsec{display:grid;gap:8px}
.wsetsec > .hint{margin:0}
.wsetfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;align-items:start}
.wsetfield{display:grid;gap:3px;min-width:0}
.wsetfield label{font-size:var(--fs-sm);color:var(--ink-2)}
.wsetfield .wsetlbl{font-size:var(--fs-sm);color:var(--ink-2)}
.wsettownline,.wsetoffer{margin:0;overflow-wrap:anywhere}
.wsettownline span{font-weight:500}
.wsettownpick{display:grid;gap:6px;min-width:0}
.wsettownslot gmp-place-autocomplete{width:100%}
.wsettownacts,.wsetoffer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.wsetfield .hint{margin:0}
.wsetsec input[type=text],.wsetsec select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.wsetsec input[type=color]{width:64px;height:34px;padding:2px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);cursor:pointer}
.wsetside{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:end;min-width:0}
.wsetsuggest{align-self:end;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wsetsw{display:inline-flex;gap:4px}
.wsetsw i{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid var(--line)}
.wsetgroups,.wsetrolist{list-style:none;margin:0;padding:0}
.wsetgroups li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,10em) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.wsetgroups li.msg,.wsetgroups li.err{display:block}
.wsetsec .msg{border-top:0;padding:4px 0}
.wsetrolist li{padding:4px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.wsetadd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,10em) auto;gap:8px;align-items:center}
.wsetdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0}
.wsetdl dt{color:var(--ink-2);font-size:var(--fs-sm);align-self:center}
.wsetdl dd{margin:0;overflow-wrap:anywhere}
.wsetdot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
@media (max-width:820px){
  .wsetwrap{padding:10px 16px}
  .wsetfields{grid-template-columns:minmax(0,1fr)}
  .wsetgroups li,.wsetadd{grid-template-columns:minmax(0,1fr) minmax(0,8em)}
  .wsetgroups li button,.wsetadd button{grid-column:1 / -1;justify-self:start}
}
/* Venues: Upload a file is a label around the file input, drawn as a secondary button */
.cardacts label.qup{display:inline-flex;align-items:center;font-size:var(--fs-md);font-weight:500;line-height:1.2;border-radius:var(--pill);cursor:pointer;padding:7px 14px;min-height:34px;border:1px solid var(--field);background:var(--surface);color:var(--ink)}
.cardacts label.qup:hover{background:var(--sel)}
.cardacts .qprog:empty{display:none}

/* ---- Calendar Subscribe dialog (calendar.js) ---- */
#subDlg{width:min(520px,calc(100vw - 32px));max-height:90vh;overflow:auto}
#subDlg .gform{display:grid;gap:10px}
#subDlg .gform>*{margin:0}
#subDlg .subrow{display:flex;gap:10px;align-items:center;margin-top:4px}
#subDlg .subrow input{flex:1 1 auto;min-width:0;width:auto;text-overflow:ellipsis}
#subDlg .subrow button{flex:none}
#subDlg .delconf{display:grid;gap:8px}
#subDlg .delconf[hidden],#subDlg .actions[hidden]{display:none}
#subDlg .delact{display:flex;gap:12px;align-items:center;justify-content:flex-end}
#subDlg .subapps{display:grid;gap:10px;margin:8px 0 12px}
#subDlg a.subapp{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:10px 16px;border-radius:var(--r);text-decoration:none;box-sizing:border-box;width:100%;font:inherit;font-size:var(--fs-md);line-height:1.25;border:1px solid var(--field);background:var(--surface);color:var(--ink);cursor:pointer}
#subDlg a.subapp:hover,#subDlg a.subapp:focus-visible{background:var(--sel)}
#subDlg a.subapp b{font-weight:500}
#subDlg a.subapp .hint{margin:0}
#subDlg .subother{margin:0 0 8px}
#subDlg .subother summary{cursor:pointer;color:var(--ink-2);font-size:var(--fs-md);padding:10px 0;min-height:24px}
#subDlg .subother .subrow{margin:8px 0 4px}

/* Hand-over (members.js dialog and offer line, app.js banner) */
#hoDlg{width:min(460px,calc(100vw - 32px))}
.hogroup{border:0;margin:14px 0 0;padding:0;min-width:0}
.hogroup legend{font-size:var(--fs-sm);color:var(--ink-2);padding:0;margin-bottom:4px}
.horadio{display:flex;align-items:flex-start;gap:8px;padding:6px 0;overflow-wrap:anywhere}
.horadio input{margin-top:3px}
#mbHandover p{margin:0 0 8px;overflow-wrap:anywhere}
.hobanner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;background:var(--moss-bg);color:var(--ink);border-bottom:1px solid var(--line)}
.hobanner[hidden]{display:none}
.hobanner p{margin:0;flex:1 1 260px;overflow-wrap:anywhere}
.hoacts{display:flex;gap:8px}

/* ---------- the planner dashboard (/dashboard, dashboard.js; the master calendar is calendar-grid.js's) ---------- */
body.dashpage{display:block;height:auto}
.dashpage #login{overflow-y:auto}
.dbpick{margin:0}
main.dbview{display:block;max-width:1240px;margin:0 auto;padding:4px 20px 60px}
main.dbview > .msg{border-top:0;padding-left:0}
.dbretry{margin:0}
.dbsec{margin:22px 0 0}
.dbsec h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);margin:0 0 10px}
.dbsechead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.dbsechead h2{margin:0}
.dbfilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:var(--fs-sm);color:var(--ink-2)}
.dbfilters select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);min-width:0;max-width:100%}
.dbempty{display:grid;gap:8px;justify-items:start}
.dbempty p{margin:0;font-size:var(--fs-lg)}
.dbnone{margin:0 0 8px}
.dbcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.dbcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:4px;align-content:start;min-width:0}
.dbcard p{margin:0;overflow-wrap:anywhere}
.dbcardtop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.dbcardtop .mbstatus{flex:none;margin-top:2px}
.dbname{margin:0;font-size:var(--fs-lg);font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.dbname a{color:var(--ink)}
.dbdate .dbnote{color:var(--ink-2)}
.dbwho,.dbcounts{font-size:var(--fs-sm);color:var(--ink-2)}
.dbcounts .late{color:var(--clay);font-weight:600}
.dbnoton{font-style:italic}
.dbweekgroup{margin:0 0 14px}
.dbweekgroup .dbname{font-size:var(--fs-md)}
.dbweeklist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.dbweeklist li{display:flex;gap:10px;font-size:var(--fs-sm);min-width:0}
.dbweeklist .dbwwhat{min-width:0;overflow-wrap:anywhere}
.dbwdate{flex:none;width:7.5em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dbweeklist li.late .dbwdate,.dbweeklist li.late .dbwwhat{color:var(--clay)}
.dbnothing{margin:0}
.dbleadlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--fs-md)}
.dbleadlist a{color:var(--moss);font-weight:600}
.dbleadlist .dbleadplain{color:var(--ink-2)}
.dbweeklist .dbwtime{font-weight:600}
.dbweeklist li.past .dbwwhat,.dbweeklist li.past .dbwdate{color:var(--ink-2)}
.dbcal .calbar{padding:0 0 10px}
.dbcalweds button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbcalweds button[aria-pressed=false] .cwdot{opacity:.35}
.dbcalbody{padding:12px 0}
.dbother{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* a wedding's color dot and name on a chip (calendar-grid.js chipHTML prefix and dot); a chip with no link is plain text */
.cwdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;flex:none}
.cev .cwname{font-weight:600}
span.cev:hover{filter:none;text-decoration:none}
@media (max-width:820px){
  main.dbview{padding:4px 16px 40px}
}
/* the dashboard's other views (#firm, #account): its header keeps only the firm's name and the ⋯ menu */
body.dashpage:not([data-view="dashboard"]) .dbonly{display:none !important}
/* ---------- Your firm's Templates, and the template editor (#templates/<id>, templates.js): Wedding settings' cards, each
   item a wrapping grid of small labeled fields; subtasks indented; one or two columns on phones ---------- */
.frmtplnew{margin:10px 0 0}
.frmtplform{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:10px}
.frmtplform[hidden]{display:none}
.frmtplform label{font-size:var(--fs-sm);color:var(--ink-2)}
.frmtplform input{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);min-width:0;width:18em;max-width:100%}
.frmtplform select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink)}
.tplwrap{max-width:1100px}
.tplview .tplback{margin-right:8px;font-size:var(--fs-sm)}
.tplbar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;background:var(--paper)}
.tplmsg{margin:0;padding:10px 12px;border:1px solid var(--clay);border-radius:var(--r);background:var(--surface);overflow-wrap:anywhere}
.tplmsg[hidden]{display:none}
.tplmsg p{margin:0}
.tplmsg .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tplname{margin:0;font-size:var(--fs-lg);font-weight:600;overflow-wrap:anywhere}
.tpllist{list-style:none;margin:0;padding:0}
.tplitem{padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.tplitem.tplsub{margin-left:28px;padding-left:10px;border-left:2px solid var(--line)}
.tplitem.bad{background:var(--dq-bg)}
.tplfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(8em,1fr));gap:6px 10px;align-items:start}
.tplf{display:grid;gap:2px;min-width:0;font-size:var(--fs-sm);color:var(--ink-2)}
.tplf.tplwide{grid-column:span 2}
.tplf > span:not(.tplbox),.tplview .wsetfield > label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}
.tplf .tplbox{display:flex;align-items:center;height:34px}
.tplf .tplbox input{margin:0}
.tplf input:not([type=checkbox]),.tplf select,.tplsec > .tpladd select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.tplfoot{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:4px}
.tplsug{overflow-wrap:anywhere;min-width:0}
.tplsug button{padding:2px 6px;min-height:0;font-size:var(--fs-sm)}
.tplacts{display:flex;flex-wrap:wrap;gap:2px 6px;margin-left:auto}
.tplacts button{padding:2px 6px;min-height:0;font-size:var(--fs-sm)}
.tpladd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.tplsec > .tpladd select{width:auto;max-width:100%}
.tplrot{margin:0;font-weight:500;overflow-wrap:anywhere}
.tplrom{margin:2px 0 0;overflow-wrap:anywhere}
.tplnone{margin:0}
@media (max-width:820px){
  .tplfields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tplf.tplwide{grid-column:1 / -1}
  .tplitem.tplsub{margin-left:12px}
}
.tplsec input[type=number]{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
/* One height for every field of the editor (text, number, time, select; the app's 34px control height): a select or a
   time input otherwise draws a pixel or two shorter or taller than a text input beside it, and their labels then sit
   off the row's line. */
.tplview input:not([type=checkbox]),.tplview select{height:34px;padding-top:0;padding-bottom:0;line-height:normal;margin:0;vertical-align:top}
/* ---------- Leads (#leads, #leads/<id>; leads.js): the board, one column per stage (Lost a collapsed <details>), the
   dashboard's cards; the panel, Wedding settings' cards; on phones the columns stack (a list grouped by stage) ---------- */
main.ldview{display:block;padding-bottom:60px}
.ldwrap{max-width:1240px;padding:6px 20px}
.ldwrap > .msg{border-top:0;padding-left:0}
.ldh{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);margin:0}
.ldfilters{margin:0 0 12px}
.ldfilt{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.ldfilters input{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);min-width:0;width:14em;max-width:100%}
.ldnone{margin:0 0 8px}
.ldboard{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:12px;align-items:start;overflow-x:auto;padding-bottom:4px}
.ldcol{background:var(--sel);border-radius:var(--r);padding:8px;min-width:0}
.ldboard.ldone{grid-template-columns:minmax(0,420px)}
.ldstagefilt{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:var(--fs-sm)}
.ldstagefilt span{font-weight:600}
.ldcolh{margin:0 0 8px;font-size:var(--fs-md);font-weight:600;overflow-wrap:anywhere}
.ldlost > summary.ldcolh{cursor:pointer;margin:0}
.ldlost[open] > summary.ldcolh{margin:0 0 8px}
.ldn{color:var(--ink-2);font-weight:400}
.ldcards{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ldcard{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--ink);text-decoration:none;min-width:0}
.ldcard:hover{border-color:var(--field)}
.ldcouple{font-weight:600;overflow-wrap:anywhere}
.ldwhen,.ldconsult,.ldwho{font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere}
.ldconsult{color:var(--moss)}
.ldempty{margin:0}
.ldpanel{max-width:860px;display:grid;gap:14px}
.ldback{margin:0;font-size:var(--fs-sm)}
.ldtitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ldname{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);margin:0;overflow-wrap:anywhere;min-width:0}
.ldname.ldsub{font-size:var(--fs-lg)}
.ldpanel > .hint{margin:0}
#login .wchoice.wuse{font-size:var(--fs-sm)}
.ldwide{grid-column:1 / -1}
.ldview .wsetsec input:not([type=checkbox]),.ldview .wsetsec select,.ldview .wsetsec textarea,#ldDlg input,#ldDlg select,#ldDlg textarea,#bkDlg input,#bkDlg select{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.ldview .wsetsec textarea,#ldDlg textarea{resize:vertical;min-height:58px}
.ldview .wsetsec select:disabled{opacity:.7}
.ldwedding:empty{display:none}
.ldwedding{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ldwedding .hint{margin:0}
.ldopen{text-decoration:none;display:inline-flex;align-items:center}
.ldview .wsetdl dd{white-space:pre-wrap}
.lddel{margin:0}
#ldDlg,#bkDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(420px,calc(100vw - 32px));color:var(--ink)}
#ldDlg::backdrop,#bkDlg::backdrop{background:var(--backdrop)}
#ldDlg h2,#bkDlg h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);margin:0 0 8px}
#ldDlg .hint{margin:0 0 8px;overflow-wrap:anywhere}
.ldform{display:grid;gap:10px}
#ldDlg .actions,#bkDlg .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
/* The Vendor book (book.js): the page's sections and cards, and an entry's typed address and History. */
.bklist{display:grid;gap:18px}
.bksec > h3{margin:0 0 8px;font-size:var(--fs-lg);font-weight:600}
.bkcat{margin:12px 0 6px;font-size:var(--fs-md);font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.bkcards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.bkaddrtyped{display:flex;flex-wrap:wrap;gap:8px}
.bkview .wsetsec .bkaddrtyped input{flex:1 1 160px;width:auto}
.bkhist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bkhist li{display:grid;gap:2px;min-width:0}
.bkhwed{font-weight:600;overflow-wrap:anywhere}
.bkhmeta{font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere}
.bkline{display:grid;gap:4px;justify-items:start;margin:6px 0}.bkline:empty{display:none}
.bklabel{margin:0;font-size:var(--fs-sm);overflow-wrap:anywhere}
.bknewer{margin:0;background:var(--sel);border-radius:var(--r);padding:6px 10px;font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;overflow-wrap:anywhere}
.bkacts{display:inline-flex;gap:8px;align-items:center}
#bkPick{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(560px,calc(100vw - 32px));color:var(--ink)}
#bkPick::backdrop{background:var(--backdrop)}
.bkpicklist{list-style:none;margin:4px 0;padding:0;border:1px solid var(--line);border-radius:var(--r);max-height:50vh;overflow:auto}
.bkpicklist li + li{border-top:1px solid var(--line)}
.bkpicklist li.ro{padding:10px}
.bkpick{display:grid;gap:2px;width:100%;text-align:left;padding:8px 10px;background:none;border:0;border-radius:0;font:inherit;color:inherit;cursor:pointer}
.bkpick:hover,.bkpick:focus-visible{background:var(--sel)}
.bkpname{font-weight:600;overflow-wrap:anywhere}
.bkpline{font-size:var(--fs-sm);overflow-wrap:anywhere}
/* Venues' "Add from my vendors": beside + Add venue in the header; on phones, where the header has no room, in the ⋯ menu */
@media (max-width:820px){#vBook{display:none !important}}
@media (min-width:821px){#vBookMenu{display:none !important}}
@media (max-width:820px){
  .ldwrap{padding:6px 16px}
  .ldboard{grid-template-columns:minmax(0,1fr);overflow-x:visible}
  .ldq{flex:1 1 100%}
  .ldfilters input{width:auto;flex:1;min-width:0}
}
/* ---------- Budget (#budget, budget.js): the total and the summary, the lines (plan, figures, a bar against planned,
   the vendors, payers), the contributors; its dialogs (#bgPayDlg, #bgLineDlg, #bgConDlg) as the leads' ---------- */
main.bgview{display:block;padding-bottom:60px}
.bgwrap{max-width:960px;padding:12px 20px;display:grid;gap:14px}
.bgwrap > .msg{margin:0;padding:0}
.bgtitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.bgview input[type=number],.bgview input[type=text],.bgview select,#bgPayDlg input,#bgLineDlg input,#bgConDlg input{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);box-sizing:border-box;min-width:0}
.bgtotal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bgtotal label{font-weight:600}
.bgtotal input{width:12em;max-width:100%}
.bgsum{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bgstat{display:flex;flex-direction:column;gap:1px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;min-width:120px}
.bgstat b{font-family:var(--serif);font-size:var(--fs-xl);font-weight:400;color:var(--gold-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bgstat span{font-size:var(--fs-sm);color:var(--ink-2)}
.bgwarn{margin:8px 0 0;color:var(--clay);font-size:var(--fs-sm);font-weight:600}
.bghead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.bghead h3{margin:0}
.bglines,.bgcons,.bgvendors{list-style:none;margin:0;padding:0}
.bgline{padding:10px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;min-width:0}
.bglhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.bgname{margin:0;font-size:var(--fs-md);font-weight:600;overflow-wrap:anywhere;min-width:0;flex:1}
.bglname{display:flex;align-items:center;gap:8px;font-weight:400}
.bglname input{flex:1;min-width:0;max-width:24em}
.bgnote{margin:0;color:var(--clay);font-size:var(--fs-sm)}
.bgplan,.bgspend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bgplanl{font-size:var(--fs-sm);color:var(--ink-2)}
.bgplan input,.bgspend input{width:9em;max-width:100%}
.bgview .bgplan select{width:auto}
.bgplanned{font-variant-numeric:tabular-nums}
.bgspend label,.bgconf label{display:grid;gap:2px;font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
.bgfigs{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-sm);color:var(--ink-2)}
.bgfig b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.bgbar{position:relative;height:6px;border-radius:var(--pill);background:var(--none-bg);overflow:hidden}
.bgbar i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--pill)}
.bgbar .bgbc{background:var(--gold)}
.bgbar .bgbp{background:var(--moss)}
.bgline.over .bgbar .bgbc{background:var(--clay)}
.bgover{margin:0;color:var(--clay);font-size:var(--fs-sm);font-weight:600}
.bgvendors li,.bgpayers{font-size:var(--fs-sm);overflow-wrap:anywhere}
.bgvendors span{color:var(--ink-2)}
.bgpayers{margin:0}
.bgline button.link,.bgcon button.link{padding:2px 6px;min-height:0;font-size:var(--fs-sm)}
.bgcon{padding:8px 0;border-bottom:1px solid var(--line);display:grid;gap:4px;min-width:0}
.bgconf{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:6px 10px;align-items:end}
.bgconf input{width:100%}
.bgcovers{margin:0}
#bgPayDlg,#bgLineDlg,#bgConDlg{border:1px solid var(--line);border-radius:var(--r);padding:20px;width:min(420px,calc(100vw - 32px));color:var(--ink)}
#bgPayDlg::backdrop,#bgLineDlg::backdrop,#bgConDlg::backdrop{background:var(--backdrop)}
#bgPayDlg h2,#bgLineDlg h2,#bgConDlg h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);margin:0 0 8px;overflow-wrap:anywhere}
#bgPayDlg .hint{margin:0 0 8px}
#bgPayDlg .actions,#bgLineDlg .actions,#bgConDlg .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
#bgLineDlg input,#bgConDlg input{width:100%}
.bgpayrows{display:grid;gap:6px;margin-bottom:8px}
.bgpayrow{display:grid;grid-template-columns:minmax(0,1fr) 6em auto;gap:8px;align-items:center}
.bgpayrow label{overflow-wrap:anywhere}
.tplbsum{margin:6px 0 0}
.tplbsum.over{color:var(--clay);font-weight:600}
/* The Wedding party section's recessional switch, under its slots (templates.js partyExtras). */
.tplrec{margin:12px 0 0}
.tplrec label{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.tplrec label input{margin:0}
.tplrec .hint{margin:4px 0 0}
@media (max-width:820px){
  .bgwrap{padding:10px 16px}
  .bgstat{flex:1 1 40%;min-width:0}
  .bgconf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bgconf .bgconname{grid-column:1 / -1}
  .bgconf button{justify-self:start}
}
/* ---------- Hotels (#hotels, hotels.js): Add hotel, a card per hotel (its facts, address, fields, the parties staying
   there), "Needs a room, no hotel yet" with each party's Staying at ---------- */
main.htview{display:block;padding-bottom:60px}
.htwrap{max-width:960px;padding:12px 20px;display:grid;gap:14px}
.htwrap > .msg{margin:0;padding:0}
.hthead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.hthead h2{margin:0}
.htnew{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.htnew label{font-weight:600}
.htnew input{flex:1 1 14em;min-width:0;max-width:24em}
.htnew .err{flex-basis:100%;margin:0}
.htview input,.htview select,.htview textarea{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);box-sizing:border-box;min-width:0;max-width:100%}
.htcards,.htparties,.htneedlist{list-style:none;margin:0;padding:0}
.htcards{display:grid;gap:14px}
.htcard{display:grid;gap:8px}
.htname{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);overflow-wrap:anywhere}
.htfacts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0}
.htover{color:var(--clay)}
.htbook{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;overflow-wrap:anywhere;min-width:0}
.htbook a{overflow-wrap:anywhere;min-width:0}
.htcode{color:var(--ink-2)}
.htaddrline{margin:0;overflow-wrap:anywhere}
.htaddrl{font-size:var(--fs-sm);color:var(--ink-2);margin-right:4px}
.htcard dl.ed{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 10px;margin:0;align-items:center}
.htcard dl.ed dd{margin:0;min-width:0;position:relative}
.htcard dl.ed input,.htcard dl.ed textarea{width:100%}
.htwho h4{margin:4px 0}
.htparties li,.htneedlist li{padding:4px 0;overflow-wrap:anywhere}
.htneeds h3{margin:0 0 6px}
.htneedlist li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border-bottom:1px solid var(--line)}
.htstayl{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-2);margin-left:auto;min-width:0}
.htdelrow{margin:0}
@media (max-width:820px){
  .htwrap{padding:6px 16px}
  .htcard dl.ed{grid-template-columns:1fr;gap:2px}
  .htstayl{margin-left:0}
}
/* Transportation (#transportation, transportation.js): a card per trip, as Hotels' */
main.trview{display:block;padding-bottom:60px}
.trwrap{max-width:960px;padding:12px 20px;display:grid;gap:14px}
.trwrap > .msg{margin:0;padding:0}
.trhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.trhead h2{margin:0}
.trnew{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.trnew label{font-weight:600}
.trnew input{flex:1 1 14em;min-width:0;max-width:24em}
.trnew .err{flex-basis:100%;margin:0}
.trview input,.trview select,.trview textarea{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);box-sizing:border-box;min-width:0;max-width:100%}
.trview input[type=checkbox]{width:auto}
.trcards,.trriders{list-style:none;margin:0;padding:0}
.trcards{display:grid;gap:14px}
.trcard{display:grid;gap:8px}
.trtitle{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-xl);overflow-wrap:anywhere}
.trtype{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;vertical-align:middle}
.trsum p{margin:0 0 2px;overflow-wrap:anywhere}
.trwhen{font-weight:600}
.trover{color:var(--clay)}
.trcard dl.ed{display:grid;grid-template-columns:140px minmax(0,1fr);gap:4px 10px;margin:0;align-items:center}
.trcard dl.ed dd{margin:0;min-width:0;position:relative}
.trcard dl.ed input:not([type=checkbox]),.trcard dl.ed textarea{width:100%}
.trend{display:flex;flex-wrap:wrap;gap:6px}
.trend input{flex:1 1 12em}
.trwho h4{margin:4px 0}
.trriders li{padding:4px 0;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;border-bottom:1px solid var(--line)}
.trriders input{width:5em}
.traddr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.traddr label{font-size:var(--fs-sm);color:var(--ink-2)}
.traddpeople{width:5em}
.tracts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
@media (max-width:820px){
  .trwrap{padding:6px 16px}
  .trcard dl.ed{grid-template-columns:1fr;gap:2px}
}
/* Wedding party (#wedding-party, wedding-party.js; person-pick.js): People, Roles, Processional, Recessional, as Hotels' */
main.wpview{display:block;padding-bottom:60px}
.wpwrap{max-width:960px;padding:12px 20px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.wpwrap > h2{margin:0}
.wpwrap > .msg,.wpsec > .msg{margin:0;padding:0}
.wpsec{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.wphead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.wpsec h3,.wphead h3{margin:0}
.wpsec h4{margin:4px 0;overflow-wrap:anywhere}
.wpnew{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.wpnew label{font-weight:600}
.wpnew input[type=text]{flex:1 1 14em;min-width:0;max-width:24em}
.wpnew input[type=number]{width:5em}
.wpnew .err{flex-basis:100%;margin:0}
.wpview input,.wpview select,.wpview textarea{font:inherit;font-size:var(--fs-md);border:1px solid var(--field);border-radius:var(--r);padding:5px 8px;background:var(--surface);color:var(--ink);box-sizing:border-box;min-width:0;max-width:100%}
.wpview input[type=checkbox]{width:auto}
.wppeople,.wpslots,.wplines,.wpoutlist{list-style:none;margin:0;padding:0}
.wppeople{display:grid;gap:10px}
.wpperson{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;border-top:1px solid var(--line);padding-top:8px}
.wppname{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-lg);overflow-wrap:anywhere}
.wpproles{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.wpperson dl.ed{display:grid;grid-template-columns:100px minmax(0,1fr);gap:4px 10px;margin:0;align-items:center}
.wpperson dl.ed dd{margin:0;min-width:0}
.wpperson dl.ed input,.wpperson dl.ed textarea{width:100%}
.wpdelrow{margin:0}
.wpgroup{border-top:1px solid var(--line);padding-top:6px}
.wpslot{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:6px 0}
.wpslot + .wpslot{border-top:1px dashed var(--line)}
.wpwho{margin:0;font-weight:600;overflow-wrap:anywhere}
.wpslotf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}
.wpslotf label{font-size:var(--fs-sm);color:var(--ink-2);margin-right:4px}
.wpinfo{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.wpnotes{display:flex;align-items:center;flex:1 1 14em;min-width:0}
.wpnotes textarea{flex:1;min-width:0}
.pp,.wpwalks{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0;max-width:100%}
.pp select,.wpwalks select{min-width:0;max-width:100%;text-overflow:ellipsis}
.ppadd{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.ppadd[hidden]{display:none}
.ppname{width:12em}
.wplines{display:grid;gap:4px;counter-reset:wpline}
.wpline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow-wrap:anywhere}
.wpline[draggable=true]{cursor:grab}
.wpline.drag{opacity:.5}
.wpwalkers{min-width:0}
.wpwalkers::before{counter-increment:wpline;content:counter(wpline) ". ";color:var(--ink-2)}
.wpamp{color:var(--ink-2)}
.wpmove{display:inline-flex;gap:6px}
.wpoutlist li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.wpswitch{display:flex;align-items:center;gap:6px}
@media (max-width:820px){
  .wpwrap{padding:6px 16px}
  .wpperson dl.ed{grid-template-columns:1fr;gap:2px}
}