/* Recognito workspace system. Legacy station behaviour remains in styles.css. */
:root {
  --bg: #f7f8fa; --panel: #fff; --ink: #22272c; --muted: #657079;
  --line: #e3e7ea; --soft: #f0f3f5; --accent: #177958; --accent-dark: #106044;
  --ok: #176749; --warn: #86520a; --bad: #b3384b; --accent-soft: #e8f4ed;
  font-family: "Segoe UI", Inter, system-ui, sans-serif; font-size: 14px;
}
:root[data-theme="dark"] {
  --bg: #151719; --panel: #1d2023; --ink: #e9edf0; --muted: #a4adb4;
  --line: #343a40; --soft: #282e32; --accent: #248663; --accent-dark: #35a47b;
  --ok: #91dbb5; --warn: #edc47c; --bad: #ffa2ac; --accent-soft: #20382c;
}
* { letter-spacing: 0; }
body { font-size: 14px; line-height: 1.5; }
h1,h2,h3,p { margin-top: 0; }
button { font-weight: 600; min-height: 38px; transition: background .15s, border-color .15s; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input:focus,select:focus,textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
button.secondary { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
button.secondary:hover { background: var(--soft); border-color: var(--muted); }
button:disabled,button.secondary:disabled { opacity: .55; background: var(--soft); color: var(--muted); }
button.with-icon { display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.lucide { width: 19px; height: 19px; flex-shrink: 0; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.5; margin-bottom: 7px; }
.app-frame { grid-template-columns: 232px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 26px 16px 16px; gap: 25px; display: flex; flex-direction: column; }
.brand-block { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; row-gap: 0; align-items: center; padding: 0 8px; }
.brand-symbol { grid-row: 1/3; width: 36px; height: 36px; background: var(--accent); color: #fff; display: grid; place-items: center; border-radius: 8px; }
.brand-symbol .lucide { width: 25px; height: 25px; }
.brand-block .eyebrow { grid-column: 2; grid-row: 2; font-size: 8px; margin: 0; }
.brand-block h1 { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 1.3; margin: 0; font-weight: 750; }
.brand-block #awsStatus { display: none; }
.nav-list { gap: 20px; }
.nav-group { gap: 4px; }
.nav-group>.eyebrow { padding: 0 12px; margin-bottom: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 41px; font-size: 13px; font-weight: 500; border: 1px solid transparent; }
.nav-item.active { background: var(--accent-soft); color: var(--ok); font-weight: 650; }
.nav-item:hover { background: var(--soft); }
.context-card { border: 0; border-left: 2px solid var(--accent); border-radius: 0; background: transparent !important; padding: 2px 12px; margin-left: 12px; }
.context-card strong { font-size: 12px; overflow-wrap: anywhere; }
.context-card .eyebrow { font-size: 9px; }
.context-summary>span { font-size: 11px; }
#sidebarAttendeeCount { display: none; }
.sidebar-note { font-size: 10px; padding: 15px 8px 0; }
.sidebar-note>strong { display: none; }
.policy-footer-links { gap: 6px 12px; }
.policy-footer-links a { font-size: 10px; }
.workspace { padding: 0 38px 36px; min-width: 0; }
.top-account-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 82px; padding: 18px 0; margin-bottom: 0; border-bottom: 1px solid var(--line); gap: 20px; }
.top-account-bar>.auth-card { display: flex; flex-direction: row; gap: 12px; }
.top-account-bar>div>.eyebrow { font-size: 12px; font-weight: 650; color: var(--ink); text-transform: none; margin-bottom: 1px; }
#headerWorkspaceName { color: var(--muted); font-size: 11px; font-weight: 400; }
.top-utility-bar>div:has(#authTitle) { display: none; }
.top-utility-bar>.icon-only { border: none; background: transparent; width: 32px; min-height: 32px; }
.account-menu { position: relative; }
.account-menu summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.account-menu summary strong,.account-menu summary small { display: block; line-height: 1.5; }
.account-menu summary strong { font-size: 12px; font-weight: 600; max-width: 175px; overflow-wrap: anywhere; }
.account-menu summary small { color: var(--muted); font-size: 10px; }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e9e7f4; color: #5c507f; font-size: 11px; font-weight: 650; flex-shrink: 0; }
.account-popover { position: absolute; top: calc(100% + 16px); right: 0; padding: 18px; width: min(300px,80vw); border: 1px solid var(--line); background: var(--panel); z-index: 25; border-radius: 8px; box-shadow: 0 8px 30px #00000014; overflow-wrap: anywhere; }
.account-popover p { font-size: 12px; }
.account-popover button { background: var(--soft); color: var(--ink); border: 1px solid var(--line); width: 100%; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 10px; padding: 22px 0 16px; font-size: 11px; color: var(--muted); }
.workspace-breadcrumb .lucide { width: 12px; height: 12px; }
.workspace-breadcrumb strong { color: var(--ink); font-weight: 500; }
.page-header { margin: 0 0 24px; align-items: center; gap: 16px; }
.page-header h2 { font-size: 28px; font-weight: 650; line-height: 1.25; margin: 0; }
.page-header .eyebrow { text-transform: none; font-size: 12px; font-weight: 400; }
.page-header button { font-size: 12px; }
.view>.content-grid { gap: 25px; }
.panel { border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; min-width: 0; gap: 12px; }
.section-title { margin-bottom: 16px; gap: 12px; }
.section-title h3 { font-size: 16px; font-weight: 650; line-height: 1.4; }
.section-title .eyebrow { font-size: 10px; }
.section-title>div>h3 { margin: 0; }
.hint,.meta { font-size: 12px; line-height: 1.55; }
input,select { min-height: 40px; font-size: 13px; }
label { font-size: 12px; gap: 7px; }
.badge { border-radius: 5px; padding: 3px 8px; font-size: 10px; line-height: 1.6; font-weight: 600; white-space: nowrap; }
.badge.ok { color: var(--ok); background: var(--accent-soft); border-color: transparent; }
.badge.neutral { color: var(--muted); background: var(--soft); border-color: transparent; }
.overview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 28px; padding: 22px 0; }
.overview-metric { padding: 0 23px; border-right: 1px solid var(--line); }
.overview-metric:last-child { border: 0; }
.overview-metric>div { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; gap: 8px; }
.overview-metric>div .lucide { width: 17px; height: 17px; }
.overview-metric>strong { display: block; font-size: 34px; line-height: 1.3; margin: 12px 0 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.overview-metric>small { color: var(--muted); font-size: 10px; }
.metric-arrived>strong { color: var(--ok); }
#view-events>.content-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,1fr); align-items: start; }
.event-home-panel { display: block; grid-column: 1; grid-row: 1; background: var(--panel); border-top: 3px solid var(--accent); padding: 22px; }
.event-home-panel h3 { font-size: 20px; max-width: 390px; overflow-wrap: anywhere; }
.event-home-actions { gap: 8px; margin: 22px 0 14px; }
.event-home-actions button { font-size: 11px; padding: 0 12px; }
.event-home-panel .hint { font-size: 11px; color: var(--muted); }
.pilot-checklist-panel { grid-column: 2; grid-row: 1/4; border-left: 1px solid var(--line); padding-left: 26px; }
.pilot-checklist { display: block; }
.pilot-check-item,.pilot-check-item.done { padding: 13px 0; background: transparent !important; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; grid-template-columns: 22px minmax(0,1fr) auto; gap: 10px; }
.pilot-check-icon { height: 20px; width: 20px; font-size: 9px; border-radius: 50%; background: var(--soft); color: var(--muted); }
.pilot-check-item.done .pilot-check-icon { background: var(--accent-soft); color: var(--ok); }
.pilot-check-item strong { font-size: 12px; }
.pilot-check-item .meta { font-size: 10px; }
.pilot-check-item button { min-height: 28px; padding: 0 8px; font-size: 10px; border: 0; background: transparent; color: var(--accent); }
.pilot-progress { height: 4px; }
.event-directory,.session-disclosure { grid-column: 1; border-top: 1px solid var(--line); padding-top: 16px; }
.event-directory>summary,.session-disclosure>summary,.station-disclosure>summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; min-height: 38px; }
.event-directory>summary>.lucide:last-child,.session-disclosure>summary>.lucide:last-child,.station-disclosure>summary>.lucide:last-child { margin-left: auto; width: 14px; }
.directory-count { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: auto; }
.event-directory[open]>.panel,.session-disclosure[open]>.panel { padding-top: 16px; }
.event-card,.session-row { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.event-card.active,.session-row.active { background: var(--accent-soft); border-color: var(--accent); }
.event-card { flex-wrap: wrap; }
.event-card strong,.session-row strong { font-size: 12px; }
.event-card .meta { font-size: 10px; }
.event-row-actions { flex-wrap: wrap; }
.event-filter-row { flex-wrap: wrap; }
#view-attendees>.content-grid { display: block; }
.roster-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.roster-panel>.section-title { display: none; }
.roster-toolbar { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.search-field { display: flex; flex: 1; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 0 12px; border-radius: 6px; max-width: 450px; color: var(--muted); }
.search-field input { border: 0; background: transparent; min-width: 0; padding-left: 0; width: 100%; }
.roster-toolbar>select { width: 165px; }
#rosterSearchCount { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.roster-list { display: block; max-height: none; overflow-x: auto; }
.attendee-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.attendee-table th { background: var(--bg); color: var(--muted); font-size: 10px; font-weight: 600; padding: 12px 20px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.attendee-table td { padding: 17px 20px; border-bottom: 1px solid var(--line); }
.attendee-table tr:last-child td { border-bottom: 0; }
.attendee-table tbody tr:hover { background: var(--bg); }
.person-cell { display: flex; gap: 12px; align-items: center; min-width: 190px; }
.person-avatar { height: 34px; width: 34px; border-radius: 50%; background: var(--soft); color: var(--muted); display: grid; place-items: center; font-size: 10px; font-weight: 650; flex-shrink: 0; }
.person-cell strong,.person-cell small { display: block; }
.person-cell strong { font-size: 12px; font-weight: 600; }
.person-cell small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.attendance-dot { display: inline-block; height: 6px; width: 6px; border-radius: 50%; background: #adb4ba; margin-right: 7px; }
.attendance-dot.present { background: var(--accent); }
.empty-state { padding: 50px 24px; background: transparent; border: none; text-align: center; }
.empty-state strong { font-size: 16px; }
.empty-state span { font-size: 12px; }
.workspace-dialog { width: min(660px,calc(100% - 32px)); max-height: 85dvh; border: 1px solid var(--line); border-radius: 8px; padding: 26px; background: var(--panel); color: var(--ink); }
.workspace-dialog::backdrop { background: #101a22a6; }
.workspace-dialog>header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.workspace-dialog h2 { font-size: 21px; margin: 0; }
.workspace-dialog>.panel>.section-title { display: none; }
.workspace-dialog .event-create-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.workspace-dialog textarea { min-height: 200px; margin: 15px 0; font-size: 12px; }
.workspace-dialog .hint { margin-top: 14px; }
.station-runtime-header { background: transparent !important; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 18px; }
.station-runtime-header h3 { font-size: 17px; }
.station-actions { padding: 18px 0; margin: 0; gap: 10px; }
.station-actions button { font-size: 12px; }
.camera-stage { grid-template-columns: minmax(0,1.7fr) minmax(230px,1fr); gap: 24px; align-items: stretch; }
.camera-box { position: relative; aspect-ratio: 4/3; min-height: 0; background: #202827; border: 0; border-radius: 8px; overflow: hidden; }
.camera-box video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.camera-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: #d9e5df; pointer-events: none; padding: 20px; text-align: center; }
.camera-idle>.lucide { width: 65px; height: 65px; color: #91b6a4; margin-bottom: 15px; }
.camera-idle strong { font-size: 19px; font-weight: 500; }
.camera-idle>span { font-size: 11px; color: #c1cec7; }
.camera-idle .camera-privacy { margin-top: 22px; display: flex; gap: 6px; align-items: center; font-size: 10px; }
.camera-privacy .lucide { width: 14px; height: 14px; }
.is-streaming .camera-idle { display: none; }
.station-panel { border: 1px solid var(--line); background: var(--panel); padding: 20px; border-radius: 8px; }
.latest-result { background: var(--accent-soft); color: var(--ink); font-size: 13px; border: 0; padding: 16px; }
.station-disclosure { margin-top: 28px; border-top: 1px solid var(--line); padding: 14px 0; }
.station-disclosure[open]>.station-admin-panel { padding-top: 24px; }
.evaluation-disclosure { margin: 24px 0; padding: 18px 0; border-top: 1px solid var(--line); }
.evaluation-disclosure>summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; font-weight: 600; }
.evaluation-disclosure>summary .lucide { width: 14px; }
.evaluation-disclosure[open]>.panel { margin: 20px 0; }
#view-prototype>.content-grid { display: block; max-width: 680px; }
#view-prototype .settings-panel { display: grid; gap: 18px; }
.plan-summary { margin: 0; }
.plan-summary>div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.plan-summary dt { color: var(--muted); font-size: 13px; }
.plan-summary dd { margin: 0; font-weight: 600; }
.public-access-status { padding: 20px 0; }
.public-access-status p { font-size: 14px; color: var(--muted); }
.station-mode-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; margin-top: 20px; }
.station-mode-intro span { font-size: 11px; }
.live-metrics { gap: 0; background: var(--panel); border: 1px solid var(--line); padding: 18px; border-radius: 8px; }
.live-metrics .metric-card { border: 0; background: transparent; border-radius: 0; border-right: 1px solid var(--line); }
.monitor-grid { grid-template-columns: minmax(0,1fr); }
.monitor-grid>.panel { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.attendance-card,.attendee-card,.review-card { border-radius: 6px; box-shadow: none; background: var(--panel); }
.billing-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.billing-summary-panel { border-left: 1px solid var(--line); padding-left: 25px; }
.billing-offer-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.workspace-error { background: var(--panel); color: var(--bad); padding: 18px; border: 1px solid var(--bad); display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
#mobileNavToggle { display: none; }
.public-landing { min-height: 100dvh; }
.landing-hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: min(560px,calc(100% - 48px)); padding: 70px 0; gap: 32px; }
.landing-hero h1 { font-size: 38px; line-height: 1.2; }
.landing-copy { font-size: 17px; }
.landing-nav { padding: 22px 40px; }
.landing-nav strong { font-size: 22px; }
.signin-policies { display: flex; gap: 20px; font-size: 12px; }
.signin-policies a { color: var(--muted); }
body.station-link-mode .workspace-breadcrumb,body.station-link-mode #mobileNavToggle,body.station-link-mode .station-disclosure { display: none; }
@media (min-width: 1550px) { .workspace { padding-left: 60px; padding-right: 60px; } }
@media (max-width: 1150px) {
  .workspace { padding: 0 24px 28px; }
  .app-frame { grid-template-columns: 208px minmax(0,1fr); }
  .overview-metric { padding: 0 15px; }
  #view-events>.content-grid { grid-template-columns: minmax(0,1fr); }
  .pilot-checklist-panel { grid-column: 1; grid-row: auto; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pilot-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
  .camera-stage { grid-template-columns: minmax(0,1fr); }
  .station-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .app-frame { display: block; }
  .sidebar { display: none; position: fixed; top: 75px; left: 0; height: calc(100dvh - 75px); width: 240px; z-index: 30; box-shadow: 15px 0 40px #0002; }
  .navigation-open .sidebar { display: flex; }
  .workspace { padding: 0 18px 26px; }
  #mobileNavToggle { display: inline-flex; min-width: 38px; padding: 0 7px; border: 0; background: transparent; }
  #mobileNavToggle span { display: none; }
  .top-account-bar { min-height: 75px; gap: 10px; flex-wrap: nowrap; }
  .top-account-bar>div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .top-account-bar>.auth-card { flex-direction: row; gap: 7px; width: auto; }
  .account-menu summary>span:nth-child(2),.account-menu summary>.lucide { display: none; }
  .top-utility-bar>.icon-only[data-view] { display: none; }
  .workspace-breadcrumb { padding-top: 18px; }
  .page-header h2 { font-size: 24px; }
  .page-header { align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
  .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; }
  .overview-metric { padding: 17px; border-bottom: 1px solid var(--line); }
  .overview-metric:nth-child(2) { border-right: 0; }
  .overview-metric:nth-child(3),.overview-metric:nth-child(4) { border-bottom: 0; }
  .overview-metric>strong { font-size: 30px; margin-top: 8px; }
  .overview-metric>small { font-size: 10px; }
  .pilot-checklist { display: block; }
  .event-home-panel { padding: 18px; }
  .event-home-panel .section-title { flex-wrap: wrap; }
  .event-home-panel h3 { font-size: 18px; }
  .roster-toolbar { flex-wrap: wrap; padding: 14px; }
  .search-field { max-width: none; flex-basis: 100%; }
  .roster-toolbar>select { flex: 1; width: auto; }
  .attendee-table th,.attendee-table td { padding: 13px 14px; }
  .attendee-table { min-width: 620px; }
  .station-panel { display: block; }
  .station-panel>*+* { margin-top: 16px; }
  .camera-box { aspect-ratio: 1; }
  .camera-idle strong { font-size: 17px; }
  .station-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .station-form-grid,.station-mode-panel,.manual-checkin-form,.billing-grid { grid-template-columns: minmax(0,1fr); }
  .billing-summary-panel { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .live-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .access-user-card { align-items: flex-start; }
  .access-user-actions { flex-wrap: wrap; }
  .landing-nav { padding: 20px; }
  .landing-nav #landingSignInBtn { display: none; }
  .landing-hero h1 { font-size: 32px; }
  .workspace-dialog { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }