:root{
    --paper:#EEEBE2; --card:#FBF9F4; --ink:#20241F; --ink-soft:#5B5C50;
    --line:#D9D3C3; --line-strong:#C7BFA9;
    --brass:#A9782E; --brass-ink:#7C5A21; --brass-tint:#F1E4C8;
    --teal:#2F5F58; --teal-tint:#DCE9E5;
    --clay:#B4553F; --clay-tint:#F3DFD8;
    --danger:#B4553F; --focus:#2F5F58;
    --shadow: 0 1px 2px rgba(32,36,31,0.06);
    --radius: 10px;
    font-size: 16px;
}
@media (prefers-color-scheme: dark) {
    body:not([data-theme]) {
        --paper: #15181A; --card: #1C2022; --ink: #E9E5D8; --ink-soft: #A6A395;
        --line: #33372F; --line-strong: #454A3F;
        --brass: #D3A44F; --brass-ink: #E7C481; --brass-tint: #2C2618;
        --teal: #5EA79B; --teal-tint: #1B2C29;
        --clay: #D08069; --clay-tint: #2E1F1B;
        --danger: #D08069; --focus: #5EA79B;
        --shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
}
/* Force light theme */
body[data-theme="light"] {
    --paper: #EEEBE2; --card: #FBF9F4; --ink: #20241F; --ink-soft: #5B5C50;
    --line: #D9D3C3; --line-strong: #C7BFA9;
    --brass: #A9782E; --brass-ink: #7C5A21; --brass-tint: #F1E4C8;
    --teal: #2F5F58; --teal-tint: #DCE9E5;
    --clay: #B4553F; --clay-tint: #F3DFD8;
    --danger: #B4553F; --focus: #2F5F58;
    --shadow: 0 1px 2px rgba(32,36,31,0.06);
}
/* Force dark theme */
body[data-theme="dark"] {
    --paper: #15181A; --card: #1C2022; --ink: #E9E5D8; --ink-soft: #A6A395;
    --line: #33372F; --line-strong: #454A3F;
    --brass: #D3A44F; --brass-ink: #E7C481; --brass-tint: #2C2618;
    --teal: #5EA79B; --teal-tint: #1B2C29;
    --clay: #D08069; --clay-tint: #2E1F1B;
    --danger: #D08069; --focus: #5EA79B;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height:1.5;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
    font-family:'Lora', Georgia, 'Times New Roman', serif;
    font-weight:600;
    margin:0;
    color:var(--ink);
}
::selection{ background:var(--brass-tint); }
a{color:var(--teal);}
button{font-family:inherit;}
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Shell ---------- */
.shell{ max-width:760px; margin:0 auto; padding:28px 20px 80px; }
.brand{
    display:flex; align-items:center; gap:12px; margin-bottom:26px;
}
.brand-seal{
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid var(--brass); color:var(--brass);
    display:flex; align-items:center; justify-content:center;
    font-family:'Lora', serif; font-weight:600; font-size:15px;
    flex:none;
}
.brand-text{ display:flex; flex-direction:column; }
.brand-text .name{ font-family:'Lora', serif; font-size:17px; font-weight:600; }
.brand-text .sub{ font-size:12.5px; color:var(--ink-soft); }

/* ---------- Thread progress ---------- */
.thread-wrap{ margin-bottom:30px; }
.thread{
    display:flex; align-items:center; list-style:none; margin:0; padding:0;
}
.thread li{ display:flex; align-items:center; flex:1; }
.thread li:last-child{ flex:none; }
.node{
    width:26px; height:26px; border-radius:50%; flex:none;
    border:1.5px solid var(--line-strong); background:var(--card);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:600; color:var(--ink-soft);
    transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.node-label{
    font-size:11.5px; color:var(--ink-soft); margin-top:6px; white-space:nowrap;
}
.node-col{ display:flex; flex-direction:column; align-items:center; }
.stitch{
    flex:1; height:1px; background:var(--line-strong); margin:0 6px;
    position:relative; top:-12px;
}
.thread li.done .node{ background:var(--brass); border-color:var(--brass); color:var(--card); }
.thread li.current .node{ border-color:var(--brass); color:var(--brass-ink); }
.thread li.done .stitch{ background:var(--brass); }
.compact-progress{ display:none; }
@media (max-width:620px){
    .thread-wrap .thread{ display:none; }
    .compact-progress{ display:block; }
    .compact-label{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
    .compact-bar{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; }
    .compact-bar-fill{ height:100%; background:var(--brass); transition:width .3s ease; }
}

/* ---------- Page card ---------- */
.page{
    display:none;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:32px 32px 26px;
    animation: pageIn .32s ease;
}
.page.active{ display:block; }
@keyframes pageIn{
    from{ opacity:0; transform:translateX(10px); }
    to{ opacity:1; transform:translateX(0); }
}
.page-eyebrow{ font-size:12.5px; color:var(--brass-ink); font-weight:600; margin-bottom:6px; }
.page-title{ font-size:23px; margin-bottom:8px; }
.page-desc{ color:var(--ink-soft); font-size:14.5px; margin-bottom:26px; max-width:56ch; }
@media (max-width:620px){ .page{ padding:24px 18px 20px; } }

.section-block + .section-block{ margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.section-heading{ font-size:15px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* ---------- Form ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:5px; }
.field .hint{ font-size:12.5px; color:var(--ink-soft); margin-bottom:7px; }
.field .req{ color:var(--clay); margin-left:2px; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea{
    width:100%; padding:10px 12px; font-size:14.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-strong); border-radius:7px;
    font-family:inherit;
}
textarea{ resize:vertical; min-height:90px; }
select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%235B5C50' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
input:disabled, select:disabled{ opacity:.6; cursor:not-allowed; background:var(--line); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:560px){ .row-2, .row-3{ grid-template-columns:1fr; } }
.phone-row{ display:flex; gap:8px; }
.phone-row select{ width:110px; flex:none; }
.counter{ font-size:12px; color:var(--ink-soft); margin-top:5px; text-align:right; }
.counter.warn{ color:var(--danger); }
.counter.ok{ color:var(--teal); }
.checkline{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13.5px; color:var(--ink-soft); }
.checkline input{ width:auto; }

/* pill single-select */
.pill-group{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
    padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px;
    font-size:13.5px; cursor:pointer; background:var(--paper); color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
}
.pill:hover{ border-color:var(--brass); }
.pill.selected{ background:var(--brass-tint); border-color:var(--brass); color:var(--brass-ink); font-weight:600; }

/* role cards */
.role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .role-grid{ grid-template-columns:1fr; } }
.role-card{
    border:1px solid var(--line-strong); border-radius:8px; padding:16px;
    cursor:pointer; background:var(--paper); border-left-width:4px;
}
.role-card h4{ font-family:'Lora', serif; font-size:16px; margin:0 0 4px; }
.role-card p{ font-size:13px; color:var(--ink-soft); margin:0; }
.role-card[data-role=presenter]{ border-left-color:var(--teal); }
.role-card[data-role=attendee]{ border-left-color:var(--clay); }
.role-card.selected[data-role=presenter]{ background:var(--teal-tint); }
.role-card.selected[data-role=attendee]{ background:var(--clay-tint); }

/* fee card */
.fee-card{
    display:flex; align-items:baseline; justify-content:space-between;
    background:var(--brass-tint); border:1px solid var(--brass); border-radius:8px;
    padding:14px 16px; margin-top:6px;
}
.fee-card .label{ font-size:13px; color:var(--brass-ink); }
.fee-card .amount{ font-family:'Lora', serif; font-size:22px; color:var(--brass-ink); font-weight:600; }

/* stepper number input */
.stepper{ display:flex; border:1px solid var(--line-strong); border-radius:7px; overflow:hidden; width:120px; }
.stepper button{ width:32px; border:none; background:var(--paper); color:var(--ink); cursor:pointer; font-size:15px; }
.stepper button:hover{ background:var(--line); }
.stepper input{ border:none; text-align:center; padding:8px 0; width:56px; border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong); }
.reason-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.reason-row:last-child{ border-bottom:none; }
.reason-text{ font-size:13.5px; }
.reason-warn{ font-size:12px; color:var(--danger); margin-top:8px; display:none; }

/* co-authors */
.coauthor-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.coauthor-chip{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; border:1px solid var(--line-strong); border-radius:7px; background:var(--paper);
}
.coauthor-chip .who{ font-size:13.5px; }
.coauthor-chip .who .em{ color:var(--ink-soft); font-size:12px; display:block; }
.icon-btn{ border:none; background:none; color:var(--danger); cursor:pointer; font-size:16px; line-height:1; padding:4px; }
.add-coauthor-form{ border:1px dashed var(--line-strong); border-radius:8px; padding:14px; margin-top:14px; display:none; }
.add-coauthor-form.open{ display:block; }
.btn-link{ background:none; border:none; color:var(--teal); font-size:13.5px; font-weight:600; cursor:pointer; padding:0; }

/* affiliations */
.input-with-action{ display:flex; gap:8px; align-items:stretch; }
.input-with-action select{ flex:1; min-width:0; }
.add-new-btn{
    flex:none; width:40px; border:1px dashed var(--line-strong); background:var(--paper);
    color:var(--brass-ink); border-radius:7px; font-size:17px; line-height:1; cursor:pointer;
}
.add-new-btn:hover{ border-color:var(--brass); background:var(--brass-tint); }
.affiliation-card{ border:1px solid var(--line-strong); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.affiliation-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; cursor:pointer; background:var(--paper);
}
.affiliation-headline{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.affiliation-headline .aff-label{ font-size:12px; color:var(--ink-soft); }
.affiliation-summary{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44ch; }
.affiliation-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.chevron{ display:inline-block; transition:transform .2s ease; color:var(--ink-soft); }
.affiliation-card.collapsed .chevron{ transform:rotate(-90deg); }
.affiliation-body{ padding:16px 14px 4px; }
.affiliation-card.collapsed .affiliation-body{ display:none; }
@keyframes shakeField{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.shake{ animation:shakeField .35s ease; border-color:var(--danger) !important; }

/* modal */
.modal-overlay{
    position:fixed; inset:0; background:rgba(20,20,16,0.45); display:none;
    align-items:center; justify-content:center; padding:20px; z-index:50;
}
.modal-overlay.open{ display:flex; }
.modal-box{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(0,0,0,0.18); padding:24px; width:100%; max-width:420px;
}
.modal-box h3{ font-size:18px; margin-bottom:6px; }
.modal-desc{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; }

/* buttons */
.btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding:11px 22px; border-radius:7px; font-size:14.5px; font-weight:600;
    cursor:pointer; border:1px solid transparent; transition:filter .15s ease;
}
.btn:hover{ filter:brightness(0.95); }
.btn-primary{
    background:var(--brass);
    color:var(--paper); }
:root[data-theme="dark"] .btn-primary, :root:not([data-theme="light"]) .btn-primary{
    @media (prefers-color-scheme: dark){ color:var(--paper); }
}
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-full{ width:100%; }
.nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:12px; }
.nav-row.end{ justify-content:flex-end; }
.spinner{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:spin .7s linear infinite; display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.loading .spinner{ display:inline-block; }
.btn.loading .btn-text{ opacity:.85; }

/* status banners */
.status-panel{ text-align:center; padding:36px 12px; }
.status-icon{ width:56px; height:56px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-size:24px; }
.status-icon.ok{ background:var(--teal-tint); color:var(--teal); }
.status-icon.info{ background:var(--brass-tint); color:var(--brass-ink); }
.status-panel h2{ font-size:21px; margin-bottom:8px; }
.status-panel p{ color:var(--ink-soft); font-size:14px; max-width:44ch; margin:0 auto 22px; }
.ref-code{ display:inline-block; font-family:'Lora', serif; font-size:16px; background:var(--paper); border:1px dashed var(--line-strong); padding:8px 16px; border-radius:6px; margin-bottom:22px; letter-spacing:.5px; }

/* review */
.review-card{ border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:14px; }
.review-card .review-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.review-card h4{ font-family:'Lora', serif; font-size:15px; margin:0; }
.review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; font-size:13.5px; }
@media (max-width:560px){ .review-grid{ grid-template-columns:1fr; } }
.review-grid dt{ color:var(--ink-soft); }
.review-grid dd{ margin:0 0 6px; }
.review-note{ font-size:13.5px; }

.demo-tip{ font-size:12.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:10px 12px; margin-top:14px; }
.demo-tip code{ background:var(--line); padding:1px 5px; border-radius:4px; }

/* ==========================================================================
   Append to user-participant-registration.css
   Styles for searchable-select.js. Uses the existing tokens only.
   ========================================================================== */

.ss-wrap{ position:relative; width:100%; }

/* The native select stays in the DOM (source of truth) but out of sight. */
select.ss-native{
    position:absolute; opacity:0; pointer-events:none;
    width:100%; height:0; padding:0; margin:0; border:0;
}

.ss-button{
    width:100%; text-align:left; cursor:pointer;
    padding:10px 32px 10px 12px; font-size:14.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-strong); border-radius:7px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%235B5C50' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ss-button:hover{ border-color:var(--brass); }
.ss-button.ss-placeholder{ color:var(--ink-soft); }
.ss-button:disabled{ opacity:.6; cursor:not-allowed; background-color:var(--line); }
.ss-button.is-valid{ border-color:var(--teal); }
.ss-button.is-invalid{ border-color:var(--danger); }
.ss-open .ss-button{ border-color:var(--brass); }

.ss-panel{
    display:none; position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
    background:var(--card); border:1px solid var(--line-strong); border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,0.12); padding:6px; max-height:260px;
    overflow:hidden; flex-direction:column;
}
.ss-open .ss-panel{ display:flex; }
.ss-open.ss-up .ss-panel{ top:auto; bottom:calc(100% + 4px); }

.ss-search{
    width:100%; padding:8px 10px; font-size:13.5px; margin-bottom:6px;
    color:var(--ink); background:var(--paper);
    border:1px solid var(--line-strong); border-radius:6px; font-family:inherit;
}

.ss-list{ overflow-y:auto; max-height:200px; }
.ss-option{
    padding:8px 10px; font-size:13.5px; border-radius:6px; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ss-option:hover, .ss-option.ss-active{ background:var(--brass-tint); color:var(--brass-ink); }
.ss-option.ss-selected{ font-weight:600; color:var(--brass-ink); }
.ss-option.ss-disabled{ opacity:.5; cursor:not-allowed; }

.ss-empty{
    display:none; padding:10px; font-size:13px; color:var(--ink-soft); text-align:center;
}

/* Keep the phone-code dropdown at its fixed width. */
.phone-row .ss-wrap{ width:110px; flex:none; }
.input-with-action .ss-wrap{ flex:1; min-width:0; }


.alert-host{
    position:fixed; top:20px; right:20px; z-index:120;
    display:flex; flex-direction:column; gap:10px;
    width:min(360px, calc(100vw - 40px)); pointer-events:none;
}
@media (max-width:560px){
    .alert-host{ top:auto; bottom:16px; left:16px; right:16px; width:auto; }
}

.alert-toast{
    display:flex; align-items:flex-start; gap:10px; pointer-events:auto;
    background:var(--card); border:1px solid var(--line-strong);
    border-left-width:4px; border-radius:8px; padding:12px 12px 12px 14px;
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
    animation:alertIn .22s ease;
}
@keyframes alertIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.alert-toast.alert-out{ opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease; }
@media (max-width:560px){
    @keyframes alertIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
    .alert-toast.alert-out{ transform:translateY(8px); }
}

.alert-icon{
    flex:none; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; margin-top:1px;
}
.alert-body{ flex:1; min-width:0; }
.alert-title{ font-size:13.5px; font-weight:600; color:var(--ink); }
.alert-text{ font-size:13px; color:var(--ink-soft); margin-top:3px; white-space:pre-line; }

.alert-close{
    flex:none; border:none; background:none; cursor:pointer; padding:0 2px;
    font-size:17px; line-height:1; color:var(--ink-soft);
}
.alert-close:hover{ color:var(--ink); }

.alert-success{ border-left-color:var(--teal); }
.alert-success .alert-icon{ background:var(--teal-tint); color:var(--teal); }
.alert-error{ border-left-color:var(--danger); }
.alert-error .alert-icon{ background:var(--clay-tint); color:var(--danger); }
.alert-info{ border-left-color:var(--brass); }
.alert-info .alert-icon{ background:var(--brass-tint); color:var(--brass-ink); }

/* ---------- Dialogs ---------- */

.dialog-overlay{
    position:fixed; inset:0; z-index:130; padding:20px;
    background:rgba(20,20,16,0.45);
    display:flex; align-items:center; justify-content:center;
    animation:alertIn .18s ease;
}
.dialog-box{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:24px;
    width:100%; max-width:440px;
    box-shadow:0 10px 34px rgba(0,0,0,0.2);
}
.dialog-title{
    font-family:'Lora', Georgia, serif; font-size:18px; font-weight:600;
    color:var(--ink); margin:0 0 8px;
}
.dialog-text{ font-size:14px; color:var(--ink-soft); margin:0; }

.dialog-consent{
    display:flex; align-items:flex-start; gap:9px; cursor:pointer;
    font-size:13.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-strong);
    border-radius:7px; padding:11px 12px; margin-top:16px;
}
.dialog-consent input{ margin-top:2px; flex:none; width:auto; }

.dialog-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.dialog-actions .btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
@media (max-width:420px){
    .dialog-actions{ flex-direction:column-reverse; }
    .dialog-actions .btn{ width:100%; }
}

/* ==========================================================================
   Append to user-participant-registration.css
   Styles for the "already registered" account view. Existing tokens only.
   ========================================================================== */

/* profile */
.acct-profile{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.avatar{
    width:46px; height:46px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--brass); background:var(--brass-tint); color:var(--brass-ink);
    font-family:'Lora', serif; font-weight:600; font-size:16px;
}
.acct-name{ font-family:'Lora', serif; font-size:17px; font-weight:600; }
.acct-sub{ font-size:13px; color:var(--ink-soft); }
.acct-affs{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.acct-affs-title{ font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.acct-aff{ font-size:13.5px; padding:3px 0; }

/* presenter slots (n of 3) */
.slot-pips{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Work Sans', sans-serif; font-size:12.5px; font-weight:400; color:var(--ink-soft);
}
.pip{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line-strong); }
.pip.used{ background:var(--teal); border-color:var(--teal); }
.pip + span{ margin-left:4px; }

/* registration cards: same left-edge colour language as the role cards */
.reg-card{
    border:1px solid var(--line-strong); border-left-width:4px; border-radius:8px;
    padding:14px 16px; margin-bottom:12px; background:var(--paper);
}
.reg-card.presenter{ border-left-color:var(--teal); }
.reg-card.attendee{ border-left-color:var(--clay); }
.reg-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.reg-id{ font-size:12.5px; color:var(--ink-soft); }
.role-tag{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; flex:none; }
.role-tag.presenter{ background:var(--teal-tint); color:var(--teal); }
.role-tag.attendee{ background:var(--clay-tint); color:var(--danger); }
.reg-actions{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.reg-actions-row{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.reg-hint{ font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; }
.reg-actions .reg-hint, .reg-actions-row .reg-hint{ margin:0; }

.btn-sm{ padding:8px 14px; font-size:13.5px; }
.btn-danger-outline{ color:var(--danger); border-color:var(--danger); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* past conferences */
.past-card{
    display:flex; gap:14px; align-items:flex-start;
    padding:14px 0; border-bottom:1px solid var(--line);
}
.past-card:last-child{ border-bottom:none; padding-bottom:0; }
.past-logo{
    position:relative; overflow:hidden; flex:none;
    width:42px; height:42px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); border:1px solid var(--line-strong);
    font-family:'Lora', serif; font-weight:600; font-size:14px; color:var(--ink-soft);
}
.past-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--card); }
.past-body{ min-width:0; flex:1; }
.past-name{ font-size:14.5px; font-weight:600; }
.past-short{ font-size:12.5px; font-weight:400; color:var(--ink-soft); margin-left:4px; }
.past-line{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13.5px; }
.past-count{ color:var(--ink-soft); font-size:12.5px; margin-left:2px; }


/* profile */
.acct-profile{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.avatar{
    width:46px; height:46px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--brass); background:var(--brass-tint); color:var(--brass-ink);
    font-family:'Lora', serif; font-weight:600; font-size:16px;
}
.acct-name{ font-family:'Lora', serif; font-size:17px; font-weight:600; }
.acct-sub{ font-size:13px; color:var(--ink-soft); }
.acct-affs{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.acct-affs-title{ font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.acct-aff{ font-size:13.5px; padding:3px 0; }

/* presenter slots (n of 3) */
.slot-pips{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Work Sans', sans-serif; font-size:12.5px; font-weight:400; color:var(--ink-soft);
}
.pip{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line-strong); }
.pip.used{ background:var(--teal); border-color:var(--teal); }
.pip + span{ margin-left:4px; }

/* registration cards: same left-edge colour language as the role cards */
.reg-card{
    border:1px solid var(--line-strong); border-left-width:4px; border-radius:8px;
    padding:14px 16px; margin-bottom:12px; background:var(--paper);
}
.reg-card.presenter{ border-left-color:var(--teal); }
.reg-card.attendee{ border-left-color:var(--clay); }
.reg-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.reg-id{ font-size:12.5px; color:var(--ink-soft); }
.role-tag{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; flex:none; }
.role-tag.presenter{ background:var(--teal-tint); color:var(--teal); }
.role-tag.attendee{ background:var(--clay-tint); color:var(--danger); }
.reg-actions{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.reg-actions-row{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.reg-hint{ font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; }
.reg-actions .reg-hint, .reg-actions-row .reg-hint{ margin:0; }

.btn-sm{ padding:8px 14px; font-size:13.5px; }
.btn-danger-outline{ color:var(--danger); border-color:var(--danger); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* past conferences */
.past-card{
    display:flex; gap:14px; align-items:flex-start;
    padding:14px 0; border-bottom:1px solid var(--line);
}
.past-card:last-child{ border-bottom:none; padding-bottom:0; }
.past-logo{
    position:relative; overflow:hidden; flex:none;
    width:42px; height:42px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); border:1px solid var(--line-strong);
    font-family:'Lora', serif; font-weight:600; font-size:14px; color:var(--ink-soft);
}
.past-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--card); }
.past-body{ min-width:0; flex:1; }
.past-name{ font-size:14.5px; font-weight:600; }
.past-short{ font-size:12.5px; font-weight:400; color:var(--ink-soft); margin-left:4px; }
.past-line{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13.5px; }
.past-count{ color:var(--ink-soft); font-size:12.5px; margin-left:2px; }

/* ---- profile photo column: avatar with its buttons underneath ---- */
.acct-profile{ align-items:flex-start; }
.acct-photo{ display:flex; flex-direction:column; align-items:stretch; gap:8px; flex:none; width:136px; }
.acct-photo .avatar{
    position:relative; overflow:hidden; align-self:center;
    width:84px; height:84px; font-size:26px; margin-bottom:2px;
}
.avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--card); }
.acct-photo .btn{ width:100%; white-space:nowrap; }
.acct-id{ min-width:0; padding-top:6px; }
.acct-profile{ margin-bottom:18px; }
@media (max-width:420px){ .acct-photo{ width:120px; } }
#affiliationsList,
.affiliation-card,
.affiliation-body,
.affiliation-head {
    overflow: visible !important;
}


/* =========================================================
   SUPPORT CONTACT
   ========================================================= */

.support-contact {
    /* Local color tokens (mobile widget) — same values as before,
       just centralized so they're defined once and reused. */

    --sc-shadow-rgb: 0, 0, 0;
    --sc-white-rgb: 255, 255, 255;

    position: relative;
}


/* Mobile toggle is hidden on desktop */
.support-contact-toggle {
    display: none;
}


/* =========================================================
   MOBILE SUPPORT WIDGET
   ========================================================= */

@media (max-width: 767px) {

    .support-contact {
        position: fixed;
        left: 16px;
        bottom: 16px;
        z-index: 9999;

        /* Do not allow the widget to interfere with layout */
        width: auto;

        user-select: none;
        -webkit-user-select: none;
    }


    /* -----------------------------------------------------
       Floating button
       ----------------------------------------------------- */

    .support-contact-toggle {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 54px;
        height: 54px;

        padding: 0;
        border: 0;
        border-radius: 50%;

        background: var(--paper);
        color: var(--ink);

        cursor: pointer;
        touch-action: manipulation;

        box-shadow:
                0 8px 24px rgba(var(--sc-shadow-rgb), .20),
                0 2px 6px rgba(var(--sc-shadow-rgb), .12);

        z-index: 3;

        -webkit-tap-highlight-color: transparent;

        /* Final transition (was overridden later in the original file) */
        transition:
                transform .2s ease,
                box-shadow .2s ease,
                border-color .15s ease;
    }


    .support-contact-toggle:hover {
        transform: translateY(-2px);

        box-shadow:
                0 10px 28px rgba(var(--sc-shadow-rgb), .24),
                0 3px 8px rgba(var(--sc-shadow-rgb), .14);
    }


    .support-contact-toggle:active {
        transform: scale(.94);
    }


    .support-contact-toggle:focus-visible {
        outline: 3px solid rgba(var(--sc-shadow-rgb), .25);
        outline-offset: 3px;
    }


    .support-contact-toggle-icon {
        position: absolute;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 24px;
        height: 24px;

        transition:
                opacity .2s ease,
                transform .25s ease;
    }


    .support-contact-toggle-icon svg {
        display: block;

        width: 24px;
        height: 24px;

        fill: currentColor;
    }


    .support-contact-toggle-icon--close {
        opacity: 0;
        transform: rotate(-45deg) scale(.6);
    }


    /* =====================================================
       PANEL
       ===================================================== */

    .support-contact-panel {
        position: absolute;

        left: 0;
        bottom: 66px;

        width: min(360px, calc(100vw - 32px));

        opacity: 0;
        visibility: hidden;

        transform-origin: bottom left;
        transform: translateY(18px) scale(.92);

        transition:
                opacity .22s ease,
                transform .28s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear .28s;

        pointer-events: none;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .support-contact-head {
        display: flex;
        flex-direction: column;

        padding: 16px 18px;

        background: var(--ink);
        color: var(--card);

        border-radius: 16px 16px 0 0;

        box-shadow:
                0 8px 30px rgba(var(--sc-shadow-rgb), .16);
    }


    .support-contact-title {
        display: block;
        color: var(--card) !important;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
    }


    .support-contact-hint {
        display: block;

        margin-top: 4px;

        font-size: 12px;
        line-height: 1.45;

        opacity: .72;
    }


    /* =====================================================
       TRANSPARENT GAP
       ===================================================== */

    .support-contact-links {
        display: flex;
        flex-direction: column;

        gap: 3px;

        margin-top: 5px;
    }


    /* =====================================================
       CONTACT ITEMS
       ===================================================== */

    .support-contact-link {
        display: flex;
        align-items: center;

        min-height: 68px;

        padding: 12px 16px;

        background: var(--paper);
        color: var(--ink);

        text-decoration: none;

        box-shadow:
                0 5px 20px rgba(var(--sc-shadow-rgb), .10);

        transition:
                background-color .18s ease,
                transform .18s ease;
    }


    .support-contact-link:hover {
        background: var(--card);
    }


    .support-contact-link:active {
        transform: scale(.99);
    }


    /* First item - no rounded corners */
    .support-contact-link:first-child {
        border-radius: 0;
    }


    /* Last item - bottom rounded corners */
    .support-contact-link:last-child {
        border-radius: 0 0 16px 16px;
    }


    /* =====================================================
       ICON
       ===================================================== */

    .support-contact-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        margin-right: 12px;

        border-radius: 50%;

        background: var(--brand-blue);
        color: var(--ink-soft);
    }


    .support-contact-icon svg {
        display: block;

        width: 20px;
        height: 20px;

        fill: currentColor;
    }


    /* =====================================================
       TEXT
       ===================================================== */

    .support-contact-content {
        min-width: 0;

        display: flex;
        flex-direction: column;
    }


    .support-contact-label {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
    }


    .support-contact-value {
        margin-top: 2px;

        font-size: 12px;
        line-height: 1.35;

        color: var(--line);

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =====================================================
       OPEN STATE
       ===================================================== */

    .support-contact.is-open .support-contact-panel {
        opacity: 1;
        visibility: visible;

        transform: translateY(0) scale(1);

        pointer-events: auto;

        transition:
                opacity .22s ease,
                transform .28s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear 0s;
    }


    .support-contact.is-open .support-contact-toggle-icon--open {
        opacity: 0;

        transform: rotate(45deg) scale(.6);
    }


    .support-contact.is-open .support-contact-toggle-icon--close {
        opacity: 1;

        transform: rotate(0) scale(1);
    }


    .support-contact.is-open .support-contact-toggle {
        transform: rotate(0);
    }


    /* =====================================================
       LONG-PRESS / DRAG ACTIVE
       ===================================================== */

    .support-contact.is-dragging .support-contact-toggle {

        /*
         * Visible border while dragging.
         */
        border: 3px solid currentColor;

        /*
         * Slightly larger so the user knows
         * drag mode is active.
         */
        transform: scale(1.08);

        cursor: grabbing;

        /*
         * Make the active state obvious.
         */
        box-shadow:
                0 0 0 4px rgba(var(--sc-white-rgb), .8),
                0 10px 30px rgba(var(--sc-shadow-rgb), .25);

        transition:
                transform .15s ease,
                box-shadow .15s ease,
                border-color .15s ease;
    }


    /*
     * Smooth snap after releasing the button.
     */
    .support-contact.is-snapping {
        transition:
                left .3s cubic-bezier(.22, 1, .36, 1),
                top .3s cubic-bezier(.22, 1, .36, 1);
    }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 400px) {

    .support-contact {
        left: 12px;
        bottom: 12px;
    }


    .support-contact-panel {
        width: calc(100vw - 24px);
    }


    .support-contact-toggle {
        width: 50px;
        height: 50px;
    }
}


/* =========================================================
   DESKTOP / INLINE CARD VARIANT
   (uses the shared theme tokens already defined elsewhere:
    --line, --paper, --ink, --ink-soft, --card, --line-strong, --focus)
   ========================================================= */

.support-contact {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.support-contact-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.support-contact-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.support-contact-hint {
    font-size: 12px;
    color: var(--ink-soft);
    text-align: right;
}

.support-contact-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.support-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 6px;

    color: var(--ink);
    text-decoration: none;

    transition: background .15s ease, border-color .15s ease;
}

.support-contact-link:hover {
    background: var(--card);
    border-color: var(--line-strong);
}

.support-contact-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.support-contact-icon {
    width: 26px;
    height: 26px;
    flex: none;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink-soft);

    font-size: 12px;
}

.support-contact-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 1px;
}

.support-contact-label {
    font-size: 12px;
    color: var(--ink-soft);
}

.support-contact-value {
    font-size: 13px;
    color: var(--ink);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {

    .support-contact-head {
        display: block;
    }

    .support-contact-hint {
        display: block;
        margin-top: 3px;
        text-align: left;
    }

    .support-contact-links {
        grid-template-columns: 1fr;
    }
}
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-text {
    flex: 1;
    min-width: 0;
}
.theme-toggle {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color, #d9dce3);
    border-radius: 50%;
    background: var(--ink, #fff);
    color: var(--paper, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}
.theme-toggle:hover {
    transform: scale(1.05);
}
.theme-toggle:active {
    transform: scale(0.95);
}
.theme-icon {
    line-height: 1;
}

.title-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.title-input-wrapper input {
    width: 100%;
    padding-right: 40px;
}

.title-availability {
    position: absolute;
    right: 12px;
    font-size: 22px;
    font-weight: bold;
    display: none;
}

.title-availability.available {
    display: block;
    color: #28a745;
}

.title-availability.unavailable {
    display: block;
    color: #dc3545;
}

/* Co-author modal: builds on .modal-overlay / .modal-box */
.modal-overlay-scroll{ overflow-y:auto; align-items:flex-start; }  /* scroll the overlay so ss-panel dropdowns aren't clipped */
.modal-box-lg{ max-width:600px; margin:auto; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.modal-head h3{ margin:0; }
.modal-close{
    border:none; background:none; cursor:pointer; padding:0 4px;
    font-size:24px; line-height:1; color:var(--ink-soft);
}
.modal-close:hover{ color:var(--ink); }

/* The form becomes the modal body: drop its dashed "inline card" look */
.modal-body .add-coauthor-form{
    display:block; border:none; padding:0; margin:0;
}
.modal-body .add-coauthor-form > .btn-primary{ width:100%; margin-top:6px; }
@media (max-width:560px){
    .modal-box-lg{ padding:20px 16px; }
}