/* Conference Connect — WordPress Plugin Styles
   All rules scoped under #conference-connect-root to avoid theme conflicts */

:root {
  --ff-head: 'Outfit', sans-serif;
  --ff-body: 'DM Sans', sans-serif;
}

#conference-connect-root {
  font-family: 'DM Sans', sans-serif;
  line-height: 1.5;
  color: #2D2420;
  -webkit-font-smoothing: antialiased;

  /* Accessibility tokens (2.11.0). Set here, not on :root, so they can never
     clash with a theme's own variables. Each colour was measured against
     WCAG 2.1 AA (4.5:1 for normal text); the ratios are in the comments. */
  /* Quiet text: hints, captions, placeholders, times. Was #9A8E82/#B0A89E at
     1.9-3.2:1; now at least 5.0:1 on every card colour and 5.7:1 on #F7F3EE. */
  --cc-text-muted: #6A5E52;
  /* Card footer, tag and pinner names. Was #7A6E62 at 3.95-4.48:1 on the six
     card colours; now 5.86-6.65:1. */
  --cc-text-meta: #5F5449;
  /* Email icon and "Show all" links. Was #5BA8F5 at 2.0-2.5:1; now 6.5-6.9:1
     on the light surfaces. */
  --cc-link: #245B9E;
  --cc-link-bg: rgba(36,91,158,.12);
  /* "Leave" and "Remove my email". Was #E74C5E at 3.4:1; now 5.6-5.9:1. */
  --cc-danger-text: #B8323F;
  /* Keyboard focus ring: a dark outline with a light inner ring, so it shows
     on the dark board AND on the light cards and dialogs. */
  --cc-focus-outer: #2D2420;
  --cc-focus-inner: #F7F3EE;
  /* Smallest touch target (WCAG 2.5.5 / Apple and Google guidance). */
  --cc-target-min: 44px;
  /* Dialog shadow. A token because two rules need it: the dialog itself and
     its :focus state (which must not lose the shadow). */
  --cc-modal-shadow: 0 24px 80px rgba(0,0,0,.4);
}

#conference-connect-root *,
#conference-connect-root *::before,
#conference-connect-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#conference-connect-root a { text-decoration: none; }
#conference-connect-root button { font-family: inherit; }

/* The root and the dialog box only take focus from code (tabindex -1, as a
   starting point for screen readers and a safe place when a button
   disappears); a ring around the whole board or dialog would only confuse.
   The focus ring for everything else is at the END of this file, so it wins
   over the box-shadows that individual buttons set. */
#conference-connect-root:focus { outline: none; }

/* ── Join Screen ── */
#conference-connect-root .cc-join-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  min-height: 500px;
  background: linear-gradient(145deg, #1C1814 0%, #2A2018 50%, #1E1A16 100%);
  border-radius: 16px;
}

#conference-connect-root .cc-join-card {
  display: flex;
  max-width: 720px;
  width: 100%;
  background: #F7F3EE;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  animation: cc-fadeUp .5s ease-out;
}
@keyframes cc-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

#conference-connect-root .cc-join-card-left { flex: 1.2; }
#conference-connect-root .cc-join-side {
  flex: 0.8;
  background: #EDE8E0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#conference-connect-root .cc-badge-hole {
  width: 20px; height: 20px;
  background: #D6CFC5;
  border-radius: 50%;
  margin: 16px auto 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
#conference-connect-root .cc-badge-lanyard {
  width: 2px; height: 12px;
  background: #C4B8A8;
  margin: 0 auto;
}

#conference-connect-root .cc-title {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #2D2420;
  margin: 0 0 4px;
  letter-spacing: -1px;
  line-height: 1.1;
}
#conference-connect-root .cc-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-text-muted); /* #7A6E62 was 4.49:1 on #F7F3EE */
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
#conference-connect-root .cc-desc {
  font-size: 15px;
  color: var(--cc-text-muted);
  line-height: 1.55;
  margin: 0 0 24px;
}
/* "Someone shared a card with you" (2.11.0): explains why a join form shows
   up instead of the card from the link. Blue info box, so it reads as help,
   not as an error. Its top margin collapses into .cc-desc's 24 px gap; the
   small bottom margin keeps it next to the name field it is about. */
#conference-connect-root .cc-join-deeplink-note {
  margin: 12px 0 4px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #1A4A7A;
  background: #D6EDFF;
  border-left: 3px solid #5BA8F5;
  border-radius: 6px;
}

#conference-connect-root .cc-join-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#conference-connect-root .cc-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 12px 16px;
  border: 2px solid #DDD6CC;
  border-radius: 12px;
  background: white;
  color: #2D2420;
  transition: border-color .2s;
  width: 100%;
}
#conference-connect-root .cc-input:focus { border-color: #FF8A7A; }
#conference-connect-root .cc-input::placeholder { color: var(--cc-text-muted); }

#conference-connect-root .cc-btn-primary {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 24px;
  background: #2D2420;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
#conference-connect-root .cc-btn-primary:hover { background: #1A1210; transform: translateY(-1px); }
#conference-connect-root .cc-btn-primary:disabled { opacity: .4; cursor: default; transform: none; }

/* GDPR notice below the join button — small, muted, unobtrusive but readable.
   The "this browser remembers you" note (2.11.0) is the same kind of fine print,
   so it shares the look, just a little closer to the notice above it. */
#conference-connect-root .cc-gdpr-notice,
#conference-connect-root .cc-join-remember-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--cc-text-muted);
  margin: 12px 0 0;
  text-align: center;
}
#conference-connect-root .cc-join-remember-note { margin-top: 8px; }

/* "Read without registering" (2.12.7): a text link look, so joining stays the
   main action. Every box property is set because WordPress themes style all
   buttons (display:block, padding, background), as the projector ☰ showed. */
#conference-connect-root .cc-join-read-btn {
  display: block;
  width: 100%;
  min-height: var(--cc-target-min);
  margin: 4px 0 0;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cc-link);
  cursor: pointer;
}
#conference-connect-root .cc-join-read-btn:hover { background: var(--cc-link-bg); }

/* Hint directly under a join field ("Shown as a mail icon to everyone...", 2.11.0).
   The fields column has gap:10px; the negative top margin tucks the hint
   under its own input so it reads as belonging to that field. */
#conference-connect-root .cc-field-hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--cc-text-muted);
  margin: -4px 0 0;
  text-align: left;
}

/* Read-only mode banner — shown when registration is closed for non-joined visitors */
#conference-connect-root .cc-readonly-banner {
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #6D4C00;
  text-align: center;
}
#conference-connect-root .cc-readonly-icon {
  margin-right: 4px;
}
/* The reader's way back to the join screen, inside the banner (2.12.7).
   Box properties set in full for the same theme reason as .cc-join-read-btn. */
#conference-connect-root .cc-readonly-join-btn {
  display: inline-block;
  min-height: 32px;
  margin: 4px 0 0 8px;
  padding: 5px 14px;
  background: #2D2420;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  color: white;
  vertical-align: middle;
  cursor: pointer;
}
#conference-connect-root .cc-readonly-join-btn:hover { background: #1A1210; }
/* Pin count badge on cards in read-only mode (no interactive button, just a label) */
#conference-connect-root .cc-pin-badge-readonly {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 12px;
  color: var(--cc-text-meta);
}

/* Elements toggled with the HTML "hidden" attribute must stay hidden even
   when a class below gives them display:flex. */
#conference-connect-root [hidden] { display: none !important; }

/* Read by screen readers, invisible on screen (e.g. the labels of the join
   fields, whose placeholders already show the same words). */
#conference-connect-root .cc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Small helper classes that replace inline colours, so the colours live in
   the tokens above instead of in cc-app.js. */
#conference-connect-root .cc-text-muted { color: var(--cc-text-muted); }
/* "Registration is closed" explanation on the join card. */
#conference-connect-root .cc-join-closed .cc-text-muted { font-size: 14px; }
#conference-connect-root .cc-caption {
  font-size: 11px;
  color: var(--cc-text-muted);
  margin-top: 8px;
  text-align: center;
}
#conference-connect-root .cc-caption-block {
  display: block;
  font-size: 12px;
  margin: 0 0 6px;
}
#conference-connect-root .cc-picker-label {
  font-size: 13px;
  color: var(--cc-text-muted);
  margin-right: 8px;
}
#conference-connect-root .cc-detail-meta {
  margin-top: 12px;
  font-size: 13px;
  color: var(--cc-text-meta);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* "Posting paused" banner — the organiser's emergency brake is on */
#conference-connect-root .cc-paused-banner {
  background: #FFF0EE;
  border: 1px solid #F0C4BC;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #9A2E1F;
  text-align: center;
}

/* "This event ended on …" banner. Calm and neutral (blue-grey, not red):
   the end of an event is expected, not an error. */
#conference-connect-root .cc-ended-banner {
  background: #EEF1F6;
  border: 1px solid #C7D0DD;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2F3E55;
  text-align: center;
}

/* "Connection lost" banner — slim, non-blocking, shown after 2 failed polls */
#conference-connect-root .cc-connection-banner {
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #6D4C00;
  text-align: center;
}

/* Disabled "Post a card" button while posting is paused */
#conference-connect-root .cc-btn-create:disabled {
  background: #C9BFB4;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Failed post: friendly message + Retry button (create card and reply) */
#conference-connect-root .cc-post-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #9A2E1F;
  background: #FFF0EE;
  border: 1px solid #F0C4BC;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
}
#conference-connect-root .cc-thread-compose-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
#conference-connect-root .cc-post-error-text { flex: 1 1 180px; }
#conference-connect-root .cc-retry-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  background: white;
  border: 1.5px solid #F0C4BC;
  border-radius: 8px;
  color: #9A2E1F;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 40px;
}
#conference-connect-root .cc-retry-btn:hover { background: #FFE0DB; }
#conference-connect-root .cc-retry-btn:disabled { opacity: .5; cursor: default; }

/* "Draft restored. Discard draft" line under a composer */
#conference-connect-root .cc-draft-note {
  font-size: 12px;
  color: var(--cc-text-muted);
  margin: 8px 0 0;
}
/* A button that looks like a text link (used for "Discard draft") */
#conference-connect-root .cc-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  font-size: 12px;
  color: #9A2E1F;
  text-decoration: underline;
  cursor: pointer;
}

/* Note above the reply box while posting is paused */
#conference-connect-root .cc-thread-paused-note {
  font-size: 13px;
  color: #9A2E1F;
  margin: 0 0 10px;
}

/* Short-lived message at the bottom of the screen (e.g. "You're shown as …") */
#conference-connect-root .cc-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: min(90vw, 420px);
  background: #2D2420;
  color: white;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  z-index: 1000000; /* above .cc-modal-overlay (999999): report (B4), copy-link (B12) and closed-board toasts fire while a modal is open */
  /* fade only: cc-fadeUp would override the centring transform */
  animation: cc-fadeIn .3s ease-out;
}

/* QR code (generated in the browser by the bundled library) */
#conference-connect-root .cc-qr-image {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 12px;
  /* Keep the squares sharp when the small image is scaled up */
  image-rendering: pixelated;
}
/* Shown instead of the QR code if it can't be generated */
#conference-connect-root .cc-qr-fallback {
  width: 160px;
  font-size: 12px;
  color: var(--cc-text-muted);
  text-align: center;
}
#conference-connect-root .cc-qr-fallback-link {
  margin-top: 6px;
  color: #2D2420;
  word-break: break-all;
  user-select: all;
}

#conference-connect-root .cc-btn-copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 8px 16px;
  min-height: var(--cc-target-min);
  background: white;
  border: 1.5px solid #DDD6CC;
  border-radius: 8px;
  cursor: pointer;
  color: #2D2420;
  transition: all .15s;
}
#conference-connect-root .cc-btn-copy:hover { background: #F0EBE4; }

#conference-connect-root .cc-join-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
#conference-connect-root .cc-feature {
  font-size: 13px;
  color: var(--cc-text-muted);
  padding: 8px 12px;
  background: rgba(255,255,255,.5);
  border-radius: 8px;
  text-align: center;
}

#conference-connect-root .cc-qr-wrap {
  background: white;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
#conference-connect-root .cc-share-link { text-align: center; }

/* ── Header ── */
#conference-connect-root .cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #1C1814;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#conference-connect-root .cc-header-left { display: flex; align-items: center; gap: 16px; }
#conference-connect-root .cc-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: white;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
#conference-connect-root .cc-header-user {
  font-size: 13px;
  color: #B0A89E;
  background: rgba(255,255,255,.06);
  padding: 4px 12px;
  border-radius: 20px;
}
#conference-connect-root .cc-header-right { display: flex; align-items: center; gap: 8px; }

#conference-connect-root .cc-btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #D6CFC5;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
#conference-connect-root .cc-btn-ghost:hover { background: rgba(255,255,255,.12); }

#conference-connect-root .cc-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: #E74C5E;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ── Toolbar ── */
#conference-connect-root .cc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #1E1A16;
  flex-wrap: wrap;
  gap: 12px;
}
#conference-connect-root .cc-filters { display: flex; gap: 6px; flex-wrap: wrap; }

#conference-connect-root .cc-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #8A7E72;
}
#conference-connect-root .cc-sort-label {
  color: #9A8E82; /* 5.4:1 on the dark toolbar (#1E1A16); the bar's #8A7E72 was too faint for 12px caps */
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
#conference-connect-root .cc-sort-btn {
  padding: 6px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #B0A89E;
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
#conference-connect-root .cc-sort-btn:hover { background: rgba(255,255,255,.1); }
#conference-connect-root .cc-sort-btn.active {
  background: rgba(255,138,122,.15);
  border-color: rgba(255,138,122,.3);
  color: #FFB4A8;
}
#conference-connect-root .cc-filter-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 7px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #B0A89E;
  cursor: pointer;
  transition: all .15s;
}
#conference-connect-root .cc-filter-btn.active {
  background: rgba(255,138,122,.15);
  border-color: rgba(255,138,122,.3);
  color: #FFB4A8;
}
#conference-connect-root .cc-filter-btn:hover { background: rgba(255,255,255,.1); }

#conference-connect-root .cc-btn-create {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  background: #FF8A7A;
  color: #2D2420; /* dark on coral 6.6:1; white was 2.3:1 */
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(255,138,122,.3);
}
#conference-connect-root .cc-btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,138,122,.4);
}

/* ── Timeline bar (timed events) ── */
#conference-connect-root .cc-timeline-bar {
  background: #1A1612;
  border-top: 1px solid rgba(255,255,255,.04);
  padding: 10px 0;
  position: relative;
  /* Prevent the bar from expanding beyond its parent on narrow screens */
  overflow: hidden;
  max-width: 100%;
}
/* Subtle "now" indicator line — a thin vertical accent on the left edge */
#conference-connect-root .cc-timeline-bar::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #FF8A7A;
  border-radius: 2px;
  opacity: .6;
}
#conference-connect-root .cc-timeline-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 24px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Prevent flex children (flex-shrink:0 chips) from expanding the container
     beyond its parent. width:0 + min-width:100% forces the flex container
     to take its parent's width, then overflow-x:auto handles the rest. */
  width: 0;
  min-width: 100%;
  /* Thin scrollbar so users know they can scroll */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
#conference-connect-root .cc-timeline-scroll::-webkit-scrollbar {
  height: 4px;
}
#conference-connect-root .cc-timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 2px;
}
#conference-connect-root .cc-timeline-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Each timeline chip: a clickable event card */
#conference-connect-root .cc-timeline-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: all .2s;
  min-width: 140px;
  max-width: 220px;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
}
#conference-connect-root .cc-timeline-chip:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* Status label at top of chip */
#conference-connect-root .cc-timeline-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* Event title */
#conference-connect-root .cc-timeline-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Time range — inherits text color from the chip's state class below */
#conference-connect-root .cc-timeline-time {
  font-size: 11px;
  opacity: .7;
}

/* ── Past events: dimmed ── */
#conference-connect-root .cc-timeline-past {
  opacity: .5;
  border-color: rgba(255,255,255,.05);
}
#conference-connect-root .cc-timeline-past .cc-timeline-status {
  color: #8A7E72;
}
#conference-connect-root .cc-timeline-past .cc-timeline-text {
  color: #B0A89E;
}
#conference-connect-root .cc-timeline-past .cc-timeline-time {
  color: #B0A89E;
}
#conference-connect-root .cc-timeline-past:hover {
  opacity: .75;
}

/* ── Current events: highlighted with accent glow ── */
#conference-connect-root .cc-timeline-current {
  background: rgba(255,138,122,.12);
  border-color: rgba(255,138,122,.35);
  box-shadow: 0 0 12px rgba(255,138,122,.15);
}
#conference-connect-root .cc-timeline-current .cc-timeline-status {
  color: #FF8A7A;
}
#conference-connect-root .cc-timeline-current .cc-timeline-text {
  color: #FFD4CC;
}
#conference-connect-root .cc-timeline-current .cc-timeline-time {
  color: #FFD4CC;
}
#conference-connect-root .cc-timeline-current:hover {
  background: rgba(255,138,122,.18);
  box-shadow: 0 0 16px rgba(255,138,122,.25);
}

/* ── Future events: neutral-light ── */
#conference-connect-root .cc-timeline-future {
  border-color: rgba(255,255,255,.1);
}
#conference-connect-root .cc-timeline-future .cc-timeline-status {
  color: #5BA8F5;
}
#conference-connect-root .cc-timeline-future .cc-timeline-text {
  color: #D6CFC5;
}
#conference-connect-root .cc-timeline-future .cc-timeline-time {
  color: #D6CFC5;
}

/* ── Active filter indicator on timeline chips ── */
#conference-connect-root .cc-timeline-active {
  outline: 2px solid #FFB4A8;
  outline-offset: -2px;
  background: rgba(255,138,122,.18) !important;
  opacity: 1 !important;
}
#conference-connect-root .cc-timeline-active::after {
  content: "\2713";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #FF8A7A;
}
/* Timeline chips need relative positioning for the checkmark */
#conference-connect-root .cc-timeline-chip {
  position: relative;
}

/* ── Inert events (2.13.0): breaks, lunch ──
   On the schedule but not part of the conference: nothing to click, so no
   pointer, no hover lift, and a dashed outline instead of a filled card.
   The past/current/future colours above still say when it happens. */
#conference-connect-root .cc-timeline-inert,
#conference-connect-root .cc-timeline-inert:hover {
  cursor: default;
  transform: none;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
#conference-connect-root .cc-timeline-inert .cc-timeline-text {
  font-weight: 500;
  font-style: italic;
}

/* ── Board wrapper (board + sidebar) ── */
#conference-connect-root .cc-board-wrapper {
  display: flex;
  background: linear-gradient(180deg, #1E1A16 0%, #2A2018 100%);
  border-radius: 0 0 16px 16px;
  min-height: 300px;
}

#conference-connect-root .cc-board-wrapper > #cc-board-area {
  flex: 1;
  min-width: 0;
}

/* ── Board ── */
#conference-connect-root .cc-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 20px 24px 40px;
  min-height: 300px;
}

/* Under the board while not every card is drawn yet (lazy drawing): the
   "Show more" button. Scrolling down draws more on its own. */
#conference-connect-root .cc-draw-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 24px 48px;
}
/* The hidden attribute must win over display:flex above. */
#conference-connect-root .cc-draw-more[hidden] { display: none; }
#conference-connect-root .cc-draw-more-btn {
  min-height: var(--cc-target-min);
  padding: 8px 20px;
}

#conference-connect-root .cc-note-card {
  position: relative;
  padding: 20px;
  border-radius: 4px;
  border-left: 4px solid;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 2px 3px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  animation: cc-noteIn .35s ease-out both;
}
#conference-connect-root .cc-note-card:hover {
  transform: scale(1.02);
  box-shadow: 4px 6px 20px rgba(0,0,0,.18);
  z-index: 2;
}
@keyframes cc-noteIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; }
}

#conference-connect-root .cc-note-prompt {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
#conference-connect-root .cc-note-content {
  font-size: 15px;
  line-height: 1.5;
  color: #2D2420;
  margin-bottom: 14px;
  word-break: break-word;
}
/* The card's heading and text are one real <button> (keyboard and screen
   readers can open the card). It must look like plain card text, so every
   button look is switched off. Its ::after is stretched over the whole card
   (the card is position:relative), so tapping anywhere still opens it; the
   pin and ✉ sit above it via .cc-card-control. If a theme's button reset
   ever wins here, prepend "all: unset; display: block;". */
#conference-connect-root .cc-note-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* Looks that many WordPress themes give every button (Twenty Twenty does
     uppercase, letter-spacing and an underline on hover). "font" does not
     reset these, and the card text spans would inherit them. */
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  white-space: normal;
}
/* The keyboard ring at the end of this file still wins (same strength, later). */
#conference-connect-root .cc-note-open:hover,
#conference-connect-root .cc-note-open:focus { text-decoration: none; }
#conference-connect-root .cc-note-open::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Room for the pin button, which sits on top of the card's top-right corner.
   An invisible float in that corner makes the heading and the first text
   line wrap before they reach the pin, whatever their length. Widths are the
   measured pin button (49px, and up to 114px with "Pinned" in German plus a
   two-digit count) minus the card's 20px padding, plus a small gap. */
#conference-connect-root .cc-note-pinnable .cc-note-open::before {
  content: "";
  float: right;
  width: var(--cc-pin-corner-width, 40px);
  height: 32px; /* the pin ends 30px below the top of the card text */
}
#conference-connect-root .cc-note-pinned { --cc-pin-corner-width: 104px; }
/* They are spans inside the button (a button may only hold inline content). */
#conference-connect-root .cc-note-prompt,
#conference-connect-root .cc-note-content { display: block; }
/* Controls on the card face that must stay clickable on their own. */
#conference-connect-root .cc-card-control { position: relative; z-index: 2; }
#conference-connect-root .cc-note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--cc-text-meta);
}
#conference-connect-root .cc-note-author { font-weight: 600; }
#conference-connect-root .cc-note-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
#conference-connect-root .cc-author-with-mail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  min-width: 0;
}
#conference-connect-root .cc-email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  text-decoration: none;
  border-radius: 6px;
  color: var(--cc-link);
  background: var(--cc-link-bg);
  flex-shrink: 0;
  transition: background .15s, transform .15s;
  position: relative;
}
/* The glyph stays a neat 22px, but the tap area is 44x44: an invisible
   ::after reaches 11px past every edge. */
#conference-connect-root .cc-email-icon::after {
  content: "";
  position: absolute;
  inset: -11px;
}
#conference-connect-root .cc-email-icon:hover {
  background: rgba(36,91,158,.22);
  transform: scale(1.08);
}

#conference-connect-root .cc-pin-btn {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2; /* above the card's stretched open button (.cc-note-open::after) */
  min-width: var(--cc-target-min);
  min-height: var(--cc-target-min);
  background: rgba(255,255,255,.35);
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
#conference-connect-root .cc-pin-btn:hover { transform: scale(1.06); }
#conference-connect-root .cc-pin-btn.pinned {
  background: rgba(255,193,7,.35);
  animation: cc-pinPop .3s ease-out;
}
#conference-connect-root .cc-pin-count { font-size: 11px; font-family: 'DM Sans', sans-serif; font-weight: 700; color: #5D4E44; }
/* The word "Pinned" on a pinned card's button: the state is never told by the yellow tint alone. */
#conference-connect-root .cc-pin-state { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; color: #5D4E44; }
#conference-connect-root .cc-pin-icon { line-height: 1; }
@keyframes cc-pinPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

#conference-connect-root .cc-pins-header-btn { position: relative; }

/* ── Tag chip on note cards ── */
#conference-connect-root .cc-note-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.07);
  color: var(--cc-text-meta);
  margin-bottom: 8px;
}

/* ── Toolbar right section ── */
#conference-connect-root .cc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Pause / Resume button ── */
#conference-connect-root .cc-pause-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cc-target-min); height: var(--cc-target-min);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #B0A89E;
  cursor: pointer;
  transition: all .15s;
}
#conference-connect-root .cc-pause-btn:hover { background: rgba(255,255,255,.12); color: #D6CFC5; }
#conference-connect-root .cc-pause-btn.paused { background: rgba(255,138,122,.15); border-color: rgba(255,138,122,.3); color: #FFB4A8; }

#conference-connect-root .cc-pause-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: #E74C5E;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-family: 'DM Sans', sans-serif;
}

/* ── Sidebar ── */
#conference-connect-root .cc-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 20px 16px 40px 0;
  border-left: 1px solid rgba(255,255,255,.06);
  overflow-y: auto;
  max-height: 600px;
}

#conference-connect-root .cc-sidebar-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #D6CFC5;
  margin: 0 0 12px 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#conference-connect-root .cc-sidebar-clear {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #FFB4A8;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 0 12px 16px;
  padding: 0;
  text-decoration: underline;
}
#conference-connect-root .cc-sidebar-clear:hover { color: #FF8A7A; }

#conference-connect-root .cc-sidebar-section {
  margin-bottom: 16px;
}

#conference-connect-root .cc-sidebar-section-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #9A8E82;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 6px 16px;
}

#conference-connect-root .cc-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 12px 6px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #B0A89E;
  transition: all .15s;
  text-align: left;
  border-radius: 0 8px 8px 0;
}
#conference-connect-root .cc-sidebar-item:hover { background: rgba(255,255,255,.06); color: #D6CFC5; }
#conference-connect-root .cc-sidebar-item.active {
  background: rgba(255,138,122,.15);
  color: #FFB4A8;
}

#conference-connect-root .cc-sidebar-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

#conference-connect-root .cc-sidebar-count {
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 1px 6px;
}
#conference-connect-root .cc-sidebar-x {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: .7;
  margin-left: auto;
  padding: 0 2px;
}
#conference-connect-root .cc-sidebar-item.active .cc-sidebar-x:hover {
  opacity: 1;
}

/* ── Create modal — tag input ── */
#conference-connect-root .cc-create-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#conference-connect-root .cc-tag-autocomplete-wrap {
  position: relative;
  max-width: 200px;
  flex-shrink: 0;
}
/* Holds the "Add a tag" link and, once it is tapped, the tag field */
#conference-connect-root .cc-tag-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* "Add a tag": a text link, but with a 44 px tall tap area for fingers.
   Once the tag field opens, the [hidden] rule near the top of this file hides
   the link (its !important beats the display:inline-flex below). */
#conference-connect-root .cc-add-tag-link {
  margin: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 13px;
  color: var(--cc-text-muted);
  text-decoration: underline;
}
#conference-connect-root .cc-add-tag-link:hover {
  color: #2D2420;
}
#conference-connect-root .cc-tag-input {
  width: 100%;
  max-width: 200px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}
#conference-connect-root .cc-tag-suggestions {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 0 4px 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #E0D6CC;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  max-height: 180px;
  overflow-y: auto;
  z-index: 100;
}
#conference-connect-root .cc-tag-suggestions.open {
  display: block;
}
#conference-connect-root .cc-tag-suggestion-item {
  padding: 6px 12px;
  font-size: 13px;
  color: #4A3E34;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#conference-connect-root .cc-tag-suggestion-item:hover,
#conference-connect-root .cc-tag-suggestion-item.active {
  background: #F5F0EB;
}
#conference-connect-root .cc-tag-suggestion-item strong {
  font-weight: 700;
  color: #2A2420;
}

/* ── Empty ── */
#conference-connect-root .cc-empty {
  text-align: center;
  padding: 80px 24px;
  animation: cc-fadeUp .5s ease-out;
}
/* Classes rather than inline styles, so display mode can enlarge the title
   and the subtitle separately (an inline size would win over any rule here). */
#conference-connect-root .cc-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #D6CFC5;
  margin-bottom: 4px;
}
#conference-connect-root .cc-empty-sub { color: #9A8E82; }

/* ── Modals ── */
#conference-connect-root .cc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 24px;
  animation: cc-fadeIn .2s;
}
@keyframes cc-fadeIn { from { opacity: 0; } }

#conference-connect-root .cc-modal {
  background: #F7F3EE;
  border-radius: 20px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: cc-modalIn .3s ease-out;
  box-shadow: var(--cc-modal-shadow);
}
@keyframes cc-modalIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Close button sits inside .cc-modal but uses position:sticky so it
   stays pinned at the top of the scrollable area as the user scrolls.
   float:right keeps it in the top-right corner without affecting layout. */
#conference-connect-root .cc-modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 18px;
  cursor: pointer;
  color: #5D4E44;
  width: var(--cc-target-min); height: var(--cc-target-min);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  /* Negative margin pulls it into the modal padding so it sits neatly
     in the corner instead of eating into the content area. */
  margin: -12px -12px 0 0;
}
#conference-connect-root .cc-modal-close:hover {
  background: rgba(255,255,255,1);
  color: #2D2420;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ── Create Modal ── */

/* Timed event prompts bar: horizontal scroll strip above regular prompts */
#conference-connect-root .cc-create-timed-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 8px;
  margin-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Prevent expanding the modal — same trick as the main timeline bar */
  width: 0;
  min-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}
#conference-connect-root .cc-create-timed-bar::-webkit-scrollbar { height: 3px; }
#conference-connect-root .cc-create-timed-bar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }
#conference-connect-root .cc-create-timed-bar .cc-prompt-chip {
  flex-shrink: 0;
}

/* Time prefix in timed event chips and sidebar labels */
#conference-connect-root .cc-chip-time,
#conference-connect-root .cc-sidebar-time {
  font-weight: 700;
  opacity: .7;
  font-size: 0.9em;
}

#conference-connect-root .cc-prompt-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
#conference-connect-root .cc-prompt-chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  padding: 6px 12px;
  border: 1.5px solid #DDD6CC;
  border-radius: 20px;
  background: white;
  color: #7A6E62;
  cursor: pointer;
  transition: all .15s;
}
#conference-connect-root .cc-prompt-chip.active {
  background: #2D2420;
  color: white;
  border-color: #2D2420;
}
#conference-connect-root .cc-prompt-chip:hover { border-color: #2D2420; }

#conference-connect-root .cc-preview-card {
  border-left: 4px solid;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
}

#conference-connect-root .cc-note-textarea,
#conference-connect-root .cc-msg-textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  border: none;
  background: transparent;
  resize: none;
  color: #2D2420;
  line-height: 1.5;
}
#conference-connect-root .cc-note-textarea::placeholder,
#conference-connect-root .cc-msg-textarea::placeholder { color: var(--cc-text-muted); }

#conference-connect-root .cc-msg-textarea {
  background: white;
  border: 2px solid #DDD6CC;
  border-radius: 12px;
  padding: 12px 16px;
}
#conference-connect-root .cc-msg-textarea:focus { border-color: #FF8A7A; }

#conference-connect-root .cc-color-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}
#conference-connect-root .cc-color-dot {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid;
  cursor: pointer;
  transition: all .15s;
}
/* A tick on the chosen colour, so the choice does not rely on size alone. */
#conference-connect-root .cc-color-dot[aria-pressed="true"]::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #2D2420;
}
#conference-connect-root .cc-color-dot.active { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#conference-connect-root .cc-color-dot:hover { transform: scale(1.1); }

/* ── Detail Modal ── */
#conference-connect-root .cc-detail-card {
  border-left: 4px solid;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

/* ── Thread (card modal) ── */
#conference-connect-root .cc-thread-section {
  margin-top: 8px;
  text-align: left;
}
#conference-connect-root .cc-thread-heading {
  margin: 0 0 10px;
  font-family: var(--ff-head);
  font-size: 17px;
  color: #2D2420;
}
/* Thread list no longer scrolls independently — the entire modal scrolls
   as one unit so replies are always fully visible on small screens. */
#conference-connect-root .cc-thread-list {
  margin-bottom: 16px;
  padding-right: 4px;
}
#conference-connect-root .cc-thread-loading,
#conference-connect-root .cc-thread-empty,
#conference-connect-root .cc-thread-error {
  font-size: 14px;
  color: var(--cc-text-muted);
  margin: 8px 0;
}
#conference-connect-root .cc-thread-error { color: #9A2E1F; }
#conference-connect-root .cc-thread-item {
  padding: 12px 14px;
  background: #FAF8F5;
  border-radius: 10px;
  border: 1px solid #EDE8E0;
  margin-bottom: 10px;
  position: relative;
}
#conference-connect-root .cc-thread-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 13px;
}
#conference-connect-root .cc-thread-item-time {
  font-size: 11px;
  color: var(--cc-text-muted);
  flex-shrink: 0;
}
#conference-connect-root .cc-thread-item-body {
  font-size: 14px;
  line-height: 1.5;
  color: #2D2420;
  word-break: break-word;
}
#conference-connect-root .cc-thread-compose {
  padding-top: 8px;
  border-top: 1px solid #EDE8E0;
}
#conference-connect-root .cc-thread-compose-title {
  margin: 0 0 4px;
  font-family: var(--ff-head);
  font-size: 15px;
  color: #2D2420;
}
#conference-connect-root .cc-thread-compose-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--cc-text-muted);
}
#conference-connect-root .cc-thread-compose-error {
  font-size: 13px;
  color: #9A2E1F;
  background: #fff0ee;
  border: 1px solid #f0c4bc;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
}

/* ── Header icon buttons ── */
#conference-connect-root .cc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  min-width: var(--cc-target-min);
  min-height: var(--cc-target-min);
  font-size: 16px;
  line-height: 1;
}

/* ── Settings Modal ── */
#conference-connect-root .cc-settings-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-text-muted);
  margin-bottom: 6px;
}
#conference-connect-root .cc-settings-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
}
#conference-connect-root .cc-settings-hint {
  font-size: 12px;
  color: var(--cc-text-muted);
  margin: -12px 0 16px;
}
/* "Remove my email" in Settings (2.11.0): a smaller danger button tucked under
   the email hint, still 44 px tall for fingers. The [hidden] rule near the top
   of this file hides it when there is no email to remove. Both classes in the
   selector because the general .cc-btn-danger rule comes later in this file
   and would otherwise win with its larger padding and font. */
#conference-connect-root .cc-btn-danger.cc-settings-remove-email {
  display: inline-block;
  margin: -8px 0 16px;
  padding: 8px 14px;
  min-height: 44px;
  font-size: 13px;
}
#conference-connect-root .cc-settings-status {
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
}
#conference-connect-root .cc-settings-status-ok {
  color: #1A6B3C;
  background: #D4F5E2;
  border: 1px solid #5CD48F;
}
#conference-connect-root .cc-settings-status-err {
  color: #9A2E1F;
  background: #fff0ee;
  border: 1px solid #f0c4bc;
}
#conference-connect-root .cc-settings-divider {
  border: none;
  border-top: 1px solid #DDD6CC;
  margin: 24px 0 16px;
}
#conference-connect-root .cc-settings-leave-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #9A2E1F;
  margin: 0 0 8px;
}
#conference-connect-root .cc-settings-leave-warning {
  font-size: 13px;
  color: var(--cc-text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
/* Recovery link section in Settings (2.11.0): a neutral heading like Leave's,
   an amber warning box (the link works like a password), then the link in a
   read-only field next to its Copy button. */
#conference-connect-root .cc-settings-section-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2D2420;
  margin: 0 0 6px;
}
#conference-connect-root .cc-settings-section-text {
  font-size: 13px;
  color: var(--cc-text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
#conference-connect-root .cc-recovery-warning {
  font-size: 13px;
  line-height: 1.5;
  color: #7A5D00;      /* dark amber on pale amber: 5.6:1 */
  background: #FFF3CD;
  border: 1px solid #FFCA28;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 12px;
}
#conference-connect-root .cc-recovery-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
/* min-width:0 lets the long link shrink inside the flex row instead of
   pushing the Copy button out of the modal. */
#conference-connect-root .cc-recovery-link-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  color: var(--cc-text-muted);
  text-overflow: ellipsis;
}
#conference-connect-root .cc-recovery-row .cc-btn-copy { white-space: nowrap; }
/* "Switch to another person?" dialog, shown when a recovery link is opened
   in a browser that remembers someone else. Keep (the safe choice) is the
   dark primary button on top; Switch is the lighter one below it. */
#conference-connect-root .cc-recovery-switch-title {
  margin: 0 0 12px;
  font-family: var(--ff-head);
  font-size: 22px;
  color: #2D2420;
}
#conference-connect-root .cc-recovery-switch-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
#conference-connect-root .cc-btn-danger {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid var(--cc-danger-text);
  border-radius: 10px;
  color: var(--cc-danger-text);
  cursor: pointer;
  transition: all .15s;
}
#conference-connect-root .cc-btn-danger:hover {
  background: var(--cc-danger-text); /* white on it: 5.9:1 */
  color: white;
}

/* ── Pinner names on card tooltip ── */
/* The tooltip is native (title attr) so no CSS needed there. */

/* ── Pinner row inside detail modal ── */
#conference-connect-root .cc-pinners-row {
  margin-top: 10px;
  font-size: 12px;
  color: var(--cc-text-meta);
  line-height: 1.6;
}
#conference-connect-root .cc-pinners-label {
  font-weight: 600;
  margin-right: 4px;
}
#conference-connect-root .cc-pinners-names {
  display: inline;
}
#conference-connect-root .cc-pinners-more {
  background: none;
  border: none;
  color: var(--cc-link);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  text-decoration: underline;
  font-family: 'DM Sans', sans-serif;
}
#conference-connect-root .cc-pinners-more:hover {
  color: #1A4A7A;
}

/* ── Pinners modal (all pinners + email everyone) ── */
#conference-connect-root .cc-pinners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
#conference-connect-root .cc-pinners-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* At least as tall as the ✉ tap area (44px, see .cc-email-icon::after),
     so the tap areas of two neighbouring rows cannot overlap and a tap just
     below one person's envelope cannot mail the next person. */
  min-height: var(--cc-target-min);
  padding: 8px 4px;
  border-bottom: 1px solid #EDE8E1;
  font-size: 14px;
  color: #2D2420;
}
#conference-connect-root .cc-pinners-list-item:last-child {
  border-bottom: none;
}
#conference-connect-root .cc-pinners-email-all {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: #2D2420;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .15s;
}
#conference-connect-root .cc-pinners-email-all:hover {
  background: #4A3F38;
}
#conference-connect-root .cc-pinners-email-all.disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
#conference-connect-root .cc-pinners-back-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--cc-text-muted);
  border: 1.5px solid #DDD6CC;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
#conference-connect-root .cc-pinners-back-btn:hover {
  border-color: #7A6E62;
  color: #2D2420;
}

/* ── Edit feature: pencil button, inline editor, edited label ── */

/* Small pencil button shown on the user's own cards and thread replies.
   Used with cc-edit-card-corner / cc-edit-corner for absolute positioning
   inside the card or thread-item parent (which must be position:relative). */
#conference-connect-root .cc-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--cc-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cc-target-min);
  min-height: var(--cc-target-min);
  padding: 0;
  border-radius: 4px;
  transition: color .15s, background .15s;
  line-height: 1;
}
#conference-connect-root .cc-edit-btn:hover {
  color: #2D2420;
  background: rgba(0,0,0,.06);
}
/* Position the pencil in the bottom-right corner of its parent */
#conference-connect-root .cc-edit-card-corner,
#conference-connect-root .cc-edit-corner {
  position: absolute;
  bottom: 2px; /* closer to the corner now that the button is 44px */
  right: 2px;
}

/* 🔗 "Copy link to this card" in the card dialog's meta row (2.11.0).
   Quiet like the pencil; the 44 px box is the touch target. It sits inside
   .cc-detail-actions, whose negative vertical margins stop it from making
   the meta row taller. */
#conference-connect-root .cc-copy-link-btn {
  min-width: var(--cc-target-min);
  min-height: var(--cc-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--cc-text-meta);
  cursor: pointer;
  transition: color .15s, background .15s;
}
#conference-connect-root .cc-copy-link-btn:hover,
#conference-connect-root .cc-copy-link-btn:focus-visible {
  color: #2D2420;
  background: rgba(0,0,0,.06);
}

/* Subtle "(edited)" / "(edited by organiser)" label */
#conference-connect-root .cc-edited-label {
  font-size: 11px;
  color: var(--cc-text-muted);
  font-style: italic;
  margin-left: 6px;
  cursor: help;          /* hint that the title tooltip has more info */
}

/* "Your email is visible" / "No email shared" on the attendee's own cards
   (2.11.0). Quiet like the edited label; nowrap keeps the phrase whole, so on
   narrow cards it wraps onto its own line inside the flex author row. */
#conference-connect-root .cc-own-email-note {
  font-size: 11px;
  color: var(--cc-text-muted);
  font-style: italic;
  white-space: nowrap;
}

/* ── Report link and "Hidden by organiser" label (2.11.0) ── */
/* Report is deliberately quiet (small, grey, underlined text) so it is easy
   to find when needed but does not invite casual tapping. The 44 px minimum
   keeps it a comfortable touch target on phones. */
#conference-connect-root .cc-report-btn {
  background: none;
  border: none;
  font-size: 12px;
  text-decoration: underline;
  color: var(--cc-text-muted);
  cursor: pointer;
  min-height: var(--cc-target-min);
  min-width: var(--cc-target-min);
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
}
#conference-connect-root .cc-report-btn:hover { color: #9A2E1F; }
#conference-connect-root .cc-report-btn:disabled { opacity: .5; cursor: default; }
#conference-connect-root .cc-report-done {
  font-size: 12px;
  font-style: italic;
  color: var(--cc-text-muted);
}
/* Right-hand end of the detail modal's meta row. The negative vertical
   margins let the 44 px targets inside it overlap the padding instead of
   making the 13 px meta row taller. */
#conference-connect-root .cc-detail-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#conference-connect-root .cc-detail-actions > * {
  margin-top: -12px;
  margin-bottom: -12px;
}
#conference-connect-root .cc-thread-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
/* Shown only to the author of a hidden card or reply (nobody else gets it). */
#conference-connect-root .cc-hidden-label {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #9A2E1F;
  background: rgba(154, 46, 31, .08);
  border-radius: 6px;
  padding: 4px 8px;
}
/* filter (not opacity) for the fade: the cards' entrance animation ends on
   opacity 1 with fill-mode "both", which would override a plain opacity. */
#conference-connect-root .cc-note-hidden,
#conference-connect-root .cc-thread-item-hidden {
  filter: opacity(.75);
  border-style: dashed;
}

/* ── Inline edit modal (overlay inside the detail modal) ── */
#conference-connect-root .cc-edit-modal {
  margin-top: 12px;
  padding: 14px;
  background: #FAF8F5;
  border: 1px solid #EDE8E0;
  border-radius: 10px;
}

#conference-connect-root .cc-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #2D2420;
  background: white;
  border: 1.5px solid #DDD6CC;
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color .15s;
}
#conference-connect-root .cc-edit-textarea:focus {
  border-color: #FF8A7A;
  box-shadow: 0 0 0 3px rgba(255,138,122,.12);
}

/* Late character counter below a textarea. Shared by the card composer,
   the edit box and the reply box. Empty until only CHAR_COUNTER_SHOW_WITHIN
   characters are left (cc-app.js); min-height keeps its space reserved so the
   layout does not jump when the text appears mid-typing. The line-height is
   set here and min-height matches it exactly: with an inherited line-height
   the empty box would be a pixel shorter than one line of text. */
#conference-connect-root .cc-char-count {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cc-text-muted);
  text-align: right;
  margin-top: 4px;
  min-height: 1.5em;
}

/* Error message shown when save fails */
#conference-connect-root .cc-edit-error {
  font-size: 13px;
  color: #9A2E1F;
  background: #fff0ee;
  border: 1px solid #f0c4bc;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}

/* Save / Cancel button row */
#conference-connect-root .cc-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* ── Display (projector) mode ──
   Shortcode display="1" or ?display=1 on the board page. A big screen in a
   foyer or on stage: read-only, large type, no personal controls, QR corner.
   The server prints the cc-display-mode class on the root, so these rules
   apply before cc-app.js runs (no flash of the normal layout).
   The custom properties below are the knobs for a given screen size. */
#conference-connect-root.cc-display-mode {
  --cc-display-card-min: 360px;     /* narrowest card column */
  --cc-display-gap: 28px;           /* space between cards */
  --cc-display-text: 24px;          /* card text */
  --cc-display-prompt: 15px;        /* card heading (prompt) */
  --cc-display-meta: 16px;          /* author, time, tag, pin count */
  --cc-display-title: 36px;         /* conference name in the header */
  --cc-display-qr: 180px;           /* QR code size in the corner */
  --cc-display-corner-space: 240px; /* empty space under the last row, so the board can be scrolled until the last cards sit clear of the fixed QR corner (on an unscrolled screen the corner may overlap the bottom-right card) */
}

/* Nothing to click or personalise on a projector. The elements still exist
   (renderBoard() attaches listeners to them), they are only hidden. Email
   icons are hidden here AND never sent by the server (no X-CC-User). */
#conference-connect-root.cc-display-mode .cc-header-right,
#conference-connect-root.cc-display-mode .cc-toolbar,
#conference-connect-root.cc-display-mode .cc-readonly-banner,
#conference-connect-root.cc-display-mode .cc-timeline-bar,
#conference-connect-root.cc-display-mode .cc-sidebar,
#conference-connect-root.cc-display-mode .cc-mobile-filter-fab,
#conference-connect-root.cc-display-mode .cc-email-icon {
  display: none !important;
}

/* Layout and type sized to be read across a room */
#conference-connect-root.cc-display-mode .cc-header { padding: 24px 32px; }
#conference-connect-root.cc-display-mode .cc-header-title { font-size: var(--cc-display-title); }
#conference-connect-root.cc-display-mode .cc-board-wrapper { border-radius: 0 0 16px 16px; }
#conference-connect-root.cc-display-mode .cc-board {
  grid-template-columns: repeat(auto-fill, minmax(var(--cc-display-card-min), 1fr));
  gap: var(--cc-display-gap);
  padding: 28px 32px var(--cc-display-corner-space);
}
/* No hover lift on a projector: nobody points at it. */
#conference-connect-root.cc-display-mode .cc-note-card,
#conference-connect-root.cc-display-mode .cc-note-card:hover {
  transform: none;
  cursor: default;
  padding: 28px;
  box-shadow: 2px 3px 12px rgba(0, 0, 0, .12);
}
#conference-connect-root.cc-display-mode .cc-note-prompt { font-size: var(--cc-display-prompt); }
#conference-connect-root.cc-display-mode .cc-note-content { font-size: var(--cc-display-text); line-height: 1.4; }
#conference-connect-root.cc-display-mode .cc-note-footer,
#conference-connect-root.cc-display-mode .cc-note-tag,
#conference-connect-root.cc-display-mode .cc-pin-badge-readonly { font-size: var(--cc-display-meta); }
#conference-connect-root.cc-display-mode .cc-connection-banner { font-size: 18px; }
#conference-connect-root.cc-display-mode .cc-ended-banner { font-size: 20px; }
/* Title stays larger than the subtitle, as on a phone */
#conference-connect-root.cc-display-mode .cc-empty-title { font-size: 28px; }
#conference-connect-root.cc-display-mode .cc-empty-sub { font-size: 22px; }

/* QR corner: fixed bottom-right so it stays visible however long the board is */
/* ── Projector filter menu (2.12.5) ──
   A faint button in the top-right corner for the organiser; the audience
   should hardly notice it. It opens the filter panel as a drawer from the
   right. Every position is set here, so the phone rules (bottom sheet)
   never mix in, even on a narrow projector window. */
#conference-connect-root.cc-display-mode .cc-display-filter-btn {
  position: relative;
  flex-shrink: 0;
  /* Centred with flexbox, and every box setting spelled out: themes style
     all buttons (msidev's theme: display:block, text-align:start), which
     pushed the icon 12 px left of centre in 2.12.5. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--cc-target-min);
  height: var(--cc-target-min);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: #F7F3EE;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  transition: opacity .2s, background .2s;
}
#conference-connect-root.cc-display-mode .cc-display-filter-btn:hover,
#conference-connect-root.cc-display-mode .cc-display-filter-btn:focus-visible,
#conference-connect-root.cc-display-mode .cc-display-filter-btn[aria-expanded="true"] {
  opacity: 1;
  background: rgba(255, 255, 255, .14);
}
#conference-connect-root.cc-display-mode .cc-display-filter-icon {
  display: block;
  flex-shrink: 0;
}
/* A filter is on: a small dot, for the organiser only (no label for the audience). */
#conference-connect-root.cc-display-mode .cc-display-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF8A7A;
}
#conference-connect-root.cc-display-mode .cc-mobile-filter-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
#conference-connect-root.cc-display-mode .cc-mobile-filter-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
#conference-connect-root.cc-display-mode .cc-mobile-filter-panel {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: min(380px, 90vw);
  max-height: none;
  z-index: 1000;
  background: #1E1A16;
  border-radius: 0;
  padding: 24px 20px;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0, 0, 0, .4);
  /* Closed = slid out to the right AND invisible, which takes its buttons out
     of the Tab order; visibility waits for the slide to finish (.3s). */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease-out, visibility 0s linear .3s;
}
#conference-connect-root.cc-display-mode .cc-mobile-filter-panel.open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}
/* One heading or tag per line, as in the desktop sidebar. */
#conference-connect-root.cc-display-mode .cc-mobile-filter-panel .cc-sidebar-section {
  display: block;
  margin-bottom: 16px;
}
#conference-connect-root.cc-display-mode .cc-mobile-filter-panel .cc-sidebar-item {
  width: 100%;
}

#conference-connect-root.cc-display-mode .cc-display-qr {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 232px;
  background: white;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  text-align: center;
}
#conference-connect-root.cc-display-mode .cc-display-qr .cc-qr-image {
  width: var(--cc-display-qr);
  height: var(--cc-display-qr);
  margin: 0 auto;
}
#conference-connect-root.cc-display-mode .cc-display-qr .cc-qr-fallback { width: auto; }
#conference-connect-root.cc-display-mode .cc-display-qr-label {
  margin-top: 10px;
  font-size: 14px;
  color: #7A6E62;
}
/* No attendee page found: the corner holds only a note, so it needs no gap above it */
#conference-connect-root.cc-display-mode .cc-display-qr-missing .cc-display-qr-label {
  margin-top: 0;
  font-size: 15px;
  color: #2D2420;
}
#conference-connect-root.cc-display-mode .cc-display-qr-url {
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #2D2420;
  word-break: break-all;
}

/* ── Responsive ── */
/* ── Mobile filter FAB + slide-up panel (hidden on desktop) ── */
#conference-connect-root .cc-mobile-filter-fab { display: none; }
#conference-connect-root .cc-mobile-filter-backdrop { display: none; }
#conference-connect-root .cc-mobile-filter-panel { display: none; }
/* Parts of the filter panel shared by phones and the projector (2.12.5). */
#conference-connect-root .cc-mobile-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#conference-connect-root .cc-mobile-filter-close {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: #D6CFC5;
  font-size: 16px;
  width: var(--cc-target-min); height: var(--cc-target-min);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
#conference-connect-root .cc-mobile-filter-close:hover {
  background: rgba(255,255,255,.15);
}
#conference-connect-root .cc-mobile-clear {
  margin: 0 0 12px;
}

@media (max-width: 640px) {
  #conference-connect-root .cc-join-card { flex-direction: column; }
  /* Phones: the link field gets the full width, Copy goes underneath. */
  #conference-connect-root .cc-recovery-row { flex-direction: column; }
  #conference-connect-root .cc-join-side { padding: 24px; }
  #conference-connect-root .cc-board-wrapper { flex-direction: column; }
  /* Hide the desktop sidebar on mobile — the mobile filter panel replaces it */
  #conference-connect-root .cc-sidebar { display: none !important; }

  /* ── Mobile filter FAB: fixed button at bottom-right ── */
  #conference-connect-root .cc-mobile-filter-fab {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 900;
    background: #2D2420;
    color: #F7F3EE;
    border: none;
    border-radius: 28px;
    padding: 12px 20px;
    min-height: var(--cc-target-min);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    transition: transform .15s, box-shadow .15s;
  }
  #conference-connect-root .cc-mobile-filter-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0,0,0,.45);
  }
  #conference-connect-root .cc-mobile-filter-fab-icon {
    font-size: 16px;
    line-height: 1;
  }
  /* Active filter dot indicator */
  #conference-connect-root .cc-mobile-filter-fab-dot {
    width: 8px; height: 8px;
    background: #FF8A7A;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── Mobile filter backdrop: semi-transparent overlay ── */
  #conference-connect-root .cc-mobile-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  #conference-connect-root .cc-mobile-filter-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Mobile filter panel: slides up from bottom ── */
  #conference-connect-root .cc-mobile-filter-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #1E1A16;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 32px;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    /* Closed = also invisible, which takes its buttons out of the Tab order
       and away from screen readers (the ☰ button says "collapsed"). The
       visibility switch waits until the slide-down has finished (.3s). */
    visibility: hidden;
    transition: transform .3s ease-out, visibility 0s linear .3s;
    box-shadow: 0 -8px 40px rgba(0,0,0,.4);
  }
  #conference-connect-root .cc-mobile-filter-panel.open {
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s; /* visible at once when opening, so focus can move in */
  }
  /* Inside the panel, items wrap horizontally like the old mobile sidebar */
  #conference-connect-root .cc-mobile-filter-panel .cc-sidebar-section {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px;
  }
  #conference-connect-root .cc-mobile-filter-panel .cc-sidebar-section-title {
    width: 100%; margin-left: 0;
  }
  #conference-connect-root .cc-mobile-filter-panel .cc-sidebar-item {
    width: auto; border-radius: 8px; padding: 6px 12px;
  }
  #conference-connect-root .cc-board { grid-template-columns: 1fr; padding: 12px 16px 40px; }
  #conference-connect-root .cc-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  #conference-connect-root .cc-toolbar { padding: 12px 16px; }
  #conference-connect-root .cc-modal { margin: 12px; padding: 20px; }
  #conference-connect-root .cc-title { font-size: 28px; }
  #conference-connect-root .cc-create-row { flex-direction: column; align-items: stretch; }
  #conference-connect-root .cc-tag-autocomplete-wrap { max-width: none; }
  #conference-connect-root .cc-tag-area { width: 100%; }
  /* The opened tag field fills the phone-width row, as it did before the
     "Add a tag" link wrapped it in .cc-tag-area (a flex row). */
  #conference-connect-root .cc-tag-area .cc-tag-autocomplete-wrap { flex: 1; }
  #conference-connect-root .cc-tag-input { max-width: none; }
  /* Timeline: smaller chips on mobile */
  #conference-connect-root .cc-timeline-chip { min-width: 120px; max-width: 180px; padding: 6px 12px; }
  #conference-connect-root .cc-timeline-scroll { padding: 4px 12px; gap: 8px; }
}

/* ── Keyboard focus (2.11.0) ──
   Two rings: a dark outline plus a light inner ring, so the focused control
   is visible on the dark board AND on the light cards and dialogs.
   :focus-visible = only for keyboard use, never after a mouse click or tap.
   At the end of the file on purpose: many buttons set their own box-shadow
   with the same selector strength, and the later rule wins a tie. */
#conference-connect-root :focus-visible {
  outline: 3px solid var(--cc-focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cc-focus-inner);
}
/* The dialog box takes focus from code when it opens (so a screen reader
   starts at its title); no ring around the whole dialog, and it keeps its
   normal shadow. */
#conference-connect-root .cc-modal:focus {
  outline: none;
  box-shadow: var(--cc-modal-shadow);
}

/* ── Reduced motion (2.11.0) ──
   People who asked their device for less motion (vestibular disorders,
   migraine) get still cards and no pop-in animations.
   !important because the entrance delay is an inline style set by
   cc-app.js, which only !important can override. */
@media (prefers-reduced-motion: reduce) {
  #conference-connect-root .cc-note-card,
  #conference-connect-root .cc-note-card:hover {
    transform: none !important;
    animation: none !important;
    transition: none;
  }
  #conference-connect-root .cc-join-card,
  #conference-connect-root .cc-empty,
  #conference-connect-root .cc-modal-overlay,
  #conference-connect-root .cc-modal,
  #conference-connect-root .cc-toast,
  #conference-connect-root .cc-pin-btn.pinned {
    animation: none !important;
  }
  /* No lift or grow on hover either. */
  #conference-connect-root .cc-btn-primary:hover,
  #conference-connect-root .cc-btn-create:hover,
  #conference-connect-root .cc-pin-btn:hover,
  #conference-connect-root .cc-email-icon:hover,
  #conference-connect-root .cc-color-dot:hover,
  #conference-connect-root .cc-color-dot.active,
  #conference-connect-root .cc-timeline-chip:hover,
  #conference-connect-root .cc-mobile-filter-fab:hover {
    transform: none;
  }
  #conference-connect-root .cc-timeline-scroll,
  #conference-connect-root .cc-create-timed-bar { scroll-behavior: auto; }
  #conference-connect-root .cc-mobile-filter-panel,
  #conference-connect-root .cc-mobile-filter-backdrop { transition: none; }
  /* The projector drawer's rules are more specific, so they are named too. */
  #conference-connect-root.cc-display-mode .cc-mobile-filter-panel,
  #conference-connect-root.cc-display-mode .cc-mobile-filter-backdrop,
  #conference-connect-root.cc-display-mode .cc-display-filter-btn { transition: none; }
}