/* Shared COT field-game task theme. Scoped to Inspector and project workflow surfaces only. */
:root {
  --cot-task-bg: #14220f;
  --cot-task-bg-top: #243817;
  --cot-task-bg-bottom: #0d170d;
  --cot-task-heading-on-dark: #f7f8ef;
  --cot-task-surface: #ffffff;
  --cot-task-surface-soft: #f7f8f3;
  --cot-task-text: #102c40;
  --cot-task-text-secondary: #465965;
  --cot-task-label: #344955;
  --cot-task-placeholder: #75838b;
  --cot-task-border: #ced6d9;
  --cot-task-olive: #718323;
  --cot-task-olive-dark: #394812;
  --cot-task-gold: #d09a2e;
  --cot-task-cream: #f3f5df;
  --cot-task-danger: #9b2c2c;
  --cot-task-shadow: 0 18px 44px rgba(3, 17, 10, .28);
}

.inspector-game-workflow,
html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-report-builder,
html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-report-builder {
  --inspector-bg: var(--cot-task-bg);
  --inspector-surface: var(--cot-task-surface);
  --inspector-surface-soft: var(--cot-task-surface-soft);
  --inspector-text: var(--cot-task-text);
  --inspector-text-secondary: var(--cot-task-text-secondary);
  --inspector-label: var(--cot-task-label);
  --inspector-placeholder: var(--cot-task-placeholder);
  --inspector-border: var(--cot-task-border);
  --inspector-olive: var(--cot-task-olive);
  --inspector-olive-dark: var(--cot-task-olive-dark);
  --inspector-gold: var(--cot-task-gold);
  --inspector-cream: var(--cot-task-cream);
  color: var(--cot-task-text);
  background:
    radial-gradient(circle at 16% 0%, rgba(113, 131, 35, .28), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(208, 154, 46, .08), transparent 30%),
    linear-gradient(145deg, var(--cot-task-bg-top) 0%, #17280f 48%, var(--cot-task-bg-bottom) 100%) !important;
}

html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-report-builder,
html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-report-builder {
  width: min(1180px, calc(100% - 24px)) !important;
  margin-inline: auto !important;
  padding: clamp(16px, 2.5vw, 30px) !important;
  border-radius: 28px !important;
  box-shadow: var(--cot-task-shadow) !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(.inspector-project-hud, .inspector-task-hud, .inspector-game-card, .inspector-task-actions, .cot-wf-progress, .cot-wf-task-card, .cot-level-step-card, .cot-level-page__hero, .cot-level-page__footer, .cot-report-builder__hero, .cot-report-builder__body) {
  border: 1px solid var(--cot-task-border) !important;
  background: var(--cot-task-surface) !important;
  color: var(--cot-task-text) !important;
  box-shadow: 0 10px 26px rgba(4, 26, 14, .16), 0 3px 0 rgba(57, 72, 18, .18) !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(h1, h2, h3, h4, strong, .field-label, label span) {
  color: var(--cot-task-text) !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(p, small, .small-muted, .inspector-empty-evidence, .inspector-task-copy p) {
  color: var(--cot-task-text-secondary) !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(input, textarea, select) {
  color: var(--cot-task-text) !important;
  background: #fff !important;
  border-color: #8e9a91 !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(input, textarea)::placeholder {
  color: var(--cot-task-placeholder) !important;
  opacity: 1 !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(button, .btn, [role="button"]) {
  min-height: 44px;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
}

@media (hover:hover) {
  :is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(button, .btn, [role="button"]):not(:disabled):hover {
    transform: translateY(-2px);
  }
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(button, .btn, [role="button"]):not(:disabled):active {
  transform: translateY(3px) scale(.995) !important;
  box-shadow: 0 1px 0 var(--cot-task-olive-dark), 0 4px 10px rgba(4, 26, 14, .16) !important;
}

:is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) :is(button, .btn):disabled {
  opacity: 1 !important;
  color: #5f6b63 !important;
  background: #e8ebe5 !important;
  border-color: #b7c0b7 !important;
  box-shadow: 0 3px 0 #98a398 !important;
  cursor: not-allowed !important;
}

.cot-task-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px !important;
  padding: 7px 11px;
  border: 1px solid var(--cot-task-border);
  border-radius: 999px;
  color: var(--cot-task-text);
  background: var(--cot-task-cream);
  font-size: .78rem;
  font-weight: 850;
}

.cot-measurement-live-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(320px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.cot-measurement-preview {
  position: sticky;
  top: 12px;
  min-height: 300px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--cot-task-border);
  border-radius: 20px;
  background: linear-gradient(160deg, #f8faf5, #eef3e6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

.cot-measurement-preview svg { display: block; width: 100%; height: auto; min-height: 270px; }
.cot-measurement-preview .cot-preview-bg { fill: #f8faf5; stroke: #cbd5c7; }
.cot-measurement-preview .cot-preview-line { stroke: #30485a; stroke-width: 4; stroke-linecap: round; }
.cot-measurement-preview .cot-preview-line.is-current { stroke: var(--cot-task-gold); stroke-width: 6; }
.cot-measurement-preview .cot-preview-line.is-calculated { stroke: var(--cot-task-olive); stroke-dasharray: 8 6; }
.cot-measurement-preview .cot-preview-next { stroke: #7c8990; stroke-width: 3; stroke-dasharray: 10 8; }
.cot-measurement-preview .cot-preview-vertex { fill: #fff; stroke: var(--cot-task-olive-dark); stroke-width: 3; }
.cot-measurement-preview text { fill: var(--cot-task-text); font-weight: 800; font-size: 15px; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

.cot-measurement-step-card {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--cot-task-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(4, 26, 14, .1);
}

.cot-measurement-step-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.cot-measurement-step-actions .is-primary { color: #fff !important; background: var(--cot-task-olive) !important; border-color: var(--cot-task-olive-dark) !important; box-shadow: 0 5px 0 var(--cot-task-olive-dark) !important; }

.cot-measurement-progress {
  height: 9px;
  overflow: hidden;
  margin: 10px 0 18px;
  border-radius: 999px;
  background: #dfe5e5;
}
.cot-measurement-progress > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cot-task-olive),var(--cot-task-gold)); transition:width 280ms ease; }

.cot-task-enter { animation: cotTaskEnter 230ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes cotTaskEnter { from { opacity:0; transform:translateY(10px) scale(.992); } to { opacity:1; transform:none; } }

@media (max-width: 760px) {
  .cot-measurement-live-layout { grid-template-columns: 1fr; }
  .cot-measurement-preview { position: sticky; top: 0; z-index: 2; min-height: 210px; }
  .cot-measurement-preview svg { min-height: 200px; max-height: 34dvh; }
  .cot-measurement-step-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cot-task-enter { animation: none !important; }
  :is(.inspector-game-workflow, .cot-level-page, .cot-report-builder) *, .cot-measurement-progress > i { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* Shared task-shell polish: green mission canvas, readable headings, compact content. */
html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-report-builder,
html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-report-builder {
  min-height: auto !important;
  height: auto !important;
  padding-block: clamp(18px, 2.5vw, 32px) !important;
  overflow: visible !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) :is(.cot-wf-hero, .cot-wf-level-hero, .cot-level-page__hero) {
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  width: min(780px, 100%) !important;
  margin: 8px auto 24px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) :is(.cot-wf-hero, .cot-wf-level-hero, .cot-level-page__hero) :is(h1, h2, .cot-level-page__title) {
  margin: 0 !important;
  color: var(--cot-task-heading-on-dark) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .24) !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) :is(.cot-wf-hero, .cot-wf-level-hero, .cot-level-page__hero) .eyebrow {
  margin: 0 !important;
  padding: 6px 13px !important;
  border: 1px solid rgba(202, 210, 197, .82) !important;
  border-radius: 999px !important;
  background: var(--cot-task-cream) !important;
  color: var(--cot-task-olive-dark) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .14) !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-progress {
  margin-bottom: 18px !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) :is(.cot-wf-task-card, .cot-level-step-card, .cot-report-builder__body) {
  min-height: 0 !important;
  height: auto !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-task-card {
  padding: clamp(20px, 2.6vw, 30px) !important;
  border-color: #c6d0c1 !important;
  background: linear-gradient(155deg, #ffffff 0%, #fbfcf7 100%) !important;
  box-shadow: 0 14px 30px rgba(1, 14, 7, .22), 0 3px 0 rgba(57, 72, 18, .18) !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-upload-box {
  min-height: 150px !important;
  padding: clamp(18px, 2.4vw, 24px) !important;
  border-color: #9daa88 !important;
  background: linear-gradient(160deg, #fbfcf7, #f3f5df) !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-upload-box:is(:hover, :focus-within) {
  border-color: var(--cot-task-olive) !important;
  background: #f1f5df !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-upload-box :is(small, span) {
  color: #425764 !important;
}

:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-upload-box .btn,
:is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-upload-box label.btn {
  min-width: min(260px, 100%) !important;
  padding-inline: 22px !important;
  color: #4d5d19 !important;
  white-space: normal !important;
  text-align: center !important;
}

.cot-task-form-actions-shell {
  width: min(980px, 100%) !important;
  margin-top: 18px !important;
}

.cot-task-form-actions {
  gap: 10px !important;
  padding: 10px !important;
  border-color: #c6d0c1 !important;
  background: rgba(247, 248, 243, .98) !important;
  box-shadow: 0 12px 26px rgba(1, 14, 7, .24), 0 3px 0 rgba(57, 72, 18, .16) !important;
}

.cot-task-form-actions .btn--ghost:not(:disabled),
.cot-task-form-actions__skip:not(:disabled) {
  color: #263b2d !important;
  background: #ffffff !important;
  border-color: #b7c1b3 !important;
}

.cot-task-form-actions .btn--secondary:not(:disabled) {
  color: #55651e !important;
  background: var(--cot-task-cream) !important;
  border-color: #c9d3aa !important;
}

.cot-task-form-actions .btn--primary:not(:disabled) {
  color: #ffffff !important;
  background: var(--cot-task-olive) !important;
  border-color: var(--cot-task-olive-dark) !important;
}

.cot-task-form-actions .btn:disabled {
  color: #667168 !important;
  background: #e5e9e2 !important;
  border-color: #b8c0b6 !important;
  box-shadow: 0 3px 0 #9fa89d !important;
}

@media (max-width: 760px) {
  html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
  html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-project-map-page-router.cot-level-page,
  html[data-cot-route="project-level"] body.cot-project-map-route-active .cot-report-builder,
  html[data-cot-level-page-open="true"] body.cot-project-map-route-active .cot-report-builder {
    width: calc(100% - 12px) !important;
    padding: 14px 10px 24px !important;
    border-radius: 22px !important;
  }

  :is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) :is(.cot-wf-hero, .cot-wf-level-hero, .cot-level-page__hero) {
    margin-bottom: 18px !important;
  }

  :is(.cot-level-page--workflow, .cot-wf-page, .cot-report-builder) .cot-wf-task-card {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .cot-task-form-actions-shell {
    margin-top: 14px !important;
  }
}