/* --------------------------------------------------------------------------
   ARCMENTOR /app/ - shell layout (mobile-first 360-430px)
   Consumes tokens from ../styles/tokens.css. Light theme only (ADR-0008).
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--arc-bg-app);
  color: var(--arc-text-primary);
  font-family: var(--arc-font-sans);
  font-size: var(--arc-fs-body);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

arc-app-shell { display: block; }

.arc-shell {
  max-width: var(--arc-content-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* leave room for the fixed bottom nav */
  padding-bottom: calc(var(--arc-tap-nav) + var(--arc-sp-5));
}

/* -- Header -- */
.arc-shell__header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--arc-sp-3);
  padding: var(--arc-sp-4);
  background: var(--arc-bg-card);
  border-bottom: 1px solid var(--arc-border-subtle);
}
.arc-shell__brand {
  font-weight: var(--arc-fw-bold);
  letter-spacing: var(--arc-tracking-logo);
  color: var(--arc-text-primary);
}
.arc-shell__cell {
  font-size: var(--arc-fs-caption);
  color: var(--arc-text-secondary);
  margin-left: auto;
}
.arc-shell__cloud {
  font-size: var(--arc-fs-caption);
  color: var(--arc-state-normal);
  font-weight: var(--arc-fw-medium);
}
/* Sprint 6 UX — header auth affordance (only present when Cognito configured). */
.arc-shell__auth {
  display: inline-flex;
  align-items: center;
  gap: var(--arc-sp-3);
  font-size: var(--arc-fs-caption);
}
.arc-shell__auth .arc-role { color: var(--arc-text-secondary); }
.arc-shell__auth .arc-authbtn {
  font: inherit;
  color: var(--arc-text-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline; /* not colour-only — AAA */
}
/* "More" screen auth actions (sign-in / role links / logout). */
.arc-more__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--arc-sp-3);
  margin-top: var(--arc-sp-4);
}
.arc-more__actions .arc-btn { text-decoration: none; }

/* -- Main / screens -- */
.arc-shell__main {
  flex: 1 1 auto;
  padding: var(--arc-sp-4);
  outline: none;
}
.arc-screen__title {
  font-size: var(--arc-fs-h1);
  font-weight: var(--arc-fw-bold);
  margin: 0 0 var(--arc-sp-3);
}
.arc-screen__note {
  color: var(--arc-text-tertiary);
  font-size: var(--arc-fs-caption);
}
.arc-screen--placeholder {
  border: 1px dashed var(--arc-border-subtle);
  border-radius: var(--arc-radius-md);
  padding: var(--arc-sp-5);
  background: var(--arc-bg-card);
}

/* -- Bottom navigation -- */
.arc-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--arc-content-max);
  display: flex;
  background: var(--arc-bg-card);
  border-top: 1px solid var(--arc-border-subtle);
  box-shadow: var(--arc-shadow-nav);
  z-index: var(--arc-z-nav);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.arc-nav__item {
  flex: 1 1 0;
  min-height: var(--arc-tap-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--arc-sp-2) 0;
  text-decoration: none;
  color: var(--arc-text-tertiary);
}
.arc-nav__item.is-active {
  color: var(--arc-primary);
}
.arc-nav__icon { font-size: 18px; line-height: 1; }
.arc-nav__label { font-size: var(--arc-fs-micro); font-weight: var(--arc-fw-medium); }

/* visible focus ring for keyboard users (WCAG) */
.arc-nav__item:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--arc-state-vision-only);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -- Buttons -- */
.arc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--arc-tap-secondary);
  padding: var(--arc-sp-3) var(--arc-sp-4);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-card);
  color: var(--arc-text-primary);
  font: inherit; font-weight: var(--arc-fw-medium);
  cursor: pointer;
}
.arc-btn--primary {
  min-height: var(--arc-tap-primary);
  background: var(--arc-action-primary);
  color: var(--arc-action-primary-text);
  border-color: var(--arc-action-primary);
  font-weight: var(--arc-fw-bold);
  width: 100%;
}
.arc-btn--secondary { border-color: var(--arc-action-primary); color: var(--arc-action-primary); width: 100%; }
.arc-btn--outline   { background: transparent; width: 100%; }
.arc-btn--disabled, .arc-btn[disabled] { color: var(--arc-text-tertiary); background: var(--arc-bg-app); cursor: not-allowed; width: 100%; }

/* -- Cards / status -- */
.arc-card {
  background: var(--arc-bg-card); border: 1px solid var(--arc-border-subtle);
  border-radius: var(--arc-radius-md); padding: var(--arc-sp-4);
  box-shadow: var(--arc-shadow-card); margin-bottom: var(--arc-sp-4);
}
.arc-card__label { display: block; font-size: var(--arc-fs-caption); color: var(--arc-text-tertiary); }
.arc-status { display: flex; align-items: center; gap: var(--arc-sp-2); margin-bottom: var(--arc-sp-4); font-size: var(--arc-fs-caption); }
.arc-status__dot--ok { color: var(--arc-state-normal); }
.arc-status__text { color: var(--arc-text-secondary); }

/* -- Home -- */
.arc-home__cta { margin-bottom: var(--arc-sp-4); }
.arc-home__last { cursor: pointer; }
.arc-home__last-meta { font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); }
.arc-home__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--arc-sp-3); }
.arc-tile {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 88px; padding: var(--arc-sp-4);
  background: var(--arc-bg-card); border: 1px solid var(--arc-border-subtle);
  border-radius: var(--arc-radius-md); text-decoration: none; color: var(--arc-text-primary);
}
.arc-tile--muted { color: var(--arc-text-tertiary); }
.arc-tile--accent { border-color: var(--arc-action-primary); }
.arc-tile__icon { font-size: 20px; }
.arc-tile__title { font-weight: var(--arc-fw-medium); }
.arc-tile__sub { font-size: var(--arc-fs-micro); color: var(--arc-text-tertiary); }

/* -- Fields / chips / segmented -- */
.arc-field { border: none; padding: 0; margin: 0 0 var(--arc-sp-5); }
.arc-field legend { font-weight: var(--arc-fw-medium); margin-bottom: var(--arc-sp-2); padding: 0; }
.arc-chips { display: flex; flex-wrap: wrap; gap: var(--arc-sp-2); }
.arc-chip {
  min-height: var(--arc-tap-chip); padding: 0 var(--arc-sp-4);
  border: 1px solid var(--arc-border); border-radius: 999px;
  background: var(--arc-bg-card); color: var(--arc-text-primary); font: inherit; cursor: pointer;
}
.arc-chip.is-selected { border-color: var(--arc-action-primary); background: var(--arc-primary-bg); color: var(--arc-action-primary); }
.arc-chip--warn { border-color: var(--arc-state-degraded-audio); color: var(--arc-state-degraded-audio); }
.arc-segmented { display: flex; gap: 0; border: 1px solid var(--arc-border); border-radius: var(--arc-radius-sm); overflow: hidden; }
.arc-seg { flex: 1; min-height: var(--arc-tap-chip); border: none; background: var(--arc-bg-card); color: var(--arc-text-primary); font: inherit; cursor: pointer; }
.arc-seg.is-selected { background: var(--arc-primary-bg); color: var(--arc-action-primary); font-weight: var(--arc-fw-bold); }

/* -- Steppers -- */
.arc-stepper { display: flex; align-items: center; gap: var(--arc-sp-2); margin-bottom: var(--arc-sp-3); }
.arc-stepper label { flex: 1; }
.arc-stepper__btn { width: var(--arc-tap-chip); height: var(--arc-tap-chip); border: 1px solid var(--arc-border); border-radius: var(--arc-radius-sm); background: var(--arc-bg-card); font-size: 20px; cursor: pointer; }
.arc-stepper output { min-width: 56px; text-align: center; font-weight: var(--arc-fw-medium); }
.arc-advisory-tag { font-size: var(--arc-fs-micro); color: var(--arc-info); font-style: italic; }
.arc-readout { padding: var(--arc-sp-2) var(--arc-sp-3); background: var(--arc-bg-app); border-radius: var(--arc-radius-sm); margin-bottom: var(--arc-sp-2); }
.arc-check { display: flex; align-items: center; gap: var(--arc-sp-2); min-height: var(--arc-tap-chip); }

/* -- Banners / notes -- */
.arc-banner { padding: var(--arc-sp-3); border-radius: var(--arc-radius-sm); margin-bottom: var(--arc-sp-4); }
.arc-banner--info { background: var(--arc-info-bg); color: var(--arc-info); }
.arc-note { font-size: var(--arc-fs-caption); }
.arc-note--warn { color: var(--arc-state-degraded-audio); }
.arc-calc { display: flex; flex-direction: column; gap: 2px; font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); margin-bottom: var(--arc-sp-4); }

/* -- Wizard -- */
.arc-wizard__progress { display: flex; gap: var(--arc-sp-2); list-style: none; padding: 0; margin: 0 0 var(--arc-sp-5); }
.arc-wizard__dot { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--arc-bg-app); border: 1px solid var(--arc-border-subtle); color: var(--arc-text-tertiary); font-weight: var(--arc-fw-medium); }
.arc-wizard__dot.is-active { background: var(--arc-primary-bg); border-color: var(--arc-action-primary); color: var(--arc-action-primary); }
.arc-wizard__dot.is-done { background: var(--arc-state-normal); border-color: var(--arc-state-normal); color: #fff; }
.arc-wizard__actions { display: flex; flex-direction: column; gap: var(--arc-sp-2); margin-top: var(--arc-sp-5); }
.arc-summary { display: flex; flex-direction: column; gap: 2px; }
.arc-risks { display: flex; align-items: center; gap: var(--arc-sp-2); margin: var(--arc-sp-3) 0; }
.arc-dot--ok { color: var(--arc-state-normal); }
.arc-dot--warn { color: var(--arc-state-degraded-audio); }
.arc-sensors { width: 100%; border-collapse: collapse; margin-bottom: var(--arc-sp-4); font-size: var(--arc-fs-caption); }
.arc-sensors td { padding: var(--arc-sp-2); border-bottom: 1px solid var(--arc-border-subtle); }
.arc-saved { padding: var(--arc-sp-3); border-radius: var(--arc-radius-sm); font-size: var(--arc-fs-caption); }
.arc-saved--ok { background: var(--arc-normal-bg); color: var(--arc-state-normal); }
.arc-saved--error { background: var(--arc-red-bg); color: var(--arc-state-safe-state); }

/* -- Live - Radio Mode -- */
.arc-live--radio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--arc-sp-4); padding-top: var(--arc-sp-6); }
.arc-live__state { display: flex; flex-direction: column; align-items: center; gap: var(--arc-sp-2); }
.arc-live__icon { font-size: 40px; }
.arc-live__big { font-size: var(--arc-fs-display); font-weight: var(--arc-fw-bold); line-height: 1.1; }
.arc-live__sub { color: var(--arc-text-secondary); }
.arc-live__radio-actions { display: flex; flex-direction: column; gap: var(--arc-sp-3); width: 100%; }
.arc-live__radio-actions .arc-btn { min-height: var(--arc-tap-primary); }
.arc-live__last { font-size: var(--arc-fs-caption); color: var(--arc-text-tertiary); }

/* -- Live - Observer Mode -- */
.arc-live__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--arc-sp-4); font-weight: var(--arc-fw-bold); }
.arc-badge { font-size: var(--arc-fs-caption); font-weight: var(--arc-fw-medium); }
.arc-live__frame { background: #111; color: #fff; min-height: 140px; display: flex; align-items: center; justify-content: center; border-radius: var(--arc-radius-md); }
.arc-live__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--arc-sp-2); margin: var(--arc-sp-3) 0; }
.arc-live__metrics dt { font-size: var(--arc-fs-micro); color: var(--arc-text-tertiary); }
.arc-live__metrics dd { margin: 0; font-weight: var(--arc-fw-medium); }
.arc-live__stream { display: flex; flex-direction: column; gap: var(--arc-sp-3); }
.arc-advisory { background: var(--arc-bg-card); border: 1px solid var(--arc-border-subtle); border-left: 4px solid var(--arc-border); border-radius: var(--arc-radius-sm); padding: var(--arc-sp-3); }
.arc-advisory__msg { margin: 0 0 var(--arc-sp-2); }
.arc-advisory__meta { display: flex; gap: var(--arc-sp-3); font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); margin-bottom: var(--arc-sp-2); }
.arc-advisory__flag { color: var(--arc-state-needs-review); font-weight: var(--arc-fw-medium); }
.arc-advisory__explain { min-height: var(--arc-tap-chip); }
.arc-advisory__detail { margin-top: var(--arc-sp-2); font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); }
.arc-advisory__detail code { background: var(--arc-bg-app); padding: 1px 4px; border-radius: 4px; }
.arc-live__voicelog { margin-top: var(--arc-sp-4); }
.arc-live__voicelog ul { margin: var(--arc-sp-2) 0 0; padding-left: var(--arc-sp-5); font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); }

/* -- Jobs -- */
.arc-jobs__tabs { display: flex; gap: 0; border: 1px solid var(--arc-border); border-radius: var(--arc-radius-sm); overflow: hidden; margin-bottom: var(--arc-sp-4); }
.arc-tab { flex: 1; min-height: var(--arc-tap-chip); border: none; background: var(--arc-bg-card); color: var(--arc-text-secondary); font: inherit; cursor: pointer; }
.arc-tab.is-active { background: var(--arc-primary-bg); color: var(--arc-action-primary); font-weight: var(--arc-fw-bold); }
.arc-jobs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--arc-sp-2); }
.arc-jobs__item { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; gap: 2px var(--arc-sp-2); align-items: center; padding: var(--arc-sp-3); background: var(--arc-bg-card); border: 1px solid var(--arc-border-subtle); border-radius: var(--arc-radius-sm); }
.arc-jobs__id { font-weight: var(--arc-fw-medium); }
.arc-jobs__desc { grid-column: 2 / 4; font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); }
.arc-jobs__time { grid-column: 2 / 4; font-size: var(--arc-fs-micro); color: var(--arc-text-tertiary); }
.arc-jobs__empty { padding: var(--arc-sp-5); text-align: center; color: var(--arc-text-tertiary); }
.arc-live__demo-safe { margin-top: var(--arc-sp-5); width: 100%; }

/* -- Review -- */
.arc-review__list { list-style: none; margin: 0 0 var(--arc-sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--arc-sp-2); }
.arc-review__detail { background: var(--arc-bg-card); border: 1px solid var(--arc-border-subtle); border-radius: var(--arc-radius-md); padding: var(--arc-sp-4); }
.arc-review__sources ul { margin: var(--arc-sp-2) 0; padding-left: var(--arc-sp-5); }
.arc-review__sources code { background: var(--arc-bg-app); padding: 1px 4px; border-radius: 4px; }
.arc-review__comment { display: flex; flex-direction: column; gap: var(--arc-sp-2); margin: var(--arc-sp-3) 0; }
.arc-review__comment textarea { width: 100%; padding: var(--arc-sp-2); border: 1px solid var(--arc-border); border-radius: var(--arc-radius-sm); font: inherit; }

/* -- SAFE STATE overlay -- */
.arc-safe {
  position: fixed; inset: 0; z-index: var(--arc-z-safe-state);
  background: var(--arc-bg-card);
  display: flex; align-items: center; justify-content: center;
  padding: var(--arc-sp-5);
}
.arc-safe[hidden] { display: none; }
.arc-safe__inner { max-width: var(--arc-content-max); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--arc-sp-4); }
.arc-safe__icon { font-size: 72px; color: var(--arc-state-safe-state); line-height: 1; }
.arc-safe__title { font-size: 32px; color: var(--arc-state-safe-state); font-weight: var(--arc-fw-bold); margin: 0; }
.arc-safe__msg { color: var(--arc-text-primary); font-size: var(--arc-fs-body); }
.arc-safe__reason, .arc-safe__since { font-size: var(--arc-fs-caption); color: var(--arc-text-secondary); margin: 0; }
.arc-safe__ack {
  min-height: var(--arc-tap-primary); width: 100%;
  border: 2px solid var(--arc-state-safe-state); color: var(--arc-state-safe-state);
  background: var(--arc-bg-card); font-weight: var(--arc-fw-bold);
  margin-top: var(--arc-sp-4);
}

/* -- Selftest overlay (?selftest=1) -- */
#arc-selftest {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; padding: var(--arc-sp-4);
}
.arc-selftest__box {
  position: relative; background: var(--arc-bg-card); border-radius: var(--arc-radius-md);
  padding: var(--arc-sp-5); max-width: var(--arc-content-max); width: 100%;
  max-height: 90dvh; overflow: auto; box-shadow: var(--arc-shadow-card);
}
.arc-selftest__head { margin: 0 0 var(--arc-sp-3); font-size: var(--arc-fs-h2); }
.arc-selftest__head.ok { color: var(--arc-state-normal); }
.arc-selftest__head.fail { color: var(--arc-state-safe-state); }
.arc-selftest__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--arc-sp-2); }
.arc-selftest__list li { font-size: var(--arc-fs-caption); }
.arc-selftest__list li.ok { color: var(--arc-state-normal); }
.arc-selftest__list li.fail { color: var(--arc-state-safe-state); font-weight: var(--arc-fw-bold); }
.arc-selftest__list em { color: var(--arc-text-tertiary); font-style: normal; }
#arc-selftest-close { position: absolute; top: var(--arc-sp-3); right: var(--arc-sp-3); width: 32px; height: 32px; border: none; background: transparent; font-size: 24px; cursor: pointer; color: var(--arc-text-tertiary); }

/* -- Demo narration caption (?demo=safe scripted runner, Sprint 4) -- */
#arc-demo-caption {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--arc-nav-h, 56px) + var(--arc-sp-3));
  z-index: 9998; max-width: var(--arc-content-max); width: calc(100% - var(--arc-sp-5));
  display: flex; align-items: center; gap: var(--arc-sp-3);
  padding: var(--arc-sp-3) var(--arc-sp-4);
  background: var(--arc-bg-card); border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-md); box-shadow: var(--arc-shadow-card);
  font-size: var(--arc-fs-body);
}
.arc-demo-caption__chip {
  flex: none; padding: 2px var(--arc-sp-2); border-radius: var(--arc-radius-sm);
  background: var(--arc-primary); color: #fff; font-size: var(--arc-fs-caption);
  font-weight: var(--arc-fw-bold); letter-spacing: 0.06em;
}
.arc-demo-caption__text { flex: 1 1 auto; }
.arc-demo-caption__step { flex: none; color: var(--arc-text-tertiary); font-variant-numeric: tabular-nums; }

/* -- Failure-injection banner (?inject=<scenario>, Sprint 4) -- */
#arc-inject-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: var(--arc-sp-3); z-index: 9998;
  max-width: var(--arc-content-max); width: calc(100% - var(--arc-sp-5));
  display: flex; align-items: center; gap: var(--arc-sp-3);
  padding: var(--arc-sp-2) var(--arc-sp-4);
  background: var(--arc-bg-card); border: 1px solid var(--arc-primary);
  border-radius: var(--arc-radius-md); box-shadow: var(--arc-shadow-card);
  font-size: var(--arc-fs-caption);
}
.arc-inject-banner__chip {
  flex: none; padding: 2px var(--arc-sp-2); border-radius: var(--arc-radius-sm);
  background: var(--arc-primary); color: #fff; font-weight: var(--arc-fw-bold); letter-spacing: 0.06em;
}
.arc-inject-banner__text { flex: 1 1 auto; font-variant-numeric: tabular-nums; }