/*
 * C.O.T. command design foundation
 * Additive visual primitives only: no routing, state, form, or data behavior.
 */
:root {
  --cot-command-ink: #eef3ea;
  --cot-command-ink-muted: #b9c4b5;
  --cot-command-night: #08100b;
  --cot-command-night-2: #101b13;
  --cot-command-panel: rgba(18, 29, 20, 0.88);
  --cot-command-panel-solid: #121d14;
  --cot-command-panel-soft: rgba(238, 243, 234, 0.065);
  --cot-command-line: rgba(189, 205, 157, 0.2);
  --cot-command-line-strong: rgba(208, 224, 169, 0.42);
  --cot-command-olive: #718323;
  --cot-command-olive-bright: #9eae4c;
  --cot-command-gold: #d09a2e;
  --cot-command-success: #45a875;
  --cot-command-warning: #dda83f;
  --cot-command-danger: #d86464;
  --cot-command-info: #5fa6bd;
  --cot-command-radius-xs: 8px;
  --cot-command-radius-sm: 12px;
  --cot-command-radius-md: 18px;
  --cot-command-radius-lg: 26px;
  --cot-command-space-1: 4px;
  --cot-command-space-2: 8px;
  --cot-command-space-3: 12px;
  --cot-command-space-4: 16px;
  --cot-command-space-5: 24px;
  --cot-command-space-6: 32px;
  --cot-command-space-7: 48px;
  --cot-command-depth-1: 0 8px 22px rgba(2, 10, 5, 0.18);
  --cot-command-depth-2: 0 18px 48px rgba(2, 10, 5, 0.28);
  --cot-command-depth-3: 0 28px 80px rgba(2, 10, 5, 0.38);
  --cot-command-glow-olive: 0 0 30px rgba(158, 174, 76, 0.16);
  --cot-command-glow-gold: 0 0 30px rgba(208, 154, 46, 0.18);
  --cot-command-fast: 120ms;
  --cot-command-base: 180ms;
  --cot-command-slow: 420ms;
  --cot-command-ease: cubic-bezier(.2, .78, .28, 1);
  --cot-command-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --cot-command-perspective: 1100px;
  --cot-command-tilt: 1deg;
  --cot-command-blur: 16px;
}

/* Reusable opt-in primitives for future vertical slices. */
.cot-command-panel,
.cot-mission-card,
.cot-command-readout {
  position: relative;
  isolation: isolate;
  color: var(--cot-command-ink);
  border: 1px solid var(--cot-command-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .065), transparent 42%), var(--cot-command-panel);
  border-radius: var(--cot-command-radius-md);
  box-shadow: var(--cot-command-depth-2);
  backdrop-filter: blur(var(--cot-command-blur));
}

.cot-command-panel::before,
.cot-mission-card::before,
.cot-command-readout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cot-command-gold), transparent 20%) top left / 42% 1px no-repeat;
  opacity: .72;
}

.cot-command-kicker {
  color: var(--cot-command-gold);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cot-status-dot {
  inline-size: .65rem;
  block-size: .65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
}

/* Portal dashboard vertical slice. Selectors are visual-only and preserve controls. */
.portal-shell:has(.portal-toolbar--home) {
  --cot-text: var(--cot-command-ink);
  --cot-muted: var(--cot-command-ink-muted);
  --cot-surface: var(--cot-command-panel-solid);
  --cot-surface-soft: #17231a;
  --cot-border: var(--cot-command-line);
  --cot-border-strong: var(--cot-command-line-strong);
  --cot-shadow: var(--cot-command-depth-1);
  position: relative;
  isolation: isolate;
  perspective: var(--cot-command-perspective);
  padding: clamp(24px, 3vw, 46px);
  border: 1px solid rgba(205, 219, 171, .12);
  border-radius: clamp(22px, 3vw, 34px);
  color: var(--cot-command-ink);
  background:
    radial-gradient(circle at 14% 4%, rgba(158, 174, 76, .18), transparent 27%),
    radial-gradient(circle at 92% 18%, rgba(208, 154, 46, .11), transparent 22%),
    linear-gradient(145deg, #142016, var(--cot-command-night) 62%);
  box-shadow: var(--cot-command-depth-3);
  overflow: clip;
}

.portal-shell:has(.portal-toolbar--home)::before,
.portal-shell:has(.portal-toolbar--home)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.portal-shell:has(.portal-toolbar--home)::before {
  opacity: .3;
  background-image:
    linear-gradient(rgba(193, 210, 159, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 210, 159, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.portal-shell:has(.portal-toolbar--home)::after {
  inset: -30% -10% auto 40%;
  height: 58%;
  transform: rotate(-8deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .045), transparent 62%);
}

.portal-shell:has(.portal-toolbar--home) .portal-toolbar--home {
  position: relative;
  min-height: 112px;
  padding: 0 0 var(--cot-command-space-5);
  border-bottom: 1px solid var(--cot-command-line);
}

.portal-shell:has(.portal-toolbar--home) .portal-title {
  color: var(--cot-command-ink);
  text-wrap: balance;
  text-shadow: 0 8px 32px rgba(0, 0, 0, .32);
}

.portal-shell:has(.portal-toolbar--home) .portal-subtitle {
  max-width: 58ch;
  color: var(--cot-command-ink-muted);
}

.portal-shell:has(.portal-toolbar--home) :is(.summary-card, .filter-bar, .projects-bulk-dropdown, .project-card) {
  border-color: var(--cot-command-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 46%), rgba(17, 28, 19, .9);
  box-shadow: var(--cot-command-depth-1);
  backdrop-filter: blur(var(--cot-command-blur));
}

.portal-shell:has(.portal-toolbar--home) .summary-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--cot-command-glow-gold), var(--cot-command-depth-1);
}

.portal-shell:has(.portal-toolbar--home) .summary-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cot-command-gold), var(--cot-command-olive-bright), transparent 85%);
}

.portal-shell:has(.portal-toolbar--home) :is(.input, .select) {
  color: var(--cot-command-ink);
  border-color: var(--cot-command-line);
  background: rgba(5, 13, 8, .72);
}

.portal-shell:has(.portal-toolbar--home) :is(.input, .select)::placeholder {
  color: #8f9c8d;
}

.portal-shell:has(.portal-toolbar--home) .select option {
  color: #eef3ea;
  background: #101b13;
}

.portal-shell:has(.portal-toolbar--home) .project-card {
  transform-style: preserve-3d;
  transition:
    transform var(--cot-command-base) var(--cot-command-ease),
    border-color var(--cot-command-fast) ease,
    box-shadow var(--cot-command-base) ease;
}

.portal-shell:has(.portal-toolbar--home) .project-card__main {
  color: inherit;
}

.portal-shell:has(.portal-toolbar--home) .project-card__title,
.portal-shell:has(.portal-toolbar--home) .project-card__progress-copy strong {
  color: var(--cot-command-ink);
}

.portal-shell:has(.portal-toolbar--home) :is(.project-card__subtitle, .project-card__progress-copy, .small-muted, .field-label) {
  color: var(--cot-command-ink-muted);
}

.portal-shell:has(.portal-toolbar--home) .meta-pill {
  color: var(--cot-command-ink);
  border-color: rgba(202, 218, 167, .14);
  background: rgba(238, 243, 234, .055);
}

.portal-shell:has(.portal-toolbar--home) .progress-bar {
  background: rgba(238, 243, 234, .1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

.portal-shell:has(.portal-toolbar--home) .progress-bar__fill {
  background: linear-gradient(90deg, var(--cot-command-olive), var(--cot-command-olive-bright), var(--cot-command-gold));
  box-shadow: 0 0 16px rgba(158, 174, 76, .3);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cot-command-gold) 82%, white);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .portal-shell:has(.portal-toolbar--home) .project-card:hover {
    transform: translateY(-4px) rotateX(var(--cot-command-tilt));
    border-color: var(--cot-command-line-strong);
    box-shadow: var(--cot-command-glow-olive), var(--cot-command-depth-2);
  }
}

/* Balanced tier: tablets and average laptops use less blur and flatter depth. */
@media (max-width: 1100px) {
  :root {
    --cot-command-blur: 10px;
    --cot-command-tilt: .4deg;
    --cot-command-depth-3: 0 20px 52px rgba(2, 10, 5, .3);
  }
}

/* Lightweight tier: mobile avoids expensive compositing and dense decoration. */
@media (max-width: 700px) {
  :root {
    --cot-command-blur: 0px;
    --cot-command-tilt: 0deg;
  }

  .portal-shell:has(.portal-toolbar--home) {
    width: min(100% - 16px, 1680px);
    padding: 20px 14px 68px;
    border-radius: 22px;
    background: linear-gradient(160deg, #152217, var(--cot-command-night) 48%);
  }

  .portal-shell:has(.portal-toolbar--home)::before,
  .portal-shell:has(.portal-toolbar--home)::after {
    display: none;
  }

  .portal-shell:has(.portal-toolbar--home) :is(.summary-card, .filter-bar, .projects-bulk-dropdown, .project-card) {
    backdrop-filter: none;
  }
}

/* Fallback tier: all information and controls remain standard HTML. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  :root {
    --cot-command-fast: 0ms;
    --cot-command-base: 0ms;
    --cot-command-slow: 0ms;
    --cot-command-blur: 0px;
    --cot-command-tilt: 0deg;
  }

  .portal-shell:has(.portal-toolbar--home),
  .portal-shell:has(.portal-toolbar--home) * {
    scroll-behavior: auto !important;
  }

  .portal-shell:has(.portal-toolbar--home)::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .cot-command-panel,
  .cot-mission-card,
  .cot-command-readout,
  .portal-shell:has(.portal-toolbar--home) :is(.summary-card, .filter-bar, .projects-bulk-dropdown, .project-card) {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Contrast correction v2: dashboard cards retain their established white content surface. */
.portal-shell:has(.portal-toolbar--home) .projects-grid > .project-card {
  overflow: hidden;
}

.portal-shell:has(.portal-toolbar--home) .projects-grid > .project-card .project-card__main {
  color: #172033 !important;
  background: #ffffff !important;
}

.portal-shell:has(.portal-toolbar--home) .projects-grid > .project-card :is(
  .project-card__title,
  .project-card__progress-copy strong,
  .meta-pill__value
) {
  color: #172033 !important;
}

.portal-shell:has(.portal-toolbar--home) .projects-grid > .project-card :is(
  .project-card__subtitle,
  .project-card__progress-copy,
  .meta-pill__label
) {
  color: #53645a !important;
}

.portal-shell:has(.portal-toolbar--home) .projects-grid > .project-card .meta-pill {
  color: #172033 !important;
  border-color: rgba(53, 72, 48, .16) !important;
  background: #f5f7f1 !important;
}

.portal-shell:has(.portal-toolbar--home) .projects-grid > .project-card .progress-bar {
  background: #e6e9e4 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12) !important;
}

.portal-shell:has(.portal-toolbar--home) .toggle {
  color: var(--cot-command-ink) !important;
  border-color: var(--cot-command-line-strong) !important;
  background: rgba(7, 17, 10, .74) !important;
}

.portal-shell:has(.portal-toolbar--home) .project-folder-tabs,
.portal-shell:has(.portal-toolbar--home) .project-folder-tabs.card {
  gap: 10px;
  padding: 9px;
  border-color: var(--cot-command-line) !important;
  background: rgba(7, 17, 10, .78) !important;
  box-shadow: var(--cot-command-depth-1) !important;
}

.portal-shell:has(.portal-toolbar--home) .project-folder-tabs .btn,
.portal-shell:has(.portal-toolbar--home) .project-folder-tabs button {
  color: #23301f !important;
  border-color: rgba(44, 61, 38, .2) !important;
  background: #eef2e7 !important;
  text-shadow: none !important;
}

.portal-shell:has(.portal-toolbar--home) .project-folder-tabs .btn--primary {
  color: #ffffff !important;
  border-color: #879a32 !important;
  background: linear-gradient(135deg, #718323, #56671d) !important;
  box-shadow: 0 7px 0 #344115, 0 12px 22px rgba(3, 12, 6, .28) !important;
}

/* Mobile project workflow: integrate breadcrumb into the green canvas. */
@media (max-width: 900px) {
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel) > .workspace-topbar,
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel) > .workspace-topbar.workspace-topbar--accent,
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel).cot97-mobile-project-shell > .workspace-topbar,
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel).cot97-mobile-project-shell > .workspace-topbar.workspace-topbar--accent {
    min-height: 58px !important;
    color: #f7f9ef !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(220, 232, 188, .18) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(158, 174, 76, .2), transparent 38%),
      linear-gradient(135deg, #274018, #132614) !important;
    box-shadow: none !important;
  }

  :is(.document-project-page--map-panel, .document-project-page--workflow-panel) > .workspace-topbar .workspace-topbar__inner,
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel).cot97-mobile-project-shell > .workspace-topbar .workspace-topbar__inner {
    min-height: 58px !important;
    padding: 9px 14px 10px !important;
  }

  :is(.document-project-page--map-panel, .document-project-page--workflow-panel) > .workspace-topbar .portal-back,
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel).cot97-mobile-project-shell > .workspace-topbar .portal-back {
    min-height: 40px !important;
    padding: 8px 14px !important;
    color: #f8faef !important;
    border: 1px solid rgba(220, 232, 188, .3) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #62751f, #415518) !important;
    box-shadow: 0 5px 0 #263510, 0 9px 18px rgba(2, 10, 5, .24) !important;
  }

  :is(.document-project-page--map-panel, .document-project-page--workflow-panel) > .workspace-topbar .workspace-topbar__label,
  :is(.document-project-page--map-panel, .document-project-page--workflow-panel).cot97-mobile-project-shell > .workspace-topbar .workspace-topbar__label {
    display: none !important;
  }
}