/* axiom — three styles (data-look on <html>: neo, sobrio, editorial), each
   light or dark (data-theme="light" | "dark", or the system's). The rules
   below draw only with these tokens: a style just redefines them.

   Shadows and hover, the same way everywhere: what is clickable and has a
   shadow lifts on hover (--lift, --shadow-hover); what has no shadow changes
   its background or border, and never gains one. */

:root {
  /* ── neo: neobrutalism — thick ink borders, hard offset shadows, pastels ── */
  --ink: #111111;
  --paper: #fffdf6;
  --canvas: #f6efdf;
  --side: #b9e4c9;
  --muted: #55524a;
  --line: var(--ink);            /* borders */
  --line-hover: var(--ink);
  --edge: var(--ink);            /* the diagrams' arrows */
  --hover-bg: var(--paper);      /* what has no shadow, on hover */

  --yellow: #ffd84d;
  --blue: #a7d8ff;
  --green: #a8e6b8;
  --pink: #ffc2e2;
  --lilac: #d4c4ff;
  --red: #ff9b8a;
  --orange: #ffc285;
  --on-color: #111111;           /* text on those fills */
  --on-color-muted: rgba(17, 17, 17, 0.72);
  --chip-line: #111111;          /* a colored chip's border */

  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--line);       /* the other styles: the button's own color */
  --primary-bg: var(--yellow);
  --primary-fg: var(--on-color);
  --nav-active-bg: var(--ink);
  --nav-active-fg: var(--paper);
  --focus: #3b82f6;
  --select: var(--ink);          /* the diagram piece picked */

  --bw: 2.5px;
  --bw-sm: 2px;
  --bw-strong: 3px;
  --b: var(--bw) solid var(--line);
  --b-sm: var(--bw-sm) solid var(--line);
  --shadow: 5px 5px 0 var(--line);
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow-lg: 7px 7px 0 var(--line);
  --shadow-hover: 7px 7px 0 var(--line);
  --shadow-sm-hover: 5px 5px 0 var(--line);
  --shadow-press: 0 0 0 var(--line);
  --lift: translate(-2px, -2px);
  --press: translate(3px, 3px);
  --radius: 10px;
  --radius-sm: 8px;
  --btn-radius: 999px;
  --chip-radius: 13px;           /* a pill on one line, tidy corners on two */

  --node-bw: 2.5px;
  --node-bw-strong: 3.5px;
  --node-bw-hover: 4px;
  --node-shadow: drop-shadow(3px 3px 0 var(--line));
  --edge-w: 2.5px;

  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: var(--mono);
  --head-weight: 800;
  --head-spacing: -0.01em;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2ecdd;
    --paper: #1f1e1b;
    --canvas: #151513;
    --side: #1c2b22;
    --muted: #b3ad9f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #f2ecdd;
  --paper: #1f1e1b;
  --canvas: #151513;
  --side: #1c2b22;
  --muted: #b3ad9f;
  color-scheme: dark;
}

/* ── sobrio: thin lines, soft shadows, quiet tints ── */
:root[data-look="sobrio"] {
  --btn-line: initial;
  --ink: #1d2127;
  --paper: #ffffff;
  --canvas: #f4f5f7;
  --side: #eceef2;
  --muted: #5d6470;
  --line: #d9dce1;
  --line-hover: #b4bac3;
  --edge: #7b8290;
  --hover-bg: #e4e7ec;
  --yellow: #fdf0c4;
  --blue: #dbeafb;
  --green: #dcf1e2;
  --pink: #fae3ee;
  --lilac: #ebe5fb;
  --red: #fbdcd6;
  --orange: #fde5cd;
  --on-color: #1d2127;
  --on-color-muted: rgba(29, 33, 39, 0.72);
  --chip-line: rgba(29, 33, 39, 0.14);
  --btn-bg: #1d2127;
  --btn-fg: #ffffff;
  --primary-bg: #2f5bd3;
  --primary-fg: #ffffff;
  --nav-active-bg: #ffffff;
  --nav-active-fg: #1d2127;
  --focus: #2f5bd3;
  --select: #2f5bd3;
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.08);
  --shadow-hover: 0 4px 8px rgba(16, 24, 40, 0.08), 0 10px 24px rgba(16, 24, 40, 0.10);
  --shadow-sm-hover: 0 2px 6px rgba(16, 24, 40, 0.14);
  --shadow-press: 0 1px 1px rgba(16, 24, 40, 0.10);
  --lift: translateY(-1px);
  --press: translateY(0);
  --radius: 12px;
  --radius-sm: 8px;
  --btn-radius: 8px;
  --chip-radius: 999px;
  --node-bw: 1.25px;
  --node-bw-strong: 2px;
  --node-bw-hover: 2.5px;
  --node-shadow: drop-shadow(0 1px 2px rgba(16, 24, 40, 0.14));
  --edge-w: 1.6px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: var(--sans);
  --head-weight: 700;
  --head-spacing: -0.02em;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="sobrio"]:not([data-theme="light"]) {
    --ink: #e6e8eb; --paper: #1b1e23; --canvas: #121418; --side: #16191d; --muted: #9aa1ac;
    --line: #2e333b; --line-hover: #4a515c; --edge: #8b93a0; --hover-bg: #23272e;
    --yellow: #473c16; --blue: #1d3350; --green: #1b3a28; --pink: #45213a;
    --lilac: #30284f; --red: #4a2320; --orange: #4a3018;
    --on-color: #eef0f3; --on-color-muted: rgba(238, 240, 243, 0.74); --chip-line: rgba(255, 255, 255, 0.12);
    --btn-bg: #e6e8eb; --btn-fg: #121418; --primary-bg: #6189f2; --primary-fg: #0d1016;
    --nav-active-bg: #23272e; --nav-active-fg: #e6e8eb; --focus: #6189f2; --select: #6189f2;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.5);
    --shadow-sm-hover: 0 3px 8px rgba(0, 0, 0, 0.5); --shadow-press: 0 1px 1px rgba(0, 0, 0, 0.4);
    --node-shadow: none;
  }
}
:root[data-look="sobrio"][data-theme="dark"] {
  --ink: #e6e8eb; --paper: #1b1e23; --canvas: #121418; --side: #16191d; --muted: #9aa1ac;
  --line: #2e333b; --line-hover: #4a515c; --edge: #8b93a0; --hover-bg: #23272e;
  --yellow: #473c16; --blue: #1d3350; --green: #1b3a28; --pink: #45213a;
  --lilac: #30284f; --red: #4a2320; --orange: #4a3018;
  --on-color: #eef0f3; --on-color-muted: rgba(238, 240, 243, 0.74); --chip-line: rgba(255, 255, 255, 0.12);
  --btn-bg: #e6e8eb; --btn-fg: #121418; --primary-bg: #6189f2; --primary-fg: #0d1016;
  --nav-active-bg: #23272e; --nav-active-fg: #e6e8eb; --focus: #6189f2; --select: #6189f2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.5);
  --shadow-sm-hover: 0 3px 8px rgba(0, 0, 0, 0.5); --shadow-press: 0 1px 1px rgba(0, 0, 0, 0.4);
  --node-shadow: none;
}

/* ── editorial: serif titles, warm paper, hairlines, no shadows ── */
:root[data-look="editorial"] {
  --btn-line: initial;
  --ink: #1f1a14;
  --paper: #fffcf5;
  --canvas: #f3ede1;
  --side: #ebe3d3;
  --muted: #6b6155;
  --line: #d3c8b4;
  --line-hover: #8f8270;
  --edge: #5b5146;
  --hover-bg: #e4dac6;
  --yellow: #f3e2b3;
  --blue: #d6e2ea;
  --green: #dbe6d3;
  --pink: #efd9d6;
  --lilac: #e2dbea;
  --red: #efcfc6;
  --orange: #f1dcc2;
  --on-color: #1f1a14;
  --on-color-muted: rgba(31, 26, 20, 0.72);
  --chip-line: rgba(31, 26, 20, 0.2);
  --btn-bg: #1f1a14;
  --btn-fg: #fffcf5;
  --primary-bg: #7a2e1f;
  --primary-fg: #fffaf2;
  --nav-active-bg: #1f1a14;
  --nav-active-fg: #fffcf5;
  --focus: #7a2e1f;
  --select: #7a2e1f;
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: none;
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  --lift: none;
  --press: none;
  --radius: 4px;
  --radius-sm: 3px;
  --btn-radius: 4px;
  --chip-radius: 3px;
  --node-bw: 1.25px;
  --node-bw-strong: 2px;
  --node-bw-hover: 2.5px;
  --node-shadow: none;
  --edge-w: 1.5px;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Source Serif 4", Georgia, serif;
  --head-weight: 700;
  --head-spacing: 0;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="editorial"]:not([data-theme="light"]) {
    --ink: #ece4d6; --paper: #1e1b17; --canvas: #151310; --side: #1a1714; --muted: #a89d8c;
    --line: #3d362d; --line-hover: #6d6254; --edge: #a89d8c; --hover-bg: #28241f;
    --yellow: #4a3d1c; --blue: #23323b; --green: #26352a; --pink: #3e2826;
    --lilac: #312b3b; --red: #4a2620; --orange: #45321f;
    --on-color: #f2ebdf; --on-color-muted: rgba(242, 235, 223, 0.74); --chip-line: rgba(242, 235, 223, 0.2);
    --btn-bg: #ece4d6; --btn-fg: #151310; --primary-bg: #c0674f; --primary-fg: #151310;
    --nav-active-bg: #ece4d6; --nav-active-fg: #151310; --focus: #c0674f; --select: #c0674f;
  }
}
:root[data-look="editorial"][data-theme="dark"] {
  --ink: #ece4d6; --paper: #1e1b17; --canvas: #151310; --side: #1a1714; --muted: #a89d8c;
  --line: #3d362d; --line-hover: #6d6254; --edge: #a89d8c; --hover-bg: #28241f;
  --yellow: #4a3d1c; --blue: #23323b; --green: #26352a; --pink: #3e2826;
  --lilac: #312b3b; --red: #4a2620; --orange: #45321f;
  --on-color: #f2ebdf; --on-color-muted: rgba(242, 235, 223, 0.74); --chip-line: rgba(242, 235, 223, 0.2);
  --btn-bg: #ece4d6; --btn-fg: #151310; --primary-bg: #c0674f; --primary-fg: #151310;
  --nav-active-bg: #ece4d6; --nav-active-fg: #151310; --focus: #c0674f; --select: #c0674f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); }
h1, h2, h3 { font-family: var(--head); font-weight: var(--head-weight); line-height: 1.15; letter-spacing: var(--head-spacing); }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 20px; }
h2 { font-size: 1.25rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 16px 0 8px; }
p { margin: 0 0 10px; }
/* The page takes the whole width; only running text keeps a readable line */
.muted, .hint { color: var(--muted); }
.hint { font-size: 0.93rem; }
/* On a colored fill, the text for colors */
:is(.on-color, .yellow, .blue, .green, .pink, .lilac, .red, .orange) :is(.muted, .hint) {
  color: var(--on-color-muted);
}
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; }

/* ── Shell ─────────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);  /* minmax: wide tables scroll, not the page */
  min-height: 100vh;
  /* The sidebar's color and edge run the whole height, however long the page */
  background: linear-gradient(90deg, var(--side) 0 calc(220px - var(--bw)), var(--line) calc(220px - var(--bw)) 220px, transparent 220px);
}

.side {
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--head-weight) 1.35rem var(--head);
  text-decoration: none;
}
.brand .logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--primary-bg);
  color: var(--primary-fg);
  border: var(--b);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.brand .logo .icon { width: 24px; height: 24px; }
/* A light 1px border around a solid tile anti-aliases into a pale, jagged
   halo at the rounded corners: in sobrio the border takes the tile's color */
:root[data-look="sobrio"] .brand .logo { border-color: var(--primary-bg); }
.side nav { display: flex; flex-direction: column; gap: 6px; }
.side nav a {
  display: block;
  padding: 8px 12px;
  border: var(--bw) solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.side nav a:hover { border-color: var(--line-hover); background: var(--hover-bg); }
.side nav a.active { background: var(--nav-active-bg); color: var(--nav-active-fg); border-color: var(--line); }
.side .foot { margin-top: auto; font: 600 0.78rem var(--mono); color: var(--muted); }

main { padding: 36px clamp(16px, 3vw, 48px) 80px; width: 100%; min-width: 0; }

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: none; }
  .side {
    position: relative;
    height: auto;
    flex-direction: row;
    align-items: center;
    background: var(--side);
    border-bottom: var(--b);
    padding: 12px 16px;
  }
  .side nav { flex-direction: row; margin-left: auto; }
  .side nav a { white-space: nowrap; }
  .side .foot { display: none; }
  main { padding-top: 24px; }
}
@media (max-width: 660px) {
  .side { flex-wrap: wrap; gap: 10px; position: relative; }
  .side nav { margin-left: 0; width: 100%; gap: 4px; order: 4; flex-wrap: wrap; }
  .side nav a { flex: 1; text-align: center; padding: 6px 4px; font-size: 0.92rem; }
}
@media (max-width: 400px) {
  .side nav { gap: 2px; }
  .side nav a { padding: 6px 2px; font-size: 0.84rem; letter-spacing: -0.01em; }
}

/* ── Building blocks ───────────────────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 0 0 22px;
}
.card > :last-child { margin-bottom: 0; }
.on-color, .yellow, .blue, .green, .pink, .lilac, .red, .orange { color: var(--on-color); }
.yellow { background: var(--yellow); }
.blue { background: var(--blue); }
.green { background: var(--green); }
.pink { background: var(--pink); }
.lilac { background: var(--lilac); }
.red { background: var(--red); }
.orange { background: var(--orange); }
.paper { background: var(--paper); }

.label {
  font: 700 0.75rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  display: block;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px;
  border: var(--b-sm);
  border-radius: var(--chip-radius);
  font: 700 0.78rem var(--mono);
  max-width: 100%;
  overflow-wrap: anywhere;        /* wraps only when it does not fit in its row */
  background: var(--paper);
  color: var(--ink);
  vertical-align: middle;
}
.chip.yellow, .chip.blue, .chip.green, .chip.pink, .chip.lilac, .chip.red, .chip.orange {
  color: var(--on-color);
  border-color: var(--chip-line);
}
.chip.yellow { background: var(--yellow); }
.chip.blue { background: var(--blue); }
.chip.green { background: var(--green); }
.chip.pink { background: var(--pink); }
.chip.lilac { background: var(--lilac); }
.chip.red { background: var(--red); }
.chip.orange { background: var(--orange); }

.btn, button {
  font: 700 1rem var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--btn-line, var(--btn-bg));
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.08s ease;
}
.btn:hover, button:hover { transform: var(--lift); box-shadow: var(--shadow-sm-hover); }
.btn:active, button:active { transform: var(--press); box-shadow: var(--shadow-press); }
.btn.yellow, button.yellow { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--btn-line, var(--primary-bg)); }
.btn.ghost, button.ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover, button.ghost:hover { border-color: var(--line-hover); }
.btn.small, button.small { padding: 5px 14px; font-size: 0.9rem; }
button:focus-visible, .btn:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible,
summary:focus-visible, g.clickable:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.link { font-weight: 700; }

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

/* Every field the same: one border, one padding and a fixed line height, so a
   select, a smaller monospace input and a text input are equally tall */
textarea, select, input[type="number"], input[type="text"], input[type="password"], input:not([type]) {
  width: 100%;
  font: inherit;
  line-height: 24px;
  color: var(--ink);
  background: var(--paper);
  border: var(--b);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
label { display: block; margin: 14px 0; font-weight: 600; }
label textarea, label input { margin-top: 6px; font-weight: 400; }
label textarea { display: block; }  /* inline, it leaves a gap below for the baseline */
fieldset { border: none; padding: 0; margin: 0; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1 1 220px; }
.error-text { color: #b3261e; font-weight: 700; }

/* Grids that add columns as they fit, with no gaps and no card left alone.
   Rows are flex lines whose last one stretches; when the last card would be
   alone, the one before it drops down to keep it company (3+1 → 2+2). The
   number of columns, --c, comes from the grid's own width (container queries,
   one set per kind of grid below: they can't read a variable). */
.grid, .tiles, .lenses, .five {
  --gap: 18px;
  --c: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  container-type: inline-size;
}
:is(.grid, .tiles, .lenses, .five) > * {
  flex: 1 1 calc((100% - (var(--c) - 1) * var(--gap)) / var(--c) - 0.5px);
  min-width: 0;
  margin: 0;
}
/* .grid, cards: the decisions at home: a column every 260px */
@container (min-width: 538px) { .grid > * { --c: 2; } }
@container (min-width: 816px) { .grid > * { --c: 3; } }
@container (816px <= width < 1094px) { .grid > :nth-child(3n+1):last-child, .grid > :has(+ :nth-child(3n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 1094px) { .grid > * { --c: 4; } }
@container (1094px <= width < 1372px) { .grid > :nth-child(4n+1):last-child, .grid > :has(+ :nth-child(4n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 1372px) { .grid > * { --c: 5; } }
@container (1372px <= width < 1650px) { .grid > :nth-child(5n+1):last-child, .grid > :has(+ :nth-child(5n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 1650px) {
  .grid > * { --c: 6; }
  .grid > :nth-child(6n+1):last-child, .grid > :has(+ :nth-child(6n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); }
}
/* .tiles, number tiles: a column every 150px */
@container (min-width: 316px) { .tiles > * { --c: 2; } }
@container (min-width: 482px) { .tiles > * { --c: 3; } }
@container (482px <= width < 648px) { .tiles > :nth-child(3n+1):last-child, .tiles > :has(+ :nth-child(3n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 648px) { .tiles > * { --c: 4; } }
@container (648px <= width < 814px) { .tiles > :nth-child(4n+1):last-child, .tiles > :has(+ :nth-child(4n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 814px) { .tiles > * { --c: 5; } }
@container (814px <= width < 980px) { .tiles > :nth-child(5n+1):last-child, .tiles > :has(+ :nth-child(5n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 980px) {
  .tiles > * { --c: 6; }
  .tiles > :nth-child(6n+1):last-child, .tiles > :has(+ :nth-child(6n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); }
}
/* .lenses, the five lenses: 5 in a row, 3 + 2, or one per row: a column every 230px */
@container (min-width: 726px) { .lenses > * { --c: 3; } }
@container (726px <= width < 1222px) { .lenses > :nth-child(3n+1):last-child, .lenses > :has(+ :nth-child(3n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 1222px) {
  .lenses > * { --c: 5; }
  .lenses > :nth-child(5n+1):last-child, .lenses > :has(+ :nth-child(5n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); }
}
/* .five, five small boxes (phases, lenses at work, a scale): same, smaller: a column every 150px */
@container (min-width: 470px) { .five > * { --c: 3; } }
@container (470px <= width < 790px) { .five > :nth-child(3n+1):last-child, .five > :has(+ :nth-child(3n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 790px) {
  .five > * { --c: 5; }
  .five > :nth-child(5n+1):last-child, .five > :has(+ :nth-child(5n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); }
}

.tiles { --gap: 16px; margin: 0 0 28px; }
.tile {
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.tile .num { font: 800 2rem/1.1 var(--mono); display: block; }
.tile .what { font-size: 0.85rem; font-weight: 600; }
.tile.paper { color: var(--ink); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; }

/* ── Home ──────────────────────────────────────────────────────────────────── */

.decision-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease; }
.decision-card:hover { transform: var(--lift); box-shadow: var(--shadow-hover); border-color: var(--line-hover); }
.decision-card .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.decision-card .dilemma {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.decision-card .foot { margin-top: auto; display: flex; justify-content: space-between; font: 600 0.8rem var(--mono); color: var(--muted); }

.empty-state { text-align: left; padding: 32px; }
.empty-state h2 { font-size: 1.6rem; }

/* ── Preview ───────────────────────────────────────────────────────────────── */

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.columns > .card { margin: 0; }
@media (max-width: 820px) { .columns { grid-template-columns: 1fr; } }
.text { white-space: pre-wrap; margin: 0; font-size: 1.02rem; line-height: 1.75; }
.text .word {
  all: unset;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 1px;
}
.text .word:hover, .text .word:focus-visible { background: var(--yellow); color: var(--on-color); box-shadow: 0 0 0 var(--bw-sm) var(--line-hover); }
mark { color: var(--on-color); border-radius: 4px; padding: 0 3px; }
mark.hidden { background: var(--yellow); box-shadow: 0 0 0 var(--bw-sm) var(--line-hover); }
mark.token { background: var(--lilac); font: 700 0.9em var(--mono); box-shadow: 0 0 0 var(--bw-sm) var(--line-hover); }
.vault-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
form.inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
form.inline label { flex: 1 1 260px; margin: 0; }

/* ── Decision ──────────────────────────────────────────────────────────────── */

.quote { font-size: 1.05rem; white-space: pre-wrap; margin-top: 10px; }
details.dilemma-card { padding: 14px 20px; }
details.dilemma-card > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; margin: 0; }
details.dilemma-card > summary::-webkit-details-marker { display: none; }
details.dilemma-card > summary::after { content: "ver +"; font: 700 0.78rem var(--mono); }
details.dilemma-card[open] > summary::after { content: "ocultar −"; }

.steps { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border: var(--b);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
  font-size: 0.84rem;
}
.steps li::before, .steps .step-mark {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: var(--b-sm);
  border-radius: 50%;
  font: 800 0.75rem var(--mono);
  background: var(--paper);
  color: var(--ink);
}
.steps .step-mark .icon { width: 14px; height: 14px; }
.steps li.done { background: var(--green); color: var(--on-color); }
.steps li.done::before { display: none; }
.steps li.current { background: var(--yellow); color: var(--on-color); box-shadow: var(--shadow-sm); }
.steps li.error { background: var(--red); color: var(--on-color); }
.steps li.pending { color: var(--muted); border-style: dashed; }

.phases { list-style: none; padding: 0; margin: 0 0 16px; }
.phases li {
  border: var(--b);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--paper);
  color: var(--ink);
}
.phases li .state { display: block; font: 600 0.75rem var(--mono); margin-top: 2px; }
.phases li.done { background: var(--green); color: var(--on-color); }
.phases li.running { background: var(--yellow); color: var(--on-color); box-shadow: var(--shadow-sm); }
.phases li.failed { background: var(--red); color: var(--on-color); }
.phases li.pending { border-style: dashed; color: var(--muted); }

.lens-live { margin-bottom: 14px; }
.five { --gap: 10px; }
.lens-live .lens {
  border: var(--b);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--paper);
  color: var(--ink);
}
.lens-live .lens .state { display: block; font: 600 0.75rem var(--mono); }
.lens-live .lens.pending { border-style: dashed; color: var(--muted); }
.lens-live .lens.done { background: var(--green); color: var(--on-color); }
.lens-live .lens.failed { background: var(--red); color: var(--on-color); }

.spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .btn, button, .decision-card { transition: none; }
  .btn:hover, button:hover, .decision-card:hover { transform: none; }
}

.stop { border-width: var(--bw-strong); box-shadow: var(--shadow-lg); }
.stop h2 { font-size: 1.4rem; }

/* Result */
.winner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.winner .action { font: 800 clamp(1.5rem, 3.4vw, 2.2rem)/1.15 var(--mono); margin: 4px 0 10px; }
.winner .score {
  font: 800 2.6rem/1 var(--mono);
  background: var(--paper);
  color: var(--ink);
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px;
  text-align: center;
}
.winner .score small { display: block; font-size: 0.8rem; font-weight: 700; }
.winner .facts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 620px) { .winner { grid-template-columns: 1fr; } }

.scroll { overflow-x: auto; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.heat th, .heat td { padding: 9px 10px; text-align: center; border-bottom: var(--b-sm); }
.heat thead th { font: 700 0.8rem var(--mono); vertical-align: bottom; }
.heat th:first-child, .heat td:first-child { text-align: left; min-width: 200px; }
.heat .weights td { font: 600 0.78rem var(--mono); color: var(--muted); }
.heat td.cell { font: 800 1.05rem var(--mono); color: var(--on-color); border-left: var(--b-sm); }
.heat td.cell.low { background: var(--red); }
.heat td.cell.mid { background: var(--yellow); }
.heat td.cell.high { background: var(--green); }
.heat td.total { font: 800 1.1rem var(--mono); border-left: var(--b-sm); white-space: nowrap; }
.heat tr.winner-row td:first-child { font-weight: 800; }
.heat tbody tr:last-child td { border-bottom: none; }

.lens-card h3 { margin-top: 0; }
.lens-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bar { height: 10px; border: var(--b-sm); border-radius: 999px; background: var(--paper); overflow: hidden; margin: 4px 0 10px; }
.bar > span { display: block; height: 100%; background: var(--ink); }
.lens-card .insight { font-weight: 600; }
.lens-card details { margin-top: 8px; }
.lens-card summary { cursor: pointer; font: 700 0.85rem var(--mono); }
.lens-card ul { padding-left: 18px; margin: 8px 0 0; }
.risks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pair > .card { margin: 0 0 22px; }
@media (max-width: 820px) { .pair { grid-template-columns: 1fr; } }
.points { list-style: none; padding: 0; margin: 10px 0 0; }
.points li { padding: 8px 0 8px 28px; border-top: var(--bw-sm) dashed var(--on-color-muted); position: relative; }
.points li > .icon:first-child { position: absolute; left: 0; top: 12px; }

.options { display: grid; gap: 10px; margin: 8px 0 4px; }
.option {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: var(--b);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}
.option:hover { background: var(--hover-bg); border-color: var(--line-hover); }
.option:has(input:checked) { background: var(--yellow); color: var(--on-color); border-color: var(--line-hover); }
.option input { accent-color: var(--on-color); width: 18px; height: 18px; }

.notice { border: var(--b); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--yellow); color: var(--on-color); font-weight: 600; box-shadow: var(--shadow-sm); margin-bottom: 18px; }

/* ── Transparency ──────────────────────────────────────────────────────────── */

.facts { display: flex; gap: 8px; flex-wrap: wrap; }
.jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.jump a { text-decoration: none; }
.jump a:hover { background: var(--hover-bg); border-color: var(--line-hover); }
.calls-summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px; }
.calls-summary .label { margin-bottom: 8px; }
details.card > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.run-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.run-head h2 { margin: 0; }
.phase-run { scroll-margin-top: 16px; }
.phase-run:target { box-shadow: var(--shadow-lg), 0 0 0 3px var(--focus); }
.call { border-top: var(--bw) dashed var(--line); padding: 14px 0 4px; margin-top: 14px; }
.call-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.call-head h3 { margin: 0 0 6px; }
.attempts { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.attempts li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 10px; border: var(--b-sm); border-radius: var(--radius-sm); background: var(--paper); font-size: 0.9rem; }
.attempts li.err { background: var(--red); color: var(--on-color); }
.attempts li.ok { background: var(--green); color: var(--on-color); }
.attempts li:is(.err, .ok) .muted { color: var(--on-color-muted); }
.error-msg { display: block; width: 100%; font-size: 0.82rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.exchange { display: grid; gap: 8px; margin-top: 10px; }
.exchange summary, .audit-calls summary, .audit-history summary { cursor: pointer; font: 700 0.88rem var(--mono); padding: 4px 0; }
pre.sent {
  margin: 8px 0 4px;
  padding: 12px 14px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 500 0.84rem/1.55 var(--mono);
  background: var(--canvas);
  color: var(--ink);
  border: var(--b-sm);
  border-radius: var(--radius-sm);
}
pre.sent mark.token { font-size: 1em; }
table.plain th, table.plain td { text-align: left; padding: 7px 10px; border-bottom: var(--b-sm); vertical-align: top; }
table.plain thead th { font: 700 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
table.plain tbody tr:last-child td { border-bottom: none; }
.vault-card { padding: 14px 20px; }
.vault-card table { margin-top: 10px; }

/* ── Review ────────────────────────────────────────────────────────────────── */

.legend { font-weight: 600; margin: 18px 0 6px; padding: 0; }
.scale.two { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); gap: 8px; }
.scale .option { font-weight: 500; }
.due-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.due-list li { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; background: var(--paper); color: var(--ink); border: var(--b); border-radius: var(--radius-sm); }
.due-list li > div { flex: 1 1 280px; min-width: 0; }
.due-list .hint { display: block; margin-top: 4px; color: var(--muted); }
.due-list .muted { color: var(--muted); }

/* ── Audit ─────────────────────────────────────────────────────────────────── */

/* The two charts side by side when both fit at a comfortable size */
.charts { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; }
.charts > .card { flex: 1 1 560px; min-width: 0; margin: 0; }
.chart-box { margin: 14px 0 6px; max-width: 760px; }
.chart-box > div { min-width: 500px; }  /* narrower, the labels get too small: it scrolls */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--mono); fill: var(--ink); }
.chart .tick-label { font-size: 12px; font-weight: 600; }
.chart .axis-title, .chart .band-label { font-size: 12px; font-weight: 700; fill: var(--muted); }
.chart .row-label { font-size: 14px; font-weight: 800; font-family: var(--sans); }
.chart .mean-label { font-size: 13px; font-weight: 800; }
.chart .empty-label { font-size: 13px; fill: var(--muted); }
.chart .grid { stroke: var(--ink); stroke-opacity: 0.18; stroke-width: 1; }
.chart .row-line { stroke: var(--edge); stroke-width: 2; }
.chart .band-good { fill: var(--green); fill-opacity: 0.45; }
.chart .band-bad { fill: var(--red); fill-opacity: 0.35; }
.chart .dot circle { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; }
.chart .dot circle.hit { fill: transparent; stroke: none; }
.chart .dot .count { font-size: 11px; font-weight: 800; fill: var(--paper); pointer-events: none; }
.chart .dot:hover circle:not(.hit), .chart .dot:focus-visible circle:not(.hit) { fill: var(--yellow); stroke: var(--line-hover); }
.chart .dot:hover .count, .chart .dot:focus-visible .count { fill: var(--on-color); }
.chart .dot:focus-visible { outline: none; }
.chart .mean rect { fill: var(--yellow); stroke: var(--line-hover); stroke-width: var(--bw-sm); }
.pattern { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); margin: 12px 0; }
.pattern h3 { margin-top: 0; }
.audit-calls, .audit-history { margin-top: 14px; }
.audit-history > section { margin-top: 12px; }
.audit-history > section > h3 { font: 700 0.88rem var(--mono); margin: 0 0 8px; }
.audit-calls p { margin: 4px 0; font-size: 0.85rem; overflow-wrap: anywhere; }
details.card > summary { list-style: none; justify-content: space-between; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "ver +"; font: 700 0.78rem var(--mono); white-space: nowrap; }
details.card[open] > summary::after { content: "ocultar −"; }

/* ── Diagrams ──────────────────────────────────────────────────────────────── */

/* A card: the title and "Ampliar" on top, the intro, and the diagram below,
   as wide as the card. What a piece does goes in .piece-dock */
.diagram-card .intro { margin: 4px 0 14px; }
.diagram-box {
  border: var(--b);
  border-radius: var(--radius-sm);
  background: var(--paper);
  max-height: 72vh;
  overflow: auto;
  /* Enlarged, it scrolls sideways without the browser going back a page; the
     wheel down always reaches the page */
  overscroll-behavior-x: contain;
}
.diagram:not(.drawn) .diagram-box { display: none; }
.diagram.fit .diagram-box { max-height: none; overflow: hidden; }  /* whole: nothing to scroll */
.diagram.fit .diagram-box svg { margin: 0 auto; }  /* drawn size at most: centered when there is room */
.diagram-box svg { display: block; height: auto; }
.diagram-card:not(:has(.diagram.drawn)) .js-only { display: none; }
/* What the piece picked does: one panel for the page, fixed at the bottom
   right (diagrams.js). Folded, a pill; open, a long text scrolls inside it */
.piece-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  max-width: calc(100vw - 32px);
  background: var(--paper);
  border: var(--b);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.piece-dock.open { width: min(400px, calc(100vw - 32px)); }
.piece-dock.open.active { background: var(--yellow); color: var(--on-color); }
.piece-dock .dock-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  color: inherit;
  border: none;
  border-radius: inherit;
  box-shadow: none;
  font-size: 0.9rem;
  text-align: left;
}
.piece-dock .dock-toggle:hover, .piece-dock .dock-toggle:active { transform: none; box-shadow: none; background: var(--hover-bg); }
.piece-dock .dock-toggle .label { margin: 0; }
.piece-dock .dock-view { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-dock .dock-sign { font: 700 1.1rem var(--mono); line-height: 1; }
.piece-dock .dock-body { padding: 0 16px 14px; max-height: 45vh; overflow: auto; overscroll-behavior: contain; }
.piece-dock h3 { margin: 0 0 6px; }
.piece-dock p { margin: 0; }
.pieces-list { margin-top: 14px; }
.pieces-list summary { cursor: pointer; font: 700 0.88rem var(--mono); }
.pieces-list dt { font-weight: 800; margin-top: 10px; }
.pieces-list dd { margin: 2px 0 0; }

/* Mermaid's look (borders, shadows, chips on the arrows) is in diagrams.js,
   inside each SVG's own style, scoped with its id. The hover and the piece
   picked are here: an id in :is() makes these weigh as much as those, and one
   more class than them wins. Like everywhere else, hovering never adds a
   shadow: the border gets thicker, and the piece picked, the style's color.
   Our .label must not leak into Mermaid's, in the page nor where Mermaid
   measures the text (outside .diagram). */
svg .label { font: inherit; text-transform: none; letter-spacing: normal; margin: 0; display: inline; }
.diagram svg .clickable { cursor: pointer; }
.diagram svg .clickable:focus { outline: none; }
:is(#_, .diagram) svg g.clickable.clickable:is(:hover, :focus-visible) > :is(rect, polygon, path, circle, ellipse),
:is(#_, .diagram) svg g.clickable.clickable:is(:hover, :focus-visible) > g > path + path {
  stroke-width: var(--node-bw-hover) !important;
  stroke: var(--line-hover) !important;
}
:is(#_, .diagram) svg g.clickable.is-selected > :is(rect, polygon, path, circle, ellipse),
:is(#_, .diagram) svg g.clickable.is-selected > g > path + path {
  stroke-width: var(--node-bw-hover) !important;
  stroke: var(--select) !important;
}

/* The recorrido drawn two ways: a button per variant */
.variant-switch { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.variant-switch .btn[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-fg); }
.variant-switch .variant-hint { flex: 1 1 220px; }

/* ── Appearance (sidebar) ──────────────────────────────────────────────────── */

.prefs { position: relative; margin-top: auto; }
.prefs + .foot { margin-top: 0; }
.logout { margin: 0; }
.logout + .foot { margin-top: 0; }
.prefs > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 7px 12px;
  border: var(--bw) solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
}
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary:hover, .prefs[open] > summary { border-color: var(--line-hover); background: var(--hover-bg); }
.prefs > form {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 290px;
  z-index: 20;
  padding: 12px;
  background: var(--paper);
  color: var(--ink);
  border: var(--b);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 12px;
}
.prefs legend { font: 700 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; padding: 0; }
.prefs label { margin: 0; font-weight: 500; }
.prefs .pick { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.prefs .pick:hover { background: var(--hover-bg); }
.prefs .pick input { margin-top: 4px; accent-color: var(--focus); }
.prefs .pick span { display: grid; line-height: 1.3; }
.prefs .pick small { color: var(--muted); font-size: 0.78rem; }
.prefs .pick:has(input:checked) { background: var(--canvas); }
.segmented { display: flex; border: var(--b); border-radius: var(--radius-sm); overflow: hidden; }
.segmented label { flex: 1; position: relative; text-align: center; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 5px 4px; font-size: 0.8rem; font-weight: 600; }
.segmented label + label { border-left: var(--b); }
.segmented label:hover span { background: var(--hover-bg); }
.segmented input:checked + span { background: var(--nav-active-bg); color: var(--nav-active-fg); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
/* On a phone the sidebar is a bar on top: the button goes at its right, and
   the panel drops down from the bar */
@media (max-width: 820px) {
  .prefs { position: static; order: 3; margin: 0 0 0 4px; }
  .prefs-label { display: none; }
  .prefs > form { top: calc(100% - 6px); bottom: auto; left: auto; right: 16px; width: min(320px, calc(100vw - 32px)); }
}
@media (max-width: 660px) {
  .prefs { order: 2; margin-left: auto; }
}

/* ── Login and access log ──────────────────────────────────────────────────── */

.login { max-width: 420px; }
/* Five or six links, "Salir" and "Apariencia" do not fit in one row: the links go below */
@media (max-width: 820px) {
  .side { flex-wrap: wrap; gap: 10px; }
  .side nav { order: 4; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .side .prefs { order: 2; margin-left: auto; }
  .side .logout { order: 3; }
}
tr.warn td { color: #b3261e; }

/* ── Models (admin) ───────────────────────────────────────────────────────────── */

table.roles select { min-width: 9rem; width: 100%; }
table.roles td.role { min-width: 17rem; }
table.roles .role-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
table.roles .role-what { font-size: 0.88rem; margin-top: 4px; }
/* Conexiones: the groups side by side while there is room; in each, its
   connections one under the other, in the order they are tried */
.dep-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
.dep-group { min-width: 0; }
.dep-group > h3 { margin-top: 0; }
.deployments { display: flex; flex-direction: column; gap: 10px; }
.dep { border: var(--b-sm); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dep.off { opacity: 0.75; border-style: dashed; }
.dep-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dep-model { font-size: 0.85rem; overflow-wrap: anywhere; }
.dep-test { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.dep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dep-actions form { margin: 0; }
/* Claves: every key in one table, a group of rows per provider */
table.keys { font-size: 0.9rem; }
table.keys td { vertical-align: top; }
table.keys td > div + div { margin-top: 2px; }
table.keys .key-provider th { padding: 9px 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); font: inherit; text-transform: none; letter-spacing: 0; }
table.keys tbody + tbody .key-provider th { border-top: var(--b-sm); }
.key-provider th > * { margin-right: 6px; }
.key-provider-name { font-weight: 700; font-size: 1rem; }
.key-provider code, .key-ending { font-size: 0.85rem; }
.key-uses { overflow-wrap: anywhere; }
.key-url { font-size: 0.85rem; white-space: nowrap; }
tr.key-none td { color: #b3261e; }
tr.key.active td:first-child { box-shadow: inset var(--bw) 0 0 var(--line); }  /* the one used */
table.keys thead th, table.keys .key-ending { white-space: nowrap; }
table.keys .key-name { min-width: 12rem; }
table.keys .key-name span { overflow-wrap: anywhere; }
table.keys .key-balance { min-width: 15rem; width: 100%; }  /* the room left over */
table.keys td.key-actions { white-space: nowrap; text-align: right; }
.key-actions form { display: inline-block; margin: 0 0 0 6px; }
.key-balance-lines > div + div { margin-top: 2px; }
.key-note { font-size: 0.88rem; margin: 10px 0 0; }
#agregar-clave { margin-top: 22px; }
.other-env[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The model field's search in the catalog: a list under the field, over what follows */
.model-field { position: relative; }
.catalog-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 4px 0;
  list-style: none; max-height: min(22rem, 60vh); overflow-y: auto; font-weight: 400;
  background: var(--paper); color: var(--ink); border: var(--b-sm); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overscroll-behavior: contain; touch-action: pan-y;  /* scrolling it never scrolls the page */
}
.catalog-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; }
.catalog-list li code { font-size: 0.85rem; overflow-wrap: anywhere; }
.catalog-list li span { font-size: 0.8rem; color: var(--muted); }
.catalog-list li:hover, .catalog-list li[aria-selected="true"] { background: var(--yellow); color: var(--on-color); }
.catalog-list li:hover span, .catalog-list li[aria-selected="true"] span { color: var(--on-color-muted); }
.catalog-list li.more { cursor: default; font-size: 0.85rem; color: var(--muted); background: none; }
/* The catalog's line, with its button */
.catalog-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.dep-edit > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
/* Conexiones: adding one, folded above the list until it is asked for */
.dep-new { margin: 0 0 18px; }
/* Its summary looks like what it is: a button (the yellow small one) */
.dep-new > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  font: 700 0.9rem var(--sans); padding: 5px 14px;
  background: var(--primary-bg); color: var(--primary-fg);
  border: var(--bw) solid var(--btn-line, var(--primary-bg)); border-radius: var(--btn-radius);
  box-shadow: var(--shadow-sm);
}
.dep-new > summary::-webkit-details-marker { display: none; }
.dep-new > summary:hover { transform: var(--lift); box-shadow: var(--shadow-sm-hover); }
.dep-new[open] > summary { margin-bottom: 12px; background: var(--paper); color: var(--ink); border-color: var(--line); }
.dep-new > form { padding: 14px; border: var(--b-sm); border-radius: var(--radius-sm); }
.dep-group:has(.dep-edit[open]) { grid-column: 1 / -1; }  /* editing: the whole width */
.dep-edit form { margin-top: 10px; }
/* Label above its field, in 1, 2 or 3 columns by the room the form has (not
   the screen: an open card and the new connection's differ); adding one
   (four fields), all four in a row when they fit */
.card:has(> form.fields), .dep, .dep-new { container-type: inline-size; }
form.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; }
@container (min-width: 520px) { form.fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 820px) {
  form.fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 1000px) { form.fields.new { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
form.fields label { margin: 0; }
form.fields .actions { grid-column: 1 / -1; margin-top: 4px; }
/* After the base input rule, same weight: this one wins */
input.mono-input, textarea.mono-input { font-family: var(--mono); font-size: 0.88rem; }
/* A long model id wraps instead of being cut: the box grows with it */
textarea.mono-input { resize: none; field-sizing: content; min-height: 0; overflow-wrap: anywhere; }
@supports not (field-sizing: content) { textarea.mono-input { min-height: 3.4em; } }
/* Chrome ignores line-height on a select, and a 2.5px border rounds apart in
   an input and a select: every one-line field gets the same height, spelled out */
select { max-width: 100%; }
select, input[type="number"], input[type="text"], input[type="password"], input:not([type]) {
  height: calc(24px + 20px + 2 * var(--bw));
}
textarea.mono-input { min-height: calc(24px + 20px + 2 * var(--bw)); }
label select { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
@media (max-width: 660px) {
  /* Each role as a block: its name and chain, then the three groups side by side */
  table.roles thead { display: none; }
  table.roles tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: var(--b-sm); }
  /* No header row here: each group says which one it is */
  table.roles td[data-label] { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 8px; }
  table.roles td[data-label]::before { content: attr(data-label); font: 700 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  table.roles tr:last-child { border-bottom: none; }
  table.roles td { border: none; padding: 0; }
  table.roles td.role { min-width: 0; }
  table.roles select { min-width: 0; width: 100%; }
  /* Each key as a block: its name, then what it has, labelled */
  table.keys thead { display: none; }
  table.keys tr.key { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: var(--b-sm); }
  table.keys tr.key td { border: none; padding: 0; min-width: 0; }
  table.keys tr.key td[data-label]:not(.key-name) { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; }
  table.keys tr.key td[data-label]:not(.key-name)::before { content: attr(data-label); font: 700 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  table.keys td.key-actions { text-align: left; }
  table.keys .key-name { min-width: 0; }
  table.keys .key-actions form { margin: 0 6px 0 0; }
  table.keys tr.key.active td:first-child { box-shadow: none; }
  table.keys tr.key.active { box-shadow: inset var(--bw) 0 0 var(--line); padding-left: 10px; }
  .side nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}