/* Components. Colours come only from the theme tokens (assets/themes/,
   applied by `data-theme` on <html>); nothing here names a colour. */

/* Typefaces: fonts.css (--font, chosen in Apparence). */

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Shapes: controls, cards, large surfaces. */
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  --control-height: 2.6rem;
  /* Elevation: layered, soft shadows in the theme's shadow colour. */
  --shadow-xs: 0 1px 1px var(--shadow);
  --shadow-sm: 0 1px 2px var(--shadow), 0 2px 6px -2px var(--shadow);
  --shadow-md: 0 1px 2px var(--shadow), 0 6px 16px -6px var(--shadow), 0 16px 36px -18px var(--shadow);
  --shadow-lg: 0 2px 4px var(--shadow), 0 12px 28px -8px var(--shadow), 0 28px 60px -20px var(--shadow);
  --ring: 0 0 0 4px color-mix(in oklch, var(--focus) 22%, transparent);
  --rail-width: 16rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: .18s;
  /* Translucent surfaces over a gradient ground (a theme sets them);
     opaque by default. */
  --surface-glass: var(--surface);
  --glass-blur: 0px;
  --ground-color: var(--ground);
  /* Tab of the current page; entity pages set `.tab-N` on <body>. */
  --tab: var(--accent);
  --tab-soft: var(--accent-soft);
  --tab-ink: var(--accent-text);
  font-family: var(--font);
  font-feature-settings: var(--font-features);
  font-size: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--ground);
  accent-color: var(--accent);
  -webkit-text-size-adjust: 100%;
}

.tab-1 { --tab: var(--tab-1); --tab-soft: var(--tab-1-soft); --tab-ink: var(--tab-1-ink); --tab-on: var(--surface); }
.tab-2 { --tab: var(--tab-2); --tab-soft: var(--tab-2-soft); --tab-ink: var(--tab-2-ink); --tab-on: var(--surface); }
.tab-3 { --tab: var(--tab-3); --tab-soft: var(--tab-3-soft); --tab-ink: var(--tab-3-ink); --tab-on: var(--surface); }
.tab-4 { --tab: var(--tab-4); --tab-soft: var(--tab-4-soft); --tab-ink: var(--tab-4-ink); --tab-on: var(--surface); }
.tab-5 { --tab: var(--tab-5); --tab-soft: var(--tab-5-soft); --tab-ink: var(--tab-5-ink); --tab-on: var(--surface); }
.tab-6 { --tab: var(--tab-6); --tab-soft: var(--tab-6-soft); --tab-ink: var(--tab-6-ink); --tab-on: var(--surface); }
.tab-7 { --tab: var(--tab-7); --tab-soft: var(--tab-7-soft); --tab-ink: var(--tab-7-ink); --tab-on: var(--surface); }
.tab-8 { --tab: var(--tab-8); --tab-soft: var(--tab-8-soft); --tab-ink: var(--tab-8-ink); --tab-on: var(--surface); }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; display: flex; min-height: 100vh; background: var(--ground); }
::selection { background: var(--selection); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
a { color: var(--accent-text); text-decoration: none; text-underline-offset: .18em; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: var(--title-tracking); text-wrap: balance; }
code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--border); padding: .05em .4em; border-radius: 6px; }
small { font-size: .875rem; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html { scrollbar-color: var(--border-strong) transparent; }

/* ---- Rail (side navigation) ---- */

/* The rail's colour runs the page's full height; its content stays in view. */
.sidebar { width: var(--rail-width); flex-shrink: 0; background: var(--rail-bg); color: var(--rail-text); border-right: 1px solid var(--rail-border); backdrop-filter: blur(var(--glass-blur)); }
.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem .85rem 1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: 0 .5rem; margin-bottom: .25rem; color: var(--rail-text); font-weight: 700; font-size: 1.05rem; letter-spacing: var(--title-tracking); }
.brand:hover { text-decoration: none; }
.brand img { display: block; max-width: 100%; max-height: 3rem; object-fit: contain; }
.brand-mark {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: var(--radius);
  background: linear-gradient(160deg, color-mix(in oklch, var(--accent) 82%, var(--on-accent)), var(--accent));
  color: var(--on-accent); font-size: 1rem; box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in oklch, var(--on-accent) 30%, transparent);
}
.brand-name { overflow-wrap: anywhere; }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar a.nav-item, .sidebar .link-button.nav-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 2.3rem; padding: .4rem .65rem; border-radius: var(--radius-sm);
  color: var(--rail-text); font: inherit; font-weight: 500; text-align: left;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.sidebar .nav-item:hover { background: var(--rail-hover); text-decoration: none; }
.sidebar .nav-item[aria-current="page"] { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: 650; box-shadow: var(--shadow-sm); }
.sidebar .nav-item .icon { color: var(--rail-muted); }
.sidebar .nav-item[aria-current="page"] .icon { color: inherit; }
.sidebar ul.entities-row { display: none; }
/* Categories (Paramétrage → Navigation): a sub-menu each, unfolded on its entities' pages. */
.sidebar .nav-group { margin-top: .4rem; }
.sidebar .nav-group summary.nav-item {
  display: flex; align-items: center; gap: .6rem; min-height: 2rem; padding: .3rem .55rem; border-radius: var(--radius);
  list-style: none; cursor: pointer; color: var(--rail-muted); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.sidebar .nav-group summary::-webkit-details-marker { display: none; }
.sidebar .nav-group .chevron { margin-left: auto; width: 1rem; height: 1rem; transition: transform .15s var(--ease); }
.sidebar .nav-group details[open] > summary .chevron { transform: rotate(90deg); }
.sidebar .nav-group details > ul { margin: 2px 0 0 .85rem; padding-left: .3rem; border-left: 1px solid var(--rail-border); }
/* A record's colour (colour field, link to a coloured record). */
.dot { display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -.05rem; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px color-mix(in oklch, var(--text) 30%, transparent); }

/* The entity's tab colour: the same swatch marks its pages everywhere. */
.swatch { width: .7rem; height: .9rem; flex-shrink: 0; border-radius: 2px 4px 4px 2px; background: var(--tab); box-shadow: 0 0 0 1px color-mix(in oklch, var(--rail-text) 18%, transparent); }
.sidebar-footer { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--rail-border); display: flex; flex-direction: column; gap: 2px; }
.sidebar-footer form { margin: 0; }
.sidebar-footer .nav-item { color: var(--rail-muted); }
.sidebar-footer .nav-item.user { color: var(--rail-text); font-weight: 650; }
.sidebar .count { margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.4rem; }
.app-version { margin: .4rem .55rem 0; color: var(--rail-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.nav-item.has-unread { color: var(--rail-text); font-weight: 650; }

/* ---- Page ---- */

main { flex: 1; min-width: 0; padding: 2.5rem 3rem 4rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-header h1 { margin: 0; font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: .7rem; }
.page-header h1 .swatch { height: 1.5rem; width: 1.05rem; border-radius: 4px 6px 6px 4px; box-shadow: var(--shadow-sm); }
.page-header small { font-weight: 400; font-size: .9rem; color: var(--text-muted); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.empty { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: .875rem; line-height: 1.5; margin: .35rem 0 .9rem; }
.hint-list { color: var(--text-muted); padding-left: 1.2rem; }
.hint-list li { margin-bottom: .3rem; }

/* ---- Buttons ---- */

/* Raised: a light top edge, a soft shadow; lifted on hover, pressed on click. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--control-height); padding: .5rem 1.15rem; border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--accent) 80%, var(--text));
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 88%, var(--on-accent)), var(--accent));
  color: var(--on-accent);
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--on-accent) 22%, transparent), 0 1px 2px var(--shadow), 0 4px 12px -4px color-mix(in oklch, var(--accent) 45%, transparent);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.button:hover {
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent-hover) 88%, var(--on-accent)), var(--accent-hover));
  text-decoration: none; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--on-accent) 22%, transparent), 0 2px 4px var(--shadow), 0 8px 20px -6px color-mix(in oklch, var(--accent) 50%, transparent);
}
.button:active { transform: translateY(0); box-shadow: inset 0 1px 2px color-mix(in oklch, var(--text) 25%, transparent); }
.button.secondary {
  background: var(--surface); color: var(--text); border-color: var(--border); font-weight: 550;
  box-shadow: var(--shadow-sm);
}
.button.secondary .icon { color: var(--accent-text); }
.button.secondary:hover { background: var(--surface-2); border-color: color-mix(in oklch, var(--border) 50%, var(--border-strong)); box-shadow: var(--shadow-md); }
.button.secondary:active { box-shadow: inset 0 1px 2px var(--shadow); }
.button.danger { background: var(--surface); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.button.danger:hover { background: var(--danger-soft); border-color: var(--danger); box-shadow: var(--shadow-md); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.icon-button, .link-button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0 .2rem; color: var(--accent-text); border-radius: var(--radius-sm); }
.link-button:hover, .icon-button:hover { text-decoration: underline; }
.danger-text { color: var(--danger); }

/* ---- Messages ---- */

.alert, .notice { padding: .8rem 1.1rem .8rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; border: 1px solid; border-left-width: 4px; box-shadow: var(--shadow-xs); }
.alert { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, transparent); border-left-color: var(--danger); }
.notice { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklch, var(--success) 25%, transparent); border-left-color: var(--success); }
.alert ul { margin: 0; padding-left: 1.2rem; }
.filter-banner { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; background: var(--tab-soft); color: var(--text); border-radius: var(--radius); padding: .65rem 1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-xs); }

/* ---- Cards ("fiches") ---- */

.panel, fieldset, .records-card {
  background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur)); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.panel { padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.panel h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 650; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.panel-header h2 { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.panel table.records { border: 0; box-shadow: none; }

/* Form sections: the legend is an index tab standing on the card's edge. */
fieldset { margin: 1.6rem 0 1.5rem; padding: 1.4rem 1.75rem .6rem; min-width: 0; }
legend {
  padding: .25rem .8rem; margin-left: -.35rem;
  background: var(--tab-soft); color: var(--tab-ink);
  border: 1px solid color-mix(in oklch, var(--tab) 35%, transparent); border-radius: 999px;
  font-weight: 650; font-size: .875rem; box-shadow: var(--shadow-xs);
}
.record-form, .danger-zone, .panel.workflow, .panel.related, .panel.attachments { max-width: 46rem; }
/* Two columns of sections (Paramétrage → vue formulaire), each column's
   sections stacked; one column again on narrower screens. */
.record-form.two-columns { max-width: 76rem; }
.record-form.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; align-items: start; }
.record-form.two-columns > .form-actions { grid-column: 1 / -1; }
.record-layout.with-side:has(.record-form.two-columns) { grid-template-columns: minmax(0, 76rem) auto; }
@media (max-width: 1180px) {
  .record-form.two-columns { display: block; max-width: 46rem; }
  .record-layout.with-side:has(.record-form.two-columns) { grid-template-columns: minmax(0, 46rem) auto; }
}
/* A record and, on its right, its history (folded by default: a narrow tab).
   The history comes first in the page (above the record on small screens):
   the grid alone puts it on the right, next to the record. */
/* A record and, on its right, a side column kept in view while the record
   scrolls: its photos, then its history (folded by default: a narrow tab).
   The side comes first in the page (above the record on small screens): the
   grid alone puts it on the right, next to the record. */
.record-layout.with-side { display: grid; grid-template-columns: minmax(0, 46rem) auto; justify-content: start; gap: 1rem; align-items: start; }
.record-layout.with-side > .record-main { grid-column: 1; grid-row: 1; }
.record-layout.with-side > .record-side { grid-column: 2; grid-row: 1; }
.record-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.record-side.with-photo { width: 17rem; }
/* Room for the history's columns once unfolded. */
.record-side.with-photo:has(.history-pane details[open]) { width: 22rem; }
/* The photo: a fixed frame, the whole image in it whatever its shape. */
.record-photo { margin: 0; padding: .85rem; background: var(--surface); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.photo-frame { display: grid; place-items: center; height: 14rem; background: var(--ground); border-radius: var(--radius); overflow: hidden; }
.photo-frame a, .photo-frame img { display: block; width: 100%; height: 100%; }
.photo-frame img { object-fit: contain; }
.photo-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .9rem; }
.photo-empty .icon { width: 2rem; height: 2rem; }
.record-photo figcaption { margin: .5rem 0 .4rem; font-weight: 650; }
.photo-upload { margin: 0; }
.photo-upload input[type="file"] { width: 100%; min-width: 0; font-size: .85rem; }
.photo-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.record-photo .hint { margin: .4rem 0 0; }
.record-main { min-width: 0; }
/* Level with the history tab; a titled section keeps room for its title. */
.record-main > :first-child,
.record-main > .record-form:first-child > .form-column > fieldset:first-child:not(:has(> legend)) { margin-top: 0; }
.history-pane summary {
  display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer;
  padding: .75rem .55rem; border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text-muted); font-weight: 650; font-size: .9rem;
  box-shadow: var(--shadow-sm); transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.history-pane summary::-webkit-details-marker { display: none; }
.history-pane summary:hover { color: var(--text); box-shadow: var(--shadow-md); }
/* Folded: the label reads top to bottom along the tab. */
.history-pane details:not([open]) summary { writing-mode: vertical-rl; }
.history-pane details[open] { width: min(22rem, 34vw); }
/* Under a photo, the history spans the column, its title along it. */
.record-side.with-photo .history-pane details:not([open]) summary { writing-mode: horizontal-tb; }
.record-side.with-photo .history-pane details[open] { width: auto; }
.history-pane details[open] summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--text); }
.history-body { padding: 0 .9rem .6rem; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.history-body .history-list td:first-child { width: 28%; }
.history-body .history-list td { overflow-wrap: break-word; }
.panel.attachments h2 { display: flex; align-items: center; gap: .45rem; }
ul.files { list-style: none; margin: 0 0 .85rem; padding: 0; }
ul.files li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--border); }
ul.files li:first-child { border-top: 0; }
ul.files li a { overflow-wrap: anywhere; }
ul.files li form { margin-left: auto; }
.print-list { padding: .45rem 0; border-top: 1px solid var(--border); }
.print-list:first-of-type { border-top: 0; }
.print-list .totals { margin: .35rem 0 0 1.6rem; }
.print-list:not(:has(input[name="list"]:checked)) .totals { display: none; }
form.upload { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.75rem; }
/* The last action apart, at the end of the row (Supprimer). */
.form-actions .push-end { margin-left: auto; }
.danger-zone { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }

/* ---- Fields ---- */

.field { margin-bottom: 1.15rem; }
.field label, .field .label { display: block; font-size: .925rem; font-weight: 600; margin-bottom: .4rem; }
.field label.checkbox { font-weight: 400; display: inline-flex; align-items: center; gap: .45rem; }
input, select, textarea { font: inherit; color: var(--text); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea,
.search-form input, .search-form select, .row-form input:not([type="checkbox"]),
table.records input:not([type="checkbox"]), table.records.compact select {
  width: 100%; min-height: var(--control-height); padding: .55rem .8rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: inset 0 1px 2px var(--shadow);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, .field select:hover, .field textarea:hover,
.search-form input:hover, .search-form select:hover { border-color: color-mix(in oklch, var(--border-strong) 70%, var(--text)); }
/* A colour picker is a swatch, not a text box: as specific as the rule above, and after it. */
.color-input { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.field .color-input input[type="color"]:not([type="checkbox"]) { width: 4.5rem; padding: .2rem; cursor: pointer; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus) !important; box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0; }
input[type="file"] { font: inherit; max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 550; margin-right: .75rem; padding: .45rem .95rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration) var(--ease); }
input[type="file"]::file-selector-button:hover { box-shadow: var(--shadow-md); }
textarea { resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger) !important; }
.field .error { color: var(--danger); margin: .3rem 0 0; font-size: .9rem; font-weight: 600; }
.req { color: var(--danger); }
.computed-value { padding: .55rem .8rem; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); min-height: var(--control-height); }
textarea.formula, #f-formula { font-family: var(--mono); font-size: .92rem; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .6rem; }
.checkbox { display: inline-flex; align-items: center; gap: .45rem; }
/* Fields side by side, aligned from the top: labels on one line, inputs on
   the next, whatever hints follow. What has no label above (the button, a
   lone checkbox) sits on the inputs' line: one label down (1lh + its
   margin), as tall as an input (1lh + padding + border). */
.inline-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.inline-form .field { flex: 1 1 14rem; margin: 0; }
.inline-form .form-actions,
.inline-form .field:has(> label.checkbox:only-child) {
  margin: calc(1lh + .4rem) 0 0; min-height: var(--control-height); display: flex; align-items: center;
}
.row-form { display: flex; gap: .8rem; align-items: center; }
.row-form input:not([type="checkbox"]) { flex: 1 1 14rem; width: auto; min-width: 0; }
.lookup input[type="search"] { margin-bottom: .35rem; }
.lookup select[multiple] { min-height: 8rem; padding: .25rem; }
.lookup select[multiple] option { padding: .2rem .4rem; border-radius: 4px; }
.lookup select[multiple] option:checked { background: var(--accent-soft); color: var(--text); }

/* ---- Search ---- */

.search-form { display: flex; gap: .6rem; margin-bottom: 1rem; max-width: 46rem; }
.search-form input { flex: 1; min-width: 0; }
.search-form select { width: auto; }

/* ---- Tables ---- */

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
table.records { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur)); }
.table-wrap > table.records, .records-card { border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
table.records th, table.records td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.records tbody tr:last-child td { border-bottom: 0; }
/* The list's header: quiet labels on a band of the tab colour, ruled by it. */
.table-wrap > table.records thead th {
  background: color-mix(in oklch, var(--tab-soft) 70%, var(--surface)); color: var(--text-muted);
  font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 2px solid var(--tab); white-space: nowrap;
}
.table-wrap > table.records thead th a { color: var(--text); }
.panel table.records thead th { color: var(--text-muted); font-weight: 650; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
table.records th a { color: inherit; }
[data-list-head="plain"] .table-wrap > table.records thead th,
[data-list-head="plain"] table.calendar th { background: var(--surface-2); border-bottom-color: var(--border); }
[data-list-head="accent"] .table-wrap > table.records thead th,
[data-list-head="accent"] table.calendar th { background: color-mix(in oklch, var(--accent-soft) 70%, var(--surface)); border-bottom-color: var(--accent); }
table.records tbody tr { transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
table.records tbody tr:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--tab); }
table.records.compact td { padding: .45rem .7rem; }
table.records input.narrow { width: 5rem; }
td.order { white-space: nowrap; width: 4.5rem; }
td.order form, td form { display: inline; }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline; }
.add-row { margin-top: 1rem; }
.pagination { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; color: var(--text-muted); font-size: .925rem; }

/* ---- Home: the drawers ---- */

/* ---- Dashboard: stat tiles and single-hue bar charts ---- */

.dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; margin: 0 0 2.25rem; }
/* A tile with its entity's colour as a band along the top. */
.widget {
  display: block; min-width: 0; padding: 1.25rem 1.4rem 1.3rem; color: var(--text);
  background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur)); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent);
  border-radius: var(--radius-lg); box-shadow: inset 0 3px 0 var(--tab), var(--shadow-md);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
a.widget:hover, .widget.chart:hover { text-decoration: none; transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--tab), var(--shadow-lg); }
.widget h2 { margin: 0 0 .4rem; font-size: .9rem; font-weight: 600; color: var(--text-muted); }
.widget h2 a { color: inherit; }
.widget .hint { margin: 0; }
.widget .condition::before { content: "· "; }
.widget .figure { margin: .15rem 0 .5rem; font-size: 2.6rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.widget.chart { grid-column: span 2; }
.widget.broken { box-shadow: inset 0 3px 0 var(--danger), var(--shadow-md); }
.widget.broken .alert { margin: .4rem 0 0; }
@media (max-width: 40rem) { .widget.chart { grid-column: auto; } }

/* ---- Charts of a list (charts.html, chart_svg.rs): one series in the
   entity's colour, hairline grid, text in text tokens. ---- */
.charts-scope { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.charts-scope p { margin: 0; color: var(--text-muted); }
.charts-scope .chip { margin: 0 .2rem; padding-right: .8rem; }
.charts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.charts-actions .save-view { display: flex; align-items: center; gap: .5rem; margin: 0; }
.charts-actions .save-view input { width: 12rem; }
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.figure { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.figure-label { color: var(--text-muted); font-size: .85rem; }
.figure-value { font-size: 1.5rem; font-weight: 650; line-height: 1.2; }
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
.chart { margin: 0; min-width: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.chart-head h2 { font-size: 1rem; margin: 0 0 .6rem; }
.chart-title { flex: 1; min-width: 0; margin: 0; }
.chart-title h2 label { display: block; }
.chart-title input { width: 100%; font: inherit; font-weight: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm, 4px); padding: .1rem .3rem; margin-left: -.3rem; text-overflow: ellipsis; }
.chart-title input:hover { border-color: var(--border); }
.chart-title input:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chart-tools { display: flex; align-items: center; gap: .8rem; font-size: .875rem; white-space: nowrap; }
.chart-tools form { margin: 0; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-plot .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-plot .grid.zero { stroke: var(--border-strong); }
.chart-plot .axis { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-plot .end-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.chart-plot .mark { fill: var(--tab); transition: opacity var(--duration) var(--ease); }
.chart-plot .line { fill: none; stroke: var(--tab); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-plot .wash { fill: var(--tab); opacity: .1; }
.chart-plot .dot { fill: var(--tab); stroke: var(--surface); stroke-width: 2; }
.chart-plot .hit { fill: transparent; }
.chart-plot a:hover .hit, .chart-plot a:focus-visible .hit { fill: var(--text); fill-opacity: .05; }
.chart-plot .dot { pointer-events: none; }
.chart-plot a:hover .mark, .chart-plot a:focus-visible .mark { opacity: .75; }
.chart-plot a:focus-visible { outline: none; }
.chart-table, .chart-edit { margin-top: .6rem; }
.chart-table summary, .chart-edit summary, .chart-add summary { cursor: pointer; color: var(--text-muted); font-size: .875rem; }
.chart-table table { margin-top: .4rem; }
.chart-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; margin-top: .6rem; }
.chart-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--text-muted); }
.chart-form select { width: auto; max-width: 14rem; }
.chart-add { margin-top: 1rem; }
.bars { list-style: none; margin: .8rem 0 .2rem; padding: 0; display: grid; gap: 2px; }
.bars a {
  display: grid; grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr) auto; gap: .7rem; align-items: center;
  min-height: 1.9rem; padding: .15rem .35rem; border-radius: 6px; color: var(--text);
}
.bars a:hover, .bars a:focus-visible { background: var(--surface-2); text-decoration: none; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .92rem; }
.bar-track { display: block; height: .85rem; border-left: 1px solid var(--border-strong); }
.bar { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg, color-mix(in oklch, var(--tab) 80%, var(--surface)), var(--tab)); border-radius: 0 6px 6px 0; }
.bars a:hover .bar { background: color-mix(in oklch, var(--tab) 82%, var(--surface)); }
/* A user's colour may be as pale as the surface: an edge keeps the bar visible. */
.bar.colored { background: var(--bar, var(--border-strong)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text) 25%, transparent); }
.bars a:hover .bar.colored { background: color-mix(in oklch, var(--bar, var(--border-strong)) 82%, var(--surface)); }
.bar-value { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Home: a card per entity, its colour as a tile; lifted on hover. */
.drawers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; }
.drawers-heading { display: flex; align-items: center; gap: .45rem; margin: 2rem 0 .85rem; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.drawers li {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: .9rem 1rem;
  padding: 1.25rem 1.35rem 1.1rem; background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.drawers li:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.drawers .swatch {
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in oklch, var(--tab) 70%, var(--surface)), var(--tab));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--surface) 35%, transparent), 0 4px 10px -4px color-mix(in oklch, var(--tab) 70%, transparent);
}
.drawers h2 { margin: 0; font-size: 1.1rem; font-weight: 650; }
.drawers h2 a { color: var(--text); }
/* The whole card leads to the list; the actions stay above it. */
.drawers h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.drawers .links { grid-column: 1 / -1; position: relative; display: flex; gap: .1rem; flex-wrap: wrap; margin: 0 -.4rem; padding-top: .8rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .875rem; }
.drawers .links .action-link { color: var(--accent-text); gap: .3rem; padding: .25rem .4rem; border-radius: var(--radius-sm); transition: background-color var(--duration) var(--ease); }
.drawers .links .action-link:hover { background: var(--accent-soft); text-decoration: none; }

/* Action links: text, icon or both, after <html data-actions> (Apparence).
   The text of an icon alone stays for screen readers; `title` shows it. */
.action-link { display: inline-flex; align-items: center; gap: .35rem; }
[data-actions="text"] .action-link .icon { display: none; }
[data-actions="icons"] .action-link .action-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-actions="icons"] .button.action-link { padding-inline: .65rem; }
/* An icon alone is a small target: give it a finger-sized one. */
[data-actions="icons"] .drawers .action-link { justify-content: center; min-width: 2rem; min-height: 2rem; border-radius: var(--radius); }
[data-actions="icons"] .drawers .action-link:hover { background: var(--tab-soft); }
/* The samples of the setting each show their own style, whatever the page's. */
.action-sample { display: inline-flex; gap: .9rem; min-width: 11rem; color: var(--accent-text); }
.action-sample .action-link .icon { display: inline; }
.action-sample .action-link .action-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.action-sample[data-actions="text"] .action-link .icon { display: none; }
.action-sample[data-actions="icons"] .action-link .action-text { display: none; }
.action-styles .action-style { display: flex; align-items: center; gap: .9rem; padding: .45rem 0; cursor: pointer; }

/* Same-weight entries keep the old card grid for admin summaries. */
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-md); }
.card h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.card p { margin: .2rem 0; color: var(--text-muted); }

/* ---- Badges, workflow ---- */

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .7rem; border-radius: 999px; background: var(--tab-soft); color: var(--tab-ink); border: 1px solid color-mix(in oklch, var(--tab) 30%, transparent); font-size: .825rem; font-weight: 650; vertical-align: middle; }
.plan-section { margin: 0 0 1rem; }
.plan-section > summary { cursor: pointer; padding: .6rem .2rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
.with-unit { display: flex; align-items: center; gap: .5rem; }
.with-unit input { flex: 1; }
.with-unit .unit { color: var(--text-muted); font-size: .9rem; min-width: 2rem; }
.badge.plan-badge { padding: .05rem .5rem; font-size: .75rem; }
.badge.locked { background: var(--surface-2); color: var(--text-muted); border-color: var(--border-strong); }
.device-secret p { margin: 0 0 .5rem; }
#rappels table.records { margin-bottom: 1.25rem; }
.device-secret .secret { font-size: 1.1rem; letter-spacing: .04em; user-select: all; }
/* Second login step: the secret to scan, and the 6-digit code. */
.enrolment { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.enrolment .qr { width: 11rem; height: 11rem; flex: none; border-radius: var(--radius); border: 1px solid var(--border); }
.enrolment > div { flex: 1 1 16rem; }
.enrolment .secret { user-select: all; overflow-wrap: anywhere; }
.code-input { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .2em; }
.locked-banner { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .7rem 1rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: .925rem; }
.locked-note { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); font-size: .875rem; font-weight: 500; }
.panel.workflow { background: var(--tab-soft); border-color: color-mix(in oklch, var(--tab) 40%, transparent); }
.panel.workflow .badge { background: var(--surface); }
.panel.workflow .panel-header { margin: 0; }
.panel.workflow .actions form { margin: 0; }

/* ---- History ---- */

.history-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.history-list > li { border-top: 1px solid var(--border); padding: .6rem 0; }
.history-list > li:first-child { border-top: 0; }
.history-head { margin-bottom: .3rem; }
.history-list td.arrow { color: var(--text-muted); width: 2rem; text-align: center; }
.history-list table.records { table-layout: fixed; }
.history-list td:first-child { width: 35%; color: var(--text-muted); }
details > summary { cursor: pointer; }
.role-rights details summary { color: var(--accent-text); margin: .4rem 0; }

/* ---- Calendar ---- */

table.calendar { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
table.calendar th { padding: .7rem .5rem; color: var(--text-muted); font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in oklch, var(--tab-soft) 70%, var(--surface)); border-bottom: 2px solid var(--tab); }
table.calendar td { vertical-align: top; height: 7.5rem; padding: .4rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; transition: background-color var(--duration) var(--ease); }
table.calendar td:hover { background: var(--surface-2); }
table.calendar td:last-child { border-right: 0; }
table.calendar tbody tr:last-child td { border-bottom: 0; }
table.calendar td.outside { background: var(--surface-2); color: var(--text-muted); }
table.calendar td.today .day-number { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); font-weight: 700; }
.day-number { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; font-size: .85rem; font-weight: 550; font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.event { display: block; font-size: .8rem; font-weight: 600; background: var(--tab-soft); color: var(--tab-ink); border-radius: 6px; padding: .15rem .45rem; margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-xs); transition: filter var(--duration) var(--ease); }
a.event:hover { text-decoration: none; filter: brightness(.96); }
/* The record's colour, as an edge: the text keeps the theme's contrast. */
/* The record's colour fills the event; its ink is chosen for contrast. */
.event.marked { background: var(--mark); color: var(--mark-ink); }
.event.continues-before { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -.3rem; }
.event.continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -.3rem; }

/* ---- Accounts, facts ---- */

/* ---- Welcome pages (login, first launch): no rail, two halves ---- */

body.welcome-page main { padding: 0; }
.welcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.welcome-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem 3rem;
  background: linear-gradient(150deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
}
.welcome-name { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; font-weight: 700; }
.welcome-name img { max-height: 2.5rem; max-width: 10rem; border-radius: var(--radius); background: var(--surface); padding: .2rem; }
.welcome-name .brand-mark { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; background: var(--on-accent); color: var(--accent-text); }
.welcome-pitch { margin-top: auto; max-width: 28rem; }
.welcome-pitch p { margin: 0 0 .6rem; font-size: 1.05rem; opacity: .92; }
.welcome-pitch .welcome-tagline { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 750; line-height: 1.15; opacity: 1; text-wrap: balance; }
.welcome-version { margin: auto 0 0; font-size: .85rem; opacity: .8; }

/* Index cards fanned out, each with its coloured tab. */
.welcome-cards { position: relative; height: 11rem; max-width: 24rem; }
.welcome-card-deco {
  position: absolute; width: 15rem; height: 8.5rem; padding: 1.4rem 1.1rem 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px color-mix(in oklch, var(--text) 25%, transparent);
  animation: welcome-deal .7s var(--ease) both;
}
.welcome-card-deco:nth-child(1) { left: 0; top: 2rem; transform: rotate(-7deg); }
.welcome-card-deco:nth-child(2) { left: 4rem; top: .8rem; transform: rotate(-1deg); animation-delay: .08s; }
.welcome-card-deco:nth-child(3) { left: 8rem; top: 2.2rem; transform: rotate(6deg); animation-delay: .16s; }
.deco-tab { position: absolute; top: -.7rem; left: 1rem; width: 4.5rem; height: 1rem; border-radius: 5px 5px 0 0; background: var(--tab); }
.deco-line { display: block; height: .55rem; border-radius: 999px; background: var(--tab-soft); }
.deco-line:first-of-type { background: var(--tab); width: 60%; }
.deco-line.short { width: 40%; }
@keyframes welcome-deal { from { opacity: 0; translate: 0 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .welcome-card-deco { animation: none; } }

.welcome-form { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: var(--ground); }
.welcome-panel { width: 100%; max-width: 24rem; }
.welcome-panel h1 { margin: 0 0 .2rem; font-size: 1.75rem; }
.welcome-panel .hint { margin-bottom: 1.5rem; }
.welcome-panel .welcome-help { margin: 1.25rem 0 0; text-align: center; }
.welcome-submit { width: 100%; justify-content: center; min-height: 2.75rem; margin-top: .5rem; font-size: 1rem; }

/* An icon inside the field, on its left. */
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: .7rem; top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.field .input-icon input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding-left: 2.3rem; min-height: 2.6rem; }

@media (max-width: 52rem) {
  .welcome { grid-template-columns: 1fr; min-height: 0; }
  .welcome-brand { gap: 1rem; padding: 1.5rem 1rem 1.75rem; }
  .welcome-pitch { margin-top: 0; }
  .welcome-pitch .welcome-tagline { font-size: 1.6rem; }
  .welcome-cards { display: none; }
  .welcome-form { padding: 2rem 1rem 3rem; place-items: start center; }
}
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin: 0; }
dl.facts dt { color: var(--text-muted); }
dl.facts dd { margin: 0; }

/* ---- Notifications ---- */

ul.notifications { list-style: none; margin: 0; padding: 0; }
ul.notifications li { display: flex; flex-direction: column; padding: .6rem .2rem; border-top: 1px solid var(--border); }
ul.notifications li:first-child { border-top: 0; }
ul.notifications li.unread a { font-weight: 700; }
ul.notifications .hint { margin: .1rem 0 0; }

/* ---- Settings editors: show only what applies (no JS) ---- */

.field-editor .opt { display: none; }
.field-editor:has(#f-kind option[value="text"]:checked) .opt-text,
.field-editor:has(#f-kind option[value="integer"]:checked) .opt-integer,
.field-editor:has(#f-kind option[value="decimal"]:checked) .opt-decimal,
.field-editor:has(#f-kind option[value="date"]:checked) .opt-date,
.field-editor:has(#f-kind option[value="boolean"]:checked) .opt-boolean,
.field-editor:has(#f-kind option[value="color"]:checked) .opt-color,
.field-editor:has(#f-kind option[value="enum"]:checked) .opt-enum,
.field-editor:has(#f-kind option[value="reference"]:checked) .opt-reference,
.field-editor:has(#f-kind option[value="references"]:checked) .opt-references,
.field-editor:has(#f-kind option[value="rollup"]:checked) .opt-rollup,
.field-editor:has(#f-kind option[value="files"]:checked) .opt-files,
.field-editor:has(#f-kind option[value="photo"]:checked) .opt-files,
.field-editor:has(#f-kind option[value="rich_text"]:checked) .opt-rich-text,
.field-editor:has(#f-kind option[value="datetime"]:checked) .opt-datetime { display: block; }
.field-editor:has(#f-kind option[value="rich_text"]:checked) .no-rich { display: none; }
.field-editor:has(#f-kind option[value="rollup"]:checked) .no-rollup,
.field-editor:has(#f-kind option[value="files"]:checked) .no-rollup,
.field-editor:has(#f-kind option[value="photo"]:checked) .no-rollup { display: none; }
/* The formula section only once asked for; a computed field has no input-only options. */
.field-editor:not(:has(#f-computed:checked)) .when-computed { display: none !important; }
.field-editor:has(#f-computed:checked) .when-input { display: none !important; }
.field-editor:not(:has(#f-copy:checked)) .when-copy { display: none; }
.calendar-editor:not(:has([name="enabled"]:checked)) .when-enabled { display: none; }
/* Plan element template: only what the chosen role needs. */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.choice-card { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-weight: 400; }
.field .choice-card { display: flex; }
.choice-card:has(input:checked) { border-color: var(--accent); box-shadow: var(--ring); }
.choice-card span { display: flex; flex-direction: column; gap: .15rem; }
.choice-card small { color: var(--text-muted); }
.plan-template .for-zone, .plan-template .for-figure, .plan-template .for-placement, .plan-template .for-placed { display: none; }
.plan-template:has([name="role"][value="zone"]:checked) .for-zone,
.plan-template:has([name="role"][value="figure"]:checked) .for-figure,
.plan-template:has([name="role"][value="placement"]:checked) .for-placement,
.plan-template:has([name="role"][value="placed"]:checked) .for-placed { display: block; }
.plan-template label .for-zone, .plan-template label .for-figure, .plan-template label .for-placed { display: none; }
.plan-template:has([name="role"][value="zone"]:checked) label .for-zone,
.plan-template:has([name="role"][value="figure"]:checked) label .for-figure,
.plan-template:has([name="role"][value="placed"]:checked) label .for-placed { display: inline; }
.calendar-editor .span-end, .calendar-editor .span-duration { display: none; }
.calendar-editor:has([name="span"][value="end"]:checked) .span-end,
.calendar-editor:has([name="span"][value="duration"]:checked) .span-duration { display: block; }

/* ---- Appearance: theme picker ---- */

.theme-group { border: 0; box-shadow: none; background: none; padding: 0; margin: 0 0 1.25rem; }
.theme-group legend { background: none; border: 0; padding: 0 0 .5rem; margin: 0; color: var(--text); font-size: 1rem; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .9rem; }
.theme-option { display: block; cursor: pointer; border-radius: var(--radius-lg); border: 2px solid var(--border); background: var(--surface); padding: .55rem; box-shadow: var(--shadow-sm); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.theme-option:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: var(--ring), var(--shadow-md); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-option .choice { display: flex; align-items: center; gap: .5rem; padding: .5rem .25rem .15rem; font-weight: 650; }
/* A miniature of the shell, painted with the theme's own tokens. */
.theme-preview { display: grid; grid-template-columns: 34% 1fr; height: 6.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--ground); }
.theme-preview .p-rail { background: var(--rail-bg); border-right: 1px solid var(--rail-border); padding: .45rem .35rem; display: flex; flex-direction: column; gap: .25rem; }
.theme-preview .p-item { display: flex; align-items: center; gap: .25rem; height: .7rem; padding: 0 .2rem; border-radius: 3px; }
.theme-preview .p-item::after { content: ""; flex: 1; height: .22rem; border-radius: 2px; background: var(--rail-muted); opacity: .7; }
.theme-preview .p-item.active { background: var(--rail-active-bg); }
.theme-preview .p-item.active::after { background: var(--rail-active-text); opacity: 1; }
.theme-preview .p-item i { width: .3rem; height: .4rem; border-radius: 1px; background: var(--tab); }
.theme-preview .p-main { padding: .45rem; display: flex; flex-direction: column; gap: .3rem; }
.theme-preview .p-title { display: flex; justify-content: space-between; align-items: center; }
.theme-preview .p-title::before { content: ""; width: 40%; height: .32rem; border-radius: 2px; background: var(--text); }
.theme-preview .p-button { width: 1.6rem; height: .6rem; border-radius: 3px; background: var(--accent); }
.theme-preview .p-card { flex: 1; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.theme-preview .p-card::before { content: ""; display: block; height: .55rem; background: var(--tab-soft); border-bottom: 1.5px solid var(--tab); }
.logo-preview { display: inline-grid; place-items: center; min-width: 8rem; min-height: 4rem; padding: .75rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--rail-bg); }
.logo-preview img { max-height: 3rem; max-width: 14rem; }

/* ---- Small screens: the rail becomes a top bar with scrolling tabs ---- */

@media (max-width: 760px) {
  body { flex-direction: column; }
  /* Brand and tools on one line, the entity tabs scrolling below. */
  .sidebar { width: auto; border-right: 0; border-bottom: 1px solid var(--rail-border); }
  .rail { position: static; height: auto; overflow: visible; padding: .5rem .75rem .4rem; gap: .35rem .5rem;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "tabs tabs"; align-items: center; }
  .brand { grid-area: brand; padding: 0 .25rem; min-height: 2.5rem; }
  .brand img { max-height: 2.25rem; }
  /* The sub-menus become one scrolling row, categories as separators. */
  .sidebar ul.entities { display: none; }
  .sidebar ul.entities-row { display: flex; grid-area: tabs; flex-direction: row; align-items: center; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.75rem; padding: 0 .75rem .1rem; }
  .sidebar ul.entities-row .nav-item { white-space: nowrap; width: auto; }
  .nav-separator { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; margin-left: .5rem; padding-left: .7rem; border-left: 1px solid var(--rail-border); color: var(--rail-muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  .nav-separator:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
  .sidebar-footer { grid-area: tools; margin: 0; padding: 0; border: 0; flex-direction: row; gap: 0; }
  .sidebar .sidebar-footer .nav-item { width: auto; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .35rem; position: relative; }
  .app-version { display: none; }
  .sidebar-footer .label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sidebar .count { position: absolute; top: .15rem; right: .05rem; min-width: 1.15rem; line-height: 1.15rem; font-size: .7rem; padding: 0 .25rem; }
  main { padding: 1.25rem 1rem 2.5rem; }
  /* One column: the history becomes a bar above the record. */
  .record-layout.with-side { grid-template-columns: minmax(0, 1fr); }
  .record-layout.with-side > .record-main, .record-layout.with-side > .record-side { grid-column: auto; grid-row: auto; }
  .record-side { position: static; max-height: none; overflow: visible; }
  .record-side.with-photo { width: auto; }
  .history-pane details:not([open]) summary { writing-mode: horizontal-tb; }
  .history-pane details[open] { width: auto; }
  .page-header { margin-bottom: 1.25rem; }
  .page-header h1 { font-size: 1.5rem; }
  .button { min-height: 2.75rem; }
  fieldset, .panel { padding-left: 1rem; padding-right: 1rem; }
  .drawers { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  table.calendar td { height: 4.5rem; padding: .15rem; }
  table.calendar th { padding: .35rem .1rem; font-size: .8rem; }
  .event { font-size: .7rem; padding: 0 .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---- Schedule editor: only what the chosen period and task need (no JS) ---- */

.schedule-editor .when-weekly, .schedule-editor .when-monthly,
.schedule-editor .task-set, .schedule-editor .task-transition, .schedule-editor .task-notify { display: none; }
.schedule-editor:has(#f-period option[value="weekly"]:checked) .when-weekly,
.schedule-editor:has(#f-period option[value="monthly"]:checked) .when-monthly,
.schedule-editor:has(#f-task option[value="update"]:checked) .task-set,
.schedule-editor:has(#f-task option[value="create"]:checked) .task-set,
.schedule-editor:has(#f-task option[value="transition"]:checked) .task-transition,
.schedule-editor:has(#f-task option[value="notify"]:checked) .task-notify { display: block; }
.schedule-editor:has(#f-task option[value="create"]:checked) .task-filter { display: none; }
.schedule-editor .set-line { margin-bottom: .5rem; }
.schedule-editor .set-line select { flex: 0 1 14rem; width: auto; }
.schedule-editor .set-line input { flex: 1 1 12rem; }

/* ---- Lists: filters, chips, saved views, totals ---- */

.list-form { max-width: 46rem; margin-bottom: 1rem; }
.list-form .search-form { margin-bottom: .5rem; }
details.filters { background: var(--surface); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg); padding: .55rem 1.1rem; box-shadow: var(--shadow-sm); }
details.filters[open] { padding-bottom: 1rem; box-shadow: var(--shadow-md); }
details.filters summary { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--accent-text); min-height: 2rem; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.4fr); gap: .5rem; margin: .5rem 0; }
.filter-value { display: block; min-width: 0; }
.filter-row select, .filter-row input { min-height: var(--control-height); padding: .45rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); width: 100%; box-shadow: inset 0 1px 2px var(--shadow); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .9rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; padding: .15rem .35rem .15rem .8rem; border-radius: 999px; background: var(--tab-soft); color: var(--tab-ink); border: 1px solid color-mix(in oklch, var(--tab) 30%, transparent); font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-xs); transition: background-color var(--duration) var(--ease); }
a.chip:hover { text-decoration: none; background: var(--accent-soft); }
.chip a { color: inherit; }
.chip.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip form { display: inline; margin: 0; }
.chip-remove { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.chip-remove:hover { background: color-mix(in oklch, currentColor 15%, transparent); }
/* Search and filters on the left, the views on the right (one column on
   small screens, the views after). */
.list-top { display: grid; grid-template-columns: minmax(0, 46rem) minmax(15rem, 19rem); gap: 0 1.25rem; align-items: start; margin-bottom: .4rem; }
.list-controls { min-width: 0; }
.list-controls .search-form { max-width: none; }
.views-panel { padding: 1.15rem 1.25rem; margin: 0 0 1rem; }
.views-panel h2 { margin: 0 0 .6rem; font-size: 1rem; }
.views-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.views-list li { display: flex; align-items: center; gap: .3rem; padding: .3rem .25rem .3rem .6rem; border-radius: var(--radius-sm); transition: background-color var(--duration) var(--ease); }
.views-list li:hover { background: var(--tab-soft); }
.views-list li.current { background: var(--tab-soft); font-weight: 650; }
.views-list li a { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.views-list form { margin: 0; }
.views-panel .hint { margin: 0 0 .8rem; }
.save-view { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 .5rem; }
.save-view input:not([type="hidden"]) { min-height: var(--control-height); padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 2px var(--shadow); }
.views-panel .button { width: 100%; justify-content: center; }
@media (max-width: 1100px) { .list-top { grid-template-columns: minmax(0, 1fr); } }
table.records tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); border-bottom: 0; }
@media (max-width: 760px) {
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row .filter-value { grid-column: 1 / -1; }
}

/* iPhone shortcut guide. */
.code-block { margin: 0; padding: .8rem 1rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-family: var(--mono); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.shortcut-steps li { margin-bottom: .4rem; }
/* Configuration assistant: the credit panel. */
.ai-credit-figures { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-bottom: 1rem; }
.ai-figure { display: flex; flex-direction: column; gap: .1rem; }
.ai-figure-label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ai-figure strong { font-size: 1.5rem; font-weight: 700; }
.meter { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 1rem; }
.meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width var(--duration) var(--ease); }
.meter-fill.over { background: var(--danger); }
/* Configuration assistant. */
.assistant-summary { white-space: pre-line; max-width: 70ch; }
.assistant-entity { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.assistant-entity h3 { margin: 0 0 .6rem; }
.assistant-entity h3 small { font-weight: 400; color: var(--text-muted); }
.assistant-facts { display: grid; gap: .35rem; margin: .8rem 0 0; }
.assistant-facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; }
.assistant-facts dt { color: var(--text-muted); }
.assistant-facts dd { margin: 0; }
.assistant-create { margin-top: 1.4rem; }
.assistant-wait { margin-left: 1rem; color: var(--text-muted); display: none; }
.htmx-request .assistant-wait, .htmx-request.assistant-wait { display: inline; }
@media (max-width: 40rem) { .assistant-facts > div { grid-template-columns: 1fr; gap: 0; } }

/* Navigation editor: a category's icon next to its choice. */
.nav-icon-cell { display: flex; align-items: center; gap: .5rem; }
.nav-icon-preview { display: inline-grid; place-items: center; width: 1.4rem; flex-shrink: 0; color: var(--text-muted); }

/* ---- Plan: a zone drawn to scale (pages/plan.rs) ---- */
.plan-zones { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.plan-zone { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); }
.plan-zone:hover { text-decoration: none; background: var(--tab-soft); }
.plan-zone[aria-current="page"] { border-color: var(--tab); background: var(--tab-soft); font-weight: 650; }
.plan { margin: 0; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px var(--shadow), 0 4px 12px -6px var(--shadow); }
.plan figcaption { margin-top: .5rem; color: var(--text-muted); font-size: .9rem; }
/* As large as the screen allows, never taller than the window. */
.plan-drawing { display: block; width: 100%; height: auto; max-height: 78vh; font-size: var(--plan-font); }
.plan-zone-area { fill: var(--ground); }
.plan-border { fill: none; stroke: var(--border-strong); stroke-width: var(--plan-stroke); }
.plan-ruler line { stroke: var(--text-muted); stroke-width: var(--plan-stroke); }
.plan-ruler text { fill: var(--text-muted); }
.plan-figure .plan-frame { fill: none; stroke: var(--tab); stroke-width: var(--plan-stroke); }
.plan-figure .plan-block { fill: var(--tab-soft); stroke: var(--tab); stroke-width: var(--plan-stroke); }
.plan-figure .plan-name { fill: var(--text); font-size: .8em; pointer-events: none; }
.plan-figure:hover .plan-frame, .plan-figure:hover .plan-block, .plan-figure:focus-visible .plan-frame, .plan-figure:focus-visible .plan-block { stroke: var(--accent); stroke-width: calc(var(--plan-stroke) * 3); }
.plan-notes { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--text-muted); }
/* Movable figures (assets/plan.js). */
svg[data-move-url] .plan-figure { cursor: grab; }
svg[data-move-url] .plan-figure.dragging { cursor: grabbing; opacity: .85; }
svg[data-move-url] .plan-figure.saving { opacity: .6; }
.plan-figure:focus { outline: none; }
.plan-status { min-height: 1.4em; margin: .4rem 0 0; color: var(--success); font-size: .9rem; }
.plan-status.error { color: var(--danger); }


/* ---- Markdown editor (admin/_markdown.html, assets/markdown.js) ---- */
.md-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .3rem; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
.md-button { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.md-button:hover { background: var(--surface); border-color: var(--border); }
.md-toolbar .md-insert { margin-left: auto; width: auto; min-height: 2rem; padding: .2rem .5rem; font: inherit; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.md-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field .md-panes textarea { min-height: 10rem; border-radius: 0 0 0 var(--radius); font-family: var(--mono); font-size: .875rem; resize: vertical; }
/* The preview reads like the printed paper, whatever the theme. */
.md-preview { min-height: 10rem; padding: .6rem .8rem; overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 0 var(--radius) 0; font-size: .9rem; }
.md-preview > :first-child { margin-top: 0; }
.md-preview p { margin: 0 0 .5rem; }
.md-preview h1, .md-preview h2, .md-preview h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.md-preview table { border-collapse: collapse; }
.md-preview th, .md-preview td { padding: .1rem 1rem .1rem 0; text-align: left; }
.md-preview img { max-height: 3.5rem; max-width: 12rem; vertical-align: middle; }
@media (max-width: 52rem) {
  .md-panes { grid-template-columns: 1fr; }
  .field .md-panes textarea { border-radius: 0; }
  .md-preview { border-left: 1px solid var(--border-strong); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
}

/* ---- Formatted text of a record (form.html): Écrire / Aperçu, CSS only ---- */
.rich-tabs { display: inline-flex; gap: .15rem; padding: .2rem; margin-bottom: .4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.rich-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.field .rich-tabs label { display: inline-flex; align-items: center; margin: 0; padding: .2rem .8rem; font-weight: 500; font-size: .875rem; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.rich-tabs input:checked + label { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.rich-tabs input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }
.field .rich-editor textarea { min-height: 12rem; border-radius: 0 0 var(--radius) var(--radius); font-family: var(--mono); font-size: .875rem; resize: vertical; }
.rich-editor .md-preview { display: none; min-height: 12rem; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.rich-editor:has(.rich-show:checked) .md-preview { display: block; }
.rich-editor:has(.rich-show:checked) .md-toolbar,
.rich-editor:has(.rich-show:checked) textarea { display: none; }
/* Read as a document: full-size headings and images within the column. */
.rich-text { font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p, .rich-text ul, .rich-text ol, .rich-text table { margin: 0 0 .65rem; }
.rich-text h1, .rich-text h2, .rich-text h3 { margin: .9rem 0 .4rem; line-height: 1.25; }
.rich-text h1 { font-size: 1.3rem; }
.rich-text h2 { font-size: 1.15rem; }
.rich-text h3 { font-size: 1rem; }
.rich-text table { border-collapse: collapse; }
.rich-text th, .rich-text td { padding: .25rem .75rem .25rem 0; border-bottom: 1px solid var(--border); text-align: left; }
.rich-text img { max-width: 100%; max-height: 24rem; height: auto; border-radius: var(--radius-sm); }
.rich-text blockquote { margin: 0 0 .65rem; padding-left: .8rem; border-left: 3px solid var(--border-strong); color: var(--text-muted); }
.rich-text code { font-family: var(--mono); font-size: .85em; }

/* Print screens: the company's details, the letterheads. */
.key-input { display: inline-flex; align-items: center; gap: .1rem; font-family: var(--mono); font-size: .85rem; color: var(--text-muted); }
table.records .key-input input:not([type="checkbox"]) { width: 9rem; font-family: var(--mono); font-size: .85rem; }
.letterhead-list { list-style: none; margin: 0; padding: 0; }
.letterhead-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.letterhead-list li:first-child { border-top: 0; }
.letterhead-list form { display: inline; }
.letterhead-choice select { width: auto; min-height: 2.2rem; }
.company-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.company-logo form { display: inline; }

/* Backups (admin/backups.html). */
.backup-schedule { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.25rem; }
.backup-schedule > .checkbox { align-self: center; margin-top: 1.4rem; }
.backup-schedule .field { margin-bottom: 0; }
.backup-schedule .form-actions { margin-bottom: 0; }
.backup-schedule input[type="number"], .backup-schedule input[type="time"] { width: 8rem; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
.backup-actions form { display: inline; }
.backup-import { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.backup-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem 1.5rem; margin: 0 0 1rem; }
.backup-preview dt { color: var(--text-muted); font-size: .875rem; }
.backup-preview dd { margin: 0; font-weight: 600; }
.panel.restored { max-width: 32rem; margin: 4rem auto; }

/* Appearance: typefaces, each sample in its own. */
.font-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.font-option { display: flex; flex-direction: column; gap: .35rem; cursor: pointer; padding: .85rem 1rem; border-radius: var(--radius-lg); border: 2px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.font-option:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.font-option:has(input:checked) { border-color: var(--accent); box-shadow: var(--ring), var(--shadow-md); }
.font-option .choice { display: flex; align-items: center; gap: .5rem; font-weight: 650; }
.font-option .hint { margin: 0; }
.font-sample { display: flex; flex-direction: column; gap: .2rem; color: var(--text); font-size: .9rem; }
.font-sample .font-big { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.font-sample[data-font="inter"] { font-family: "Inter", var(--system-font); }
.font-sample[data-font="jakarta"] { font-family: "Plus Jakarta Sans", var(--system-font); }
.font-sample[data-font="atkinson"] { font-family: "Atkinson Hyperlegible Next", var(--system-font); }
.font-sample[data-font="system"] { font-family: var(--system-font); }

/* Hidden from sight, read by screen readers. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- An entity's icon: drawn on a tile of its colour ---- */

.swatch.with-icon {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px;
  background: linear-gradient(150deg, color-mix(in oklch, var(--tab) 72%, var(--surface)), var(--tab));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--surface) 30%, transparent), var(--shadow-xs);
}
/* What reads on the tile: the ground's colour, or the one computed for an
   entity's own colour (`--tab-on`, web::palette). */
.swatch.with-icon .icon, .sidebar .nav-item .swatch.with-icon .icon { width: 62%; height: 62%; color: var(--tab-on, var(--surface)); stroke-width: 2; }
.page-header h1 .swatch.with-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.drawers .swatch.with-icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; }

/* ---- Entity editor: colour and icon pickers ---- */

.plain-group { border: 0; box-shadow: none; background: none; padding: 0; margin: .5rem 0 1.25rem; }
.plain-group legend { background: none; border: 0; box-shadow: none; padding: 0 0 .5rem; margin: 0; color: var(--text); font-size: .925rem; font-weight: 600; }
.tab-picker, .icon-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.tab-choice, .icon-choice {
  position: relative; display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .75rem;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm); cursor: pointer; font-size: .9rem; font-weight: 550;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.tab-choice:hover, .icon-choice:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tab-choice input, .icon-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tab-choice:has(input:checked), .icon-choice:has(input:checked) { border-color: var(--accent); box-shadow: var(--ring), var(--shadow-sm); }
.tab-choice:has(input:focus-visible), .icon-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tab-choice { padding: 0; }
.tab-choice:has(> span:not(.tab-dot):not(.visually-hidden)) { padding: 0 .85rem; }
.tab-dot { width: 1.4rem; height: 1.4rem; border-radius: 999px; background: linear-gradient(150deg, color-mix(in oklch, var(--tab) 72%, var(--surface)), var(--tab)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text) 12%, transparent); }
.icon-choice { padding: 0; width: 2.6rem; }
.icon-choice:has(> span:not(.visually-hidden)) { width: auto; padding: 0 .85rem; }
.icon-choice .icon { width: 1.2rem; height: 1.2rem; color: var(--text-muted); }
.icon-choice:has(input:checked) .icon { color: var(--accent-text); }

/* Appearance: the two positions of the navigation, in miniature. */
.nav-positions { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.nav-preview { display: grid; height: 4.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--ground); }
.nav-preview-left { grid-template-columns: 30% 1fr; }
.nav-preview-top { grid-template-rows: 26% 1fr; }
.nav-preview .p-nav { display: flex; gap: .3rem; padding: .35rem; background: var(--rail-bg); border: 0 solid var(--rail-border); }
.nav-preview-left .p-nav { flex-direction: column; border-right-width: 1px; }
.nav-preview-top .p-nav { align-items: center; border-bottom-width: 1px; }
.nav-preview .p-nav i { display: block; height: .3rem; border-radius: 2px; background: var(--rail-muted); opacity: .6; }
.nav-preview-left .p-nav i { width: 80%; }
.nav-preview-top .p-nav i { width: 1.4rem; }
.nav-preview .p-nav i:first-child { background: var(--accent); opacity: 1; }
.head-preview { display: grid; grid-template-rows: 1.2rem 1fr 1fr; height: 4.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.head-preview .p-head { background: color-mix(in oklch, var(--accent-soft) 70%, var(--surface)); border-bottom: 2px solid var(--accent); }
.head-preview-plain .p-head { background: var(--surface-2); border-bottom-color: var(--border); }
.head-preview-tinted .p-head { background: color-mix(in oklch, var(--tab-soft) 70%, var(--surface)); border-bottom-color: var(--tab); }
.head-preview .p-row { border-bottom: 1px solid var(--border); }
.nav-preview .p-page { display: flex; flex-direction: column; gap: .3rem; padding: .45rem; }
.nav-preview .p-page span { display: block; height: .35rem; width: 55%; border-radius: 2px; background: var(--text); opacity: .7; }
.nav-preview .p-page span + span { flex: 1; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--border); opacity: 1; border-radius: 4px; }

/* ---- The navigation across the top (Apparence; on wide screens: small
   ones always have it there) ---- */

@media (min-width: 761px) {
  [data-nav="top"] body { flex-direction: column; }
  [data-nav="top"] .sidebar {
    position: sticky; top: 0; z-index: 30; width: auto;
    border-right: 0; border-bottom: 1px solid var(--rail-border);
    background: color-mix(in oklch, var(--rail-bg) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: var(--shadow-xs);
  }
  [data-nav="top"] .rail { position: static; height: auto; overflow: visible; flex-direction: row; align-items: center; gap: 1.25rem; padding: .55rem 2rem; }
  [data-nav="top"] .brand { margin: 0; flex-shrink: 0; min-height: 2.5rem; }
  [data-nav="top"] .sidebar .palette-open { width: auto; flex-shrink: 0; min-height: 2.25rem; }
  [data-nav="top"] .palette-open .palette-key { margin-left: .35rem; }
  [data-nav="top"] .brand img { max-height: 2.25rem; max-width: 10rem; }
  [data-nav="top"] .sidebar ul.entities { flex: 1; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .2rem; }
  [data-nav="top"] .sidebar ul.entities .nav-item { width: auto; white-space: nowrap; min-height: 2.25rem; }
  [data-nav="top"] .sidebar .nav-group { margin: 0; }
  /* A category: a menu under its name, open while hovered or focused. */
  [data-nav="top"] .nav-menu { position: relative; }
  [data-nav="top"] .nav-menu > .nav-item { cursor: default; gap: .45rem; color: var(--rail-text); }
  [data-nav="top"] .nav-menu > .nav-item .icon { color: var(--rail-muted); }
  [data-nav="top"] .nav-menu .chevron { width: .9rem; height: .9rem; transform: rotate(90deg); transition: transform var(--duration) var(--ease); }
  [data-nav="top"] .nav-menu:hover .chevron, [data-nav="top"] .nav-menu:focus-within .chevron { transform: rotate(-90deg); }
  [data-nav="top"] .nav-menu.current > .nav-item { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: 650; box-shadow: var(--shadow-sm); }
  [data-nav="top"] .nav-dropdown {
    display: none; position: absolute; top: calc(100% + .45rem); left: 0; z-index: 40; min-width: 14rem;
    flex-direction: column; gap: 2px; padding: .4rem;
    background: var(--surface); border: 1px solid color-mix(in oklch, var(--border) 75%, transparent);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  }
  /* A bridge over the gap, so that the pointer reaches the menu. */
  [data-nav="top"] .nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
  [data-nav="top"] .nav-menu:hover > .nav-dropdown, [data-nav="top"] .nav-menu:focus-within > .nav-dropdown { display: flex; }
  [data-nav="top"] .nav-dropdown .nav-item { width: 100%; color: var(--text); }
  [data-nav="top"] .nav-dropdown .nav-item:hover { background: var(--surface-2); }
  [data-nav="top"] .sidebar-footer { flex-shrink: 0; flex-direction: row; gap: .15rem; margin: 0; padding: 0; border: 0; }
  [data-nav="top"] .sidebar .sidebar-footer .nav-item { width: auto; min-width: 2.4rem; justify-content: center; padding: .4rem; position: relative; }
  [data-nav="top"] .sidebar-footer .label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-nav="top"] .sidebar .count { position: absolute; top: .1rem; right: 0; min-width: 1.15rem; line-height: 1.15rem; font-size: .7rem; padding: 0 .25rem; }
  [data-nav="top"] .app-version { display: none; }
  [data-nav="top"] main { width: 100%; max-width: 96rem; margin: 0 auto; }
  [data-nav="top"] .record-side { top: 5rem; max-height: calc(100vh - 6rem); }
}

/* A choice that is a colour picker (custom accent, an entity's own
   colour): picking selects it (assets/pickers.js). */
.accent-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.tab-choice.tab-own, .tab-choice.accent-custom { gap: .6rem; grid-auto-flow: column; padding: 0 .4rem 0 .85rem; }
.tab-choice.accent-custom, .accent-choices .tab-choice { padding: 0 .85rem; }
.tab-choice input[type="color"] {
  position: relative; opacity: 1; inset: auto; width: 2rem; height: 1.7rem; padding: 0; z-index: 1;
  border: 1px solid var(--border-strong); border-radius: 999px; background: none; cursor: pointer;
}
.tab-choice input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tab-choice input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 999px; }
.tab-choice input[type="color"]::-moz-color-swatch { border: 0; border-radius: 999px; }

/* ---- Help pages ---- */
.help { display: grid; gap: 1rem; max-width: 72rem; }
.help .panel h2 { margin-top: 0; }
.help-toc { font-size: .9rem; }
.help td code { white-space: pre-wrap; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ---- Grids of records (pages/grid.rs): cells of cards, moved by drag
   and drop or by each card's menu ---- */
.widget.grid-widget { grid-column: 1 / -1; }
.grid-form { margin-bottom: 1rem; }
.grid-status { min-height: 1.2em; margin: 0 0 .4rem; font-size: .875rem; color: var(--text-muted); }
.grid-status .error, .grid-status.error { color: var(--danger); }
.grid-cells { width: 100%; border-collapse: separate; border-spacing: .5rem; table-layout: fixed; margin: 0 -.5rem; }
.grid-cells th { padding: .2rem .5rem; font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); text-align: left; vertical-align: bottom; }
.grid-cells th[scope="row"] { width: 8rem; vertical-align: top; padding-top: .9rem; }
.grid-cells .grid-corner { width: 8rem; }
.grid-cell { position: relative; vertical-align: top; min-height: 6rem; height: 6rem; padding: .5rem; border-radius: var(--radius); background: var(--surface-2); border: 1px dashed transparent; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.grid-cell.over { border-color: var(--accent); background: var(--accent-soft); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.grid-card { position: relative; min-width: 0; display: flex; align-items: flex-start; gap: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); box-shadow: var(--shadow-xs); padding: .45rem .5rem; }
.grid-card.movable { cursor: grab; }
.grid-card.dragging { opacity: .5; }
.grid-card.saving { opacity: .6; }
.grid-card.locked { background: color-mix(in oklch, var(--surface-2) 60%, var(--surface)); }
.grid-card .card-link { flex: 1; min-width: 0; color: var(--text); display: flex; flex-direction: column; gap: .1rem; }
.grid-card .card-link:hover { text-decoration: none; color: var(--accent-text); }
.grid-card .card-label { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.grid-card .card-detail { font-size: .8rem; color: var(--text-muted); }
.grid-card .lock { width: .9rem; height: .9rem; color: var(--text-muted); flex-shrink: 0; margin-top: .2rem; }
.card-menu { position: relative; flex-shrink: 0; }
.card-menu summary { list-style: none; cursor: pointer; padding: 0 .3rem; border-radius: var(--radius-sm, 6px); color: var(--text-muted); font-weight: 700; line-height: 1.2; }
.card-menu summary::-webkit-details-marker { display: none; }
.card-menu summary:hover { background: var(--surface-2); color: var(--text); }
.card-targets { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 11rem; margin-top: .2rem; padding: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: grid; }
.card-targets form { margin: 0; }
.card-targets .link-button { display: block; width: 100%; text-align: left; padding: .35rem .5rem; color: var(--text); }
.card-targets .link-button:hover { background: var(--surface-2); }
.grid-more { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 600; }
.grid-empty { position: absolute; inset: 0; border-radius: inherit; }
@media (max-width: 48rem) {
  .grid-cells, .grid-cells tbody, .grid-cells tr, .grid-cells td { display: block; width: auto; }
  .grid-cells thead { display: none; }
  .grid-cells th[scope="row"] { display: block; width: auto; padding: .6rem 0 .2rem; }
  .grid-cell { height: auto; margin-bottom: .5rem; }
  .grid-cell::before { content: attr(data-col-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .3rem; }
}

/* ---- Previous / next record, in the order of the list it was opened from ---- */
.record-nav { display: flex; align-items: center; gap: .6rem; margin: -.5rem 0 1.25rem; font-size: .875rem; }
.record-nav .button { padding: .3rem .6rem; min-height: 0; }
.record-nav .button.disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.record-nav .record-position { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 4rem; text-align: center; }
.record-nav .icon.flipped { transform: scaleX(-1); }

/* ---- Motion: pages cross-fade, lists and widgets fade in, feedback
   moves. Nothing slides on a page change: the navigation stays put (its
   own transition group, not animated) and the content only fades, so
   moving from one entity to another does not make everything jump.
   None of it for people who asked for less motion. ---- */
@view-transition { navigation: auto; }
.page-header h1 { view-transition-name: page-title; }
.sidebar { view-transition-name: navigation; }
::view-transition-group(navigation), ::view-transition-new(navigation) { animation: none; }
/* The new navigation at once (its active entry), not after the content. */
::view-transition-old(navigation) { display: none; }
::view-transition-old(root) { animation: .14s var(--ease) both fade-out; }
::view-transition-new(root) { animation: .2s var(--ease) both fade-in; }
::view-transition-old(page-title), ::view-transition-new(page-title) { animation-duration: .22s; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes grow { from { transform: scaleX(0); } }
table.records tbody tr, .drawers li, .widget, .grid-card { animation: fade-in .3s var(--ease) both; }
table.records tbody tr:nth-child(n+2), .drawers li:nth-child(n+2), .widget:nth-child(n+2) { animation-delay: .03s; }
table.records tbody tr:nth-child(n+3), .drawers li:nth-child(n+3), .widget:nth-child(n+3) { animation-delay: .06s; }
table.records tbody tr:nth-child(n+4), .drawers li:nth-child(n+4), .widget:nth-child(n+4) { animation-delay: .09s; }
table.records tbody tr:nth-child(n+6), .drawers li:nth-child(n+6) { animation-delay: .12s; }
table.records tbody tr:nth-child(n+9) { animation-delay: .15s; }
.bar { transform-origin: left; animation: grow .6s var(--ease) both; }
input[type="checkbox"]:checked { animation: pop .25s var(--ease); }
.field.invalid { animation: shake .3s var(--ease); }
.grid-card.movable:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.grid-card { transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }

/* Progress of a request, along the top; a toast for what just happened. */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--tab)); z-index: 100; opacity: 0; transition: width .4s var(--ease), opacity .3s; }
.progress-bar.active { opacity: 1; width: 70%; }
.progress-bar.done { width: 100%; opacity: 0; transition: width .15s, opacity .4s .15s; }
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100; display: grid; gap: .5rem; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: var(--radius); background: var(--text); color: var(--ground-color); font-size: .9rem; font-weight: 550; box-shadow: var(--shadow-lg); animation: rise-in .25s var(--ease) both; }
.toast .icon { color: var(--success-soft); }
.toast.leaving { animation: fade-out .3s var(--ease) both; }
/* Without a script, it goes by itself. */
.toast:not(.timed) { animation: rise-in .25s var(--ease) both, fade-out .3s var(--ease) 2.6s both; }

/* ---- Command palette (Ctrl+K, palette.js) ---- */

.palette-open .palette-key { margin-left: auto; }
kbd { font: inherit; font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-muted); white-space: nowrap; }
.sidebar kbd { border-color: var(--rail-border); color: var(--rail-muted); }
.palette { width: min(40rem, calc(100vw - 2rem)); margin: 10vh auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.palette[open] { animation: rise-in .2s var(--ease) both; }
.palette::backdrop { background: color-mix(in oklch, var(--text) 35%, transparent); backdrop-filter: blur(3px); }
.palette-search { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.palette-search .icon { color: var(--text-muted); width: 1.3em; height: 1.3em; }
.palette-search input, .palette-search input:focus-visible { flex: 1; min-width: 0; height: auto; padding: .25rem 0; border: 0 !important; background: transparent; box-shadow: none; font-size: 1.05rem; }
.palette-results { max-height: 50vh; overflow-y: auto; padding: .5rem; }
.palette-group { margin: 0; padding: .45rem .65rem .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.palette-results ul { list-style: none; margin: 0; padding: 0; }
.palette-results a { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: var(--radius-sm); color: var(--text); }
.palette-results a:hover, .palette-results a.selected { background: var(--accent-soft); color: var(--accent-text); text-decoration: none; }
.palette-results .pal-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-results .pal-hint { margin-left: auto; flex-shrink: 0; font-size: .8rem; color: var(--text-muted); }
.palette-empty { margin: 0; padding: 1rem .65rem; color: var(--text-muted); }
.palette-help { margin: 0; padding: .55rem 1rem .7rem; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  table.records tbody tr, .drawers li, .widget, .grid-card, .bar, input[type="checkbox"]:checked, .field.invalid, .toast, .palette[open] { animation: none !important; }
  .button:hover, .grid-card.movable:hover, a.widget:hover, .widget.chart:hover { transform: none; }
}
/* Colour conditions of a list view (`ListView::highlights`): the palette
   of the entity colours, on a whole row or one cell. */
table.records tr.highlight > td { background: var(--tab-soft); }
table.records tr.highlight > td:first-child { box-shadow: inset 3px 0 0 var(--tab); }
table.records td.highlight { background: var(--tab-soft); color: var(--tab-ink); box-shadow: inset 3px 0 0 var(--tab); }
table.records tr.highlight:hover > td, table.records td.highlight:hover { background: color-mix(in oklch, var(--tab-soft) 80%, var(--tab)); }

/* Paramétrage → Mise à jour: the release found. */
.release { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.release h3 small { font-weight: 400; color: var(--muted); font-size: .9rem; }
.release-notes { max-width: 48rem; }