/* ConferVox feature components shared by the administration, operator and remote pages.
   Built on the role tokens from tokens.css; global elements are styled in base.css. */

/* ---------- Quick navigation (flat page-level links) ---------- */
.quick-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); margin: var(--space-4) 0; }
.quick-nav a, .quick-nav button { display: inline-flex; width: auto; margin: 0; padding: 0.375rem 0.75rem; text-decoration: none; background: var(--btn2-bg); color: var(--btn2-fg); border: 1px solid var(--btn2-line); border-radius: var(--radius-sm); font-size: 0.875rem; box-shadow: none; }
.quick-nav a:hover, .quick-nav button:hover { background: var(--btn2-hover); }
.quick-nav [aria-current="page"] { background: var(--heading); border-color: var(--heading); color: var(--bg); }
.quick-nav label { margin: 0; flex: 1 1 210px; }
.quick-nav select { margin-top: var(--space-1); }

/* ---------- Branding ---------- */
.branding-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.branding-color-field { margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.branding-color-inputs { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.branding-color-inputs input[type="color"] { width: 48px; min-width: 48px; height: var(--tap); padding: 3px; cursor: pointer; }
.branding-color-inputs input[type="text"] { min-width: 0; font-family: var(--font-mono); text-transform: uppercase; }
.branding-preview { margin: var(--space-4) 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--preview-background, var(--midnight)); color: var(--preview-text, #fff); }
.branding-preview-brand { display: flex; align-items: center; gap: var(--space-3); min-height: 38px; }
.branding-preview-brand img { display: block; max-width: 180px; max-height: 44px; object-fit: contain; }
.branding-preview-brand strong { font-family: var(--font-display); font-size: 1.05rem; }
.branding-preview h4 { margin: var(--space-4) 0 var(--space-2); color: inherit; }
.branding-preview p { margin: var(--space-2) 0; white-space: pre-line; }
.branding-preview-button { display: inline-block; margin-top: var(--space-3); padding: 0.625rem 1rem; border-radius: var(--radius-sm); background: var(--preview-primary, var(--teal)); color: var(--preview-background, var(--midnight)); font-weight: 800; }
.branding-preview-links { display: flex; gap: var(--space-4); margin-top: var(--space-4); font-size: 0.875rem; }
.branding-preview-links span { text-decoration: underline; text-underline-offset: 3px; }
.branding-contrast { padding: var(--space-3); border-radius: var(--radius-sm); font-weight: 600; }
.branding-contrast[data-valid="true"] { background: var(--ok-bg); color: var(--ok); }
.branding-contrast[data-valid="false"] { background: var(--err-bg); color: var(--err); }

/* ---------- Access and registration ---------- */
.access-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; margin: var(--space-4) 0; }
.access-overview label { margin: 0; }
.access-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.access-actions button, .access-actions a { width: auto; margin: 0; }
.access-actions a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--btn2-line); border-radius: var(--radius-sm); background: var(--btn2-bg); color: var(--btn2-fg); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.access-status { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-weight: 700; font-size: 0.8125rem; }
.access-status::before { width: 8px; height: 8px; border-radius: 50%; content: ""; }
.access-status[data-open="true"] { background: var(--ok-bg); color: var(--ok); }
.access-status[data-open="true"]::before { background: var(--ok-icon); }
.access-status[data-open="false"] { background: var(--warn-bg); color: var(--warn); }
.access-status[data-open="false"]::before { background: var(--warn-icon); }
.access-public-listing { display: flex; align-items: center; gap: var(--space-2); }
.access-public-listing input { width: auto; margin: 0; }
.access-section { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.access-section h4 { margin: 0 0 var(--space-2); }
.access-code-result { margin: var(--space-4) 0; padding: var(--space-4); border: 2px solid var(--action); border-radius: var(--radius-md); background: var(--surface); }
.access-code-value { display: block; margin: var(--space-1) 0; font: 800 1.7rem/1.2 var(--font-mono); letter-spacing: 0.14em; color: var(--heading); }
.access-join-result { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.access-join-result[hidden] { display: none; }
.access-join-result img { width: 180px; height: 180px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.access-join-result input { font-size: 0.8125rem; }

/* ---------- Recordings ---------- */
.recording-session { margin: var(--space-3) 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.recording-session summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center; min-height: var(--tap); padding: var(--space-3) var(--space-4); background: var(--surface-raised); }
.recording-session summary::before { content: "▸"; color: var(--accent-text); }
.recording-session[open] summary { border-bottom: 1px solid var(--line); }
.recording-session[open] summary::before { content: "▾"; }
.recording-session summary strong { flex: 1; }
.recording-session summary small { font-weight: 400; color: var(--text-muted); }
.recording-row { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.recording-row:last-child { border-bottom: 0; }
.recording-row a { white-space: nowrap; }
.recording-row small { display: block; color: var(--text-muted); }

/* ---------- Operator ---------- */
.live-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--midnight); color: #fff; font-weight: 700; font-size: 0.8125rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); }
.live-badge .dot { width: 7px; height: 7px; background: var(--cyan); }
.quick-start-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; padding: 0; border: 0; }
.quick-start-option { display: flex; min-height: 3.25rem; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); cursor: pointer; }
.quick-start-option input { flex: none; margin: 0; }
.quick-start-option span { font-weight: 600; }
.quick-start-option small { display: block; margin-top: 3px; color: var(--text-muted); font-weight: 400; line-height: 1.35; }
.quick-start-option input[disabled] + span { opacity: 0.75; }
.operator-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.operator-page-heading h2 { margin: 0; }
.operator-page-heading p { margin: var(--space-2) 0 0; }
.operator-start-grid, .operator-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.operator-field-card, .operator-service-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.operator-field-card h3, .operator-service-card h3 { margin: 0 0 var(--space-2); }
.operator-field-card label:first-of-type { margin-top: 0; }
.operator-inline-setting { max-width: 430px; margin: var(--space-4) 0; }
.operator-primary-action { width: 100%; min-height: 3.25rem; font-size: 1rem; }
.operator-default-start { margin: var(--space-4) 0 var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--tint); color: var(--tint-text); font-weight: 600; }
.operator-start-options { margin: var(--space-2) 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-4) var(--space-4); }
.operator-start-options > summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 600; color: var(--accent-text); min-height: var(--tap); }
.operator-live-state { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--line); border-left: 4px solid var(--action); border-radius: var(--radius-md); background: var(--surface-raised); }
.operator-live-state p { margin: 0; }
.operator-live-state p + p { margin-top: var(--space-2); }
.operator-service-controls { margin: var(--space-4) 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-4) var(--space-4); }
.operator-service-controls > summary { cursor: pointer; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: 700; min-height: var(--tap); }
.operator-service-card button { margin-right: var(--space-2); }
.operator-language-heading { position: relative; display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.operator-language-heading h3 { margin: 0; }
.operator-info-button { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; padding: 0; margin: 0; background: transparent; border-color: transparent; color: var(--accent-text); box-shadow: none; }
.operator-info-button > span[aria-hidden] { display: grid; place-items: center; width: 21px; height: 21px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 0.85rem Georgia, serif; }
.operator-info-box { position: absolute; z-index: 20; top: 100%; left: 0; width: min(380px, 100%); margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); font-size: 0.875rem; line-height: 1.55; }

/* ---------- Administration ---------- */
.admin-metrics { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.admin-metrics p { margin: var(--space-2) 0; }
.admin-metrics strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--heading); }
.admin-overview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
#program-editor, #participants-editor, #event-create { margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
#program-editor > summary, #participants-editor > summary, #event-create > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); }
#overview-status-form { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); }
#overview-status-form select { width: auto; min-width: 150px; }
#overview-status-form label { width: 100%; margin-bottom: 0; }

/* ---------- Help and onboarding ---------- */
.help-fab { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 20; width: auto; margin: 0; padding: 0.75rem 1.125rem; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-2); }
.onboarding-overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; z-index: 30; padding: var(--space-4); }
.onboarding-card { background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 520px; width: 100%; padding: var(--space-6); box-shadow: var(--shadow-xl); }
.onboarding-step { display: flex; gap: var(--space-3); margin: var(--space-4) 0; }
.onboarding-step .icon { font-size: 1.4rem; flex: none; }
.onboarding-step strong { font-family: var(--font-display); }
@media (min-width: 640px) { .onboarding-overlay { align-items: center; } .onboarding-card { border-radius: var(--radius-lg); } }

/* ---------- Narrow screens ---------- */
@media (max-width: 700px) {
  .branding-color-grid, .access-overview, .access-join-result { grid-template-columns: 1fr; }
  .access-join-result img { width: min(100%, 260px); height: auto; justify-self: center; }
}
@media (max-width: 640px) {
  .quick-start-options, .operator-start-grid, .operator-service-grid { grid-template-columns: 1fr; }
  .operator-page-heading { flex-direction: column; }
  .operator-page-heading .live-badge { align-self: flex-start; }
}

/* ---------- Session overview: session, source and transport state ---------- */
.session-overview { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); margin: var(--space-3) 0; color: var(--text); }
.session-overview dl { margin: 0; display: grid; gap: var(--space-3); }
.session-overview dt { font-size: 0.8125rem; color: var(--text-muted); }
.session-overview dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.session-overview .overview-states { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.session-overview .overview-confirmation { font-size: 0.8125rem; margin: var(--space-3) 0 0; color: var(--text-muted); }
.overview-badge { display: block; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; }
.overview-badge[data-tone="neutral"] { background: var(--unk-bg); border-color: var(--unk-line); color: var(--unk); }
.overview-badge[data-tone="success"] { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.overview-badge[data-tone="warning"] { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.overview-badge[data-tone="error"] { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.overview-badge[data-tone="recording"] { background: var(--err-solid); color: #fff; }

/* ---------- Guest remote (shared link, no account) ---------- */
.guest-remote { max-width: 35rem; margin: var(--space-6) auto; }
.guest-remote h1 { font-size: 1.5rem; }
.guest-remote p { overflow-wrap: anywhere; }
.guest-remote details { margin-top: var(--space-6); }
.guest-remote .guest-state { padding: var(--space-4); border-radius: var(--radius-field); background: var(--tint); color: var(--tint-text); font-size: 1.125rem; font-weight: 700; }
.guest-actions { display: grid; gap: var(--space-3); }
.guest-actions button { width: 100%; min-height: 3.75rem; margin: 0; font-size: 1.0625rem; }

/* ---------- Audio level meter ---------- */
.vu-meter { position: relative; height: 0.875rem; margin-top: var(--space-1); border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.vu-meter-bar { width: 0; height: 100%; background: var(--ok-icon); transition: width 80ms linear; }
.vu-meter-bar[data-level="mid"] { background: var(--warn-icon); }
.vu-meter-bar[data-level="high"] { background: var(--err-icon); }
.vu-meter-scale { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.vu-meter-scale :is(.error, .warning) { padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.vu-meter-card > label { margin: 0 0 var(--space-1); }

/* ---------- Credit account ---------- */
.cv-credits { margin: var(--space-4) 0; }
.cv-credit-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cv-credit-tiles > div { background: var(--tint); padding: var(--space-4); border-radius: var(--radius-field); }
.cv-credit-tiles strong { display: block; font: 800 1.7rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--heading); }
.cv-credit-warning { padding: var(--space-3) var(--space-4); border-radius: var(--radius-field); border-left: 4px solid; font-weight: 600; }
.cv-credit-warning--warn { background: var(--tint); border-color: #b7791f; color: var(--heading); }
.cv-credit-warning--danger { background: var(--tint); border-color: #c53030; color: var(--heading); }
.cv-credits label { display: block; margin: var(--space-3) 0; }
.cv-credits :is(input, select) { display: block; max-width: 100%; width: 100%; }
.cv-credits input[type="checkbox"] { width: 1.125rem; }
.cv-credits button { margin: var(--space-2) var(--space-2) var(--space-2) 0; }
.cv-credit-form { max-width: 37.5rem; }
.cv-credits li { overflow-wrap: anywhere; }
.cv-credits pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .cv-credit-tiles { grid-template-columns: 1fr; } }