@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700;800&family=JetBrains+Mono:wght@400;600;700;800&family=Orbitron:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Press+Start+2P&family=Share+Tech+Mono&family=VT323&display=swap");

:root {
  color-scheme: light;
  --bg: #f7f8f3;
  --surface: #ffffff;
  --surface-alt: #eef5f0;
  --ink: #202421;
  --muted: #69746d;
  --line: #d9dfd7;
  --accent: #166f6b;
  --accent-2: #d65d4e;
  --accent-3: #e5b64a;
  --good: #26825e;
  --warn: #a86614;
  --bad: #b8483e;
  --shadow: 0 10px 24px rgba(28, 41, 35, 0.08);
  --radius: 8px;
  --bottom-nav-height: 74px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  transition: padding-top 180ms ease;
}

body[data-ai-thinking="true"] {
  padding-top: calc(62px + env(safe-area-inset-top, 0px));
}

body[data-ai-thinking-placement="dialog"] {
  padding-top: 0;
}

.ai-thinking-layer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  min-height: calc(62px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-3));
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(19, 35, 29, 0.14);
}

.ai-thinking-layer[hidden] {
  display: none;
}

.ai-thinking-content {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  align-items: center;
  width: min(100%, 1120px);
  min-height: 38px;
  margin: 0 auto;
  gap: 10px;
}

.ai-thinking-compass {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
}

.ai-thinking-compass::before,
.ai-thinking-compass::after {
  position: absolute;
  width: 2px;
  height: 4px;
  background: var(--accent);
  content: "";
}

.ai-thinking-compass::before {
  top: 2px;
  box-shadow: 0 20px 0 var(--accent);
}

.ai-thinking-compass::after {
  right: 2px;
  width: 4px;
  height: 2px;
  box-shadow: -20px 0 0 var(--accent);
}

.ai-thinking-compass span {
  width: 4px;
  height: 18px;
  background: linear-gradient(to bottom, var(--accent-2) 0 50%, var(--accent) 50% 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: ai-compass-scan 1.5s ease-in-out infinite;
}

.ai-thinking-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.ai-thinking-copy strong,
.ai-thinking-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-thinking-copy strong {
  font-size: 0.82rem;
}

.ai-thinking-copy span {
  color: var(--muted);
  font-size: 0.73rem;
}

.ai-thinking-percent {
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}

.ai-thinking-track {
  width: min(100%, 1120px);
  height: 4px;
  margin: 3px auto 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}

.ai-thinking-track span {
  display: block;
  width: 8%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2));
  transition: width 500ms ease;
}

.ai-thinking-layer[data-state="success"] .ai-thinking-track span {
  background: var(--good);
}

.ai-thinking-layer[data-state="error"] .ai-thinking-track span {
  background: var(--bad);
}

.ai-thinking-layer[data-placement="dialog"] {
  top: var(--ai-dialog-top, 0);
  right: auto;
  left: var(--ai-dialog-left, 0);
  width: var(--ai-dialog-width, 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius) var(--radius) 0 0;
}

.modal-panel.ai-thinking-target {
  padding-top: 84px;
}

.importance-reasons {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.importance-reasons legend {
  margin-bottom: 10px;
  font-weight: 700;
}

.importance-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.importance-reason-grid .field:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.unknown-answer-btn {
  justify-self: start;
}

.goal-research-needs {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .importance-reason-grid {
    grid-template-columns: 1fr;
  }

  .importance-reason-grid .field:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

body[data-app-feel="game"] .ai-thinking-layer {
  --accent: #23e6ff;
  --accent-2: #ff3bd5;
  --accent-3: #ffe34d;
  --line: #3284ff;
  --surface: #101047;
  --ink: #f7f7ff;
  --muted: #9ac6ff;
  border-bottom-color: #23e6ff;
  background: #101047;
  color: #f7f7ff;
}

body[data-app-feel="game"] .ai-thinking-copy span {
  color: #9ac6ff;
}

body[data-app-feel="game"] .ai-thinking-percent,
body[data-app-feel="game"] .ai-thinking-compass {
  color: #23e6ff;
  border-color: #23e6ff;
}

body[data-app-feel="command-centre"] .ai-thinking-layer {
  --accent: #58e3a3;
  --accent-2: #e8b84a;
  --accent-3: #89c7a3;
  --line: #315944;
  --surface: #101814;
  --ink: #e7f4eb;
  --muted: #a5c7b1;
  border-bottom-color: #58e3a3;
  background: #101814;
  color: #e7f4eb;
}

body[data-app-feel="command-centre"] .ai-thinking-copy span {
  color: #a5c7b1;
}

@keyframes ai-compass-scan {
  0%,
  100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(22deg);
  }
}

body[data-theme="Deep Focus"] {
  --bg: #f3f5f6;
  --surface: #ffffff;
  --surface-alt: #eaf2f6;
  --ink: #182326;
  --muted: #5c6a70;
  --line: #d2dde1;
  --accent: #236a8a;
  --accent-2: #c45543;
  --accent-3: #d6a93d;
}

body[data-theme="Warm Sprint"] {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --surface-alt: #f2f2e5;
  --ink: #292620;
  --muted: #746e62;
  --line: #e2dccc;
  --accent: #467360;
  --accent-2: #c45448;
  --accent-3: #d99b32;
}

body[data-novelty="high"][data-novelty-visual="morning-signal"] {
  --bg: #f4f8f3;
  --surface-alt: #e8f4ee;
  --accent: #16766b;
  --accent-2: #c45543;
  --accent-3: #d4a438;
  --novelty-accent: #16766b;
}

body[data-novelty="high"][data-novelty-visual="morning-grove"] {
  --bg: #f6f7f1;
  --surface-alt: #edf1df;
  --accent: #4c703f;
  --accent-2: #ad4d4a;
  --accent-3: #b88a2d;
  --novelty-accent: #4c703f;
}

body[data-novelty="high"][data-novelty-visual="afternoon-field"] {
  --bg: #f3f7f8;
  --surface-alt: #e6f0f3;
  --accent: #2b7088;
  --accent-2: #c55c4c;
  --accent-3: #c99c36;
  --novelty-accent: #2b7088;
}

body[data-novelty="high"][data-novelty-visual="afternoon-current"] {
  --bg: #f7f6f1;
  --surface-alt: #ecefe8;
  --accent: #496b75;
  --accent-2: #a94f62;
  --accent-3: #b99232;
  --novelty-accent: #a94f62;
}

body[data-novelty="high"][data-novelty-visual="evening-ember"] {
  --bg: #f8f3ef;
  --surface-alt: #f3e9e1;
  --accent: #3e716a;
  --accent-2: #b94e45;
  --accent-3: #c18b30;
  --novelty-accent: #b94e45;
}

body[data-novelty="high"][data-novelty-visual="evening-violet"] {
  --bg: #f4f3f7;
  --surface-alt: #ebe8f0;
  --accent: #376f72;
  --accent-2: #7b568f;
  --accent-3: #bd8f34;
  --novelty-accent: #7b568f;
}

body[data-novelty="high"][data-novelty-visual="night-lantern"] {
  --bg: #eff3f4;
  --surface-alt: #e4ecee;
  --accent: #376a72;
  --accent-2: #ad554c;
  --accent-3: #c19334;
  --novelty-accent: #c19334;
}

body[data-novelty="high"][data-novelty-visual="night-ink"] {
  --bg: #f0f2f5;
  --surface-alt: #e4e8ee;
  --accent: #3f657b;
  --accent-2: #985265;
  --accent-3: #aa8b3c;
  --novelty-accent: #3f657b;
}

body[data-novelty="high"] .topbar,
body[data-novelty="high"] .coach-hero,
body[data-novelty="high"] .game-header,
body[data-novelty="high"] .quest-header,
body[data-novelty="high"] .command-hud {
  box-shadow: inset 0 -3px 0 var(--novelty-accent, var(--accent));
}

body[data-novelty="high"] .app-main > .section:nth-of-type(3n + 1) > .card,
body[data-novelty="high"] .coach-panel:nth-of-type(3n + 1),
body[data-novelty="high"] .game-panel:nth-of-type(3n + 1),
body[data-novelty="high"] .quest-panel:nth-of-type(3n + 1),
body[data-novelty="high"] .command-panel:nth-of-type(3n + 1) {
  border-color: var(--novelty-accent, var(--accent));
}

body[data-novelty="high"] .nav button[aria-current="page"],
body[data-novelty="high"] .coach-nav button[aria-current="page"],
body[data-novelty="high"] .game-nav button[aria-current="page"],
body[data-novelty="high"] .quest-nav button[aria-current="page"],
body[data-novelty="high"] .command-nav button[aria-current="page"] {
  box-shadow: inset 0 3px 0 var(--novelty-accent, var(--accent));
}

body[data-day-phase="afternoon"] {
  --bg: #f6f8f1;
  --surface-alt: #eef4e8;
}

body[data-day-phase="evening"] {
  --bg: #f8f3ef;
  --surface-alt: #f4eee7;
  --accent-2: #c85b4e;
  --warn: #9a5b12;
}

body[data-day-phase="night"] {
  --bg: #f0f3f5;
  --surface-alt: #e8eff1;
  --accent: #336c74;
  --accent-2: #bf5a4b;
}

body[data-contrast="true"] {
  --line: #7b837d;
  --muted: #3f4742;
  --shadow: none;
}

body[data-large-text="true"] {
  font-size: 18px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

button,
a,
input,
select,
textarea {
  border-radius: var(--radius);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(22, 111, 107, 0.3);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100dvh;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

.app-main {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
  line-height: 1.14;
}

h1 {
  font-size: 1.65rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0;
}

.muted {
  color: var(--muted);
}

.section {
  margin: 0 0 22px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.today-workspace-tile {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.today-workspace-section + .today-workspace-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.today-workspace-section > .section-header:last-child,
.today-workspace-tile > .section-header:last-child {
  margin-bottom: 0;
}

.stack {
  display: grid;
  gap: 12px;
}

.grid {
  display: grid;
  gap: 12px;
}

.grid.two {
  grid-template-columns: 1fr;
}

.grid.three {
  grid-template-columns: 1fr;
}

.card,
.modal-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card {
  padding: 14px;
}

.task-card {
  display: grid;
  gap: 12px;
}

.task-card.completed,
.recurring-card.completed {
  background: #e8f5ef;
  border-color: #9ed4bd;
}

.task-card.time-pressure,
.recurring-card.time-pressure {
  border-color: #e2b16a;
  background: #fff8ed;
}

.recurring-card.recurring-skipped {
  border-color: #e0bd78;
  background: #fff8ed;
}

.task-card.blocked-task {
  border-style: dashed;
}

.starter-sequence-context {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.task-state-note {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--surface-alt);
  font-size: 0.86rem;
}

.task-state-note span {
  color: var(--muted);
}

.deferred-follow-up {
  border-left-color: var(--accent);
}

.replacement-preview {
  margin-block: 4px 10px;
}

.new-item-highlight {
  border-color: #8fc8b1;
  background: #eef8f3;
}

.recurring-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.recurring-card-main,
.recurring-card-actions,
.recurring-form-section {
  display: grid;
  gap: 10px;
}

.recurring-card-actions {
  min-width: 92px;
}

.recurring-summary-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.recurring-load-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.recurring-summary-metric {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.recurring-summary-metric:nth-child(2n) {
  border-right: 0;
}

.recurring-summary-metric:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.recurring-summary-metric small,
.recurring-summary-metric em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.recurring-summary-metric strong {
  color: var(--ink);
  font-size: 1.16rem;
}

.recurring-outcome-summary {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.recurring-outcome-summary h3,
.recurring-outcome-summary p,
.recurring-performance-grid h3,
.recurring-performance-grid p {
  margin: 0;
}

.recurring-outcome-rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.recurring-outcome-rate {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border-left: 4px solid var(--line);
  background: var(--surface-alt);
}

.recurring-outcome-rate strong {
  font-size: 1.05rem;
}

.recurring-outcome-rate small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
}

.recurring-outcome-rate.outcome-completed {
  border-left-color: #2f8a68;
}

.recurring-outcome-rate.outcome-partial {
  border-left-color: #b98713;
}

.recurring-outcome-rate.outcome-deferred {
  border-left-color: #5b7690;
}

.recurring-outcome-rate.outcome-skipped {
  border-left-color: #bd5144;
}

.recurring-performance-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.recurring-success-list,
.recurring-needs-review {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px 12px;
}

.recurring-success-list {
  border-bottom: 1px solid var(--line);
}

.recurring-success-list ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recurring-success-list li,
.recurring-review-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.recurring-success-list li span,
.recurring-review-target span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.recurring-success-list li small,
.recurring-review-target small {
  color: var(--muted);
  font-size: 0.76rem;
}

.recurring-success-list li b {
  color: #237256;
}

.recurring-review-result,
.recurring-review-recommendation {
  padding: 10px;
  border-left: 4px solid #b98713;
  background: #fff8e8;
}

.recurring-page-card {
  gap: 11px;
  border-left-width: 5px;
}

.recurring-page-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.recurring-time-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.recurring-today-section .card.recurring-page-card.recurring-time-natural {
  border-color: #8fc8b1;
  background: #eef8f3;
}

.recurring-time-status.recurring-time-natural {
  border-color: #8fc8b1;
  background: #e1f3eb;
  color: #1f674d;
}

.recurring-today-section .card.recurring-page-card.recurring-time-warning {
  border-color: #d8ae45;
  background: #fff7dc;
}

.recurring-time-status.recurring-time-warning {
  border-color: #d8ae45;
  background: #ffefb7;
  color: #715000;
}

.recurring-today-section .card.recurring-page-card.recurring-time-urgent {
  border-color: #c85b50;
  background: #fdecea;
}

.recurring-time-status.recurring-time-urgent {
  border-color: #c85b50;
  background: #f8d4cf;
  color: #862e28;
}

.recurring-upcoming-group {
  border: 1px solid var(--line);
  background: var(--surface);
}

.recurring-upcoming-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

.recurring-upcoming-group > summary::-webkit-details-marker,
.completed-recurring-item > summary::-webkit-details-marker {
  display: none;
}

.recurring-upcoming-group > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.recurring-upcoming-group > summary small {
  color: var(--muted);
  font-weight: 500;
}

.recurring-upcoming-group > .grid {
  padding: 0 13px 13px;
}

.recurring-schedule-row {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.recurring-schedule-row h3,
.recurring-schedule-row p {
  margin: 0;
}

.completed-recurring-list {
  display: grid;
  gap: 8px;
}

.completed-recurring-item {
  border: 1px solid #9ed4bd;
  background: #e8f5ef;
}

.completed-recurring-item > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.completed-recurring-item > summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-recurring-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #9ed4bd;
  background: var(--surface);
}

.recurring-review-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recurring-review-context span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.recurring-review-context small {
  color: var(--muted);
}

.recurrence-summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 760;
}

.recurring-form-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.recurring-form-section h3,
.recurring-form-section p {
  margin: 0;
}

.recurring-goal-chain {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
}

.recurring-goal-chain small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.checkin-assessment {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.checkin-assessment[data-state="strong"] {
  border-left-color: #2f8a68;
  background: #eef8f3;
}

.checkin-assessment[data-state="limited"] {
  border-left-color: #c5793d;
  background: #fff8ed;
}

.checkin-assessment[data-state="thinking"] {
  border-left-color: #5b7690;
  background: #f1f5f8;
}

.checkin-assessment h2,
.checkin-assessment p {
  margin: 0;
}

.checkin-assessment-summary {
  max-width: 88ch;
  color: var(--ink);
  line-height: 1.55;
}

.checkin-assessment-header,
.checkin-assessment-item-head,
.checkin-intervention {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.checkin-assessment-list {
  display: grid;
}

.checkin-assessment-item {
  display: grid;
  gap: 8px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}

.checkin-assessment-item:last-child {
  padding-bottom: 0;
}

.checkin-assessment-item-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.checkin-assessment-item.needs-intervention strong {
  color: #8b3a31;
}

.checkin-intervention {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.checkin-intervention > span:not(.pill) {
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 0.88rem;
}

.recurrence-interval-row {
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr;
  gap: 10px;
  align-items: center;
}

.weekday-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding-top: 6px;
}

.weekday-picker label {
  position: relative;
}

.weekday-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.weekday-picker span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 780;
}

.weekday-picker input:checked + span {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

.weekday-picker input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

@media (min-width: 760px) {
  .recurring-load-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .recurring-summary-metric,
  .recurring-summary-metric:nth-child(2n),
  .recurring-summary-metric:nth-last-child(-n + 2) {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .recurring-summary-metric:last-child {
    border-right: 0;
  }

  .recurring-outcome-summary {
    grid-template-columns: minmax(190px, 0.75fr) minmax(360px, 1.25fr);
    align-items: center;
  }

  .recurring-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recurring-success-list {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .recurring-outcome-rates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recurring-page-card-heading {
    flex-direction: column;
  }

  .recurring-time-status {
    align-self: flex-start;
  }

  .completed-recurring-item > summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .completed-recurring-item > summary .btn {
    grid-column: 2;
    justify-self: start;
  }

  .recurring-review-context {
    grid-template-columns: 1fr;
  }

  .recurring-card {
    grid-template-columns: 1fr;
  }

  .recurring-card-actions {
    display: flex;
    min-width: 0;
  }

  .recurring-card-actions .btn {
    flex: 1;
  }

  .checkin-assessment-header,
  .checkin-assessment-item-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .checkin-assessment-item-head span {
    text-align: left;
  }
}

.strike {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--muted);
}

.task-title-row,
.goal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
}

.pill.warn {
  background: #fff4df;
  border-color: #ecd4a6;
  color: #69450d;
}

.pill.good {
  background: #e8f5ef;
  border-color: #bbddcf;
  color: #1f694f;
}

.rating-pill.rating-good {
  background: #e8f5ef;
  border-color: #9ed4bd;
  color: #1f694f;
}

.rating-pill.rating-warn {
  background: #fff4df;
  border-color: #ecd06f;
  color: #69450d;
}

.rating-pill.rating-light-bad {
  background: #fff0ed;
  border-color: #f0b8ae;
  color: #8b3a31;
}

.rating-pill.rating-bad {
  background: #f7d9d4;
  border-color: #dd877c;
  color: #7a241d;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.restock-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.restock-choice {
  position: relative;
}

.restock-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.restock-choice span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
}

.restock-choice input:checked + span {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

.restock-choice input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
  text-decoration: none;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent), var(--line) 45%);
}

.btn:disabled {
  cursor: default;
  opacity: 0.72;
  transform: none;
}

.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.btn.secondary {
  border-color: transparent;
  background: var(--surface-alt);
}

.btn.danger {
  border-color: #e0b9b4;
  background: #fff0ed;
  color: var(--bad);
}

.btn.small {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 0.9rem;
}

.creation-actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.creation-actions .btn {
  white-space: nowrap;
}

.developer-review-button,
.dialog-header-review {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.goal-summary-card {
  align-content: start;
}

.goal-card-summary {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.due-date,
.gantt-date-label,
.roadmap-due-date {
  transition: none;
}

.due-date.is-soon,
.gantt-date-label.is-soon,
.roadmap-due-date.is-soon {
  border-color: #d7aa34;
  background: #fff2b8;
  color: #624500;
  font-weight: 800;
}

.due-date.is-overdue,
.gantt-date-label.is-overdue,
.roadmap-due-date.is-overdue {
  border-color: #d36b61;
  background: #f9d8d3;
  color: #7a241d;
  font-weight: 850;
}

.gantt-date-label.is-soon,
.gantt-date-label.is-overdue,
.roadmap-due-date.is-soon,
.roadmap-due-date.is-overdue {
  width: fit-content;
  padding: 3px 6px;
  border: 1px solid;
  border-radius: 3px;
}

.project-task-title,
.gantt-label-text {
  margin: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.project-task-actions {
  margin-top: 5px;
}

body[data-app-feel="project-tracker"] .pill,
body[data-app-feel="project-tracker"] .theme-title-badge,
body[data-app-feel="project-tracker"] .reward-header-summary {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 3px;
  background: #f1f3f0;
  color: #5f6862;
  font-size: 0.72rem;
  font-weight: 700;
}

body[data-app-feel="project-tracker"] .pill.good {
  border-color: #8bc7ae;
  background: #e5f4ed;
  color: #1f694f;
}

body[data-app-feel="project-tracker"] .pill.warn,
body[data-app-feel="project-tracker"] .pill.due-date.is-soon {
  border-color: #d7aa34;
  background: #fff2b8;
  color: #624500;
}

body[data-app-feel="project-tracker"] .pill.due-date.is-overdue {
  border-color: #d36b61;
  background: #f9d8d3;
  color: #7a241d;
}

body[data-app-feel="project-tracker"] .btn {
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  border-radius: 4px;
  background: #ffffff;
  color: var(--accent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 20%, var(--line));
  font-size: 0.82rem;
  font-weight: 850;
}

body[data-app-feel="project-tracker"] .btn:hover {
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 26%, var(--line));
}

body[data-app-feel="project-tracker"] .btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

body[data-app-feel="project-tracker"] .btn.secondary {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: #ffffff;
  color: var(--accent);
}

body[data-app-feel="project-tracker"] .btn.danger {
  border-color: #c96d64;
  background: #fff7f5;
  color: #9d332a;
  box-shadow: 0 2px 0 #efd0cc;
}

body[data-app-feel="project-tracker"] .segmented-control button,
body[data-app-feel="project-tracker"] .roadmap-link,
body[data-app-feel="project-tracker"] .waiting-for-line {
  cursor: pointer;
  font-weight: 800;
}

body[data-app-feel="project-tracker"] .roadmap-link,
body[data-app-feel="project-tracker"] .waiting-for-line {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: #ffffff;
}

.icon-btn {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.progress {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebe4;
}

.progress > span {
  display: block;
  height: 100%;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--good));
}

.form {
  display: grid;
  gap: 13px;
}

.field {
  display: grid;
  gap: 6px;
}

.field-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.field-title-row > span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 780;
}

.field label,
.label {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 780;
}

.field-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  padding: 10px 11px;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.option-fieldset {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.option-fieldset legend {
  padding: 0 5px;
  font-size: 0.86rem;
  font-weight: 780;
}

.inline-input-row {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr);
}

.inline-input-row input[type="text"] {
  width: 100%;
  height: auto;
  margin-top: 0;
  min-height: 36px;
  padding: 7px 9px;
}

.range-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.range-row output {
  min-width: 2.4rem;
  text-align: right;
  font-weight: 800;
}

.compact-checkin {
  gap: 10px;
}

.compact-field input {
  min-height: 40px;
}

.checkin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.icon-range {
  display: grid;
  grid-template-columns: minmax(92px, 0.35fr) minmax(150px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.metric-icon {
  min-width: 28px;
  font-size: 1.28rem;
  line-height: 1;
  text-align: center;
}

.metric-icon-mood.metric-icon-high {
  font-size: 1.42rem;
}

.metric-icon-distractibility {
  font-size: 1.46rem;
}

.metric-label {
  font-weight: 780;
}

.metric-scale {
  display: grid;
  grid-template-columns: auto minmax(88px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.metric-scale input {
  width: 100%;
  min-width: 0;
}

.checkin-notes-field {
  min-width: 0;
  margin: 0;
}

.checkin-notes-field textarea {
  min-height: 72px;
}

.info-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius);
  background: #eef7f3;
}

.checkin-summary {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.coach-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius);
  background: #eef7f3;
}

.recommendation-block,
.setup-summary,
.review-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius);
  background: #eef7f3;
}

.recommendation-card {
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.recommendation-card.span-two {
  grid-column: 1 / -1;
}

.recommendation-score-grid,
.task-preview-list {
  display: grid;
  gap: 10px;
}

.recommendation-score-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plain-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.recommendation-timeline {
  display: grid;
  gap: 12px;
}

.recommendation-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.task-preview {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-weight: 700;
}

.choice[aria-pressed="true"] {
  border-color: var(--accent);
  background: #e4f2ef;
}

.choice-copy {
  display: grid;
  gap: 3px;
}

.choice-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.choice:disabled {
  cursor: default;
  opacity: 0.58;
}

.recommendation-note {
  padding: 9px 10px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius);
  background: #eef7f3;
  color: var(--ink);
}

.suggested-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #1f694f;
  font-size: 0.76rem;
  font-weight: 850;
}

.finish-summary {
  padding: 12px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius);
  background: #eef7f3;
}

.style-preview-card,
.suggestion-panel,
.clarity-panel {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.style-preview-card h3,
.style-preview-card p,
.suggestion-panel p,
.clarity-panel p {
  margin: 0;
}

.style-preview-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, currentColor 20%, var(--line));
  border-radius: 4px;
  object-fit: cover;
  object-position: top center;
  background: var(--surface);
}

.ai-status-panel {
  gap: 12px;
}

.ai-status-panel.is-error {
  border-color: #c85f52;
  background: #fff1ed;
}

.ai-source {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-source::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b36b53;
  content: "";
}

.ai-source.is-live {
  color: #166c4b;
}

.ai-source.is-live::before {
  background: #2ca878;
}

.ai-source.is-error {
  color: #9a392f;
}

.style-preview-card span {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid currentColor;
  font-size: 0.78rem;
  font-weight: 800;
}

.style-preview-card[data-style-preview="game"],
.onboarding-card[data-style-preview="game"] {
  border-color: #4d7c2f;
  background: linear-gradient(135deg, #fffdf2, #e9f7dd);
}

.style-preview-card[data-style-preview="coach"],
.onboarding-card[data-style-preview="coach"] {
  border-color: #2f7c72;
  background: linear-gradient(135deg, #f8fffb, #e5f3ef);
}

.style-preview-card[data-style-preview="command-centre"],
.onboarding-card[data-style-preview="command-centre"] {
  border-color: #2d4f63;
  background: #f4f7f8;
}

.style-preview-card[data-style-preview="questbound-achievement-guild"],
.onboarding-card[data-style-preview="questbound-achievement-guild"] {
  border-color: #7a6330;
  background: linear-gradient(135deg, #fffdf0, #edf3df);
}

.style-preview-card[data-style-preview="project-tracker"],
.onboarding-card[data-style-preview="project-tracker"] {
  border-color: #4e6573;
  background: #f7f8f3;
}

.style-preview-card[data-style-preview="different-style-each-day"],
.onboarding-card[data-style-preview="different-style-each-day"] {
  border-color: #8b6fb5;
  background: linear-gradient(135deg, #fffdf4, #e9f5f0 46%, #f1ecfa);
}

.suggestion-panel pre {
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  color: var(--ink);
  font: inherit;
}

.clarity-panel {
  border-color: #e1bd73;
  background: #fff8e9;
}

.clarity-panel ul,
.recommendation-block ul {
  margin: 0;
  padding-left: 20px;
}

.numbered-list,
.clean-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 24px;
}

.numbered-list li,
.clean-list li {
  padding-left: 4px;
}

.baseline-grid {
  display: grid;
  gap: 12px;
}

.baseline-metric {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.scale-card,
.part-intro,
.loading-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.scale-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.loading-panel {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.loading-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #d9e7df;
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.baseline-metric h3 {
  margin: 0 0 5px;
}

.baseline-metric p {
  margin: 4px 0 0;
}

.baseline-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 7px;
}

.level-choice {
  min-height: 42px;
  justify-content: center;
  padding: 8px;
  text-align: center;
}

.rank-badge {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.78rem;
}

.nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  min-height: var(--bottom-nav-height);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface), transparent 4%);
  backdrop-filter: blur(16px);
}

.completed-recurring-group,
.completed-goals-group {
  margin-top: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface), var(--good) 4%);
}

.completed-recurring-group > summary,
.completed-goals-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.completed-recurring-group > summary::-webkit-details-marker,
.completed-goals-group > summary::-webkit-details-marker {
  display: none;
}

.completed-recurring-group > summary > span:last-child,
.completed-goals-group > summary > span:last-child {
  margin-left: auto;
}

.completed-goals-group > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.completed-goals-group > summary small {
  color: var(--muted);
  font-weight: 500;
}

.completed-recurring-group > .stack,
.completed-goals-list {
  padding: 0 12px 12px;
}

.completed-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.completed-recurring-group .task-outcome-compact {
  border-color: color-mix(in srgb, var(--good), var(--line) 55%);
  background: color-mix(in srgb, var(--surface), var(--good) 10%);
}

.status-pill.feature-request {
  border-color: #b98713;
  background: #fff3c4;
  color: #704d00;
}

.nav button {
  display: grid;
  gap: 3px;
  place-items: center;
  min-width: 0;
  padding: 6px 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
}

.nav .nav-mark {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.nav button[aria-current="page"] {
  color: var(--ink);
}

.nav button[aria-current="page"] .nav-mark {
  background: var(--accent-2);
}

.nav > .account-dock {
  gap: 0;
  justify-content: center;
  min-height: 38px;
  padding: 5px 2px;
  border-color: transparent;
  background: transparent;
}

.nav > .account-dock > span,
.nav > .account-dock > img {
  width: 26px;
  height: 26px;
}

.nav > .account-dock > strong {
  display: none;
}

.onboarding {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: 22px 16px;
}

.onboarding-card {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.onboarding-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-card-heading .eyebrow {
  margin: 0;
}

.onboarding-review-button {
  flex: 0 0 auto;
}

.onboarding-clarity-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--surface-alt);
}

.onboarding-clarity-status p {
  margin: 0;
}

.onboarding-selected-items,
.finish-findings {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding-left: 22px;
}

.finish-findings {
  padding: 14px 14px 14px 34px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius);
  background: #eef7f3;
}

.step-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
  gap: 4px;
  margin: 16px 0;
}

.step-bar span {
  height: 5px;
  border-radius: 999px;
  background: #e4e8e1;
}

.step-bar span.active {
  background: var(--accent);
}

.question-count {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 760;
}

.app-tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 6px 0 16px;
  font-size: 1rem;
  font-weight: 820;
}

.post-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px;
}

.post-letter {
  font-weight: 900;
}

.post-dot {
  color: var(--muted);
}

.post-compass {
  margin-left: 8px;
}

.post-plan {
  color: #b83f35;
}

.post-organize {
  color: #25699c;
}

.post-strategize {
  color: #744fa8;
}

.post-track {
  color: #28784a;
}

.welcome-list {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.welcome-list p {
  margin: 0;
  color: var(--ink);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: 18px 12px;
  background: rgba(18, 23, 20, 0.36);
}

.modal-panel {
  width: min(100%, 720px);
  max-height: min(86dvh, 780px);
  overflow: auto;
  padding: 16px;
}

.developer-review-modal {
  z-index: 70;
  background: rgba(18, 23, 20, 0.48);
}

.developer-review-dialog {
  width: min(100%, 680px);
}

.developer-review-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.developer-review-context > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: min(var(--radius), 8px);
  background: var(--surface-alt);
}

.developer-review-context small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.developer-review-context strong {
  overflow-wrap: anywhere;
}

.developer-review-error {
  margin: 0;
  padding: 9px 10px;
  border-left: 3px solid var(--bad);
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
}

.additional-checkin-dialog {
  width: min(100%, 620px);
}

.additional-checkin-grid {
  margin: 0;
}

.additional-checkin-grid .icon-range {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  padding: 8px;
}

.additional-checkin-grid .metric-scale {
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 5px;
}

.additional-checkin-grid .metric-icon {
  min-width: 24px;
}

.toast {
  position: fixed;
  right: 14px;
  bottom: calc(var(--bottom-nav-height) + 14px);
  left: 14px;
  z-index: 50;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.empty-state {
  padding: 22px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt), transparent 35%);
  text-align: center;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.day-cell {
  min-height: 48px;
  padding: 7px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 750;
}

.day-cell.done {
  background: #e5f5ed;
  border-color: #b8decf;
}

.day-cell.partial {
  background: #fff4df;
  border-color: #ead1a3;
}

.roadmap {
  display: grid;
  gap: 10px;
}

.roadmap-step {
  --roadmap-progress-color: var(--accent);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.roadmap-dot {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 3px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
}

.roadmap-link {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.roadmap-link span {
  color: var(--muted);
  font-size: 0.84rem;
}

.roadmap-link:hover strong,
.roadmap-link:focus-visible strong {
  color: var(--accent);
  text-decoration: underline;
}

.roadmap-title-row,
.roadmap-progress-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.roadmap-title-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.roadmap-health {
  flex: 0 0 auto;
  width: fit-content;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-alt);
  font-size: 0.7rem !important;
  font-weight: 850;
}

.roadmap-progress {
  width: 100%;
  height: 8px;
}

.roadmap-progress > span {
  background: var(--roadmap-progress-color);
}

.roadmap-step.is-behind {
  --roadmap-progress-color: #c96a5f;
}

.roadmap-step.is-behind-strong {
  --roadmap-progress-color: #b7463c;
}

.roadmap-step.is-behind-critical {
  --roadmap-progress-color: #8f271f;
}

.roadmap-step.is-behind .roadmap-link {
  border-color: #dc9188;
  background: #fff0ed;
}

.roadmap-step.is-behind-strong .roadmap-link {
  border-color: #c95c50;
  background: #f8d4cf;
}

.roadmap-step.is-behind-critical .roadmap-link {
  border-color: #a9372e;
  background: #efb5ad;
}

.roadmap-step.is-behind .roadmap-dot,
.roadmap-step.is-behind-strong .roadmap-dot,
.roadmap-step.is-behind-critical .roadmap-dot {
  border-color: var(--roadmap-progress-color);
}

.roadmap-health.is-behind,
.roadmap-health.is-behind-strong,
.roadmap-health.is-behind-critical {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.65);
  color: #7a241d !important;
}

.roadmap-health.is-on-track {
  border-color: #8bc7ae;
  background: #e5f4ed;
  color: #1f694f !important;
}

.stats-chart-header,
.stats-chart-title,
.daily-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stats-chart-header h2,
.stats-chart-title h2,
.stats-chart-title p,
.daily-summary-header h2,
.daily-summary-header p {
  margin: 0;
}

.stats-range-control {
  display: grid;
  grid-template-columns: repeat(5, minmax(62px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stats-range-control button {
  min-height: 40px;
  padding: 7px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  font-weight: 760;
}

.stats-range-control button:last-child {
  border-right: 0;
}

.stats-range-control button[aria-pressed="true"] {
  background: var(--accent);
  color: #ffffff;
}

.stats-chart-stack,
.stats-chart-card {
  gap: 14px;
}

.stats-chart-card {
  display: grid;
}

.stats-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stats-compact-card {
  min-width: 0;
  gap: 10px;
  padding: 14px;
}

.stats-compact-card .stats-chart-title {
  display: grid;
  gap: 8px;
}

.stats-compact-card .stats-chart-title h2 {
  font-size: 1.05rem;
}

.stats-compact-card .stats-chart-title p {
  font-size: 0.84rem;
}

.stats-compact-card .chart-legend {
  justify-content: flex-start;
}

.stats-compact-card .stats-chart {
  min-width: 500px;
  min-height: 176px;
  height: 190px;
}

.stats-compact-card .chart-empty {
  min-height: 176px;
}

.stats-compact-card .outcome-total-grid {
  gap: 8px;
}

.stats-compact-card .inline-metric {
  padding: 9px;
}

.stats-compact-card .inline-metric strong {
  font-size: 1.2rem;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 12px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 720;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--legend-color);
}

.chart-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.stats-chart {
  display: block;
  width: 100%;
  min-width: 620px;
  min-height: 238px;
}

.chart-grid-line {
  stroke: color-mix(in srgb, var(--line) 78%, transparent);
  stroke-width: 1;
}

.chart-line {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wellbeing-point-circle {
  stroke: var(--surface);
  stroke-width: 1.5;
}

.wellbeing-checkin-point {
  cursor: help;
  outline: none;
}

.wellbeing-chart-tooltip {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.wellbeing-checkin-point:hover .wellbeing-chart-tooltip,
.wellbeing-checkin-point:focus .wellbeing-chart-tooltip {
  visibility: visible;
  opacity: 1;
}

.wellbeing-checkin-point:focus .wellbeing-point-circle {
  stroke: var(--ink);
  stroke-width: 2.5;
}

.wellbeing-chart-tooltip-card {
  display: grid;
  gap: 5px;
  height: 100%;
  padding: 9px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(20, 31, 27, 0.18);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.25;
}

.wellbeing-chart-tooltip-card strong {
  color: var(--accent);
  font-size: 12px;
}

.wellbeing-chart-tooltip-card span {
  font-weight: 800;
}

.wellbeing-chart-tooltip-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.chart-axis-label,
.chart-x-label {
  fill: var(--muted);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0;
}

.chart-axis-label {
  text-anchor: end;
}

.chart-x-label {
  text-anchor: middle;
}

.chart-empty {
  display: grid;
  min-height: 210px;
  place-content: center;
  gap: 5px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
}

.daily-activity-summary {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.daily-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.daily-summary-group {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.daily-summary-group h3,
.daily-summary-group p {
  margin: 0;
}

.daily-summary-group h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
}

.daily-summary-group h3 span {
  color: var(--muted);
}

.daily-summary-group button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink);
  text-align: left;
}

.daily-summary-group button span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.78rem;
}

.replacement-recommendations {
  display: grid;
  gap: 10px;
}

.avoidance-insights-card {
  min-width: 0;
}

.avoidance-insights-header,
.pattern-trend-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.avoidance-insights-header h2,
.avoidance-insights-header p,
.pattern-trend h3,
.pattern-trend p,
.pattern-notes p {
  margin: 0;
}

.pattern-review-pending,
.pattern-experiment {
  padding: 12px;
  border-left: 4px solid var(--accent);
  background: var(--surface-alt);
}

.pattern-summary {
  font-size: 1rem;
  line-height: 1.55;
}

.pattern-trend-list {
  display: grid;
  gap: 14px;
}

.pattern-trend {
  display: grid;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pattern-trend h3 {
  font-size: 1rem;
}

.pattern-confidence {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: capitalize;
}

.pattern-confidence.medium {
  border-color: color-mix(in srgb, #d19a39 58%, var(--line));
  color: #8a641f;
}

.pattern-confidence.high {
  border-color: color-mix(in srgb, #2f8a68 58%, var(--line));
  color: #246b51;
}

.pattern-evidence {
  color: var(--muted);
  font-size: 0.86rem;
}

.pattern-recommendation {
  color: var(--ink);
}

.pattern-notes {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.pattern-notes p {
  color: var(--muted);
  font-size: 0.86rem;
}

.pattern-experiment {
  display: grid;
  gap: 4px;
}

.pattern-meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.replacement-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.replacement-recommendation h3,
.replacement-recommendation p {
  margin: 0 0 6px;
}

@media (max-width: 700px) {
  .stats-chart-header,
  .stats-chart-title,
  .daily-summary-header {
    flex-direction: column;
  }

  .stats-range-control {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-range-control button:nth-child(3) {
    border-right: 0;
  }

  .stats-range-control button:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .chart-legend {
    justify-content: flex-start;
  }

  .daily-summary-grid {
    grid-template-columns: 1fr;
  }

  .replacement-recommendation {
    grid-template-columns: 1fr;
  }

  .avoidance-insights-header,
  .pattern-trend-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .stats-compact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .stats-compact-card {
    padding: 11px;
  }

  .stats-compact-card .stats-chart {
    min-width: 460px;
    height: 176px;
  }

  .roadmap-title-row,
  .roadmap-progress-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

.project-flow-details {
  display: grid;
  gap: 12px;
}

.milestone-flow-list {
  display: grid;
  gap: 10px;
}

.milestone-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid color-mix(in srgb, var(--accent) 72%, #1f5140);
  border-radius: var(--radius);
  background: var(--surface);
}

.milestone-group summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  cursor: pointer;
  list-style: none;
}

.milestone-group summary::-webkit-details-marker {
  display: none;
}

.collapse-triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
  color: var(--accent);
  transform-origin: 35% 50%;
  transition: transform 150ms ease;
}

.milestone-group[open] > summary .collapse-triangle,
.gantt-collapse-toggle[aria-expanded="true"] .collapse-triangle {
  transform: rotate(90deg);
}

.milestone-summary-title {
  min-width: 0;
  font-weight: 820;
  font-size: 1.03rem;
  overflow-wrap: anywhere;
}

.milestone-summary-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
  text-align: right;
}

.milestone-group-body {
  display: grid;
  gap: 11px;
  padding: 13px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-alt) 46%, var(--surface));
}

.milestone-task-list {
  display: grid;
  gap: 8px;
  margin-left: 12px;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

.project-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #9aa6ad);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-alt) 72%, #ffffff);
}

.project-task-row.completed {
  background: color-mix(in srgb, var(--good) 8%, transparent);
}

.project-task-copy,
.project-task-meta {
  display: grid;
  gap: 5px;
}

.project-task-copy small,
.dependency-copy {
  color: var(--muted);
}

.project-task-title {
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 720;
}

.project-task-outcome-actions {
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 78%, transparent);
}

.task-outcome-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 9px 11px;
}

.task-outcome-title {
  min-width: 0;
  margin: 0;
  font-size: 0.96rem;
  font-weight: 740;
  overflow-wrap: anywhere;
}

.task-outcome-action {
  flex: 0 0 auto;
}

.task-outcome-compact.outcome-completed {
  border-color: #91c9af;
  background: #e8f5ef;
  color: #205f48;
}

.task-outcome-compact.outcome-partial {
  border-color: #9eb6d8;
  background: #eef4fc;
  color: #294e78;
}

.task-outcome-compact.outcome-deferred {
  border-color: #d8bd75;
  background: #fff8df;
  color: #735516;
}

.task-outcome-compact.outcome-skipped {
  border-color: #d9a093;
  background: #fff0ed;
  color: #7f2d24;
}

.flow-breakdown-link {
  width: fit-content;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.project-task-meta {
  justify-items: end;
}

.flow-title-link,
.flow-detail-link,
.gantt-label-link {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.flow-detail-link {
  min-height: 36px;
}

.flow-empty-row {
  padding: 10px 0 2px;
}

.gantt {
  display: block;
  overflow: hidden;
  padding: 12px;
}

.gantt-scroll-region {
  overflow-x: auto;
  padding-top: 24px;
}

.gantt-board {
  display: grid;
  grid-template-columns: minmax(190px, 0.36fr) minmax(560px, 1fr);
  min-width: 790px;
}

.gantt-labels {
  border: 1px solid var(--line);
  border-right: 0;
}

.gantt-label-row {
  display: grid;
  align-content: center;
  min-width: 0;
  height: 64px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.gantt-label-row.is-milestone {
  background: color-mix(in srgb, var(--good) 10%, var(--surface));
  box-shadow: inset 4px 0 color-mix(in srgb, var(--accent) 72%, #1f5140);
}

.gantt-label-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.gantt-collapse-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.gantt-collapse-toggle .collapse-triangle {
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 7px;
}

.gantt-label-row:last-child,
.gantt-track-row:last-of-type {
  border-bottom: 0;
}

.gantt-label-row.is-task {
  padding-left: 24px;
}

.gantt-label-row span,
.gantt-label-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-label-row small {
  color: var(--warn);
}

.gantt-timeline {
  position: relative;
  display: grid;
  grid-auto-rows: 64px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.gantt-track-row {
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, transparent 0 12.3%, rgba(92, 111, 101, 0.1) 12.3% 12.5%);
}

.gantt-track-row:nth-child(even) {
  background-color: var(--surface-alt);
}

.gantt-today-line {
  position: absolute;
  z-index: 4;
  top: -18px;
  bottom: 0;
  left: var(--today);
  width: 2px;
  background: #c34734;
  pointer-events: none;
}

.gantt-today-line span {
  position: absolute;
  top: -2px;
  left: 5px;
  color: #8e2f22;
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
}

.gantt-dependencies {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.gantt-dependencies polyline {
  fill: none;
  stroke: var(--warn);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.gantt-dependencies marker path {
  fill: var(--warn);
}

.gantt-bar {
  position: absolute;
  z-index: 3;
  top: calc(var(--row) * 64px + 20px);
  left: var(--left);
  width: var(--width);
  min-width: 44px;
  height: 24px;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, #000000);
  border-radius: 5px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-bar.milestone {
  top: calc(var(--row) * 64px + 15px);
  height: 34px;
  background: color-mix(in srgb, var(--accent) 76%, #17231e);
}

.waiting-for-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.waiting-for-line span,
.waiting-for-line small {
  color: var(--muted);
}

.waiting-for-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.waiting-for-line:hover strong,
.waiting-for-line:focus-visible strong {
  color: var(--accent);
  text-decoration: underline;
}

.recurring-overview-card {
  display: grid;
  gap: 11px;
}

@media (max-width: 620px) {
  .project-task-row {
    grid-template-columns: 1fr;
  }

  .project-task-meta {
    display: flex;
    flex-wrap: wrap;
    justify-items: start;
  }

  .milestone-task-list {
    margin-left: 5px;
    padding-left: 9px;
  }

  .task-outcome-compact {
    align-items: flex-start;
    flex-direction: column;
  }

  .milestone-group summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .milestone-summary-meta {
    grid-column: 2;
    text-align: left;
  }

  .waiting-for-line {
    grid-template-columns: 1fr auto;
  }

  .waiting-for-line span {
    grid-column: 1 / -1;
  }
}

/* Guided first-goal and demo walkthrough */
.walkthrough-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.walkthrough-shield {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

.walkthrough-spotlight {
  position: fixed;
  z-index: 81;
  border: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgb(15 25 24 / 68%), 0 0 0 5px rgb(255 255 255 / 78%);
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease;
  pointer-events: none;
}

.walkthrough-card {
  position: fixed;
  z-index: 82;
  display: grid;
  gap: 11px;
  width: min(410px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 18px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 60px rgb(0 0 0 / 30%);
  pointer-events: auto;
}

.walkthrough-card h2,
.walkthrough-card p {
  margin: 0;
}

.walkthrough-card h2 {
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.walkthrough-progress-row,
.walkthrough-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.walkthrough-progress-row > span {
  font-size: 0.78rem;
  font-weight: 850;
  color: var(--muted);
  text-transform: uppercase;
}

.walkthrough-skip {
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: underline;
  cursor: pointer;
}

.walkthrough-skip:hover,
.walkthrough-skip:focus-visible {
  color: var(--text);
}

.walkthrough-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-alt);
}

.walkthrough-progress span {
  display: block;
  width: var(--value);
  height: 100%;
  background: var(--accent);
}

body[data-app-feel="game"] .walkthrough-card,
body[data-app-feel="command-centre"] .walkthrough-card {
  border-color: var(--accent);
  box-shadow: 0 18px 60px rgb(0 0 0 / 52%);
}

@media (max-width: 620px) {
  .walkthrough-card {
    width: calc(100vw - 24px);
    max-height: min(54dvh, 480px);
    padding: 15px;
  }

  .walkthrough-card h2 {
    font-size: 1.08rem;
  }

  .walkthrough-card > p:not(.eyebrow) {
    font-size: 0.91rem;
    line-height: 1.45;
  }

  .walkthrough-actions .btn {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .walkthrough-spotlight {
    transition: none;
  }
}

/* Account access and per-user session surfaces */
.auth-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px 16px;
  background: var(--bg);
}

.auth-panel {
  display: grid;
  width: min(100%, 440px);
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-panel h1,
.auth-panel h2,
.auth-panel p {
  margin: 0;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-compass {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-alt);
}

.auth-compass::before {
  position: absolute;
  inset: 7px 17px;
  background: linear-gradient(to bottom, var(--accent-2) 0 50%, var(--accent) 50% 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  content: "";
  transform: rotate(24deg);
}

.auth-loading {
  justify-items: center;
  text-align: center;
}

.auth-mode-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.auth-mode-control button {
  min-height: 40px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
}

.auth-mode-control button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 14%, transparent);
}

.passwordless-method-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.passwordless-method-control button {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
}

.passwordless-method-control button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.passwordless-method-control button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.auth-form {
  display: grid;
  gap: 13px;
}

.google-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #b9c1c7;
  background: #ffffff;
  color: #273238;
}

.google-auth-btn > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #d7dce0;
  border-radius: 50%;
  color: #3568b8;
  font-weight: 900;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.auth-feedback,
.development-code {
  padding: 10px;
  border: 1px solid #9dcbb7;
  border-left: 4px solid var(--good);
  background: #e8f5ef;
  color: #205f48;
}

.auth-feedback.is-error {
  border-color: #d17868;
  border-left-color: var(--bad);
  background: #fff0ed;
  color: #7f2d24;
}

.development-code {
  border-color: #d7aa34;
  border-left-color: #d7aa34;
  background: #fff6cf;
  color: #624500;
}

.migration-panel > .btn {
  width: 100%;
}

.account-dock {
  position: fixed;
  z-index: 36;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 190px;
  min-height: 38px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(25, 36, 31, 0.12);
  cursor: pointer;
}

.account-dock > span,
.account-dock > img {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  object-fit: cover;
  font-size: 0.72rem;
  font-weight: 900;
}

.account-dock > strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dock.has-sync-error {
  border-color: var(--bad);
}

.account-dock.is-embedded {
  position: static;
  z-index: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-shadow: none;
}

.account-dialog {
  width: min(92vw, 430px);
}

.account-details {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.account-details span,
.account-details small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.security-method-list {
  display: grid;
  border: 1px solid var(--line);
}

.security-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
}

.security-method-row + .security-method-row {
  border-top: 1px solid var(--line);
}

.security-method-row > div {
  display: grid;
  gap: 3px;
}

.security-method-row small {
  color: var(--muted);
}

.authenticator-dialog {
  width: min(92vw, 620px);
}

.authenticator-setup-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.authenticator-qr {
  display: block;
  width: 220px;
  height: 220px;
  border: 1px solid var(--line);
  background: #ffffff;
  object-fit: contain;
}

.authenticator-manual-key {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.authenticator-manual-key code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.auth-text-action {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

.auth-text-action:hover,
.auth-text-action:focus-visible {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .passwordless-method-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .authenticator-setup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .authenticator-qr {
    width: min(220px, 100%);
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
  }

  .security-method-row {
    align-items: flex-start;
  }
}

.dialog-header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.dialog-header-actions .btn {
  min-width: 68px;
}

.dialog-footer-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dialog-footer-actions .btn {
  min-width: 96px;
}

.detail-level-step,
.detail-level-settings {
  min-width: 0;
}

.detail-level-settings {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.detail-level-settings legend {
  padding: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
}

.detail-level-options {
  display: grid;
  gap: 9px;
}

.detail-level-choice,
.detail-level-radio {
  display: grid;
  width: 100%;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.detail-level-radio {
  position: relative;
  cursor: pointer;
}

.detail-level-radio:has(input:checked),
.detail-level-choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.detail-level-radio > input {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.detail-level-radio .choice-copy {
  padding-right: 28px;
}

.detail-level-example {
  display: grid;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.detail-level-example > strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.detail-example-meta,
.detail-example-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.detail-example-meta i,
.detail-example-ratings i {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--ink);
  font-style: normal;
  font-weight: 750;
}

.detail-example-progress {
  height: 5px;
  overflow: hidden;
  background: var(--surface-alt);
}

.detail-example-progress i {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--accent);
}

.detail-reason,
.detail-values {
  color: var(--muted);
  font-size: 0.88rem;
}

.detail-reason strong,
.detail-values strong {
  color: var(--ink);
}

@media (max-width: 620px) {
  .auth-page {
    align-items: start;
    padding-top: max(20px, env(safe-area-inset-top));
  }

  .auth-panel {
    padding: 18px;
  }

  .account-dock {
    right: 10px;
    left: auto;
    width: 38px;
    min-width: 38px;
    padding: 4px;
  }

  .account-dock > strong {
    display: none;
  }

  .dialog-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .modal-panel > .split-actions:first-child {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

.capacity-update-button {
  position: fixed;
  right: 14px;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 35;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.capacity-update-button > span:first-child {
  color: var(--accent);
  font-size: 0.62rem;
}

.capacity-update-button small {
  padding-left: 7px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
}

.day-planning-prompt,
.accepted-day-plan {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.day-planning-prompt {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.day-planning-prompt > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.day-planning-prompt p:last-child,
.day-plan-summary p,
.day-plan-notice,
.capacity-reminder {
  color: var(--muted);
  line-height: 1.45;
}

.day-plan-later {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.day-plan-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.day-plan-heading > div,
.day-plan-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.accepted-day-plan.needs-replan {
  border-top-color: var(--warn);
}

.day-plan-notice {
  padding: 9px 10px;
  border-left: 4px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
}

.day-plan-timeline {
  display: grid;
  gap: 8px;
}

.day-plan-block {
  display: grid;
  grid-template-columns: minmax(104px, 0.22fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  background: var(--surface-alt);
}

.day-plan-block[data-item-kind="recurring"] {
  border-left-color: var(--good);
}

.day-plan-block[data-item-kind="checklist"] {
  border-left-color: var(--accent-3);
}

.day-plan-block[data-item-kind="goal"] {
  border-left-color: var(--warn);
}

.day-plan-block time {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
}

.day-plan-block > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.day-plan-block strong,
.day-plan-block small,
.day-plan-block p {
  overflow-wrap: anywhere;
}

.day-plan-block small,
.day-plan-block p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.day-plan-dialog {
  width: min(100%, 820px);
}

.day-plan-block.editable {
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 10px;
  row-gap: 9px;
}

.day-plan-order-controls {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  gap: 5px;
  align-content: start;
}

.day-plan-edit-fields {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(145px, 0.7fr) minmax(230px, 1.4fr) minmax(100px, 0.55fr);
  gap: 8px;
  min-width: 0;
}

.day-plan-edit-fields .field {
  gap: 3px;
  margin: 0;
  min-width: 0;
}

.day-plan-edit-fields input,
.day-plan-edit-fields select {
  width: 100%;
  min-width: 0;
}

.day-plan-edit-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.day-plan-edit-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.day-plan-edit-title strong {
  min-width: 0;
}

.day-plan-rank {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.combined-day-schedule {
  display: grid;
  gap: 10px;
}

.combined-schedule-list {
  display: grid;
  gap: 7px;
}

.combined-schedule-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.24fr) minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  background: var(--surface-alt);
}

.combined-schedule-row.is-calendar {
  border-left-color: var(--muted);
  background: color-mix(in srgb, var(--surface), var(--line) 22%);
}

.combined-schedule-row.is-planned {
  border-left-color: var(--accent);
}

.combined-schedule-row time,
.schedule-type-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.combined-schedule-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.combined-schedule-row p,
.combined-schedule-row small {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.remaining-window-column {
  margin-top: 14px;
}

.day-plan-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 90px;
  padding: 14px;
  background: var(--surface-alt);
}

.day-plan-loading > span {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: day-plan-spin 0.9s linear infinite;
}

@keyframes day-plan-spin {
  to { transform: rotate(360deg); }
}

.day-plan-unscheduled {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.day-plan-unscheduled summary {
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

.day-plan-unscheduled > div {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.day-plan-unscheduled p {
  display: grid;
  gap: 2px;
}

.day-plan-unscheduled span {
  color: var(--muted);
  font-size: 0.8rem;
}

.capacity-update-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.capacity-range {
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.capacity-range .metric-label output {
  color: var(--accent);
  font-weight: 900;
}

.capacity-reminder {
  padding: 10px;
  border-left: 4px solid var(--accent-2);
  background: var(--surface-alt);
}

.planning-window-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.planning-window-summary > span {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-left: 3px solid var(--accent-2);
  background: var(--surface-alt);
}

.planning-window-summary small {
  color: var(--muted);
}

.planning-window-editor {
  display: grid;
  gap: 9px;
}

.planning-window-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1.2fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr);
  align-items: end;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.planning-window-row .field,
.planning-window-row .checkbox-row {
  margin: 0;
}

.planning-window-days {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px 0 0;
  border: 0;
}

.planning-window-days legend {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.planning-window-days label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

@media (min-width: 760px) {
  .capacity-update-button {
    bottom: 18px;
  }
}

@media (max-width: 620px) {
  .day-planning-prompt {
    grid-template-columns: 1fr;
  }

  .day-planning-prompt .button-row,
  .day-planning-prompt .btn {
    width: 100%;
  }

  .day-plan-block {
    grid-template-columns: 1fr auto;
  }

  .day-plan-block time {
    grid-column: 1 / -1;
  }

  .capacity-update-grid,
  .planning-window-row {
    grid-template-columns: 1fr;
  }

  .capacity-update-button {
    max-width: calc(100vw - 28px);
  }
}

.gantt-bar.done {
  border-color: var(--good);
  background: var(--good);
}

.settings-group {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.settings-subgroup {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.settings-subgroup h3 {
  margin: 0;
  font-size: 1rem;
}

.review-inbox-host:empty {
  display: none;
}

.review-inbox-card {
  margin-bottom: 14px;
}

.review-inbox-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.review-inbox-counts > span,
.review-entry-context > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: min(var(--radius), 8px);
  background: var(--surface-alt);
}

.review-inbox-counts small,
.review-entry-context small,
.review-user-comment > small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
}

.review-inbox-counts strong {
  font-size: 1.25rem;
}

.review-inbox-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.6fr);
  gap: 10px;
}

.review-digest-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.review-inbox-list,
.review-admin-list,
.review-admin-manager,
.review-admin-comments {
  display: grid;
  gap: 10px;
}

.review-inbox-entry {
  border: 1px solid var(--line);
  border-radius: min(var(--radius), 8px);
  background: var(--surface);
}

.review-inbox-entry[hidden] {
  display: none;
}

.review-inbox-entry.is-resolved {
  border-color: color-mix(in srgb, var(--good) 46%, var(--line));
}

.review-inbox-entry > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  cursor: pointer;
}

.review-entry-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.review-entry-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-entry-badges,
.review-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.status-pill {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-weight: 800;
}

.status-pill.open {
  border-color: color-mix(in srgb, var(--warn) 65%, var(--line));
  color: color-mix(in srgb, var(--warn) 75%, var(--ink));
}

.status-pill.resolved {
  border-color: color-mix(in srgb, var(--good) 55%, var(--line));
  color: var(--good);
}

.review-entry-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
}

.review-entry-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
}

.review-entry-context a,
.review-entry-context strong {
  overflow-wrap: anywhere;
}

.review-user-comment {
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
}

.review-user-comment p,
.review-admin-comments p {
  margin: 5px 0 0;
  white-space: pre-wrap;
}

.review-admin-comments article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: min(var(--radius), 8px);
}

.review-admin-comments article small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
}

.review-comment-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.review-comment-composer textarea {
  min-height: 78px;
}

.review-admin-manager {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.review-admin-manager h3 {
  margin: 0;
}

.review-admin-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(240px, 1.2fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.review-admin-row strong {
  overflow-wrap: anywhere;
}

.review-admin-add {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(240px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
}

.two-column-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .review-inbox-counts,
  .review-entry-context,
  .review-inbox-filters,
  .review-comment-composer,
  .two-column-form {
    grid-template-columns: 1fr 1fr;
  }

  .review-admin-row,
  .review-admin-add {
    grid-template-columns: 1fr;
  }

  .review-admin-row .btn,
  .review-admin-add .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .review-inbox-counts,
  .review-entry-context,
  .review-inbox-filters,
  .review-comment-composer,
  .two-column-form,
  .review-inbox-entry > summary {
    grid-template-columns: 1fr;
  }

  .review-entry-badges {
    justify-content: flex-start;
  }
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-row input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.split-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.coach-shell {
  --coach-bg: #fbf4e8;
  --coach-surface: #fffaf0;
  --coach-surface-2: #f3eadb;
  --coach-forest: #143f35;
  --coach-forest-2: #1f5c4d;
  --coach-espresso: #2f241b;
  --coach-muted: #76695d;
  --coach-line: #e1d3bd;
  --coach-terracotta: #c96343;
  --coach-gold: #e7aa32;
  --coach-mint: #35d89f;
  --coach-shadow: 0 22px 60px rgba(47, 36, 27, 0.12);
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(231, 170, 50, 0.18), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(53, 216, 159, 0.16), transparent 24%),
    linear-gradient(180deg, #fff8ec, var(--coach-bg));
  color: var(--coach-espresso);
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

.coach-container {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  width: min(1180px, 100%);
  height: 100dvh;
  margin: 0 auto;
  padding: 20px 18px;
}

.coach-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(20, 63, 53, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(20, 63, 53, 0.96), rgba(31, 92, 77, 0.9)),
    var(--coach-forest);
  box-shadow: var(--coach-shadow);
  color: #fff8ea;
}

.coach-brand,
.coach-hero-copy,
.coach-panel-title,
.coach-action-row,
.coach-rating-row,
.coach-map-strip,
.coach-rhythm-item,
.coach-info-bar,
.coach-nav button {
  display: flex;
  align-items: center;
}

.coach-brand {
  gap: 14px;
  min-width: 0;
}

.coach-compass {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 248, 234, 0.68);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 248, 234, 0.22), transparent 60%),
    conic-gradient(from 18deg, transparent 0 20%, var(--coach-gold) 20% 28%, transparent 28% 50%, var(--coach-mint) 50% 58%, transparent 58%);
  box-shadow: 0 0 24px rgba(53, 216, 159, 0.18);
}

.coach-compass::after {
  content: "";
  position: absolute;
  inset: 14px;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: linear-gradient(135deg, var(--coach-gold), #fff2c1, var(--coach-mint));
}

.coach-brand strong,
.coach-hero-copy h1,
.coach-panel-title h2,
.coach-huddle-copy h2,
.coach-focus-card h3,
.coach-step-card h3 {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: 0;
}

.coach-brand strong {
  display: block;
  font-size: clamp(1.08rem, 2.4vw, 1.55rem);
}

.coach-brand span,
.coach-hero-copy span,
.coach-panel-kicker,
.coach-panel-title span,
.coach-focus-tag,
.coach-step-card span,
.coach-checkin-count,
.coach-rhythm-item span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.coach-brand span,
.coach-hero-copy span {
  color: rgba(255, 248, 234, 0.74);
}

.coach-hero-copy {
  display: grid;
  gap: 5px;
}

.coach-hero-copy h1 {
  margin: 0;
  font-size: clamp(1.55rem, 3.4vw, 2.8rem);
  line-height: 1.02;
}

.coach-dashboard {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(270px, 0.82fr) minmax(270px, 0.82fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-right: 4px;
}

.coach-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--coach-line);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 246, 227, 0.82)),
    var(--coach-surface);
  box-shadow: var(--coach-shadow);
}

.coach-panel.coach-disclosure {
  padding: 0;
}

.coach-disclosure-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 15px 20px;
  border: 0;
  background: transparent;
  color: var(--coach-forest);
  cursor: pointer;
  text-align: left;
}

.coach-disclosure-title > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.coach-disclosure-title small {
  color: var(--coach-forest-2);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.coach-disclosure-title strong {
  overflow-wrap: anywhere;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.15;
}

.coach-disclosure-title:hover,
.coach-disclosure-title:focus-visible {
  background: rgba(20, 63, 53, 0.06);
}

.coach-disclosure-title[aria-expanded="true"] .collapse-triangle {
  transform: rotate(90deg);
}

.coach-disclosure-body {
  min-width: 0;
  padding: 0 20px 20px;
  border-top: 1px solid rgba(20, 63, 53, 0.08);
}

.coach-disclosure-body > :first-child {
  margin-top: 16px;
}

.coach-disclosure-body .coach-step-list,
.coach-disclosure-body .coach-rhythm-list {
  overflow: visible;
  padding-right: 0;
}

.coach-disclosure-heading {
  margin: 16px 0 8px;
  color: var(--coach-forest);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
}

.coach-momentum-inline,
.coach-checkin-inline,
.coach-inline-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.coach-momentum-inline h2 {
  margin: 0;
  color: var(--coach-forest);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
}

.coach-checkin-inline {
  justify-content: flex-start;
  color: var(--coach-forest-2);
  font-weight: 800;
}

.coach-inline-action {
  justify-content: flex-end;
}

.coach-focus-panel {
  grid-column: 1 / 3;
  display: grid;
  align-content: start;
}

.coach-steps-panel {
  grid-column: 1 / 3;
}

.coach-calendar-panel {
  grid-column: 1 / -1;
}

.coach-rhythm-panel,
.coach-checkin-panel {
  align-content: start;
}

.coach-panel-kicker,
.coach-panel-title span,
.coach-focus-tag,
.coach-checkin-count,
.coach-rhythm-item span {
  color: var(--coach-forest-2);
}

.coach-huddle-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(320px, 1fr);
  gap: 20px;
  align-items: center;
}

.coach-huddle-copy h2 {
  color: var(--coach-forest);
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.03;
}

.coach-huddle-copy p,
.coach-focus-card p,
.coach-north-panel p,
.coach-momentum-panel p,
.coach-step-card p,
.coach-empty,
.coach-checkin-form p {
  color: var(--coach-muted);
  font-size: 1rem;
}

.coach-focus-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(20, 63, 53, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 0, rgba(231, 170, 50, 0.22), transparent 34%),
    #fffaf0;
}

.coach-focus-card.is-clear {
  background:
    radial-gradient(circle at 92% 4%, rgba(53, 216, 159, 0.18), transparent 34%),
    #fffaf0;
}

.coach-focus-card h3,
.coach-step-card h3 {
  color: var(--coach-forest);
  font-size: clamp(1.25rem, 2.7vw, 2rem);
  line-height: 1.08;
}

.coach-rating-row,
.coach-action-row {
  flex-wrap: wrap;
  gap: 9px;
}

.coach-rating {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.82rem;
  font-weight: 800;
}

.coach-rating-5,
.coach-rating-4 {
  background: rgba(53, 216, 159, 0.14);
  color: #15734f;
}

.coach-rating-3 {
  background: rgba(231, 170, 50, 0.18);
  color: #8a5b08;
}

.coach-rating-2 {
  background: rgba(201, 99, 67, 0.12);
  color: #a55034;
}

.coach-rating-1 {
  background: rgba(165, 59, 42, 0.12);
  color: #963728;
}

.coach-primary-action,
.coach-mini-btn,
.coach-action-row button,
.coach-rhythm-item button,
.coach-info-bar button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff7ea;
  color: var(--coach-forest);
  cursor: pointer;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.coach-primary-action,
.coach-mini-btn {
  background: linear-gradient(135deg, var(--coach-terracotta), var(--coach-gold));
  color: #fffaf0;
  box-shadow: 0 12px 26px rgba(201, 99, 67, 0.22);
}

.coach-primary-action:hover,
.coach-mini-btn:hover,
.coach-action-row button:hover,
.coach-rhythm-item button:hover,
.coach-info-bar button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(47, 36, 27, 0.14);
}

.coach-panel-title {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.coach-panel-title.compact {
  margin-bottom: 10px;
}

.coach-panel-title h2 {
  color: var(--coach-forest);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
}

.coach-map-strip {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.coach-map-strip span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(20, 63, 53, 0.08);
  color: var(--coach-forest);
  font-weight: 800;
}

.coach-map-strip i {
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--coach-gold);
}

.coach-momentum-score {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(53, 216, 159, 0.14);
  color: var(--coach-forest);
}

.coach-momentum-wave {
  height: 22px;
  overflow: hidden;
  margin: 12px 0 14px;
  border-radius: 999px;
  background: #eadfcd;
}

.coach-momentum-wave span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18px 50%, rgba(255, 255, 255, 0.32) 0 8px, transparent 9px) repeat-x,
    linear-gradient(90deg, var(--coach-forest-2), var(--coach-mint), var(--coach-gold));
  background-size: 34px 22px, auto;
}

.coach-step-list,
.coach-rhythm-list {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.coach-step-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(20, 63, 53, 0.12);
  border-radius: 20px;
  background: rgba(255, 250, 240, 0.82);
}

.coach-step-card.is-done {
  border-color: rgba(53, 216, 159, 0.42);
  background: rgba(224, 247, 235, 0.76);
}

.coach-step-card h3 {
  font-size: 1.18rem;
}

.coach-step-card p {
  margin-top: 4px;
}

.coach-rhythm-item {
  justify-content: space-between;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(20, 63, 53, 0.12);
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.78);
}

.coach-rhythm-item.is-done {
  background: rgba(224, 247, 235, 0.74);
}

.coach-rhythm-item strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--coach-espresso);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-checkin-form {
  display: grid;
  gap: 10px;
}

.coach-checkin-form .icon-range,
.coach-shell .icon-range {
  grid-template-columns: minmax(68px, 0.24fr) minmax(150px, 1fr);
  padding: 10px 12px;
  border: 1px solid rgba(20, 63, 53, 0.1);
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.76);
}

.coach-shell .metric-label {
  color: var(--coach-forest);
  font-weight: 800;
}

.coach-shell .metric-icon {
  color: var(--coach-terracotta);
  font-size: 1.2rem;
}

.coach-shell input[type="range"] {
  accent-color: var(--coach-terracotta);
}

.coach-info-bar {
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(53, 216, 159, 0.14);
  color: var(--coach-forest);
  font-weight: 800;
}

.coach-empty {
  padding: 12px;
  border: 1px dashed rgba(20, 63, 53, 0.24);
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.62);
}

.coach-workspace {
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.coach-north-star-grid {
  display: grid;
  gap: 14px;
}

.coach-north-star-tile {
  overflow: hidden;
  border: 1px solid var(--coach-line);
  border-radius: 20px;
  background: var(--coach-surface);
  box-shadow: 0 12px 30px rgba(47, 36, 27, 0.07);
}

.coach-north-star-tile .coach-disclosure-body {
  padding-bottom: 16px;
}

.coach-north-star-tile .section {
  margin-bottom: 0;
}

.coach-app-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.coach-app-body {
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}

.coach-app-body .topbar {
  display: none;
}

.coach-app-body .section {
  margin-bottom: 20px;
}

.coach-app-body h1,
.coach-app-body h2,
.coach-app-body h3,
.coach-shell .modal-panel h1,
.coach-shell .modal-panel h2,
.coach-shell .modal-panel h3 {
  color: var(--coach-forest);
  font-family: "Fraunces", Georgia, serif;
}

.coach-app-body .eyebrow,
.coach-app-body .muted,
.coach-shell .modal-panel .eyebrow,
.coach-shell .modal-panel .muted,
.coach-shell .modal-panel small {
  color: var(--coach-muted);
}

.coach-app-body .card,
.coach-app-body .empty-state,
.coach-app-body .day-cell,
.coach-shell .modal-panel {
  border: 1px solid var(--coach-line);
  border-radius: 22px;
  background: var(--coach-surface);
  box-shadow: 0 14px 36px rgba(47, 36, 27, 0.08);
  color: var(--coach-espresso);
}

.coach-app-body .task-card.completed,
.coach-app-body .recurring-card.completed,
.coach-app-body .day-cell.done {
  border-color: rgba(53, 216, 159, 0.42);
  background: rgba(224, 247, 235, 0.76);
}

.coach-app-body .task-card.time-pressure,
.coach-app-body .recurring-card.time-pressure,
.coach-app-body .day-cell.partial {
  border-color: rgba(231, 170, 50, 0.5);
  background: rgba(255, 244, 214, 0.86);
}

.coach-app-body .new-item-highlight {
  border-color: rgba(201, 99, 67, 0.48);
  background: rgba(255, 236, 224, 0.8);
}

.coach-app-body .btn,
.coach-app-body .choice,
.coach-shell .modal-panel .btn {
  border-radius: 999px;
  background: #fff7ea;
  color: var(--coach-forest);
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  transform: none;
}

.coach-app-body .btn:hover,
.coach-app-body .choice:hover,
.coach-shell .modal-panel .btn:hover {
  background: #fff1dd;
  box-shadow: 0 12px 28px rgba(47, 36, 27, 0.1);
}

.coach-app-body .btn.primary,
.coach-shell .modal-panel .btn.primary {
  background: linear-gradient(135deg, var(--coach-terracotta), var(--coach-gold));
  color: #fffaf0;
}

.coach-app-body .btn.danger,
.coach-shell .modal-panel .btn.danger {
  background: rgba(201, 99, 67, 0.12);
  color: #9a442d;
}

.coach-app-body input,
.coach-app-body select,
.coach-app-body textarea,
.coach-shell .modal-panel input,
.coach-shell .modal-panel select,
.coach-shell .modal-panel textarea {
  border: 1px solid var(--coach-line);
  border-radius: 16px;
  background: #fffaf0;
  color: var(--coach-espresso);
}

.coach-app-body .pill {
  border-color: rgba(20, 63, 53, 0.14);
  border-radius: 999px;
  background: rgba(20, 63, 53, 0.06);
  color: var(--coach-forest);
}

.coach-app-body .pill.good,
.coach-app-body .rating-pill.rating-good {
  border-color: rgba(53, 216, 159, 0.42);
  background: rgba(53, 216, 159, 0.14);
  color: #15734f;
}

.coach-app-body .pill.warn,
.coach-app-body .rating-pill.rating-warn {
  border-color: rgba(231, 170, 50, 0.5);
  background: rgba(231, 170, 50, 0.16);
  color: #8a5b08;
}

.coach-app-body .rating-pill.rating-light-bad,
.coach-app-body .rating-pill.rating-bad {
  border-color: rgba(201, 99, 67, 0.42);
  background: rgba(201, 99, 67, 0.12);
  color: #9a442d;
}

.coach-app-body .progress {
  height: 12px;
  border-radius: 999px;
  background: #eadfcd;
}

.coach-app-body .progress span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coach-forest-2), var(--coach-mint), var(--coach-gold));
}

.coach-shell .modal {
  background: rgba(47, 36, 27, 0.42);
}

.coach-shell .modal-panel .recommendation-block,
.coach-shell .modal-panel .recommendation-card,
.coach-shell .modal-panel .setup-summary,
.coach-shell .modal-panel .review-panel,
.coach-shell .modal-panel .suggestion-panel,
.coach-shell .modal-panel .clarity-panel,
.coach-shell .modal-panel .task-preview,
.coach-shell .modal-panel .recommendation-note,
.coach-app-body .recommendation-block,
.coach-app-body .recommendation-card,
.coach-app-body .setup-summary,
.coach-app-body .review-panel,
.coach-app-body .suggestion-panel,
.coach-app-body .clarity-panel,
.coach-app-body .task-preview,
.coach-app-body .recommendation-note {
  border: 1px solid var(--coach-line);
  border-radius: 18px;
  background: #fff7ea;
  color: var(--coach-espresso);
}

.coach-shell .modal-panel .recommendation-block p,
.coach-shell .modal-panel .recommendation-block li,
.coach-shell .modal-panel .recommendation-card p,
.coach-shell .modal-panel .setup-summary p,
.coach-shell .modal-panel .review-panel p,
.coach-shell .modal-panel .suggestion-panel p,
.coach-shell .modal-panel .clarity-panel p,
.coach-shell .modal-panel .clarity-panel li,
.coach-shell .modal-panel .task-preview p,
.coach-shell .modal-panel pre,
.coach-app-body .recommendation-block p,
.coach-app-body .recommendation-block li,
.coach-app-body .recommendation-card p,
.coach-app-body .setup-summary p,
.coach-app-body .review-panel p,
.coach-app-body .suggestion-panel p,
.coach-app-body .clarity-panel p,
.coach-app-body .clarity-panel li,
.coach-app-body .task-preview p,
.coach-app-body pre {
  color: var(--coach-espresso);
}

.coach-nav {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
}

.coach-nav button {
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(20, 63, 53, 0.12);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.86);
  color: var(--coach-forest);
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(47, 36, 27, 0.07);
}

.coach-nav button:hover,
.coach-nav button[aria-current="page"] {
  background: var(--coach-forest);
  color: #fff8ea;
}

.coach-nav-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(231, 170, 50, 0.2);
  color: currentColor;
}

.coach-toast {
  z-index: 12;
}

.game-shell {
  --game-bg: #070816;
  --game-screen: #101047;
  --game-panel: #19145a;
  --game-panel-2: #261065;
  --game-cyan: #23e6ff;
  --game-blue: #3284ff;
  --game-pink: #ff3bd5;
  --game-green: #35ff64;
  --game-yellow: #ffe34d;
  --game-orange: #ff9d2e;
  --game-red: #ff335f;
  --game-white: #f7f7ff;
  --game-muted: #9ac6ff;
  position: relative;
  display: grid;
  place-items: center;
  height: 100dvh;
  overflow: hidden;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 59, 213, 0.2), transparent 24%),
    radial-gradient(circle at 18% 82%, rgba(35, 230, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #070816, #14052c 58%, #05050e);
  color: var(--game-white);
  font-family: "VT323", "Share Tech Mono", ui-monospace, monospace;
  image-rendering: pixelated;
}

.game-shell *,
.game-shell *::before,
.game-shell *::after {
  image-rendering: pixelated;
}

.game-crt {
  position: relative;
  width: min(1220px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
  min-height: 640px;
  padding: 14px;
  border: 4px solid #05050d;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #2a2d3c, #0a0b12 14%, #232331 100%);
  box-shadow:
    inset 0 0 0 4px #6a7084,
    inset 0 0 0 8px #11131d,
    0 26px 70px rgba(0, 0, 0, 0.74);
}

.game-crt::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.18;
}

.game-crt::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 5;
  border: 2px solid rgba(35, 230, 255, 0.35);
  border-radius: 14px;
  box-shadow: inset 0 0 38px rgba(35, 230, 255, 0.16);
  pointer-events: none;
}

.game-screen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 74px;
  gap: 10px;
  height: 100%;
  overflow: hidden;
  padding: 12px;
  border: 4px solid var(--game-cyan);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(50, 132, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(50, 132, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #15105a, #070816 64%);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow:
    inset 0 0 0 4px #090a22,
    inset 0 0 42px rgba(255, 59, 213, 0.14);
}

.game-header {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 4px solid var(--game-cyan);
  background:
    linear-gradient(180deg, rgba(255, 59, 213, 0.16), transparent 64%),
    #08082f;
  box-shadow: 0 4px 0 #03305c;
}

.game-logo-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.game-logo-block strong {
  color: var(--game-cyan);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: clamp(1.05rem, 2.5vw, 2rem);
  line-height: 1.28;
  text-shadow:
    3px 0 0 var(--game-blue),
    0 3px 0 #082b7d,
    4px 4px 0 var(--game-yellow);
}

.game-logo-block span,
.game-hud-stat span,
.game-panel-title span,
.game-count-chip,
.game-stage-hud span,
.game-stage-footer span,
.game-task-copy span,
.game-power-up small,
.game-subtitle-row span {
  color: var(--game-muted);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.58rem;
  line-height: 1.45;
  text-transform: uppercase;
}

.game-hud-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.game-hud-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 3px solid #2f66ff;
  background: #070724;
  box-shadow: inset 0 0 0 2px #050514;
}

.game-hud-stat strong {
  overflow: hidden;
  color: var(--game-yellow);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: clamp(0.72rem, 1.35vw, 1rem);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #522500;
}

.game-hud-stat:last-child strong {
  font-size: clamp(0.56rem, 1.1vw, 0.82rem);
}

.game-energy strong {
  display: flex;
  gap: 3px;
}

.game-energy span.filled {
  color: var(--game-red);
}

.game-energy strong span:not(.filled) {
  color: #323052;
}

.game-dashboard,
.game-workspace {
  min-height: 0;
}

.game-dashboard {
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(280px, 0.78fr) minmax(340px, 1fr);
  grid-template-rows: minmax(250px, 0.82fr) minmax(240px, 1fr);
  gap: 10px;
  overflow: hidden;
}

.game-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 4px solid var(--game-cyan);
  background:
    linear-gradient(135deg, rgba(255, 59, 213, 0.16), transparent 36%),
    linear-gradient(180deg, var(--game-panel), #070724);
  box-shadow:
    inset 0 0 0 3px #050517,
    0 4px 0 #03305c;
}

.game-panel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.game-panel-title,
.game-stage-hud,
.game-stage-footer,
.game-subtitle-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.game-panel-title {
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--game-cyan);
  background: rgba(0, 0, 0, 0.26);
}

.game-panel-title h2,
.game-subtitle-row strong {
  color: var(--game-white);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: clamp(0.72rem, 1.18vw, 0.95rem);
  line-height: 1.45;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.game-mini-btn,
.game-task-actions button,
.game-power-up button,
.game-checkpoint-note button {
  min-height: 34px;
  padding: 6px 9px;
  border: 3px solid var(--game-yellow);
  border-radius: 0;
  background: #22104d;
  color: var(--game-yellow);
  cursor: pointer;
  font-family: "VT323", "Share Tech Mono", ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
}

.game-mini-btn:hover,
.game-task-actions button:hover,
.game-power-up button:hover,
.game-checkpoint-note button:hover {
  border-color: var(--game-green);
  color: var(--game-green);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

.game-hero-panel {
  grid-column: 1 / 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.game-stage-hud {
  padding: 10px 12px;
  border-bottom: 3px solid var(--game-cyan);
  background: #08082f;
}

.game-stage-hud div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.game-stage-hud strong {
  overflow: hidden;
  color: var(--game-yellow);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.7rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-stage-art {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #21d9ff 0 48%, #56db57 49% 72%, #8b4d22 72% 100%);
}

.game-stage-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background:
    repeating-linear-gradient(0deg, #6f3517 0 8px, #a8612d 8px 15px),
    #8b4d22;
  border-top: 6px solid #38f060;
}

.pixel-cloud {
  position: absolute;
  width: 110px;
  height: 34px;
  background: #dffcff;
  box-shadow:
    20px -12px 0 #dffcff,
    46px -18px 0 #dffcff,
    70px -8px 0 #dffcff;
}

.cloud-one {
  left: 10%;
  top: 18%;
}

.cloud-two {
  right: 16%;
  top: 12%;
  transform: scale(0.82);
}

.pixel-hill {
  position: absolute;
  bottom: 27%;
  width: 210px;
  height: 96px;
  border-radius: 999px 999px 0 0;
  background: #65c849;
}

.hill-one {
  left: 6%;
}

.hill-two {
  right: 8%;
  transform: scale(1.15);
}

.pixel-coin {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 34px;
  border: 4px solid #b97800;
  background: var(--game-yellow);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
}

.coin-one {
  left: 15%;
  top: 52%;
}

.coin-two {
  left: 22%;
  top: 48%;
}

.pixel-runner {
  position: absolute;
  left: 42%;
  top: 44%;
  z-index: 3;
  width: 28px;
  height: 44px;
  background: #244dff;
  box-shadow:
    0 -16px 0 #8f4a2f,
    12px -10px 0 #ffd39b,
    -10px 16px 0 #111a52,
    14px 18px 0 #ff335f,
    28px 10px 0 #ffd39b;
}

.pixel-platform {
  position: absolute;
  z-index: 2;
  width: 120px;
  height: 28px;
  border: 5px solid #191932;
  background: #434154;
}

.platform-one {
  left: 9%;
  bottom: 27%;
}

.platform-two {
  right: 19%;
  bottom: 43%;
}

.pixel-powerup {
  position: absolute;
  z-index: 2;
  right: 31%;
  top: 30%;
  width: 28px;
  height: 44px;
  border: 4px solid #0a4694;
  background: linear-gradient(180deg, #f7ffff, #2aa7ff);
  box-shadow:
    -44px 0 0 -4px #f7ffff,
    -44px 0 0 0 #0a4694,
    44px 0 0 -4px #f7ffff,
    44px 0 0 0 #0a4694;
}

.pixel-boss {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 30%;
  width: 78px;
  height: 58px;
  border: 5px solid #111a52;
  background:
    linear-gradient(90deg, transparent 42%, var(--game-yellow) 43% 58%, transparent 59%),
    #21307a;
  box-shadow: 0 0 0 5px rgba(255, 59, 213, 0.54);
}

.game-stage-footer {
  padding: 10px 12px;
  border-top: 3px solid var(--game-cyan);
  background: #08082f;
}

.game-level-panel,
.game-stages-panel,
.game-power-panel,
.game-app-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.game-level-panel {
  grid-row: 2;
}

.game-stages-panel {
  grid-column: 2 / 4;
  grid-row: 2;
}

.game-power-panel {
  grid-column: 3;
  grid-row: 1;
  align-content: start;
  overflow-y: auto;
}

.game-level-list,
.game-stage-list {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.game-challenge-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 108px;
  padding: 9px;
  border: 3px solid #2f66ff;
  border-radius: 0;
  background: #0b0b35;
  color: var(--game-white);
  text-align: left;
  box-shadow: 4px 4px 0 #000;
}

.game-challenge-button {
  cursor: pointer;
}

.game-challenge-button:hover {
  border-color: var(--game-green);
}

.game-cartridge,
.game-stage-number {
  display: grid;
  place-items: center;
  border: 3px solid var(--game-yellow);
  background: #2d125d;
  color: var(--game-yellow);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  box-shadow: 3px 3px 0 #000;
}

.game-cartridge {
  width: 48px;
  height: 58px;
}

.game-challenge-copy {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
}

.game-challenge-copy strong,
.game-task-copy strong,
.game-power-up strong {
  overflow: hidden;
  color: var(--game-white);
  font-size: 1.15rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-challenge-copy span,
.game-challenge-copy small,
.game-rating-row em {
  overflow: hidden;
  color: var(--game-muted);
  font-size: 0.95rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-progress {
  height: 12px;
  overflow: hidden;
  border: 3px solid #060617;
  background: #2b294f;
}

.game-progress i {
  display: block;
  width: var(--value);
  height: 100%;
  background: linear-gradient(90deg, var(--game-cyan), var(--game-green), var(--game-yellow));
}

.game-count-chip,
.game-bonus-title {
  border: 2px solid var(--game-pink);
  padding: 5px 8px;
  background: rgba(255, 59, 213, 0.12);
  color: var(--game-pink);
}

.game-bonus-title {
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.game-task-stage {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 3px solid #2f66ff;
  background: #0b0b35;
  box-shadow: 4px 4px 0 #000;
}

.game-task-stage.is-cleared {
  border-color: var(--game-green);
  background: rgba(53, 255, 100, 0.12);
}

.game-task-stage.is-bonus {
  border-color: var(--game-pink);
}

.game-stage-number {
  width: 36px;
  height: 36px;
}

.game-task-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.game-rating-row,
.game-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.game-rating {
  border: 2px solid currentColor;
  padding: 2px 5px;
  font-size: 0.9rem;
  line-height: 1;
  text-transform: uppercase;
}

.game-rating-5,
.game-rating-4 {
  color: var(--game-green);
}

.game-rating-3 {
  color: var(--game-yellow);
}

.game-rating-2 {
  color: var(--game-orange);
}

.game-rating-1 {
  color: var(--game-red);
}

.game-task-actions {
  justify-content: flex-end;
  max-width: 210px;
}

.game-task-actions button,
.game-power-up button,
.game-checkpoint-note button {
  min-height: 28px;
  padding: 3px 6px;
  font-size: 0.92rem;
}

.game-power-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.game-power-up {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 108px;
  padding: 9px;
  border: 3px solid #2f66ff;
  background: #0b0b35;
  text-align: center;
  box-shadow: 3px 3px 0 #000;
}

.game-power-up.is-active {
  border-color: var(--game-green);
  box-shadow: 0 0 14px rgba(53, 255, 100, 0.28), 3px 3px 0 #000;
}

.game-power-up > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  border: 2px solid var(--game-yellow);
  color: var(--game-yellow);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.54rem;
}

.game-power-up div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.game-subpanel {
  position: relative;
  z-index: 1;
  margin: 0 12px 12px;
  padding: 10px;
  border: 3px solid #2f66ff;
  background: #090930;
}

.game-subtitle-row {
  margin-bottom: 8px;
}

.game-checkin-form {
  display: grid;
  gap: 7px;
}

.game-checkin-form > span {
  color: var(--game-yellow);
  text-transform: uppercase;
}

.game-checkpoint-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--game-green);
}

.game-log-lines {
  display: grid;
  gap: 4px;
  max-height: 130px;
  overflow: auto;
}

.game-log-lines span {
  color: var(--game-green);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.game-empty {
  border: 2px dashed rgba(35, 230, 255, 0.52);
  padding: 9px;
  color: var(--game-muted);
  font-size: 1rem;
}

.game-nav {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  min-height: 0;
  padding: 8px;
  border: 4px solid var(--game-cyan);
  background: #08082f;
  box-shadow: 0 -4px 0 #03305c;
}

.game-nav button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 7px;
  border: 3px solid #2f66ff;
  border-radius: 0;
  background: #0b0b35;
  color: var(--game-white);
  cursor: pointer;
  font-family: "VT323", "Share Tech Mono", ui-monospace, monospace;
  font-size: 1.12rem;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
}

.game-nav button:hover,
.game-nav button[aria-current="page"] {
  border-color: var(--game-yellow);
  color: var(--game-yellow);
}

.game-nav-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border: 2px solid currentColor;
  color: inherit;
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.5rem;
}

.game-workspace {
  display: grid;
  overflow: hidden;
}

.game-app-panel {
  overflow: hidden;
}

.game-app-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.game-app-body .section {
  margin-bottom: 18px;
}

.game-app-body .topbar {
  display: none;
}

.game-app-body h1,
.game-app-body h2,
.game-app-body h3,
.game-shell .modal-panel h1,
.game-shell .modal-panel h2,
.game-shell .modal-panel h3 {
  color: var(--game-yellow);
  font-family: "Press Start 2P", "VT323", ui-monospace, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.game-app-body .eyebrow,
.game-app-body .muted,
.game-shell .modal-panel .eyebrow,
.game-shell .modal-panel .muted,
.game-shell .modal-panel small {
  color: var(--game-muted);
}

.game-app-body .card,
.game-app-body .empty-state,
.game-app-body .day-cell,
.game-shell .modal-panel {
  border: 3px solid var(--game-cyan);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255, 59, 213, 0.14), transparent 34%),
    #0b0b35;
  box-shadow: 4px 4px 0 #000;
  color: var(--game-white);
}

.game-app-body .task-card.completed,
.game-app-body .recurring-card.completed,
.game-app-body .day-cell.done {
  border-color: var(--game-green);
  background: rgba(53, 255, 100, 0.12);
}

.game-app-body .task-card.time-pressure,
.game-app-body .recurring-card.time-pressure,
.game-app-body .day-cell.partial {
  border-color: var(--game-yellow);
  background: rgba(255, 227, 77, 0.12);
}

.game-app-body .new-item-highlight {
  border-color: var(--game-pink);
  background: rgba(255, 59, 213, 0.12);
}

.game-app-body .btn,
.game-app-body .choice,
.game-shell .modal-panel .btn {
  border: 3px solid var(--game-yellow);
  border-radius: 0;
  background: #22104d;
  color: var(--game-yellow);
  font-family: "VT323", "Share Tech Mono", ui-monospace, monospace;
  font-size: 1.08rem;
  font-weight: 900;
  text-transform: uppercase;
  transform: none;
  box-shadow: 3px 3px 0 #000;
}

.game-app-body .btn:hover,
.game-app-body .choice:hover,
.game-shell .modal-panel .btn:hover {
  border-color: var(--game-green);
  color: var(--game-green);
  box-shadow: 4px 4px 0 #000;
}

.game-app-body .btn.primary,
.game-shell .modal-panel .btn.primary {
  border-color: var(--game-green);
  background: rgba(53, 255, 100, 0.14);
  color: var(--game-green);
}

.game-app-body .btn.danger,
.game-shell .modal-panel .btn.danger {
  border-color: var(--game-red);
  background: rgba(255, 51, 95, 0.14);
  color: var(--game-red);
}

.game-app-body input,
.game-app-body select,
.game-app-body textarea,
.game-shell .modal-panel input,
.game-shell .modal-panel select,
.game-shell .modal-panel textarea {
  border: 3px solid #2f66ff;
  border-radius: 0;
  background: #070724;
  color: var(--game-white);
}

.game-app-body .pill {
  border-color: #2f66ff;
  border-radius: 0;
  background: #070724;
  color: var(--game-white);
}

.game-app-body .pill.good,
.game-app-body .rating-pill.rating-good {
  border-color: var(--game-green);
  color: var(--game-green);
}

.game-app-body .pill.warn,
.game-app-body .rating-pill.rating-warn {
  border-color: var(--game-yellow);
  color: var(--game-yellow);
}

.game-app-body .rating-pill.rating-light-bad,
.game-app-body .rating-pill.rating-bad {
  border-color: var(--game-red);
  color: var(--game-red);
}

.game-app-body .progress {
  border: 3px solid #060617;
  background: #2b294f;
}

.game-app-body .progress span {
  background: linear-gradient(90deg, var(--game-cyan), var(--game-green), var(--game-yellow));
}

.game-shell .icon-range {
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 38px;
  padding: 5px 7px;
  border: 3px solid #2f66ff;
  border-radius: 0;
  background: #070724;
}

.game-shell .metric-label {
  color: var(--game-yellow);
  font-size: 1rem;
  text-transform: uppercase;
}

.game-shell .metric-icon {
  min-width: 24px;
  color: var(--game-cyan);
  font-size: 1rem;
}

.game-shell input[type="range"] {
  accent-color: var(--game-pink);
}

.game-shell .modal {
  background: rgba(0, 0, 0, 0.78);
}

.game-shell .modal-panel .recommendation-block,
.game-shell .modal-panel .recommendation-card,
.game-shell .modal-panel .setup-summary,
.game-shell .modal-panel .review-panel,
.game-shell .modal-panel .suggestion-panel,
.game-shell .modal-panel .clarity-panel,
.game-shell .modal-panel .task-preview,
.game-shell .modal-panel .recommendation-note,
.game-app-body .recommendation-block,
.game-app-body .recommendation-card,
.game-app-body .setup-summary,
.game-app-body .review-panel,
.game-app-body .suggestion-panel,
.game-app-body .clarity-panel,
.game-app-body .task-preview,
.game-app-body .recommendation-note {
  border: 3px solid #2f66ff;
  border-radius: 0;
  background: #08082f;
  color: var(--game-white);
}

.game-shell .modal-panel .recommendation-block p,
.game-shell .modal-panel .recommendation-block li,
.game-shell .modal-panel .recommendation-card p,
.game-shell .modal-panel .setup-summary p,
.game-shell .modal-panel .review-panel p,
.game-shell .modal-panel .suggestion-panel p,
.game-shell .modal-panel .clarity-panel p,
.game-shell .modal-panel .clarity-panel li,
.game-shell .modal-panel .task-preview p,
.game-shell .modal-panel pre,
.game-app-body .recommendation-block p,
.game-app-body .recommendation-block li,
.game-app-body .recommendation-card p,
.game-app-body .setup-summary p,
.game-app-body .review-panel p,
.game-app-body .suggestion-panel p,
.game-app-body .clarity-panel p,
.game-app-body .clarity-panel li,
.game-app-body .task-preview p,
.game-app-body pre {
  color: var(--game-white);
}

.game-toast {
  z-index: 12;
}

.quest-shell {
  --quest-ink: #2a190d;
  --quest-ink-soft: #684827;
  --quest-parchment: #f2d99f;
  --quest-parchment-2: #e6bf73;
  --quest-parchment-3: #c98d3f;
  --quest-gold: #f5c86f;
  --quest-gold-deep: #8a5422;
  --quest-blue: #1fb8e6;
  --quest-green: #4c9f43;
  --quest-red: #9e302a;
  --quest-shadow: rgba(28, 14, 6, 0.45);
  position: relative;
  display: grid;
  place-items: center;
  height: 100dvh;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(90deg, rgba(43, 23, 10, 0.9), rgba(92, 52, 24, 0.72), rgba(43, 23, 10, 0.9)),
    repeating-linear-gradient(90deg, #5a3218 0 18px, #6f421f 18px 32px, #482713 32px 48px);
  color: var(--quest-ink);
  font-family: Georgia, Cambria, "Times New Roman", serif;
}

.quest-table {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 78%, rgba(245, 200, 111, 0.16), transparent 18%),
    radial-gradient(circle at 88% 12%, rgba(12, 21, 30, 0.42), transparent 22%),
    linear-gradient(180deg, rgba(255, 232, 174, 0.08), rgba(26, 12, 5, 0.32));
  pointer-events: none;
}

.quest-device {
  position: relative;
  display: grid;
  grid-template-rows: 112px minmax(0, 1fr) 88px;
  width: min(1220px, calc(100vw - 28px));
  height: calc(100dvh - 28px);
  min-height: 620px;
  overflow: hidden;
  padding: 16px;
  border: 2px solid #2b3038;
  border-radius: 28px;
  background:
    linear-gradient(180deg, #121b29, #101722 18%, #332316 18%, #2b1e15 100%);
  box-shadow:
    inset 0 0 0 8px #080b10,
    inset 0 0 0 10px rgba(245, 200, 111, 0.22),
    0 28px 70px rgba(0, 0, 0, 0.58);
}

.quest-header {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(320px, 1fr) minmax(150px, 0.45fr);
  gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 10px 16px 14px;
  border: 1px solid rgba(245, 200, 111, 0.32);
  border-radius: 8px 8px 4px 4px;
  background:
    linear-gradient(180deg, rgba(10, 20, 34, 0.98), rgba(13, 23, 34, 0.84)),
    #101722;
  color: #f7dfaa;
  box-shadow: inset 0 -1px 0 rgba(31, 184, 230, 0.45);
}

.quest-brand,
.quest-identity,
.quest-gold-readout,
.quest-profile-row,
.quest-vital-row,
.quest-subtitle-row,
.quest-panel-title,
.quest-decree,
.quest-checkin-note {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quest-brand {
  min-width: 0;
}

.quest-logo-mark {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 2px solid var(--quest-blue);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(31, 184, 230, 0.2), transparent 62%),
    conic-gradient(from 24deg, transparent 0 18%, var(--quest-gold) 18% 26%, transparent 26% 50%, var(--quest-blue) 50% 58%, transparent 58%);
  box-shadow: 0 0 18px rgba(31, 184, 230, 0.55);
}

.quest-logo-mark::after {
  content: "";
  position: absolute;
  inset: 11px;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: linear-gradient(135deg, var(--quest-gold), var(--quest-blue));
}

.quest-brand strong {
  display: block;
  color: #ffe7ae;
  font-family: "Orbitron", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  text-shadow:
    0 0 12px rgba(31, 184, 230, 0.75),
    0 2px 0 #623414;
}

.quest-brand span:not(.quest-logo-mark),
.quest-gold-readout span,
.quest-vital-label,
.quest-panel-title span,
.quest-subtitle-row span,
.quest-profile-row span,
.quest-item small,
.quest-venture-copy small,
.quest-map-node small {
  color: var(--quest-ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quest-header .quest-brand span:not(.quest-logo-mark),
.quest-header .quest-gold-readout span,
.quest-header .quest-vital-label {
  color: #c99d62;
}

.quest-identity {
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.quest-identity strong {
  overflow: hidden;
  max-width: 100%;
  color: #ffeac0;
  font-size: 1.08rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-vital-row {
  display: grid;
  grid-template-columns: auto minmax(88px, 150px) auto minmax(88px, 150px);
  width: 100%;
  justify-content: center;
}

.quest-vital-bar {
  display: block;
  height: 12px;
  overflow: hidden;
  border: 2px solid #28180e;
  border-radius: 999px;
  background: #0b1218;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.quest-vital-bar i {
  display: block;
  width: var(--value);
  height: 100%;
}

.quest-vital-bar.stamina i {
  background: linear-gradient(90deg, var(--quest-red), #f0673a);
}

.quest-vital-bar.exp i {
  background: linear-gradient(90deg, var(--quest-blue), var(--quest-green));
}

.quest-gold-readout {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.quest-gold-readout strong {
  color: var(--quest-gold);
  font-size: 1.28rem;
  text-shadow: 0 0 10px rgba(245, 200, 111, 0.35);
}

.quest-dashboard,
.quest-workspace {
  min-height: 0;
  padding: 12px 0;
}

.quest-dashboard {
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(390px, 1.45fr) minmax(250px, 0.75fr);
  gap: 12px;
  overflow: hidden;
}

.quest-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(111, 65, 27, 0.74);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 245, 202, 0.62), rgba(227, 181, 103, 0.24)),
    repeating-linear-gradient(0deg, rgba(88, 46, 18, 0.035) 0 1px, transparent 1px 7px),
    var(--quest-parchment);
  box-shadow:
    inset 0 0 34px rgba(118, 60, 24, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.2);
}

.quest-panel::before,
.quest-panel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(138, 84, 34, 0.24);
  border-radius: 6px;
  pointer-events: none;
}

.quest-panel::after {
  inset: auto 18px 7px;
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(138, 84, 34, 0.32), transparent);
}

.quest-panel:hover {
  border-color: rgba(245, 200, 111, 0.95);
  box-shadow:
    inset 0 0 34px rgba(118, 60, 24, 0.18),
    0 0 22px rgba(245, 200, 111, 0.2);
}

.quest-panel-title {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(138, 84, 34, 0.32);
}

.quest-panel-title.centered {
  justify-content: center;
  text-align: center;
}

.quest-panel-title h2,
.quest-subtitle-row h3,
.quest-journal-head h2 {
  color: var(--quest-ink);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quest-mini-btn {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--quest-gold-deep);
  border-radius: 6px;
  background: linear-gradient(180deg, #f7d78d, #b97834);
  color: #2a160b;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.quest-mini-btn:hover {
  border-color: #ffe4a6;
  box-shadow: 0 0 14px rgba(245, 200, 111, 0.34);
  transform: translateY(-1px);
}

.quest-venture-list {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 10px;
  height: calc(100% - 54px);
  overflow: auto;
  padding-top: 12px;
  padding-right: 4px;
}

.quest-venture-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid rgba(138, 84, 34, 0.42);
  border-radius: 8px;
  background: rgba(255, 236, 180, 0.38);
  color: var(--quest-ink);
  text-align: left;
}

.quest-venture-button {
  cursor: pointer;
}

.quest-venture-button:hover,
.quest-map-node:hover {
  border-color: var(--quest-blue);
  box-shadow: 0 0 14px rgba(31, 184, 230, 0.28);
}

.quest-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 64px;
  border: 2px solid #603817;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(180deg, rgba(76, 159, 67, 0.92), rgba(32, 89, 47, 0.95)),
    #2c6036;
  color: #fff3c7;
  font-size: 0.78rem;
  font-weight: 900;
  text-shadow: 0 1px 0 #1a120b;
}

.quest-venture-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.quest-venture-copy strong {
  overflow: hidden;
  color: #2c1609;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-venture-copy span {
  overflow: hidden;
  color: #3e2a18;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-progress {
  height: 10px;
  overflow: hidden;
  border: 2px solid #4a2a12;
  border-radius: 999px;
  background: #3d342c;
}

.quest-progress i {
  display: block;
  width: var(--value);
  height: 100%;
  background: linear-gradient(90deg, #277ca1, #29c3e8, #89da67);
}

.quest-map-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.quest-map {
  position: relative;
  min-height: 0;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid rgba(138, 84, 34, 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 38%, #e8d28e 0 16%, transparent 17%),
    radial-gradient(circle at 62% 58%, #9ec570 0 14%, transparent 15%),
    radial-gradient(circle at 78% 35%, rgba(212, 212, 196, 0.78) 0 18%, transparent 19%),
    linear-gradient(145deg, #d7c177, #b9d08d 42%, #d9bd78 70%, #b7c58b);
  box-shadow: inset 0 0 44px rgba(57, 40, 20, 0.24);
}

.quest-map-illustration {
  position: absolute;
  inset: 0;
}

.quest-mountain {
  position: absolute;
  width: 150px;
  height: 120px;
  clip-path: polygon(50% 2%, 100% 100%, 0 100%);
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.62) 49% 58%, transparent 59%),
    linear-gradient(135deg, #6c6f67, #b2b29f 52%, #584631);
  opacity: 0.72;
}

.quest-mountain.ridge-one {
  left: 8%;
  top: 12%;
}

.quest-mountain.ridge-two {
  left: 24%;
  top: 7%;
  transform: scale(0.78);
}

.quest-forest {
  position: absolute;
  width: 150px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 68%, #477c3c 0 18px, transparent 19px),
    radial-gradient(circle at 40% 52%, #5c9548 0 24px, transparent 25px),
    radial-gradient(circle at 64% 62%, #386f34 0 20px, transparent 21px),
    radial-gradient(circle at 78% 48%, #6aa64e 0 18px, transparent 19px);
}

.quest-forest.forest-one {
  left: 14%;
  bottom: 18%;
}

.quest-forest.forest-two {
  right: 19%;
  bottom: 28%;
  transform: scale(0.78);
}

.quest-lake {
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: 180px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(86, 157, 177, 0.76), rgba(38, 102, 128, 0.42), transparent 72%);
}

.quest-path {
  position: absolute;
  border-top: 5px dotted rgba(99, 57, 27, 0.72);
}

.quest-path.path-one {
  left: 22%;
  top: 42%;
  width: 46%;
  transform: rotate(18deg);
}

.quest-path.path-two {
  right: 15%;
  top: 54%;
  width: 42%;
  transform: rotate(-28deg);
}

.quest-hero-marker {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 24px;
  height: 42px;
  border: 3px solid #4b2811;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #8e5a35, #4b2811);
  box-shadow: 0 4px 0 rgba(72, 40, 17, 0.42);
}

.quest-hero-marker::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 2px;
  width: 14px;
  height: 14px;
  border: 3px solid #4b2811;
  border-radius: 999px;
  background: #d0a36c;
}

.quest-map-node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 132px;
  min-height: 74px;
  padding: 7px;
  border: 2px solid rgba(57, 40, 20, 0.52);
  border-radius: 8px;
  background: rgba(234, 205, 139, 0.86);
  color: var(--quest-ink);
  text-align: center;
}

.quest-map-node span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #3c2718;
  border-radius: 999px;
  background: #2d3946;
  color: var(--quest-gold);
  font-size: 0.7rem;
  font-weight: 900;
}

.quest-map-node strong {
  font-size: 0.88rem;
  line-height: 1.08;
}

.quest-map-node.node-0 {
  left: 24%;
  top: 10%;
}

.quest-map-node.node-1 {
  right: 10%;
  top: 16%;
}

.quest-map-node.node-2 {
  left: 10%;
  bottom: 16%;
}

.quest-map-node.node-3 {
  right: 14%;
  bottom: 20%;
}

.quest-map-node.node-4 {
  left: 40%;
  bottom: 8%;
}

.quest-map-node.node-5 {
  left: 44%;
  top: 35%;
}

.quest-journal-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
}

.quest-journal-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  text-align: center;
}

.quest-profile-row {
  justify-content: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(138, 84, 34, 0.28);
}

.quest-portrait {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #4c2a12;
  border-radius: 999px;
  background: linear-gradient(180deg, #31506a, #172434);
  color: #ffe6ac;
  font-weight: 900;
}

.quest-profile-row div {
  display: grid;
  text-align: left;
}

.quest-profile-row strong {
  color: var(--quest-ink);
}

.quest-stat-grid {
  display: grid;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(138, 84, 34, 0.28);
}

.quest-stat-grid span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-weight: 800;
}

.quest-stat-grid strong,
.quest-stat-grid b {
  color: #2c1609;
  font-size: 1rem;
}

.quest-subtitle-row {
  justify-content: space-between;
  margin-bottom: 8px;
}

.quest-inventory,
.quest-decrees,
.quest-camp-checkin {
  position: relative;
  z-index: 1;
}

.quest-inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quest-item {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  min-height: 92px;
  padding: 8px 5px;
  border: 1px solid rgba(98, 56, 22, 0.44);
  border-radius: 8px;
  background: rgba(104, 61, 31, 0.16);
  text-align: center;
}

.quest-item-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #5f3717;
  border-radius: 8px;
  background: linear-gradient(180deg, #f0cc82, #8d5423);
  color: #211007;
  font-size: 0.7rem;
  font-weight: 900;
}

.quest-item strong {
  font-size: 0.78rem;
  line-height: 1.08;
}

.quest-decree-list {
  display: grid;
  gap: 7px;
}

.quest-decree {
  align-items: flex-start;
  padding: 7px;
  border: 1px solid rgba(98, 56, 22, 0.36);
  border-radius: 8px;
  background: rgba(255, 236, 180, 0.28);
}

.quest-decree.is-done {
  background: rgba(76, 159, 67, 0.16);
}

.quest-decree button {
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 28px;
  border: 1px solid #5f3717;
  border-radius: 6px;
  background: #f3cc80;
  color: #2a160b;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
}

.quest-decree div {
  display: grid;
  min-width: 0;
}

.quest-decree strong,
.quest-decree span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-decree span {
  color: var(--quest-ink-soft);
  font-size: 0.78rem;
}

.quest-empty {
  padding: 8px;
  border: 1px dashed rgba(98, 56, 22, 0.38);
  border-radius: 8px;
  background: rgba(255, 236, 180, 0.24);
  color: var(--quest-ink-soft);
  font-size: 0.86rem;
}

.quest-checkin-form {
  display: grid;
  gap: 8px;
}

.quest-checkin-form p {
  color: var(--quest-ink-soft);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quest-checkin-note {
  justify-content: space-between;
  padding: 8px;
  border: 1px solid rgba(76, 159, 67, 0.45);
  border-radius: 8px;
  background: rgba(76, 159, 67, 0.12);
  font-weight: 800;
}

.quest-shell .icon-range {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 34px;
  padding: 5px 7px;
  border-color: rgba(98, 56, 22, 0.32);
  border-radius: 8px;
  background: rgba(255, 236, 180, 0.22);
}

.quest-shell .metric-label {
  color: var(--quest-ink);
  font-size: 0.82rem;
}

.quest-shell .metric-icon {
  min-width: 24px;
  color: var(--quest-gold-deep);
  font-size: 1rem;
}

.quest-shell input[type="range"] {
  accent-color: var(--quest-blue);
}

.quest-nav {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 0;
  padding: 10px 10px 0;
  border: 1px solid rgba(245, 200, 111, 0.28);
  border-radius: 4px 4px 12px 12px;
  background: linear-gradient(180deg, rgba(47, 31, 20, 0.86), rgba(12, 20, 32, 0.96));
}

.quest-nav button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 66px;
  padding: 3px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d8b783;
  cursor: pointer;
  font-weight: 900;
  text-shadow: 0 1px 0 #201108;
}

.quest-nav button:hover,
.quest-nav button[aria-current="page"] {
  color: #ffe7ae;
}

.quest-nav-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid #6a3b18;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 230, 172, 0.32), transparent 44%),
    linear-gradient(180deg, #9b5722, #3a2011);
  color: var(--quest-gold);
  font-family: "Orbitron", Georgia, serif;
  font-size: 1rem;
  box-shadow: inset 0 0 0 3px rgba(255, 222, 147, 0.12);
}

.quest-nav button[aria-current="page"] .quest-nav-icon {
  border-color: var(--quest-blue);
  box-shadow:
    0 0 18px rgba(31, 184, 230, 0.7),
    inset 0 0 0 3px rgba(255, 222, 147, 0.12);
}

.quest-workspace {
  display: grid;
  overflow: hidden;
}

.quest-workspace-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.quest-workspace-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 4px 4px;
}

.quest-workspace-body .section {
  margin-bottom: 18px;
}

.quest-workspace-body h1,
.quest-workspace-body h2,
.quest-workspace-body h3,
.quest-shell .modal-panel h1,
.quest-shell .modal-panel h2,
.quest-shell .modal-panel h3 {
  color: var(--quest-ink);
  font-family: Georgia, Cambria, "Times New Roman", serif;
}

.quest-workspace-body .eyebrow,
.quest-workspace-body .muted,
.quest-shell .modal-panel .eyebrow,
.quest-shell .modal-panel .muted,
.quest-shell .modal-panel small {
  color: var(--quest-ink-soft);
}

.quest-workspace-body .card,
.quest-workspace-body .empty-state,
.quest-workspace-body .day-cell,
.quest-shell .modal-panel {
  border: 1px solid rgba(111, 65, 27, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 245, 202, 0.54), rgba(227, 181, 103, 0.22)),
    var(--quest-parchment);
  box-shadow: inset 0 0 26px rgba(118, 60, 24, 0.12);
  color: var(--quest-ink);
}

.quest-workspace-body .task-card.completed,
.quest-workspace-body .recurring-card.completed,
.quest-workspace-body .day-cell.done {
  border-color: rgba(76, 159, 67, 0.62);
  background: rgba(217, 238, 176, 0.7);
}

.quest-workspace-body .task-card.time-pressure,
.quest-workspace-body .recurring-card.time-pressure,
.quest-workspace-body .day-cell.partial {
  border-color: rgba(185, 106, 32, 0.65);
  background: rgba(255, 225, 155, 0.72);
}

.quest-workspace-body .new-item-highlight {
  border-color: rgba(31, 184, 230, 0.72);
  background: rgba(209, 238, 234, 0.72);
}

.quest-workspace-body .btn,
.quest-workspace-body .choice,
.quest-shell .modal-panel .btn {
  border: 1px solid var(--quest-gold-deep);
  border-radius: 6px;
  background: rgba(255, 226, 160, 0.46);
  color: var(--quest-ink);
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-weight: 900;
  transform: none;
}

.quest-workspace-body .btn:hover,
.quest-workspace-body .choice:hover,
.quest-shell .modal-panel .btn:hover {
  border-color: var(--quest-blue);
  background: rgba(214, 239, 241, 0.64);
  color: #153443;
  box-shadow: 0 0 14px rgba(31, 184, 230, 0.2);
}

.quest-workspace-body .btn.primary,
.quest-shell .modal-panel .btn.primary {
  border-color: #6a3b18;
  background: linear-gradient(180deg, #f5d491, #a96428);
  color: #211007;
}

.quest-workspace-body .btn.danger,
.quest-shell .modal-panel .btn.danger {
  border-color: var(--quest-red);
  background: rgba(158, 48, 42, 0.14);
  color: var(--quest-red);
}

.quest-workspace-body .choice[aria-pressed="true"] {
  border-color: var(--quest-blue);
  background: rgba(31, 184, 230, 0.12);
}

.quest-workspace-body input,
.quest-workspace-body select,
.quest-workspace-body textarea,
.quest-shell .modal-panel input,
.quest-shell .modal-panel select,
.quest-shell .modal-panel textarea {
  border: 1px solid rgba(111, 65, 27, 0.5);
  border-radius: 6px;
  background: rgba(255, 246, 218, 0.72);
  color: var(--quest-ink);
}

.quest-workspace-body .pill {
  border-color: rgba(111, 65, 27, 0.36);
  border-radius: 999px;
  background: rgba(255, 226, 160, 0.38);
  color: var(--quest-ink);
}

.quest-workspace-body .pill.good,
.quest-workspace-body .rating-pill.rating-good {
  border-color: rgba(76, 159, 67, 0.54);
  background: rgba(76, 159, 67, 0.16);
  color: #236428;
}

.quest-workspace-body .pill.warn,
.quest-workspace-body .rating-pill.rating-warn {
  border-color: rgba(185, 106, 32, 0.62);
  background: rgba(245, 200, 111, 0.25);
  color: #704012;
}

.quest-workspace-body .rating-pill.rating-light-bad,
.quest-workspace-body .rating-pill.rating-bad {
  border-color: rgba(158, 48, 42, 0.54);
  background: rgba(158, 48, 42, 0.12);
  color: var(--quest-red);
}

.quest-workspace-body .progress {
  border-color: rgba(111, 65, 27, 0.42);
  background: rgba(72, 46, 29, 0.2);
}

.quest-workspace-body .progress span {
  background: linear-gradient(90deg, var(--quest-blue), var(--quest-green));
}

.quest-shell .modal {
  background: rgba(25, 12, 5, 0.68);
}

.quest-shell .modal-panel .recommendation-block,
.quest-shell .modal-panel .recommendation-card,
.quest-shell .modal-panel .setup-summary,
.quest-shell .modal-panel .review-panel,
.quest-shell .modal-panel .suggestion-panel,
.quest-shell .modal-panel .clarity-panel,
.quest-shell .modal-panel .task-preview,
.quest-shell .modal-panel .recommendation-note,
.quest-workspace-body .recommendation-block,
.quest-workspace-body .recommendation-card,
.quest-workspace-body .setup-summary,
.quest-workspace-body .review-panel,
.quest-workspace-body .suggestion-panel,
.quest-workspace-body .clarity-panel,
.quest-workspace-body .task-preview,
.quest-workspace-body .recommendation-note {
  border: 1px solid rgba(111, 65, 27, 0.44);
  border-radius: 8px;
  background: rgba(255, 241, 197, 0.76);
  color: var(--quest-ink);
}

.quest-shell .modal-panel .recommendation-block p,
.quest-shell .modal-panel .recommendation-block li,
.quest-shell .modal-panel .recommendation-card p,
.quest-shell .modal-panel .setup-summary p,
.quest-shell .modal-panel .review-panel p,
.quest-shell .modal-panel .suggestion-panel p,
.quest-shell .modal-panel .clarity-panel p,
.quest-shell .modal-panel .clarity-panel li,
.quest-shell .modal-panel .task-preview p,
.quest-shell .modal-panel pre,
.quest-workspace-body .recommendation-block p,
.quest-workspace-body .recommendation-block li,
.quest-workspace-body .recommendation-card p,
.quest-workspace-body .setup-summary p,
.quest-workspace-body .review-panel p,
.quest-workspace-body .suggestion-panel p,
.quest-workspace-body .clarity-panel p,
.quest-workspace-body .clarity-panel li,
.quest-workspace-body .task-preview p,
.quest-workspace-body pre {
  color: var(--quest-ink);
}

.quest-toast {
  z-index: 12;
}

.command-center-shell {
  --cmd-bg: #0a0c0e;
  --cmd-panel: #14181b;
  --cmd-panel-2: rgba(20, 24, 27, 0.92);
  --cmd-line: #1f2429;
  --cmd-green: #00ff66;
  --cmd-amber: #ffb300;
  --cmd-red: #ff3333;
  --cmd-blue: #00e5ff;
  --cmd-muted: #8da2ad;
  --cmd-text: #d9f9ff;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(10, 12, 14, 0.96), rgba(10, 12, 14, 0.78), rgba(10, 12, 14, 0.96)),
    linear-gradient(180deg, rgba(0, 229, 255, 0.09), rgba(10, 12, 14, 0.96)),
    url("/src/assets/command-center-reference.png") center / cover no-repeat,
    var(--cmd-bg);
  color: var(--cmd-text);
  font-family: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  text-transform: none;
}

.command-center-shell::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  pointer-events: none;
  box-shadow:
    inset 0 0 42px rgba(0, 229, 255, 0.08),
    0 0 80px rgba(0, 0, 0, 0.75);
}

.command-scanlines,
.command-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.command-scanlines {
  opacity: 0.18;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.command-noise {
  opacity: 0.1;
  background-image:
    radial-gradient(circle at 12% 23%, rgba(0, 229, 255, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 41%, rgba(0, 255, 102, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 78%, rgba(255, 179, 0, 0.16) 0 1px, transparent 2px);
  background-size: 64px 64px, 86px 86px, 112px 112px;
}

.command-hud,
.command-grid {
  position: relative;
  z-index: 4;
}

.command-hud {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr) minmax(250px, 0.8fr);
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.32);
  background: linear-gradient(180deg, rgba(10, 12, 14, 0.88), rgba(10, 12, 14, 0.62));
}

.command-brand,
.command-clock-block,
.command-operator {
  display: flex;
  align-items: center;
  min-width: 0;
}

.command-brand {
  gap: 12px;
}

.command-brand strong,
.command-panel h2,
.command-card-title h3,
.command-deployment-top h2 {
  font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-brand strong {
  display: block;
  color: #ffffff;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
}

.command-brand span:not(.command-radar-icon),
.command-clock-block span,
.command-operator span {
  color: var(--cmd-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.command-radar-icon {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 229, 255, 0.75);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}

.command-radar-icon::before,
.command-radar-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(0, 229, 255, 0.55);
  transform: rotate(45deg);
}

.command-radar-icon::after {
  inset: 19px 3px;
  height: 2px;
  border: 0;
  background: var(--cmd-blue);
  transform: rotate(-38deg);
  transform-origin: 50% 50%;
}

.command-clock-block {
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.command-clock-block strong {
  color: var(--cmd-text);
}

.command-status-pulse {
  color: var(--cmd-green) !important;
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.65);
  animation: commandPulse 1.6s steps(2, end) infinite;
}

.command-operator {
  justify-content: end;
  gap: 10px;
}

.command-operator-copy {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.command-operator-copy strong {
  color: #ffffff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 1rem;
  text-transform: uppercase;
}

.command-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 64px;
  border: 1px solid rgba(0, 229, 255, 0.55);
  background:
    linear-gradient(180deg, rgba(0, 229, 255, 0.22), rgba(0, 255, 102, 0.07)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  color: #ffffff;
  font-family: "Orbitron", ui-monospace, monospace;
  font-weight: 800;
  box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.2);
}

.command-nav {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-top: 8px;
}

.command-nav button,
.command-mini-btn,
.command-tabs button,
.command-mission-status {
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.06);
  color: var(--cmd-blue);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-weight: 800;
  text-transform: uppercase;
  transition: border-color 120ms linear, color 120ms linear, background 120ms linear, box-shadow 120ms linear;
}

.command-nav button {
  min-height: 30px;
  padding: 4px 10px;
  white-space: nowrap;
}

.command-nav button:hover,
.command-nav button[aria-current="page"],
.command-mini-btn:hover,
.command-tabs button:hover,
.command-tabs button[aria-pressed="true"] {
  border-color: var(--cmd-green);
  background: rgba(0, 255, 102, 0.08);
  color: var(--cmd-green);
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.12);
}

.command-grid {
  display: grid;
  grid-template-columns: minmax(270px, 0.92fr) minmax(430px, 1.48fr) minmax(290px, 0.9fr);
  gap: 12px;
  min-height: 0;
  padding-top: 12px;
}

.command-column {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.command-left,
.command-right {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.command-center {
  grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.12fr);
}

.command-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(20, 24, 27, 0.94), rgba(9, 15, 18, 0.9)),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.03) 0 1px, transparent 1px 18px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 0 32px rgba(0, 229, 255, 0.04);
}

.command-panel::before,
.command-panel::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.command-panel::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cmd-blue);
  border-left: 2px solid var(--cmd-blue);
}

.command-panel::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cmd-blue);
  border-bottom: 2px solid var(--cmd-blue);
}

.command-panel:hover {
  border-color: rgba(0, 229, 255, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 24px rgba(0, 229, 255, 0.11);
}

.command-panel-title,
.command-deployment-top,
.command-card-title,
.command-objective-row,
.command-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.command-panel-title {
  min-height: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.25);
}

.command-title-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.command-operation-chip,
.command-objective-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(260px, 38vw);
  min-height: 24px;
  overflow: hidden;
  padding: 3px 8px;
  border: 1px solid currentColor;
  background: rgba(0, 255, 102, 0.14);
  color: var(--cmd-green) !important;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.72rem !important;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.command-objective-chip {
  background: rgba(255, 179, 0, 0.1);
  color: var(--cmd-amber) !important;
}

.command-panel-title h2,
.command-deployment-top h2 {
  color: #ffffff;
  font-size: clamp(0.82rem, 1.45vw, 1.04rem);
}

.command-panel-title span,
.command-deployment-top p,
.command-card-title span,
.command-expander-meta,
.command-objective span,
.command-target p,
.command-supply small {
  color: var(--cmd-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.command-mini-btn {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

.command-campaign-stack,
.command-objective-stack,
.command-mission-list,
.command-feed {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.command-expander,
.command-objective,
.command-mission,
.command-supply {
  border: 1px solid rgba(31, 36, 41, 0.96);
  background: rgba(24, 32, 36, 0.78);
}

.command-expander {
  padding: 10px;
}

.command-expander.is-selected,
.command-objective.is-selected {
  border-color: var(--cmd-green);
  background: rgba(0, 255, 102, 0.1);
  box-shadow: inset 0 0 16px rgba(0, 255, 102, 0.08);
}

.command-expander summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.command-expander summary::-webkit-details-marker {
  display: none;
}

.command-expander-button,
.command-objective-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.command-objective-button {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.command-expander-button:hover .command-campaign-title,
.command-objective-button:hover {
  color: var(--cmd-green);
}

.command-campaign-title,
.command-objective strong,
.command-mission strong,
.command-supply strong {
  color: #ffffff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 800;
}

.command-percent {
  color: #8adff0;
  font-weight: 900;
}

.command-progress {
  height: 7px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(0, 229, 255, 0.25);
  background: rgba(0, 0, 0, 0.45);
}

.command-progress.mini {
  height: 6px;
  margin-top: 7px;
}

.command-progress span {
  display: block;
  width: var(--value);
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.8), rgba(0, 255, 102, 0.9));
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.command-objective {
  padding: 9px;
}

.command-context-line,
.command-empty {
  margin: 8px 0 0;
  color: var(--cmd-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.command-empty {
  padding: 10px;
  border: 1px dashed rgba(0, 229, 255, 0.28);
  background: rgba(0, 0, 0, 0.22);
}

.command-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 229, 255, 0.65);
  color: var(--cmd-green);
  font-weight: 900;
  box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.12);
}

.command-check.is-complete {
  border-color: var(--cmd-green);
  background: rgba(0, 255, 102, 0.12);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.22);
}

.command-deployment-panel,
.command-missions-panel,
.command-comms-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.command-readiness-panel {
  align-content: start;
}

.command-chip,
.command-status-tag {
  border: 1px solid currentColor;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nominal,
.command-chip.nominal,
.command-status-tag.nominal {
  color: var(--cmd-green);
}

.amber,
.command-chip.amber,
.command-status-tag.amber {
  color: var(--cmd-amber);
}

.critical,
.command-chip.critical,
.command-status-tag.critical {
  color: var(--cmd-red);
}

.command-compass-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 229, 255, 0.56);
  background:
    radial-gradient(circle at 40% 48%, rgba(0, 229, 255, 0.18), transparent 38%),
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 28px rgba(0, 229, 255, 0.08);
}

.command-readiness-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.85fr);
  gap: 10px;
  min-height: 0;
  padding-top: 10px;
}

.command-checkin-station,
.command-target-compact {
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(0, 0, 0, 0.24);
}

.command-checkin-form {
  display: grid;
  gap: 8px;
}

.command-checkin-head,
.command-checkin-saved,
.command-checkin-complete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.command-checkin-head div,
.command-checkin-complete {
  display: grid;
  gap: 2px;
}

.command-checkin-head span,
.command-checkin-head small,
.command-checkin-complete span,
.command-target-compact span {
  color: var(--cmd-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.command-checkin-head strong,
.command-checkin-saved strong,
.command-checkin-complete strong,
.command-target-compact strong {
  color: #ffffff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-checkin-grid {
  display: grid;
  gap: 6px;
}

.command-checkin-grid .icon-range {
  grid-template-columns: minmax(58px, 0.28fr) minmax(120px, 1fr);
  min-height: 34px;
  padding: 5px 7px;
  border-color: rgba(0, 229, 255, 0.25);
  border-radius: 0;
  background: rgba(0, 229, 255, 0.05);
}

.command-checkin-grid .metric-label {
  color: var(--cmd-text);
  font-size: 0.76rem;
}

.command-checkin-grid .metric-icon {
  min-width: 22px;
  color: var(--cmd-blue);
  font-size: 1rem;
}

.command-checkin-grid .metric-icon-mood.metric-icon-high,
.command-checkin-grid .metric-icon-distractibility {
  font-size: 1.08rem;
}

.command-checkin-submit {
  justify-self: start;
}

.command-target-compact {
  display: grid;
  align-content: center;
  gap: 7px;
}

.command-target-compact .command-target-lines {
  gap: 5px;
}

.command-compass-layout {
  display: grid;
  grid-template-columns: minmax(170px, 0.84fr) minmax(210px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 0;
}

.command-radar {
  position: relative;
  width: min(26vw, 250px);
  max-width: 100%;
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.78);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(0, 255, 102, 0.14) 0 1px, transparent 2px),
    repeating-radial-gradient(circle, rgba(0, 229, 255, 0.22) 0 1px, transparent 1px 24px),
    linear-gradient(90deg, transparent 49.5%, rgba(0, 229, 255, 0.35) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(0, 229, 255, 0.35) 50%, transparent 50.5%),
    rgba(0, 25, 25, 0.56);
  box-shadow:
    inset 0 0 38px rgba(0, 255, 102, 0.12),
    0 0 24px rgba(0, 229, 255, 0.2);
}

.radar-sweep {
  position: absolute;
  inset: 50% 50% 0 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0 0;
  background: linear-gradient(45deg, rgba(0, 255, 102, 0.62), transparent 62%);
  animation: radarSweep 4s linear infinite;
}

.radar-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 39%;
  height: 3px;
  transform: rotate(var(--bearing)) translateX(0);
  transform-origin: 0 50%;
  background: var(--cmd-blue);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.8);
}

.radar-dot {
  position: absolute;
  top: 47%;
  left: 47%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--cmd-blue);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.9);
}

.radar-label {
  position: absolute;
  color: var(--cmd-green);
  font-size: 0.74rem;
  font-weight: 900;
}

.radar-label.north {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.radar-label.east {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.radar-label.south {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.radar-label.west {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.command-target {
  display: grid;
  gap: 9px;
  align-content: center;
}

.command-sector {
  color: var(--cmd-green) !important;
  font-size: 1rem !important;
}

.command-target h3 {
  color: #ffffff;
  font-family: "Orbitron", ui-monospace, monospace;
  font-size: clamp(1rem, 2vw, 1.45rem);
  text-transform: uppercase;
}

.command-target-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.command-target-lines span {
  border: 1px solid rgba(0, 229, 255, 0.32);
  padding: 4px 7px;
  color: var(--cmd-blue);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-mission {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  padding: 9px;
}

.command-mission-time {
  color: var(--cmd-muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.command-mission-status {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
}

.command-mission.nominal {
  background: rgba(0, 255, 102, 0.1);
}

.command-mission.amber {
  background: rgba(255, 179, 0, 0.08);
}

.command-mission.critical {
  background: rgba(255, 51, 51, 0.08);
}

.command-mission div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.command-mission div span {
  overflow: hidden;
  color: var(--cmd-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.command-supply-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.command-supply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-top: 10px;
}

.command-supply {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 112px;
  padding: 10px 6px;
  text-align: center;
}

.command-supply-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.command-supply-actions button {
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-supply-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.command-supply-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 32px;
  border: 1px solid currentColor;
  font-size: 0.78rem;
  font-weight: 900;
}

.command-supply.nominal {
  border-color: rgba(0, 255, 102, 0.68);
  color: var(--cmd-green);
  box-shadow: inset 0 0 22px rgba(0, 255, 102, 0.08);
}

.command-supply.amber {
  border-color: rgba(255, 179, 0, 0.64);
  color: var(--cmd-amber);
}

.command-supply.critical {
  border-color: rgba(255, 51, 51, 0.7);
  color: var(--cmd-red);
  box-shadow: inset 0 0 18px rgba(255, 51, 51, 0.1);
}

.command-tabs {
  display: flex;
  gap: 5px;
}

.command-tabs button {
  min-height: 24px;
  padding: 2px 7px;
  font-size: 0.68rem;
}

.command-feed {
  align-content: start;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: rgba(0, 0, 0, 0.28);
  font-family: "Share Tech Mono", ui-monospace, monospace;
}

.command-feed p {
  color: var(--cmd-muted);
  font-size: 0.86rem;
  line-height: 1.28;
}

.command-feed strong {
  color: #ffffff;
}

.command-workspace {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 0;
  padding-top: 12px;
}

.command-app-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.command-app-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 4px 4px;
}

.command-app-body .topbar {
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(0, 229, 255, 0.24);
  background: rgba(0, 0, 0, 0.24);
}

.command-app-body .eyebrow,
.command-app-body .muted {
  color: var(--cmd-muted);
}

.command-app-body h1,
.command-app-body h2,
.command-app-body h3 {
  color: #ffffff;
  font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace;
  text-transform: uppercase;
}

.command-app-body .card,
.command-app-body .empty-state,
.command-app-body .day-cell,
.command-center-shell .modal-panel {
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(20, 24, 27, 0.92), rgba(8, 13, 16, 0.9)),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.025) 0 1px, transparent 1px 18px);
  box-shadow: inset 0 0 22px rgba(0, 229, 255, 0.04);
  color: var(--cmd-text);
}

.command-app-body .task-card.completed,
.command-app-body .recurring-card.completed,
.command-app-body .day-cell.done {
  border-color: rgba(0, 255, 102, 0.6);
  background: rgba(0, 255, 102, 0.1);
}

.command-app-body .task-card.time-pressure,
.command-app-body .recurring-card.time-pressure,
.command-app-body .day-cell.partial {
  border-color: rgba(255, 179, 0, 0.62);
  background: rgba(255, 179, 0, 0.1);
}

.command-app-body .new-item-highlight {
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 229, 255, 0.09);
}

.command-app-body .btn,
.command-app-body .choice,
.command-center-shell .modal-panel .btn {
  border: 1px solid rgba(0, 229, 255, 0.38);
  border-radius: 0;
  background: rgba(0, 229, 255, 0.06);
  color: var(--cmd-blue);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  text-transform: uppercase;
  transform: none;
}

.command-app-body .btn:hover,
.command-app-body .choice:hover,
.command-center-shell .modal-panel .btn:hover {
  border-color: var(--cmd-green);
  background: rgba(0, 255, 102, 0.08);
  color: var(--cmd-green);
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.12);
}

.command-app-body .choice[aria-pressed="true"] {
  border-color: var(--cmd-green);
  background: rgba(0, 255, 102, 0.12);
  color: #ffffff;
}

.command-app-body .choice-copy small {
  color: var(--cmd-muted);
}

.command-app-body .btn.primary,
.command-center-shell .modal-panel .btn.primary {
  border-color: var(--cmd-green);
  background: rgba(0, 255, 102, 0.18);
  color: #ffffff;
}

.command-app-body input,
.command-app-body select,
.command-app-body textarea,
.command-center-shell .modal-panel input,
.command-center-shell .modal-panel select,
.command-center-shell .modal-panel textarea {
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--cmd-text);
}

.command-app-body .pill {
  border-color: rgba(0, 229, 255, 0.26);
  border-radius: 0;
  background: rgba(0, 229, 255, 0.06);
  color: var(--cmd-text);
}

.command-app-body .pill.good,
.command-app-body .rating-pill.rating-good {
  border-color: rgba(0, 255, 102, 0.48);
  background: rgba(0, 255, 102, 0.1);
  color: var(--cmd-green);
}

.command-app-body .pill.warn,
.command-app-body .rating-pill.rating-warn {
  border-color: rgba(255, 179, 0, 0.52);
  background: rgba(255, 179, 0, 0.1);
  color: var(--cmd-amber);
}

.command-app-body .rating-pill.rating-light-bad,
.command-app-body .rating-pill.rating-bad {
  border-color: rgba(255, 51, 51, 0.54);
  background: rgba(255, 51, 51, 0.1);
  color: var(--cmd-red);
}

.command-center-shell .modal {
  background: rgba(0, 0, 0, 0.68);
}

.command-center-shell .modal-panel .recommendation-block,
.command-center-shell .modal-panel .recommendation-card,
.command-center-shell .modal-panel .setup-summary,
.command-center-shell .modal-panel .review-panel,
.command-center-shell .modal-panel .suggestion-panel,
.command-center-shell .modal-panel .clarity-panel,
.command-center-shell .modal-panel .task-preview,
.command-center-shell .modal-panel .recommendation-note,
.command-app-body .recommendation-block,
.command-app-body .recommendation-card,
.command-app-body .setup-summary,
.command-app-body .review-panel,
.command-app-body .suggestion-panel,
.command-app-body .clarity-panel,
.command-app-body .task-preview,
.command-app-body .recommendation-note {
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(12, 20, 24, 0.98), rgba(6, 10, 13, 0.96)),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.025) 0 1px, transparent 1px 18px);
  color: var(--cmd-text);
}

.command-center-shell .modal-panel .recommendation-block p,
.command-center-shell .modal-panel .recommendation-block li,
.command-center-shell .modal-panel .recommendation-card p,
.command-center-shell .modal-panel .setup-summary p,
.command-center-shell .modal-panel .review-panel p,
.command-center-shell .modal-panel .suggestion-panel p,
.command-center-shell .modal-panel .clarity-panel p,
.command-center-shell .modal-panel .clarity-panel li,
.command-center-shell .modal-panel .task-preview p,
.command-center-shell .modal-panel pre,
.command-app-body .recommendation-block p,
.command-app-body .recommendation-block li,
.command-app-body .recommendation-card p,
.command-app-body .setup-summary p,
.command-app-body .review-panel p,
.command-app-body .suggestion-panel p,
.command-app-body .clarity-panel p,
.command-app-body .clarity-panel li,
.command-app-body .task-preview p,
.command-app-body pre {
  color: var(--cmd-text);
}

.command-center-shell .modal-panel .eyebrow,
.command-center-shell .modal-panel .muted,
.command-center-shell .modal-panel small {
  color: #9dc7d4;
}

.command-center-shell .modal-panel .recommendation-card strong,
.command-center-shell .modal-panel .recommendation-block strong,
.command-center-shell .modal-panel .task-preview strong,
.command-app-body .recommendation-card strong,
.command-app-body .recommendation-block strong,
.command-app-body .task-preview strong {
  color: #ffffff;
}

.command-toast {
  z-index: 12;
}

@keyframes commandPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.52;
  }
}

@keyframes radarSweep {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.overwatch-shell {
  --ow-bg: #090a0a;
  --ow-metal: #171a1c;
  --ow-panel: #101315;
  --ow-panel-2: #161a1d;
  --ow-line: #3c4142;
  --ow-line-soft: rgba(168, 150, 98, 0.28);
  --ow-amber: #d9a441;
  --ow-amber-bright: #ffd071;
  --ow-steel: #aeb4ae;
  --ow-dim: #6f756f;
  --ow-green: #87a86d;
  --ow-black: #050606;
  position: relative;
  display: grid;
  place-items: center;
  height: 100dvh;
  overflow: hidden;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 8%, rgba(217, 164, 65, 0.13), transparent 26%),
    linear-gradient(135deg, #030404, #111416 38%, #060707);
  color: var(--ow-steel);
  font-family: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
}

.overwatch-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(217, 164, 65, 0.025) 0 1px, transparent 1px 20px),
    radial-gradient(circle at 14% 32%, rgba(174, 180, 174, 0.08), transparent 24%),
    radial-gradient(circle at 88% 78%, rgba(217, 164, 65, 0.08), transparent 22%);
  pointer-events: none;
}

.overwatch-tablet {
  position: relative;
  width: min(100%, 760px);
  height: min(100dvh - 20px, 1180px);
  min-height: 680px;
  padding: 24px 26px 20px;
  border: 1px solid #3c4142;
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.05)),
    repeating-linear-gradient(112deg, #202426 0 2px, #151819 2px 6px, #0d0f10 6px 9px);
  box-shadow:
    inset 0 0 0 5px #050606,
    inset 0 0 0 8px #2d3234,
    inset 0 0 52px rgba(255, 255, 255, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.72);
}

.overwatch-bezel-top {
  position: absolute;
  top: 9px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
}

.overwatch-bezel-top span:first-child {
  width: 92px;
  height: 8px;
  border: 1px solid #2c3133;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #0c0d0e 0 3px, #303638 3px 5px);
}

.overwatch-bezel-top span:last-child {
  width: 18px;
  height: 18px;
  border: 2px solid #202426;
  border-radius: 999px;
  background: radial-gradient(circle, #2a3340, #050606 62%);
}

.overwatch-nav-rail {
  position: absolute;
  top: 86px;
  left: -14px;
  z-index: 4;
  display: grid;
  gap: 6px;
}

.overwatch-nav-rail button {
  width: 42px;
  min-height: 30px;
  border: 1px solid #424846;
  border-radius: 0;
  background: #0b0d0e;
  color: var(--ow-dim);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.overwatch-nav-rail button:hover,
.overwatch-nav-rail button[aria-current="page"] {
  border-color: var(--ow-amber);
  color: var(--ow-amber-bright);
  box-shadow: 0 0 12px rgba(217, 164, 65, 0.2);
}

.overwatch-screen {
  position: relative;
  display: grid;
  grid-template-rows: 52px minmax(0, 1.18fr) minmax(0, 1.2fr) minmax(0, 1.12fr) minmax(0, 1.05fr) 84px;
  gap: 8px;
  height: 100%;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #0b0c0d;
  background:
    linear-gradient(180deg, rgba(217, 164, 65, 0.07), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    #080a0b;
  box-shadow:
    inset 0 0 0 2px #252a2b,
    inset 0 0 38px rgba(0, 0, 0, 0.86);
}

.overwatch-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 5px);
  opacity: 0.2;
  pointer-events: none;
}

.overwatch-titlebar,
.overwatch-panel,
.overwatch-scoreboard {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.overwatch-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ow-line);
  background:
    linear-gradient(90deg, rgba(217, 164, 65, 0.08), rgba(174, 180, 174, 0.04)),
    #0e1112;
  color: var(--ow-dim);
  font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(0.64rem, 1.5vw, 0.8rem);
  font-weight: 800;
  text-transform: uppercase;
}

.overwatch-titlebar strong {
  color: var(--ow-amber-bright);
  font-size: clamp(1.2rem, 4vw, 2.15rem);
  letter-spacing: 0;
  text-align: center;
}

.overwatch-titlebar span:first-child {
  padding-left: 10px;
}

.overwatch-titlebar span:last-child {
  padding-right: 10px;
  text-align: right;
}

.overwatch-panel {
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ow-line);
  background:
    linear-gradient(135deg, rgba(217, 164, 65, 0.045), transparent 40%),
    repeating-linear-gradient(90deg, rgba(217, 164, 65, 0.025) 0 1px, transparent 1px 18px),
    var(--ow-panel);
}

.overwatch-panel::before,
.overwatch-panel::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.overwatch-panel::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--ow-amber);
  border-left: 2px solid var(--ow-amber);
}

.overwatch-panel::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--ow-amber);
  border-bottom: 2px solid var(--ow-amber);
}

.overwatch-panel footer {
  align-self: end;
  min-height: 26px;
  padding: 5px 10px;
  border-top: 1px solid var(--ow-line-soft);
  color: var(--ow-amber-bright);
  font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(0.72rem, 1.7vw, 0.95rem);
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.physical-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.overwatch-panel-hud {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ow-line-soft);
}

.overwatch-panel-hud div {
  display: grid;
  gap: 2px;
}

.overwatch-panel-hud span,
.conditioning-card span,
.classified-file span,
.classified-file small,
.commander-card span,
.commander-card small,
.overwatch-scoreboard span {
  color: var(--ow-dim);
  font-size: clamp(0.56rem, 1.25vw, 0.72rem);
  font-weight: 900;
  text-transform: uppercase;
}

.overwatch-panel-hud strong,
.conditioning-card p,
.classified-file strong,
.commander-card strong,
.overwatch-scoreboard strong,
.overwatch-scoreboard b {
  color: var(--ow-amber-bright);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-weight: 900;
  text-transform: uppercase;
}

.capacity-readout {
  justify-items: center;
  text-align: center;
}

.capacity-bars {
  display: flex;
  gap: 4px;
}

.capacity-bars i {
  width: 24px;
  height: 10px;
  border: 1px solid var(--ow-amber);
  background: rgba(217, 164, 65, 0.34);
}

.capacity-bars .dim {
  background: transparent;
  opacity: 0.52;
}

.physical-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.35fr);
  min-height: 0;
}

.readiness-stage {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(174, 180, 174, 0.08), transparent 50%),
    linear-gradient(0deg, rgba(217, 164, 65, 0.08), transparent 35%);
}

.schematic-hills {
  position: absolute;
  inset: 28% 0 14%;
  opacity: 0.24;
  background:
    radial-gradient(ellipse at 22% 72%, transparent 0 35%, var(--ow-line) 36% 37%, transparent 38%),
    radial-gradient(ellipse at 62% 70%, transparent 0 38%, var(--ow-line) 39% 40%, transparent 41%);
}

.treadmill {
  position: absolute;
  left: 28%;
  bottom: 21%;
  width: 40%;
  height: 20%;
  border-bottom: 3px solid var(--ow-amber);
}

.treadmill .belt {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 26%;
  height: 8px;
  border: 1px solid var(--ow-line);
  background: #050606;
}

.treadmill .roller {
  position: absolute;
  bottom: 13%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ow-steel);
  border-radius: 999px;
}

.treadmill .roller.left {
  left: 2%;
}

.treadmill .roller.right {
  right: 2%;
}

.treadmill .rail {
  position: absolute;
  right: 0;
  bottom: 48%;
  width: 24%;
  height: 34%;
  border-top: 2px solid var(--ow-steel);
  border-right: 2px solid var(--ow-steel);
}

.wire-soldier {
  position: absolute;
  left: 42%;
  bottom: 42%;
  width: 56px;
  height: 72px;
}

.wire-soldier span,
.commando,
.threat-icon {
  position: absolute;
  display: block;
  border-color: currentColor;
  color: var(--ow-amber);
}

.wire-soldier .head {
  left: 20px;
  top: 0;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.wire-soldier .torso {
  left: 27px;
  top: 16px;
  width: 2px;
  height: 28px;
  background: currentColor;
}

.wire-soldier .arm,
.wire-soldier .leg {
  left: 27px;
  width: 2px;
  background: currentColor;
  transform-origin: top;
}

.wire-soldier .a1 {
  top: 22px;
  height: 26px;
  transform: rotate(54deg);
}

.wire-soldier .a2 {
  top: 22px;
  height: 24px;
  transform: rotate(-48deg);
}

.wire-soldier .l1 {
  top: 42px;
  height: 30px;
  transform: rotate(36deg);
}

.wire-soldier .l2 {
  top: 42px;
  height: 30px;
  transform: rotate(-38deg);
}

.tech-equipment.dumbbell {
  position: absolute;
  bottom: 17%;
  width: 86px;
  height: 24px;
  border-top: 4px solid var(--ow-steel);
  border-bottom: 4px solid var(--ow-steel);
}

.tech-equipment.dumbbell::before,
.tech-equipment.dumbbell::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 14px;
  height: 38px;
  border: 2px solid var(--ow-amber);
  background: #101315;
}

.tech-equipment.dumbbell::before {
  left: -7px;
}

.tech-equipment.dumbbell::after {
  right: -7px;
}

.tech-equipment.one {
  left: 7%;
}

.tech-equipment.two {
  right: 14%;
  bottom: 45%;
}

.hydration-array {
  position: absolute;
  top: 25%;
  right: 30%;
  display: flex;
  gap: 10px;
}

.hydration-array span {
  width: 18px;
  height: 38px;
  border: 1px solid var(--ow-steel);
  background: linear-gradient(180deg, transparent 35%, rgba(217, 164, 65, 0.22));
}

.conditioning-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  border-left: 1px solid var(--ow-line-soft);
  text-align: center;
}

.bolt-indicator {
  width: 70px;
  height: 70px;
  border: 2px solid var(--ow-amber);
  clip-path: polygon(48% 0, 86% 0, 60% 42%, 92% 42%, 36% 100%, 48% 56%, 18% 56%);
  background: rgba(217, 164, 65, 0.2);
  box-shadow: 0 0 18px rgba(217, 164, 65, 0.2);
}

.vault-panel {
  grid-template-columns: minmax(96px, 0.28fr) minmax(0, 1fr) minmax(120px, 0.34fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.vault-tools,
.classified-file {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border-right: 1px solid var(--ow-line-soft);
}

.classified-file {
  border-right: 0;
  border-left: 1px solid var(--ow-line-soft);
  align-content: center;
}

.surveillance-feed,
.protocol-box {
  border: 1px solid var(--ow-line);
  background: #090b0c;
}

.surveillance-feed {
  position: relative;
  min-height: 74px;
  padding: 8px;
}

.surveillance-feed i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ow-amber);
  transform: rotate(45deg);
}

.surveillance-feed i:nth-child(2) {
  left: 24px;
  bottom: 18px;
}

.surveillance-feed i:nth-child(3) {
  right: 30px;
  top: 32px;
}

.surveillance-feed i:nth-child(4) {
  right: 18px;
  bottom: 12px;
}

.protocol-box {
  display: grid;
  gap: 5px;
  padding: 8px;
}

.protocol-box button,
.clipboard-tabs button {
  border: 1px solid var(--ow-line);
  border-radius: 0;
  background: rgba(217, 164, 65, 0.05);
  color: var(--ow-steel);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: left;
}

.protocol-box button:hover,
.clipboard-tabs button:hover,
.clipboard-tabs button[aria-pressed="true"] {
  border-color: var(--ow-amber);
  color: var(--ow-amber-bright);
}

.isometric-vault {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(217, 164, 65, 0.08), transparent),
    #0b0d0e;
}

.vault-grid {
  position: absolute;
  inset: 13% 10% 12%;
  transform: skewY(-22deg) rotate(0deg);
  border: 1px solid var(--ow-line);
  background:
    linear-gradient(90deg, rgba(217, 164, 65, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(217, 164, 65, 0.12) 1px, transparent 1px),
    #15191b;
  background-size: 34px 34px;
}

.data-block,
.vault-console {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ow-amber);
  background: #202426;
  color: var(--ow-amber-bright);
  font-weight: 900;
  transform: skewY(22deg);
}

.data-block:nth-child(1) {
  left: 28%;
  top: 45%;
}

.data-block:nth-child(2) {
  left: 41%;
  top: 39%;
}

.data-block:nth-child(3) {
  left: 54%;
  top: 34%;
}

.data-block:nth-child(4) {
  left: 62%;
  top: 54%;
}

.vault-console {
  right: 14%;
  top: 16%;
  width: 58px;
  font-size: 0.68rem;
}

.commando {
  width: 18px;
  height: 28px;
}

.commando::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.commando::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 2px;
  height: 20px;
  background: currentColor;
  box-shadow: -6px 7px 0 currentColor, 6px 7px 0 currentColor;
}

.commando.c1 {
  left: 48%;
  top: 50%;
  transform: skewY(22deg);
}

.commando.c2 {
  right: 12%;
  bottom: 20%;
  transform: skewY(22deg);
}

.vault-camera {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 16px;
  border: 1px solid var(--ow-amber);
  background: #090b0c;
}

.vault-camera::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 4px;
  border-left: 8px solid var(--ow-amber);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.vault-camera.top-left {
  top: 8px;
  left: 8px;
}

.vault-camera.top-right {
  top: 8px;
  right: 16px;
  transform: scaleX(-1);
}

.vault-panel footer,
.debrief-panel footer,
.hvt-panel footer {
  grid-column: 1 / -1;
}

.debrief-panel {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.drone-map {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 42%, rgba(217, 164, 65, 0.08), transparent 18%),
    radial-gradient(circle at 72% 44%, rgba(174, 180, 174, 0.08), transparent 18%),
    #101315;
}

.map-grid,
.nv-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(217, 164, 65, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(217, 164, 65, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}

.map-node {
  position: absolute;
  max-width: 145px;
  padding: 4px 6px;
  border: 1px solid var(--ow-line);
  background: rgba(5, 6, 6, 0.82);
  color: var(--ow-amber-bright);
  font-size: 0.68rem;
  font-weight: 900;
}

.map-node.library {
  left: 9%;
  top: 29%;
}

.map-node.hq {
  right: 7%;
  top: 18%;
}

.map-node.relay {
  left: 46%;
  bottom: 19%;
}

.commando.marker {
  left: 46%;
  top: 48%;
}

.metal-clipboard {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 8px;
  border-left: 1px solid var(--ow-line-soft);
  background:
    linear-gradient(180deg, rgba(174, 180, 174, 0.08), transparent),
    #0d1011;
}

.clipboard-tabs {
  display: flex;
  gap: 5px;
}

.metal-clipboard h3 {
  margin: 6px 0;
  color: var(--ow-amber-bright);
  font-family: "Orbitron", ui-monospace, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.metal-clipboard ol {
  display: grid;
  gap: 5px;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding-left: 20px;
  color: var(--ow-amber);
}

.metal-clipboard li {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(217, 164, 65, 0.12);
}

.metal-clipboard li span {
  display: block;
  color: var(--ow-steel);
  font-size: 0.62rem;
  font-weight: 900;
}

.metal-clipboard li strong {
  color: var(--ow-amber-bright);
  font-size: 0.7rem;
}

.hvt-panel {
  grid-template-columns: minmax(128px, 0.36fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  background:
    linear-gradient(180deg, rgba(135, 168, 109, 0.08), transparent),
    #070a08;
}

.commander-card {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border-right: 1px solid rgba(135, 168, 109, 0.25);
  background: rgba(0, 0, 0, 0.28);
}

.system-bars {
  display: grid;
  gap: 5px;
}

.system-bars i {
  height: 8px;
  border: 1px solid var(--ow-green);
  background: linear-gradient(90deg, var(--ow-green) 62%, transparent 63%);
}

.system-bars i:last-child {
  background: linear-gradient(90deg, var(--ow-green) 42%, transparent 43%);
}

.night-vision-lane {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 50%, rgba(135, 168, 109, 0.16), transparent 16%),
    linear-gradient(180deg, rgba(135, 168, 109, 0.08), transparent),
    #050705;
}

.threat,
.friendly-unit,
.hvt-target {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--ow-green);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.threat.distraction {
  left: 8%;
  bottom: 12%;
}

.threat.bugs {
  left: 35%;
  bottom: 13%;
}

.friendly-unit {
  left: 57%;
  bottom: 12%;
}

.hvt-target {
  right: 6%;
  bottom: 11%;
  color: var(--ow-amber-bright);
}

.threat-icon.phone {
  width: 34px;
  height: 46px;
  border: 2px solid var(--ow-green);
}

.threat-icon.phone::after {
  content: "";
  position: absolute;
  inset: 8px 7px;
  border: 1px solid var(--ow-green);
}

.threat-icon.hostile {
  width: 42px;
  height: 42px;
  border: 2px solid var(--ow-green);
  border-radius: 999px 999px 40% 40%;
}

.threat .threat-icon {
  position: relative;
}

.friendly-unit .assault {
  position: relative;
  color: var(--ow-amber);
}

.server-rack {
  display: block;
  width: 74px;
  height: 58px;
  border: 2px solid var(--ow-amber);
  background:
    repeating-linear-gradient(0deg, rgba(217, 164, 65, 0.18) 0 6px, transparent 6px 12px),
    #080a0b;
  box-shadow: 0 0 18px rgba(217, 164, 65, 0.18);
}

.overwatch-scoreboard {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 0.8fr;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ow-line);
  background:
    linear-gradient(90deg, rgba(217, 164, 65, 0.1), rgba(174, 180, 174, 0.04)),
    #0f1214;
}

.overwatch-scoreboard div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.overwatch-scoreboard b {
  color: var(--ow-amber-bright);
  font-size: clamp(1rem, 2.7vw, 1.5rem);
}

.operator-count,
.supply-credit {
  justify-items: center;
  text-align: center;
}

.operator-count i {
  display: inline-block;
  width: 16px;
  height: 24px;
  margin: 0 2px;
  border: 1px solid var(--ow-steel);
  clip-path: polygon(50% 0, 70% 28%, 100% 100%, 0 100%, 30% 28%);
  background: rgba(174, 180, 174, 0.18);
}

.supply-credit i {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ow-amber);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.34), transparent 62%);
}

.overwatch-shell-workspace .overwatch-tablet {
  width: min(100%, 1120px);
  height: min(100dvh - 20px, 980px);
  min-height: 640px;
  border-radius: 26px;
}

.overwatch-screen.overwatch-screen-app {
  grid-template-rows: 52px minmax(0, 1fr);
}

.overwatch-app-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.overwatch-app-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ow-line-soft);
}

.overwatch-app-title div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.overwatch-app-title span,
.overwatch-app-title small {
  color: var(--ow-dim);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.overwatch-app-title strong {
  color: var(--ow-amber-bright);
  font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(1rem, 2.5vw, 1.45rem);
  text-transform: uppercase;
}

.overwatch-app-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 4px 4px;
}

.overwatch-app-body .topbar {
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--ow-line-soft);
  background: rgba(0, 0, 0, 0.24);
}

.overwatch-app-body .eyebrow,
.overwatch-app-body .muted {
  color: var(--ow-dim);
}

.overwatch-app-body h1,
.overwatch-app-body h2,
.overwatch-app-body h3 {
  color: var(--ow-amber-bright);
  font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace;
  text-transform: uppercase;
}

.overwatch-app-body .card,
.overwatch-app-body .empty-state,
.overwatch-app-body .day-cell,
.overwatch-shell .modal-panel {
  border: 1px solid var(--ow-line-soft);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(217, 164, 65, 0.045), transparent 42%),
    repeating-linear-gradient(90deg, rgba(217, 164, 65, 0.025) 0 1px, transparent 1px 18px),
    #101315;
  box-shadow: inset 0 0 22px rgba(217, 164, 65, 0.035);
  color: var(--ow-steel);
}

.overwatch-app-body .task-card.completed,
.overwatch-app-body .recurring-card.completed,
.overwatch-app-body .day-cell.done {
  border-color: rgba(135, 168, 109, 0.65);
  background: rgba(135, 168, 109, 0.12);
}

.overwatch-app-body .task-card.time-pressure,
.overwatch-app-body .recurring-card.time-pressure,
.overwatch-app-body .day-cell.partial {
  border-color: rgba(217, 164, 65, 0.68);
  background: rgba(217, 164, 65, 0.1);
}

.overwatch-app-body .new-item-highlight {
  border-color: var(--ow-amber);
  background: rgba(217, 164, 65, 0.1);
}

.overwatch-app-body .btn,
.overwatch-app-body .choice,
.overwatch-shell .modal-panel .btn {
  border: 1px solid var(--ow-line-soft);
  border-radius: 0;
  background: rgba(217, 164, 65, 0.05);
  color: var(--ow-steel);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  text-transform: uppercase;
  transform: none;
}

.overwatch-app-body .btn:hover,
.overwatch-app-body .choice:hover,
.overwatch-shell .modal-panel .btn:hover {
  border-color: var(--ow-amber);
  background: rgba(217, 164, 65, 0.1);
  color: var(--ow-amber-bright);
  box-shadow: 0 0 14px rgba(217, 164, 65, 0.14);
}

.overwatch-app-body .choice[aria-pressed="true"] {
  border-color: var(--ow-amber);
  background: rgba(217, 164, 65, 0.12);
  color: var(--ow-amber-bright);
}

.overwatch-app-body .choice-copy small {
  color: var(--ow-dim);
}

.overwatch-app-body .btn.primary,
.overwatch-shell .modal-panel .btn.primary {
  border-color: var(--ow-amber);
  background: rgba(217, 164, 65, 0.18);
  color: var(--ow-amber-bright);
}

.overwatch-app-body input,
.overwatch-app-body select,
.overwatch-app-body textarea,
.overwatch-shell .modal-panel input,
.overwatch-shell .modal-panel select,
.overwatch-shell .modal-panel textarea {
  border: 1px solid var(--ow-line-soft);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ow-steel);
}

.overwatch-app-body .pill {
  border-color: var(--ow-line-soft);
  border-radius: 0;
  background: rgba(217, 164, 65, 0.05);
  color: var(--ow-steel);
}

.overwatch-app-body .pill.good,
.overwatch-app-body .rating-pill.rating-good {
  border-color: rgba(135, 168, 109, 0.68);
  background: rgba(135, 168, 109, 0.12);
  color: #a8c987;
}

.overwatch-app-body .pill.warn,
.overwatch-app-body .rating-pill.rating-warn {
  border-color: rgba(217, 164, 65, 0.7);
  background: rgba(217, 164, 65, 0.12);
  color: var(--ow-amber-bright);
}

.overwatch-app-body .rating-pill.rating-light-bad,
.overwatch-app-body .rating-pill.rating-bad {
  border-color: rgba(166, 89, 74, 0.7);
  background: rgba(166, 89, 74, 0.14);
  color: #f0a090;
}

.overwatch-shell .modal {
  background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 680px) {
  .overwatch-tablet {
    padding: 22px 18px 16px;
    border-radius: 30px;
  }

  .overwatch-screen {
    grid-template-rows: 44px minmax(0, 1.1fr) minmax(0, 1.08fr) minmax(0, 0.96fr) minmax(0, 0.9fr) 66px;
    gap: 6px;
    padding: 8px;
  }

  .overwatch-screen.overwatch-screen-app {
    grid-template-rows: 44px minmax(0, 1fr);
  }

  .overwatch-shell-workspace .overwatch-tablet {
    height: min(100dvh - 10px, 920px);
    min-height: min(720px, calc(100dvh - 10px));
  }

  .overwatch-app-panel {
    padding: 8px;
  }

  .overwatch-app-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .overwatch-panel footer {
    min-height: 22px;
    padding-block: 3px;
  }

  .overwatch-panel-hud {
    gap: 5px;
    padding: 6px 7px;
  }

  .capacity-bars i {
    width: 18px;
    height: 8px;
  }

  .bolt-indicator {
    width: 56px;
    height: 56px;
  }

  .vault-tools,
  .classified-file,
  .commander-card {
    padding: 7px;
  }

  .overwatch-scoreboard {
    gap: 5px;
    padding: 5px 6px;
  }

  .overwatch-scoreboard span,
  .overwatch-scoreboard strong {
    font-size: 0.52rem;
    line-height: 1.08;
  }

  .overwatch-scoreboard b {
    font-size: 0.86rem;
    line-height: 1;
  }

  .operator-count i {
    width: 12px;
    height: 18px;
  }

  .supply-credit i {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 560px) {
  .overwatch-shell {
    padding: 5px;
  }

  .overwatch-tablet {
    min-height: min(720px, calc(100dvh - 10px));
    padding: 20px 14px 14px;
    border-radius: 26px;
  }

  .overwatch-nav-rail {
    left: -6px;
  }

  .overwatch-nav-rail button {
    width: 32px;
    min-height: 26px;
    font-size: 0.56rem;
  }

  .overwatch-screen {
    grid-template-rows: 44px minmax(0, 1.18fr) minmax(0, 1.2fr) minmax(0, 1.12fr) minmax(0, 1.05fr) 70px;
    gap: 6px;
    padding: 8px;
  }

  .overwatch-screen.overwatch-screen-app {
    grid-template-rows: 44px minmax(0, 1fr);
  }

  .overwatch-panel-hud {
    gap: 4px;
    padding: 6px;
  }

  .physical-grid {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .bolt-indicator {
    width: 48px;
    height: 48px;
  }

  .vault-panel {
    grid-template-columns: 72px minmax(0, 1fr) 86px;
  }

  .vault-tools,
  .classified-file {
    padding: 6px;
  }

  .debrief-panel {
    grid-template-columns: minmax(0, 1fr) 136px;
  }

  .metal-clipboard {
    padding: 6px;
  }

  .hvt-panel {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .overwatch-scoreboard {
    grid-template-columns: 1.1fr 0.65fr 0.9fr 0.65fr;
    gap: 4px;
    padding: 6px;
  }

  .overwatch-scoreboard b {
    font-size: clamp(0.72rem, 3vw, 1rem);
  }
}

@media (max-height: 760px) {
  .overwatch-tablet {
    min-height: calc(100dvh - 20px);
  }

  .overwatch-screen {
    grid-template-rows: 42px minmax(0, 1.05fr) minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 0.98fr) 66px;
  }

  .overwatch-screen.overwatch-screen-app {
    grid-template-rows: 42px minmax(0, 1fr);
  }

  .overwatch-panel footer {
    min-height: 22px;
    padding-block: 3px;
  }
}

@media (min-width: 680px) {
  .grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .checkin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .additional-checkin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 940px) {
  .app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    padding-bottom: 0;
  }

  .app-main {
    padding: 30px 28px 44px;
  }

  .nav {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
    height: 100dvh;
    align-self: start;
    overflow-y: auto;
    padding: 22px 12px;
    border-top: 0;
    border-right: 1px solid var(--line);
    background: var(--surface);
  }

  .nav button {
    grid-template-columns: 24px 1fr;
    place-items: center start;
    min-height: 46px;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    text-align: left;
  }

  .nav .nav-mark {
    height: 24px;
    width: 4px;
  }

  .nav > .account-dock {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    place-items: center start;
    justify-content: stretch;
    min-height: 46px;
    margin-top: 8px;
    padding: 8px 10px;
    border-color: var(--line);
    background: var(--surface-alt);
    text-align: left;
  }

  .nav > .account-dock > span,
  .nav > .account-dock > img {
    width: 28px;
    height: 28px;
  }

  .nav > .account-dock > strong {
    display: block;
    min-width: 0;
    max-width: 100%;
  }

  .toast {
    left: auto;
    bottom: 18px;
    width: min(420px, calc(100vw - 36px));
  }

  .modal {
    place-items: center;
  }
}

@media (max-width: 1120px) {
  .coach-container {
    padding: 14px;
  }

  .coach-hero {
    grid-template-columns: 1fr;
  }

  .coach-dashboard {
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.82fr);
    grid-auto-rows: max-content;
    overflow: auto;
  }

  .coach-focus-panel,
  .coach-steps-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .coach-shell {
    overflow: hidden;
  }

  .coach-container {
    gap: 10px;
    padding: 10px;
  }

  .coach-hero {
    padding: 14px;
    border-radius: 22px;
  }

  .coach-brand strong {
    font-size: 1rem;
  }

  .coach-compass {
    width: 44px;
    height: 44px;
  }

  .coach-hero-copy h1 {
    font-size: clamp(1.32rem, 8vw, 2.1rem);
  }

  .coach-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }

  .coach-panel {
    border-radius: 22px;
  }

  .coach-disclosure-title {
    min-height: 58px;
    padding: 13px 16px;
  }

  .coach-disclosure-body {
    padding: 0 16px 16px;
  }

  .coach-huddle-grid {
    grid-template-columns: 1fr;
  }

  .coach-step-card {
    grid-template-columns: 1fr;
  }

  .coach-action-row {
    justify-content: flex-start;
  }

  .coach-rhythm-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .coach-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .coach-nav button {
    min-height: 46px;
    padding: 7px 6px;
    font-size: 0.8rem;
  }
}

@media (max-width: 520px) {
  .coach-container {
    height: 100dvh;
  }

  .coach-brand span {
    font-size: 0.68rem;
  }

  .coach-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .coach-focus-card {
    padding: 16px;
  }

  .coach-checkin-form .icon-range,
  .coach-shell .icon-range {
    grid-template-columns: 1fr;
  }

  .coach-nav {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .coach-nav button {
    gap: 0;
    min-height: 46px;
  }

  .coach-nav button span:last-child {
    display: none;
  }
}

@media (max-width: 1120px) {
  .game-crt {
    min-height: min(760px, calc(100dvh - 24px));
  }

  .game-header {
    grid-template-columns: 1fr;
  }

  .game-hud-row {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    overflow-x: auto;
  }

  .game-dashboard {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) minmax(320px, 1fr);
    grid-template-rows: minmax(250px, 0.86fr) minmax(250px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .game-hero-panel {
    grid-column: 1 / 3;
  }

  .game-power-panel {
    grid-column: 3;
  }

  .game-stages-panel {
    grid-column: 2 / 4;
  }
}

@media (max-width: 820px) {
  .game-shell {
    padding: 6px;
  }

  .game-crt {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    min-height: min(680px, calc(100dvh - 12px));
    padding: 8px;
    border-radius: 16px;
  }

  .game-screen {
    grid-template-rows: auto minmax(0, 1fr) 64px;
    gap: 8px;
    padding: 8px;
  }

  .game-header {
    padding: 8px;
  }

  .game-logo-block strong {
    font-size: clamp(0.9rem, 6vw, 1.35rem);
  }

  .game-hud-row {
    grid-template-columns: repeat(5, minmax(94px, 1fr));
  }

  .game-hud-stat {
    padding: 6px;
  }

  .game-hud-stat strong {
    font-size: 0.62rem;
  }

  .game-hud-stat:last-child strong {
    font-size: 0.54rem;
  }

  .game-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: auto;
  }

  .game-hero-panel,
  .game-level-panel,
  .game-stages-panel,
  .game-power-panel {
    grid-column: auto;
    grid-row: auto;
    min-height: 420px;
  }

  .game-stage-art {
    min-height: 230px;
  }

  .game-stage-hud,
  .game-stage-footer,
  .game-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-task-stage {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .game-task-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }

  .game-nav {
    gap: 4px;
    padding: 5px;
  }

  .game-nav button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2px;
    min-height: 48px;
    padding: 4px;
    font-size: 0.88rem;
  }

  .game-nav-icon {
    width: 30px;
    height: 24px;
  }
}

@media (max-width: 560px) {
  .game-crt {
    padding: 6px;
  }

  .game-screen {
    border-width: 3px;
  }

  .game-logo-block span {
    font-size: 0.52rem;
  }

  .game-hud-row {
    grid-template-columns: repeat(5, minmax(86px, 1fr));
  }

  .game-panel {
    border-width: 3px;
  }

  .game-panel-title h2,
  .game-subtitle-row strong {
    font-size: 0.66rem;
  }

  .game-power-grid {
    grid-template-columns: 1fr;
  }

  .game-nav button span:last-child {
    display: none;
  }

  .game-nav-icon {
    width: 34px;
    height: 28px;
  }

  .pixel-boss {
    right: 4%;
    transform: scale(0.82);
    transform-origin: bottom right;
  }

  .pixel-runner {
    left: 37%;
  }
}

@media (max-width: 1120px) {
  .quest-device {
    grid-template-rows: 120px minmax(0, 1fr) 84px;
    min-height: min(720px, calc(100dvh - 28px));
  }

  .quest-header {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  }

  .quest-gold-readout {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
  }

  .quest-dashboard {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .quest-map-node {
    width: 122px;
  }
}

@media (max-width: 820px) {
  .quest-shell {
    padding: 8px;
  }

  .quest-device {
    grid-template-rows: auto minmax(0, 1fr) 76px;
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    min-height: min(680px, calc(100dvh - 16px));
    padding: 10px;
    border-radius: 18px;
  }

  .quest-header {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px 10px;
  }

  .quest-brand strong {
    font-size: 1.35rem;
  }

  .quest-logo-mark {
    width: 40px;
    height: 40px;
  }

  .quest-identity {
    justify-items: start;
    text-align: left;
  }

  .quest-vital-row {
    grid-template-columns: auto minmax(70px, 1fr) auto minmax(70px, 1fr);
  }

  .quest-gold-readout {
    justify-content: flex-start;
  }

  .quest-dashboard {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .quest-map-node {
    width: 116px;
    min-height: 70px;
  }

  .quest-map-node.node-0 {
    left: 7%;
    top: 8%;
  }

  .quest-map-node.node-1 {
    left: calc(50% - 58px);
    top: 15%;
  }

  .quest-map-node.node-2 {
    right: 7%;
    top: 8%;
    left: auto;
    bottom: auto;
  }

  .quest-map-node.node-3 {
    left: 7%;
    right: auto;
    bottom: 10%;
  }

  .quest-map-node.node-4 {
    left: calc(50% - 58px);
    bottom: 17%;
  }

  .quest-map-node.node-5 {
    right: 7%;
    bottom: 10%;
    left: auto;
    top: auto;
  }

  .quest-log-panel,
  .quest-map-panel,
  .quest-journal-panel {
    min-height: 420px;
  }

  .quest-nav {
    gap: 4px;
    padding: 7px 5px 0;
  }

  .quest-nav button {
    min-height: 58px;
    font-size: 0.78rem;
  }

  .quest-nav-icon {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 560px) {
  .quest-device {
    padding: 8px;
  }

  .quest-header {
    border-radius: 8px;
  }

  .quest-brand span:not(.quest-logo-mark) {
    display: none;
  }

  .quest-identity strong {
    white-space: normal;
  }

  .quest-vital-row {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 4px;
  }

  .quest-vital-label {
    display: none;
  }

  .quest-panel {
    padding: 12px;
  }

  .quest-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .quest-map {
    min-height: 410px;
  }

  .quest-map-node {
    width: 100px;
    min-height: 68px;
    padding: 5px;
  }

  .quest-map-node.node-1,
  .quest-map-node.node-4 {
    left: calc(50% - 50px);
  }

  .quest-map-node strong {
    font-size: 0.78rem;
  }

  .quest-map-node small {
    display: none;
  }

  .quest-inventory-grid {
    grid-template-columns: 1fr;
  }

  .quest-nav button span:last-child {
    display: none;
  }

  .quest-nav-icon {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 1100px) {
  .command-center-shell {
    padding: 10px;
  }

  .command-hud {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  }

  .command-operator {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .command-operator-copy {
    justify-items: start;
  }

  .command-grid {
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .command-workspace {
    padding-top: 10px;
  }

  .command-radar {
    width: 190px;
  }

  .command-compass-layout {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .command-readiness-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .command-hud {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .command-brand strong {
    font-size: 1rem;
  }

  .command-clock-block {
    justify-items: start;
    text-align: left;
  }

  .command-nav {
    padding-bottom: 4px;
  }

  .command-grid {
    grid-template-columns: repeat(3, minmax(286px, 1fr));
  }

  .command-panel {
    padding: 10px;
  }

  .command-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .command-title-tools {
    justify-content: flex-start;
  }

  .command-operation-chip,
  .command-objective-chip {
    max-width: 100%;
  }

  .command-app-body {
    padding-top: 10px;
  }

  .command-app-body .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .command-supply-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .radar-sweep,
  .command-status-pulse,
  .ai-thinking-compass span {
    animation: none !important;
  }
}

/* Shared project-state colours intentionally come last so every app style reads the same. */
.card.status-completed,
.project-task-row.status-completed,
.milestone-group.status-completed > summary {
  border-color: #91c9af;
  background: #e8f5ef;
  color: #205f48;
}

.card.status-locked,
.project-task-row.status-locked,
.gantt-label-row.status-locked,
.milestone-group.status-locked > summary {
  border-color: #b8bdc1;
  background: #f0f2f3;
  color: #667077;
}

.task-card.status-locked,
.project-task-row.status-locked,
.gantt-label-row.status-locked {
  opacity: 0.68;
  filter: saturate(0.35);
}

.gantt-bar.status-locked,
.gantt-bar.task.status-locked {
  border-color: #aeb4b8;
  background: #c7ccd0;
  color: #525b61;
}

.card.status-overdue,
.project-task-row.status-overdue,
.gantt-label-row.status-overdue,
.milestone-group.status-overdue > summary {
  border-color: #d17868;
  background: #fff0ed;
  color: #7f2d24;
  opacity: 1;
  filter: none;
}

.card.status-overdue,
.project-task-row.status-overdue {
  box-shadow: inset 4px 0 #c34734;
}

.gantt-bar.status-overdue,
.gantt-bar.task.status-overdue,
.gantt-bar.milestone.status-overdue {
  border-color: #8f2e22;
  background: #c34734;
  color: #ffffff;
}

.status-overdue .pill:not(.good) {
  border-color: #e0a095;
  background: #fff7f5;
  color: #8f2e22;
}

.card.status-at-risk:not(.status-overdue),
.project-task-row.status-at-risk:not(.status-overdue),
.gantt-label-row.status-at-risk:not(.status-overdue),
.milestone-group.status-at-risk:not(.status-overdue) > summary {
  border-color: #d2aa42;
  background: #fff8dc;
  color: #684d08;
}

.gantt-bar.status-at-risk:not(.status-overdue) {
  border-color: #a87a0c;
  background: #e5bd54;
  color: #352600;
}

.project-schedule-risk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--good);
  background: var(--surface-alt);
}

.project-schedule-risk > div {
  display: grid;
  gap: 4px;
}

.project-schedule-risk small {
  color: var(--muted);
}

.project-schedule-risk.schedule-watch,
.project-schedule-risk.schedule-at-risk {
  border-left-color: #c18a12;
  background: #fff8dc;
}

.project-schedule-risk.schedule-overdue {
  border-left-color: #c34734;
  background: #fff0ed;
}

.schedule-risk-pill.schedule-at-risk,
.schedule-risk-pill.schedule-watch {
  border-color: #d2aa42;
  background: #fff3bd;
  color: #684d08;
}

.schedule-risk-pill.schedule-overdue {
  border-color: #d17868;
  background: #fff0ed;
  color: #7f2d24;
}

.original-deadline {
  border-style: dashed;
}

.project-schedule-dialog {
  width: min(100%, 980px);
}

.project-schedule-summary,
.project-deadline-review,
.project-schedule-milestone,
.project-schedule-task {
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.project-schedule-summary {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--good);
}

.project-schedule-summary.at_risk,
.project-schedule-summary.watch {
  border-left-color: #c18a12;
}

.project-schedule-summary.overdue {
  border-left-color: #c34734;
}

.project-deadline-review {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: end;
}

.project-deadline-review > span,
.project-schedule-milestone > div,
.project-schedule-task > div {
  display: grid;
  gap: 3px;
}

.project-deadline-review small,
.project-schedule-milestone small,
.project-schedule-task small {
  color: var(--muted);
}

.project-schedule-proposals,
.project-schedule-task-list,
.project-schedule-unassigned {
  display: grid;
  gap: 8px;
}

.project-schedule-milestone {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 0.9fr);
  gap: 9px;
  align-items: end;
  border-left: 5px solid var(--accent);
}

.project-schedule-task-list {
  margin: 0 0 8px 24px;
}

.project-schedule-task {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: end;
  border-left: 4px solid var(--accent-2);
}

.project-schedule-date-fields,
.project-schedule-task-fields {
  display: grid !important;
  gap: 8px !important;
  min-width: 0;
}

.project-schedule-date-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-schedule-task-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-schedule-task .field,
.project-schedule-milestone .field,
.project-deadline-review .field {
  gap: 3px;
  margin: 0;
  min-width: 0;
}

.project-schedule-task input,
.project-schedule-milestone input,
.project-deadline-review input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.project-schedule-save-note {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--good);
  background: var(--surface-alt);
}

.project-schedule-header {
  align-items: flex-start;
}

@media (max-width: 760px) {
  .project-schedule-risk,
  .project-deadline-review,
  .project-schedule-milestone,
  .project-schedule-task,
  .combined-schedule-row,
  .day-plan-block.editable,
  .deadline-ranking-list li {
    grid-template-columns: 1fr;
  }

  .project-schedule-risk {
    flex-direction: column;
    align-items: stretch;
  }

  .project-schedule-task-list {
    margin-left: 12px;
  }

  .project-schedule-date-fields,
  .project-schedule-task-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-plan-block.editable {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .day-plan-edit-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-plan-edit-fields .start-field {
    grid-column: 1 / -1;
  }

  .day-plan-order-controls {
    display: grid;
  }
}

/* Recurring urgency stays consistent between Today and the dedicated Recurring page. */
.recurring-today-section .card.recurring-page-card.recurring-time-natural,
.today-recurring-workspace .card.recurring-card.recurring-time-natural {
  border-color: #8fc8b1;
  background: #eef8f3;
  color: var(--ink);
  box-shadow: none;
}

.recurring-today-section .card.recurring-page-card.recurring-time-warning,
.today-recurring-workspace .card.recurring-card.recurring-time-warning {
  border-color: #d8ae45;
  background: #fff7dc;
  color: var(--ink);
  box-shadow: inset 4px 0 #c18c12;
}

.recurring-today-section .card.recurring-page-card.recurring-time-urgent,
.today-recurring-workspace .card.recurring-card.recurring-time-urgent {
  border-color: #c85b50;
  background: #fdecea;
  color: var(--ink);
  box-shadow: inset 4px 0 #b64238;
}

@media (max-width: 560px) {
  .today-workspace-tile {
    padding: 12px;
  }

  .today-workspace-section + .today-workspace-section {
    margin-top: 15px;
    padding-top: 15px;
  }
}

@media (max-width: 460px) {
  .day-plan-edit-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-plan-edit-fields .start-field {
    grid-column: auto;
  }

  .day-plan-edit-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

.milestone-card:not(.status-overdue):not(.status-locked) {
  border-left: 4px solid color-mix(in srgb, var(--accent) 72%, #1f5140);
  background: color-mix(in srgb, var(--good) 7%, var(--surface));
}

.coach-personality-panel {
  align-content: start;
}

.checklist-page {
  display: grid;
  gap: 14px;
}

.checklist-summary-band {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
}

.checklist-summary-band h2 {
  margin-bottom: 5px;
}

.checklist-counts {
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.checklist-counts span {
  display: grid;
  justify-items: end;
}

.checklist-counts strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.checklist-controls {
  margin: 0;
}

.segmented-control {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.segmented-control button {
  min-width: 72px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}

.segmented-control button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink), transparent 88%);
}

.checklist-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.checklist-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 2px solid var(--line-strong, var(--line));
  border-radius: 50%;
  background: var(--surface-alt);
  color: #ffffff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
}

.checklist-toggle[aria-pressed="true"] {
  border-color: var(--good);
  background: var(--good);
}

.checklist-card-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.checklist-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.checklist-title-row > div {
  min-width: 0;
}

.checklist-title-row h3,
.checklist-summary,
.checklist-next,
.checklist-notes p {
  overflow-wrap: anywhere;
}

.checklist-card.completed {
  border-color: #91c9af;
  background: #e8f5ef;
}

.checklist-card.completed h3,
.checklist-card.completed .checklist-summary {
  color: #4f6a5e;
  text-decoration: line-through;
}

.checklist-card.overdue-item {
  border-color: #d17868;
  background: #fff0ed;
  box-shadow: inset 4px 0 #c34734;
}

.checklist-next {
  padding: 9px 10px;
  border-left: 3px solid var(--accent-2);
  background: var(--surface-alt);
}

.checklist-notes {
  color: var(--muted);
}

.checklist-notes summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 750;
}

.checklist-notes p {
  margin-top: 8px;
  white-space: pre-wrap;
}

.checklist-original-entry {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.calendar-agenda-section {
  min-width: 0;
}

.game-dashboard > .calendar-agenda-section,
.coach-dashboard > .calendar-agenda-section,
.quest-dashboard > .calendar-agenda-section,
.overwatch-screen > .calendar-agenda-section {
  grid-column: 1 / -1;
}

.calendar-agenda-section.compact {
  margin-bottom: 0;
}

.calendar-agenda {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.calendar-agenda .section-header {
  margin-bottom: 0;
}

.calendar-planning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.calendar-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.calendar-event-list,
.calendar-window-list,
.calendar-suggestions {
  display: grid;
  gap: 7px;
}

.calendar-event-row,
.calendar-window-list > span,
.calendar-suggestion-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink);
  text-decoration: none;
}

.calendar-event-row > span:first-child,
.calendar-suggestion-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.calendar-event-row strong,
.calendar-event-row small,
.calendar-suggestion-row strong,
.calendar-suggestion-row small {
  overflow-wrap: anywhere;
}

.calendar-event-row small,
.calendar-window-list small,
.calendar-suggestion-row small {
  color: var(--muted);
}

.calendar-suggestions {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.calendar-suggestion-row > span:last-child {
  flex: 0 0 auto;
  color: var(--accent-2);
  font-weight: 800;
}

.calendar-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-error {
  color: var(--danger);
}

.calendar-config-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.calendar-config-list code {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-alt);
}

@media (max-width: 520px) {
  .nav button {
    font-size: 0.64rem;
  }

  .checklist-summary-band,
  .checklist-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .checklist-counts span {
    justify-items: start;
  }

  .checklist-controls {
    align-items: stretch;
  }

  .calendar-planning-grid {
    grid-template-columns: 1fr;
  }

  .calendar-empty,
  .calendar-suggestion-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.coach-recommendation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.coach-recommendation-head h2,
.coach-recommendation-head p,
.coach-personality-divider h3 {
  margin: 0;
}

.coach-personality-divider {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.coach-personality-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.coach-personality-option {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.coach-personality-option > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.coach-personality-option small {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.coach-personality-option em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
}

.coach-personality-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 4px 0 var(--accent);
}

.coach-thread-message {
  border-left: 4px solid #4d7999;
}

.coach-thread-message[data-coach-avatar="Drill Sergeant"] {
  border-left-color: #c34734;
}

.coach-thread-message[data-coach-avatar="Guide"] {
  border-left-color: #4f8a63;
}

.coach-thread-message[data-coach-avatar="Strategist"] {
  border-left-color: #267d78;
}

.coach-thread-message[data-coach-avatar="Adventurer"] {
  border-left-color: #c18a24;
}

.coach-thread-message[data-coach-avatar="Companion"] {
  border-left-color: #b45f78;
}

.coach-thread-message.current-personality {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

@media (max-width: 620px) {
  .coach-personality-options {
    grid-template-columns: 1fr;
  }
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 7px;
  max-width: min(72%, 760px);
}

.theme-title-badge,
.reward-header-summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.game-header > .reward-header-summary,
.coach-hero > .reward-header-summary,
.quest-header > .reward-header-summary,
.command-hud > .reward-header-summary {
  border-color: currentColor;
  background: transparent;
  color: inherit;
  opacity: 0.85;
}

.reward-preferences-panel {
  gap: 14px;
}

.reward-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.reward-signal {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-left: 3px solid var(--accent-3);
  background: var(--surface-alt);
}

.reward-signal span {
  color: var(--accent);
  font-weight: 850;
}

.reward-signal small,
.metric-definition {
  color: var(--muted);
}

.adaptive-support-experiment {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-3);
  background: var(--surface-alt);
}

.adaptive-support-experiment.is-adaptive {
  border-left-color: var(--accent);
}

.adaptive-support-experiment p,
.adaptive-support-experiment small {
  margin: 0;
  color: var(--muted);
}

.adaptive-support-experiment > span {
  font-size: 0.84rem;
  font-weight: 750;
}

.metric-card {
  align-content: start;
}

.metric-definition {
  margin: 0;
  font-size: 0.82rem;
}

.outcome-total-card {
  border-left: 4px solid var(--accent);
}

.inline-metric {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.inline-metric span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inline-metric strong {
  font-size: 1.45rem;
}

.goal-revision-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left: 4px solid var(--accent);
  background: var(--surface-alt);
}

.goal-revision-panel h3,
.goal-revision-panel p {
  margin: 0;
}

.goal-alignment-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: min(var(--radius), 8px);
  background: var(--surface-alt);
  color: var(--ink);
}

.goal-alignment-heading,
.goal-alignment-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.goal-alignment-heading h3,
.goal-alignment-heading p,
.goal-alignment-dimension p,
.goal-alignment-summary,
.goal-realignment-questions h4,
.goal-realignment-questions p,
.goal-necessity-review h4,
.goal-necessity-review p {
  margin: 0;
}

.goal-alignment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.goal-alignment-dimension {
  --alignment-color: #b7791f;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 2px solid color-mix(in srgb, var(--alignment-color) 70%, var(--line));
  border-radius: 6px;
  background: var(--surface);
}

.goal-alignment-dimension.is-critical {
  --alignment-color: #b42318;
}

.goal-alignment-dimension.is-low {
  --alignment-color: #d45c16;
}

.goal-alignment-dimension.is-mixed {
  --alignment-color: #b88700;
}

.goal-alignment-dimension.is-good {
  --alignment-color: #2d7d46;
}

.goal-alignment-dimension.is-strong {
  --alignment-color: #087d70;
}

.goal-alignment-label > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.goal-alignment-label strong,
.goal-alignment-label span {
  overflow-wrap: anywhere;
}

.goal-alignment-label span {
  color: var(--muted);
  font-size: 0.8rem;
}

.goal-alignment-label b {
  flex: 0 0 auto;
  color: var(--alignment-color);
  font-size: 1.05rem;
}

.goal-alignment-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  min-height: 11px;
}

.goal-alignment-scale span {
  min-width: 0;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--alignment-color) 35%, var(--line));
  border-radius: 2px;
  background: color-mix(in srgb, var(--alignment-color) 10%, var(--surface));
}

.goal-alignment-scale span.is-filled {
  border-color: var(--alignment-color);
  background: var(--alignment-color);
}

.goal-alignment-dimension p,
.goal-alignment-summary {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.goal-alignment-actions,
.goal-realignment-questions,
.goal-necessity-review {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--surface);
}

.goal-alignment-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.goal-realignment-question {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.goal-realignment-observation {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.goal-realignment-question textarea {
  min-height: 84px;
}

.goal-necessity-review {
  border-color: #b42318;
  border-left-color: #b42318;
  background: color-mix(in srgb, #b42318 7%, var(--surface));
}

.goal-necessity-review.is-paused {
  border-color: var(--line);
  border-left-color: var(--muted);
  background: var(--surface);
}

.goal-necessity-review.is-required {
  border-width: 2px;
}

.goal-necessity-review ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.ai-revision-status {
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 700;
}

.ai-revision-status.is-error {
  border-color: var(--bad);
  color: var(--bad);
}

.ai-revision-status.is-ready {
  border-color: var(--good);
  color: var(--good);
}

@media (max-width: 620px) {
  .goal-alignment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-alignment-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-alignment-actions .btn,
  .goal-realignment-questions .button-row .btn,
  .goal-necessity-review .button-row .btn {
    width: 100%;
  }

  .topbar-actions {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .creation-actions {
    justify-content: flex-start;
  }

  .developer-review-context {
    grid-template-columns: 1fr;
  }

  .reward-signal-grid {
    grid-template-columns: 1fr;
  }

  .game-header > .reward-header-summary,
  .coach-hero > .reward-header-summary,
  .quest-header > .reward-header-summary,
  .command-hud > .reward-header-summary {
    width: 100%;
  }
}

.coaching-support-grid {
  align-items: stretch;
}

.coaching-insight-tile {
  align-content: start;
  min-width: 0;
}

.coaching-tile-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.coaching-tile-heading h2,
.coaching-tile-heading p,
.coaching-support-tile blockquote,
.coaching-support-tile > p {
  margin: 0;
}

.coaching-support-tile blockquote {
  padding: 13px 14px;
  border-left: 4px solid var(--accent-2);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 780;
  line-height: 1.5;
}

.coaching-recommendation-list {
  display: grid;
  gap: 8px;
}

.coaching-recommendation-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
}

.coaching-recommendation-list span {
  color: var(--accent);
  font-weight: 900;
}

.start-support-dialog {
  width: min(760px, calc(100vw - 24px));
}

.start-support-boundary {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--accent-2);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.84rem;
}

.start-support-thread {
  display: grid;
  gap: 10px;
  min-height: 130px;
  max-height: min(44dvh, 430px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.start-support-message {
  display: grid;
  gap: 6px;
  width: min(88%, 590px);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.start-support-message.user {
  justify-self: end;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.start-support-message > span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.start-support-message p {
  margin: 0;
  white-space: pre-wrap;
}

.start-support-question {
  font-weight: 780;
}

.start-support-assumption {
  color: var(--muted);
  font-size: 0.86rem;
}

.start-support-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--muted);
}

.start-support-thinking span {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

.start-support-thinking p {
  margin: 0;
}

.start-support-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.start-support-method span {
  font-weight: 800;
}

.start-support-method small {
  color: var(--muted);
  text-transform: capitalize;
}

.start-support-plan,
.start-support-crisis {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  background: var(--surface-alt);
}

.start-support-plan h3,
.start-support-plan p,
.start-support-crisis h3,
.start-support-crisis p {
  margin: 0;
}

.start-support-plan ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
}

.start-support-first-step {
  padding: 10px;
  background: var(--surface);
}

.start-support-crisis {
  border-color: #c85a4a;
  border-left-color: #a93226;
  background: #fff0ed;
  color: #6f211b;
}

.start-support-crisis a:not(.btn) {
  color: #7f241d;
  font-weight: 900;
}

.start-support-error {
  margin: 0;
  color: var(--danger);
  font-weight: 750;
}

@media (max-width: 620px) {
  .coaching-tile-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .start-support-message {
    width: 96%;
  }

  .start-support-thread {
    max-height: 38dvh;
    padding: 8px;
  }
}
/* v0.39 Ideas, planning conflicts, time-block actions, and account backups */
.ideas-summary-band {
  align-items: flex-start;
}

.ideas-topic-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.idea-topic-card,
.idea-detail-page,
.idea-relationships-card,
.deadline-conflict-group {
  min-width: 0;
}

.idea-summary-list,
.deadline-conflict-groups,
.deadline-ranking-list,
.deadline-adjustment-list {
  display: grid;
  gap: 10px;
}

.idea-summary-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}

.idea-summary-row:first-child {
  border-top: 0;
}

.idea-summary-row p,
.idea-summary-row small,
.linked-idea-original small {
  display: block;
  margin: 4px 0 0;
}

.idea-title-link,
.day-plan-item-link {
  appearance: none;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0 0 2px;
  text-align: left;
}

.idea-title-link:hover,
.day-plan-item-link:hover {
  color: var(--ink);
}

.idea-detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.preserved-idea-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.idea-ai-notes {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.idea-ai-notes p {
  margin: 4px 0 0;
}

.idea-link-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.idea-link-field legend {
  font-weight: 800;
  margin-bottom: 4px;
}

.idea-link-options {
  display: grid;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.idea-relationship-review,
.day-plan-assumptions,
.deadline-conflict-group {
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.day-plan-block > div {
  min-width: 0;
}

.day-plan-actions {
  margin-top: 10px;
}

.day-plan-item-status {
  display: inline-block;
  margin-top: 8px;
  color: var(--success, #176b4a);
  font-weight: 800;
}

.deadline-conflict-group {
  border-left: 4px solid var(--warning, #b7791f);
}

.deadline-ranking-list {
  margin: 0;
  padding-left: 24px;
}

.deadline-ranking-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 9px;
  align-items: start;
  padding-left: 4px;
}

.compact-field {
  gap: 3px;
  margin: 0;
}

.deadline-ranking-list small,
.deadline-ranking-list p {
  display: block;
  margin: 2px 0 0;
}

.backup-upload-button {
  position: relative;
  cursor: pointer;
}

.backup-upload-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.command-nav > .account-dock {
  flex: 0 0 auto;
  width: auto;
  gap: 6px;
}

.coach-nav > .account-dock,
.game-nav > .account-dock,
.quest-nav > .account-dock {
  height: 100%;
}

@media (max-width: 560px) {
  .coach-nav .account-dock.is-embedded > span,
  .game-nav .account-dock.is-embedded > span,
  .quest-nav .account-dock.is-embedded > span {
    display: grid;
  }
}

@media (max-width: 760px) {
  .ideas-topic-grid,
  .idea-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .idea-summary-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .idea-summary-row .button-row,
  .day-plan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .idea-summary-row .button-row .btn,
  .day-plan-actions .btn {
    inline-size: 100%;
  }
}

/* Keep developer-feedback controls unmistakable in every app theme. */
button.btn.developer-review-button,
button.btn.dialog-header-review {
  border: 4px solid #000000;
  background: #d62828;
  color: #ffffff;
  box-shadow: 0 2px 0 #000000;
  font-weight: 900;
}

button.btn.developer-review-button:hover,
button.btn.developer-review-button:focus-visible,
button.btn.dialog-header-review:hover,
button.btn.dialog-header-review:focus-visible {
  border-color: #000000;
  background: #ad1919;
  color: #ffffff;
}