:root {
  --bg: #07172d;
  --bg-2: #0b1f3b;
  --panel: #0f2748;
  --panel-2: #123054;
  --panel-soft: #eef5fb;
  --text: #f7fbff;
  --muted: #b8c8d9;
  --line: rgba(255,255,255,.12);
  --accent: #27a7e7;
  --accent-2: #1788c3;
  --success: #66d19e;
  --warning: #f2c66d;
  --danger: #ff8585;
  --ink: #122033;
  --shadow: 0 18px 55px rgba(0,0,0,.24);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 12%, rgba(39,167,231,.14), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(23,136,195,.12), transparent 32%),
    linear-gradient(180deg, #061428 0%, #071b34 100%);
  line-height: 1.55;
}

button, input, textarea, a { font: inherit; }

button, .download-btn {
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

button:not(.ghost), .download-btn {
  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px rgba(23,136,195,.24);
}

button:hover:not(:disabled), .download-btn:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none;
}

button.ghost {
  color: #d7e5f2;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
}

button.ghost:hover { background: rgba(255,255,255,.06); }

a { color: #79cfff; }
a:hover { color: #a9e1ff; }

.shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 46px 0 34px;
}

.masthead {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 34px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: .76rem;
  letter-spacing: .14em;
  font-weight: 800;
  color: #78c9f1;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

h2 {
  margin-bottom: 8px;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.15;
}

h3 { margin-bottom: 8px; }

.lede {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.muted { color: var(--muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #dbe8f4;
  background: rgba(255,255,255,.05);
  white-space: nowrap;
  font-size: .88rem;
}

.status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(102,209,158,.12);
}

.sign-in-panel,
.tenant-selector,
.document-setup,
.workspace {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(19,48,84,.96), rgba(11,31,59,.96));
  box-shadow: var(--shadow);
}

.sign-in-panel,
.tenant-selector,
.document-setup {
  padding: 28px;
}

.sign-in-panel {
  width: min(560px, 100%);
}

.sign-in-panel form {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

label {
  font-size: .9rem;
  font-weight: 700;
  color: #e7f0f8;
}

input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: #071a31;
  color: #fff;
  outline: none;
}

input[type="email"],
input[type="password"] {
  min-height: 46px;
  padding: 10px 12px;
}

textarea {
  resize: vertical;
  min-height: 150px;
  padding: 14px;
  line-height: 1.55;
}

input:focus, textarea:focus {
  border-color: rgba(39,167,231,.72);
  box-shadow: 0 0 0 3px rgba(39,167,231,.12);
}

.account-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.account-bar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.account-bar span {
  color: var(--muted);
  font-size: .9rem;
}

.account-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chooser {
  margin-top: 10px;
}

.chooser > h2 {
  margin-bottom: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.sim-card {
  position: relative;
  min-height: 210px;
  padding: 22px;
  text-align: left;
  color: #fff;
  background: linear-gradient(160deg, #12345c 0%, #0c2444 100%) !important;
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: none !important;
}

.sim-card:hover:not(:disabled) {
  border-color: rgba(87,196,247,.7);
  background: linear-gradient(160deg, #16406e 0%, #0d2a4e 100%) !important;
}

.sim-card .num {
  display: block;
  margin-bottom: 24px;
  color: #62c3ef;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.sim-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.04rem;
}

.sim-card small {
  display: block;
  color: #b6c8d9;
  line-height: 1.45;
}

.sim-card.locked {
  opacity: .43;
  filter: grayscale(.25);
}

.document-setup {
  margin-top: 18px;
}

.document-head,
.workspace-head,
.report-downloads {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
}

.upload-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  margin-top: 24px;
}

.upload-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 170px;
  padding: 24px;
  border: 1px dashed rgba(121,207,255,.52);
  border-radius: 14px;
  background: rgba(3,18,35,.34);
  cursor: pointer;
}

.upload-box input {
  margin-top: 10px;
}

.upload-kicker {
  color: #71c8f2;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.upload-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.upload-actions p {
  color: var(--muted);
  margin-bottom: 0;
}

.workspace {
  margin-top: 18px;
  padding: 30px;
}

.workspace-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.document-receipt {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(102,209,158,.25);
  border-radius: 10px;
  background: rgba(102,209,158,.08);
  color: #cdeede;
}

.progress {
  display: grid;
  gap: 9px;
  margin: 22px 0;
}

.progress > div:first-child {
  color: #bdd0e0;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

#progressBar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #23a0dc, #5bc8f5);
  transition: width .25s ease;
}

.message-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5,20,38,.62);
  color: #f2f7fb;
}

.response-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.response-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.response-actions span {
  color: var(--muted);
  font-size: .88rem;
}

.report-downloads {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(87,196,247,.2);
  border-radius: 14px;
  background: rgba(87,196,247,.06);
}

.report-download-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.download-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
}

.tenant-choices {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.tenant-choice {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: #0b2442 !important;
  border: 1px solid var(--line);
  box-shadow: none !important;
}

.error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,133,133,.35);
  border-radius: 10px;
  background: rgba(255,133,133,.09);
  color: #ffd0d0;
}

/* P18 readiness */
.p18-readiness {
  margin-top: 18px !important;
  border: 1px solid rgba(92,197,244,.34) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  background: linear-gradient(180deg, rgba(15,50,83,.95), rgba(9,31,56,.95)) !important;
  color: var(--text);
}

.p18-readiness-head {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.p18-readiness-head h3 {
  margin: 3px 0 6px;
  font-size: 1.45rem;
}

.p18-readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.p18-readiness-step {
  min-height: 170px;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 13px !important;
  background: rgba(4,20,38,.62) !important;
  color: var(--text);
}

.p18-readiness-step > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
}

.p18-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.p18-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08) !important;
  color: #dceaf5;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.p18-status-badge.ready {
  background: rgba(102,209,158,.14) !important;
  color: #b9efd3;
}

.p18-status-badge.fallback {
  background: rgba(242,198,109,.14) !important;
  color: #ffe1a4;
}

.p18-status-badge.failed {
  background: rgba(255,133,133,.14) !important;
  color: #ffc0c0;
}

/* This rule is essential. It keeps inactive MSP panels from appearing simultaneously. */
.hidden { display: none !important; }

body > p {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: .88rem;
}

body > p a {
  text-decoration: none;
}

@media (max-width: 1040px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 24px, 1180px);
    padding-top: 24px;
  }

  .masthead,
  .account-bar,
  .document-head,
  .workspace-head,
  .report-downloads {
    flex-direction: column;
  }

  .grid,
  .upload-panel,
  .p18-readiness-grid {
    grid-template-columns: 1fr;
  }

  .sim-card { min-height: 160px; }

  .response-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .response-actions button { width: 100%; }

  .workspace,
  .sign-in-panel,
  .tenant-selector,
  .document-setup {
    padding: 20px;
  }
}


/* P18 Increment 2 — per-question response mode */
.response-mode-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(92,197,244,.28);
  border-radius: 14px;
  background: rgba(7,28,50,.62);
}

.response-mode-head,
.spoken-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.response-mode-head h3,
.spoken-head h3 {
  margin: 3px 0 0;
}

button.compact {
  min-height: 38px;
  padding: 8px 13px;
}

.response-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.response-mode-option {
  min-height: 112px;
  padding: 18px;
  text-align: left;
  background: rgba(4,20,38,.72) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

.response-mode-option.selected {
  border-color: rgba(84,199,247,.82) !important;
  background: rgba(17,69,108,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(84,199,247,.22) !important;
}

.mode-title {
  display: block;
  margin-bottom: 7px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.mode-copy {
  display: block;
  color: #b9cbdc;
  font-size: .9rem;
  line-height: 1.45;
}

.typed-response-panel,
.spoken-response-panel {
  display: grid;
  gap: 10px;
}

.spoken-response-panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(4,20,38,.62);
}

.recording-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #dceaf5;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.recording-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.recording-playback {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.recording-playback audio {
  width: 100%;
}

.increment-notice {
  padding: 12px 14px;
  border: 1px solid rgba(242,198,109,.28);
  border-radius: 10px;
  background: rgba(242,198,109,.08);
  color: #ffe2a9;
}

@media (max-width: 760px) {
  .response-mode-head,
  .spoken-head {
    flex-direction: column;
  }

  .response-mode-options {
    grid-template-columns: 1fr;
  }
}


/* P18 Increment 3 — STT transcript review */
.transcript-panel {
  display: grid;
  gap: 11px;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(92,197,244,.30);
  border-radius: 14px;
  background: rgba(8,32,57,.74);
}
.transcript-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.transcript-head h3 { margin: 3px 0 6px; }
.transcript-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #dceaf5;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.transcript-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .transcript-head { flex-direction: column; }
}


/* P18 Increment 4 — Save & Continue Later */
.saved-session-panel {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid rgba(102,209,158,.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(19,65,72,.72), rgba(8,40,52,.72));
}
.saved-session-panel h3 { margin: 3px 0 6px; }
.saved-session-panel p:last-child { margin-bottom: 0; }
.saved-session-actions,
.workspace-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.saved-session-actions { flex-shrink: 0; }

@media (max-width: 760px) {
  .saved-session-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .saved-session-actions button,
  .workspace-actions button {
    width: 100%;
  }
}


/* P19 Increment 1 — participant voice presentation */
.voice-action-cluster {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auto-voice-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #d7e5f2;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
}

.auto-voice-toggle input {
  accent-color: #27a7e7;
}

@media (max-width: 760px) {
  .voice-action-cluster {
    width: 100%;
    justify-content: stretch;
  }

  .voice-action-cluster button,
  .auto-voice-toggle {
    width: 100%;
  }

  .auto-voice-toggle {
    justify-content: center;
  }
}


/* P19 Increment 5 - readable paragraph formatting inside simulation text */
#message .simulation-message-paragraph {
  margin: 0 0 1rem 0;
  white-space: pre-line;
  line-height: 1.65;
}

#message .simulation-message-paragraph:last-child {
  margin-bottom: 0;
}

#message .simulation-message-list {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
  line-height: 1.6;
}

#message .simulation-message-list li {
  margin: 0 0 .45rem 0;
}