/* === Base === */
:root {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  color: #172033;
  background: #eef2f6;
  line-height: 1.5;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-width: 20rem;
}
button,
textarea {
  font: inherit;
  min-height: 2.75rem;
}
button {
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  border: 1px solid #526174;
  border-radius: 0.3rem;
  background: #fff;
}
button:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #e59b00;
  outline-offset: 3px;
}
.top {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.6rem 1rem;
  color: #fff;
  background: #17233b;
}
.top span {
  flex: 1;
}
/* Sized by height so the logo tracks the bar, not its own pixel dimensions. */
.brand-logo {
  flex: none;
  width: auto;
  height: 2.1rem;
}
.top button {
  color: #fff;
  background: #315373;
}
.stage {
  width: min(72rem, calc(100% - 2rem));
  margin: 1rem auto;
}
.card,
.scene-head {
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #bdc7d2;
  border-radius: 0.6rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem #17233b18;
}
.timeline {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.timeline::before {
  content: "Timeline: ";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.outlook {
  display: grid;
  grid-template-columns: 11rem 19rem minmax(0, 1fr);
  min-height: 34rem;
  border: 1px solid #aab5c2;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem #17233b18;
}
.folders,
.message-list,
.reading {
  min-width: 0;
  padding: 1rem;
}
.folders {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #f2f5f8;
}
.folders button {
  text-align: left;
  border: 0;
  background: transparent;
}
.message-list {
  border-right: 1px solid #ccd4dc;
}
.message {
  display: grid;
  width: 100%;
  gap: 0.2rem;
  text-align: left;
  border-left: 4px solid #1769aa;
}
.message span,
.message small,
.history span {
  display: block;
}
.history p {
  padding: 0.75rem;
  border-bottom: 1px solid #d9dfe5;
}
.history {
  color: #465568;
}
.reading {
  padding: 1.4rem;
}
.simulation {
  font-weight: 750;
  color: #714500;
}
.attachment,
.fake-file,
.evidence {
  margin: 1.2rem 0;
  padding: 1rem;
  border: 2px solid #1769aa;
  background: #edf7ff;
}
.attachment span,
.fake-file span {
  display: block;
}
.evidence button {
  margin: 0.3rem;
}
.tray {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(22rem, calc(100% - 2rem));
  padding: 0.8rem 1rem;
  border: 2px solid #755000;
  border-radius: 0.5rem;
  background: #fff8dc;
  box-shadow: 0 0.5rem 1.5rem #0003;
}
.tray h2 {
  margin: 0;
  font-size: 1rem;
}
.tray ul {
  margin: 0.4rem 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}
fieldset {
  border: 0;
  padding: 0;
}
legend {
  font-weight: 800;
  margin-bottom: 0.5rem;
}
.mfa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.composer {
  padding-bottom: 8rem;
}
.composer label {
  display: block;
  margin-top: 1rem;
  font-weight: 750;
}
.composer textarea {
  display: block;
  width: 100%;
  margin: 0.4rem 0;
  padding: 0.7rem;
}
.composer [role="group"] {
  display: grid;
  gap: 0.4rem;
  margin: 0.7rem 0;
}
.composer [aria-pressed="true"] {
  border-width: 3px;
  background: #e6f2fb;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
dialog {
  width: min(32rem, calc(100% - 2rem));
  border: 0;
  border-radius: 0.6rem;
  padding: 1.5rem;
  box-shadow: 0 1rem 3rem #0006;
}
dialog::backdrop {
  background: #101827aa;
}
@media (max-width: 47.99rem) {
  .top {
    gap: 0.6rem;
    font-size: 0.82rem;
  }
  .brand-logo {
    height: 1.7rem;
  }
  .stage {
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
  }
  .outlook {
    display: block;
    min-height: 0;
  }
  .message-list {
    border: 0;
  }
  .reading {
    padding: 0.9rem;
  }
  .tray {
    position: static;
    width: calc(100% - 1rem);
    margin: 0.5rem;
  }
  .composer {
    padding-bottom: 1rem;
  }
  .composer #complete {
    position: sticky;
    bottom: 0.25rem;
    width: 100%;
    background: #175c91;
    color: #fff;
  }
  .scene-head {
    padding: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .timeline,
  .evidence,
  .tray {
    border: 2px solid CanvasText;
  }
  .newest {
    outline: 2px solid Highlight;
  }
}

/* === Simulated page-load pause between stages ===
   Covers the whole viewport, above the X-Ray floater (z-index 50/51), so the
   replay reads as a browser moving between pages. Nothing is fetched; the
   global prefers-reduced-motion rule already stops the spinner. */
#stage-transition {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #334155;
  background: #e5e7eb;
}
#stage-transition[hidden] {
  display: none !important;
}
.browser-transition {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  text-align: center;
}
.browser-transition > span:last-child {
  color: #64748b;
  font-size: 0.85rem;
}
.transition-spinner {
  width: 2rem;
  height: 2rem;
  border: 0.22rem solid #c1c7d0;
  border-top-color: #64748b;
  border-radius: 50%;
  animation: transition-spin 0.7s linear infinite;
}
@keyframes transition-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === Progress and coach === */
.progress {
  overflow-x: auto;
  padding: 0.45rem 1rem;
  background: #fff;
  border-bottom: 1px solid #bdc7d2;
}
.progress ol {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progress li {
  border-bottom: 3px solid transparent;
  font-size: 0.82rem;
}
.progress a {
  display: block;
  padding: 0.25rem 0.55rem;
  color: inherit;
  text-decoration: none;
}
.progress a[aria-disabled="true"] {
  cursor: not-allowed;
  color: #7a8694;
}
.progress li[aria-current="step"] {
  border-color: #1769aa;
  font-weight: 800;
}
.progress li[data-complete="true"]::before {
  content: "✓ ";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.interruption-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  padding: 0;
  list-style: none;
}
.interruption-map li {
  padding: 0.6rem;
  border: 1px solid #aab5c2;
}
.interruption-map li[data-identified="true"] {
  border: 3px solid #1769aa;
  background: #edf7ff;
}
.coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.privacy {
  font-size: 0.85rem;
  color: #465568;
}
#coach-reply {
  margin: 0.7rem 0;
  padding: 0.6rem;
  background: #edf7ff;
}
#coach-reply:empty {
  display: none;
}
@media (max-width: 47.99rem) {
  .progress {
    padding: 0.35rem;
  }
  .progress ol {
    justify-content: flex-start;
  }
  .interruption-map {
    grid-template-columns: 1fr 1fr;
  }
  #coach {
    max-height: calc(100dvh - 1rem);
    overflow: auto;
  }
}

/* === Layout: email, files, sign-in, MFA, workbook === */

.mobile-mail-header,
.mobile-reading-bar,
.mobile-mail-nav {
  display: none;
}
.message-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.message-main > strong,
.history p strong,
.message-meta-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-avatar,
.sender-avatar {
  display: none;
}
.intro-briefing {
  width: min(68ch, calc(100% - 2rem));
  height: calc(100dvh - 7.5rem);
  margin: 1rem auto 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.briefing-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 1rem;
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
  color: #24486f;
}
.briefing-progress > span {
  color: #536b86;
}
.briefing-progress ol {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.briefing-progress li {
  height: 0.38rem;
  border-radius: 0.3rem;
  background: #d3dbe5;
}
.briefing-progress li[data-state="current"] {
  background: #17648d;
}
.briefing-progress li[data-state="complete"] {
  background: #5f9271;
}
.briefing-screen[hidden] {
  display: none !important;
}
.briefing-screen:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
#announce {
  margin: 0;
}
.module-intro h1 {
  margin: 0.15rem 0 0.6rem;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}
.intro-lead {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.5;
}
.learning-goal {
  margin: clamp(0.75rem, 2vw, 1.5rem) 0;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  border-left: 0.4rem solid #1769aa;
  background: #e8f4fb;
}
.learning-goal h2 {
  margin: 0.25rem 0;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: #124a70;
}
.learning-goal p:last-child {
  margin: 0.25rem 0;
  font-size: 1rem;
}
.briefing-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: clamp(0.75rem, 2vw, 1.25rem) 0;
}
.briefing-principles section,
.rehearsal-card,
.scenario-intro-card {
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid #bdc7d2;
  border-radius: 0.45rem;
  background: #f8fafc;
}
.briefing-principles p {
  margin: 0.35rem 0 0;
  color: #465568;
}
.briefing-check {
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 0;
  padding: 0;
  border: 0;
}
.briefing-check legend {
  margin-bottom: 0.6rem;
  font-weight: 800;
}
.briefing-check label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 2.5rem;
  margin: 0.3rem 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid #8793a2;
  border-radius: 0.35rem;
}
.briefing-check label:has(input:checked) {
  border-color: #17648d;
  background: #edf7ff;
}
.briefing-check input {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  min-height: 1.2rem;
  margin-top: 0.15rem;
}
.briefing-feedback {
  min-height: 1.5rem;
  color: #173c56;
}
.briefing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: clamp(0.5rem, 1.5vw, 1rem);
}
.briefing-actions button,
.rehearsal-card > button {
  font-weight: 750;
}
.briefing-actions [data-briefing-next],
.briefing-actions [data-go],
#briefing-discuss {
  border-color: #175c91;
  color: #fff;
  background: #175c91;
}
.briefing-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.rehearsal-card label {
  display: block;
  margin-top: 0.75rem;
  font-weight: 700;
}
.rehearsal-card textarea {
  display: block;
  width: 100%;
  min-height: 5rem;
  margin: 0.45rem 0;
  padding: 0.7rem;
  resize: vertical;
}
.rehearsal-card #briefing-rehearsal-status {
  min-height: 1.4rem;
  font-size: 0.86rem;
}
.briefing-ai-reply {
  position: relative;
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid #79a7c2;
  border-radius: 0.45rem;
  color: #173c56;
  background: #fff;
}
.briefing-ai-reply::before {
  content: "";
  position: absolute;
  top: -0.38rem;
  left: 1.2rem;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 1px solid #79a7c2;
  border-left: 1px solid #79a7c2;
  background: #fff;
  transform: rotate(45deg);
}
.briefing-ai-reply strong {
  color: #17648d;
}
.briefing-ai-reply p {
  margin: 0.3rem 0 0;
}
.briefing-ai-reply .briefing-quality[hidden] {
  display: none;
}
.briefing-ai-reply .briefing-quality {
  display: inline-block;
  margin: 0.45rem 0 0.2rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  background: #f0f2f5;
  color: #6b7889;
}
.briefing-quality.quality-unserious {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}
.briefing-quality.quality-incomplete {
  border: 1px solid #fcd9a8;
  background: #fff7ed;
  color: #92400e;
}
.briefing-quality.quality-good {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}
.briefing-quality.quality-excellent {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
}
.scenario-intro-card p {
  font-size: 1.05rem;
  line-height: 1.5;
}

#email .scene-head {
  width: 100vw;
  margin: 0 0 2rem calc(50% - 50vw);
  padding: 1.4rem max(1rem, calc((100vw - 72rem) / 2));
  border: 0;
  border-block: 1px solid #b9c9d8;
  border-radius: 0;
  background: #e7eef5;
  box-shadow: none;
}
#email .scene-head > div {
  width: min(72rem, 100%);
  margin: auto;
}
#email .scene-head h1 {
  margin: 0.15rem 0 0.3rem;
  font-size: 1.55rem;
}
#email .scene-head p:last-child {
  margin: 0;
  color: #465568;
}
.outlook {
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 0.35rem;
}
.office-title {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.15rem;
  padding: 0.45rem 0.8rem;
  color: #fff;
  background: #0f6cbd;
}
.waffle {
  font-size: 1.45rem;
}
.fake-search {
  width: min(25rem, 42%);
  margin: auto;
  padding: 0.38rem 0.8rem 0.38rem 2rem;
  border-radius: 0.2rem;
  color: #475569;
  background: #fff;
}
.training-chip {
  padding: 0.15rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.folders {
  grid-row: 2;
  gap: 0.15rem;
  padding: 0.85rem 0.65rem;
}
.folders span {
  padding: 0.5rem 0.6rem;
}
.folders .new-mail {
  margin: 0.25rem 0 0.6rem;
  border-radius: 0.25rem;
  color: #fff;
  background: #0f6cbd;
  font-weight: 700;
  text-align: center;
}
.folders .selected {
  border-left: 0.2rem solid #0f6cbd;
  color: #075985;
  background: #deecf9;
  font-weight: 700;
}
.folders .selected b {
  float: right;
}
.message-list,
.reading {
  grid-row: 2;
}
.message-list {
  padding: 0;
  background: #fff;
}
.mail-list-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid #d9dfe5;
}
.mail-list-toolbar h2 {
  grid-column: 1/-1;
  margin: 0;
  font-size: 1.15rem;
}
.mail-list-toolbar span {
  font-size: 0.82rem;
}
.mail-list-toolbar span strong {
  padding-bottom: 0.45rem;
  border-bottom: 2px solid #0f6cbd;
  color: #0f548c;
}
.mail-list-toolbar small {
  color: #62676c;
}
.message {
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: start;
  padding: 0.8rem 0.65rem;
  border: 0;
  border-bottom: 1px solid #e2e6ea;
  border-left: 4px solid #0f6cbd;
  border-radius: 0;
}
.message .message-avatar {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  color: #fff;
  background: #ca5010;
  font-size: 0.75rem;
}
.message {
  border-left-color: transparent;
}
.message[aria-current="true"] {
  border-left-color: #0f6cbd;
  background: #eff6fc;
}
[data-mail="maintenance"] .message-avatar,
[data-mail="maintenance"] .sender-avatar {
  background: #8764b8;
}
.message-time {
  font-size: 0.75rem;
  color: #0f548c;
}
.desktop-mail-toolbar {
  display: flex;
  gap: 1.25rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #d9dfe5;
  color: #4f5c69;
  font-size: 0.84rem;
}
.reading-content {
  padding: 1.2rem 1.4rem;
}
.message-meta {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}
.message-meta .sender-avatar {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: #fff;
  background: #ca5010;
  font-size: 0.78rem;
}
.message-meta-copy {
  display: grid;
  min-width: 0;
}
.message-meta-copy span {
  color: #62676c;
  font-size: 0.8rem;
}
.message-meta time {
  color: #62676c;
  font-size: 0.78rem;
}

/* OneDrive sharing notification, reproduced from a captured ODSP notify template */
.share-notice {
  margin: 1.15rem 0 0;
  padding: 1.5rem 0.5rem;
  background: #f2f2f2;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #323130;
}
.share-card {
  max-width: 40rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #c8c8c8;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 3px 6px #0000000d;
  text-align: center;
}
.share-hero {
  display: block;
  padding: 1.75rem 1.75rem 0;
}
.share-hero svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
}
.share-title {
  max-width: 25rem;
  margin: 1.25rem auto 1.75rem;
  padding: 0 1.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
}
.share-panel {
  padding: 1.75rem 1.25rem 1.5rem;
  border-top: 1px solid #dedede;
  background: #f8f8f8;
}
.share-note {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.45;
}
.share-item {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  max-width: 100%;
  border: 1px solid #d2d2d2;
  background: #fff;
  text-align: left;
}
.share-item-icon {
  padding: 1.25rem 0.25rem 1.25rem 1.25rem;
}
.share-item-icon svg {
  display: block;
  width: 2rem;
  height: 2rem;
}
.share-item-name {
  padding: 1.25rem 1.25rem 1.25rem 0.25rem;
  font-size: 1rem;
  word-break: break-all;
}
.share-permission {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin: 1.4rem 0;
  font-size: 0.75rem;
}
.share-permission svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: #0b6a0b;
  stroke-width: 1.3;
}
.share-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}
.share-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ms-wordmark {
  color: #737373;
  font-size: 1rem;
  font-weight: 600;
}
.share-privacy {
  color: #605e5c;
  font-size: 0.75rem;
}

#files .scene-head,
#signin .scene-head,
#mfa .scene-head,
#workbook .scene-head {
  width: 100vw;
  margin: 0 0 2rem calc(50% - 50vw);
  padding: 1.4rem max(1rem, calc((100vw - 72rem) / 2));
  border: 0;
  border-block: 1px solid #b9c9d8;
  border-radius: 0;
  background: #e7eef5;
  box-shadow: none;
}
#files .scene-head > div,
#signin .scene-head > div,
#mfa .scene-head > div,
#workbook .scene-head > div {
  width: min(72rem, 100%);
  margin: auto;
}
#files .scene-head h1,
#signin .scene-head h1,
#mfa .scene-head h1,
#workbook .scene-head h1 {
  margin: 0.15rem 0 0.3rem;
  font-size: 1.55rem;
}
#files .scene-head p:last-child,
#signin .scene-head p:last-child,
#mfa .scene-head p:last-child,
#workbook .scene-head p:last-child {
  margin: 0;
  color: #465568;
}
.onedrive-shell {
  overflow: hidden;
  border: 1px solid #c7c7c7;
  border-radius: 0.4rem;
  background: #fafafa;
  box-shadow: 0 0.5rem 1.5rem #17233b18;
}
.onedrive-shell .office-title {
  color: #172033;
  background: #f7f7f7;
}
.onedrive-shell .fake-search {
  border: 0;
  border-radius: 1.5rem;
  box-shadow: 0 0.1rem 0.3rem #0003;
}
.drive-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  min-height: 28rem;
}
.drive-nav {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 1rem 0.8rem;
  background: #f7f7f7;
}
.drive-nav span {
  padding: 0.55rem 0.65rem;
}
.drive-nav strong {
  margin: 0.8rem 0.65rem 0.35rem;
}
.drive-nav .create-upload {
  margin-bottom: 0.5rem;
  border-radius: 1.4rem;
  color: #fff;
  background: #294fc5;
  font-weight: 750;
  text-align: center;
}
.drive-nav .selected {
  border-left: 0.2rem solid #0f6cbd;
  background: #e8f1fb;
  font-weight: 700;
}
.drive-content {
  min-width: 0;
  padding: 1.6rem;
}
.drive-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.drive-tabs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.drive-tabs > * {
  padding: 0.5rem 0.4rem;
  white-space: nowrap;
}
.drive-tabs > strong {
  border-bottom: 0.18rem solid #0f6cbd;
}
.filter-pill {
  border: 1px solid #c9c9c9;
  border-radius: 1.2rem;
  padding-inline: 0.8rem !important;
}
.filter-pill.is-active {
  background: #e8f1fb;
}
.name-filter {
  min-width: 14rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid #c9c9c9;
  border-radius: 0.2rem;
  color: #62676c;
}
.file-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.file-table th,
.file-table td {
  padding: 0.8rem;
  border-bottom: 1px solid #dce2e8;
  text-align: left;
}
.file-table td:first-child {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.shortcut-icon {
  flex: 0 0 2rem;
  width: 2rem;
}
.file-identity {
  display: grid;
}
.file-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.filename {
  display: inline-block;
  overflow-wrap: anywhere;
}
.file-identity small {
  color: #62676c;
}
.drive-content > .evidence {
  margin-top: 1.5rem;
}
.signin-surface {
  display: grid;
  place-items: center;
  min-height: 31rem;
  padding: 2.5rem;
  background: #f2f2f2;
}
.microsoft-shell {
  width: min(32rem, 100%);
  padding: 2.25rem;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 0.5rem 1.8rem #0002;
}
.signin-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.signin-brand .training-chip {
  margin-left: auto;
  color: #6b4d00;
}
.ms-logo {
  display: inline-grid;
  grid-template-columns: repeat(2, 0.65rem);
  gap: 2px;
}
.ms-logo i {
  width: 0.65rem;
  height: 0.65rem;
  background: #f25022;
}
.ms-logo i:nth-child(2) {
  background: #7fba00;
}
.ms-logo i:nth-child(3) {
  background: #00a4ef;
}
.ms-logo i:nth-child(4) {
  background: #ffb900;
}
.microsoft-shell h2 {
  margin: 1.75rem 0 0.2rem;
  font-size: 1.75rem;
}
.signin-subtitle {
  margin-top: 0;
  color: #525252;
}
.signin-safe {
  padding: 0.7rem;
  background: #fff4ce;
  font-size: 0.86rem;
}
.microsoft-shell .evidence {
  margin: 1.4rem 0 0;
  border-width: 1px;
  border-left-width: 4px;
}
.microsoft-shell .evidence h3 {
  margin-top: 0;
}

.mfa-stage-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 34rem) minmax(19rem, 22rem);
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: 1rem;
}
.mfa-scenario-context {
  max-width: 59rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  border-left: 0.2rem solid #64748b;
  color: #334155;
  background: #f1f5f9;
}
.number-match-screen {
  padding: 2rem;
  border: 1px solid #d0d6de;
  background: #fff;
  box-shadow: 0 0.7rem 2rem #17233b24;
}
.number-match-screen > div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.number-match-screen .training-chip {
  margin-left: auto;
  color: #6b4d00;
}
.number-match-screen h2 {
  margin-top: 2rem;
  font-size: 1.65rem;
}
.matching-number {
  display: block;
  margin: 1rem 0;
  color: #1f2937;
  font-size: 6rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.phone-simulator {
  position: relative;
  width: min(100%, 22rem);
  min-height: 36rem;
  overflow: hidden;
  border: 0.5rem solid #171a20;
  border-radius: 2.4rem;
  color: #1f2937;
  background: #fff;
  box-shadow: 0 1.5rem 3.5rem #0f172a55;
}
.phone-hardware {
  position: absolute;
  z-index: 3;
  top: 0.3rem;
  left: 50%;
  width: 6.2rem;
  height: 1.3rem;
  transform: translateX(-50%);
  border-radius: 1rem;
  background: #171a20;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 750;
}
.authenticator-header {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  min-height: 3rem;
  color: #fff;
  background: #0f6cbd;
  text-align: center;
}
.authenticator-account {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  margin: 0.8rem;
  padding: 0.7rem;
  border-bottom: 1px solid #d7dde5;
}
.authenticator-account small,
.authenticator-account b {
  display: block;
}
.authenticator-account b {
  color: #2563eb;
}
.account-avatar {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: #fff;
  background: #2563eb;
  font-weight: 800;
}
.authenticator-scrim {
  position: absolute;
  inset: 4rem 0 0;
  display: grid;
  place-items: center;
  padding: 0.8rem;
  background: #0f172a8c;
}
.phone-content {
  position: relative;
  width: 100%;
  padding: 1rem;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem #0f172a4d;
}
.phone-close {
  position: absolute;
  top: 0.2rem;
  right: 0.25rem;
  width: 2.4rem;
  border: 0;
  color: #64748b;
  background: transparent;
  font-size: 1.3rem;
}
.phone-content h2 {
  margin: 0.6rem 0 0.2rem;
  font-size: 1.2rem;
}
.account-label {
  margin: 0 0 0.7rem;
  color: #334155;
  font-size: 0.8rem;
}
.number-instruction {
  margin: 0.55rem 0 0.3rem;
  font-size: 0.82rem;
}
.approval-context {
  margin: 0.7rem 0;
  font-size: 0.8rem;
}
.approval-context div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
}
.approval-context dt {
  font-weight: 750;
}
.approval-context dd {
  margin: 0;
}
.phone-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0.8rem -1rem 0;
  border-top: 1px solid #d7dde5;
}
.phone-actions button {
  min-height: 3rem;
  border: 0;
  background: #fff;
}
.phone-deny {
  color: #c4312f;
}
.phone-approve {
  border-left: 1px solid #d7dde5 !important;
  color: #9ca3af;
}
.phone-home {
  position: absolute;
  bottom: 0.45rem;
  left: 50%;
  width: 6rem;
  height: 0.28rem;
  transform: translateX(-50%);
  border-radius: 0.3rem;
  background: #1f2937;
}
.excel-app {
  overflow: hidden;
  border: 1px solid #adb8c6;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem #17233b18;
}
.excel-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  color: #fff;
  background: #107c41;
}
.excel-title span:nth-child(2) {
  margin: auto;
}
.window-controls {
  font-size: 1rem;
}
.excel-tabs {
  padding: 0.5rem 1rem;
  color: #fff;
  background: #185c37;
}
.excel-ribbon {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0.4rem 1rem;
}
.excel-ribbon > span {
  display: grid;
  place-items: center;
  min-width: 6rem;
  padding: 0.25rem 0.8rem;
  border-right: 1px solid #c8d0d8;
  text-align: center;
}
.excel-ribbon small {
  display: block;
  color: #526174;
  font-size: 0.68rem;
}
.formula-bar,
.sheet-tabs {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #b9c2ca;
  background: #f8fafc;
}
.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}
.excel-app table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.excel-app th,
.excel-app td {
  min-width: 7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #bec7d1;
  text-align: left;
}
.excel-app th {
  background: #e9eef3;
}
.excel-app caption {
  padding: 0.5rem;
  text-align: left;
  font-weight: 700;
}
.sheet-tabs {
  border-top: 1px solid #b9c2ca;
  border-bottom: 0;
}
.stage-action {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 0;
}
.stage-action button {
  color: #fff;
  background: #175c91;
  font-weight: 700;
}

@media (max-height: 48rem) {
  .intro-briefing {
    padding: 1rem;
  }
  .briefing-progress {
    margin-bottom: 0.75rem;
  }
  .module-intro h1 {
    font-size: 1.4rem;
    margin: 0.1rem 0 0.35rem;
  }
  .intro-lead {
    font-size: 1rem;
    line-height: 1.4;
  }
  .learning-goal {
    margin: 0.5rem 0;
    padding: 0.6rem 0.85rem;
  }
  .learning-goal h2 {
    font-size: 1.05rem;
    margin: 0.15rem 0;
  }
  .learning-goal p:last-child {
    font-size: 0.95rem;
  }
  .briefing-principles {
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  .briefing-principles section {
    padding: 0.6rem;
  }
  .briefing-check {
    margin: 0.5rem 0 0;
  }
  .briefing-check label {
    min-height: 2.25rem;
    padding: 0.5rem 0.6rem;
    margin: 0.25rem 0;
  }
  .briefing-actions {
    padding-top: 0.4rem;
  }
  .briefing-actions button {
    min-height: 2.5rem;
  }
  .rehearsal-card {
    padding: 0.75rem;
  }
  .rehearsal-card textarea {
    min-height: 3.5rem;
  }
  .scenario-intro-card {
    padding: 0.75rem;
  }
  .scenario-intro-card p {
    font-size: 0.95rem;
  }
}

@media (max-width: 47.99rem) {
  .intro-briefing {
    width: calc(100% - 1rem);
    min-height: auto;
    height: auto;
    margin: 1rem auto;
    padding: 1rem;
    display: block;
    overflow: visible;
  }
  .briefing-screen:not([hidden]) {
    flex: none;
    min-height: 0;
    overflow: visible;
    display: block;
  }
  .briefing-progress {
    margin-bottom: 1.25rem;
  }
  .module-intro h1 {
    font-size: 1.7rem;
  }
  .intro-lead {
    font-size: 1rem;
  }
  .learning-goal {
    margin: 1.25rem 0;
    padding: 1rem;
  }
  .briefing-principles {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 1rem 0;
  }
  .briefing-principles section,
  .rehearsal-card,
  .scenario-intro-card {
    padding: 0.85rem;
  }
  .briefing-check label {
    font-size: 0.9rem;
  }
  .briefing-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }
  .briefing-actions button {
    width: 100%;
  }
  .briefing-actions [data-briefing-back] {
    grid-row: 2;
  }
  #email {
    width: 100%;
    margin: 0.35rem 0 0;
  }
  #files,
  #signin,
  #mfa,
  #workbook {
    width: 100%;
    margin: 0.35rem 0 0;
  }
  #email .scene-head {
    width: 100%;
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 0;
    box-shadow: none;
  }
  #files .scene-head,
  #signin .scene-head,
  #mfa .scene-head,
  #workbook .scene-head {
    width: 100%;
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 0;
    box-shadow: none;
  }
  #email .scene-head h1 {
    margin: 0.2rem 0;
    font-size: 1.15rem;
    line-height: 1.25;
  }
  #email .scene-head p:last-child {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
  }
  .outlook {
    min-height: 31rem;
    border: 0;
    border-top: 1px solid #d5d9de;
    border-radius: 0;
    box-shadow: none;
  }
  .office-title,
  .mail-list-toolbar,
  .desktop-mail-toolbar {
    display: none;
  }
  .mobile-mail-header {
    display: block;
    color: #fff;
    background: #0f6cbd;
  }
  .mobile-mail-toolbar {
    display: grid;
    grid-template-columns: 2.35rem 1fr 2.35rem;
    align-items: center;
    min-height: 3.7rem;
    padding: 0.45rem 0.9rem;
    gap: 0.65rem;
  }
  .mobile-account-avatar,
  .sender-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
  }
  .mobile-account-avatar {
    width: 2.2rem;
    height: 2.2rem;
    color: #0f6cbd;
    background: #fff;
    font-size: 0.76rem;
  }
  .mobile-mail-toolbar strong {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
  }
  .mobile-search {
    font-size: 1.7rem;
    line-height: 1;
    text-align: right;
    transform: rotate(-20deg);
  }
  .mobile-mail-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    padding: 0 1rem;
    gap: 1rem;
    background: #fff;
    color: #4a4f55;
    border-bottom: 1px solid #d7dade;
  }
  .mobile-mail-tabs span {
    padding: 0.65rem 0.2rem 0.55rem;
  }
  .mobile-mail-tabs .active {
    color: #0f6cbd;
    font-weight: 700;
    border-bottom: 3px solid #0f6cbd;
  }
  .mobile-mail-tabs .filter {
    font-size: 0.8rem;
    color: #51575d;
  }
  .message-list {
    padding: 0;
    background: #fff;
  }
  #message-list-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .message {
    position: relative;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas: "avatar content time";
    align-items: start;
    min-height: 6.15rem;
    padding: 0.85rem 1rem 0.7rem;
    border: 0;
    border-bottom: 1px solid #e5e7e9;
    border-radius: 0;
    background: #fff;
    color: #242424;
  }
  .message .message-avatar {
    grid-area: avatar;
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background: #ca5010;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .message::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    top: 1.82rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #0f6cbd;
  }
  .message-main {
    grid-area: content;
    padding-left: 0.5rem;
    text-align: left;
    line-height: 1.25;
  }
  .message-main strong {
    font-size: 0.95rem;
    color: #0f548c;
  }
  .message-main .subject {
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message-main small {
    margin-top: 0.15rem;
    color: #5d6268;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message-time {
    grid-area: time;
    color: #0f548c;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .history {
    color: #242424;
  }
  .history p {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
    min-height: 5rem;
    margin: 0;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e5e7e9;
    line-height: 1.25;
  }
  .history p::before {
    content: "JL";
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background: #e8d8cc;
    color: #6b3b1d;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .history p strong,
  .history p span {
    grid-column: 2;
    padding-left: 0.5rem;
  }
  .history p strong {
    font-size: 0.92rem;
    font-weight: 600;
  }
  .history p span {
    font-size: 0.85rem;
    color: #5d6268;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-mail-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: sticky;
    bottom: 0;
    padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom));
    border-top: 1px solid #d7dade;
    background: #fff;
    color: #5d6268;
    text-align: center;
    font-size: 0.7rem;
  }
  .mobile-mail-nav span::before {
    display: block;
    margin: auto;
    font-size: 1.1rem;
    line-height: 1.25;
  }
  .mobile-mail-nav .mail {
    color: #0f6cbd;
    font-weight: 700;
  }
  .mobile-mail-nav .mail::before {
    content: "✉";
  }
  .mobile-mail-nav .search::before {
    content: "⌕";
  }
  .mobile-mail-nav .calendar::before {
    content: "▦";
  }
  .reading {
    padding: 0;
    background: #fff;
  }
  .mobile-reading-bar {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    align-items: center;
    min-height: 3.45rem;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid #e1e4e8;
    color: #0f6cbd;
  }
  #mail-back {
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f6cbd;
    font-size: 2rem;
    line-height: 1;
  }
  #mail-back .back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .mobile-reading-bar strong {
    font-size: 0.92rem;
    color: #32363a;
  }
  .mobile-reading-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
  }
  .mobile-reading-actions svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }
  .mobile-reading-actions .more {
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0.12rem;
  }
  .reading-content {
    padding: 1rem;
  }
  .reading .simulation {
    display: inline-block;
    margin: 0.1rem 0 0.8rem;
    padding: 0.18rem 0.45rem;
    border-radius: 0.2rem;
    background: #fff4ce;
    font-size: 0.75rem;
  }
  .reading h2 {
    margin: 0.15rem 0 1.15rem;
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 600;
  }
  .message-meta {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 1.35rem;
    line-height: 1.25;
  }
  .message-meta .sender-avatar {
    width: 2.45rem;
    height: 2.45rem;
    background: #ca5010;
    color: #fff;
    font-size: 0.82rem;
  }
  .message-meta-copy {
    display: grid;
    padding-left: 0.5rem;
    min-width: 0;
  }
  .message-meta-copy strong {
    font-size: 0.95rem;
  }
  .message-meta-copy span {
    font-size: 0.76rem;
    color: #62676c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message-meta time {
    font-size: 0.73rem;
    color: #62676c;
  }
  .reading-body {
    font-size: 0.94rem;
  }
  .share-notice {
    margin: 1rem -0.15rem 0;
    padding: 0.75rem 0;
    background: #fff;
  }
  .share-hero {
    padding: 1.25rem 1rem 0;
  }
  .share-hero svg {
    width: 2.25rem;
    height: 2.25rem;
  }
  .share-title {
    margin: 1rem auto 1.25rem;
    padding: 0 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .share-panel {
    padding: 1.25rem 0.75rem;
  }
  .share-note {
    margin-bottom: 1.25rem;
    font-size: 0.94rem;
  }
  .share-item-icon {
    padding: 1rem 0.25rem 1rem 1rem;
  }
  .share-item-name {
    padding: 1rem 1rem 1rem 0.25rem;
    font-size: 0.94rem;
  }
  .share-permission {
    margin: 1.15rem 0;
  }
  .share-footer {
    padding: 0.85rem 0.25rem;
  }
  .reading .evidence {
    margin: 1.5rem -0.15rem 0;
    border-width: 1px;
    border-left: 4px solid #1769aa;
    background: #f3f8fc;
  }
  .drive-layout {
    display: block;
    min-height: 0;
  }
  .drive-nav {
    display: none;
  }
  .onedrive-shell {
    border-inline: 0;
    border-radius: 0;
  }
  .onedrive-shell .office-title {
    display: flex;
  }
  .onedrive-shell .drive-title-action {
    display: none;
  }
  .drive-content {
    padding: 0.8rem;
  }
  .drive-view-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }
  .drive-tabs {
    overflow-x: auto;
  }
  .drive-tabs .filter-pill:not(.is-active) {
    display: none;
  }
  .name-filter {
    min-width: 0;
  }
  .file-table thead {
    display: none;
  }
  .file-table tbody,
  .file-table tr {
    display: block;
  }
  .file-table tr {
    padding: 0.5rem;
  }
  .file-table td:first-child {
    display: flex;
  }
  .file-table td:nth-child(n + 2) {
    display: none;
  }
  .signin-surface {
    min-height: 0;
    padding: 1rem;
  }
  .microsoft-shell {
    padding: 1.25rem;
    box-shadow: none;
  }
  .mfa-stage-shell {
    display: block;
    padding: 0.5rem;
  }
  .number-match-screen {
    padding: 1rem;
    box-shadow: none;
  }
  .number-match-screen h2 {
    margin-top: 0.8rem;
    font-size: 1.25rem;
  }
  .matching-number {
    margin: 0.4rem 0;
    font-size: 3.5rem;
  }
  .phone-simulator {
    min-height: 36rem;
    margin: 1rem auto 0;
    border-width: 0.35rem;
    border-radius: 1.8rem;
  }
  .excel-app {
    border-inline: 0;
    border-radius: 0;
  }
  .excel-ribbon {
    display: none;
  }
  .workbook-summary {
    padding: 0.8rem;
  }
  .excel-app table {
    min-width: 38rem;
    font-size: 0.82rem;
  }
}

/* === X-Ray floater === */
.xray-floater {
  position: fixed;
  z-index: 50;
  top: 7rem;
  right: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid #c8d0db;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.2rem 0.6rem #17233b1a;
  font:
    700 0.82rem/1 Inter,
    system-ui,
    sans-serif;
}
.xray-floater[hidden] {
  display: none;
}

/* MFA phone simulator number input */
.phone-number-entry {
  width: 100%;
  padding: 0.55rem;
  border: 1px solid #8a94a2;
  border-radius: 0.2rem;
  color: #1f2937;
  background: #fff;
  font-size: 1rem;
  text-align: center;
}
.phone-number-entry::placeholder {
  color: #9ca3af;
}
.phone-number-entry:focus {
  outline: 2px solid #0f6cbd;
  outline-offset: -1px;
  border-color: #0f6cbd;
}
.phone-approve {
  cursor: pointer;
}
.phone-approve:not(.ready) {
  color: #9ca3af;
  cursor: not-allowed;
}
.phone-approve.ready {
  color: #1f2937;
}
.mfa-status {
  min-height: 2.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: #475569;
}

/* Mobile progress bar: show all steps in a scrollable strip, not just current */
@media (max-width: 47.99rem) {
  /* Prevent iOS Safari zoom-on-focus: inputs must be ≥16px */
  input,
  textarea,
  select {
    font-size: 16px;
  }
  /* Safety: prevent horizontal page overflow without breaking fixed positioning */
  body {
    overflow-x: clip;
  }
  /* Fix sign-in overflow: grid auto-sizing lets children expand to content width.
     Use block layout on mobile so width:100% refers to the container, not the track. */
  .signin-surface {
    display: block;
  }
  .signin-surface > .browser-chrome,
  .signin-surface > .microsoft-shell {
    margin-left: auto;
    margin-right: auto;
  }
  /* Nav: horizontally scrollable with hidden scrollbar */
  .progress {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .progress::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .progress ol {
    display: flex;
    min-width: max-content;
    justify-content: flex-start;
    gap: 0.2rem;
    text-align: left;
  }
  .progress li {
    display: list-item;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 0;
    font-size: 0.76rem;
  }
  .progress li[aria-current="step"] {
    display: list-item;
    border-bottom-color: #1769aa;
    font-weight: 800;
    padding: 0;
  }
  .progress a {
    display: block;
    padding: 0.2rem 0.35rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }
}

.xray-floater-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 1rem 0 0 1rem;
  background: transparent;
  color: #312e81;
  cursor: pointer;
  font: inherit;
  min-height: 0;
}
.xray-floater-primary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.xray-floater-open:hover {
  background: #eef0ff;
}
.xray-floater-name {
  font-weight: 800;
  white-space: nowrap;
}

.xray-dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  align-items: center;
  padding: 0.1rem 0 0.05rem;
}
.xray-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d3dbe5;
  transition: background 0.15s;
}
.xray-dot[data-revealed="true"][data-tone="positive"] {
  background: #6bbf8a;
}
.xray-dot[data-revealed="true"][data-tone="neutral"] {
  background: #9ca6b4;
}
.xray-dot[data-revealed="true"][data-tone="suspicious"] {
  background: #e89a9a;
}
.xray-dot:not([data-revealed="true"]) {
  background: #d3dbe5;
}

.xray-floater-count {
  font-size: 0.76rem;
  color: #465568;
  white-space: nowrap;
}
.xray-floater-expand {
  font-size: 0.7rem;
  color: #6b7889;
}

/* Switch (separate from summary open) */
.xray-floater-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.35rem;
  border: 0;
  border-radius: 1rem;
  background: #e8edf4;
  cursor: pointer;
  min-height: 1.75rem;
  min-width: 2.2rem;
  margin-right: 0.45rem;
}
.xray-floater-switch[aria-checked="true"] {
  background: #312e81;
}
.xray-floater-switch::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1rem 0.2rem #0003;
  transition: transform 0.15s;
}
.xray-floater-switch[aria-checked="true"]::before {
  transform: translateX(0.7rem);
}
.xray-floater-switch .xray-switch-text {
  display: none;
}

/* All-clues-found pulse + tooltip on the floater */
.xray-floater[data-all-revealed="true"] {
  animation: xray-pulse 1.6s ease-in-out 3;
  border-color: #312e81;
}
@keyframes xray-pulse {
  0%,
  100% {
    box-shadow: 0 0.2rem 0.6rem #17233b1a;
  }
  50% {
    box-shadow:
      0 0.2rem 0.6rem #17233b1a,
      0 0 0 3px #312e8140;
  }
}
/* Anchored to the floater's left edge so the arrow lands on the "X-Ray" open
   button — the tip asks the learner to open the summary, not flip the switch
   that sits at the floater's right edge. */
.xray-floater-tip {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 51;
  width: max-content;
  max-width: min(14rem, calc(100vw - 1rem));
  padding: 0.5rem 0.7rem;
  border: 1px solid #312e81;
  border-radius: 0.4rem;
  background: #eef0ff;
  color: #312e81;
  font:
    700 0.78rem/1.4 Inter,
    system-ui,
    sans-serif;
  text-align: center;
  cursor: pointer;
  min-height: 0;
  width: max-content;
}
.xray-floater-tip:hover {
  background: #e0e7ff;
}
.xray-floater[data-all-revealed="true"] .xray-floater-tip {
  display: block;
}
.xray-floater-tip::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid #312e81;
  border-width: 1px 0 0 1px;
  background: #eef0ff;
  transform: rotate(45deg);
}

/* Desktop: show count and expand */
@media (min-width: 48rem) {
  .xray-floater-open {
    padding: 0.45rem 0.65rem;
  }
}

/* Mobile: compact floater below the nav to avoid overlapping nav items */
@media (max-width: 47.99rem) {
  .xray-floater {
    top: 7rem;
    right: 0.35rem;
    max-width: 150px;
  }
  .xray-floater-open {
    padding: 0.3rem 0.4rem;
  }
  .xray-floater-count {
    display: none;
  }
  .xray-floater-expand {
    display: none;
  }
  /* Tooltip: use fixed positioning on mobile so it's not constrained by
     the narrow floater's containing block. Position below the floater,
     aligned to the right screen edge. */
  .xray-floater-tip {
    position: fixed;
    top: 9rem;
    right: 0.35rem;
    left: 0.35rem;
    width: auto;
    max-width: none;
  }
  .xray-floater-tip::before {
    left: auto;
    right: 1.5rem;
  }
}

/* === X-Ray summary dialog === */
dialog#xray-summary {
  border: 1px solid #c8d0db;
  border-radius: 0.6rem;
  background: #fff;
  color: #172033;
  padding: 0;
  max-height: 88vh;
  overflow: hidden;
}
@media (min-width: 48rem) {
  dialog#xray-summary {
    margin: auto;
    width: min(44rem, 92vw);
  }
}
@media (max-width: 47.99rem) {
  dialog#xray-summary {
    margin: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem 1rem 0 0;
    max-height: 92dvh;
    border-bottom: 0;
  }
  dialog#xray-summary::backdrop {
    background: #0008;
  }
}

.xray-summary-content {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
@media (max-width: 47.99rem) {
  .xray-summary-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.xray-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e6ea;
  flex: none;
}
.xray-summary-header h2 {
  margin: 0;
  font-size: 1.15rem;
}
.xray-summary-close {
  padding: 0.35rem 0.55rem;
  border: 1px solid #c8d0db;
  border-radius: 0.3rem;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  min-height: 2rem;
  min-width: 2rem;
}

.xray-summary-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* === Accordion === */
.xray-clues-section h3,
.xray-suspicion-section h3,
.xray-report-section h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.xray-clue-card {
  margin-bottom: 0.5rem;
  border: 1px solid #e2e6ea;
  border-radius: 0.4rem;
  overflow: hidden;
}
.xray-clue-card.tone-positive {
  background: #edf7f0;
  border-color: #c5e3d2;
}
.xray-clue-card.tone-neutral {
  background: #f0f2f5;
  border-color: #d3d8e0;
}
.xray-clue-card.tone-suspicious {
  background: #fceeee;
  border-color: #e9c8c8;
}

.xray-clue-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font:
    600 0.88rem/1.35 Inter,
    system-ui,
    sans-serif;
}
.xray-clue-header:hover {
  background: #ffffff60;
}

.xray-clue-chip {
  flex: none;
  padding: 0.15rem 0.4rem;
  border-radius: 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tone-positive .xray-clue-chip {
  color: #1a6b3f;
  background: #c5e3d2;
}
.tone-neutral .xray-clue-chip {
  color: #4a5260;
  background: #d3d8e0;
}
.tone-suspicious .xray-clue-chip {
  color: #8b2929;
  background: #e9c8c8;
}

.xray-clue-title {
  flex: 1;
  min-width: 0;
}

.xray-clue-affordance {
  flex: none;
  color: #465568;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.xray-clue-chevron {
  flex: none;
  font-size: 0.8rem;
  color: #6b7889;
  transition: transform 0.15s;
}
.xray-clue-header[aria-expanded="true"] .xray-clue-chevron {
  transform: rotate(90deg);
}

.xray-clue-body {
  padding: 0 0.75rem 0.65rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #3b4555;
}
.xray-clue-body[hidden] {
  display: none;
}

.xray-no-clues {
  color: #6b7889;
  font-size: 0.88rem;
}

/* === Conclusion: evidence panel, plan builder, rehearsal, feedback door === */

.evidence-panel {
  border: 1px solid #c8d0db;
  border-radius: 0.5rem;
  background: #fbfcfd;
  margin: 1rem 0;
}
.evidence-panel > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.evidence-panel > summary::-webkit-details-marker {
  display: none;
}
.evidence-panel > summary::before {
  content: "▸";
  color: #6b7889;
}
.evidence-panel[open] > summary::before {
  content: "▾";
}
.evidence-count {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.84rem;
  color: #6b7889;
}
.evidence-panel .clue-review {
  padding: 0 1rem;
}
.evidence-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem 0.9rem;
  border-top: 1px solid #e5eaf0;
  font-size: 0.82rem;
  color: #6b7889;
}
.linkish {
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  font: inherit;
  font-size: 0.82rem;
  color: #175c91;
  text-decoration: underline;
  cursor: pointer;
}
.clue-review-draft {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  color: #3d4c63;
  background: #f2f5f8;
  border-left: 0.18rem solid #c8d0db;
  border-radius: 0.2rem;
}
.clue-review-draft em {
  display: block;
  margin-bottom: 0.15rem;
  font-style: normal;
  font-size: 0.76rem;
  color: #6b7889;
}

.plan-builder {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 1.2rem 0;
}
.plan-intro {
  margin: 0;
  color: #465568;
  font-size: 0.92rem;
}
/* A learner with strong evidence keeps every control, and loses the prompts:
   what fades with expertise is the explaining, never the input (D-10). */
#conclusion[data-tier="strong"] .plan-intro,
#conclusion[data-tier="strong"] .plan-chip-tone {
  display: none;
}
.plan-slot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan-slot-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.plan-slot-head p {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.plan-kw {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #312e81;
  background: #eef0ff;
  border: 1px solid #c9cbf5;
  padding: 0.12rem 0.4rem;
  border-radius: 0.2rem;
}
.plan-optional {
  font-weight: 400;
  font-size: 0.82rem;
  color: #6b7889;
}
#plan-cues,
#plan-cues-2,
#plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.5rem 0.7rem;
  text-align: left;
  font-size: 0.9rem;
  border: 1px solid #b6c0cd;
  border-radius: 0.35rem;
  background: #fff;
  color: #172033;
}
.plan-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #9ca6b4;
}
.plan-chip[data-tone="positive"]::before {
  background: #6bbf8a;
}
.plan-chip[data-tone="suspicious"]::before {
  background: #e89a9a;
}
.plan-chip[data-tone="action"]::before {
  display: none;
}
.plan-chip-tone {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7889;
}
.plan-chip:hover {
  background: #f4f6fa;
}
.plan-chip[aria-pressed="true"] {
  border-color: #312e81;
  background: #eef0ff;
  color: #23206b;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #312e81;
}
.plan-chip[aria-pressed="true"] .plan-chip-tone {
  color: #4b47a8;
}
.plan-note {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.35rem;
  font-size: 0.88rem;
  background: #fff8e8;
  border: 1px solid #e8d5a3;
  color: #5c4813;
}
.plan-empty {
  margin: 0 0 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.35rem;
  font-size: 0.9rem;
  background: #eff4fb;
  border: 1px solid #b9cbe2;
  color: #23405f;
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid #312e81;
  border-radius: 0.5rem;
  background: #f6f6ff;
}
.plan-card-kicker {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #4b47a8;
}
.plan-sentence {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #23206b;
}
.plan-ghost {
  color: #8f8cc4;
  font-style: italic;
}
.plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.plan-hint {
  font-size: 0.84rem;
  color: #6b7889;
}
#plan-save:not([disabled]) {
  background: #312e81;
  border-color: #312e81;
  color: #fff;
  font-weight: 600;
}

.rehearse {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1.2rem 0;
  padding: clamp(0.9rem, 2.2vw, 1.3rem);
  border: 1px solid #bdc7d2;
  border-radius: 0.6rem;
  background: #fff;
}
.rehearse h2 {
  margin: 0;
}
.rehearse-scene {
  border: 1px solid #c8d0db;
  border-radius: 0.4rem;
  background: #f8fafc;
  overflow: hidden;
}
.rehearse-bar {
  padding: 0.45rem 0.7rem;
  background: #0f6cbd;
  color: #fff;
  font-size: 0.8rem;
}
.rehearse-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem;
}
.rehearse-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.6rem;
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 0.3rem;
  font-size: 0.88rem;
}
.rehearse-meta {
  margin-left: auto;
  color: #6b7889;
  font-size: 0.8rem;
}
.rehearse-verdict {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.35rem;
  font-size: 0.9rem;
  background: #f0fdf4;
  border: 1px solid #b6e0c4;
  color: #1d4d31;
}
.rehearse-verdict[data-kind="miss"] {
  background: #fff7ed;
  border-color: #e8cba3;
  color: #6b4310;
}

.finish-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}
#plan-finish {
  background: #17233b;
  border-color: #17233b;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.7rem 1.4rem;
}
#plan-finish:hover {
  background: #24344f;
}
.completion-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.2rem 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid #b6e0c4;
  border-radius: 0.6rem;
  background: #f2fbf5;
}
.completion-panel h2 {
  margin: 0;
  color: #1d4d31;
}
.completion-panel p {
  margin: 0;
  color: #24543a;
}
.completion-plan {
  padding: 0.7rem 0.9rem;
  border-radius: 0.4rem;
  background: #fff;
  border: 1px solid #b6e0c4;
  font-size: 1.02rem;
  font-weight: 600;
}

/* The second door. Present in every state, including before anything blocks —
   a door that only appears once you have failed marks everyone who uses it.
   It has to read as something you can open, not as a notice: the learner who
   needs it most is the least likely to go poking at a banner. */
.feedback-door {
  border: 1px solid #c3cbd6;
  border-radius: 0.6rem;
  background: #fbfcfd;
  margin: 1.2rem 0;
}
.feedback-door > summary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  border-radius: 0.6rem;
}
.feedback-door > summary:hover {
  background: #f1f5fa;
}
.feedback-door > summary:focus-visible {
  outline: 3px solid #e59b00;
  outline-offset: -3px;
}
.feedback-door > summary::-webkit-details-marker {
  display: none;
}
.feedback-door-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.feedback-door > summary strong {
  font-size: 0.94rem;
}
.feedback-door-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #8fa4bd;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #175c91;
  white-space: nowrap;
}
.feedback-door-toggle::after {
  content: "▾";
  font-size: 0.7rem;
}
.feedback-door[open] .feedback-door-toggle::after {
  content: "▴";
}
.feedback-door > summary #feedback-destination {
  font-size: 0.84rem;
  color: #56637a;
}
.feedback-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 1rem 1.1rem;
  border-top: 1px solid #e2e7ee;
}
.feedback-body fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.feedback-body legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.feedback-body label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.feedback-body input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem 0 0;
}
.feedback-anon {
  padding-top: 0.5rem;
  border-top: 1px solid #e2e7ee;
}

@media (max-width: 47.99rem) {
  .plan-chip {
    width: 100%;
  }
  .rehearse-meta {
    margin-left: 0;
    width: 100%;
  }
}

/* Clue review on conclusion stage */
.clue-review-intro {
  color: #465568;
  font-size: 0.88rem;
  margin: 0.3rem 0 0.8rem;
}
.clue-review-group {
  margin-bottom: 1.2rem;
}
.clue-review-stage {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #172033;
  border-bottom: 2px solid #d3d8e0;
  padding-bottom: 0.3rem;
}
.clue-review-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.65rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid #d3d8e0;
}
.clue-review-card .xray-clue-body {
  grid-column: 1 / -1;
}
.clue-review-card .xray-clue-body p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}
@media (max-width: 47.99rem) {
  .clue-review-card {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* === Suspicion slider === */
.xray-suspicion-section {
  margin-top: 1.25rem;
}
.xray-suspicion-control {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.xray-suspicion-track-wrap {
  position: relative;
  padding: 0.35rem 0;
}
/* The input height matches the track height so the thumb overflows equally
   top and bottom.  margin-top centres the thumb on the track centreline. */
#xray-suspicion {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1rem; /* matches track height */
  background: transparent;
  outline: none;
  cursor: pointer;
}
/* --- Track (gradient bar) --- */
#xray-suspicion::-webkit-slider-runnable-track {
  height: 1rem;
  border-radius: 0.5rem; /* pill shape */
  background: linear-gradient(
    to right,
    #43a047 0%,
    #7cb342 25%,
    #fdd835 50%,
    #fb8c00 75%,
    #e53935 100%
  );
  border: 1px solid #00000018;
}
#xray-suspicion::-moz-range-track {
  height: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(
    to right,
    #43a047 0%,
    #7cb342 25%,
    #fdd835 50%,
    #fb8c00 75%,
    #e53935 100%
  );
  border: 1px solid #00000018;
}
/* --- Thumb (white circle) --- */
#xray-suspicion::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #312e81;
  box-shadow:
    0 0.15rem 0.3rem #0003,
    0 0 0 1px #00000010;
  margin-top: -0.25rem; /* (trackHeight - thumbHeight) / 2 = (1rem - 1.5rem) / 2 */
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
#xray-suspicion::-webkit-slider-thumb:hover {
  box-shadow:
    0 0.2rem 0.4rem #0004,
    0 0 0 3px #312e8120;
  transform: scale(1.08);
}
#xray-suspicion:active::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow:
    0 0.15rem 0.3rem #0004,
    0 0 0 4px #312e8130;
}
#xray-suspicion::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #312e81;
  box-shadow:
    0 0.15rem 0.3rem #0003,
    0 0 0 1px #00000010;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
#xray-suspicion::-moz-range-thumb:hover {
  box-shadow:
    0 0.2rem 0.4rem #0004,
    0 0 0 3px #312e8120;
  transform: scale(1.08);
}
#xray-suspicion:active::-moz-range-thumb {
  transform: scale(1.12);
}
/* --- Focus ring for keyboard users --- */
#xray-suspicion:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0.15rem 0.3rem #0003,
    0 0 0 3px #312e8140;
}
#xray-suspicion:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0.15rem 0.3rem #0003,
    0 0 0 3px #312e8140;
}

/* --- Tick marks under the track --- */
.xray-suspicion-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 0.6rem; /* half thumb width so ticks align with stop centres */
  margin-top: -0.15rem;
}
.xray-suspicion-ticks span {
  width: 2px;
  height: 0.5rem;
  background: #00000022;
  border-radius: 1px;
}

.xray-suspicion-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #6b7889;
  margin-top: 0.1rem;
}
.xray-suspicion-value {
  margin: 0.25rem 0 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: #312e81;
}

/* === Report section === */
.xray-report-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e6ea;
}
.xray-report-section[hidden] {
  display: none;
}

#xray-report-feedback:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#xray-report-draft {
  width: 100%;
  min-height: 5rem;
  padding: 0.6rem;
  border: 1px solid #c8d0db;
  border-radius: 0.35rem;
  resize: vertical;
  font:
    400 1rem/1.45 Inter,
    system-ui,
    sans-serif;
}
.xray-privacy {
  font-size: 0.8rem;
  color: #536274;
}

#xray-report-feedback[hidden] {
  display: none;
}

.xray-quality-meter {
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.xray-quality-meter.pending {
  background: #f0f2f5;
  color: #6b7889;
}
.xray-quality-meter.quality-incomplete {
  background: #fff7ed;
  color: #92400e;
  border: 1px solid #fcd9a8;
}
.xray-quality-meter.quality-good {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.xray-quality-meter.quality-excellent {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

#xray-rationale,
#xray-guidance {
  margin: 0.3rem 0;
  font-size: 0.86rem;
  line-height: 1.45;
}
#xray-rationale {
  color: #3b4555;
}
#xray-guidance {
  color: #312e81;
  font-weight: 600;
}
#xray-attempt-note {
  font-size: 0.8rem;
  color: #92400e;
}
/* The feedback lines are filled in per verdict; unused ones must not leave a gap. */
#xray-rationale:empty,
#xray-guidance:empty,
#xray-attempt-note:empty {
  display: none;
}
#xray-report-status {
  font-size: 0.82rem;
  color: #b45309;
  min-height: 1.2rem;
}

/* === Summary footer === */
.xray-summary-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #e2e6ea;
  flex: none;
}
@media (max-width: 47.99rem) {
  .xray-summary-footer {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}
#xray-continue-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #c8d0db;
  border-radius: 0.35rem;
  background: #fff;
  color: #465568;
  font-weight: 600;
  cursor: pointer;
}
/* The one report control: blue while the report is still being worked on,
   green once it is ready to send. */
#xray-report-action {
  padding: 0.5rem 1rem;
  border: 1px solid #175c91;
  border-radius: 0.35rem;
  color: #fff;
  background: #175c91;
  font-weight: 700;
  cursor: pointer;
}
#xray-report-action[data-phase="send"] {
  border-color: #15803d;
  background: #15803d;
}
#xray-continue-btn:disabled,
#xray-report-action:disabled {
  border-color: #c8d0db;
  color: #7a8797;
  background: #eef1f4;
  cursor: not-allowed;
}
@media (max-width: 47.99rem) {
  #xray-continue-btn,
  #xray-report-action {
    flex: 1 1 10rem;
  }
}

/* === X-Ray cue overlays === */
.xray-on .outlook,
.xray-on .share-card {
  overflow: visible;
}
.xray-on [data-xray-cue][data-xray-index] {
  position: relative;
  border-radius: 0.15rem;
  background-color: #4f46e508;
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 7px,
    #4f46e514 7px,
    #4f46e514 8px
  );
  box-shadow: inset 0 0 0 1px #4f46e525;
}
.xray-probe-badge {
  position: absolute;
  z-index: 6;
  top: -1.1rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #312e81;
  font:
    800 0.78rem/1 Inter,
    system-ui,
    sans-serif;
}
.xray-on .filename[data-xray-cue][data-xray-index] {
  min-height: 1.7rem;
  padding-left: 2rem;
}
.xray-on .filename > .xray-probe .xray-probe-badge {
  top: 50%;
  right: auto;
  left: 0.15rem;
  transform: translateY(-50%);
}
.xray-on [data-xray-cue][data-xray-viewed="true"] {
  background-color: #15803d08;
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 7px,
    #15803d14 7px,
    #15803d14 8px
  );
  box-shadow: inset 0 0 0 1px #15803d25;
}
.xray-on [data-xray-cue][data-xray-viewed="true"] > .xray-probe .xray-probe-badge {
  background: #15803d;
}
.xray-on [data-xray-cue][data-xray-active="true"] {
  background-color: #4f46e51a;
  box-shadow: inset 0 0 0 2px #4f46e54d;
}

.xray-probe {
  display: none;
}
.xray-on [data-xray-cue] > .xray-probe {
  display: block;
  position: absolute;
  z-index: 5;
  inset: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0.15rem;
  background: transparent;
  cursor: pointer;
}
.xray-on [data-xray-cue] > .xray-probe:hover {
  background: #4f46e514;
}

[data-xray-cue] > .xray-tip {
  display: none;
}
.xray-on [data-xray-cue] > .xray-tip {
  display: grid;
  position: absolute;
  z-index: 12;
  top: calc(100% + 0.6rem);
  left: 0;
  gap: 0.35rem;
  pointer-events: none;
  width: max(100%, 16rem);
  max-width: min(24rem, calc(100vw - 1.5rem));
  padding: 0.75rem 0.85rem;
  border: 1px solid #312e81;
  border-radius: 0.5rem;
  color: #172033;
  background: #fff;
  box-shadow: 0 0.6rem 1.6rem #17233b40;
  text-align: left;
  font:
    400 0.88rem/1.45 Inter,
    system-ui,
    "Segoe UI",
    sans-serif;
}
.xray-on [data-xray-cue] > .xray-tip::before {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: 1.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid #312e81;
  border-width: 1px 0 0 1px;
  background: #fff;
  transform: rotate(45deg);
}
.xray-tip-label {
  color: #312e81;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.xray-tip-copy {
  display: block;
  line-height: 1.45;
}
.xray-tip-close {
  justify-self: start;
  pointer-events: auto;
  min-height: 2.75rem;
  margin-top: 0.2rem;
  padding: 0.4rem 1rem;
  border: 1px solid #312e81;
  border-radius: 0.35rem;
  color: #312e81;
  background: #eef0ff;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Mobile back button badge */
#mail-back {
  position: relative;
}
.xray-on #mail-back[data-xray-badge]::after {
  content: attr(data-xray-badge);
  position: absolute;
  z-index: 7;
  top: 0;
  right: -0.3rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border: 2px solid #fff;
  border-radius: 0.625rem;
  color: #fff;
  background: #312e81;
  font:
    800 0.72rem/1 Inter,
    system-ui,
    sans-serif;
}

/* share-open as button */
.share-open {
  display: inline-block;
  width: 10.5rem;
  border: 1px solid #005a9e;
  border-radius: 2px;
  background: #005a9e;
  color: #fff;
  font-size: 1rem;
  line-height: 2.5rem;
  cursor: pointer;
  text-align: center;
}
.share-open:hover {
  background: #004578;
}
.share-open:active {
  background: #003864;
}

/* file-open button (OneDrive stage, analogous to share-open) */
.file-open {
  display: inline-block;
  width: auto;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #005a9e;
  border-radius: 2px;
  background: #005a9e;
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
.file-open:hover {
  background: #004578;
}
.file-open:active {
  background: #003864;
}

/* Browser chrome / URL bar (signin stage) */
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: min(32rem, 100%);
  margin: 0 auto 0.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #c8c8c8;
  border-radius: 0.4rem 0.4rem 0 0;
  background: #e8e8e8;
}
.browser-dot {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}
.browser-dot-red {
  background: #ff5f56;
}
.browser-dot-yellow {
  background: #ffbd2e;
}
.browser-dot-green {
  background: #27c93f;
}
.browser-url-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid #b8b8b8;
  border-radius: 1.2rem;
  background: #fff;
}
.browser-lock {
  flex: none;
  font-size: 0.75rem;
}
.browser-url-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: #333;
}

/* Pre-filled credentials (signin stage) — overrides xray.20260801c.css */
.fake-account,
.fake-password {
  display: grid;
  gap: 0.15rem;
  margin: 1.2rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.25rem;
  background: #f5f5f5;
  color: #1f1f1f;
}
.fake-input-label {
  font-size: 0.75rem;
  color: #666;
}
.fake-input-value {
  font-size: 0.95rem;
  color: #1f1f1f;
  word-break: break-all;
}
.fake-input-dots {
  letter-spacing: 0.1em;
  user-select: none;
}

/* Sign-in open button (analogous to share-open / file-open) */
.signin-open-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0;
}
.signin-open {
  display: inline-block;
  border: 1px solid #0067b8;
  border-radius: 0.2rem;
  background: #0067b8;
  color: #fff;
  font-size: 1rem;
  line-height: 2.5rem;
  padding: 0 1.5rem;
  cursor: pointer;
  text-align: center;
}
.signin-open:hover {
  background: #005a9e;
}
.signin-open:active {
  background: #004d8a;
}

/* Mobile-only "Shared by" cue inside file-identity (desktop uses table column) */
.file-shared-by-mobile {
  display: none;
}

/* Remove old xray-launch styles (no longer in HTML) */
/* Scene header email styling preserved */
#email .scene-head .scene-copy {
  margin: 0;
  color: #465568;
}

/* === X-Ray gate prompt (small popup before opening share) === */
#xray-gate-prompt {
  width: auto;
  max-width: min(26rem, calc(100vw - 2rem));
  border: 0;
  border-radius: 0.6rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 0.5rem 2rem #0004;
  text-align: center;
}
#xray-gate-prompt::backdrop {
  background: #10182755;
}
.xray-gate-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
#xray-gate-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #312e81;
}
.xray-gate-content p {
  margin: 0;
  color: #465568;
  font-size: 0.92rem;
  line-height: 1.45;
}
.xray-gate-dismiss {
  margin-top: 0.25rem;
  padding: 0.55rem 1.5rem;
  border: 1px solid #312e81;
  border-radius: 0.35rem;
  background: #312e81;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.xray-gate-dismiss:hover {
  background: #1e1b4b;
}

/* === OneDrive breadcrumb folder icon sizing === */
/* Moved from xray.20260804a.css (no longer loaded) */
.drive-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  color: #62676c;
  font-size: 1.05rem;
}
.drive-breadcrumb strong {
  color: #172033;
  font-weight: 600;
}
.drive-breadcrumb .crumb-icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
}
.drive-breadcrumb .crumb-divider {
  color: #9aa1a8;
}

/* Show mobile-only "Shared by" cue on narrow viewports */
@media (max-width: 47.99rem) {
  .file-shared-by-mobile {
    display: block;
    color: #64748b;
  }

  /* On mobile, file-identity cues are tightly stacked and the numbered
     circles overlap each other and the filename. Add spacing between
     cues and move the circle to the left gutter so it doesn't cover text. */
  .xray-on .file-identity {
    gap: 0.35rem;
    padding-left: 1.8rem;
  }
  .xray-on .file-identity > [data-xray-cue] {
    padding: 0.1rem 0.2rem 0.1rem 0.2rem;
  }
  .xray-on .file-identity > [data-xray-cue]::after {
    top: 50%;
    right: auto;
    left: -1.8rem;
    transform: translateY(-50%);
  }
}

/* Forced-colors / high-contrast equivalents */
@media (forced-colors: active) {
  .xray-clue-chip {
    border: 1px solid CanvasText;
  }
  .xray-dot {
    border: 1px solid CanvasText;
  }
  #xray-suspicion {
    border: 1px solid CanvasText;
  }
  .xray-quality-meter {
    border: 1px solid CanvasText;
  }
  .briefing-quality {
    border: 1px solid CanvasText;
  }
}