/* Opportunity Radar — Daily Review operational UI (M8-T10).
   Dark, professional, compact, evidence-focused. Metric-free by design:
   no chart/KPI/score-card styling exists anywhere in this file. Colour is
   never the sole carrier of meaning -- every state also carries a text
   label (NFR9). */

:root {
  --surface-base: #14171c;
  --surface-elevated: #1b1f26;
  --surface-inset: #101317;
  --surface-overlay: #22262f;
  --border-subtle: #2c313b;
  --border-strong: #3a4150;
  --text-primary: #e8eaed;
  --text-secondary: #a7adba;
  --text-muted: #767c8a;
  /* Pre-PRD visual-acceptance correction (2026-09-16, round 2): exact
     human-pinned values -- not sampled/inferred/approximated from
     RADAR.png this round. Approved visual principle: dark surfaces +
     thin blue lines/borders/text accents, never large solid blue fills.
     --accent/--accent-strong/--focus-ring/--link are kept as the names
     every rule below already references (avoids a large unrelated
     rename diff) but now simply alias the pinned tokens 1:1 -- there is
     no other indirection. --warning and the dark surface hierarchy above
     are unchanged. */
  --radar-blue: #385ee6;
  --radar-blue-hover: #496bf0;
  --radar-blue-text: #6f86f7;
  --radar-blue-soft: rgba(56, 94, 230, 0.08);
  --radar-blue-softer: rgba(56, 94, 230, 0.05);
  --radar-blue-focus: rgba(56, 94, 230, 0.3);

  --accent: var(--radar-blue);
  --accent-strong: var(--radar-blue-text);
  --warning: #d9a441;
  --focus-ring: var(--radar-blue);
  --link: var(--radar-blue-text);

  /* Pre-PRD final semantic-color pass (2026-09-16, round 3): exact
     human-pinned values, for status MEANING only (Stage/Outcome/Fit/
     Actionability/Recommendation) -- never used for product/navigation
     accent, which stays the --radar-blue family above. --semantic-neutral
     is defined for completeness/documentation but is never referenced by
     a rule below, because it is already byte-identical to the existing
     --text-secondary every cell already defaults to -- the "neutral"
     mapping is correctly a no-op, not a new class. */
  --semantic-green: #65c466;
  --semantic-green-soft: rgba(101, 196, 102, 0.1);
  --semantic-violet: #8b6ff7;
  --semantic-violet-soft: rgba(139, 111, 247, 0.1);
  --semantic-amber: #d99a2b;
  --semantic-amber-soft: rgba(217, 154, 43, 0.1);
  --semantic-red: #e05b5b;
  --semantic-red-soft: rgba(224, 91, 91, 0.1);
  --semantic-neutral: #a7adba;
}

* {
  box-sizing: border-box;
}

/* `hidden` must actually hide. The user-agent rule is `[hidden] { display: none }`,
   and ANY author rule that sets `display` on the element outranks it -- which is
   the case for `.view-control` (flex) and `.opportunity-row-grid` (grid). Without
   this, `element.hidden = true` silently does nothing on those elements, and a
   control the script believes it has hidden stays on screen. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: var(--link);
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--radar-blue-focus);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  flex-wrap: wrap;
}

/* Pre-PRD visual-polish: the small RADAR mark placed immediately before
   the existing RADAR text. No existing icon asset was found anywhere in
   the repo (checked), so this is the smallest local inline SVG that
   reads as a radar/sonar concept -- concentric rings and a center blip,
   no unnecessary decoration. Occupies the same "first child of
   .app-header" position the bare <h1> previously did; nothing else in
   the header changed. */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar-icon {
  color: var(--radar-blue);
  flex-shrink: 0;
}

.app-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ADR 018 workspace branding: additive, hidden by default via the [hidden]
   attribute -- an unconfigured workspace renders identically to before
   this addition. RADAR stays the visually dominant identity (.app-title);
   the separator/logo/label are deliberately smaller and lower-contrast,
   never competing with it. */
.brand-separator {
  color: var(--text-muted);
  font-weight: 400;
}

.brand-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lang-control {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}

.lang-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
}

/* Same restrained treatment as .view-btn.is-active below (a sibling
   segmented-pill control) -- soft tint + thin inset line, never a solid
   fill, per the approved visual principle. */
.lang-btn[aria-pressed="true"] {
  background: var(--radar-blue-soft);
  color: var(--radar-blue-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--radar-blue);
}

.btn {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-overlay);
  padding: 6px 14px;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent);
}

.btn-secondary {
  color: var(--text-primary);
}

/* The one deliberate exception to "no solid fills": a single-purpose
   primary submit action (Confirm dismiss), not a persistent/ambient UI
   element -- conventionally solid even in an otherwise outline-first
   palette. Uses the pinned solid/hover tokens directly, not the
   text-oriented --accent-strong. */
.btn-primary {
  border-color: var(--radar-blue);
  background: var(--radar-blue);
  color: #0b0d10;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--radar-blue-hover);
  border-color: var(--radar-blue-hover);
}

.btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.view-control {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}

.view-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Restrained per the approved visual principle: soft tint background
   (not a solid fill) + accent text + a thin inset line, so the active
   segment never reads as a bright solid-blue button. */
.view-btn.is-active {
  background: var(--radar-blue-soft);
  color: var(--radar-blue-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--radar-blue);
}

.dismiss-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}

.form-select,
.form-input,
.form-textarea {
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 6px 10px;
  font: inherit;
  margin-bottom: 8px;
}

.form-textarea {
  min-height: 60px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.app-main {
  display: grid;
  /* A wider review grid, a narrower detail pane -- sized so the primary
     review columns (Opportunity/Source/Stage/Outcome/Fit/Actionability/
     Recommendation) fit without horizontal scrolling at normal desktop
     widths. */
  grid-template-columns: minmax(420px, 1.7fr) minmax(300px, 1fr);
  gap: 16px;
  padding: 16px 20px 32px;
  align-items: start;
}

@media (max-width: 780px) {
  .app-main {
    grid-template-columns: 1fr;
  }
}

.section-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* --- Sign-in surface (ADR 026). Outline-first like the rest of the page:
   a single centred form, no solid fills except the one primary action.

   Sized for a person, not a metric grid: the rest of this file is a dense
   evidence table (13px rows, 0.85rem labels) and reusing that scale here made
   the first screen an operator sees read as unlabelled micro-text. This card
   keeps the palette but gives it real hierarchy -- a titled card, a lead line,
   labelled 16px inputs, and a full-width primary action at a thumb-sized
   target. --- */

.sign-in-section {
  max-width: 460px;
  margin: 64px auto 0;
  padding: 32px 32px 28px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-elevated);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.sign-in-heading {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-transform: none;
}

.sign-in-lead {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sign-in-form .field {
  gap: 8px;
}

.sign-in-form .field-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.sign-in-form .field input {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: 8px;
}

.sign-in-form .btn-primary {
  min-height: 48px;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 600;
}

#sign-in-error {
  padding: 0;
  font-size: 0.95rem;
}

#sign-in-error:not(:empty) {
  padding: 10px 12px;
  border: 1px solid var(--semantic-red);
  border-radius: 8px;
  background: var(--semantic-red-soft);
  color: var(--text-primary);
}

@media (max-width: 560px) {
  .sign-in-section {
    margin: 24px auto 0;
    padding: 22px 20px;
  }

  .sign-in-heading {
    font-size: 1.35rem;
  }
}

.sign-in-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.field input {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-inset);
  color: var(--text-primary);
  padding: 7px 10px;
  font: inherit;
}

.field input:focus {
  outline: none;
  border-color: var(--focus-ring);
}

.status-message {
  color: var(--text-secondary);
  padding: 12px 0;
}

.status-message.is-error {
  color: var(--warning);
}

/* --- Compact desktop review grid (ADR-014-compatible: transport of
   already-existing fields only; the same DOM/data renders as stacked
   cards below the responsive breakpoint further down this file). --- */

:root {
  /* 7 columns only -- Deadline moved into the Opportunity cell as
     secondary row content (round-5 human ruling) so the primary review
     fields fit without horizontal scroll at normal desktop widths.
     Stage/Outcome/Fit/Actionability/Recommendation rely on the wrap
     override on those five cell classes below (never ellipsis
     truncation) so their longest real values ("Ready for evaluation"/
     "Lista para evaluar", "Insufficient evidence"/"Evidencia
     insuficiente", "Not yet evaluated"/"Aún no evaluada", "Team
     conversion candidate"/"Candidata a conversión de equipo") always
     read completely. Source is unchanged throughout (out of this fix's
     scope).

     Pre-PRD final readability correction (round 2): the prior widths
     still let the row's total minimum content width exceed a normal
     (non-maximized) desktop list-panel width, so Recommendation -- the
     rightmost column -- and its header visibly ran off the right edge
     rather than wrapping/scrolling. Rebalanced, not grown: Stage/Outcome
     only need to fit their longest single WORD (wrap handles the rest,
     "Insufficient"/"insuficiente" ~90px, "evaluation"/"evaluar" ~75px),
     so both had real surplus to give back; Opportunity's flexible floor
     was trimmed too (it only matters when the grid is already this
     tight, which is exactly the failing case). Fit/Actionability/Source
     are untouched -- not reported as regressed, so left exactly as
     already accepted. Net effect: the row's total minimum content width
     is smaller than before, and Recommendation itself is also wider. */
  --row-grid-template: minmax(90px, 1fr) 88px 78px 98px 78px 92px 144px;
}

.opportunity-grid-scroll {
  overflow-x: auto;
}

.opportunity-grid-header {
  display: grid;
  grid-template-columns: var(--row-grid-template);
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 6px;
}

.opportunity-grid-header .row-cell {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  line-height: 1.2;
}

.opportunity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: fit-content;
}

.opportunity-row {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
}

.opportunity-row:hover {
  border-color: var(--accent);
}

.opportunity-row:focus-visible {
  border-color: var(--accent);
}

/* Exact pinned spec: a subtle emphasis (thin border + a 5%-opacity
   tint), never a solid/strongly saturated blue row background. Replaces
   the prior left-edge accent bar, which read as too strong a block of
   color for a selected state. */
.opportunity-row.is-selected {
  border-color: var(--radar-blue);
  background: var(--radar-blue-softer);
}

.opportunity-row-grid {
  display: grid;
  grid-template-columns: var(--row-grid-template);
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
}

.row-cell {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-opportunity {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Pre-PRD readability fix: these five value cells wrap instead of
   ellipsis-truncating, so every full human-readable value (Stage/
   Outcome/Fit/Actionability/Recommendation) always reads completely --
   never a fragment like "Ready for …". Source is intentionally left on
   the general .row-cell nowrap/ellipsis behavior (out of this fix's
   scope). Row height grows to fit wrapped text; `.opportunity-row-grid`'s
   existing `align-items: center` still centers the (now possibly
   multi-line) cell within the row. */
.cell-stage,
.cell-outcome,
.cell-fit,
.cell-actionability,
.cell-recommendation {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

.opportunity-title {
  font-weight: 600;
  color: var(--text-primary);
  white-space: normal;
}

.row-issue-line {
  font-size: 11.5px;
  color: var(--warning);
}

.row-issue-marker {
  font-weight: 700;
}

.row-deadline-line {
  font-size: 11.5px;
  color: var(--text-muted);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-inset);
  white-space: nowrap;
}

.badge-issue {
  border-color: var(--warning);
  color: var(--warning);
}

/* Pre-PRD visual-acceptance correction: the New badge only (never
   Dismissed/issue badges -- dismissal/error semantics are not recolored
   for aesthetic uniformity). Exact pinned spec: transparent background,
   thin outline, accent text -- no solid fill; blue is an outline/accent
   here, never a dominant block. */
.badge-new {
  background: transparent;
  border-color: var(--radar-blue);
  color: var(--radar-blue-text);
  font-weight: 600;
}

.deadline-line {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Narrow widths: revert to a stacked card -- same DOM, no information
   lost, no page-level horizontal overflow. */
@media (max-width: 720px) {
  .opportunity-grid-header {
    display: none;
  }

  .opportunity-row-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .row-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .row-cell::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 110px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .cell-opportunity::before {
    content: none;
  }
}

.detail-section,
.list-section {
  background: transparent;
}

#detail-content {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  /* Same top offset as .list-section below, so the left pane's "Daily
     review" heading and this panel's first heading ("Summary") start at
     the same vertical level. */
  padding: 8px 16px 16px;
}

.list-section {
  padding-top: 8px;
}

.detail-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}

.btn-source-action {
  flex: 0 0 auto;
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 600;
  white-space: nowrap;
}

.btn-source-action:hover {
  background: var(--surface-overlay);
}

.source-plain-reference {
  flex: 0 0 auto;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
  margin-bottom: 14px;
}

.detail-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: 0;
}

.detail-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.detail-field-value {
  color: var(--text-primary);
}

/* --- Fit / Actionability / Recommendation: prominent, equally-weighted
   cards. The original M8-T10 ruling here ("no red/green/traffic-light
   coding across cards") is explicitly superseded by the 2026-09-16
   semantic-color-pass authorization -- see the .tone-* rules and
   .stat-card.tone-* below. Cards stay identically sized/positioned
   regardless of tone; only text colour and (since a stat-card is already
   a bounded container) a subtle background/border tint change. --- */

.stat-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stat-card-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Semantic tone text colour -- applied as an additional class on an
   already-existing element (.row-cell, .detail-field-value, or
   .stat-card-value), placed after each of their own base colour rules
   above so the tone wins the cascade. No new element, no new padding, no
   pill; "neutral" (Low/Needs evidence/Not yet evaluated/N/A/unmapped
   values) intentionally has no class at all -- the existing base colour
   already equals --semantic-neutral exactly. */
.tone-green {
  color: var(--semantic-green);
}

.tone-violet {
  color: var(--semantic-violet);
}

.tone-amber {
  color: var(--semantic-amber);
}

.tone-red {
  color: var(--semantic-red);
}

.tone-radar-text {
  color: var(--radar-blue-text);
}

/* Stat cards only (already a bounded visual container per the approved
   visual-treatment rule) additionally get a very subtle background/
   border tint -- never a large colour block, never applied to plain
   table cells or detail fields, which stay text-colour-only above. */
.stat-card.tone-green {
  background: var(--semantic-green-soft);
  border-color: var(--semantic-green);
}

.stat-card.tone-violet {
  background: var(--semantic-violet-soft);
  border-color: var(--semantic-violet);
}

.stat-card.tone-amber {
  background: var(--semantic-amber-soft);
  border-color: var(--semantic-amber);
}

.stat-card.tone-red {
  background: var(--semantic-red-soft);
  border-color: var(--semantic-red);
}

@media (max-width: 480px) {
  .stat-card-row {
    grid-template-columns: 1fr;
  }
}

/* --- Why Radar reached this result --- */

.reason-group-heading {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 10px 0 6px;
}

.reason-component-block {
  margin-bottom: 8px;
}

.reason-card-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reason-card {
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
}

.reason-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-primary);
}

.reason-marker {
  flex: 0 0 auto;
  font-weight: 700;
  width: 16px;
  text-align: center;
}

.reason-marker.reason-positive {
  color: var(--accent-strong);
}

.reason-marker.reason-negative {
  color: var(--warning);
}

.reason-marker.reason-unknown {
  color: var(--text-muted);
}

/* Technical provenance (criterion_key/reason_code/polarity) -- kept in
   full, but visually subordinate: smaller, lower contrast, clearly
   metadata rather than the primary explanation above it. */
.reason-card-meta {
  margin-top: 3px;
  margin-left: 24px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.8;
}

.reason-evidence-count {
  margin-top: 4px;
  margin-left: 24px;
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Evidence --- */

.evidence-observation {
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  margin-bottom: 10px;
}

.evidence-observation.is-open {
  border-color: var(--border-strong);
}

.evidence-observation-header {
  width: 100%;
  text-align: left;
  background: var(--surface-overlay);
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-primary);
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chevron {
  display: inline-block;
  transition: transform 0.1s ease-in-out;
  color: var(--text-muted);
}

.evidence-observation.is-open .chevron {
  transform: rotate(90deg);
}

.evidence-observation-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evidence-no-artifacts {
  padding: 8px 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Each EvidenceArtifact is itself a compact, collapsed-by-default
   disclosure -- progressive disclosure, not semantic hiding: the full
   evidence_text/reference is always one click away, never truncated. */

.evidence-artifact {
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  background: var(--surface-inset);
}

.evidence-artifact.is-open {
  border-color: var(--border-strong);
}

.evidence-artifact-header {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.evidence-artifact.is-open .chevron {
  transform: rotate(90deg);
}

.evidence-artifact-content {
  padding: 0 8px 8px;
}

.evidence-artifact-body {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 2px;
}

.evidence-excerpt-toggle {
  margin-top: 6px;
  font-size: 12px;
  padding: 4px 10px;
}

/* --- Evidence panel organization: always-visible Source Observation
   summary, and Fit/Actionability reasons shown with their already-linked
   EvidenceArtifact(s) inline. --- */

.evidence-observation-summary {
  margin-bottom: 10px;
}

.evaluation-evidence-block {
  margin-bottom: 12px;
}

.reason-card-artifacts {
  margin-top: 6px;
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reason-artifact-toggle {
  margin-top: 4px;
  margin-left: 24px;
  font-size: 11.5px;
  padding: 3px 9px;
}

.reason-artifact-excerpt {
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12.5px;
}

.reason-artifact-excerpt-label {
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 2px;
}

.reason-artifact-excerpt-body {
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.section-block {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-block-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.technical-details-block {
  opacity: 0.85;
}

.technical-details-block .detail-field-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

@media (max-width: 360px) {
  .app-header {
    padding: 10px 12px;
  }

  .app-main {
    padding: 12px 12px 24px;
  }
}

/* --- Administration pages (ADR 028) -----------------------------------------
   The dashboards are forms and tables, not the dense evidence grid the
   daily-review page is. They reuse this file's palette and controls, and add
   only what a form needs: a readable type scale, roomy inputs, a table that
   survives a narrow window, and an unmistakable error/notice line. */

.admin-main {
  display: block;
  padding: 24px 28px 64px;
  max-width: 1280px;
  margin: 0 auto;
}

.admin-title {
  margin: 0 0 18px;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.admin-section {
  margin: 0 0 32px;
  padding: 20px 22px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-elevated);
}

.admin-subheading {
  margin: 18px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-lead {
  margin: 6px 0 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.admin-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-section .field {
  gap: 6px;
  margin-bottom: 14px;
  max-width: 420px;
}

.admin-section .field-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-section .field input,
.admin-select {
  min-height: 38px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-inset);
  color: var(--text-primary);
}

.admin-section .field input:focus,
.admin-select:focus {
  outline: none;
  border-color: var(--focus-ring);
}

.admin-table-scroll {
  overflow-x: auto;
  margin: 0 0 8px;
}

.admin-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.admin-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-primary);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-actions .btn,
.admin-actions .admin-select {
  font-size: 0.85rem;
  padding: 5px 10px;
  min-height: 32px;
}

.btn-danger {
  border-color: var(--semantic-red);
  color: var(--semantic-red);
}

.btn-danger:hover {
  background: var(--semantic-red-soft);
}

.admin-invite,
.admin-discovery,
.admin-logo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.admin-logo-preview {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 6px 0 10px;
}

.admin-code {
  display: block;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface-inset);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}

.status-message.is-error {
  padding: 10px 12px;
  border: 1px solid var(--semantic-red);
  border-radius: 8px;
  background: var(--semantic-red-soft);
  color: var(--text-primary);
}

.status-message.is-ok {
  padding: 10px 12px;
  border: 1px solid var(--semantic-green);
  border-radius: 8px;
  background: var(--semantic-green-soft);
  color: var(--text-primary);
}

.admin-nav-link {
  color: var(--link);
  text-decoration: none;
}

.admin-nav-link:hover {
  text-decoration: underline;
}