/* OdooRedo application styles.
 *
 * One shared stylesheet for every server-rendered page, served by WhiteNoise from the
 * collected static root. No build step, no framework, no external font or CDN request.
 *
 * Conventions:
 *   - Element selectors carry most of the weight so templates stay plain HTML. Tests assert
 *     exact markup for several controls, so classes are added to containers, not to those
 *     elements.
 *   - Colours are chosen for WCAG 2.2 AA contrast: body text and every badge pairing clears
 *     4.5:1, and interactive borders clear 3:1.
 *   - Interactive controls are at least 24x24 CSS px (SC 2.5.8); form controls and buttons
 *     are sized well above it for touch.
 *   - Spacing is a 4px scale: 4, 8, 12, 16, 20, 24, 32, 48, 64. Values off that scale are
 *     only for optical clearances that are derived from something else (the header keeps the
 *     controls clear of the absolutely positioned logo, for instance).
 *   - Radius has two steps and colour has one token per semantic role. Both are listed below.
 *     Prefer an existing token over a new literal; a one-off shade that appears twice is a
 *     token waiting to happen.
 */

:root {
  --page: #f4f6f8;
  --surface: #ffffff;
  --surface-muted: #f8fafb;
  --border: #d3dae1;
  --border-strong: #a9b4bf;

  --text: #16202b;
  --text-muted: #5b6673;
  --text-inverse: #ffffff;

  /* Each semantic role is a trio: a text/graphic colour, a soft fill, and a line colour for
     the border between them. Notices, badges and legend swatches all draw from the same trio
     so one status cannot look like two different things in two places. */
  --accent: #1a4f8a;
  --accent-dark: #143c69;
  --accent-soft: #eaf1f8;
  --accent-line: #b9cee4;

  --danger: #8a1c1c;
  --danger-soft: #fbe9e7;
  --danger-line: #e6b9b3;
  --warn: #7a5200;
  --warn-soft: #fdf3d8;
  --warn-line: #e0cf9a;
  --ok: #17552f;
  --ok-soft: #e6f2ea;
  --ok-line: #b7d6c2;
  --neutral: #3d4854;

  --header: #14273d;

  /* Two radii. --radius frames panels and controls; --radius-sm is for small inline marks
     (inline code, badges, legend swatches) where the 6px frame reads too round at that size. */
  --radius: 6px;
  --radius-sm: 3px;

  /* Four sizes for the repeated UI text roles. Headings keep literal sizes because each is
     used once, so a token would add indirection without removing a repetition. */
  --fs-xs: 0.78rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.92rem;
  --fs-ui: 0.95rem;

  --measure: 1120px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

main {
  display: block;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px 20px 64px;
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 12px;
  text-wrap: balance;
}

h1 {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

h2 {
  font-size: 1.2rem;
  margin-top: 32px;
}

h3 {
  font-size: 1.02rem;
  margin-top: 24px;
}

p {
  margin: 0 0 12px;
}

small {
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  word-break: break-all;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-dark);
}

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

/* -------------------------------------------------------------- header ---- */

.site-header {
  background: var(--header);
  color: var(--text-inverse);
  border-bottom: 3px solid var(--accent);
}

.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 10px 68px 10px 20px;
}

.site-header__brand {
  color: var(--text-inverse);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 8px 0;
  margin-right: 8px;
}

a.site-header__brand:hover {
  color: var(--text-inverse);
  text-decoration: underline;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: auto;
}

.site-nav a,
.site-header__patch-notes {
  display: inline-block;
  min-height: 24px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--fs-ui);
}

.site-nav a:hover,
.site-header__patch-notes:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-inverse);
  text-decoration: underline;
}

.site-header__version {
  color: #a9bdd1;
  font-size: var(--fs-xs);
  padding: 4px 0;
}

.site-header__user {
  min-width: 0;
  color: #dbe4ee;
  font-size: var(--fs-md);
  padding: 4px 0;
  overflow-wrap: anywhere;
}

.site-header__settings {
  color: var(--text-inverse);
  font-size: var(--fs-md);
  padding: 4px 0;
  text-decoration: underline;
}

.site-header__settings:hover {
  color: var(--text-inverse);
}

.site-header__session {
  display: inline;
}

/* Northstar mark, anchored to the top right so it stays put when the header wraps.
   The reserved padding on the header keeps the controls from running underneath it. */
.site-header__logo {
  position: absolute;
  top: 10px;
  right: 20px;
  height: 34px;
  width: auto;
}

.site-header :focus-visible {
  outline-color: var(--text-inverse);
}

/* The logout control is a form button in the dark bar; keep it quiet but legible. */
.site-header__session button {
  background: transparent;
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.55);
}

.site-header__session button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-inverse);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--accent-dark);
  padding: 10px 16px;
  border: 2px solid var(--accent);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  z-index: 10;
}

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

/* ------------------------------------------------------ notices/messages ---- */

.messages {
  max-width: var(--measure);
  margin: 20px auto 0;
  padding: 0 20px;
}

/* The three notice kinds are one shape in three colours. Keeping the shape in a single rule
   stops the padding, radius and rule weight drifting apart as kinds are added. */
.messages p,
.notice,
.errors,
[role="alert"].errors {
  border: 1px solid;
  border-left: 4px solid;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 20px;
}

.messages p {
  margin-bottom: 8px;
  background: var(--ok-soft);
  border-color: var(--ok-line);
  border-left-color: var(--ok);
  color: var(--ok);
}

/* A standing caution on a page, as opposed to a response to something the user just did. */
.notice {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  border-left-color: var(--warn);
  color: var(--warn);
}

/* Server-rendered validation and refusal blocks. */
.errors,
[role="alert"].errors {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  border-left-color: var(--danger);
  color: var(--danger);
}

.errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.errors p:last-child,
.errors ul:last-child {
  margin-bottom: 0;
}

.errors a {
  color: var(--danger);
}

/* --------------------------------------------------------- cards/blocks ---- */

/* Every raised panel is the same surface. One definition, so a new panel cannot arrive with
   its own border colour or radius. Padding and margin stay with the individual classes
   because those genuinely differ by role. */
.card,
.filters,
.table-scroll,
.auth-card,
.rca-tree-canvas {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card {
  padding: 20px;
  margin: 0 0 20px;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

.card > *:last-child {
  margin-bottom: 0;
}

/* A panel inside a panel is the same surface drawn twice: two concentric white boxes that
   imply a hierarchy the content does not have. A nested block becomes a subsection instead,
   which is the treatment .builder-capa-detail already uses for the same job. */
.card .card {
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 0 0;
  margin: 20px 0 0;
}

/* Data tables inside a panel sit flush; the header band already separates them. The
   horizontal scroll container is kept, only its redundant frame is dropped. */
.card .table-scroll {
  background: none;
  border: 0;
  border-radius: 0;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.backlink {
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
  margin: 0 0 12px;
  font-size: var(--fs-md);
}

.lede {
  color: var(--text-muted);
  max-width: 70ch;
}

.hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Standalone choice lists (progressive disclosure).
 * WCAG 2.2 AA SC 2.5.8 (Target Size, Minimum). A standalone choice rendered as a bare text
 * link has a hit area the height of its line box, which is under the 24x24 CSS-pixel minimum.
 * Links inline within a sentence are excepted by the success criterion and are deliberately
 * left alone; this rule applies only to lists of standalone choices. */
.choice-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  max-width: 420px;
}

.choice-list > li {
  margin: 0;
}

/* --------------------------------------------------------------- forms ---- */

form {
  margin: 0;
}

label {
  display: block;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Without this a fieldset keeps the browser's notched box, which is the one control on the
   form that looks like it came from a different application. A legend is a group label, so
   it is styled as one; grouping that needs a visible frame uses a nested panel instead. */
fieldset {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
}

form p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 16px;
}

form p > label,
form p > small {
  flex: 1 1 240px;
  min-width: 0;
}

input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-ui);
  line-height: 1.4;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #7d8b98;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

::placeholder {
  color: #6a7683;
  opacity: 1;
}

/* Django's as_p output puts help text and errors after the control. */
.helptext,
.helptext li {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: 4px;
}

ul.errorlist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
}

/* The filter bar above the Open/Resolved tables. */
.filters {
  padding: 16px 20px;
  margin: 0 0 20px;
}

.filters p {
  gap: 12px 16px;
}

.filters p:last-child {
  margin-bottom: 0;
}

.filters label {
  flex: 1 1 180px;
}

.filters button {
  align-self: flex-end;
}

/* Open/Resolved title search: field and submit sit on one row; wrap on narrow screens. */
.title-search {
  margin: 0 0 20px;
}

.title-search__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.title-search__controls > label {
  flex: 1 1 16rem;
  min-width: 0;
  margin-bottom: 0;
}

.title-search__controls > button,
.title-search__controls > a {
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* ------------------------------------------------------------- buttons ---- */

/* One control shape. Buttons and the links that act as buttons share it so a secondary action
   does not depend on whether the surrounding markup happened to use <a> or <button>. */
button,
input[type="submit"],
.button-link,
.page-actions a,
.pagination a,
.pagination button,
.choice-list > li > a,
.title-search__controls > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 24px;
  padding: 8px 16px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
.button-link:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--text-inverse);
}

button:disabled {
  background: var(--border-strong);
  border-color: var(--border-strong);
  cursor: not-allowed;
}

/* A submission the duplicate-submit guard has in flight. Its submit controls are already
   disabled (and so already greyed); this adds the pointer cue that the wait is expected. */
form[aria-busy="true"] {
  cursor: progress;
}

/* The quiet variant: everything that is a secondary action next to a primary one. Previously
   four near-identical copies of this existed and had drifted apart in padding, height, text
   colour and font size. */
.btn-quiet,
.page-actions a,
.pagination a,
.pagination button,
.choice-list > li > a,
.title-search__controls > a {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--accent-dark);
}

.btn-quiet:hover,
.page-actions a:hover,
.pagination a:hover,
.pagination button:hover,
.choice-list > li > a:hover,
.title-search__controls > a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* A standalone choice fills its column and is taller than the standard 40px control: it is the
   only target on the page and the extra height is a deliberate SC 2.5.8 accommodation. Kept
   here, after the shared shape, because both rules match with the same specificity. */
.choice-list > li > a {
  display: flex;
  justify-content: flex-start;
  min-height: 48px;
  line-height: 24px;
}

.btn-danger {
  background: var(--surface);
  border-color: #b5675f;
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* -------------------------------------------------------------- tables ---- */

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

caption {
  caption-side: top;
  text-align: left;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: 12px 16px 0;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

thead th {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--surface-muted);
}

/* A single link in a data cell is a standalone target, not an inline one (SC 2.5.8). */
td > a {
  display: inline-block;
  min-height: 24px;
  padding: 1px 0;
  line-height: 22px;
  font-weight: 500;
}

td form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

td textarea {
  min-height: 40px;
  min-width: 160px;
}

.table-empty {
  color: var(--text-muted);
  padding: 24px 16px;
  text-align: center;
}

/* ------------------------------------------------------ definition lists ---- */

dl {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 0;
  margin: 0;
}

dt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--border);
}

dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

dl > dt:last-of-type,
dl > dd:last-of-type {
  border-bottom: 0;
}

/* -------------------------------------------------------------- badges ---- */

/* Ticket priority and CAPA status share a status vocabulary, so pairs that mean the same thing
   are declared once rather than kept in step by hand. Their pill silhouette remains intentionally
   distinct from interactive controls. */
.badge {
  display: inline-block;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.badge--stage,
.badge--capa-in_progress {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.badge--closed,
.badge--capa-complete {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--neutral);
}

.badge--urgent,
.badge--high {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.badge--medium,
.badge--capa-open {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
}

.badge--low {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}

/* --------------------------------------------------------- empty states ---- */

.empty-state {
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 20px;
  text-align: center;
}

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

.plain-list > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.plain-list > li:last-child {
  border-bottom: 0;
}

.plain-list ul {
  margin: 8px 0 0;
}

/* ---------------------------------------------------------- pagination ---- */

/* Previous/Next is a link when the list is filtered by query string and a form button when it
   is a title search, because the search is a POST. Both are the same control to the reader, so
   both take the quiet treatment defined in the buttons section above. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.pagination span {
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* ------------------------------------------------------------ auth pages ---- */

.auth-page main {
  max-width: 460px;
  padding-top: 56px;
}

.auth-card {
  padding: 24px;
}

.auth-card h1 {
  font-size: 1.35rem;
}

.auth-card form p {
  display: block;
}

.auth-card button {
  width: 100%;
  margin-top: 8px;
}

.auth-links {
  margin: 16px 0 0;
  font-size: var(--fs-md);
}

.auth-links p {
  margin: 0 0 6px;
}

/* ----------------------------------------------------------- error pages ---- */

.error-page .page-actions {
  margin-bottom: 0;
}

/* ----------------------------------------------------- visual RCA builder ---- */

.rca-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.rca-tree-surface,
.rca-node-details {
  min-width: 0;
}

.rca-tree-surface > h2,
.rca-node-details > h2 {
  margin-top: 0;
}

.rca-tree-canvas {
  min-height: 360px;
  overflow: auto;
  padding: 24px;
}

.visual-cause-tree,
.visual-cause-tree ul {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: max-content;
  margin: 0;
  padding: 24px 0 0;
  list-style: none;
}

.visual-cause-tree {
  padding-top: 0;
}

.visual-cause-tree li {
  position: relative;
  padding: 24px 8px 0;
  text-align: center;
}

.visual-cause-tree > li {
  padding-top: 0;
}

.visual-cause-tree li::before,
.visual-cause-tree li::after {
  position: absolute;
  top: 0;
  width: 50%;
  height: 24px;
  border-top: 2px solid var(--border-strong);
  content: "";
}

.visual-cause-tree li::before {
  right: 50%;
}

.visual-cause-tree li::after {
  left: 50%;
  border-left: 2px solid var(--border-strong);
}

.visual-cause-tree li:only-child::before,
.visual-cause-tree li:only-child::after,
.visual-cause-tree > li::before,
.visual-cause-tree > li::after {
  display: none;
}

.visual-cause-tree li:only-child {
  padding-top: 0;
}

.visual-cause-tree li:first-child::before,
.visual-cause-tree li:last-child::after {
  border-top: 0;
}

.visual-cause-tree li:last-child::before {
  border-right: 2px solid var(--border-strong);
  border-radius: 0 var(--radius) 0 0;
}

.visual-cause-tree li:first-child::after {
  border-radius: var(--radius) 0 0;
}

.visual-cause-tree ul::before {
  position: absolute;
  top: 0;
  left: 50%;
  height: 24px;
  border-left: 2px solid var(--border-strong);
  content: "";
}

.rca-graph-node {
  display: grid;
  gap: 4px;
  align-content: center;
  width: 190px;
  min-height: 88px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 2px solid;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

/* The selection ring, not decoration: it is the only indication of which node the details
   panel is describing. */
.rca-graph-node.is-selected {
  box-shadow: 0 0 0 3px var(--accent);
}

.rca-graph-node__state {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rca-graph-node strong {
  overflow-wrap: anywhere;
}

.rca-tree-legend__swatch {
  width: 14px;
  height: 14px;
  border: 2px solid;
  border-radius: var(--radius-sm);
}

/* Each cause state is one fill, declared once for the node in the tree and for the swatch in
   the legend that explains it. Declaring them apart let the two drift. */
.rca-graph-node,
.rca-tree-legend__swatch--candidate {
  background: var(--warn-soft);
  border-color: #a66d00;
}

.rca-graph-node {
  color: #4c3100;
}

.rca-graph-node:hover {
  background: #fae9bd;
  color: #3e2900;
}

.rca-graph-node--problem,
.rca-tree-legend__swatch--problem {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.rca-graph-node--problem {
  color: #671616;
}

.rca-graph-node--problem:hover {
  background: #f6d9d5;
  color: #571212;
}

.rca-graph-node--root,
.rca-tree-legend__swatch--root {
  background: #f1eafa;
  border-color: #684091;
}

.rca-graph-node--root {
  color: #48276a;
}

.rca-graph-node--root:hover {
  background: #e5d8f4;
  color: #3b2058;
}

.rca-graph-node--eliminated,
.rca-tree-legend__swatch--eliminated {
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

.rca-graph-node--eliminated {
  color: #46515d;
}

.rca-graph-node--eliminated:hover {
  background: #e9edf1;
  color: #333d47;
}

.rca-tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 20px;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  list-style: none;
}

.rca-tree-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rca-node-details h3,
.rca-root-details h3 {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.rca-action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin: 16px 0;
}

.rca-action {
  align-self: start;
  min-width: 0;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rca-action > summary {
  padding: 12px 16px;
  color: var(--accent-dark);
  font-weight: 600;
  cursor: pointer;
}

.rca-action > summary:hover {
  background: var(--accent-soft);
}

.rca-action[open] > summary {
  border-bottom: 1px solid var(--border);
}

.rca-action > form,
.rca-action > .hint {
  margin: 0;
  padding: 16px;
}

.rca-action > form p:first-child {
  margin-top: 0;
}

.rca-direct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.rca-direct-actions form,
.rca-evidence-list form {
  margin: 0;
}

.rca-evidence-list li {
  margin-bottom: 12px;
}

.evidence-upload-status {
  margin: 12px 0;
}

.rca-node-details dl {
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr);
}

.builder-capa-detail {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.builder-capa-detail h4,
.rca-root-details h4 {
  margin: 0 0 12px;
}

.builder-capa-detail form + form {
  margin-top: 12px;
}

/* -------------------------------------------------------------- mobile ---- */

@media (max-width: 720px) {
  .rca-tree-canvas {
    min-height: 240px;
    padding: 16px 8px;
  }

  main {
    padding: 20px 16px 48px;
  }

  .site-header__inner,
  .messages {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Clearance for the absolutely positioned logo: 16px offset + 34px mark + 8px gap. */
  .site-header__inner {
    padding-right: 58px;
  }

  .site-header__logo {
    right: 16px;
  }

  /* Brand and account utilities share the first row; navigation wraps below. */
  .site-nav {
    order: 3;
    width: 100%;
    margin-right: 0;
  }

  .site-header__brand {
    margin-right: auto;
  }

  h1 {
    font-size: 1.35rem;
  }

  .card,
  .filters,
  .auth-card {
    padding: 16px;
  }

  form p,
  .filters p {
    display: block;
  }

  form p > label {
    display: block;
    margin-bottom: 16px;
  }

  form p > label:last-child {
    margin-bottom: 0;
  }

  dl {
    grid-template-columns: 1fr;
  }

  dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  dd {
    padding-top: 2px;
  }

  th,
  td {
    padding: 10px 12px;
  }
}

/* --------------------------------------------------------------- print ---- */

@media print {
  body {
    background: var(--surface);
  }

  .site-header,
  .page-actions,
  .backlink,
  form {
    display: none;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .card,
  .card .card {
    border: 0;
    padding: 0;
  }
}