/* Requirement Planner human-review UI — zero-dependency styles (ADR-019).
   Practical WCAG 2.2 AA baseline: visible focus, colour-independent meaning,
   responsive/zoom friendly, sufficient contrast.

   Brand: Top Management Systems. The palette is the one extracted from the
   original CorelDRAW source (brand/brand-notes.md) — #003399 deep, #336699
   primary, #6666FF indigo. Those are logo colours, too dark to read as text on
   a dark ground, so text uses lightened tints of the same hues and the brand
   values carry weight in fills, borders and glow instead. Everything here is
   system fonts and CSS gradients: the CSP allows no external fonts, no inline
   styles and no third-party origins, and a landing page should not need them. */

:root {
  /* Depth: near-black navy rising to the brand deep blue. */
  --bg: #030B23;
  --bg-2: #061640;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.085);
  --text: #F3F7FF;
  --muted: #BACAEC;
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
  /* Brand indigo lifted to ~7:1 on the navy ground; #6666FF itself fails as text. */
  --accent: #93A8FF;
  --accent-solid: #3D5CE8;
  --accent-ink: #FFFFFF;
  --brand-indigo: #6666FF;
  --brand-deep: #003399;
  --brand-primary: #336699;
  --ok: #4BD98B;
  --warn: #FFC145;
  --danger: #FF8A8A;
  --focus: #FFD24A;
  --radius: 14px;
  --radius-lg: 22px;
  --space: 16px;
  --shadow: 0 18px 40px rgba(0, 8, 32, 0.45);
}

* {
  box-sizing: border-box;
}

/* The application is a working surface, not a shop window: a light corporate
   treatment reads better for long sessions, dense status and printed evidence.
   The landing page keeps the navy and the bubbles. Only the tokens change here,
   so every rule below follows without being rewritten — and each value was
   chosen for contrast, not for looks: the brand blues all fail AA as text on
   white just as they do on navy. */
body.app-surface {
  --bg: #F6F8FC;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F5FB;
  --text: #0C1A33;
  --muted: #4B5D7A;
  --border: #D8E0EC;
  --border-strong: #B9C6DA;
  --accent: #2C46C4;
  --accent-solid: #2C46C4;
  --accent-ink: #FFFFFF;
  --ok: #0F7A45;
  --warn: #8A5A00;
  --danger: #B3261E;
  --focus: #12307A;
  --shadow: 0 10px 28px rgba(12, 26, 51, 0.09);
}

body.app-surface {
  background-color: var(--bg);
  /* A whisper of the brand, so the app still belongs to the landing page. */
  background-image:
    radial-gradient(48rem 34rem at 8% -10%, rgba(102, 102, 255, 0.07), transparent 60%),
    radial-gradient(40rem 30rem at 96% 2%, rgba(51, 102, 153, 0.07), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 42%);
}

body.app-surface .app-header {
  background: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, 0));
}

body.app-surface .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-image: none;
}

body.app-surface .brand__company {
  color: var(--accent);
}

body.app-surface .brand__mark {
  filter: none;
}

body.app-surface .skip-link {
  background: var(--accent-solid);
  color: #FFFFFF;
}

body.app-surface button.approve {
  background: var(--ok);
  color: #FFFFFF;
}

body.app-surface button.reject {
  background: var(--danger);
  color: #FFFFFF;
}

body.app-surface button.flag {
  background: var(--warn);
  color: #FFFFFF;
}

/* These carry their own colours rather than tokens, and the dark-theme values
   are unreadable on a light surface: a navy banner behind near-black text, and
   pastel badges on near-white. Restated for the light surface at AA or better. */
body.app-surface .banner--info {
  background: #E7EFFD;
  border-color: var(--accent);
}

body.app-surface .banner--guard {
  background: #E4F3EA;
  border-color: var(--ok);
}

body.app-surface .node[data-type="Epic"] .type {
  color: #5B32A8;
  border-color: #9E7BD8;
}

body.app-surface .node[data-type="Feature"] .type {
  color: #10557E;
  border-color: #6BA3C6;
}

body.app-surface .node[data-type="User Story"] .type {
  color: #0F6039;
  border-color: #5FA987;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  /* The bubbles from the brand concept, as light rather than images: four soft
     orbs of brand colour over a navy gradient. No requests, no layout cost. */
  background-image:
    radial-gradient(52rem 40rem at 12% -6%, rgba(102, 102, 255, 0.30), transparent 62%),
    radial-gradient(44rem 34rem at 92% 6%, rgba(51, 102, 153, 0.34), transparent 60%),
    radial-gradient(38rem 32rem at 78% 88%, rgba(0, 51, 153, 0.42), transparent 64%),
    radial-gradient(30rem 26rem at 8% 82%, rgba(102, 102, 255, 0.18), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 58%, var(--bg) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--focus);
  color: #000;
  padding: 8px 12px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.app-header {
  padding: clamp(20px, 3.5vw, 40px) clamp(16px, 4vw, 48px) clamp(16px, 2.5vw, 28px);
  background: linear-gradient(180deg, rgba(6, 22, 64, 0.72), rgba(3, 11, 35, 0.15));
  border-bottom: 1px solid var(--border);
}

.app-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-header h1 {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  margin: 0;
}

.app-header__tagline {
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

/* Brand lockup: the mark, then the company above the product name. The company
   is what a visitor should recognise; the product is what they came to use. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand__mark {
  width: clamp(38px, 4.4vw, 52px);
  height: clamp(38px, 4.4vw, 52px);
  flex: none;
  /* Lift the mark off the navy so the deep-blue layer does not disappear. */
  filter: drop-shadow(0 4px 14px rgba(102, 102, 255, 0.55));
}

.brand__names {
  min-width: 0;
}

.brand__company {
  display: block;
  font-size: clamp(0.68rem, 1vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2px;
}

.brand__product {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* Phone surfaces carry the same identity at a size that suits a small screen. */
.brand--compact {
  gap: 11px;
  margin-bottom: 4px;
}

.brand--compact .brand__mark {
  width: 40px;
  height: 40px;
}

.brand--compact .brand__product {
  font-size: 1.28rem;
}

.brand--compact .brand__company {
  font-size: 0.64rem;
}

.service-status {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
}

.service-status::before {
  content: "● ";
}

.service-status[data-state="ok"] {
  color: var(--ok);
  border-color: var(--ok);
}

.service-status[data-state="unavailable"] {
  color: var(--danger);
  border-color: var(--danger);
}

.service-status[data-state="unknown"] {
  color: var(--muted);
}

/* Runtime truth, as chips rather than a dense two-column table. Same dt/dd
   markup and the same honesty; it just stops competing with the headline. */
.platform-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 18px 0 0;
  font-size: 0.82rem;
}

.platform-status:empty {
  display: none;
}

.platform-status dt {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.7rem;
}

.platform-status dd {
  margin: 0 14px 0 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 600;
}

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 40px);
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
}

.card {
  background: var(--surface);
  /* The lit top edge is painted, not an overlay: an ::before with overflow
     hidden would clip any content that reaches the card's edge. */
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  background-size: 100% 1px;
  background-position: top left;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow);
  /* Frosted glass over the orbs. Degrades to a flat tint where unsupported,
     which is why --surface is already legible on its own. */
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.card h2 {
  margin-top: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  letter-spacing: -0.01em;
}

.card h3 {
  margin-bottom: 6px;
  font-size: 1.02rem;
}

/* Two fixed columns leave about 90px per value on a phone, which breaks words
   mid-syllable. Stack them instead. */
@media (max-width: 520px) {
  .card>dl:not(.platform-status) {
    display: block;
  }

  .card>dl:not(.platform-status) dt {
    margin-top: 10px;
  }

  .card>dl:not(.platform-status) dd {
    margin: 2px 0 0;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space);
}

.field .req {
  color: var(--warn);
  font-weight: 600;
}

label {
  font-weight: 600;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 11px 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font: inherit;
}

input[type="text"]:hover,
textarea:hover,
select:hover {
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

button {
  font: inherit;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Solid indigo, not the pale text tint: white on --accent would fail contrast. */
button.primary {
  background: linear-gradient(135deg, var(--accent-solid), #2C46C4);
  color: var(--accent-ink);
  box-shadow: 0 10px 24px rgba(61, 92, 232, 0.35);
}

button.primary:hover:not(:disabled) {
  box-shadow: 0 14px 30px rgba(61, 92, 232, 0.48);
}

button.secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

button.approve {
  background: var(--ok);
  color: #04120a;
}

button.reject {
  background: var(--danger);
  color: #1a0404;
}

button.flag {
  background: var(--warn);
  color: #1a1204;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.status {
  margin: 0;
  color: var(--muted);
  min-height: 1.25rem;
}

.status[data-busy="true"]::before {
  content: "⏳ ";
}

.error {
  background: #2a1414;
  border: 1px solid var(--danger);
  color: #ffd7d7;
  border-radius: 8px;
  padding: 12px 14px;
}

.error strong {
  color: var(--danger);
}

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

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
}

.kv dt {
  color: var(--muted);
  font-weight: 600;
}

.kv dd {
  margin: 0;
}

.plan-list {
  margin: 12px 0 0;
  padding-left: 20px;
}

.plan-list li {
  margin-bottom: 8px;
}

.plan-list .role {
  color: var(--accent);
  font-weight: 600;
}

.memory {
  margin-top: var(--space);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-weight: 600;
}

.memory::before {
  content: "🧠 ";
}

/* An icon with nothing after it is just a floating emoji. */
.memory:empty {
  display: none;
}

.memory[data-state="used"] {
  border-color: var(--ok);
  color: var(--ok);
}

.memory[data-state="none"] {
  color: var(--muted);
}

.memory[data-state="blocked"] {
  border-color: var(--warn);
  color: var(--warn);
}

.banner {
  margin: var(--space) 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
}

.banner--info {
  background: #10243a;
  border: 1px solid var(--accent);
}

.banner--guard {
  background: #10281c;
  border: 1px solid var(--ok);
}

.hierarchy ul {
  list-style: none;
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--border);
}

.hierarchy>ul {
  padding-left: 0;
  border-left: none;
}

.hierarchy li {
  margin: 6px 0;
}

.node {
  display: inline-block;
}

.node .type {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  margin-right: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.node[data-type="Epic"] .type {
  color: #c9a6ff;
  border-color: #7a53c0;
}

.node[data-type="Feature"] .type {
  color: #7fd1ff;
  border-color: #3f7fb0;
}

.node[data-type="User Story"] .type {
  color: #9fe6b6;
  border-color: #3f9060;
}

.node[data-type="Task"] .type {
  color: var(--muted);
}

.ac-story {
  margin-bottom: 12px;
}

.ac-story h4 {
  margin: 8px 0 4px;
}

.gherkin {
  margin: 0;
  padding-left: 18px;
}

.gherkin li {
  margin: 4px 0;
}

.gherkin .kw {
  color: var(--accent);
  font-weight: 700;
}

.governance {
  display: grid;
  gap: var(--space);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.governance ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.sev {
  font-weight: 700;
}

/* Authentication banner (Phase 2, ADR-021) */
.auth-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}

.auth-identity {
  font-weight: 600;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auth-btn {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.auth-btn:focus {
  outline: 2px solid var(--accent, #7fd1ff);
  outline-offset: 2px;
}

.decision-identity {
  font-weight: 600;
}

.sev[data-sev="high"] {
  color: var(--danger);
}

.sev[data-sev="medium"] {
  color: var(--warn);
}

.sev[data-sev="low"] {
  color: var(--ok);
}

.assumptions {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: var(--space) 0;
}

.checkbox {
  font-weight: 400;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.decision-result {
  margin-top: var(--space);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-weight: 600;
}

.decision-result[data-state="approved"] {
  border-color: var(--ok);
  color: var(--ok);
}

.decision-result[data-state="rejected"] {
  border-color: var(--danger);
  color: var(--danger);
}

.decision-result[data-state="flagged"] {
  border-color: var(--warn);
  color: var(--warn);
}

.evidence {
  margin: 6px 0 0;
  padding-left: 18px;
}

.app-footer {
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding: clamp(20px, 3vw, 32px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 48px);
  font-size: 0.88rem;
  max-width: 1040px;
  margin: 24px auto 0;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: border-color 0.15s ease;
  }
}

/* Mobile steer-and-approve surface (ADR-035). Single column, large touch targets. */
body.mobile {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.75rem 0.9rem 3rem;
}

body.mobile .m-header h1 {
  font-size: 1.25rem;
  margin: 0.25rem 0;
}

body.mobile .card {
  padding: 0.9rem;
  margin: 0.75rem 0;
}

body.mobile h2 {
  font-size: 1rem;
}

body.mobile button,
body.mobile .auth-btn {
  min-height: 2.9rem;
  font-size: 1rem;
}

body.mobile .actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.mobile .actions button {
  flex: 1 1 6rem;
}

body.mobile textarea {
  width: 100%;
  font-size: 1rem;
}

body.mobile .kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  margin: 0;
}

body.mobile .kv dt {
  font-weight: 600;
}

body.mobile .kv dd {
  margin: 0;
}

.m-queue {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-queue li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.m-queue li:last-child {
  border-bottom: 0;
}

button.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

/* Plan, usage and the next step (AB#532). */
.billing-summary { font-weight: 600; margin: 0 0 .5rem; }
.billing-summary[data-band='approaching'] { color: #8a5a00; }
.billing-summary[data-band='exhausted'] { color: #8a1c1c; }
.billing-bar { background: #eceff3; border-radius: 4px; height: 8px; overflow: hidden; }
.billing-bar-fill { background: #2f6f4f; display: block; height: 100%; }
.billing-bar[data-band='approaching'] .billing-bar-fill { background: #b8860b; }
.billing-bar[data-band='exhausted'] .billing-bar-fill { background: #a12121; }
.billing-upgrade { margin-top: .75rem; }


/* Delivery fitness (AB#528). */
.fitness-signals { list-style: none; margin: 0; padding: 0; }
.fitness-signal { border-top: 1px solid #e3e7ec; padding: .6rem 0; }
.fitness-question { font-weight: 600; margin: 0 0 .25rem; }
.fitness-value { font-size: 1.25rem; margin: 0 0 .15rem; }
.fitness-signal[data-concern='true'] .fitness-value { color: #8a5a00; }
.fitness-concern { color: #8a5a00; margin: .15rem 0 0; }
.fitness-evidence { font-size: .85rem; }