/*
 * Steady public surfaces — Progress-led visual system.
 *
 * This stylesheet intentionally loads after each standalone page's embedded
 * fallback CSS. It aligns the demo, legal pages, and pilot telemetry with the
 * app's bright, graph-forward Progress experience without changing behavior.
 */

:root {
  --paper: #ffffff;
  --ink: #14213d;
  --forest: #5155d7;
  --forest2: #0891b2;
  --sage: #f3f6ff;
  --coral: #6d5ce8;
  --line: #e4e9f2;
  --card: #ffffff;
  --white: #ffffff;
  --muted: #526079;
  --shadow: 0 18px 48px rgba(20, 33, 61, .08);
  --public-gradient: linear-gradient(135deg, #5b5fe8 0%, #0e7490 100%);
  --public-font: "Avenir Next", Avenir, "Segoe UI", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  background: #ffffff;
  color-scheme: light;
}

body {
  background: #ffffff !important;
  color: var(--ink);
  font-family: var(--public-font) !important;
  letter-spacing: -.006em;
}

h1,
h2,
h3,
.head-copy h1,
.map-card h2,
.session-plan h2,
.demo-bridge h2,
.session-commitment h2,
.cta-card h2,
.empty b,
.card b,
section > h2 {
  color: var(--ink);
  font-family: var(--public-font) !important;
  font-style: normal;
  letter-spacing: -.025em;
}

a {
  color: #4246c7;
  text-decoration-color: rgba(66, 70, 199, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font-family: var(--public-font);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(8, 145, 178, .42) !important;
  outline-offset: 3px;
}

code {
  background: #f1f4fb;
  border: 1px solid #e3e8f2;
  color: #253553;
  border-radius: 5px;
}

/* Public Mapping demo */
body > .wrap {
  max-width: 640px;
  padding-top: 24px;
}

body > .wrap > header {
  border-bottom-color: var(--line);
}

.orb-core {
  background: radial-gradient(circle at 35% 30%, #dff8ff 0%, #6e74ed 48%, #087e9b 100%);
  box-shadow: 0 12px 32px rgba(81, 85, 215, .22), inset 0 2px 8px rgba(255, 255, 255, .55);
}

.orb-aura {
  border-color: rgba(81, 85, 215, .26);
}

.head-copy h1 {
  color: var(--ink);
  font-weight: 700;
}

.head-copy p,
.session-plan p,
.demo-bridge p,
.session-commitment p,
.session-step small,
.demo-bridge small,
.session-commitment small,
footer {
  color: var(--muted);
}

.restart,
.chip,
.demo-bridge-options button,
.commitment-options button,
button.refresh {
  background: #ffffff;
  border-color: #dbe2ee;
  color: #3438ad;
  box-shadow: 0 4px 14px rgba(20, 33, 61, .04);
}

.restart:hover,
.chip:hover,
.demo-bridge-options button:hover,
.demo-bridge-options button.selected,
.commitment-options button:hover,
.commitment-options button.selected,
button.refresh:hover {
  background: #f6f7ff;
  border-color: #787cf0;
}

.dots i {
  background: #dbe1ec;
}

.dots i.on {
  background: #7a7eec;
}

.dots i.now {
  background: #0891b2;
}

.coach,
.map-card,
.session-plan,
.demo-bridge,
.session-commitment {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(20, 33, 61, .07);
}

.user {
  background: var(--public-gradient);
  color: #ffffff;
}

.typing b {
  background: #6c70e7;
}

.map-card {
  position: relative;
  overflow: hidden;
}

.map-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--public-gradient);
}

.map-row,
.session-step {
  border-color: var(--line);
}

.map-row b {
  color: #4b4fc4;
}

.map-row span,
.session-step span {
  color: var(--ink);
  font-family: var(--public-font);
}

.session-step b {
  background: #eef0ff;
  color: #4145bd;
}

.cta-card {
  background: var(--public-gradient);
  box-shadow: 0 20px 48px rgba(81, 85, 215, .2);
  color: #ffffff;
}

.cta-card h2,
.cta-card p,
.cta-ready-row b,
.cta-handoff b {
  color: #ffffff;
}

.cta-card p,
.cta-card small,
.cta-ready-row span,
.cta-handoff span {
  color: rgba(255, 255, 255, .78);
  font-family: var(--public-font);
}

.cta-card a {
  background: #ffffff;
  color: #3438ad;
}

.cta-ready-row,
.cta-handoff {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

.cta-ready-row.ready {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .35);
}

.cta-ready-row.ready i {
  background: #ffffff;
  color: #4145bd;
}

/* Legal and accessibility pages */
.site-header {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(20, 33, 61, .02);
}

.site-header .wrap {
  max-width: 72ch;
  min-height: 54px;
}

.back {
  color: #4246c7;
}

.crumb {
  color: var(--muted);
  font-family: var(--public-font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

main#main {
  max-width: 72ch;
}

main#main h1 {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 720;
}

main#main h2 {
  color: #263758;
  font-weight: 700;
}

.meta {
  color: var(--muted);
  border-bottom-color: var(--line);
}

.draft-banner {
  background: #fff8e8;
  border-color: #d38b20;
  color: #68420b;
  box-shadow: 0 8px 22px rgba(104, 66, 11, .06);
}

.emergency {
  background: #eefaff;
  border-color: #0891b2;
  color: #16465b;
}

.site-footer {
  background: #f7f9fc;
  border-top-color: var(--line);
}

.site-footer .wrap {
  max-width: 72ch;
  color: var(--muted);
}

.skip {
  background: #4246c7;
  color: #ffffff;
}

/* Pilot telemetry */
.shell {
  width: min(1080px, calc(100% - 36px));
}

.shell > header {
  position: relative;
  border-bottom-color: var(--line);
}

.shell > header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  width: min(38%, 300px);
  height: 3px;
  border-radius: 999px;
  background: var(--public-gradient);
}

.shell h1 {
  color: var(--ink);
  font-weight: 720;
}

.shell h1 em {
  color: #5155d7;
  font-style: normal;
}

.eyebrow {
  color: #4b4fc4;
}

.lede,
.section-sub,
#lastUpdated,
.card span.sub,
.notice,
.shell > footer {
  color: var(--muted);
  font-family: var(--public-font);
}

.pill {
  background: #eef0ff;
  border: 1px solid #dfe2ff;
  color: #3e42b3;
}

.pill i {
  background: #0891b2;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, .11);
}

.card,
.panel {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.card small {
  color: #64718a;
}

.card b {
  color: var(--ink);
  font-weight: 720;
}

.card.ok b {
  color: #087e65;
}

.card.warn b {
  color: #b24438;
}

.empty,
.notice {
  background: #fafbfe;
  border-color: var(--line);
}

.notice {
  border-left-color: #0891b2;
}

.empty b {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 600px) {
  body > .wrap {
    padding-inline: 16px;
  }

  .site-header .wrap,
  main#main,
  .site-footer .wrap {
    padding-inline: 18px;
  }

  .shell {
    width: min(100% - 28px, 1080px);
    padding-top: 32px;
  }

  .shell > header::after {
    width: 46%;
  }
}