/* ============ App surfaces: account, delegate portal, committee dashboard ============ */
.auth-page .site-foot{display:none}
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.auth-art{position:relative;overflow:hidden;display:grid;place-items:center;padding:120px 48px 60px;background:var(--mist);border-right:1px solid var(--line);color:var(--ink)}
.auth-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:url("/assets/img/seam-card.svg") center bottom/100% auto no-repeat;pointer-events:none}
.auth-art-in{position:relative;z-index:1;max-width:460px;display:grid;gap:20px}
.auth-art-in img{border-radius:14px}
.auth-art-title{margin:0;font:700 clamp(30px,3.4vw,44px)/1.1 var(--fd);letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
.auth-art ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:17px;color:var(--ink-2)}
.auth-art li{display:flex;gap:12px}
.auth-art li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--sea-tint) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M5 9.5l2.6 2.5L13 6.5%27 fill=%27none%27 stroke=%27%230F6E6B%27 stroke-width=%272%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center/18px no-repeat}
.auth-main{display:grid;place-items:center;padding:110px var(--gut) 60px;background:var(--paper);color:var(--ink);color-scheme:light}
.auth-card{width:100%;max-width:440px;display:grid;gap:14px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:14px;background:#E9EEF5}
.auth-tabs button{padding:11px;border:0;border-radius:10px;background:none;font-weight:600;cursor:pointer;color:var(--ink-2);transition:all .3s var(--ease)}
.auth-tabs button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 14px -6px rgba(var(--navy-rgb),.3)}
.auth-title{font-size:34px;margin-top:10px}
.auth-form{display:grid;gap:16px;margin-top:6px}
.auth-form .field label{color:var(--ink-2)}
.auth-form .input,.app .input{background:#fff;color:var(--ink)}   /* border: the shared --field-line (3:1 on white, tools/check-colour.mjs) */
.pw{position:relative}
.pw .input{padding-right:70px}
.pw-eye{position:absolute;right:8px;top:50%;translate:0 -50%;border:0;background:var(--mist);border-radius:8px;padding:6px 10px;font-size:14px;font-weight:600;cursor:pointer}
.pw-meter{height:5px;border-radius:5px;background:#E1E8F2;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;border-radius:5px;background:#E25555;transition:width .3s,background .3s}
.pw-meter i[data-level="ok"]{background:var(--gold)}.pw-meter i[data-level="strong"]{background:#16A34A}
.auth-submit{justify-content:center;padding:16px}
.auth-links{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center}
.linkbtn{border:0;background:none;color:var(--sea-2);font-weight:600;cursor:pointer;padding:4px}
.auth-error{margin:0;padding:12px 14px;border-radius:12px;background:#FDECEC;color:#9B1C1C;font-size:15px}
.auth-error p{margin:0}.auth-error ul{margin:6px 0 0;padding-left:20px}
.input[aria-invalid=true]{border-color:#B42318;box-shadow:0 0 0 1px #B42318}
.auth-notice{margin:0;padding:12px 14px;border-radius:12px;background:#E8F7EF;color:#14532D;font-size:15px}
.auth-closed{display:grid;gap:16px}
.auth-closed .chip{justify-self:start}
.auth-closed h1{font-size:32px}
.captcha:empty{display:none}
/* phones: the sticky header already takes its own space; what an account is for follows the card as a short list */
@media (max-width:900px){.auth{grid-template-columns:1fr;min-height:0}.auth-main{padding-top:24px;place-items:start center}.auth-art{order:1;place-items:start center;padding:28px var(--gut) 40px;border-right:0;border-top:1px solid var(--line)}.auth-art::after,.auth-art-in img,.auth-art-title{display:none}.auth-art-in{width:100%;max-width:440px;gap:14px}.auth-art ul{font-size:15px;gap:8px}}

/* ---------- app shell ---------- */
.app-page .site-foot{display:none}
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100svh;padding-top:76px;background:var(--mist);color:var(--ink);color-scheme:light}
.app-side{position:sticky;top:76px;height:calc(100svh - 76px);overflow:auto;padding:22px 14px;background:#fff;border-right:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;gap:2px}
.app-side .who{display:flex;gap:12px;align-items:center;padding:10px 10px 18px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.app-side .who .av{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font:700 16px var(--fu);background:var(--navy);color:#fff}
.app-side .who b{display:block;font-size:15px;line-height:1.2;word-break:break-word}
.app-side .who span{font-size:14px;color:var(--muted)}
.app-side .grp{margin:16px 12px 6px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.app-side a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;text-decoration:none;font-size:15px;color:var(--ink-2);transition:background .15s,color .15s}
.app-side a svg{width:18px;height:18px;flex:none;color:var(--muted)}
.app-side a:hover{background:var(--mist);color:var(--ink)}
.app-side a[aria-current]{background:var(--sea-tint);color:var(--navy);font-weight:600;box-shadow:inset 3px 0 0 var(--sea)}.app-side a[aria-current] svg{color:var(--sea)}
.app-side .badge{margin-left:auto;font-size:14px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--orange);color:#fff}
.app-side .spacer{flex:1}
/* Portal: Sign out follows the menu (not pushed to a foot that can sit below the fold before the page scrolls);
   on phones the menu folds behind one button that names the current page */
.portal-app .app-side .spacer{flex:none;margin:10px 12px;border-top:1px solid var(--line)}
.side-toggle{display:none}
.app-main{padding:28px clamp(16px,3vw,40px) 60px;min-width:0}
/* title and intro on the left, the page's actions top right whatever the intro's length; one column on phones */
/* Title and actions share a row only while the title keeps at least 22rem; a long action row moves under the title
   and wraps there, so buttons never squeeze the heading */
.app-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:24px}
.app-head>:first-child{flex:1 1 22rem;min-width:0}
.app-head>.btn-row{justify-content:flex-end;flex-wrap:wrap}
.app-head>.btn-row:empty{display:none}
@media (max-width:700px){.app-head>:first-child{flex-basis:100%}.app-head>.btn-row{justify-content:flex-start}}
.app-head h1{font-size:clamp(28px,3vw,38px)}
.app-head p{margin:6px 0 0;color:var(--muted)}
/* secondary actions (Export CSV): in the row on wider screens, in a "More" menu beside the H1 on phones */
.head-more{display:contents}
.head-more-btn{display:none}
@media (max-width:600px){
  .app-head:has(> .head-more-btn){position:relative}
  /* at least as tall as the More button beside it, so a one-line title never lets the button sit over the text below */
  .app-head:has(> .head-more-btn) h1{padding-right:92px;min-height:44px}
  .app-head>.head-more-btn{display:inline-flex;position:absolute;top:0;right:0}
  .app-head>.btn-row:not(:has(> :not(.head-more))){display:contents}
  .head-more{display:none;position:absolute;top:48px;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:6px;min-width:180px;padding:8px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 12px 30px -12px rgba(0,0,0,.35)}
  .app-head:has(> [data-head-more][aria-expanded="true"]) .head-more{display:flex}
}
.demo-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;margin-bottom:20px;border-radius:14px;background:#FFF7E0;box-shadow:inset 0 0 0 1px #F0D98C;color:#5E4A0E;font-size:14px}
.panel{background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--line),0 10px 30px -24px rgba(var(--navy-rgb),.35);padding:clamp(18px,2vw,26px);min-width:0}
.panel h2{font-size:20px;letter-spacing:-.01em;margin-bottom:14px}
.panel h3{font-size:17px}
.panels{display:grid;gap:18px}
.panels.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.panels.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.panels.c3{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.panels.c2,.panels.c3{grid-template-columns:1fr}}
/* three or four cards always fill the row (auto-fit), never leaving an empty quarter */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{position:relative;overflow:hidden;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.kpi small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi b{display:block;margin-top:6px;font:800 32px/1.05 var(--fu);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{font-size:14px;color:var(--muted)}
.prog{height:8px;border-radius:8px;background:var(--mist);overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;border-radius:8px;background:var(--sea);width:0;transition:width 1s var(--ease)}
/* tables */
.tbl-wrap{overflow-x:auto;margin:0 -4px;--tbl-bg:#fff;background:linear-gradient(to right,var(--tbl-bg) 30%,transparent) left/32px 100% no-repeat local,linear-gradient(to left,var(--tbl-bg) 30%,transparent) right/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(5,13,31,.16),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(5,13,31,.16),transparent) right/12px 100% no-repeat scroll}
dialog.modal .panel .tbl-wrap{--tbl-bg:var(--mist)}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid #EEF2F7;vertical-align:top}
.tbl tr:hover td{background:#FAFCFE}
.tbl td b{font-weight:600}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .muted{color:var(--muted);font-size:14px}
.tbl .next{display:block;margin-top:4px;max-width:28ch}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:14px;font-weight:700;white-space:nowrap;background:var(--mist);color:#3A475C}
.pill.ok{background:#E8F7EF;color:#15803D}.pill.warn{background:#FFF4D6;color:#8A6100}.pill.bad{background:#FDECEC;color:#B42318}.pill.info{background:#E3F4FC;color:#00648F}.pill.m{background:var(--orange-tint);color:var(--orange-2)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
/* the filters share the row: search takes the most room, the menus split the rest, so none is left alone on a line */
.toolbar .input{width:auto;min-width:180px;padding:9px 12px;font-size:14px}
.toolbar>select.input,.toolbar .fmore>select.input{flex:1 1 180px;max-width:320px}
.toolbar .grow{flex:2 1 240px}
.toolbar .field.grow{min-width:0}.toolbar .field.grow .input{width:100%;min-width:0}
.toolbar:has(> .field){align-items:flex-start}.toolbar:has(> .field)>.btn{margin-top:4px}
/* a date filter keeps its label ("From", "to") on the same line as its box */
.toolbar .tb-date{display:flex;align-items:center;gap:8px;flex:1 1 200px;max-width:280px}.toolbar .tb-date .input{flex:1;min-width:0}
@media (max-width:600px){.toolbar>.input,.toolbar .fmore>.input,.toolbar>.field,.toolbar>.tb-date{flex:1 1 100%;max-width:none;min-width:0}.toolbar .tb-date label{min-width:36px}}
.toolbar > .form-err{flex:1 0 100%}
.btn.xs{padding:8px 12px;font-size:14px}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;font:600 18px var(--fd);color:var(--ink);margin-bottom:6px}
.empty h1{font:600 18px var(--fd);color:var(--ink);margin:0 0 6px}
/* router skeleton while a view loads (static, no shimmer) */
.skel{display:grid;gap:14px}.skel i{display:block;border-radius:12px;background:var(--mist)}
.skel-h{height:38px;width:min(320px,70%)}.skel-p{height:16px;width:min(480px,90%)}.skel-box{height:120px}
/* a toolbar's extra filters (.fmore): always shown on wider screens, behind a Filter button on phones */
.toolbar .filter-btn{display:none}
.toolbar .fmore{display:contents}
@media (max-width:600px){.toolbar .filter-btn{display:inline-flex}.toolbar .filter-btn[aria-expanded="false"] + .fmore{display:none}}
/* forms in app */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}
/* parts of a form shown only when they apply (invoice billing, 'Remove the chosen file') */
.form-grid[hidden],.btn[hidden],.field[hidden]{display:none}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
/* day, month and year boxes (visa date of birth), each sized to what it holds */
.dob{display:flex;gap:12px;margin-top:6px}.dob span{display:grid;gap:4px}.dob .input{width:4.5em}.dob span:last-child .input{width:6em}
.app .field label,.app .field .lab{color:var(--ink-2)}
.app .seg span{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
.app .seg input:checked+span{background:var(--sea);color:#fff}
.counter{font-size:14px;color:var(--muted);text-align:right}
.counter.over{color:#B42318;font-weight:700}
.counter.under{color:#8A5300}
.authors{display:grid;gap:10px}
.author-row{display:grid;grid-template-columns:1.2fr 1.2fr 1.4fr auto auto auto;gap:8px;align-items:end;padding:10px;border-radius:12px;background:var(--mist)}
/* each field names itself: above the first row on wide screens (a column heading), in every row on phones */
.ar-f{display:grid;gap:4px;min-width:0}.ar-f>span{font:600 14px var(--fb);color:var(--ink-2)}
@media (min-width:801px){.author-row:not(:first-child) .ar-f>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.author-row .input{padding:9px 11px} /* 16px text: smaller makes iPhones zoom in */
.author-row>.check,.author-row>.iconbtn,.author-row>span:empty{margin-bottom:6px}
.iconbtn{border:0;background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;box-shadow:0 0 0 1px var(--line);font-size:16px}
.iconbtn:hover{box-shadow:0 0 0 1px var(--orange);color:var(--orange)}
/* on narrow screens each author is a small card: name, email and affiliation full width, then presenting and the buttons (44px
   buttons). After the base .iconbtn rule, which has the same specificity, so the phone size wins */
@media (max-width:800px){.author-row{grid-template-columns:1fr auto auto;align-items:center}.author-row .ar-f{grid-column:1/-1}.iconbtn{width:44px;height:44px}}
.drop{display:grid;place-items:center;gap:6px;padding:26px;border-radius:14px;border:2px dashed var(--line-2);background:#FAFCFE;text-align:center;color:var(--muted);cursor:pointer;transition:all .25s}
.drop:hover,.drop.over{border-color:var(--sea);background:var(--sea-tint)}
/* the file input is visually hidden inside the label, so the whole zone shows its keyboard focus */
.drop:focus-within{border-color:var(--sea);outline:3px solid var(--orange);outline-offset:2px}
.drop{position:relative}
/* a button inside a field (Add author, Remove attachment) is as wide as its label, never a full-width bar */
.field > .btn{justify-self:start}
/* the error summary opens the form, above its first field */
form.panel > [data-err]:first-child:not([hidden]){margin-bottom:20px}
/* a table row's actions: the main one starts at the cell's left edge, Withdraw comes last */
.row-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.talk-progress{margin:8px 0 0;font-variant-numeric:tabular-nums}
/* steps / timeline in portal */
.checklist{display:grid;gap:10px}
.check-item{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--mist);text-decoration:none;color:inherit;transition:transform .3s var(--ease)}
.check-item:hover{transform:translateX(4px)}
.check-item i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;background:var(--line);color:var(--muted)}
.check-item.done i{background:#16A34A;color:#fff}
.check-item.now i{background:var(--orange);color:#fff;box-shadow:0 0 0 5px var(--orange-tint)}
.check-item b{display:block;font-size:15.5px}
.check-item span{display:block;font-size:14px;color:var(--muted)}
/* Portal overview: one next step, where you are, then abstracts and dates, each said once */
.next-card{display:grid;gap:8px;justify-items:start;margin-bottom:16px;padding:clamp(18px,2vw,26px);border-radius:18px;background:var(--navy);color:var(--on-dark)}
.next-card .kick{margin:0;font:700 13px/1.2 var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--copper-pale)}
.next-card h2{margin:0;font:700 22px/1.25 var(--fd);color:inherit}
.next-card p{margin:0;max-width:62ch;color:var(--on-dark-2)}
.next-card .btn-row{margin-top:6px}
.next-card .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.track{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px}
.track li{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--muted)}
.track li::before{content:"";height:6px;border-radius:3px;background:var(--line-2)}
.track .ok{color:var(--ink)}.track .ok::before{background:var(--sea)}
.track .cur{color:var(--navy);font-weight:700}.track .cur::before{background:var(--navy)} /* copper is the button's alone */
@media (max-width:600px){.track{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}}
.home-two{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:800px){.home-two{grid-template-columns:1fr}}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mini-list li:last-child{border-bottom:0}
.mini-list li > :first-child{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.mini-list b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Registration: the summary is a two-column list (labels wrap, amounts never leave the card), and on wide screens it
   stays in view beside the form with the terms box and the pay button */
.sum-list{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:0;font-size:15px}
.sum-list dt{min-width:0;overflow-wrap:anywhere}
.sum-list dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sum-list .total{padding-top:10px;border-top:1px solid var(--line);font-weight:800;font-size:17px}
@media (min-width:900px){.reg-sum{position:sticky;top:92px;align-self:start}}
.book-again > summary{list-style:none}
.book-again > summary::-webkit-details-marker{display:none}
.book-again[open] > summary{margin-bottom:12px}
/* submission confirmation: the reference in large type */
.confirm-ref{margin:6px 0 10px}
.confirm-ref small{display:block;color:var(--muted)}
.confirm-ref b{display:block;font:600 clamp(28px,4vw,38px) var(--fd);letter-spacing:.02em;color:var(--ink)}
/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);max-width:100%;gap:14px;overflow-x:auto;padding-bottom:10px}
.kcol{background:var(--mist);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.kcol h3{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 6px}
.kcard{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 0 0 1px var(--line);cursor:grab;display:grid;gap:4px}
.kcard:active{cursor:grabbing}
.kcard b{font-size:15px}
.kcard span{font-size:14px;color:var(--muted)}
.kcol.over{box-shadow:inset 0 0 0 2px var(--sea)}
/* Phones: the columns stack as sections (heading and count, then the cards), so no stage hides off to the side;
   an empty column is just its heading. Cards still move with the stage select or press-and-hold drag. */
@media (max-width:600px){.kanban,.kanban.tasks{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}.kcol{min-height:0}}
/* switches */
.switch-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 18px;padding:16px 0;border-bottom:1px solid #EEF2F7}
.switch-row>:first-child{flex:1 1 220px;min-width:0}
.switch-row:last-child{border-bottom:0}
.switch-row b{display:block}
.switch-row span{font-size:14px;color:var(--muted)}
.switch{position:relative;flex:none;width:52px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .3s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .35s var(--ease)}
.switch input:checked+i{background:#16A34A}
.switch input:checked+i::after{transform:translateX(22px)}
.switch input:focus-visible+i{outline:2px solid var(--sea);outline-offset:2px}
/* charts */
.bars{display:flex;align-items:flex-end;gap:4px;height:140px;padding-top:10px}
.bars i{flex:1;min-width:4px;border-radius:3px 3px 0 0;background:var(--navy-3);height:var(--h,2%);transition:height .8s var(--ease);position:relative}
.bars i:hover{background:var(--orange)}
.hbars{display:grid;gap:10px}
.hbar{display:grid;grid-template-columns:150px 1fr 40px;gap:10px;align-items:center;font-size:14px}
.hbar div{height:10px;border-radius:10px;background:var(--mist);overflow:hidden}
.hbar div i{display:block;height:100%;border-radius:10px;background:var(--hc,var(--sea));width:var(--w,0)}
.hbar b{text-align:right;font-variant-numeric:tabular-nums}
.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--stops));display:grid;place-items:center;margin:auto}
.donut::after{content:attr(data-label);display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#fff;font:800 22px var(--fu);text-align:center}
/* modal */
dialog.modal{border:0;border-radius:20px;padding:0;width:min(560px,94vw);box-shadow:0 40px 100px -30px rgba(3,9,24,.6);color:var(--ink)}
dialog.modal::backdrop{background:rgba(5,13,31,.55);backdrop-filter:blur(4px)}
/* one column that never grows past the dialog: a wide select, toolbar or long title wraps instead of scrolling sideways */
.modal-in{padding:clamp(18px,5vw,26px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* phones: a long form's Save and Cancel stay at the foot of the dialog instead of below the fold */
@media (max-width:700px){dialog.modal .modal-in>form>.btn-row:last-child{--mp:clamp(18px,5vw,26px);position:sticky;bottom:calc(var(--mp) * -1);z-index:2;margin:0 calc(var(--mp) * -1) calc(var(--mp) * -1);padding:12px var(--mp) calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 var(--line)}}
.modal-in h2{font-size:24px;overflow-wrap:anywhere}
dialog.modal :is(select,.input,textarea,img,table){min-width:0;max-width:100%}
/* the Close button stays in the top corner while a long dialog scrolls; a bar of no height so it takes no room */
.modal-bar{position:sticky;top:0;z-index:2;height:0;display:flex;justify-content:flex-end}
.modal-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:8px 8px 0 0;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.modal-x:hover{background:var(--mist)}.modal-x svg{width:20px;height:20px}
.modal-bar+.modal-in :is(h1,h2):first-child{padding-right:36px}
/* the shared confirm dialog (ui.js ask): buttons name the outcome */
dialog.ask{width:min(520px,94vw)}
.ask h2{font-size:20px;margin-bottom:8px}
.ask .field{margin-top:12px}
.ask .btn-row{margin-top:18px}
.ask-money{display:flex;align-items:center;gap:6px}
.ask-money>span{font-weight:700;color:var(--ink-2)}
.ask-money .input{max-width:180px}
.ask-preview{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--mist);font-size:14px}
.ask-preview small{display:block;font-weight:600;color:var(--ink-2)}
.ask-preview p{margin:4px 0 0;white-space:pre-wrap}
/* form errors (ui.js showErrors): the message beside its field, and the summary at the top of the form */
.field-err{margin:2px 0 4px;color:#B42318;font-size:14px;font-weight:600}
html[data-theme="dark"] .field-err:not(dialog .field-err){color:#F2867E}
.form-err{flex:1 0 100%;grid-column:1/-1}
.auth-error a{color:inherit;text-decoration:underline}
/* invoice print */
.invoice{max-width:820px;margin:auto;background:#fff;border-radius:18px;padding:48px;box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.inv-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:36px}
.inv-top img{width:54px;border-radius:12px}
.inv-top h1{font-size:30px}
.inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;font-size:14px}
.inv-meta small{display:block;color:var(--muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.inv-total{display:flex;justify-content:flex-end;margin-top:20px}
.inv-total dl{display:grid;grid-template-columns:auto auto;gap:6px 30px;font-size:15px}
.inv-total dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.inv-total .grand{font:800 22px var(--fu)}
.inv-bank{border-top:1px solid var(--line);padding-top:14px;font-size:14px}
.inv-bank small{display:block;color:var(--muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.inv-bank dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 20px;margin:0}
.inv-bank dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .app-side{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:10px}
  .app-side .who,.app-side .grp,.app-side .spacer{display:none}
  .app-side a{white-space:nowrap}
  .portal-app{align-content:start}
  .side-toggle{display:flex;align-items:center;gap:6px;width:100%;min-height:52px;padding:10px var(--gut);border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px var(--fb);text-align:left;cursor:pointer}
  .side-toggle b{color:var(--navy)}.side-toggle b:not(:empty)::before{content:": ";margin-left:-6px;font-weight:600;color:var(--ink)} /* the colon follows the words, not the flex gap */
  .side-toggle::after{content:"";width:8px;height:8px;margin:0 4px 4px auto;border:solid var(--ink-2);border-width:0 2px 2px 0;rotate:45deg;transition:rotate .2s}
  .side-toggle[aria-expanded="true"]::after{rotate:-135deg;margin-bottom:-4px}
  .portal-app .app-side{display:none;flex-direction:column;overflow:visible;padding:8px 12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .portal-app.side-open .app-side{display:flex}
  .portal-app .app-side .who{display:flex}.portal-app .app-side .grp{display:block}.portal-app .app-side .spacer{display:block}
  .portal-app .app-side a{white-space:normal;min-height:44px}
}
@media print{
  .site-head,.app-side,.side-toggle,.app-head .btn-row,.demo-bar{display:none!important}
  /* a letter, invoice or certificate starts with its own letterhead: the portal's heading and bars stay on screen */
  .app-main:has(.invoice,.cert-doc) :is(.app-head,.view-bar,.view > .note:not(.inv-void)){display:none!important}
  @page{margin:15mm}
  .app{display:block;padding:0;background:#fff}
  .app-main{padding:0}
  .invoice{box-shadow:none;padding:0}
}
button.slot{border:0;text-align:left;cursor:pointer;width:100%;font:inherit}
.slot-grp{display:grid;gap:6px}
.slot-grp h2{margin:4px 0 0;font:700 14px var(--fb);color:var(--ink-2);font-variant-numeric:tabular-nums}
.slot.compact{padding:8px 12px 8px 16px}
.slot-meta{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.app .days{grid-template-columns:repeat(4,minmax(220px,1fr))}
.app .day header{top:0}
.check-item input[type=checkbox]{flex:none;width:20px;height:20px;accent-color:var(--sea)}
.app-page .head-row{height:64px}
/* one filled button per screen: in the portal the public call to action gives way to the page's own */
.app-page .nav-cta [data-phase-cta]{display:none}
@media (min-width:901px){.app-side{top:64px;height:calc(100svh - 64px)}}
.check-item i svg{width:16px;height:16px}
/* A short first cell (date, ref) stays on one line; one led by a title (<b>) wraps, so a long line never pushes the
   other columns out of view. A title's <b> keeps a readable width; a number cell never does (a score must not take
   200px). .lead caps a title cell; .clamp shows two lines of a long text. */
@media (min-width:821px){.tbl td:first-child:not(:has(> b)),.tbl td.ref,.tbl td.nowrap{white-space:nowrap}.tbl td:not(.num)>b:first-child{display:block;min-width:200px}.tbl td.lead{max-width:40ch}}
.tbl .linkbtn{min-height:24px;padding:0 6px;text-decoration:underline;text-underline-offset:3px}
/* Phones and tablets held upright: each row becomes a card (up to 820px, so a table never scrolls sideways on an
   iPad either). Cells take their column heading from data-label (set for every .tbl in ui.js),
   short cells sit side by side, titles and the row's actions take the full width so status and buttons stay in view. */
@media (max-width:820px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.tbl,.tbl tbody{display:block}
  .tbl tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 18px;padding:14px 4px;border-bottom:1px solid var(--line)}
  /* two fixed columns, so a label sits in the same place on every card; the reference, the title and the status
     (a cell that starts with a pill) lead each card in that order */
  .tbl td{display:block;flex:1 1 calc(50% - 9px);padding:0;border:0;min-width:0;overflow-wrap:anywhere}
  .tbl td:has(> input[type=checkbox]:only-child){order:-4;flex:0 0 auto}
  .tbl td.ref{order:-3;flex:1 1 0;color:var(--muted)}
  .tbl td.ref::before{content:none!important}
  .tbl td:not(.num):has(> b:first-child){order:-2}
  .tbl td:has(> .pill:first-child){order:-1;flex-basis:100%}
  .tbl td:has(> .pill:first-child)::before{content:none!important}
  .tbl .num{text-align:left}
  .tbl td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:700 13px/1.3 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .tbl td:not(.num):has(> b:first-child){flex-basis:100%}
  .tbl td:not(.num):has(> b:first-child)::before{content:none}
  .tbl td[colspan],.tbl td:last-child:has(.btn){flex-basis:100%}
  .tbl td:last-child:has(.btn){display:flex;flex-wrap:wrap;gap:8px}
  /* the title is the card's first line of content (a reference only sits above it as a muted eyebrow, and goes when
     there is none); an empty label makes no box, so the buttons line up with the text */
  .tbl td.ref:has(> .none){display:none}
  .tbl td[data-label=""]::before{content:none}
}
.tbl td .muted{display:block}
.tbl td .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* after .muted{display:block} */
dialog.modal{background:#fff;color-scheme:light;max-height:90vh;overflow:auto}
dialog.modal .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
dialog.modal .panel{background:var(--mist);box-shadow:none}
dialog.modal .input{background:#fff;color:var(--ink)}
dialog.modal .seg span{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
dialog.modal .seg input:checked+span{background:var(--sea);color:#fff}
dialog.modal .field label,dialog.modal .field .lab{color:var(--ink-2)}
.toolbar .btn{align-self:center}
.app>.app-main{max-width:100%}
@media (max-width:560px){.hbar{grid-template-columns:96px 1fr 36px}.inv-meta{grid-template-columns:1fr}}
.view{min-width:0}

/* ---------- committee workspace: overview band, tasks, inbox ---------- */
.prog{height:6px;border-radius:6px;background:var(--mist);overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--rib-sea),var(--rib-copper));transition:width .8s var(--ease)}
.week{margin-bottom:18px}
.deadlines,.tasklist,.msglist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.deadlines li{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center}
.deadlines li>b{display:grid;place-items:center;height:54px;border-radius:12px;background:var(--navy);color:#fff;font:800 20px/1 var(--fd)}
.deadlines li>b small{font:600 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--sea-light);margin-top:-8px}
.deadlines span,.tasklist span{display:block;font-weight:600;font-size:14.5px;line-height:1.35}
.deadlines small,.tasklist small{display:block;font-size:14px;color:var(--muted)}
.tasklist li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.tick{position:relative;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;padding:0}
/* the box stays 20px; its hit area is 44px on phones and 24px on desktop (design system) */
.tick::after{content:'';position:absolute;inset:-12px}
@media (min-width:900px){.tick::after{inset:-3px}}
.tick:hover{border-color:var(--sea);background:var(--sea-tint)}
.due{font-weight:600}.due.soon{color:#8A6100}.due.late{color:#B42318}
.alert{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#FDECEC;color:#7A1A12;font-size:14px}
.msglist a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--mist);text-decoration:none;color:inherit}
.msglist a:hover{background:var(--sea-tint)}
.msglist b{font-size:14.5px}.msglist span{font-size:14px;color:var(--muted)}.msglist small{font-size:14px;color:var(--ink-2)}
.msglist .muted,.tasklist .muted,.deadlines .muted{display:block;font-size:14px}
.kanban.tasks{grid-auto-columns:minmax(240px,1fr)}
.kcard.task{cursor:pointer}
.kcard.task:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.kcard .meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.kcard .av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font:700 13px var(--fd)}
.kempty{padding:14px;text-align:center;font-size:14px;color:var(--muted);border:1px dashed var(--line-2);border-radius:12px}
.msg-body{white-space:normal;line-height:1.6}
@media (max-width:1100px){.panels.c3.week{grid-template-columns:1fr}}
.tasklist small span,.deadlines small span{display:inline;font-size:inherit;font-weight:600}
.app{padding-top:0}
@media (min-width:901px){.app-side{top:65px;height:calc(100svh - 65px)}}

/* decisions */
.decide-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px;padding:14px 18px;border-radius:14px;background:#FFF7E0;box-shadow:inset 0 0 0 1px #F0D98C;color:#5E4A0E;text-decoration:none}
.decide-banner b{color:var(--ink)}.decide-banner span:last-child{font-size:14px}
.decision{margin-bottom:18px}
.decision>header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.decision>header h2{margin:0 0 4px;font-size:20px}
.decision .ctx{margin:10px 0 16px;padding:14px 16px;border-radius:12px;background:var(--mist);font-size:14.5px;color:var(--ink-2)}
.decision .ctx p{margin:0 0 8px}.decision .ctx p:last-child{margin:0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.opt{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:#fff}
.opt.mine{box-shadow:0 0 0 2px var(--sea)}
.opt.chosen{box-shadow:0 0 0 2px #15803D;background:#F3FBF6}
.opt-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.opt-head b{font:700 15.5px/1.35 var(--fd);color:var(--navy)}
.opt ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2);display:grid;gap:4px;flex:1}
.tally{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:14px;color:var(--muted)}
.tally .prog{margin:0}.tally .prog i.lead{background:var(--navy)}
.tally .voters{grid-column:1/-1;display:flex;gap:4px;min-height:4px}
.tally .av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:700 13px var(--fd)}
.decision .comments{margin-top:14px;font-size:14px;color:var(--ink-2)}.decision .comments h3{font-size:14px;margin-bottom:6px}
.decision .outcome{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#E8F7EF;color:#14532D}
.decision textarea.input{min-height:64px}
.opts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.opts{grid-template-columns:1fr}}
.abs-parts{display:grid;gap:14px}
.abs-part{display:grid;gap:6px}
.abs-part label{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:14px}
.abs-part label b{font:650 14.5px var(--fd);color:var(--navy)}
.abs-part label .muted{font-size:14px;white-space:nowrap}
.abs-part textarea.input{min-height:72px}

/* invitations and delegate view */
.inv-rows{display:grid;gap:8px}
.inv-set,.inv-row{border:0;margin:0;padding:0;min-width:0}
.inv-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.inv-row .field{margin:0}
@media (max-width:620px){.inv-row{grid-template-columns:1fr auto}.inv-row .field:first-of-type{grid-column:1/-1}}
.inv-res{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--mist);display:grid;gap:6px}
.inv-res p{margin:0;font-size:14px}
.inv-res.ok{background:#E8F7EF}.inv-res.warn{background:#FFF7E0}.inv-res.bad{background:#FDECEC}
.inv-res textarea.input{min-height:120px;font-size:14px}
.view-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;padding:12px 16px;margin-bottom:20px;border-radius:14px;background:var(--sea-tint);box-shadow:inset 0 0 0 1px var(--sea-pale);color:var(--navy);font-size:14px}
.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (max-width:560px){.sec-grid{grid-template-columns:1fr}}
.sec-grid .check-item{padding:8px 10px}

/* invitations (outreach) */
.ostat{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.obatch{flex-wrap:wrap;margin-bottom:16px}
.ochip{display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:12px;border:0;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;color:var(--ink-2);cursor:pointer}
.ochip b{font:800 18px var(--fd);color:var(--navy)}
.ochip.ok b{color:#15803D}.ochip.bad b{color:#B42318}.ochip.warn b{color:#8A6100}.ochip.info b{color:var(--sea-2)}
.tabs-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tabs-row button{padding:10px 14px;border:0;background:none;font:600 14.5px var(--fb);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs-row button:is([aria-selected="true"],[aria-pressed="true"]){color:var(--navy);border-bottom-color:var(--sea)}
.tabs-row button span{font-weight:500;color:var(--muted);margin-left:4px}
.bulk{display:flex;gap:10px;align-items:center;margin-bottom:10px;padding:8px 12px;border-radius:10px;background:var(--sea-tint);font-size:14px}
.otbl tr[data-open]{cursor:pointer}
.otbl td:first-child{width:44px;min-width:44px;cursor:default}
.otbl td .muted{display:block}
dialog.modal:has(.contact-sheet){width:min(1100px,96vw)}
.cs-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cs-head h2{margin:0 0 4px}
.cs-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;margin-top:12px}
@media (max-width:860px){.cs-grid{grid-template-columns:1fr}}
.cs-facts{font-size:14.5px}
.facts-list{margin:8px 0;padding-left:18px;display:grid;gap:6px}
.pub{padding:10px 12px;border-radius:10px;background:var(--mist)}
.journey-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jc{padding:4px 10px;border-radius:99px;background:var(--mist);color:var(--muted);font-size:14px;font-weight:600}
.jc.on{background:#E8F7EF;color:#15803D}
.hist{margin:6px 0 0;padding-left:18px;font-size:14px;display:grid;gap:4px}
.cs-draft textarea.input{font:14px/1.55 var(--fb)}

/* ---------- shared small pieces ---------- */
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--sea-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.av.sm{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:700 13px var(--fd);flex:none;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* A sideways scroller must be the containing block of its .sr-only labels: otherwise a label in a column scrolled
   out of view escapes the scroll box and widens the whole page (the Partners board's stage selects did, by 7px). */
.kanban,.tbl-wrap,.days{position:relative}
.hidden-note{margin:-6px 0 12px;font-size:14px;color:var(--muted)}
.bulk.off{display:none!important}
.add-email{display:grid;gap:8px;margin:10px 0;padding:12px;border:1px dashed var(--line-2);border-radius:10px;background:var(--mist)}
.add-email fieldset{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}.add-email legend{padding:0;margin-bottom:2px;font-weight:700}.add-email .btn{justify-self:start}
/* a heading between panels, sized like a panel's own heading */
.sec-h{font-size:20px;letter-spacing:-.01em;margin-bottom:12px}
.signed-as{margin:2px 0 6px;font-size:14px;color:var(--sea-2)}
.btn.danger{color:#A23B2A;border-color:#E7C3BC}

/* ---------- planning boards ---------- */
.board-lede{margin:-4px 0 14px;color:var(--muted);font-size:14.5px}
.shortlist-bar{position:sticky;top:8px;z-index:5;display:flex;gap:10px;align-items:center;padding:10px 14px;margin-bottom:12px;border-radius:12px;background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.shortlist-bar span{flex:1;font-weight:600}
.shortlist-bar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.pboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;align-items:start}
.pitem{position:relative;display:grid;gap:8px;padding:18px 18px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .2s}
.pitem:hover{box-shadow:var(--shadow);border-color:var(--line-2);transform:translateY(-1px)}
.pitem.picked{border-color:var(--copper);box-shadow:0 0 0 2px var(--copper-light)}
.pitem.out{opacity:.55}
.pitem header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pcat{font:600 13px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--sea-2)}
.pitem h3{font-size:17px;line-height:1.25;margin:0}
.pitem p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.prank{position:absolute;top:-10px;left:16px;padding:3px 9px;border-radius:999px;background:var(--copper);color:#fff;font:700 14px var(--fd)}
.pdet{display:flex;flex-wrap:wrap;gap:6px}
.pdet span{padding:3px 9px;border-radius:999px;background:var(--mist);font-size:14px;color:var(--ink-2)}
.psrc{font-size:14px!important;color:var(--muted)!important}
.tc{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--orange-tint);color:var(--orange-2);font-size:14px;font-weight:600}
.pitem footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.score{display:flex;flex-direction:column;gap:1px}
.score small{font-size:14px;color:var(--muted)}
.pmeta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.pick{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:14px;cursor:pointer}
.pick input{margin:0}
.stars{display:inline-flex;gap:1px;line-height:1}
.stars.avg i{font-style:normal;font-size:15px;color:#D3DAE2}
.stars.avg i.on{color:var(--copper)}
.stars.avg i.half{background:linear-gradient(90deg,var(--copper) 50%,#D3DAE2 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stars.mine button{border:0;background:none;padding:2px 3px;font-size:24px;line-height:1;color:#D3DAE2;cursor:pointer;transition:transform .12s,color .12s}
.stars.mine button.on{color:var(--copper)}
.stars.mine:hover button{color:var(--copper)}
.stars.mine button:hover~button{color:#D3DAE2}
.stars.mine button:hover{transform:scale(1.15)}
.pitem-sheet .cs-grid{grid-template-columns:1.1fr 1fr}
.pdl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0;font-size:14px}
.pdl dt{color:var(--muted)} .pdl dd{margin:0;font-weight:600}
.prate{display:grid;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--mist)}
.prate>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.prate b{min-width:96px;font-size:14px}
.pthread h3{margin-bottom:8px}
.thread{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:12px;max-height:46vh;overflow:auto}
.thread li{display:flex;gap:10px}
.thread li .who{margin:0;font-size:14px;color:var(--muted)}
.thread li .who b{color:var(--ink)}
.thread li .body{margin:2px 0 0;font-size:14px;line-height:1.5}
.thread li.sys{display:block;font-size:14px;color:var(--muted);padding-left:34px}
.enquiry{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.enquiry summary{cursor:pointer;font-weight:600;color:var(--navy)}
.vote-preview{margin:6px 0 14px;padding-left:18px;font-size:14px}
@media (max-width:900px){.pitem-sheet .cs-grid{grid-template-columns:1fr}}
.ccount{display:inline-flex;align-items:center;gap:4px}
.pitem header{min-height:22px}
.modal:has(.pitem-sheet) .modal-in,.modal:has(.contact-sheet) .modal-in{max-width:min(1040px,94vw)}
.funnel{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.funnel li{display:grid;grid-template-columns:56px 1fr;align-items:center;column-gap:10px;row-gap:3px}
.funnel b{font:700 20px var(--fd);color:var(--navy);grid-row:span 2}
.funnel span{font-size:14px;color:var(--ink-2)}
.funnel i{display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--sea),var(--sea-light));width:0;transition:width .6s var(--ease,ease)}
/* every dashboard panel: title left, its link right (the link sits beside the heading, not inside it) */
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}
.panel-head h2{margin-bottom:0}
.panel-head > .link{display:inline-block;padding-block:12px;margin-block:-12px;font:600 14px var(--fb);white-space:nowrap;flex:none}
@media (min-width:900px){.panel-head > .link{padding-block:4px;margin-block:-4px}}
.view > .panels{margin-bottom:18px}
.app-head + .legend{margin:0 0 18px}
/* one rhythm between a page's panels, whatever each view writes */
.view > :is(.panel, .note, .kpis) + .panel{margin-top:18px}
.view > .note + :is(.note, .panels, details){margin-top:18px}
/* a form row that holds only messages not showing (an error box, a notice) takes no room */
.form-grid > .field.full:not(:has(> :not([hidden]))){display:none}
form[aria-busy="true"] .btn{cursor:progress}
.inv-void{margin:0 0 24px}
.nowrap{white-space:nowrap}
.funnel li{grid-template-columns:56px minmax(0,1fr)}
.funnel b{grid-row:1 / span 2;grid-column:1}
.funnel span,.funnel i{grid-column:2}

/* ---------- brand studio ---------- */
.studio-kit{display:grid;grid-template-columns:1.2fr 1.3fr .9fr;gap:16px;margin-bottom:22px}
.studio-kit>div{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}
.kit-logo img{display:block;width:100%;max-width:380px;height:auto;margin:6px 0 16px}
.kit-colours{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;align-content:start}
.swatch{display:grid;gap:2px;align-content:start;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;cursor:copy}
.swatch i{height:32px;margin-bottom:4px;border-radius:8px;border:1px solid rgba(0,0,0,.06)}
.swatch b{font-size:14px} .swatch span{font:14px ui-monospace,Menlo,monospace;color:var(--muted)}
.kit-type p{margin:0}
.kit-type .t-display{font:800 34px/1 var(--fd);color:var(--navy);letter-spacing:-.02em}
.kit-type .t-body{margin-top:12px;font:500 17px var(--fb)}
.kit-type .t-serif{font:italic 400 19px var(--fs, Newsreader, serif);color:var(--sea-2)}
.studio-grid{columns:4 260px;column-gap:18px}
.asset{break-inside:avoid;margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:box-shadow .2s,transform .2s}
.asset:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.asset-prev{display:grid;place-items:center;background:repeating-conic-gradient(var(--mist) 0 25%,#fff 0 50%) 0 0/16px 16px;border-bottom:1px solid var(--line);overflow:hidden}
.asset-prev svg{display:block;width:100%;height:100%}
.asset-body{padding:12px 14px 14px;display:grid;gap:6px}
.asset-body h3{font-size:15px}
.asset-body p{margin:0}
.asset-edit{justify-self:start}
.asset-dl{gap:6px}
/* the group filter stays reachable while scrolling a long gallery */
.studio-filter{position:sticky;top:var(--bar,0px);z-index:4;background:var(--mist)}
@media (max-width:600px){.studio-grid{columns:2 150px;column-gap:12px}.asset-prev{max-height:240px}.studio-filter{flex-wrap:nowrap;overflow-x:auto}.studio-filter button{flex:none}}
.studio-edit{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.studio-live{max-height:76vh;display:grid;place-items:center;background:var(--mist);border-radius:12px;overflow:hidden}
.studio-live svg{display:block;width:100%;height:100%;max-height:76vh}
.modal:has(.studio-edit) .modal-in{max-width:min(1200px,96vw)}
.print-host{display:none}
@media (max-width:1100px){.studio-kit{grid-template-columns:1fr 1fr}.kit-logo{grid-column:span 2}}
@media (max-width:800px){.studio-kit{grid-template-columns:1fr}.kit-logo{grid-column:auto}.studio-edit{grid-template-columns:1fr}}

/* sector dots: science (academic), industry, student */
.kdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--sea)}
.kdot.k-industry{background:var(--copper)}
.kdot.k-phd{background:var(--sea-light);box-shadow:inset 0 0 0 1px var(--sea)}
.pick-list{display:grid;gap:6px;max-height:55vh;overflow:auto;padding:4px 2px;border-block:1px solid var(--line, #e5e5e5)}
.pick-list .check{align-items:flex-start;font-size:.92rem}
.pre-wrap{white-space:pre-wrap}
/* Visa invitation letter (portal, printable) */
.letter-doc h1{font-size:24px;margin:28px 0 18px}
.letter-doc p{margin:0 0 12px;line-height:1.6}

/* requests hub, conference picker and the open conference in the menu */
.req-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px;padding:14px 18px;border-radius:14px;background:var(--sea-tint);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);text-decoration:none}
.req-banner b{color:var(--ink)}.req-banner span:last-child{font-size:14px}
label.check{display:inline-flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
label.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--sea)}
.reqs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.req{display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
/* only a request that has waited too long is marked (requests.js overdue), in the danger tone, never copper */
.req.overdue{border-left:4px solid var(--bad)}
.req.done{background:var(--mist)}
.req.hl{box-shadow:inset 0 0 0 2px var(--sea)}
.req:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.req-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.req-top time{margin-left:auto;font-size:14px;color:var(--muted)}
.req-who{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.req-who .muted{font-size:14px;overflow-wrap:anywhere}
.req-what{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.req-note{margin:0;padding:8px 12px;border-radius:8px;background:#FFF7E0;color:#5E4A0E;font-size:14px;white-space:pre-line}
.req-note::before{content:"Note · ";font-weight:700}
.req-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.req-assign{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.req-assign .input{width:auto;min-width:170px;max-width:100%;padding:6px 10px;font-size:14px}
.req-foot .btn-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.reqs .empty{padding:28px 10px;text-align:center}
/* "Which conference?": no menu yet, so the page takes the whole width */
.app.solo{grid-template-columns:minmax(0,1fr)}.app.solo .app-side{display:none}
.conf-pick{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:640px}
.conf-pick a{display:grid;gap:4px;padding:18px 20px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink)}
.conf-pick a:hover,.conf-pick a:focus-visible{box-shadow:inset 0 0 0 2px var(--sea)}
.conf-pick a[aria-current]{box-shadow:inset 0 0 0 2px var(--navy)}
.conf-pick b{font-size:18px}.conf-pick span{color:var(--ink-2);font-size:15px}.conf-pick small{color:var(--muted);font-size:14px}
.app-side .conf-now{padding:10px 12px;margin:8px 0 2px;border-top:1px solid var(--line)}
.app-side .conf-now small{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.app-side .conf-now b{font-size:14px;line-height:1.3}
@media (max-width:900px){.app-side .conf-now{display:none}}
@media (max-width:560px){.req-assign{width:100%}.req-assign .input{flex:1;min-width:0}.req-top time{margin-left:0;width:100%}}

/* ---------- Inbox: folders, list, reading pane (mailbox.js) ---------- */
.mx{display:grid;grid-template-columns:200px minmax(260px,360px) minmax(0,1fr);gap:16px;align-items:start}
.mx-nav{position:sticky;top:96px;display:grid;gap:2px;padding:10px;background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.mx-nav .grp{margin:10px 8px 4px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mx-nav .grp:first-child{margin-top:2px}
.mx-nav button,.mx-nav a{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:14.5px;text-align:left;color:var(--ink-2);text-decoration:none;cursor:pointer}
.mx-nav button:hover,.mx-nav a:hover{background:var(--mist);color:var(--ink)}
.mx-nav button[aria-current]{background:var(--sea-tint);color:var(--navy);font-weight:600}
.mx-nav .badge{margin-left:auto;font-size:14px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--orange);color:#fff}
.mx-list,.mx-read{background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--line);min-width:0}
.mx-list-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 14px 0}
.mx-list-head h2{margin:0;font-size:18px}
.mx-tools{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.mx-tools .input{min-width:0;flex:1 1 120px}
.mx-items{margin:0;padding:0;list-style:none;max-height:calc(100svh - 270px);overflow:auto}
.mx-items>li+li{border-top:1px solid var(--line)}
.mx-items .empty{padding:24px 16px}
.mx-item{display:flex;gap:10px;width:100%;padding:12px 14px;border:0;background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.mx-item:hover{background:var(--mist)}
.mx-item[aria-current]{background:var(--sea-tint);box-shadow:inset 3px 0 0 var(--sea)}
.mx-item .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--fu);background:var(--mist);color:var(--ink-2)}
.mx-item-main{display:grid;gap:2px;min-width:0;flex:1}
.mx-item-top{display:flex;gap:8px;align-items:baseline}
.mx-item-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.mx-item-top time{margin-left:auto;flex:none;font-size:14px;color:var(--muted)}
.mx-item-sub,.mx-item-snip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.mx-item-snip{color:var(--muted);font-size:14px}
.mx-item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.mx-item-tags .pill{font-size:14px;padding:1px 7px}
.mx-item-tags .pill svg{width:12px;height:12px;vertical-align:-2px}
.mx-item.unread .mx-item-top b,.mx-item.unread .mx-item-sub{font-weight:700}
.mx-item.unread .av{background:var(--navy);color:#fff}
.mx-read{padding:18px clamp(16px,2vw,26px);min-height:420px;outline:0}
.mx-read>.empty{padding:60px 10px}
.mx-read-head{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mx-read-head h2{margin:0;font-size:22px;overflow-wrap:anywhere}
.mx-read-head p{margin:0}
.mx-read-head .btn-row{align-items:center}
.mx-back{display:none;justify-self:start}
.mx-assign{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
.mx-assign .input{padding:6px 8px;font-size:14px}
.mx-thread{margin:0;padding:0;list-style:none;display:grid}
.mx-msg{padding:16px 0;border-bottom:1px solid var(--line)}
.mx-msg:last-child{border-bottom:0}
.mx-msg.out{padding-left:14px;box-shadow:inset 3px 0 0 var(--sea-tint)}
.mx-msg-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-bottom:10px;font-size:14px}
.mx-msg-head time{margin-left:auto;font-size:14px;color:var(--muted)}
.mx-msg-head>div{flex-basis:100%}
.mx-body{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.mail-text{white-space:pre-wrap}
.mail-html{overflow-x:auto}
.mail-html p{margin:0 0 .8em}
.mail-html table{border-collapse:collapse;max-width:100%}
.mail-html td,.mail-html th{padding:4px 6px;vertical-align:top}
.mail-html img{max-width:100%;height:auto}
.mail-html blockquote{margin:0 0 .8em;padding-left:12px;border-left:3px solid var(--line-2);color:var(--muted)}
.mail-html a{color:var(--sea-2)}
.mail-img{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--mist);font-size:14px;color:var(--muted)}
.mx-files{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.mx-files small{margin-left:4px}
.mx-files .bad{color:#9B1C1C}
.mx-sig{margin:0;padding:10px 12px;border-radius:8px;background:var(--mist);font:inherit;font-size:14px;white-space:pre-wrap;color:var(--ink-2)}
.mx-box{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px}
.app-side .nav-fb{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;text-align:left;color:var(--ink-2);cursor:pointer}
.app-side .nav-fb:hover{background:var(--mist);color:var(--ink)}
.app-side .nav-fb svg{width:18px;height:18px;flex:none;color:var(--muted)}
@media (max-width:1240px){.mx{grid-template-columns:minmax(240px,320px) minmax(0,1fr)}.mx-nav{grid-column:1/-1;position:static;display:flex;flex-wrap:wrap;gap:4px}.mx-nav .grp{display:none}.mx-nav button,.mx-nav a{width:auto}}
@media (max-width:860px){
  .mx{grid-template-columns:1fr}
  /* every folder and its unread badge stays in view: the folders wrap onto a second line, never a hidden strip */
  .mx-nav button,.mx-nav a{flex:none;white-space:nowrap}
  .mx-items{max-height:none}
  .mx-read{display:none;min-height:0}
  .mx.reading .mx-read{display:block}
  .mx.reading .mx-list,.mx.reading .mx-nav{display:none}
  .mx-back{display:inline-flex}
}
@media (max-width:900px){.app-side .nav-fb{display:none}}

/* ---------- Feedback ---------- */
.fb-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fb{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.fb-body{margin:0;white-space:pre-wrap}
.fb-comments{margin:0;padding:0 0 0 12px;list-style:none;display:grid;gap:8px;border-left:3px solid var(--line)}
.fb .btn-row{align-items:center}
.fb-reply{margin:0;padding:8px 12px;border-radius:8px;background:var(--sea-tint);font-size:14px}

/* Partners: documents to review */
.docs-strip{margin:0 0 18px}
.docs-strip h2{margin:0 0 10px;font-size:1.05rem}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.doc-card{display:flex;gap:12px;align-items:flex-start}
.doc-card h3{margin:0 0 4px;font-size:1rem}
.doc-card p{margin:0 0 10px}
.doc-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--sea-pale);color:var(--sea)}

/* Certificates (portal, printable on one A4 landscape-friendly page) */
.cert-doc{text-align:center;padding:48px 40px;border:2px solid var(--line-2);border-radius:18px;background:var(--bg, #fff)}
.cert-doc .cert-mark{height:56px;margin:0 auto 18px}
.cert-doc small.cert-kind{display:block;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);font-weight:700;font-size:13px}
.cert-doc h1{font-size:30px;margin:10px 0 24px}
.cert-doc .cert-name{font-size:28px;font-weight:700;margin:6px 0 18px;color:var(--ink)}
.cert-doc p{margin:0 auto 10px;max-width:60ch;line-height:1.6}
.cert-doc .cert-hours{font-weight:700;color:var(--ink)}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:36px;text-align:left}
.cert-foot .cert-qr{display:inline-block;width:96px;height:96px}
.cert-foot .cert-qr svg{width:100%;height:100%}
.cert-foot code{font-size:14px;word-break:break-all}
@media print{.cert-doc{border-color:#999;break-inside:avoid}}
.input.xs{width:5.5em;padding:4px 8px;min-height:0}
/* Reports from delegates (dashboard) */
.panel.report{display:grid;gap:8px;margin-bottom:12px}
.panel.report h3{margin:0}
.panel.report .row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel.report blockquote{margin:0;padding:8px 12px;border-left:3px solid var(--line-2);background:var(--mist);border-radius:6px;white-space:pre-wrap}
/* Continue with Apple / Google on the account page */
.auth-social{display:grid;gap:10px;margin:14px 0 4px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:12px;font:600 15px var(--fb);cursor:pointer;border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.social-btn svg{width:20px;height:20px}
.social-btn.apple{background:#000;color:#fff;border-color:#000}
.social-btn.apple svg{fill:#fff}
.social-btn:disabled{opacity:.6;cursor:progress}
.auth-social .or{display:flex;align-items:center;gap:12px;margin:6px 0 0;color:var(--muted);font-size:14px}
.auth-social .or::before,.auth-social .or::after{content:"";flex:1;height:1px;background:var(--line)}
html[data-theme="dark"] .social-btn{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .social-btn.apple{background:#fff;color:#000;border-color:#fff}
/* dark: the tab track and the chosen tab follow the theme, and the chosen one is outlined so it stands out from the track */
html[data-theme="dark"] .auth-tabs{background:var(--white);border:1px solid var(--line-2)}
html[data-theme="dark"] .auth-tabs button[aria-pressed="true"]{background:var(--line-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.auth-terms{margin:2px 0 0;text-align:center}
html[data-theme="dark"] .social-btn.apple svg{fill:#000}

/* ── UX B2: account page ─────────────────────────────────────────── */
/* the strength bar with its words; the space Turnstile will take is kept before it loads (on first use of the form),
   so it does not push Sign in down: 65px normal, 140px compact on the narrowest phones */
.pw-strength{display:grid;gap:5px}
.captcha[data-reserve]{display:block;min-height:65px}
@media (max-width:360px){.captcha[data-reserve]{min-height:140px}}

/* ── UX B7: design system (tap targets, segmented control) ─────── */
/* phones: 'Show' password and the text-like buttons ('Forgot password?') are 44px targets like every other control */
@media (max-width:600px){.pw-eye{min-height:44px;padding-inline:12px}.linkbtn{min-height:44px;padding:4px 8px}}
/* the segmented control has one outline, its border: no inset ring on top of it, and none inside the chosen fill */
.app .seg span,dialog.modal .seg span{box-shadow:none}

/* ── UX B3: portal forms ─────── */
/* the error summary opens each form; in the two-column booking form it spans both columns */
.err-top:not([hidden]){margin-bottom:16px}
.panels>.err-top{grid-column:1/-1}
.panels>.err-top:not([hidden]){margin-bottom:0}
/* by the button: how many problems, linking up to the summary */
.err-near{flex-basis:100%;margin:6px 0 0;color:#9B1C1C;font-weight:600}
.err-near .link{color:inherit}
/* the co-author list's status line: who was removed, with Undo */
[data-author-note]:not(:empty){margin:4px 0 10px}