/* Layout: a registry office. Paper ground, white work surfaces, navy ink, hairline rules.
   Registration yellow belongs to the decal and nothing else. Light theme only, by brief. */
:root{
  color-scheme: light;
  --paper:#F6F3EC; --surface:#FFFFFF; --ink:#1F2A44; --ink-2:#3E4A63; --muted:#5A6275;
  --line:rgba(31,42,68,.14); --line-2:rgba(31,42,68,.10); --line-3:rgba(31,42,68,.24); --edge:rgba(31,42,68,.38);
  --tint:#F1EEE7; --tint-2:#ECE8DF; --tint-3:#FBFAF7; --sel:#EDEFF3; --sel-2:#F4F5F8; --scrim:rgba(31,42,68,.32);
  --yellow:#F2C14E; --yellow-edge:#C99B2E; --ochre:#9C7A24; --ochre-ink:#7A5D14;
  --green:#2F7D4A; --green-bg:#E3F1E6; --green-fg:#1E6B3A;
  --amber:#C7791A; --amber-bg:#FBEBD2; --amber-fg:#8A4B00;
  --red:#B83A32; --red-bg:#F7E1DD; --red-fg:#9A2B25; --red-row:#FCF3F1;
  --slate:#6B7488; --slate-bg:#E7EAF0; --slate-fg:#3E4A63;
  --grey-badge:#ECEAE4; --grey-edge:#CFCBC2; --grey-year:#9AA0AC;
  --chrome:#25282F; --chrome-2:#30343D; --chrome-fg:#EEF0F3; --chrome-muted:#B4BAC6;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{background:var(--paper)}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mono{font-family:var(--mono);font-size:13px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- prototype chrome (not part of the product) ---------- */
.demo{background:var(--chrome);color:var(--chrome-fg);font-size:13px;line-height:18px}
.demo-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:46px;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.demo-tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.02em}
.demo-tag i{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--chrome-muted);border-radius:4px;color:var(--chrome-muted)}
.demo-note{color:var(--chrome-muted)}
.demo-grp{display:inline-flex;align-items:center;gap:8px}
.demo-grp > span{color:var(--chrome-muted)}
.dseg{display:inline-flex;padding:2px;border-radius:6px;background:var(--chrome-2)}
.dseg button{height:28px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--chrome-fg);cursor:pointer;font-size:13px}
.dseg button[aria-pressed="true"]{background:var(--chrome-fg);color:var(--chrome);font-weight:600}
.demo select{height:30px;border-radius:6px;border:1px solid #4A4F5A;background:var(--chrome-2);color:var(--chrome-fg);padding:0 8px;font-size:13px}
.demo .dbtn{height:30px;padding:0 10px;border-radius:6px;border:1px solid #4A4F5A;background:transparent;color:var(--chrome-fg);cursor:pointer;font-size:13px}
.demo .dbtn.warn{border-color:#E7A39C;color:#FFD9D4}
.demo-spacer{flex:1 1 auto}

/* ---------- office shell ---------- */
.shell{display:flex;align-items:stretch;min-height:calc(100vh - 46px)}
.side{flex:0 0 248px;width:248px;border-right:1px solid var(--line);background:var(--paper);padding:22px 14px 24px;padding-left:max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:22px;position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto}
.main{flex:1 1 auto;min-width:0;padding:28px 40px 64px;padding-right:max(40px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px}
.comm{display:flex;flex-direction:column;gap:12px;padding:0 6px}
.comm-name{font-size:15px;line-height:20px;font-weight:700;text-wrap:balance}
.comm-kind{font-size:13px;line-height:18px;color:var(--muted);text-wrap:balance}
.season{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:13px;line-height:18px}
.season b{font-weight:600}
.season .mono{font-size:12px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 10px;border:1px solid transparent;border-radius:6px;color:var(--ink);text-decoration:none;cursor:pointer}
.nav a:hover{background:var(--tint)}
.nav a[aria-current="page"]{background:var(--surface);border-color:var(--line-3);font-weight:600}
.nav hr{border:0;height:1px;background:var(--line);margin:8px 10px}
.count{min-width:22px;height:20px;padding:0 6px;border-radius:4px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;line-height:20px;font-weight:600;text-align:center}
.who{display:flex;flex-direction:column;gap:14px;padding:16px 6px 0;border-top:1px solid var(--line)}
.who small{display:block;font-size:13px;line-height:18px;color:var(--muted)}
.mark{display:flex;align-items:center;gap:8px;font-size:13px}
/* The Baybook mark and serif wordmark, as on the site */
.bb-mark{display:block;flex:none;width:21px;height:16px}
.mark b{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.005em}
.topbar{display:none}
.drawer-scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(300px,86vw);z-index:41;background:var(--paper);border-right:1px solid var(--line-3);overflow-y:auto;padding:20px 14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-top:max(20px,env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:22px}
@media (max-width:980px){
  .shell{flex-direction:column}
  .side{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--paper)}
  .topbar .t{display:flex;flex-direction:column;min-width:0}
  .topbar .t b{font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .t span{font-size:12px;line-height:16px;color:var(--muted)}
  .main{padding:20px 16px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}

/* ---------- page header ---------- */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.phead-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.phead h1{margin:0;font-family:var(--serif);font-size:34px;line-height:40px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.phead p{margin:0;color:var(--muted)}
.phead-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.phead-a .stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.phead-a .stack small{font-size:12px;line-height:16px;color:var(--muted)}
@media (max-width:640px){.phead h1{font-size:28px;line-height:34px}.phead-a .stack{align-items:flex-start}}

/* ---------- buttons & controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border:1px solid var(--edge);border-radius:6px;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--tint-3)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#2A3757}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.xs{height:28px;padding:0 10px;font-size:12px}
.btn.block{width:100%}
.btn.tall{height:52px;font-size:16px}
.btn.danger{color:var(--red-fg);border-color:rgba(154,43,37,.5)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.btn.primary:disabled{opacity:.36}
.lnk{display:inline;border:0;background:none;padding:0;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.lnk.muted{color:var(--muted);font-weight:500}
.lnk.red{color:var(--red-fg)}
.lnk:disabled{opacity:.45;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font-size:13px;font-weight:600}
.field small{font-size:12px;line-height:16px;color:var(--muted)}
.inp{height:38px;padding:0 12px;border:1px solid var(--line-3);border-radius:6px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
.inp.mono{font-family:var(--mono);font-size:13px}
.inp:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 1px var(--ink)}
textarea.inp{height:auto;padding:10px 12px;line-height:21px;resize:vertical}
select.inp{padding-right:28px}
.inline-inp{height:30px;padding:0 8px;border:1px solid var(--edge);border-radius:4px;background:var(--tint-3);font-family:var(--mono);font-size:14px;color:var(--ink);vertical-align:baseline}
.inline-inp:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.inline-inp[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.chk input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:6px;background:var(--tint-2)}
.seg button{height:32px;padding:0 12px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink);font-size:13px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);border-color:var(--line-3);font-weight:600}
.seg button .mono{font-size:12px;color:var(--muted);margin-left:4px}
.switch{flex:none;position:relative;width:40px;height:24px;padding:0;border:0;border-radius:999px;background:#C9CCD3;cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.switch[aria-checked="true"]{background:var(--ink)}
.switch[aria-checked="true"]::after{left:19px}
.switch:disabled{opacity:.45;cursor:not-allowed}
.search{position:relative;display:flex;align-items:center;flex:1 1 300px;min-width:0}
.search svg{position:absolute;left:12px;pointer-events:none}
.search .inp{padding-left:36px}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--edge);border-bottom-width:2px;border-radius:4px;background:var(--surface);font-family:var(--mono);font-size:11px;color:var(--ink)}
.btn kbd{border:0;background:none;min-width:0;height:auto;padding:0;color:inherit;opacity:.65}

/* ---------- status vocabulary ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.current{background:var(--green-bg);color:var(--green-fg)}.pill.current::before{background:var(--green)}
.pill.expiring{background:var(--amber-bg);color:var(--amber-fg)}.pill.expiring::before{background:var(--amber)}
.pill.missing,.pill.expired,.pill.failed{background:var(--red-bg);color:var(--red-fg)}.pill.missing::before,.pill.expired::before,.pill.failed::before{background:var(--red)}
.pill.requested,.pill.pending{background:var(--slate-bg);color:var(--slate-fg)}.pill.requested::before,.pill.pending::before{background:var(--slate)}
.pill.paid{background:var(--green-bg);color:var(--green-fg)}.pill.paid::before{background:var(--green)}
.pill.refunded{background:var(--surface);color:var(--slate-fg);border-color:rgba(31,42,68,.28)}.pill.refunded::before{background:var(--grey-year)}
.decal{display:inline-flex;align-items:stretch;height:22px;border:1px solid var(--yellow-edge);border-radius:3px;overflow:hidden;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-size:12px;line-height:20px;font-weight:600;white-space:nowrap;vertical-align:middle}
.decal b{padding:0 4px;background:var(--ink);color:var(--yellow);font-weight:600}
.decal i{font-style:normal;padding:0 5px}
.decal.grey{border-color:var(--grey-edge);background:var(--grey-badge);color:var(--muted)}
.decal.grey b{background:var(--grey-year);color:var(--paper)}
.decal.pending{border:1px dashed var(--ochre);background:var(--surface)}
.decal.pending b{background:transparent;color:var(--ochre-ink)}
.decal.lg{height:30px;font-size:15px;line-height:27px;border-radius:4px}
.decal.lg b{padding:0 7px}.decal.lg i{padding:0 8px}
.decal.sm{height:20px;font-size:11px;line-height:18px}
.decal.sm b{padding:0 3px}.decal.sm i{padding:0 4px}
.ic{flex:none;vertical-align:middle}
.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--amber-fg)}
.t-red{color:var(--red-fg)}.t-amber{color:var(--amber-fg)}.t-green{color:var(--green-fg)}.t-slate{color:var(--slate-fg)}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}.dot.slate{background:var(--slate)}.dot.green{background:var(--green)}.dot.ring{border:1.5px solid var(--ink)}

/* ---------- surfaces ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;min-width:0}
.panel-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;padding:16px 20px 12px}
.panel-h h2,.panel-h h3{margin:0;font-size:16px;line-height:22px;font-weight:600}
.panel-f{padding:12px 20px 16px;border-top:1px solid var(--line-2);font-size:13px;line-height:18px;color:var(--muted)}
.panel-b{padding:0 20px 18px}
.row{border-top:1px solid var(--line-2)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:16px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.split{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.split > .a{flex:3 1 520px;min-width:0}
.split > .b{flex:2 1 340px;min-width:0}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.toolbar .grow{flex:1 1 auto}
.tile{display:flex;flex-direction:column;gap:4px;padding:16px 20px 18px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--slate);border-radius:6px;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;font:inherit}
.tile:hover{background:var(--tint-3)}
.tile.green{border-left-color:var(--green)}.tile.amber{border-left-color:var(--amber)}.tile.red{border-left-color:var(--red)}
.tile .top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:600}
.tile .top .mono{font-size:12px;color:var(--muted);font-weight:400}
.tile .big{font-size:44px;line-height:50px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .sub{color:var(--muted)}
.list{list-style:none;margin:0;padding:0}
.due{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px 20px;border-top:1px solid var(--line-2)}
.due .what{display:flex;gap:10px;min-width:0}
.due .what b{display:block;font-weight:600}
.due .what span{color:var(--muted)}
@media (max-width:560px){.due{grid-template-columns:1fr;gap:4px}.due > .mono{color:var(--muted)}}
.kv{display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:center;gap:12px;min-height:56px;padding:8px 20px;border-top:1px solid var(--line-2)}
.kv b{display:block;font-weight:600}
.kv small{display:block;font-size:13px;line-height:18px;color:var(--muted)}
.kv .n{font-family:var(--mono);font-size:22px;line-height:28px;font-weight:600;text-align:right}
.bars .bar-row{display:grid;grid-template-columns:132px minmax(0,1fr) 84px;align-items:center;gap:14px;min-height:52px;padding:6px 20px;border-top:1px solid var(--line-2)}
.bar-row b{display:block;font-weight:600}
.bar-row small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.track{display:block;height:12px;background:var(--tint)}
.track > span{display:block;height:12px;border-radius:0 4px 4px 0;background:var(--ink)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.trio > div{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border-right:1px solid var(--line-2)}
.trio > div:last-child{border-right:0}
.trio span{font-size:13px;color:var(--muted)}
.trio b{font-size:24px;line-height:30px;font-weight:600;font-variant-numeric:tabular-nums}
.trio b small{font-size:13px;font-weight:400;color:var(--muted)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{height:40px;padding:0 12px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line-2)}
.tbl td{height:44px;padding:0 12px;border-top:1px solid var(--line-2);vertical-align:middle}
.tbl tr:first-child td{border-top:0}
.tbl th:first-child,.tbl td:first-child{padding-left:16px}
.tbl th:last-child,.tbl td:last-child{padding-right:16px}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--tint-3)}
.tbl tr.sel td{background:#FAF8F3}
.tbl tr.alert td{background:var(--red-row)}
.tbl tr.focus td{background:var(--sel)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .ell{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .sub td{height:auto;padding-top:0;padding-bottom:10px;border-top:0}
.tbl .who b{font-weight:600}
.bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:8px 16px;background:var(--tint);border-bottom:1px solid var(--line)}
.bulk .div{width:1px;height:20px;background:var(--line-3)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;border-top:1px solid var(--line)}
.pager nav{display:flex;align-items:center;gap:4px}
.pager .pg{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-family:var(--mono);font-size:13px;cursor:pointer}
.pager .pg[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:50}
.over{position:fixed;top:0;right:0;bottom:0;width:min(600px,100%);z-index:51;background:var(--surface);border-left:1px solid var(--line-3);display:flex;flex-direction:column;overflow-y:auto;padding-right:env(safe-area-inset-right,0px)}
.over-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 24px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--surface);z-index:2}
.over-hd{display:flex;flex-direction:column;gap:16px;padding:22px 24px 20px}
.over-hd h2{margin:0;font-size:22px;line-height:28px;font-weight:600}
.dl{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 16px}
.dl dt{color:var(--muted)}
.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tabs{display:flex;gap:4px;padding:0 24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{height:42px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;font-size:14px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{border-bottom-color:var(--ink);font-weight:600}
.tabs .mono{font-size:12px;color:var(--muted)}
.tabbody{display:flex;flex-direction:column;gap:14px;padding:20px 24px 28px;background:var(--paper);flex:1 0 auto}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line-3);border-radius:6px;background:var(--surface);cursor:pointer;flex:none}
.dlg-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));overflow-y:auto}
.dlg-wrap .scrim{position:fixed}
.dlg{position:relative;z-index:61;width:min(640px,100%);margin:auto 0;background:var(--surface);border:1px solid var(--line-3);border-radius:8px;display:flex;flex-direction:column}
.dlg.wide{width:min(860px,100%)}
.dlg.narrow{width:min(520px,100%)}
.dlg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--line-2)}
.dlg-h h2{margin:0;font-size:18px;line-height:24px;font-weight:600}
.dlg-h p{margin:4px 0 0;font-size:13px;line-height:19px;color:var(--muted)}
.dlg-b{display:flex;flex-direction:column;gap:14px;padding:18px 24px}
.dlg-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:14px 24px;border-top:1px solid var(--line-2)}
.dlg-f .r{display:flex;gap:8px;margin-left:auto}
.toast{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:80;max-width:min(520px,calc(100% - 32px));display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:6px;background:var(--ink);color:#fff;font-size:14px;line-height:20px}
.toast .lnk{color:#fff}
.note-box{padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--tint-3);font-size:13px;line-height:19px}
/* Owners email can't reach, named, with letters to print for them */
.nomail{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap}
.nomail-a{display:flex;gap:8px;flex-wrap:wrap}
/* Recording a payment: the fees one check covers */
.paylines{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:6px;background:var(--surface)}
.payline{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border-top:1px solid var(--line-2);font-size:14px;line-height:19px;font-weight:400;cursor:pointer}
.payline:first-child{border-top:0}
.payline input{margin:0;width:16px;height:16px}
.pl-t{display:flex;flex-direction:column;min-width:0}
.pl-t small{font-size:12px;line-height:16px}
/* The reminder schedule: a switch, what and when, and its email */
.rem-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid var(--line-2)}
.rem-row:first-child{border-top:0}
.rem-row.on{background:var(--sel-2)}
.rem-row.off .rem-what{color:var(--muted)}
.rem-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rem-what{font-size:15px;line-height:24px}
.rem-sub{font-size:13px;line-height:18px}
.rem-act{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.rem-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:640px){.rem-row{grid-template-columns:auto minmax(0,1fr);padding:12px 16px}.rem-act{grid-column:2;justify-content:flex-start}}
.payline-none{margin:0;padding:10px 12px;font-size:13px}
.payline-sub{border-top:1px solid var(--line-2);background:var(--tint-3)}
.flag{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;background:var(--red-bg);color:var(--red-fg);font-size:13px;line-height:18px;font-weight:600}
.flag.amber{background:var(--amber-bg);color:var(--amber-fg)}
.flag.slate{background:var(--slate-bg);color:var(--slate-fg)}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.doc.bad{border-color:rgba(154,43,37,.45);color:var(--ink)}
.doc.old{background:transparent;border-style:dashed;border-color:var(--line-3)}
.doc-b{display:flex;gap:16px;padding:14px 16px 12px}
.doc-k{font-size:13px;font-weight:600;color:var(--muted)}
.doc-t{font-size:16px;line-height:22px;font-weight:600}
.doc-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 16px 12px;border-top:1px solid var(--line-2);font-size:12px;line-height:16px;color:var(--muted)}
.doc dl{margin:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:6px 12px;font-size:13px;line-height:18px}
.doc dt{color:var(--muted)}
.doc dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.thumb{flex:none;width:92px;height:120px;padding:10px 9px;border:1px solid var(--line-3);border-radius:4px;background:var(--tint-3);display:flex;flex-direction:column;gap:6px;overflow:hidden}
.thumb span{display:block;height:4px;background:rgba(31,42,68,.2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:18px}
.rules li{display:flex;gap:8px}
.rules li.no{color:var(--red-fg);font-weight:600}
.rules svg{margin-top:2px}
.req{display:grid;grid-template-columns:150px minmax(180px,1fr) minmax(240px,1.35fr) 230px;column-gap:20px;row-gap:10px;align-items:start;padding:16px 20px;border-top:1px solid var(--line-2);cursor:default}
.req.focus{background:var(--sel-2);outline:2px solid var(--ink);outline-offset:-2px}
.req .acts{display:flex;flex-direction:column;gap:8px}
.req .acts > div{display:flex;flex-wrap:wrap;gap:8px}
.req small{font-size:12px;line-height:16px;color:var(--muted)}
@media (max-width:1100px){.req{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.req .acts{grid-column:1/-1}}
@media (max-width:620px){.req{grid-template-columns:minmax(0,1fr)}}
.empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:72px 24px 76px;text-align:center}
.empty p{margin:0;font-size:20px;line-height:28px;font-weight:600}
.sheet{width:816px;max-width:100%;background:#fff;color:#111;border:1px solid var(--line-3);padding:48px 52px;font-size:12px;line-height:16px;margin:0 auto}
.sheet-wrap{overflow-x:auto;padding:4px}
.sheet h1{margin:0;font-family:var(--serif);font-size:30px;line-height:34px;font-weight:600}
.sheet .ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:2px solid #111}
.sheet .stamp{flex:none;display:flex;flex-direction:column;align-items:flex-end;padding:6px 10px;border:1.5px solid #111}
.sheet .stamp b{font-size:11px;line-height:14px}
.sheet table{width:100%;border-collapse:collapse}
.sheet th{text-align:left;font-size:11px;padding:6px 8px 6px 0;border-bottom:1.5px solid #111}
.sheet td{height:24px;padding:0 8px 0 0;border-bottom:1px solid #B8B8B8;white-space:nowrap}
.sheet .mono{font-size:12px}
.sheet .foot{display:flex;justify-content:space-between;gap:16px;margin-top:14px;padding-top:10px;border-top:1.5px solid #111;font-size:11px;line-height:15px}

/* ---------- dock map ---------- */
.map svg{display:block;width:100%;height:auto}
.map .slip{cursor:pointer}
.map .slip:focus{outline:none}
.map .slip:focus rect.r,.map .slip:hover rect.r{stroke-width:2.5}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;line-height:16px}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:10px;border:1px solid}
.wl{display:grid;grid-template-columns:32px minmax(0,1fr) 52px 104px;column-gap:12px;row-gap:4px;align-items:center;min-height:48px;padding:6px 20px;border-top:1px solid var(--line-2)}
.wl.hi{background:var(--sel-2)}
.wl .pos{font-family:var(--mono);font-size:13px;font-weight:600}
.wl b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.wl .r{text-align:right}

/* ---------- member (phone) ---------- */
.member-stage{display:flex;justify-content:center;padding:24px 16px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-height:calc(100vh - 46px)}
.phone{width:min(400px,100%);display:flex;flex-direction:column;gap:16px;font-size:15px;line-height:22px}
@media (min-width:720px){.phone{padding:24px 20px 22px;background:var(--paper);border:1px solid var(--line-3);border-radius:18px;min-height:780px}}
.phone h1{margin:0;font-family:var(--serif);font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.phone .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.phone .mh b{display:block;font-size:13px;line-height:18px;font-weight:700}
.phone .mh span{display:block;font-size:13px;line-height:18px;color:var(--muted)}
.phone .card{display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.phone .card.bad{border-color:rgba(154,43,37,.4)}
.phone .cap{margin:0;font-size:14px;line-height:20px;font-weight:600;color:var(--muted)}
.phone .row2{display:flex;gap:12px}
.phone .row2 b{display:block;font-weight:600}
.phone .row2 span{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.phone .foot{margin-top:auto;font-size:13px;line-height:19px;color:var(--muted);text-align:center}
.phone .inp{height:48px;font-size:16px}
.phone .field > span{font-size:14px}
.phone .dopt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-3);border-radius:8px;background:var(--surface);cursor:pointer;font-size:15px;line-height:20px}
.phone .dopt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.phone .dopt:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.phone .dopt input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink)}
.phone .dopt > span{display:block;min-width:0;color:var(--ink);font-size:15px;line-height:20px}
.phone .dopt b{display:block;font-weight:600}
.phone .dopt span span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.phone .addr{display:flex;flex-direction:column;gap:10px;margin:0;width:100%}
.phone .addr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.phone .addr-row > :first-child{grid-column:1/-1}
.phone .inp[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.phone details.card > summary{cursor:pointer;font-weight:600;list-style-position:inside}
.phone .rulestext{margin:0;white-space:pre-wrap;font-size:14px;line-height:21px}
.bigdecal{align-self:center;width:300px;max-width:100%;height:196px;padding:7px;display:flex;border:2px solid var(--ink);border-radius:16px;background:var(--yellow)}
.bigdecal > div{flex:1 1 auto;display:flex;flex-direction:column;border:1.5px solid rgba(31,42,68,.5);border-radius:10px;overflow:hidden}
.bigdecal .band{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 12px;background:var(--ink);color:var(--yellow);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em}
.bigdecal .face{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--ink)}
.bigdecal .yr{font-family:var(--mono);font-size:78px;line-height:78px;font-weight:600;letter-spacing:-.05em}
.bigdecal .no{display:flex;flex-direction:column;padding-left:16px;border-left:2px solid var(--ink);font-family:var(--mono)}
.bigdecal .no small{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.12em}
.bigdecal .no b{font-size:42px;line-height:46px;font-weight:600}
.cardphoto{height:168px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line-3);border-radius:8px;transform:rotate(-1.2deg);font-family:Helvetica,Arial,sans-serif;color:#3A3F4B;font-size:10px;line-height:13px;overflow:hidden}
.cardphoto b{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em}
.photo{height:190px;border:1px solid var(--line-3);border-radius:8px;background:var(--tint) center/contain no-repeat;overflow:hidden;display:flex;align-items:center;justify-content:center}
.photo img{max-width:100%;max-height:100%;object-fit:contain}
.stub{position:relative;display:flex;background:var(--surface);border:1px solid var(--line-3);border-radius:10px}
.stub .l{flex:1 1 auto;display:flex;flex-direction:column;padding:16px 18px 18px}
.stub .perf{flex:none;margin:14px 0;border-left:2px dashed rgba(31,42,68,.3)}
.stub .r{flex:none;width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 8px;text-align:center}
.stub .notch{position:absolute;right:88px;width:18px;height:18px;border-radius:50%;background:var(--paper)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line-3);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.boot{padding:48px 24px;text-align:center;color:var(--muted)}
/* ---------- prototype additions ---------- */
.col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.pill.due{background:var(--amber-bg);color:var(--amber-fg)}.pill.due::before{background:var(--amber)}
button.thumb{font:inherit;color:inherit}
button.tile{width:100%}
button.kv:hover{background:var(--tint-3)}
.tbl tr.sub.alert td,.tbl tr.sub.sel td{background:transparent}
.tbl tr.alert + tr.sub.alert td{background:var(--red-row)}
.tbl tr.sel + tr.sub.sel td{background:#FAF8F3}
.btn.primary kbd{color:#fff}
.req .acts .btn kbd{margin-left:2px}
.phone .card > .btn{margin-top:2px}
.phone .row2 > svg{margin-top:2px}
.phone .row2 b{font-size:15px}
.demo label.demo-grp{cursor:default}
.demo select{max-width:min(340px,70vw)}
.dlg-b .note-box b{font-weight:600}
.over .tabbody .panel{background:var(--surface)}
details > summary{list-style-position:outside}
.sheet table td,.sheet table th{font-size:11px}
@media (max-width:1180px){.demo-note{display:none}}
@media (max-width:640px){.demo .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.demo-in{gap:8px 10px}.demo select{max-width:46vw}}
@media (max-width:640px){
  .dlg-f .r{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .phead-a{width:100%}
  .phead-a > .btn{flex:1 1 auto}
  .over-hd{padding:18px 16px}.tabs{padding:0 12px}.tabbody{padding:16px 12px 24px}.over-top{padding:0 12px}
  .doc-b{flex-direction:column}.thumb{width:100%;height:150px}
  .doc dl{grid-template-columns:110px minmax(0,1fr)}
  .tile .big{font-size:36px;line-height:42px}
  .wl{grid-template-columns:28px minmax(0,1fr) 44px 74px;padding:6px 14px}
  .bars .bar-row{grid-template-columns:110px minmax(0,1fr) 72px;padding:6px 14px}
  .due{padding:12px 14px}
  .panel-h,.panel-b,.panel-f{padding-left:14px;padding-right:14px}
}
.over-top,.over-hd,.tabs{flex:none}
.reg-cards{display:none}
.rc{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px;align-items:start;padding:12px 14px;border-top:1px solid var(--line-2)}
.rc:first-child{border-top:0}
.rc.alert{background:var(--red-row)}.rc.sel{background:#FAF8F3}
.rc input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--ink)}
.rc-b{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.rc-t{display:flex;justify-content:space-between;gap:8px;align-items:center}
.rc-m{display:flex;gap:8px;align-items:center;min-width:0}
.rc-m > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-s{font-size:13px;line-height:18px;color:var(--muted)}
@media (max-width:720px){.reg-table{display:none}.reg-cards{display:block}}
/* ---------- office additions ---------- */
.pill.void{background:var(--surface);color:var(--muted);border-color:var(--line-3);text-decoration:line-through}.pill.void::before{background:var(--grey-year)}
.rowlink{padding:0;border:0;background:none;color:var(--ink);font-weight:600;text-align:left;cursor:pointer}
.rowlink:hover{text-decoration:underline;text-underline-offset:3px}
label.btn:focus-within,label.lnk:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.tbl-wrap{background:linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)) left center/32px 100% no-repeat local,linear-gradient(to left,var(--surface) 30%,rgba(255,255,255,0)) right center/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(31,42,68,.16),rgba(31,42,68,0)) left center/10px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(31,42,68,.16),rgba(31,42,68,0)) right center/10px 100% no-repeat scroll}
.bk-list{display:none}
.bk-list li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-2);font-size:13px;line-height:18px}
@media (max-width:720px){.bk-grid{display:none}.bk-list{display:block}}
@media (max-width:1100px){.req-head{display:none}}
@media (hover:none),(max-width:720px){.kbd-hints{display:none!important}}
.setup-list .list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:48px;padding:6px 20px;border-top:1px solid var(--line-2)}
.setup-list .ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1.5px solid var(--edge);border-radius:50%;color:#fff}
.setup-list li.ok .ck{background:var(--green);border-color:var(--green)}
.setup-list li.ok .t{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(90,98,117,.5)}
.setup-list .panel-h h2{display:flex;gap:10px;align-items:baseline}
.pc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pc-list li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:21px}
.pc-list li > span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-list .ic{flex:none;color:var(--ink)}
.demo .dbtn.hi{background:var(--chrome-fg);border-color:var(--chrome-fg);color:var(--chrome);font-weight:600}
.demo .dbtn[aria-pressed="true"]{border-color:var(--chrome-muted)}
.payrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line-2)}
.payrow:first-child{border-top:0}
.payrow.total{border-top-color:var(--line-3)}

/* ---------- the ? tip ---------- */
.tipw{display:inline-flex;vertical-align:middle;line-height:0}
/* The "?" button: an 18 px circle drawn inside a 32 px target, taking an 18 px slot in the line. */
.tip{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-7px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);font-family:var(--sans);font-size:11px;line-height:1;font-weight:700;letter-spacing:0;text-transform:none;cursor:help;flex:none;vertical-align:middle}
.tip::before{content:"";position:absolute;z-index:-1;left:7px;top:7px;width:18px;height:18px;box-sizing:border-box;border:1px solid var(--edge);border-radius:50%;background:var(--surface)}
.tip:focus-visible{outline-offset:-4px}
.tip:hover,.tip[aria-expanded="true"]{color:#fff}
.tip:hover::before,.tip[aria-expanded="true"]::before{background:var(--ink);border-color:var(--ink)}
.tip-pop{position:fixed;z-index:120;padding:10px 12px;border-radius:8px;background:var(--ink);color:#fff;font-family:var(--sans);font-size:13px;line-height:19px;font-weight:400;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;box-shadow:0 8px 24px rgba(31,42,68,.24);pointer-events:none}

/* ---------- guided setup ---------- */
.wz-stage{display:flex;justify-content:center;padding:24px 16px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-height:calc(100vh - 46px)}
.wz{width:min(580px,100%);display:flex;flex-direction:column;gap:22px}
.wz.wide{width:min(1000px,100%)}
.wz-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:36px}
.wz-top > :last-child{justify-self:end}
.wz-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:20px;line-height:1;letter-spacing:-.01em}
.wz-brand .bb-mark{width:26px;height:19.5px}
.wz-dots{display:inline-flex;gap:6px}
.wz-dots span{width:24px;height:4px;border-radius:2px;background:var(--line-3)}
.wz-dots span.on{background:var(--ink)}
.wz-q{display:flex;align-items:center;gap:10px;margin-top:20px}
.wz-q h1{margin:0;font-family:var(--serif);font-size:38px;line-height:44px;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.wz-q h1:focus{outline:none}
.wz-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wz-type{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:124px;padding:16px;border:1px solid var(--line-3);border-radius:10px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:border-color .12s,box-shadow .12s}
.wz-type:hover{border-color:var(--edge)}
.wz-type[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.wz-type .ic{margin-bottom:auto;color:var(--ink)}
.wz-type b{font-size:15px;line-height:20px}
.wz-type span{font-size:13px;line-height:18px;color:var(--muted)}
.wz-big{height:62px!important;padding:0 16px!important;font-family:var(--serif);font-size:22px!important}
.wz-words{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line-3);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--edge)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip .mono{margin-left:6px;font-size:12px;font-weight:500;opacity:.8}
.wz-wordgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.wz-row{border:1px solid var(--line-3);border-radius:10px;background:var(--surface)}
.wz-row.on{border-color:var(--edge)}
.wz-row-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 16px}
.wz-row-t{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.wz-row-b{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.wz-sub{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;padding-top:12px;border-top:1px solid var(--line-2)}
.wz-sub > span{display:inline-flex;align-items:center;gap:6px}
.wz-money{display:inline-flex;align-items:center;gap:6px;font-size:16px}
.wz-money .inp{width:104px;font-size:16px}
.wz-due{display:inline-flex;align-items:center;gap:8px}
.wz-due .inp{width:auto}
.wz-yn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wz-yn .wz-type{min-height:64px;align-items:center;justify-content:center}
.wz-yn .wz-type b{font-size:17px}
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper .inp{width:76px;text-align:center;font-size:16px}
.stepper .iconbtn{font-size:18px;font-weight:600}
.wz-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:74px;padding:14px 16px;border:1px solid var(--line-3);border-radius:10px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.wz-opt:hover{border-color:var(--edge)}
.wz-opt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
label.wz-opt:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.wz-opt > .ic{flex:none}
.wz-opt-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wz-opt-t b{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:20px}
.wz-opt-t > span{font-size:13px;line-height:18px}
.wz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.wz-foot .btn.tall{min-width:180px}
.wz-done{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;margin-top:12px}
.wz-done .wz-q{margin-top:8px}
.wz-phone{pointer-events:none;user-select:none}
.wz-phone .phone{width:100%;min-height:0;max-height:640px;overflow:hidden;padding:22px 18px;background:var(--paper);border:1px solid var(--line-3);border-radius:22px;box-shadow:0 14px 36px rgba(31,42,68,.10);-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
@media (max-width:860px){.wz-done{grid-template-columns:1fr}.wz-phone{display:none}}
@media (max-width:560px){
  .wz{gap:18px}
  .wz-q{margin-top:8px}
  .wz-q h1{font-size:30px;line-height:36px}
  .wz-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-type{min-height:108px;padding:14px}
  .wz-wordgrid{grid-template-columns:1fr}
  .wz-foot .btn.tall{min-width:0;flex:1 1 auto}
  .wz-dots span{width:16px}
}
.phone .row2 span.tipw{display:inline-flex;margin-left:4px}
.phone .row2 span.tip-pop{display:block;font-size:13px;line-height:19px;color:#fff}
.wz-back{display:inline-flex;align-items:center;gap:6px;height:40px;text-decoration:none}
.wz-back:hover{text-decoration:underline}
.demo select{max-width:min(270px,60vw)}
@media (max-width:1560px){.demo-note{display:none}}
.wz-q{display:block;font-family:var(--serif);font-size:38px;line-height:44px}
.wz-q h1{display:inline}
.wz-q .tipw{margin-left:10px;vertical-align:8px}
@media (max-width:560px){.wz-q{font-size:30px;line-height:36px}.wz-q .tipw{vertical-align:5px}}
/* all-set mark, used when owners get no sticker */
.smark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid}
.smark.ok{background:var(--green-bg);color:var(--green-fg);border-color:rgba(47,125,74,.45)}
.smark.wait{background:var(--amber-bg);color:var(--amber-fg);border-color:rgba(199,121,26,.45)}
.smark.bad{background:var(--red-bg);color:var(--red-fg);border-color:rgba(184,58,50,.4)}
.smark.lg{width:52px;height:52px;border-width:2px}
.smark .ic{stroke-width:2.4}
.wz-types.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.wz-types.three{grid-template-columns:1fr}.wz-types.three .wz-type{min-height:0;flex-direction:row;align-items:center;gap:12px}.wz-types.three .wz-type .ic{margin-bottom:0}.wz-types.three .wz-type span{display:block}}
/* messages */
.msg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.msg-split{grid-template-columns:1fr}}
.mailview{background:var(--tint-3)}
.mailview .panel-b{padding-top:16px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:21px;overflow-wrap:anywhere}
.msg-recips,.acct-list{margin:0;max-height:380px;overflow:auto}
.msg-recips li,.acct-list li{display:block;min-height:0;padding:0}
.msg-recips li:first-child,.acct-list li:first-child{border-top:0}
.rcp{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rcp:hover{background:var(--sel-2)}
.rcp.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--ink)}
.rcp:disabled{cursor:default}
.acct-due{margin:0}
.acct-due li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:0;padding:7px 0}
.acct-msg{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 14px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.acct-msg:hover{background:var(--sel-2)}
.msg-tbl td{vertical-align:top}
.msg-tbl tr.click:hover td{background:var(--sel-2)}
@media (max-width:560px){.acct-msg{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}.acct-msg > :first-child{grid-column:1/-1}}
@media (max-width:560px){
  .msg-tbl thead{display:none}
  .msg-tbl,.msg-tbl tbody{display:block}
  .msg-tbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:12px 16px;border-top:1px solid var(--line-2)}
  .msg-tbl tr:first-child{border-top:0}
  .msg-tbl td,.msg-tbl td.nowrap{display:block;height:auto;padding:0 !important;border:0;white-space:normal}
  .msg-tbl td:nth-child(1){order:1;flex:1 1 auto}
  .msg-tbl td:nth-child(5){order:2;font-size:12px;color:var(--muted)}
  .msg-tbl td:nth-child(2){order:3;flex:1 1 100%}
  .msg-tbl td:nth-child(3){order:4;font-size:13px;color:var(--muted)}
  .msg-tbl td:nth-child(3)::before{content:'To '}
  .msg-tbl td:nth-child(4){order:5;font-size:13px;color:var(--muted)}
  .msg-tbl td:nth-child(4)::before{content:'· by '}
  .msg-tbl tr.click:hover td{background:transparent}
  .tosend-tbl th:nth-child(4),.tosend-tbl td:nth-child(4),.tosend-tbl th:nth-child(5),.tosend-tbl td:nth-child(5){display:none}
  .tosend-tbl td{white-space:normal}
}
/* the sign-up handoff from the Baybook site, and the plan step */
.wz-from{margin:-8px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.wz-from .lnk{font-size:14px}
a.wz-brand{color:var(--ink);text-decoration:none;border-radius:4px}
a.wz-brand:hover{text-decoration:underline;text-underline-offset:3px}
.wz-types.three .wz-plan{min-height:0;gap:4px}
.wz-plan b{display:flex;align-items:center;gap:8px;font-size:16px;line-height:22px}
.wz-type .wz-price{color:var(--ink);font-size:14px;line-height:20px}
.wz-type .wz-price .serif{font-family:var(--serif);font-size:30px;line-height:36px;font-weight:600}
.wz-type .wz-fit{font-size:11px;line-height:16px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--green-bg);color:var(--green-fg)}
.plan-terms{font-size:14px;line-height:21px}
.wz-card3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wz-est{width:96px;text-align:center}
.demo .dlink{color:var(--chrome-fg);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.demo .dlink:hover{color:#fff}
@media (max-width:560px){
  .wz-types.three .wz-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px}
  .wz-types.three .wz-plan b{grid-column:1;grid-row:1}
  .wz-types.three .wz-plan .wz-price{grid-column:2;grid-row:1 / span 2;display:flex;align-items:baseline;gap:2px}
  .wz-types.three .wz-plan .wz-price .serif{display:inline;font-size:26px;line-height:30px}
  .wz-types.three .wz-plan > span:last-child{grid-column:1;grid-row:2}
}

/* ---------- platform: save state, account menu, document frames ---------- */
.who .save{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.save::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
.save.busy::before{background:var(--amber)}
.save.bad{color:var(--red-fg)}
.save.bad::before{background:var(--red)}
.acct{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.acct-menu{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px;padding:10px 12px;align-self:stretch;background:var(--surface);border:1px solid var(--line-3);border-radius:6px;font-size:14px}
.acct-menu a,.acct-menu button{font-size:14px}
.acct-menu hr{align-self:stretch;border:0;height:1px;background:var(--line);margin:2px 0}
.docframe{display:block;width:100%;height:min(560px,70vh);border:1px solid var(--line-2);border-radius:6px;background:#fff}
label.btn.disabled{opacity:.55;pointer-events:none}
.boot{min-height:60vh;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--muted);font-size:15px}

/* ---------- review: one decal across site and app ----------
   The row badge and the owner's big decal are the site's die-cut decal (components/marketing/Decal.tsx). */
.decal2{display:inline-block;flex:none;vertical-align:middle;overflow:visible}
.decal2 path{fill:var(--yellow);stroke:var(--ink);stroke-width:1}
.decal2 text{font-family:var(--mono);font-weight:500;fill:var(--ink)}
.decal2.grey path{fill:var(--surface);stroke:var(--grey-year)}
.decal2.grey text{fill:var(--muted)}
.decal2.pending path{fill:var(--surface);stroke:var(--ochre);stroke-dasharray:3 2}
.decal2.pending text{fill:var(--ochre-ink)}
.bigdecal2{display:block;align-self:center;width:280px;max-width:100%;height:auto}
.bigdecal2 .f{fill:var(--yellow);stroke:var(--ink)}
.bigdecal2 .s{fill:none;stroke:var(--ink)}
.bigdecal2 text{fill:var(--ink)}
.bigdecal2.grey .f{fill:var(--surface);stroke:var(--grey-year)}
.bigdecal2.grey .s{stroke:var(--grey-year)}
.bigdecal2.grey text{fill:var(--muted)}
/* An empty first slot in a footer row shouldn't push a lone button off the edge on phones */
.wz-foot > span:empty{display:none}
.wz-foot > span:empty + .btn{margin-left:auto}
/* An email address reads better in the sans than in the serif used for a community's name */
.wz-big.sans{font-family:var(--sans);font-size:18px!important}
/* importing a spreadsheet: the columns, every row, the fixes (office dialog and sign-up) */
.imp-steps{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.imp-steps > span.on{font-weight:700;color:var(--ink)}
.imp-steps > span.done{color:var(--ink)}
.imp-map select.inp{height:32px;width:auto;max-width:min(240px,48vw)}
.imp-map tr.off td b{color:var(--muted);font-weight:600}
.imp-map .imp-ex{display:none;font-size:12px;line-height:16px;color:var(--muted);font-weight:400;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-fix{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}
.imp-fix > span:first-child{min-width:0;flex:1 1 260px;overflow-wrap:anywhere}
.imp-fix-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.imp-fix-use{display:inline-flex;gap:8px;align-items:center}
.imp-fixed{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.imp-fixed > span{overflow-wrap:anywhere}
.imp-trio{border:1px solid var(--line-2);border-radius:6px}
.imp-trio > div{padding:10px 16px}
.imp-cards{display:none;border:1px solid var(--line-2);border-radius:6px}
.imp-cards li{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-top:1px solid var(--line-2);font-size:14px;line-height:20px;overflow-wrap:anywhere}
.imp-cards li:first-child{border-top:0}
.imp-cards li.alert{background:var(--red-row)}
.imp-cards .imp-st{font-size:13px;color:var(--muted)}
@media (max-width:720px){.imp-table{display:none}.imp-cards{display:block}.imp-map .imp-ex{display:block}.imp-map .imp-ex-col{display:none}.imp-trio > div{padding:8px 10px}.imp-trio b{font-size:20px;line-height:26px}}
/* sign-up: a yes or no question in a row */
.wz-ask{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.wz-ask-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.wz-ask-t b{font-size:16px;line-height:22px}
.wz-ask-t .muted{font-size:14px;line-height:20px}
/* kinds with their own rules and fees */
.kind-fees{display:inline-flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-family:var(--sans);font-size:14px;white-space:normal}
.kinds-tbl td{height:48px}
/* Settings → Sticker numbers */
.num-panel{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.num-head{display:flex;gap:12px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.num-look{display:inline-flex;gap:10px;align-items:center}
.num-fmt{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);gap:12px}
.num-fmt .field{margin:0}
.num-hint{margin:0;font-size:13px;line-height:18px}
.num-how{display:flex;flex-direction:column;gap:8px}
.num-roll{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;padding-left:26px;font-size:14px}
.num-save{display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:560px){.num-fmt{grid-template-columns:minmax(0,1fr) 72px}.num-fmt .field:last-child{grid-column:1/-1}.num-roll{padding-left:0}}
/* Giving stickers their numbers */
.numdlg-list{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:6px}
.numdlg-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,220px);gap:6px 14px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-2)}
.numdlg-row:first-child{border-top:0}
.numdlg-who{min-width:0;overflow-wrap:anywhere;font-size:14px;line-height:19px}
.numdlg-row .inp{width:100%}
.numdlg-row .msg{grid-column:1/-1;font-size:13px;line-height:18px}
@media (max-width:560px){.numdlg-row{grid-template-columns:minmax(0,1fr)}}
.kinds-move{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}
.kinds-move > span:first-child{min-width:0;flex:1 1 260px;overflow-wrap:anywhere}
.kinds-move select.inline-inp{max-width:min(260px,60vw)}
.kinds-move-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.imp-panel{background:var(--surface);border:1px solid var(--line-2);border-radius:6px}
.imp-table td{height:auto;padding-top:9px;padding-bottom:9px;line-height:20px}
.imp-table .imp-who b{font-weight:600;white-space:nowrap}
.imp-table .imp-sub{display:block;font-size:13px;line-height:18px;color:var(--muted);max-width:280px;overflow-wrap:anywhere}
.imp-table .imp-sub.t-red{color:var(--red-fg)}
.imp-table .imp-what{min-width:190px}
.imp-table .imp-st{min-width:150px;font-size:13px;line-height:18px;color:var(--muted)}
.imp-cards{background:var(--surface)}
@media (max-width:720px){.imp-map{table-layout:fixed}.imp-map th:first-child,.imp-map td:first-child{width:44%}.imp-map select.inp{width:100%;max-width:none}.imp-map .imp-ex{max-width:100%}.imp-map td:first-child b{overflow-wrap:anywhere}}
.dlg.xwide{width:min(1100px,100%)}
.imp-table .imp-who{min-width:180px}
.kinds-tbl .kt-l{display:none}
@media (max-width:720px){
  .kinds-tbl thead{display:none}
  .kinds-tbl,.kinds-tbl tbody,.kinds-tbl td{display:block}
  .kinds-tbl tr{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:12px 0;border-top:1px solid var(--line-2)}
  .kinds-tbl tr:first-child{border-top:0}
  .kinds-tbl td{height:auto;padding:0!important;border:0}
  .kinds-tbl td:first-child{flex:1 1 100%}
  .kinds-tbl td:first-child .inline-inp{width:100%!important}
  .kinds-tbl .kt-l{display:inline}
  .kinds-tbl .kt-n{font-family:var(--sans);color:var(--muted);font-size:13px}
}

/* ---------- skip link, signed-out note, account menu confirm ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;border-radius:6px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.main:focus{outline:none}
.signin-note{display:none}
@media (max-width:980px){.signin-note{display:flex}}
.acct-conf{display:flex;flex-direction:column;gap:8px;align-self:stretch;padding-top:8px;border-top:1px solid var(--line);font-size:13px;line-height:18px}
.team-rm{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 0;white-space:normal}
/* ---------- slips as a list on phones, where the dock map is too small ---------- */
.dock-list{display:none}
@media (max-width:599px){.map{display:none}.dock-list{display:flex;flex-direction:column;gap:14px;padding:0 8px 8px}}
.dock-group > b{display:block;margin:2px 0 6px;font-family:var(--mono);font-size:13px}
.dock-group ul{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.dock-slip{display:grid;grid-template-columns:14px 48px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:44px;padding:8px 12px;border:0;border-top:1px solid var(--line-2);background:var(--surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
.dock-group li:first-child .dock-slip{border-top:0}
.dock-slip.on{background:var(--sel-2);box-shadow:inset 3px 0 0 var(--ink)}
.dock-slip i{width:14px;height:14px;box-sizing:border-box;border:1.5px solid;border-radius:3px}
.dock-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-st{font-size:12px;color:var(--muted)}
/* site maps: the office's own map and the drawn layout's tools */
.smap{display:flex;flex-direction:column;gap:10px}
.smap-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.smap-box{position:relative;overflow:hidden;width:100%;max-height:70vh;min-height:240px;border:1px solid var(--line-2);border-radius:6px;background:#EFEBE3;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.smap-box.editing{touch-action:none}
.smap-box.armed{cursor:crosshair}
.smap-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;user-select:none}
.pin{position:absolute;transform:translate(-50%,-50%) scale(var(--ps,1));min-width:30px;height:24px;padding:0 6px;border:1.5px solid var(--bd);border-radius:5px;background:var(--bg);font:600 12px/20px var(--mono);color:#1F2A44;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.28)}
.pin.dash{border-style:dashed}
.pin.on{border:2.5px solid #1F2A44;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.35);z-index:2}
.pin:focus-visible{outline:2px solid #1F2A44;outline-offset:2px}
.smap-box.editing .pin{cursor:move}
.smap-tools{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px;z-index:3}
.smap-tools button{width:34px;height:32px;border:1px solid var(--line-3);border-radius:6px;background:var(--surface);color:var(--ink);font:600 16px/1 var(--sans);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.smap-tools button.fit{font-size:11px}
.smap-bar{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.smap-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.smap-note{margin:0;font-size:13px;line-height:18px}
.smap-empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:16px;border:1px dashed var(--line-3);border-radius:6px}
.dlg.xl{width:min(1320px,100%)}
.smap-edit{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start}
.smap-edit .smap-box{max-height:calc(100vh - 230px)}
.smap-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.smap-hint{font-size:13px;padding:6px 10px;border-radius:6px;background:var(--sel-2)}
.smap-side{display:flex;flex-direction:column;gap:12px;font-size:14px}
.smap-list{display:flex;flex-wrap:wrap;gap:6px;max-height:240px;overflow:auto}
.smap-chip{height:28px;padding:0 8px;border:1px solid var(--line-3);border-radius:5px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer}
.smap-chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sel-2)}
.dock-set{display:flex;flex-direction:column;gap:8px;padding:10px 0 2px;border-top:1px solid var(--line-2)}
.dock-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dock-row .inp{width:200px;height:32px}
@media (max-width:980px){.smap-edit{grid-template-columns:1fr}}
@media (max-width:599px){.smap{display:none}}
/* the public forms' links, under a page's panel */
.form-row{display:flex;gap:12px;align-items:flex-start}
.gd2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;align-items:start}
.form-row .switch{flex:none;margin-top:1px}
.req-how{display:block;margin-top:2px;font-size:13px;color:var(--muted)}