/* Phase 3 field instruments.
   Each block is route-scoped so the protected calculators keep their own geometry,
   state, keyboard behavior, print mode, and responsive control order. */

body.ee-route-lumen {
  background: #F6E8D7;
  color: #0D1117;
}

body.ee-route-lumen .app {
  width: var(--ee-p3-instrument-frame);
  padding: 18px 0 72px;
}

body.ee-route-lumen #app > .topbar {
  min-height: 86px;
  padding: 12px 0 18px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-lumen .hero-copy h1,
body.ee-route-lumen .topbar h1 {
  color: #0D1117;
  font-family: var(--ee-p3-display);
  font-size: clamp(34px, 4vw, 64px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

body.ee-route-lumen .hero-copy p { color: #665F57; font-size: 15px; }
body.ee-route-lumen .quickline { border: 1px solid rgba(13, 17, 23, .2); border-radius: 0; background: #FFF8ED; box-shadow: none; }
body.ee-route-lumen main.workspace { gap: 16px; margin-top: 16px; }
body.ee-route-lumen #planWrap { border: 1px solid rgba(13, 17, 23, .32); border-radius: 0; box-shadow: none; }
body.ee-route-lumen .inspector,
body.ee-route-lumen .compare-panel { border: 1px solid rgba(13, 17, 23, .2); border-radius: 0; box-shadow: none; }
body.ee-route-lumen .result-ribbon { border-radius: 0; box-shadow: none; }
body.ee-route-lumen .result-ribbon > * { border-radius: 0; }
body.ee-route-lumen .top-actions > button,
body.ee-route-lumen .top-actions > a,
body.ee-route-lumen .quickline button { min-height: 44px; border-radius: 0; }

body.ee-route-mount {
  background: #F6E8D7;
  color: #0D1117;
}

body.ee-route-mount .app {
  width: var(--ee-p3-instrument-frame);
  padding: 16px 0 72px;
}

body.ee-route-mount .app > .topbar {
  min-height: 54px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-mount .intro {
  min-height: 0;
  padding: clamp(22px, 4vw, 48px) 0 22px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-mount .intro h1 {
  color: #0D1117;
  font-family: var(--ee-p3-display);
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: .88;
  letter-spacing: -.045em;
}

body.ee-route-mount .intro p { max-width: 56ch; color: #665F57; font-size: 15px; }
body.ee-route-mount .confidence { max-width: 30ch; border-left-width: 1px; color: #665F57; }
body.ee-route-mount main.workspace { gap: 16px; }
body.ee-route-mount .surface,
body.ee-route-mount .panel,
body.ee-route-mount .tape-handoff { border-radius: 0; box-shadow: none; }
html[data-theme="dark"] body.ee-route-mount .surface,
html[data-theme="dark"] body.ee-route-mount .panel,
html[data-theme="dark"] body.ee-route-mount .tape-handoff { color: #F3E8D7; }
body.ee-route-mount #surface { border: 1px solid rgba(13, 17, 23, .28); }
body.ee-route-mount .quick-setup { border-bottom-color: rgba(13, 17, 23, .2); }
body.ee-route-mount .quick-group.is-choice { background: rgba(252, 76, 2, .055); }
body.ee-route-mount .best-action { min-height: 72px; background: #FC4C02; color: #0D1117; }
body.ee-route-mount .front-stage { min-height: 560px; }
body.ee-route-mount .front-stage svg { min-height: 560px; }
body.ee-route-mount .stage-label,
body.ee-route-mount .coach { border-radius: 0; background: #FFF8ED; }

body.ee-route-bend {
  background: #0D1117;
  color: #F6E8D7;
}

body.ee-route-bend .shell {
  width: var(--ee-p3-instrument-frame);
  padding: 16px 0 84px;
}

body.ee-route-bend .shell > .topbar {
  min-height: 50px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(246, 232, 215, .22);
}

body.ee-route-bend .hero {
  padding: clamp(24px, 4vw, 52px) 0 18px;
  background: transparent;
  border-bottom: 1px solid rgba(246, 232, 215, .2);
}

body.ee-route-bend .hero .display,
body.ee-route-bend .hero h1 {
  color: #F6E8D7;
  font-family: var(--ee-p3-display);
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: .86;
  letter-spacing: -.045em;
}

body.ee-route-bend .hero .eyebrow { color: rgba(246, 232, 215, .62); }
body.ee-route-bend .mode-rail,
body.ee-route-bend .select-wrap,
body.ee-route-bend #workbench,
body.ee-route-bend .drawing-panel,
body.ee-route-bend #controlsPanel { border-radius: 0; box-shadow: none; }
body.ee-route-bend .stage-answer,
body.ee-route-bend .mode-rail { backdrop-filter: none; }
body.ee-route-bend .stage-answer { border-radius: 0; background: #F6E8D7; }
body.ee-route-bend .mode-rail { background: #171B20; }
body.ee-route-bend #workbench { border-color: rgba(246, 232, 215, .25); }
body.ee-route-bend .drawing-panel { background: #090C10; }
body.ee-route-bend .mode-rail button[aria-pressed="true"] { box-shadow: inset 0 -3px #FC4C02; }
body.ee-route-bend .primary,
body.ee-route-bend .field-open-btn { border-radius: 0; background: #FC4C02; color: #0D1117; }
body.ee-route-bend .route-coach { border-radius: 0; box-shadow: none; }

body.ee-route-colour {
  background: #F6E8D7;
  color: #0D1117;
}

body.ee-route-colour .app {
  width: var(--ee-p3-instrument-frame);
  padding: 16px 0 76px;
}

body.ee-route-colour .app > .topbar {
  min-height: 62px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-colour .hero { padding: clamp(26px, 5vw, 68px) 0 24px; }
body.ee-route-colour .hero h1 { color: #0D1117; font-family: var(--ee-p3-display); font-size: clamp(40px, 5.4vw, 78px); line-height: .87; letter-spacing: -.04em; text-transform: uppercase; }
body.ee-route-colour .hero p { color: #665F57; max-width: 56ch; font-size: 16px; }
body.ee-route-colour main.shell { gap: 16px; }
body.ee-route-colour .rail,
body.ee-route-colour .stage,
body.ee-route-colour .canvas,
body.ee-route-colour .dock,
body.ee-route-colour .panel,
body.ee-route-colour .result { border-radius: 0; box-shadow: none; }
body.ee-route-colour .stage,
body.ee-route-colour .dock,
body.ee-route-colour .panel,
body.ee-route-colour .result {
  background: #111419;
  color: #F6E8D7;
  border-color: rgba(246, 232, 215, .24);
}
body.ee-route-colour .stage-head,
body.ee-route-colour .dock,
body.ee-route-colour .panel-title,
body.ee-route-colour .field-card { border-color: rgba(246, 232, 215, .18); }
body.ee-route-colour .stage-title strong,
body.ee-route-colour .dock-head strong,
body.ee-route-colour .panel-title h2,
body.ee-route-colour .field-card h3 { color: #F6E8D7; }
body.ee-route-colour .stage-title span,
body.ee-route-colour .dock-head small,
body.ee-route-colour .panel-title p,
body.ee-route-colour .field-card small,
body.ee-route-colour .result-copy p,
body.ee-route-colour .warn { color: #C7B9A6; }
body.ee-route-colour .result-key { background: #0D1117; color: #F6E8D7; }
body.ee-route-colour .result-copy strong,
body.ee-route-colour .warn b { color: #F6E8D7; }
body.ee-route-colour .note { backdrop-filter: none; background: var(--surface); }
body.ee-route-colour .stage { border-color: rgba(246, 232, 215, .24); }
body.ee-route-colour .rail button[aria-pressed="true"] { background: #0D1117; color: #F6E8D7; box-shadow: inset 0 -3px #FC4C02; }
body.ee-route-colour .result { border-left: 3px solid #FC4C02; }

body.ee-route-calc {
  background: #F6E8D7;
  color: #0D1117;
}

body.ee-route-calc .shell {
  width: var(--ee-p3-instrument-frame);
  padding: 16px 0 80px;
}

body.ee-route-calc .page {
  background: #111419;
  color: #F6E8D7;
  border-color: rgba(246, 232, 215, .22);
}

body.ee-route-calc .topbar {
  min-height: 52px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-calc .intro {
  padding: clamp(24px, 4vw, 58px) 0 22px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-calc .intro h1 {
  color: #F6E8D7;
  font-family: var(--ee-p3-display);
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: .84;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

body.ee-route-calc .intro h1 em { color: #FC4C02; font-style: normal; }
body.ee-route-calc .intro p { color: #C7B9A6; font-size: 15px; }
body.ee-route-calc .intro p strong { color: #F6E8D7; }
body.ee-route-calc #instrument { border: 1px solid rgba(13, 17, 23, .28); border-radius: 0; box-shadow: none; }
body.ee-route-calc .instrument-head { border-bottom-color: rgba(13, 17, 23, .2); background: #FFF8ED; }
body.ee-route-calc .mode-bar { padding: 0; gap: 0; background: #0D1117; }
body.ee-route-calc .mode-btn { min-height: 50px; border-radius: 0; }
body.ee-route-calc .mode-btn[aria-pressed="true"] { box-shadow: inset 0 -4px #FC4C02; }
body.ee-route-calc .workspace { border-top: 1px solid rgba(13, 17, 23, .2); }
body.ee-route-calc .live-panel { background: #F6E8D7; }
body.ee-route-calc .focus-screen { min-height: 190px; border-radius: 0; box-shadow: none; }
body.ee-route-calc .focus-screen::after { display: none; }
body.ee-route-calc .relationship { border-radius: 0; box-shadow: none; }
body.ee-route-calc .relationship-stage { background: #0D1117; }
body.ee-route-calc .reading-card { border-radius: 0; box-shadow: none; }

body.ee-route-frac {
  background: #F6E8D7;
  color: #0D1117;
}

body.ee-route-frac main.app {
  width: var(--ee-p3-instrument-frame);
  padding: 16px 0 84px;
}

body.ee-route-frac .topbar {
  min-height: 52px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 17, 23, .2);
}

body.ee-route-frac .workspace {
  gap: 16px;
  margin-top: 16px;
}

body.ee-route-frac .instrument,
body.ee-route-frac .stage,
body.ee-route-frac .tape-control,
body.ee-route-frac .control-deck,
body.ee-route-frac #answerPanel,
body.ee-route-frac #fieldSidecar {
  border-radius: 0;
  box-shadow: none;
}

body.ee-route-frac .instrument { border-color: rgba(13, 17, 23, .3); background: #FFF8ED; }
body.ee-route-frac .stage { border-color: rgba(13, 17, 23, .22); }
body.ee-route-frac .tape-control { border-color: rgba(13, 17, 23, .24); }
body.ee-route-frac #answerPanel { border-left: 3px solid #FC4C02; }
body.ee-route-frac .primary { border-radius: 0; background: #FC4C02; color: #0D1117; }
body.ee-route-frac .sheet-backdrop,
body.ee-route-frac .sidecar-shade { backdrop-filter: none; }

@media (max-width: 820px) {
  body.ee-route-lumen .app,
  body.ee-route-mount .app,
  body.ee-route-bend .shell,
  body.ee-route-colour .app,
  body.ee-route-calc .shell,
  body.ee-route-frac main.app { width: min(100% - 24px, 1240px); }

  body.ee-route-lumen .app,
  body.ee-route-mount .app,
  body.ee-route-bend .shell,
  body.ee-route-colour .app,
  body.ee-route-calc .shell,
  body.ee-route-frac main.app { padding-top: 12px; }

  body.ee-route-lumen #app > .topbar,
  body.ee-route-mount .app > .topbar,
  body.ee-route-bend .shell > .topbar,
  body.ee-route-colour .app > .topbar,
  body.ee-route-calc .topbar,
  body.ee-route-frac .topbar { min-height: 44px; }

  body.ee-route-lumen .hero-copy h1,
  body.ee-route-mount .intro h1,
  body.ee-route-bend .hero .display,
  body.ee-route-colour .hero h1,
  body.ee-route-calc .intro h1 { font-size: clamp(36px, 12vw, 58px); }

  body.ee-route-mount .front-stage,
  body.ee-route-mount .front-stage svg { min-height: 420px; }
}

@media (max-width: 520px) {
  body.ee-route-lumen .hero-copy p,
  body.ee-route-mount .intro p,
  body.ee-route-colour .hero p,
  body.ee-route-calc .intro p { font-size: 14px; }
  body.ee-route-mount .front-stage,
  body.ee-route-mount .front-stage svg { min-height: 350px; }
  body.ee-route-lumen .top-actions > button,
  body.ee-route-lumen .top-actions > a { min-width: 44px; }
}

/* A fine visual track can still sit inside a generous finger target.  These
   instrument-specific hit areas preserve the precise drawing language while
   keeping real controls usable on a phone or with work gloves. */
@media (max-width: 520px), (pointer: coarse) {
  body.ee-route-lumen .range {
    height: 40px;
    min-height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 5px;
  }

  body.ee-route-lumen .num-field input,
  body.ee-route-lumen .num-field select { min-height: 38px; }

  body.ee-route-mount .size-presets button {
    min-width: 32px;
    min-height: 32px;
    padding: 4px;
  }

  body.ee-route-mount .why button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  body.ee-route-mount input[type="range"] {
    height: 40px;
    min-height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 5px;
  }

  body.ee-route-bend #stageRotateControl,
  body.ee-route-bend #storyRange {
    height: 40px;
    min-height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 5px;
  }

  body.ee-route-colour .band { min-width: 40px; }

  body.ee-route-frac .icon-btn,
  body.ee-route-frac .undo-btn {
    min-width: 40px;
    min-height: 40px;
  }
}