/*
 * HotConference's pages in Claude Design's look: the members area, the join page and the pages after them. A page
 * wears it with body.hc (after app.css): the design's colours and type as the page's own variables, so every section
 * takes them; its buttons, fields, badges, pills, top bar and cards. Light, or dark with body.mode-dark (theme.js: the
 * person's choice, shared with the room, else their computer's). The pages' emoji are drawn as the design's line icons
 * (design-icons.woff2, app.css).
 */
body.hc {
  --bg: #f6f5f4;
  --panel: #ffffff;
  --surface-2: #f2f1ef;
  --surface-3: #e9e7e4;
  --border: #e4e2df;
  --border-strong: #cfccc8;
  --text: #1a1a1c;
  --muted: #5f6168;
  --brand-contrast: #ffffff;
  /* The brand colour's shades: the page's own (the room owner's on their join page, HotConference's red elsewhere). */
  --accent-hover: color-mix(in srgb, var(--brand) 86%, #000);
  --accent-soft: color-mix(in srgb, var(--brand) 11%, #fff);
  --accent-text: color-mix(in srgb, var(--brand) 88%, #000);
  --accent-line: var(--brand);
  --danger: #b42318;
  --danger-soft: #feecea;
  --success: #1e7a3a;
  --success-soft: #e3f5e8;
  --warning: #7a5300;
  --warning-soft: #fff4db;
  --control: #ffffff;
  --control-hover: #f2f1ef;
  --control-border: #cfccc8;
  --field: #ffffff;
  --shadow-sm: 0 1px 2px rgb(26 26 28 / 6%);
  --shadow-lg: 0 24px 64px rgb(26 26 28 / 18%);
  color-scheme: light;
  background: var(--bg);
  color: var(--text);
  font: 15px/22px 'HC Design Icons', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* HotConference's red, but on the join page (index.html), which takes the room owner's brand colour (app.js). */
body.hc:not(:has(> #login)) {
  --brand: #d7262b;
}

body.hc.mode-dark {
  --bg: #111215;
  --panel: #1a1b1f;
  --surface-2: #1e2024;
  --surface-3: #2a2c32;
  --border: #2c2e33;
  --border-strong: #3c3f45;
  --text: #eeeef0;
  --muted: #a3a6ad;
  --accent-hover: color-mix(in srgb, var(--brand) 86%, #fff);
  --accent-soft: color-mix(in srgb, var(--brand) 22%, #111215);
  --accent-text: color-mix(in srgb, var(--brand) 50%, #fff);
  --danger: #ff8a80;
  --danger-soft: #3a1716;
  --success: #9be3ae;
  --success-soft: #1f3524;
  --warning: #f5c66b;
  --warning-soft: #3a2e12;
  --control: #1a1b1f;
  --control-hover: #1e2024;
  --control-border: #3c3f45;
  --field: #1a1b1f;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 55%);
  color-scheme: dark;
}

/* The light/dark switch in a page's top bar (the room's, app.css): its own shape, not the pages' buttons. */
body.hc .topbar button.mode-switch {
  width: 68px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

body.hc :is(input, textarea, select, code, pre) {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.hc :focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

/* Buttons: white with a firm edge, rounded; the main one red. (Low specificity: a section's own buttons keep theirs.) */
:where(body.hc) :is(button, a.button):where(:not(.mce-container *)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

:where(body.hc) :is(button, a.button):where(:not(.mce-container *)):hover:not([disabled]) {
  background: var(--surface-2);
  filter: none;
}

body.hc :is(button, a.button).primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body.hc :is(button, a.button).primary:hover:not([disabled]) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

body.hc :is(button, a.button).ghost {
  border-color: transparent;
  background: transparent;
}

body.hc :is(button, a.button).danger {
  border-color: var(--border-strong);
  background: var(--panel);
  color: var(--danger);
}

body.hc :is(button, a.button).danger:hover:not([disabled]) {
  border-color: var(--danger);
  background: var(--danger-soft);
}

body.hc :is(button, a.button).small {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
}

body.hc button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.hc .icon-button {
  width: 44px;
  padding: 0;
}

/* Fields: white, a firm edge, 44px high, the brand's ring when typing. */
:where(body.hc) :is(input:not([type='checkbox'], [type='radio'], [type='color'], [type='file'], [type='range']), textarea, select):where(:not(.mce-container *)) {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background-color: var(--field);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
}

:where(body.hc) textarea {
  padding: 12px 14px;
  line-height: 22px;
}

:where(body.hc) :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}

body.hc :is(input, textarea, select):focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

body.hc input:is([type='checkbox'], [type='radio']) {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

body.hc input[type='color'] {
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
}

body.hc .hint {
  color: var(--muted);
}

body.hc .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: none;
}

/* The top bar: the product's mark and name; the owner, their package, Start my room, My guests. */
body.hc > .topbar {
  min-height: 64px;
  padding: 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

body.hc .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

body.hc .brand strong {
  font-size: 15px;
  font-weight: 800;
}

body.hc .brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
}

body.hc .topbar .me {
  gap: 12px;
}

body.hc .avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 800;
}

body.hc #account-name {
  font-size: 14px;
  font-weight: 600;
}

/* Status pills: live (red), upcoming (amber), none set (grey). */
body.hc .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}

body.hc .pill-live {
  background: var(--brand);
  color: #fff;
}

body.hc .pill-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

body.hc .pill-upcoming {
  background: var(--warning-soft);
  color: var(--warning);
}

body.hc .pill-idle {
  background: var(--surface-2);
  color: var(--muted);
}

body.hc .meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

body.hc .meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-line);
}

/*
 * ---------- The join page (index.html before the room) ----------
 * One card: the event on the left (logo, title, welcome text, the date with Add to my calendar, the agenda, the
 * speakers), "Save your place" and the form on the right, on its soft grey. Only the form, a single card, when the
 * owner wrote no event page.
 */
body.hc .login {
  gap: 16px;
  padding: 40px 16px;
  background: var(--bg);
}

body.hc #login-form {
  width: min(460px, 100%);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

body.hc #login-form:has(.login-intro > :is(#login-description, #login-agenda, #login-speakers):not([hidden])) {
  width: min(980px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body.hc .login-intro,
body.hc .login-fields {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 32px;
}

body.hc #login-form:has(.login-intro > :is(#login-description, #login-agenda, #login-speakers):not([hidden])) .login-fields {
  background: var(--surface-2);
  border-left: 1px solid var(--border);
}

body.hc #login-form:not(:has(.login-intro > :is(#login-description, #login-agenda, #login-speakers):not([hidden]))) .login-intro {
  padding-bottom: 0;
}

body.hc #login-form h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 38px;
  letter-spacing: -0.02em;
}

body.hc #login-form .description {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

body.hc .login-fields-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

body.hc #login-form label:not(.check) {
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

body.hc #login-form button[type='submit'] {
  min-height: 52px;
  margin-top: 4px;
  font-size: 16px;
}

/* The date: a calendar tile and the day and time, then Add to my calendar, together in one box. */
body.hc #login-calendar:not(:empty) {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

body.hc .session-date {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.hc .date-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 60px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
  line-height: 1;
}

body.hc .date-tile small {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

body.hc .date-tile strong {
  font-size: 22px;
  font-weight: 800;
}

body.hc #login-calendar .add-to-calendar {
  margin: 0;
}

body.hc #login-calendar .add-to-calendar summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 13px;
}

/* The agenda's lines, the time in a column of its own; the speakers as small cards. */
body.hc .event-section h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

body.hc #login-agenda li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

body.hc #login-agenda li:last-child {
  border-bottom: 0;
}

body.hc #login-agenda li:not(:has(strong)) {
  grid-template-columns: minmax(0, 1fr);
}

body.hc #login-speakers ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

body.hc #login-speakers li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

body.hc #login-speakers li span {
  color: var(--muted);
  font-size: 13px;
}

/* Invited by someone: a soft green box at the top of the form. */
body.hc .guest-of {
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--success-soft);
  color: var(--text);
}

body.hc .guest-of span {
  color: var(--muted);
  font-size: 13px;
}

body.hc #login-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

body.hc .login > .hint,
body.hc .language-picker {
  color: var(--muted);
}

body.hc .instant-card {
  border-radius: 20px;
}

@media (max-width: 760px) {
  body.hc #login-form,
  body.hc #login-form:has(.login-intro > :is(#login-description, #login-agenda, #login-speakers):not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.hc #login-form:has(.login-intro > :is(#login-description, #login-agenda, #login-speakers):not([hidden])) .login-fields {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  body.hc .login-intro,
  body.hc .login-fields {
    padding: 24px 20px;
  }

  body.hc #login-form h1 {
    font-size: 26px;
    line-height: 32px;
  }
}

body.hc .event-section {
  margin: 0;
}

body.hc .event-section h3 {
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

body.hc .event-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * ---------- The pages of cards (My guests, the affiliate page and the others) ----------
 * The content in a column of the design's cards on the page's grey; titles, hints, tables with a grey head, the
 * figures as joined boxes, the period as a segmented switch, filters as chips. (The rooms page has its own layout.)
 */
body.hc:not(.members) .content {
  max-width: 1120px;
  padding: 32px 24px 48px;
  gap: 24px;
}

body.hc .content .card {
  width: auto;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: none;
}

body.hc .content h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.01em;
}

body.hc .content .card h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

body.hc .content .hint,
body.hc .content .muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

body.hc .content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

body.hc .content th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

body.hc .content td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}

body.hc .content tr:last-child td {
  border-bottom: 0;
}

body.hc .link-box {
  display: flex;
  gap: 8px;
}

body.hc .link-box input {
  flex: 1;
  min-width: 0;
}

body.hc .dialog {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

body.hc .toast {
  border-radius: 12px;
}

/* My guests: the head, the period, the figures, the summary, the filters, the guests. */
body.hc .stats-head {
  align-items: flex-end;
}

body.hc .periods {
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

body.hc .periods button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

body.hc .periods button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

body.hc .tiles {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

body.hc .tile-stat {
  display: grid;
  align-content: start;
  justify-items: start;
  min-height: 0;
  white-space: normal;
  text-align: left;
  font-weight: 400;
  gap: 2px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
}

body.hc .tile-stat:last-child {
  border-right: 0;
}

body.hc .tile-stat strong {
  font-size: 26px;
  font-weight: 800;
  line-height: 32px;
}

body.hc .tile-stat small {
  color: var(--muted);
  font-size: 12px;
}

body.hc .tile-stat.active {
  background: var(--accent-soft);
}

body.hc .summary {
  border-left: 0;
  font-size: 15px;
}

body.hc .chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

body.hc .chip.active {
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  color: var(--accent-text);
}

body.hc .guest {
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

body.hc .warmth {
  border-radius: 999px;
  font-weight: 700;
}

body.hc .trust {
  border: 0;
  border-radius: 16px;
  background: var(--success-soft);
  color: var(--text);
}

body.hc .fact strong {
  font-size: 22px;
  font-weight: 800;
}

@media (max-width: 760px) {
  body.hc:not(.members) .content {
    padding: 20px 16px 40px;
  }

  body.hc .tile-stat {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/*
 * ---------- Live now & coming up, the templates gallery ----------
 * Each session (or setup) as a card: its picture across the top, when it is (a red Live pill while live), its title,
 * its host.
 */
body.hc .discover h1 {
  margin: 8px 0 16px;
  font-size: 22px;
}

body.hc .session-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

body.hc .session-card {
  gap: 6px;
  padding: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  transition: border-color 0.15s, box-shadow 0.15s;
}

body.hc .session-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

body.hc .session-card img {
  margin-bottom: 8px;
  border-radius: 0;
  background: var(--surface-3);
}

body.hc .content .session-card > :not(img) {
  margin: 0 18px;
}

body.hc .session-card strong {
  font-size: 16px;
  line-height: 22px;
}

body.hc .session-card .when {
  justify-self: start;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}

body.hc .session-card .when.live {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
}

/* ---------- Replay, evergreen session, clip: the video in a rounded frame, the offer and the chat as cards ---------- */
body.hc :is(.replay-video, .clip-video) {
  border-radius: 16px;
}

body.hc .replay-offer {
  border-radius: 16px;
}

body.hc .evergreen-chat {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

body.hc .evergreen-waiting .countdown {
  color: var(--accent-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body.hc .clip-actions a.button,
body.hc .share-row :is(a, button) {
  min-height: 40px;
}

/* ---------- The staff page: its tabs as a row of underlined words with their icons; its tables dense ---------- */
body.hc .page-tabs {
  gap: 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.hc .page-tabs button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

body.hc .page-tabs button:hover:not([disabled]) {
  background: transparent;
  color: var(--text);
}

body.hc .page-tabs button.active {
  border-bottom-color: var(--brand);
  color: var(--text);
}

body.hc [data-panel] td {
  padding: 10px 14px;
}

body.hc [data-panel] :is(select, input:not([type='checkbox'], [type='radio'])) {
  min-height: 36px;
  border-radius: 8px;
  font-size: 14px;
}