/* 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;
  --on-accent: #ffffff;
  --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;
  --field-hover: #7d8b98;
  --placeholder: #6a7683;

  /* 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;
}

/* Themes override the tokens above. Northstar is :root, so it needs no selector.
   Each theme keeps white or near-black text on its accent so buttons stay legible. */

html[data-ui-theme="service"] {
  --page: #eef2f6;
  --surface: #ffffff;
  --surface-muted: #f5f8fb;
  --border: #cdd6e0;
  --border-strong: #8fa0b3;
  --text: #102033;
  --text-muted: #4d5d70;
  --accent: #0c4f96;
  --accent-dark: #083868;
  --on-accent: #ffffff;
  --accent-soft: #e5f0fa;
  --accent-line: #b5d0ec;
  --header: #07182c;
}

html[data-ui-theme="shop"] {
  --page: #f6f3ef;
  --surface: #fffdfb;
  --surface-muted: #f3eee8;
  --border: #ddd4ca;
  --border-strong: #a8988a;
  --text: #241c16;
  --text-muted: #5e5148;
  --accent: #8a3412;
  --accent-dark: #6e280e;
  --on-accent: #ffffff;
  --accent-soft: #f8efe8;
  --accent-line: #e0c2ae;
  --header: #1c1612;
  --warn: #6e4a00;
  --warn-soft: #f8efd8;
  --warn-line: #d9c48a;
}

html[data-ui-theme="night"] {
  color-scheme: dark;
  --page: #10161e;
  --surface: #18212c;
  --surface-muted: #121a24;
  --border: #2e3c4d;
  --border-strong: #516278;
  --text: #e7eef6;
  --text-muted: #b7c3d1;
  --text-inverse: #f4f7fb;
  --accent: #8ebcf2;
  --accent-dark: #b7d4f8;
  --on-accent: #0d1520;
  --accent-soft: #1a2c42;
  --accent-line: #3d628c;
  --danger: #f3b4b0;
  --danger-soft: #3c2222;
  --danger-line: #8a4e4a;
  --warn: #f0d59a;
  --warn-soft: #3a3018;
  --warn-line: #8a7040;
  --ok: #b7e0c6;
  --ok-soft: #173024;
  --ok-line: #3f6d52;
  --neutral: #c5d0dc;
  --header: #0b1017;
  --field-hover: #6d8298;
  --placeholder: #9aafc2;
}

/* Layouts. Northstar is the default stylesheet, so it has no selector. */

html[data-ui-look="spacious"] {
  --radius: 18px;
  --radius-sm: 8px;
  --measure: 1180px;
}

html[data-ui-look="spacious"] body {
  font-size: 17px;
  line-height: 1.65;
}

html[data-ui-look="spacious"] main {
  padding: 48px 28px 96px;
}

html[data-ui-look="spacious"] h1 {
  font-size: 2.05rem;
  letter-spacing: -0.03em;
  border-bottom: 0;
  padding-bottom: 0;
}

html[data-ui-look="spacious"] h2 {
  font-size: 1.35rem;
}

html[data-ui-look="spacious"] .site-header {
  border-bottom-width: 0;
}

html[data-ui-look="spacious"] .site-header__inner {
  padding-top: 16px;
  padding-bottom: 16px;
}

html[data-ui-look="spacious"] .card,
html[data-ui-look="spacious"] .auth-card,
html[data-ui-look="spacious"] .rca-tree-canvas {
  padding: 28px;
  border: 0;
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.04), 0 18px 40px rgba(16, 32, 51, 0.06);
}

html[data-ui-look="spacious"] button,
html[data-ui-look="spacious"] input[type="submit"],
html[data-ui-look="spacious"] .button-link,
html[data-ui-look="spacious"] .page-actions a,
html[data-ui-look="spacious"] .pagination a,
html[data-ui-look="spacious"] .pagination button,
html[data-ui-look="spacious"] .choice-list > li > a {
  border-radius: 999px;
}

html[data-ui-look="spacious"] input[type="text"],
html[data-ui-look="spacious"] input[type="search"],
html[data-ui-look="spacious"] input[type="email"],
html[data-ui-look="spacious"] input[type="password"],
html[data-ui-look="spacious"] select,
html[data-ui-look="spacious"] textarea {
  border-radius: 12px;
}

html[data-ui-look="spacious"] .rca-tree-canvas {
  min-height: 440px;
}

html[data-ui-look="focus"] {
  --radius: 10px;
  --measure: 880px;
}

html[data-ui-look="focus"] h1 {
  border-bottom: 0;
}

html[data-ui-look="focus"] .site-header {
  border-bottom-width: 0;
}

html[data-ui-look="focus"] .site-header__version,
html[data-ui-look="focus"] .site-header__user {
  opacity: 0.72;
}

html[data-ui-look="focus"] .rca-tree-canvas {
  min-height: 68vh;
  border-color: transparent;
  background: transparent;
}

html[data-ui-look="focus"] .rca-legend > summary {
  margin: 0 0 12px;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------- 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;
}

/* The IPR page states its conclusion next to the way in to the analysis. The chip shares the
   40px control height of the actions beside it, and a long statement is clipped with an
   ellipsis rather than pushing the row; the full text stays in the title attribute. */
.root-cause-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: min(100%, 420px);
  padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-ui);
  line-height: 1.3;
}

.root-cause-chip__label {
  flex: none;
  color: var(--accent-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}

.root-cause-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Solved = every linked CAPA is complete. Green fill plus a pill silhouette so the state is
   not color-alone: the chip roundness and "Solved" label both change with the background. */
.root-cause-chip--solved {
  background: var(--ok-soft);
  border-color: var(--ok);
  border-radius: 999px;
  border-width: 2px;
}

.root-cause-chip--solved .root-cause-chip__label {
  color: var(--ok);
}

.root-cause-chip--none {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-muted);
}

.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;
}

.appearance-option small {
  display: block;
  font-weight: 400;
  margin-top: 2px;
}

/* 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: var(--field-hover);
}

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: var(--placeholder);
  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;
}

/* Search: the compact form on the applications home page and in Documents. */
.search-form {
  margin: 0 0 20px;
  max-width: 28rem;
}

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

.search-form__field {
  flex: 1 1 12rem;
  min-width: 0;
  margin-bottom: 0;
}

.search-form__controls > button,
.search-form__controls > a {
  flex: 0 0 auto;
}

/* Results come grouped: one full-width row per category, largest first. Each row is a button
   that lists every result in its category. */
.search-results {
  max-width: 48rem;
  margin: 0 0 24px;
}

.search-categories {
  display: grid;
  gap: 8px;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-categories > li {
  margin: 0;
}

.search-category {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--accent-dark);
  text-align: left;
}

.search-category:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.search-category__count {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 2px 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
}

.search-results__back {
  margin: 0 0 12px;
}

.search-hits {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.search-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.search-hit:first-child {
  border-top: 0;
}

.search-hit__text {
  flex: 1 1 16rem;
  min-width: 0;
}

/* A standalone link in a list, so it keeps a 24px-high target (SC 2.5.8). */
.search-hit__title {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
  font-weight: 500;
}

.search-hit__meta {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.search-hit__download {
  flex: 0 0 auto;
}

/* Square application tiles. The name under each tile stays visible with or without a picture. */
.app-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 128px;
  color: var(--text);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.app-icon:hover {
  color: var(--accent-dark);
}

.app-icon__tile {
  display: block;
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.app-icon__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-icon:hover .app-icon__tile {
  border-color: var(--accent);
}

.app-icon__name {
  display: block;
}

.app-icon__caption {
  display: block;
  margin-top: -2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* A tile without a supplied picture shows the application's initial. */
.app-icon__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-size: 2.5rem;
  font-weight: 600;
}

.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,
.search-form__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(--on-accent);
  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(--on-accent);
}

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,
.search-form__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,
.search-form__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);
}

/* ------------------------------------------------------ problem folder ---- */

/* The collapsible "Previous IPRs" folder beneath the newest problems on the Open and Resolved
   lists. Its summary takes the same disclosure treatment as .rca-action, so a folded section
   reads the same everywhere. The table and pagination inside sit flush in the folder's frame. */
.problem-folder {
  margin: 0 0 20px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

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

.problem-folder > summary:hover {
  background: var(--accent-soft);
}

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

.problem-folder > .table-scroll {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* With no pagination beneath it the table is the folder's bottom edge, so it takes the corners.
   Clipping the folder instead would also clip the focus outlines of the controls inside it. */
.problem-folder > .table-scroll:last-child {
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

.problem-folder > .pagination {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------ 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;
}

/* Solved root causes keep the root status class and add --solved: green fill and a circular
   silhouette so completion is obvious in the tree without opening the details panel. */
.rca-graph-node--solved,
.rca-tree-legend__swatch--solved {
  background: var(--ok-soft);
  border-color: var(--ok);
}

.rca-graph-node--solved {
  color: var(--ok);
  border-radius: 999px;
}

.rca-graph-node--solved:hover {
  background: #d7ebde;
  color: #0f3d22;
}

.rca-tree-legend__swatch--solved {
  border-radius: 999px;
}

.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);
}

.rca-solved-state--yes {
  display: inline-block;
  padding: 2px 10px;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: 999px;
  color: var(--ok);
  font-weight: 600;
}

.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;
}

/* ------------------------------------------------- RCA draft assistant ---- */

/* The assistant is optional and advisory, so it is drawn as a quiet side note: a hairline
   rule, muted text, small controls. Nothing here should compete with the RCA's own actions. */
.rca-assist {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-md);
}

.rca-node-details .rca-assist h3,
.rca-node-details .rca-assist h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
  padding-top: 0;
  border-top: 0;
  font-size: 1rem;
}

.rca-assist__tag {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.rca-assist form {
  margin: 0;
}

.rca-assist .btn-quiet {
  min-height: 32px;
  padding: 4px 12px;
  font-size: var(--fs-sm);
}

.rca-assist__added {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius);
  color: var(--ok);
}

.rca-assist__added p {
  margin: 0;
}

.rca-assist__list {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.rca-assist__node {
  padding: 8px 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rca-assist__node--depth-1 {
  margin-left: 24px;
}

.rca-assist__node--depth-2 {
  margin-left: 48px;
}

.rca-assist__node--added,
.rca-assist__node--edited,
.rca-assist__node--used {
  border-color: var(--ok-line);
}

/* The two problem-level choices sit side by side and wrap on narrow screens. */
.rca-assist__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rca-assist__kind,
.rca-assist__recognised {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.rca-assist--actions {
  margin-top: 16px;
}

.rca-assist__node--undone,
.rca-assist__node--removed {
  color: var(--text-muted);
}

.rca-assist__statement {
  margin: 0;
  font-weight: 500;
}

.rca-assist__branch {
  margin-right: 4px;
  color: var(--text-muted);
}

.rca-assist__check {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.rca-capa-result {
  display: grid;
  gap: 2px;
  margin: 0 0 6px;
  font-size: var(--fs-sm);
}

.rca-capa-more > summary {
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.rca-capa-more p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.rca-assist__meta {
  margin: 2px 0 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.rca-assist__actions,
.rca-assist__footer,
.rca-assist__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.rca-assist__footer {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Feedback and housekeeping controls read as small text links, but keep a 24px target. */
.rca-assist__rating,
.rca-assist__why > summary,
.rca-assist__edit > summary {
  min-height: 24px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.rca-assist__rating:hover {
  background: transparent;
  color: var(--accent);
}

.rca-assist__rating[aria-pressed="true"] {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.rca-assist__why,
.rca-assist__edit {
  display: inline-block;
}

.rca-assist__why[open],
.rca-assist__edit[open] {
  display: block;
  flex-basis: 100%;
}

.rca-assist__why form,
.rca-assist__edit form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.rca-assist__why textarea {
  min-height: 0;
}

.rca-assist__edit select {
  max-width: 100%;
}

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

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

  .rca-assist__node--depth-1 {
    margin-left: 12px;
  }

  .rca-assist__node--depth-2 {
    margin-left: 24px;
  }

  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;
  }
}

/* ------------------------------------------------ RCA helper chat ---- */

/* One compact card in the page flow above the tree, so it never covers a control: a heading, a
   message box and a few quick replies. The conversation folds away on later visits. */
.rca-chat {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin: 0 0 16px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rca-chat[aria-busy="true"] {
  opacity: 0.75;
}

.rca-chat__head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
}

.rca-chat__title {
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--fs-md);
}

.rca-chat__lede,
.rca-chat__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.rca-chat__history > summary {
  padding: 2px 0;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.rca-chat__log {
  display: grid;
  gap: 8px;
  max-height: 24rem;
  margin: 8px 0 0;
  padding: 0 2px 0 0;
  overflow-y: auto;
  list-style: none;
}

.rca-chat__line {
  display: grid;
  gap: 4px;
  max-width: 92%;
  padding: 6px 10px;
  font-size: var(--fs-sm);
}

.rca-chat__line--you {
  justify-self: end;
  background: var(--accent-soft);
  border-radius: 10px 10px 2px 10px;
}

.rca-chat__line--helper {
  justify-self: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px 10px 10px 2px;
}

.rca-chat__text {
  margin: 0;
  overflow-wrap: anywhere;
}

.rca-chat__items {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 1.5rem;
}

.rca-chat__item {
  overflow-wrap: anywhere;
}

.rca-chat__item--depth-1 {
  margin-left: 1rem;
}

.rca-chat__item--depth-2 {
  margin-left: 2rem;
}

.rca-chat__item--depth-3 {
  margin-left: 3rem;
}

.rca-chat__tag {
  display: inline-block;
  padding: 0 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.rca-chat__composer {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rca-chat__composer input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 120px;
}

.rca-chat__actions,
.rca-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rca-chat__actions {
  gap: 6px 14px;
}

.rca-chat__undo,
.rca-chat__clear {
  display: flex;
  gap: 6px;
  align-items: center;
}

@media (max-width: 720px) {
  .rca-chat {
    padding: 10px;
  }

  .rca-chat__line {
    max-width: 100%;
  }
}

/* Corner helper: a button until it is opened, then a panel over the tree. The default
   placement stays in normal flow above the tree and does not use these rules. */
.rca-chat--corner {
  position: fixed;
  z-index: 20;
  right: 20px;
  bottom: 20px;
  width: auto;
  max-width: min(360px, calc(100vw - 24px));
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.rca-chat--corner:has(.rca-chat__dock[open]) {
  width: min(360px, calc(100vw - 24px));
}

.rca-chat__dock {
  margin: 0;
}

.rca-chat__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-left: auto;
  padding: 10px 18px;
  list-style: none;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 39, 61, 0.28);
  font-weight: 600;
  cursor: pointer;
}

.rca-chat__launcher::-webkit-details-marker,
.rca-chat__launcher::marker {
  content: "";
  display: none;
}

.rca-chat__launcher-close {
  display: none;
}

.rca-chat--corner .rca-chat__dock[open] {
  position: relative;
  display: grid;
  gap: 8px;
  max-height: min(70vh, 640px);
  padding: 12px 14px 14px;
  overflow: auto;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(16, 32, 51, 0.18);
}

.rca-chat--corner .rca-chat__dock[open] .rca-chat__launcher {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 32px;
  margin: 0;
  padding: 4px 10px;
  color: var(--accent-dark);
  background: transparent;
  border-radius: var(--radius);
  box-shadow: none;
}

.rca-chat--corner .rca-chat__dock[open] .rca-chat__launcher-open {
  display: none;
}

.rca-chat--corner .rca-chat__dock[open] .rca-chat__launcher-close {
  display: inline;
}

.rca-chat--corner .rca-chat__head {
  padding-right: 64px;
}

.rca-chat--corner .rca-chat__log {
  max-height: 16rem;
}

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

@media (max-width: 720px) {
  .rca-chat--corner {
    right: 12px;
    bottom: 12px;
  }
}

/* --------------------------------------------- dashboard and expiry ---- */

/* The home dashboard sits under the applications: one column on a phone, up to three side by
   side on a wide screen. */
.dashboard {
  margin-top: 32px;
}

.dashboard__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  align-items: start;
}

.dashboard__section {
  min-width: 0;
  margin: 0;
}

.dashboard__intro,
.dashboard-list__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.dashboard__more {
  margin: 12px 0 0;
}

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

.dashboard-list > li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

/* A list entry's link is a standalone target, not an inline one (SC 2.5.8). */
.dashboard-list > li > a,
.calendar-nav a,
.dashboard__more a {
  display: inline-block;
  min-height: 24px;
  line-height: 22px;
}

.live-dates__note[hidden] {
  display: none;
}

/* How close an expiry or due date is: the same danger and warning trios as the badges. */
.expiry,
.due {
  font-weight: 600;
}

.expiry--expired,
.due--overdue {
  color: var(--danger);
}

.expiry--today,
.expiry--soon,
.due--today {
  color: var(--warn);
}

/* Documents List / Calendar: two views of one page, the current one filled. */
.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.view-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.view-switch a:hover {
  background: var(--accent-soft);
}

.view-switch a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.calendar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 16px;
}

/* The month grid keeps seven usable columns and scrolls inside its region on a phone. */
.expiry-grid {
  min-width: 560px;
  table-layout: fixed;
}

.expiry-grid thead th {
  padding: 8px 6px;
  text-align: center;
}

.expiry-grid abbr {
  text-decoration: none;
}

.expiry-grid .expiry-day {
  height: 84px;
  padding: 6px;
  border: 1px solid var(--border);
}

tbody tr:hover td.expiry-day {
  background: inherit;
}

.expiry-grid .expiry-day--outside {
  background: var(--surface-muted);
}

.expiry-grid .expiry-day--past {
  color: var(--text-muted);
}

.expiry-grid .expiry-day--window {
  background: var(--warn-soft);
}

.expiry-grid .expiry-day--today {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.expiry-day__number {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.expiry-day__entries {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

/* Positioned so its screen-reader text stays inside the scrolling month grid instead of
   widening the page from a right-hand column. */
.expiry-chip {
  position: relative;
  display: block;
  min-height: 24px;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expiry-chip--expired {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.expiry-chip--today,
.expiry-chip--soon {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
}

/* Text for screen readers only (speaker labels and live announcements). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

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

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

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

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

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