/* === styles.css (cleaned & consolidated) =================================
   - Removes legacy emoji-pill participant actions
   - Uses subtle text-link actions (Host | Kick) on all breakpoints
   - No hidden row-actions on mobile
   - Comments in English only
=========================================================================== */

/* ---------- Theme tokens (dark default) ---------------------------------- */
:root{
  /* base colors */
  --bg:#1e1e1e; --text:#d4d4d4; --text-strong:#fff; --text-dim:#aeb3bb;
  --panel:#2d2d30; --panel-2:#3c3c3c; --panel-2-hover:#47494d; --panel-hover:#34363a; --border:#3c3c3c;
  --accent:#007acc; --accent-strong:#005a9e;
  --ok:#4caf50; --ok-border:#81c784; --warn:#ffd54f; --danger:#ef4444;
  --shadow:0 6px 16px rgba(0,0,0,.25);
  --radius:12px; --radius-sm:8px;
  --h-input:44px; --h-button:44px; --gap:12px; --gap-sm:8px;
  --btn-primary-bg:#2b6cb0;

  /* footer + sticky CTA spacing */
  --footer-h:68px;
  --cta-offset:8px;

  /* cards */
  --card-min-desktop:46px; --card-max-desktop:84px;
  --card-min-mobile:40px; --card-max-mobile:72px;
  --pre-vote-margin-desktop:2.2rem; --pre-vote-margin-mobile:1.1rem;

  /* list */
  --icon-col-width:1.5rem; --name-text-col:0px;

  /* switches */
  --switch-off-track:#586069; --switch-off-border:#7a8089;
  --switch-on-track:var(--accent); --switch-on-border:var(--accent-strong);
  --switch-knob:#fff;

  /* result chips */
  --vote-chip-width:5ch;

  /* inactive text color (dark) */
  --inactive-fg:#8c949f;

  /* input tokens (dark default) */
  --field-bg:#1f2937;
  --field-border:rgba(255,255,255,.16);
  --field-fg:#e5e7eb;
  --field-placeholder:rgba(255,255,255,.45);
  --field-focus:#60a5fa;

  /* hamburger + header-controls geometry */
  --hamburger-right: 12px;
  --hamburger-top: 10px;
  --hamburger-size: 40px;
  --header-gap: 8px;
  --hc-height: 36px;
  --hc-pad: 4px;
  --hc-gap: 4px;
  --hc-seg-size: 28px;
  --hc-active-ring: 1px;
  --hc-active-ring-color: rgba(255,255,255,0.45);

  /* header-controls nudge */
  --hc-nudge-y: 0px;
}

:root[data-theme="light"]{
  --bg:#f6f7f9; --text:#1f2937; --text-strong:#111827; --text-dim:#374151;
  --panel:#fff; --panel-2:#eef2f7; --panel-2-hover:#e7ebf2; --panel-hover:#f7f8fb; --border:#e5e7eb;
  --accent:#2563eb; --accent-strong:#1d4ed8;
  --shadow:0 10px 24px rgba(0,0,0,.08);

  --chip-special-bg:#eaf2ff; --chip-special-border:#cfe0ff; --chip-special-text:#0b1220;

  --switch-off-track:#d2d6de; --switch-off-border:#b8bec9;

  --inactive-fg:#9ca3af;

  --field-bg:#fff;
  --field-border:rgba(0,0,0,.20);
  --field-fg:#111827;
  --field-placeholder:#8b8b8b;
  --field-focus:#3b82f6;
}

/* ---------- Base ---------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:Consolas,monospace;
  margin:0; padding:2rem; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--footer-h);
}
button,input,select,textarea{font:inherit;color:inherit}
body.menu-open{overflow:hidden}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.container{max-width:800px;margin:0 auto;padding:1rem}
h1{color:var(--text-strong);margin-bottom:2rem;font-size:1.1rem}
h2{color:var(--text-strong);margin:1.2rem 0 .8rem;font-size:.98rem}
strong{color:var(--text-strong)}
.app-title{display:flex;align-items:center;gap:.5rem;justify-content:flex-start}
.app-title .logo{border-radius:6px;vertical-align:middle}
.page-landing .app-title{justify-content:center;text-align:center}
@media (max-width:560px){.app-title{justify-content:center;text-align:center}}

/* header info */
.main-info{display:grid;grid-template-columns:max-content 1fr;column-gap:10px;row-gap:6px;align-items:center;margin-bottom:1.2rem}
.main-info dt{margin:0;grid-column:1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.main-info dd{margin:0;grid-column:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-with-actions{display:inline-flex;align-items:center;gap:6px}
.room-with-actions .icon-button{margin-left:10px}

/* ---------- Topic row ----------------------------------------------------- */
.topic-row{display:grid;grid-template-columns:max-content 1fr max-content;gap:8px 10px;align-items:center;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;margin:1.2rem 0 1rem}
.topic-label{white-space:nowrap;color:var(--text-strong)}
.topic-text{display:inline-block;color:var(--text);padding:.15rem .45rem;border-radius:6px;background:var(--panel);border:1px solid var(--border);min-height:26px;line-height:1.3;font-size:.92rem}
.topic-text a{color:inherit;text-decoration:none}
.topic-text a:hover{text-decoration:underline}
.topic-actions{display:flex;align-items:center;gap:6px}

/* optional edit block */
.topic-edit{display:grid;grid-template-columns:1fr max-content;gap:8px;align-items:center;margin:1.2rem 0 1rem;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px}
.topic-input{height:36px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:0 .75rem}

/* #topicRow override used in Room (flex for ellipsis hint) */
#topicRow{display:flex;align-items:center;gap:.5rem}
#topicRow .topic-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topicOverflowHint.topic-more-btn{flex:0 0 auto;background:transparent;border:0;padding:0;margin-left:.25rem;font:inherit;font-size:.9em;line-height:1;opacity:.8;cursor:help;text-decoration:underline dotted}
#topicOverflowHint.topic-more-btn:hover{opacity:1}

/* ---------- Menu trigger -------------------------------------------------- */
.menu-button{
  position:fixed;top:12px;right:12px;z-index:1100;height:40px;width:40px;border:1px solid var(--border);
  border-radius:12px;background:var(--panel);color:var(--text-strong);cursor:pointer;box-shadow:var(--shadow);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:transform 120ms,background 180ms,border-color 180ms,box-shadow 180ms;-webkit-tap-highlight-color:transparent
}
.menu-button:hover{background:var(--panel-hover);border-color:#4a4a4a}
.menu-button:active{transform:translateY(1px) scale(.98)}

/* ---------- Menu overlay & panel ----------------------------------------- */
.hidden{display:none !important}
.menu-overlay{position:fixed;inset:0;z-index:1090}
.menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(1px);padding-bottom:env(safe-area-inset-bottom)}
:root[data-theme="light"] .menu-backdrop{background:rgba(0,0,0,.25)}
.menu-panel{
  position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:min(440px,calc(100vw - 24px));
  max-height:calc(100dvh - (max(12px,env(safe-area-inset-top)) + 12px));overflow-y:auto;overflow-x:hidden;
  background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.35);
  padding:12px 12px calc(14px + env(safe-area-inset-bottom));animation:slideIn 180ms ease both
}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.menu-panel fieldset{border:0;padding:0;margin:0;min-inline-size:auto}
.menu-header{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:20}
.menu-header h3{margin:0;font-size:1rem;color:var(--text-strong)}
.menu-section{display:flex;flex-direction:column;gap:10px;padding:8px 4px 10px}
.section-title{margin:6px 8px 6px;font-weight:600;font-size:.9rem;opacity:.85;color:var(--text-strong)}

#appMenuOverlay[hidden],
#appMenuOverlay.is-hidden,
#appMenuOverlay[aria-hidden="true"]{pointer-events:none !important}

/* rows */
.menu-item{
  display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--border);cursor:pointer;text-align:left;font-size:.9rem;color:var(--text);
  transition:background 180ms,border-color 180ms,box-shadow 180ms
}
.menu-item:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.menu-item.disabled{opacity:.55;cursor:not-allowed}
.menu-item .mi-icon{font-size:18px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif}

/* language quick row */
.lang-inline{display:flex;align-items:center;gap:8px}
.flag-split{position:relative;display:inline-block;width:24px;height:16px;overflow:hidden;border-radius:3px;border:1px solid var(--border)}
.flag-split .flag{position:absolute;inset:-.5px;width:calc(100% + 1px);height:calc(100% + 1px);object-fit:cover}
.flag-split .flag-b{z-index:1;-webkit-mask-image:linear-gradient(135deg,transparent 49.5%,black 50%);mask-image:linear-gradient(135deg,transparent 49.5%,black 50%)}
@supports not (mask-image:linear-gradient(#000,#000)){.flag-split .flag-b{clip-path:polygon(100% 0,100% 100%,0 100%)}}

/* choice pills */
.menu-choice{display:flex;flex-wrap:wrap;gap:8px}
.choice-btn{display:flex;align-items:center;gap:8px;justify-content:center;padding:10px 12px;height:34px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);cursor:pointer;font-size:.9rem;color:var(--text);transition:background 180ms,border-color 180ms,box-shadow 180ms}
.choice-btn .mi-icon{font-size:18px;line-height:1}
.choice-btn:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.choice-btn.active,.choice-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.20)}

/* sequence radios */
.menu-choice.vertical{flex-direction:column;gap:6px}
.radio-row{display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:36px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);user-select:none;transition:background 180ms,border-color 180ms,box-shadow 180ms;font-size:.9rem;white-space:nowrap;overflow:hidden}
.radio-row input[type="radio"]{width:16px;height:16px;accent-color:var(--accent);margin:0;flex:0 0 auto}
.radio-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.radio-row:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.radio-row.disabled{opacity:.55;cursor:not-allowed}
.radio-row:has(input[type="radio"]:checked){border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.20);background:color-mix(in srgb,var(--panel-2) 84%, var(--accent) 16%)}

/* switches */
.menu-item.switch{grid-template-columns:28px 1fr max-content}
.switch-text{display:flex;gap:6px;align-items:baseline;min-width:0;white-space:nowrap}
.switch-control{
  -webkit-appearance:none;appearance:none;width:42px;height:24px;border-radius:999px;background:var(--switch-off-track);
  border:1px solid var(--switch-off-border);position:relative;cursor:pointer;transition:background 160ms,border-color 160ms,box-shadow 160ms
}
.switch-control::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--switch-knob);
  box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform 160ms ease
}
.switch-control:checked,.switch-control[aria-checked="true"]{background:var(--switch-on-track);border-color:var(--switch-on-border);box-shadow:0 0 0 2px rgba(0,122,204,.20)}
.switch-control:checked::after,.switch-control[aria-checked="true"]::after{transform:translateX(18px)}
.switch-control:disabled{opacity:.6;cursor:not-allowed}

/* Danger CTA inside menu */
#closeRoomBtn.menu-item.danger{
  display:grid;grid-template-columns:28px 1fr;align-items:center;
  background:rgba(255,70,70,.10);border-color:rgba(255,70,70,.25);color:#fecaca;
}
#closeRoomBtn.menu-item.danger:hover{border-color:rgba(255,70,70,.45);box-shadow:0 0 0 2px rgba(239,68,68,.18)}
#closeRoomBtn.menu-item.danger .mi-icon{font-size:18px;line-height:1}
#closeRoomBtn .truncate-1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Icon button --------------------------------------------------- */
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;transition:background 180ms,border-color 180ms,transform 120ms,box-shadow 180ms;-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1}
.icon-button:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.icon-button:active{transform:translateY(1px) scale(.98)}
:root[data-theme="light"] .icon-button:hover{box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.icon-button.neutral{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--outline-3);border-radius:10px;background:transparent;color:var(--text-2);line-height:1}
.icon-button.neutral:hover{border-color:var(--outline-4)}
.icon-button.neutral:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Forms / landing ---------------------------------------------- */
.landing-container{display:flex;flex-direction:column;align-items:center;min-height:90vh;padding:2rem;text-align:center;margin-top:6vh}
.join-form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.form-row{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px}
.form-field{width:100%}
.landing-container .join-form .form-row:first-of-type{margin-top:10px}

/* Inputs */
input[type="text"],input[type="search"],input[type="email"],input[type="url"],
input[type="password"],input[type="number"],input[type="tel"],
textarea,select{
  display:block;width:100%;
  height:auto;min-height:var(--h-input);
  padding:.55rem .75rem;border-radius:10px;
  background:var(--field-bg); color:var(--field-fg);
  border:1px solid var(--field-border);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.05);
  -webkit-appearance:none; appearance:none;
  transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s;
}
input::placeholder,textarea::placeholder{color:var(--field-placeholder)}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--field-focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--field-focus) 35%, transparent);
}
input[disabled],textarea[disabled],select[disabled],
input[readonly],textarea[readonly]{opacity:.7;cursor:not-allowed}

/* Safari/iOS autofill & tap highlights */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--field-fg);
  -webkit-box-shadow:0 0 0 1000px var(--field-bg) inset;
  transition:background-color 9999s ease-out 0s;
}
:root[data-theme="dark"] input,:root[data-theme="dark"] textarea,:root[data-theme="dark"] select{
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
}

/* ---------- Buttons ------------------------------------------------------- */
.button{margin-top:1.2rem;height:var(--h-button);padding:0 1.2rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:1rem;transition:transform 120ms,filter 180ms,box-shadow 180ms,background 180ms;box-shadow:var(--shadow)}
.button:hover{background:var(--accent-strong);filter:brightness(1.04)}
.button:active{transform:translateY(1px) scale(.985)}
.button:disabled{opacity:.6;cursor:not-allowed}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
button.shake{animation:shake .4s}

/* ---------- Cards --------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--card-min-desktop), var(--card-max-desktop)));gap:8px;margin:1rem 0}
.card-grid.fixed4{grid-template-columns:repeat(4,minmax(var(--card-min-desktop),var(--card-max-desktop)))}
.card-grid button{display:inline-block;padding:.55rem .6rem;margin:.35rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;font-size:clamp(1.05rem,2.2vw,1.3rem);text-align:center;color:var(--text);position:relative;aspect-ratio:5/3}
.card-grid button:hover{background:var(--panel-hover);transform:translateY(-1px);box-shadow:0 0 10px rgba(0,122,204,.35);border-color:#4a4a4a}
button.selected{background:#163a52 !important;color:#fff !important;font-weight:bold;border:2px solid rgba(0,122,204,.6);box-shadow:0 0 0 4px rgba(0,122,204,.22),0 0 12px rgba(0,122,204,.35);transform:scale(1.03)}
.card-grid .grid-break{grid-column:1 / -1;height:0;pointer-events:none}
.card-grid .checkmark{display:none !important}
.card-grid button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(35%);background:var(--panel-2);border-color:var(--border);box-shadow:none;transform:none !important}
.card-grid button:disabled:hover{background:var(--panel-2);border-color:var(--border);box-shadow:none;transform:none}

/* ---------- Participants -------------------------------------------------- */
ul{list-style:none;padding:0;margin:0}
li{margin-bottom:.4rem;line-height:1.5;font-size:1rem}
#liveParticipantList .participant-row{display:grid;grid-template-columns:var(--icon-col-width) 1fr 1fr;align-items:center;column-gap:.4rem;margin-bottom:.4rem;padding:6px 8px;border-bottom:1px solid var(--border);border-radius:6px}
#liveParticipantList .participant-row.is-host{background:rgba(0,122,204,.08);outline:1px solid rgba(0,122,204,.22)}
:root[data-theme="light"] #liveParticipantList .participant-row.is-host{background:#e8f1ff;outline-color:rgba(37,99,235,.35)}

.participant-icon{width:var(--icon-col-width);display:inline-flex;justify-content:center;align-items:center;line-height:1}
.participant-icon.host{font-size:1.1rem}
.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--text)}

/* Host crown left of name */
.host-label{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.2em;height:1.2em;margin-right:.35rem;line-height:1;font-size:1.05em;vertical-align:middle;
  transform:translateY(var(--emoji-nudge-y, -0.5px));
}
.host-label[hidden]{display:none !important}

/* Disconnected row style */
#liveParticipantList li.disconnected{font-style:normal;color:var(--inactive-fg)}
#liveParticipantList li.disconnected .name{color:var(--inactive-fg)}
#liveParticipantList li.disconnected .participant-icon{opacity:.85}

/* right column base */
.row-right{display:flex;align-items:center;gap:10px;min-height:1.8rem}
.row-right > .row-action:first-of-type{margin-left:auto}
.row-right :where(.vote-chip,.mini-chip,.status-icon) ~ .row-action:first-of-type{margin-left:auto}

/* pre-vote status icons */
.status-icon{font-size:1rem;line-height:1;display:inline-flex;align-items:center}
.status-icon.done{color:var(--ok);filter:drop-shadow(0 0 2px rgba(76,175,80,.6))}
.status-icon.pending{color:var(--warn);opacity:.95}

/* spectator as outline chip */
#liveParticipantList .status-icon.spectator{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--vote-chip-width);
  padding:.15rem .35rem;border-radius:8px;
  background:transparent;color:var(--text-dim);
  border:1.5px solid rgba(148,163,184,.35);box-shadow:none;line-height:1.2;
}
:root[data-theme="light"] #liveParticipantList .status-icon.spectator{
  border-color:var(--chip-special-border,#cfe0ff);
  color:var(--chip-special-text,#0b1220);
}

/* Equal-width result chips */
.vote-chip{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--vote-chip-width);
  padding:.15rem .35rem;border-radius:8px;background:#185a33;color:#fff;font-weight:700;
  border:2px solid #2b7a4a;box-shadow:0 0 6px rgba(24,90,51,.45);font-size:.95rem;line-height:1.2;text-align:center;
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(6px);animation:chipIn 220ms ease forwards
}
.vote-chip.special{background:#2a2f3a;border-color:#475569;box-shadow:none;color:#cbd5e1}
:root[data-theme="light"] .vote-chip.special{background:var(--chip-special-bg);border-color:var(--chip-special-border);color:var(--chip-special-text)}
@keyframes chipIn{to{opacity:1;transform:translateY(0)}}
.vote-chip.outlier{box-shadow:0 0 0 3px rgba(255,213,79,.22), inset 0 0 0 1px rgba(255,213,79,.55)}
:root[data-theme="light"] .vote-chip.outlier{box-shadow:0 0 0 3px rgba(255,213,79,.28), inset 0 0 0 1px rgba(234,179,8,.55)}

/* "no vote" — transparent outline chip */
#liveParticipantList .vote-chip.empty,
.vote-chip.empty{
  background:transparent !important;
  border:2px solid #475569 !important;
  color:#cbd5e1 !important;
  box-shadow:none !important;
  font-weight:600;
}
:root[data-theme="light"] #liveParticipantList .vote-chip.empty,
:root[data-theme="light"] .vote-chip.empty{
  border-color:#cfe0ff !important;
  color:#0b1220 !important;
}

/* === Participant actions: short text links ("Host | Kick") =============== */
/* One consistent, mobile-safe implementation with no wrapping and a fallback
   when .ra-label is absent (uses aria-label or title). */

#liveParticipantList .row-right{
  gap: 8px;
  min-height: 1.6rem;
  flex-wrap: nowrap;                 /* never wrap the actions */
  align-items: center;
}

/* keep DOM order consistent: Host first, Kick second */
#liveParticipantList .row-right .row-action.host{ order: 1; }
#liveParticipantList .row-right .row-action.kick{ order: 2; }

#liveParticipantList .row-right .row-action{
  display: inline-flex !important;
  align-items: baseline;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0;
  border-radius: 0 !important;
  cursor: pointer;
  position: relative;                /* enlarge tap target on touch */
  white-space: nowrap;               /* label itself must not wrap */
}

#liveParticipantList .row-right .row-action .ra-icon{
  display: none !important;          /* keep for a11y, hide visually */
}

#liveParticipantList .row-right .row-action .ra-label{
  display: inline !important;
  font-size: .82rem;
  line-height: 1.2;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted transparent; /* underline only the word */
  white-space: nowrap;
}

/* separator -> NBSP | NBSP (prevents line break) */
#liveParticipantList .row-right .row-action + .row-action::before{
  content: "\00a0|\00a0";
  opacity: .45;
}

/* hover/focus */
#liveParticipantList .row-right .row-action:hover .ra-label,
#liveParticipantList .row-right .row-action:focus-visible .ra-label{
  color: var(--text-strong);
  border-bottom-color: currentColor;
}
#liveParticipantList .row-right .row-action:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* tone Kick a bit */
#liveParticipantList .row-right .row-action.kick .ra-label{ color: #fca5a5; }
#liveParticipantList .row-right .row-action.kick:hover .ra-label,
#liveParticipantList .row-right .row-action.kick:focus-visible .ra-label{ color: #f87171; }

/* disabled */
#liveParticipantList .row-right .row-action:disabled .ra-label{
  opacity: .55;
  border-bottom-color: transparent;
  cursor: not-allowed;
}

/* larger invisible hit area on touch devices */
@media (any-pointer: coarse){
  #liveParticipantList .row-right .row-action::after{
    content: "";
    position: absolute;
    inset: -6px -4px;
    border-radius: 6px;
  }
}

/* Fallback: if there's no .ra-label, print from aria-label or title */
#liveParticipantList .row-right .row-action:not(:has(.ra-label))[aria-label]::after{
  content: attr(aria-label);
  font-size: .82rem; line-height: 1.2; white-space: nowrap;
  color: var(--text-dim); border-bottom: 1px dotted transparent;
}
#liveParticipantList .row-right .row-action:not(:has(.ra-label)):not([aria-label])[title]::after{
  content: attr(title);
  font-size: .82rem; line-height: 1.2; white-space: nowrap;
  color: var(--text-dim); border-bottom: 1px dotted transparent;
}

/* make the fallback react to hover/focus like the normal label */
#liveParticipantList .row-right .row-action:not(:has(.ra-label)):hover::after,
#liveParticipantList .row-right .row-action:not(:has(.ra-label)):focus-visible::after{
  color: var(--text-strong);
  border-bottom-color: currentColor;
}

/* tone Kick in fallback, too */
#liveParticipantList .row-right .row-action.kick:not(:has(.ra-label))::after{ color:#fca5a5; }
#liveParticipantList .row-right .row-action.kick:not(:has(.ra-label)):hover::after,
#liveParticipantList .row-right .row-action.kick:not(:has(.ra-label)):focus-visible::after{ color:#f87171; }

/* phone: a tick larger for tap comfort */
@media (max-width: 420px){
  #liveParticipantList .row-right{ gap: 8px; }
  #liveParticipantList .row-right .row-action .ra-label,
  #liveParticipantList .row-right .row-action:not(:has(.ra-label))::after{
    font-size: .90rem;
  }
}

/* ---------- Results / average -------------------------------------------- */
.pre-vote{margin-top:var(--pre-vote-margin-desktop)}
.average-label{font-size:1rem;margin-top:1rem}
.average-label #averageVote{font-size:.85rem;font-weight:600;opacity:0;animation:avgIn 240ms ease forwards}
@keyframes avgIn{to{opacity:1}}
.average-label.consensus{color:var(--ok);font-weight:700}
.average-label.consensus #averageVote{font-weight:800}
.consensus-row{white-space:nowrap}
.consensus-row.is-consensus .value{animation:pulseOnce .5s ease}
@keyframes pulseOnce{0%{transform:scale(.96);filter:brightness(1.05)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.average-label .stat{margin-left:.25rem}.average-label .sep{opacity:.6;margin:0 .35rem}

/* ---------- Toast --------------------------------------------------------- */
.toast{position:fixed;top:20px;right:20px;background:rgba(51,51,51,.95);color:#fff;padding:12px 20px;border-radius:10px;z-index:9999;font-size:14px;box-shadow:var(--shadow);transform:translateY(-10px);opacity:0;animation:fadein 220ms ease forwards,fadeout 400ms ease 2400ms forwards}
@keyframes fadein{to{opacity:.95;transform:translateY(0)}}@keyframes fadeout{to{opacity:0}}

/* ---------- QR overlay (optional) ---------------------------------------- */
.qr-overlay{position:fixed;inset:0;z-index:1200}
.qr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
:root[data-theme="light"] .qr-backdrop{background:rgba(0,0,0,.35)}
.qr-dialog{position:absolute;inset:0;margin:auto;width:min(92vw,420px);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:12px;max-height:92vh;display:grid;grid-template-rows:auto 1fr auto;animation:slideIn 180ms ease both}
.qr-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px;border-bottom:1px solid var(--border)}
.qr-header h3{margin:0;font-size:1rem;color:var(--text-strong)}
.qr-close{border:1px solid var(--border);background:var(--panel-2);border-radius:8px;width:34px;height:34px;cursor:pointer}
.qr-body{display:grid;place-items:center;padding:16px}
.qr-actions{display:flex;justify-content:flex-end;gap:8px}
#qrCanvas{image-rendering:pixelated;width:320px;height:320px;border-radius:10px;background:#fff}
@media (prefers-reduced-motion:reduce){.menu-panel,.qr-dialog{animation:none}}

/* ---------- Footer & sticky CTA spacing ---------------------------------- */
.app-footer{position:fixed;left:0;right:0;bottom:0;background:var(--panel);color:var(--text-dim);border-top:1px solid var(--border);text-align:center;padding:8px 12px;font-size:.82rem;line-height:1.2;z-index:4;-webkit-user-select:none;user-select:none}
.app-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* extra room for sticky CTA on mobile */
.container{padding-bottom:max(24px, calc(var(--footer-h) + 48px))}
@media (max-width:600px){
  .app-footer{font-size:.62rem;padding:6px 10px;margin-top:50px}
  body{padding-bottom:calc(var(--footer-h) + 72px)}
  #revealButton,#resetButton{
    position:fixed;left:16px;right:16px;
    bottom:calc(var(--cta-offset) + var(--footer-h) + env(safe-area-inset-bottom));
    z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .container{padding-bottom:calc(var(--footer-h) + 120px)}
}
@supports (-webkit-touch-callout:none){.app-footer{font-size:.58rem}}

/* ---------- Utilities ----------------------------------------------------- */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.truncate-1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.no-horizontal-scroll{overflow-x:hidden !important}

/* Clickable topic row (host-only; added via JS with .editable) */
.topic-row.editable{cursor:pointer}
.topic-row.editable:hover{background:rgba(148,163,184,.08);border-radius:6px}

/* === Result row: centered on desktop/tablet, stacked on mobile =========== */

#resultRow{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .35rem .6rem;
  flex-wrap: nowrap;          /* keep one line on wide viewports */
  text-align: center;
}

/* keep label/value chunks together */
#resultRow #resultLabel,
#resultRow #averageVote,
#resultRow #medianWrap,
#resultRow #rangeWrap{
  white-space: nowrap;
}

/* nicer spacing for separators */
#resultRow .sep{
  opacity: .6;
  margin: 0 .45rem;
}

/* mobile (≤640px): stacked, but centered */
@media (max-width: 640px){
  #resultRow{
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .25rem .5rem;
  }
  #resultRow .sep{ display: none !important; }
  #medianWrap, #rangeWrap{
    flex: 0 0 100%;
    text-align: center;
  }
}


/* ===== Menu compact sizing (final values) ================================= */
.menu-panel{font-size:.85em;width:min(92vw,380px);padding:10px 12px}
.menu-header h3{font-size:1em;margin:4px 0 6px}
.menu-section{margin:10px 0}
.section-title{margin:4px 8px 2px;font-size:.95em;opacity:.85;font-weight:600;letter-spacing:.01em}
.menu-item{padding:6px 8px;gap:8px}
.menu-item.switch{grid-template-columns:24px 1fr max-content;column-gap:8px}
.menu-item .mi-icon{font-size:1rem;min-width:24px;text-align:center}
.menu-choice{gap:6px}
.choice-btn{padding:6px 10px;border-radius:10px;font-size:1em}
.choice-btn .mi-icon{font-size:1rem}
.menu-choice.vertical .radio-row{padding:6px 8px;gap:8px}
.menu-choice.vertical input[type="radio"]{margin-right:6px}

/* Disabled reveal button visual */
.button[disabled]{opacity:.6;cursor:not-allowed;filter:saturate(.85)}

/* === Mini outline chip for non-numeric states ============================ */
.mini-chip{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size: var(--vote-chip-width);
  height: 1.6rem; padding:.15rem .35rem; border-radius:8px;
  background:transparent; border:1.5px solid rgba(148,163,184,.35);
  color:var(--text-dim); font-weight:700; font-size:.95rem; line-height:1.2;
  font-variant-numeric:tabular-nums;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
}
:root[data-theme="light"] .mini-chip{border-color:var(--chip-special-border,#cfe0ff);color:var(--chip-special-text,#0b1220)}
.mini-chip.done{border-color:rgba(34,197,94,.45);color:var(--ok)}
.mini-chip.pending{border-color:rgba(234,179,8,.45)}

/* Status pending styled as neutral outlined chip (right column) */
#liveParticipantList .row-right .status-icon.pending{
  inline-size:var(--vote-chip-width);
  padding:.15rem .35rem;border-radius:8px;
  background:transparent;border:1.5px solid rgba(148,163,184,.35) !important;
  box-shadow:none;color:var(--text-dim) !important;opacity:1;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
}
:root[data-theme="light"] #liveParticipantList .row-right .status-icon.pending{
  border-color:var(--chip-special-border,#cfe0ff) !important;
  color:var(--chip-special-text,#0b1220) !important;
}

/* Heat-colored chips */
.vote-chip.heat{
  --_h: var(--chip-heat-h,120);
  border-color:hsl(var(--_h) 75% 55%);
  color:hsl(var(--_h) 85% 62%);
  background:color-mix(in oklab, hsl(var(--_h) 80% 50%) 14%, transparent);
}
@supports not (color-mix(in oklab, white, black)){.vote-chip.heat{background:transparent}}

@media (prefers-color-scheme: light){
  .vote-chip,.participant-row .mini-chip{color:#0f172a;font-weight:600}
  .vote-chip.heat{
    --_h: var(--chip-heat-h,120);
    color:#0f172a;border-color:hsl(var(--_h) 72% 42%);
    background:color-mix(in oklab, hsl(var(--_h) 80% 58%) 36%, white);
    box-shadow:inset 0 0 0 1px hsl(var(--_h) 50% 34% / .25);
  }
}
@supports not (color-mix(in oklab, white, black)){
  @media (prefers-color-scheme: light){.vote-chip.heat{background:hsl(var(--_h) 90% 90%)}}
}

/* explicit light theme */
html.light .vote-chip, body.light .vote-chip, :root[data-theme="light"] .vote-chip,
html.light .participant-row .mini-chip, body.light .participant-row .mini-chip, :root[data-theme="light"] .participant-row .mini-chip{color:#0f172a;font-weight:600}
html.light .vote-chip.heat, body.light .vote-chip.heat, :root[data-theme="light"] .vote-chip.heat{
  --_h: var(--chip-heat-h,120);
  color:#0f172a;border-color:hsl(var(--_h) 72% 42%);
  background:color-mix(in oklab, hsl(var(--_h) 80% 58%) 36%, white);
  box-shadow:inset 0 0 0 1px hsl(var(--_h) 50% 34% / .25);
}
@supports not (color-mix(in oklab, white, black)){
  html.light .vote-chip.heat, body.light .vote-chip.heat, :root[data-theme="light"] .vote-chip.heat{background:hsl(var(--_h) 90% 90%)}
}

/* Stop re-animations while revealed */
.no-chip-anim .vote-chip,
.no-chip-anim .average-label #averageVote{animation:none !important;opacity:1 !important;transform:none !important}

/* Reserve vertical space for the result-row to avoid page jumping */
.result-row-wrap{min-height:34px}
@media (max-width:640px){.result-row-wrap{min-height:56px}}
#resultRow{min-height:1.2rem}
.result-row-placeholder{min-height:inherit}
.post-vote{min-height:1.6rem}

/* Result row is hidden until cards are revealed, but keeps its height */
body:not(.votes-revealed) #resultRow{visibility: hidden;}

/* Knowledge bites ---------------------------------------------------------- */
.knowledge-bites{
  margin-top:5.25rem;
  padding-bottom:max(24px, calc(var(--footer-h) + var(--cta-offset, 8px) + env(safe-area-inset-bottom)));
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding-inline:12px;
  padding-block:10px;
}
.container .knowledge-bites{padding-bottom:8px}
@media (max-width:600px){.container .knowledge-bites{padding-bottom:12px}}
.knowledge-bites > h2{margin:.25rem 0 .5rem;font-size:.95rem;color:var(--text-strong);text-align:center}
.kb{border:1px solid var(--border);border-radius:10px;background:var(--panel-2);margin:8px 0;overflow:clip}
.kb > summary{display:flex;align-items:baseline;gap:.5rem;padding:8px 10px;cursor:pointer;list-style:none}
.kb > summary::-webkit-details-marker{display:none}
.kb-title{font-size:.80rem;font-weight:600;color:var(--text-strong)}
.kb-preview{font-size:.80rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-body{padding:8px 10px 10px;font-size:.75rem;line-height:1.45;color:var(--text)}
.kb-body ul{margin:.25rem 0 0 .9rem;padding:0}
.kb-body li{margin:.25rem 0;font-size:.75rem}
.kb:hover{border-color:var(--accent)}
.kb[open] > summary{background:var(--panel-2-hover)}

/* ---------- Header Controls (language pill) ------------------------------- */
.header-controls{
  position:fixed;
  top:calc(var(--hamburger-top) + (var(--hamburger-size) - var(--hc-height)) / 2 + var(--hc-nudge-y));
  right:calc(var(--hamburger-right) + var(--hamburger-size) + var(--header-gap));
  display:flex;align-items:center;gap:10px;z-index:90;pointer-events:auto;
}
.hc-group{
  display:inline-flex;align-items:center;height:var(--hc-height);
  padding:var(--hc-pad);gap:var(--hc-gap);border-radius:9999px;
  background:var(--surface-2, rgba(255,255,255,0.08));
  border:1px solid var(--border-1, rgba(255,255,255,0.12));
  box-shadow:var(--shadow-1, 0 2px 8px rgba(0,0,0,0.2));
}
.hc-group .seg{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--hc-seg-size);height:var(--hc-seg-size);
  border:0;border-radius:9999px;background:transparent;color:inherit;cursor:pointer;user-select:none;padding:0;line-height:1;
}
.hc-group .seg:hover{background:var(--surface-3, rgba(255,255,255,0.10))}
.hc-group .seg[aria-pressed="true"], .hc-group .seg.active{
  background:var(--surface-3, rgba(255,255,255,0.12));
  box-shadow:inset 0 0 0 var(--hc-active-ring) var(--hc-active-ring-color), inset 0 0 0 9999px rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.35);
}
.flag-pair{position:relative;width:20px;height:20px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border-1, rgba(255,255,255,0.18))}
.flag-pair .flag{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flag-pair .flag-a{-webkit-mask-image:linear-gradient(135deg,#000 0 49%,transparent 51% 100%);mask-image:linear-gradient(135deg,#000 0 49%,transparent 51% 100%)}
.flag-pair .flag-b{-webkit-mask-image:linear-gradient(135deg,transparent 0 49%,#000 51% 100%);mask-image:linear-gradient(135deg,transparent 0 49%,#000 51% 100%)}

/* compact: ≤420px */
@media (max-width:420px){
  :root{--hamburger-size:36px;--header-gap:6px;--hc-height:34px;--hc-seg-size:26px;--hc-gap:3px}
  .header-controls .hc-group{padding:3px;gap:0;background:transparent;border-color:transparent;box-shadow:none}
  .header-controls .hc-group .seg{position:relative;width:32px;height:32px;border-radius:9999px;padding:0;line-height:1}
  #hcLang .seg[aria-pressed="false"]{display:none !important}
  .header-controls .hc-group .seg[aria-pressed="true"]{background:var(--panel-2);border:1px solid var(--border);box-shadow:inset 0 0 0 var(--hc-active-ring,1px) var(--hc-active-ring-color, rgba(255,255,255,.45))}
  .header-controls .hc-group .seg::after{content:"";position:absolute;inset:-4px;border-radius:inherit}
  .header-controls .hc-group .flag-pair{width:18px;height:18px}
}

/* fallback position when space is tight */
@media (max-width:340px){
  .header-controls{top:calc(var(--hamburger-top) + var(--hamburger-size) + 8px);right:var(--hamburger-right)}
}

/* desktop/tablet nudge for perfect centering */
@media (min-width:421px){
  :root{--hc-nudge-y:1px}
}

/* ---------- Mobile polish ≤420px ----------------------------------------- */
@media (max-width:420px){

  /* title spacing */
  h1.app-title{margin:.35rem 0 .6rem;gap:.4rem}
  .app-title .logo{width:20px;height:20px}
  h1.app-title span{font-size:.98rem;line-height:1.15}

  /* chips */
  :root{--chip-h-mobile:36px}
  .main-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:.25rem 0 .4rem}
  .main-info dt{display:none}
  .main-info dd{
    height:var(--chip-h-mobile);
    margin:0;display:inline-flex;align-items:center;gap:6px;
    padding:0 10px;line-height:1;border-radius:999px;
    background:var(--panel-2);border:1px solid var(--border);font-size:.92rem;
  }
  .main-info dd:nth-of-type(1)::before{content:"👤"}
  .main-info dd:nth-of-type(2)::before{content:"🆔"}
  .main-info .icon-button{width:32px;height:32px;border-radius:10px}

    /* cards (flatter on phones) */
  .card-grid{
    grid-template-columns: repeat(3, minmax(var(--card-min-mobile), 1fr)) !important;
    gap: 8px;
  }
  .card-grid.fixed4{
    grid-template-columns: repeat(3, minmax(var(--card-min-mobile), 1fr)) !important;
  }
  .card-grid button{
    min-height: 44px;                 /* was 52px */
    padding: .38rem .5rem;            /* a bit tighter */
    font-size: .95rem;
    aspect-ratio: unset;              /* keep height under control */
  }
  .card-grid .grid-break ~ button{
    min-height: 36px;                 /* was 40px */
    font-size: .90rem;
    padding: .35rem .45rem;
    background: var(--panel-2);
    border-color: var(--border);
    box-shadow: none;
  }

  .card-grid .grid-break ~ button:hover{background:var(--panel-2-hover);transform:translateY(-1px);box-shadow:0 0 6px rgba(0,0,0,.12)}
  .card-grid .grid-break ~ button.selected{transform:scale(1.02)}

  /* participants: compact columns; actions REMAIN visible */
  #liveParticipantList .participant-row{
    grid-template-columns:var(--icon-col-width) 1fr max-content;
    padding:6px 8px;border-bottom:1px solid var(--border);
  }
  #liveParticipantList .row-right{gap:8px}

  /* stats line */
  #resultRow{font-size:.82rem;color:var(--text-dim);margin:10px 0 4px}
  body.votes-revealed #resultRow{color:var(--text)}

  /* sticky CTA */
  :root{--h-button:52px}
  #revealButton,#resetButton{height:var(--h-button);font-size:1rem;border-radius:12px}

  /* chip shadow soften */
  .vote-chip{box-shadow:0 0 6px rgba(0,0,0,.18)}
}

/* keep perceived alignment when hamburger has focus ring */
.menu-button:focus-visible{outline-offset:2px}

/* Force short visible labels even if no .ra-label exists */
#liveParticipantList .row-right .row-action .ra-label{ display:none !important; }
#liveParticipantList .row-right .row-action .ra-icon{ display:none !important; }

#liveParticipantList .row-right .row-action::after{
  content:"";
  font-size:.82rem;
  line-height:1.2;
  color:var(--text-dim);
  border-bottom:1px dotted transparent;
}

#liveParticipantList .row-right .row-action.host::after{ font-size:.82rem;content:"Host"; }
#liveParticipantList .row-right .row-action.kick::after{ font-size:.82rem;content:"Kick"; color:#fca5a5; }

/* separator between the two links */
#liveParticipantList .row-right .row-action + .row-action::before{
  content:" | ";
  opacity:.45;
  margin:0 .35rem 0 .3rem;
}

/* hover/focus */
#liveParticipantList .row-right .row-action:hover::after,
#liveParticipantList .row-right .row-action:focus-visible::after{ color:var(--text-strong); }
#liveParticipantList .row-right .row-action.kick:hover::after,
#liveParticipantList .row-right .row-action.kick:focus-visible::after{ color:#f87171; }
#liveParticipantList .row-right .row-action:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* disabled */
#liveParticipantList .row-right .row-action:disabled::after{
  opacity:.55;
  border-bottom-color:transparent;
  cursor:not-allowed;
}

/* phone: a tick larger for tap comfort */
@media (max-width:420px){
  #liveParticipantList .row-right .row-action::after{ font-size:.90rem; }
}

/* === iPhone fix: keep "Host | Kick" on one line ========================= */
#liveParticipantList .participant-row .row-right{
  display: flex !important;
  flex-wrap: nowrap !important;   /* no flex wrapping */
  white-space: nowrap !important; /* no text wrapping at all */
  min-width: max-content !important; /* size to content (Safari-friendly) */
  gap: 6px !important;
}

/* actions themselves */
#liveParticipantList .participant-row .row-right .row-action{
  display: inline-flex !important;
  align-items: baseline;
}

/* NBSP separator so iOS won’t break between links */
#liveParticipantList .participant-row .row-right .row-action + .row-action::before{
  content: "\00a0|\00a0" !important;
  opacity: .45;
}

/* make a tiny bit more room on very small phones */
@media (max-width: 420px){
  :root{ --vote-chip-width: 4ch; } /* was 5ch */
  #liveParticipantList .participant-row .row-right .row-action .ra-label{ font-size: .86rem; }
}

/* === Cards: a touch flatter on phones =================================== */
@media (max-width: 420px){
  .card-grid button{
    min-height: 40px;          /* was 44/52 */
    padding: .32rem .48rem;    /* a hair tighter */
    font-size: .94rem;
  }
  .card-grid .grid-break ~ button{
    min-height: 34px;          /* was 36/40 */
    font-size: .88rem;
    padding: .30rem .42rem;
  }
}

#appMenuOverlay .menu-item.specials .palette {
  display: grid;
  grid-template-columns: repeat(7, minmax(28px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
#appMenuOverlay .menu-item.specials label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
}
#appMenuOverlay .menu-item.specials input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#appMenuOverlay .menu-item.specials label span {
  pointer-events: none;
}
#appMenuOverlay .menu-item.specials input[type="checkbox"]:checked + span {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}
#appMenuOverlay .menu-item.specials.disabled {
  opacity: .6;
  pointer-events: none;
}