/* 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: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --control-height: 2.6rem;
  /* Room (Apparence → Densité redefines these through `data-density`):
     page margins, panels, fields, table cells, navigation items. */
  --space-page: 2.5rem 3rem 4rem;
  --space-panel: 1.5rem 1.75rem;
  --space-panel-gap: 1.5rem;
  --space-fieldset: 1.4rem 1.75rem .6rem;
  --space-fieldset-gap: 1.6rem 0 1.5rem;
  --space-field: 1.15rem;
  --space-control: .55rem .8rem;
  --space-cell: .75rem 1rem;
  --space-header: 1.75rem;
  --space-nav: .4rem .65rem;
  --nav-item-height: 2.3rem;
  --space-widget: 1.25rem 1.4rem 1.3rem;
  --title-size: 2rem;
  /* 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: var(--nav-item-height); padding: var(--space-nav); 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: var(--space-page); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; flex-wrap: wrap; margin-bottom: var(--space-header); }
.page-header h1 { margin: 0; font-size: var(--title-size); 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: var(--space-panel); margin-bottom: var(--space-panel-gap); }
.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: var(--space-fieldset-gap); padding: var(--space-fieldset); 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; }
/* The record's buttons close the page and stay in sight while it scrolls:
   a translucent panel stuck to the bottom of the viewport. */
.record-actions {
  position: sticky; bottom: 0; z-index: 20; max-width: 46rem;
  margin: 0 0 1rem; padding: .75rem 1rem;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid color-mix(in oklch, var(--border) 75%, transparent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.record-main:has(.record-form.two-columns) .record-actions { max-width: 76rem; }
.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; }
/* A sketch field: the drawing at full width under the record, and the
   editor's dialog (an <iframe> of /sketch filling it). */
.record-sketch .sketch-frame { display: grid; place-items: center; min-height: 10rem; max-height: 32rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.record-sketch .sketch-frame a, .record-sketch .sketch-frame img { display: block; max-width: 100%; max-height: 32rem; }
.record-sketch .sketch-frame img { object-fit: contain; }
.record-sketch .photo-actions { align-items: center; }
.sketch-dialog { width: min(96vw, 90rem); height: min(94vh, 60rem); max-width: none; max-height: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.sketch-dialog::backdrop { background: color-mix(in oklch, var(--text) 45%, transparent); }
.sketch-dialog[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.sketch-stage { min-height: 0; }
.sketch-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.sketch-actions { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.sketch-actions .sketch-status { flex: 1; min-width: 0; color: var(--text-muted); font-size: .9rem; }
.sketch-actions .sketch-status.alert { color: var(--danger); }
/* A generated diagram shown in the page (sketch_view.html). */
.sketch-inline { height: min(78vh, 56rem); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.sketch-inline iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The fields of an export (export.html): a tickable list in columns. */
.checklist { list-style: none; margin: .6rem 0 0; padding: 0; columns: 3 14rem; column-gap: 1.5rem; }
.checklist li { break-inside: avoid; padding: .2rem 0; }
.checklist label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.check-all { display: flex; gap: .4rem; }
.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; }
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: var(--space-field); }
.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; }
/* A yes/no with a starting value is a setting: a toggle rather than a box to tick. */
.field label.switch { font-weight: 400; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch .track {
  flex: none; position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px;
  background: var(--border-strong); border: 1px solid transparent;
  transition: background var(--duration);
}
.switch .track::after {
  content: ""; position: absolute; top: .125rem; left: .125rem; width: 1.125rem; height: 1.125rem;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--duration);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
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, select {
  width: 100%; min-height: var(--control-height); padding: var(--space-control);
  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);
}
/* The browser's own picker button of a date / time input gets the same
   look as the buttons of a link field: a grey cell flush right, parted by
   a hairline, as tall as the field (Chromium / WebKit pseudo-element; other
   engines keep their own indicator). */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { position: relative; padding-right: calc(var(--control-height) + .4rem); }
input::-webkit-calendar-picker-indicator { position: absolute; inset: 0 0 0 auto; box-sizing: border-box; width: var(--control-height); height: 100%; margin: 0; padding: 0;
  background-repeat: no-repeat; background-position: center; background-size: 1.25rem;
  background-color: var(--surface-2); border-left: 1px solid var(--border); opacity: .6; cursor: pointer;
  transition: background-color var(--duration) var(--ease), opacity var(--duration) var(--ease); }
input::-webkit-calendar-picker-indicator:hover { background-color: var(--accent-soft); opacity: 1; }
.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)); }
/* Every drop-down looks the same, wherever it is; only those of a form field fill their line. */
select { width: auto; padding-right: .6rem; }
/* 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); }
/* A placeholder is a faint example, gone as soon as the field is typed in. */
input::placeholder, textarea::placeholder { color: color-mix(in oklch, var(--text-muted) 60%, transparent); opacity: 1; }
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }
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;
}
/* A hint under the form takes a whole line of its own, never the button's. */
.inline-form > .hint { flex: 1 1 100%; margin: 0; }
.row-form { display: flex; gap: .8rem; align-items: center; }
.row-form input:not([type="checkbox"]) { flex: 1 1 14rem; width: auto; min-width: 0; }
/* Linked records as tokens (form.html, tokens.js). Without the script the
   boxes stay visible: they are how one ticks and unticks. */
/* ---- Link fields (tokens.js, _link_rows.html) ----
   A single link on one line: its record in a box the height of an input,
   then the icons (choose in the linked list, create). A multiple link as a
   table of its records under a small head. Without the script the boxes
   stay visible; with it (`has-tokens`) they hide and the crosses show. */
/* A single link looks like a text input: one box, the pick / new buttons
   inside it on the right, parted by a hairline. */
.tokens.link-one { display: flex; align-items: stretch; gap: 0; min-height: var(--control-height); overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 2px var(--shadow);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.tokens.link-one:hover { border-color: color-mix(in oklch, var(--border-strong) 70%, var(--text)); }
.tokens.link-one:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.link-one .link-value { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; padding: var(--space-control); }
.token { display: inline-flex; align-items: center; gap: .1rem; max-width: 100%; min-width: 0; color: var(--tab-ink); font-size: .9rem; font-weight: 600; }
.token label { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; margin: 0; font-weight: inherit; color: inherit; font-size: inherit; }
.token a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration-color: color-mix(in oklch, var(--tab) 45%, transparent); }
.token-remove { border: 0; background: none; color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; padding: .1rem .45rem; cursor: pointer; border-radius: 999px; opacity: .7; }
.token-remove:hover, .token-remove:focus-visible { opacity: 1; background: color-mix(in oklch, var(--tab) 18%, transparent); }
.token-none { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 400; }
.token-none .empty { color: var(--text-muted); }
.link-table .token-none .empty { font-style: italic; font-size: .9rem; }
.has-tokens .token input, .has-tokens .link-one .token-none input, .has-tokens .link-table tbody input[type="checkbox"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.has-tokens .token-remove, .has-tokens .rank-move { display: inline-block; }
.has-tokens .link-value:has(.token) .token-none { display: none; }
.token-remove, .rank-move { display: none; }
.link-one .icon-button.link-pick, .link-one .icon-button.link-new { width: var(--control-height); display: inline-grid; place-items: center; flex: none; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: var(--surface-2); color: var(--text-muted); }
.link-one .icon-button.link-pick:hover, .link-one .icon-button.link-new:hover { background: var(--accent-soft); color: var(--accent-text); }
.link-one .icon-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tokens.link-list { display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.link-head { display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem .3rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.link-title { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.link-count { padding: .05rem .5rem; font-size: .75rem; }
.link-hint { font-size: .78rem; }
.link-head .icon-button.link-pick, .link-head .icon-button.link-new { width: 1.8rem; height: 1.8rem; display: inline-grid; place-items: center; color: var(--text-muted); }
.link-head .icon-button.link-pick:hover, .link-head .icon-button.link-new:hover { background: var(--accent-soft); color: var(--accent-text); }
.link-wrap { border-radius: 0; }
.link-table { font-size: .875rem; }
.link-table th, .link-table td { padding: .35rem .6rem; white-space: nowrap; }
.link-table tbody tr:last-child td { border-bottom: 0; }
.link-table thead th { color: var(--text-muted); font-weight: 650; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; background: transparent; }
.link-table tfoot td { font-weight: 600; border-top: 1px solid var(--border); border-bottom: 0; background: var(--surface-2); }
.link-table th.grip, .link-table td.grip { width: 1%; padding-right: 0; padding-left: .5rem; }
.link-table td.grip .drag-handle { margin: 0; }
.link-table th.rank, .link-table td.rank { width: 1%; }
.link-table td.rank { font-variant-numeric: tabular-nums; }
.link-table td.rank::before { content: ""; }
.link-table td.rank { color: var(--tab-ink); font-weight: 600; }
.link-table th.row-remove, .link-table td.row-remove { width: 1%; text-align: right; padding-right: .3rem; }
.link-table tbody tr.token { display: table-row; color: inherit; font-size: inherit; font-weight: inherit; }
.link-table tbody tr.token td:first-of-type a, .link-table tbody tr.token td.grip + td.rank + td a { color: var(--tab-ink); font-weight: 600; }
.link-table tr.token-none td { color: var(--text-muted); }
.link-table tr.token[draggable] { cursor: grab; }
.link-table tr.token.dragging td { opacity: .5; }
.link-table tr.token.drop-before td { border-top: 2px solid var(--accent); }
.link-table tr.token.drop-after td { border-bottom: 2px solid var(--accent); }
.rank-move { border: 0; background: none; color: var(--text-muted); font: inherit; font-size: .6rem; line-height: 1; padding: .15rem .3rem; cursor: pointer; border-radius: 3px; }
.rank-move:hover, .rank-move:focus-visible { color: var(--text); background: var(--surface-2); }

/* The chooser (`#picker-dialog`): the linked entity's list in selection
   mode, or a form to create a record, loaded into it. */
.picker { width: min(96vw, 64rem); max-height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.picker[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: rise-in .18s var(--ease) both; }
.picker::backdrop { background: color-mix(in oklch, var(--text) 35%, transparent); backdrop-filter: blur(3px); }
.picker-header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.picker-header h2 { margin: 0; font-size: 1.05rem; }
.picker-close { width: 2rem; height: 2rem; display: inline-grid; place-items: center; color: var(--text-muted); }
.picker-body { overflow: auto; padding: 1rem; }
.picker-body .list-top, .picker-form .record-layout { margin-top: 0; }
.picker-body .picker-form .record-side { display: none; }
.picker-list .search-form { max-width: none; }
.pick-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.pick-count { font-weight: 600; }
th.pick-box, td.pick-box { width: 1%; padding-right: 0; }
tr.pick-linked td { color: var(--text-muted); }
.picker-list .table-wrap tbody tr { cursor: pointer; }
.picker-list .table-wrap tbody tr.pick-linked { cursor: default; }
.picker-list .table-wrap tbody tr.picked td { background: var(--accent-soft); }

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

/* Densité (Apparence): the same interface with less room around things.
   Text sizes stay; what shrinks is the space, the controls and the rows. */
[data-density="compact"] {
  --control-height: 2.2rem;
  --space-page: 1.5rem 2rem 2.5rem;
  --space-page-narrow: 1rem .75rem 2rem;
  --space-panel: 1rem 1.2rem;
  --space-panel-gap: 1rem;
  --space-fieldset: .9rem 1.2rem .3rem;
  --space-fieldset-gap: 1rem 0 .9rem;
  --space-field: .7rem;
  --space-control: .35rem .65rem;
  --space-cell: .45rem .75rem;
  --space-header: 1rem;
  --space-nav: .25rem .55rem;
  --nav-item-height: 2rem;
  --space-widget: .85rem 1rem .9rem;
  --title-size: 1.6rem;
}
[data-density="dense"] {
  --control-height: 1.9rem;
  --space-page: 1rem 1.25rem 2rem;
  --space-page-narrow: .75rem .5rem 1.5rem;
  --space-panel: .7rem .9rem;
  --space-panel-gap: .7rem;
  --space-fieldset: .6rem .9rem .2rem;
  --space-fieldset-gap: .7rem 0 .6rem;
  --space-field: .45rem;
  --space-control: .2rem .5rem;
  --space-cell: .25rem .55rem;
  --space-header: .7rem;
  --space-nav: .15rem .5rem;
  --nav-item-height: 1.75rem;
  --space-widget: .6rem .8rem .65rem;
  --title-size: 1.35rem;
}
[data-density="compact"] .button, [data-density="dense"] .button { padding-top: .3rem; padding-bottom: .3rem; }
[data-density="dense"] .form-actions { margin-bottom: 1rem; gap: .45rem; }
[data-density="compact"] .widget .figure { font-size: 2.1rem; }
[data-density="dense"] .widget .figure { font-size: 1.7rem; }
[data-density="dense"] .record-actions { padding: .45rem .7rem; }
/* The preview of each level in Apparence: four rows, closer and closer. */
.density-preview { display: flex; flex-direction: column; gap: .45rem; width: 4.5rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.density-preview .p-row { height: .5rem; border-radius: 2px; background: var(--border-strong); }
.density-preview-compact { gap: .28rem; padding: .35rem; }
.density-preview-dense { gap: .15rem; padding: .25rem; }
.density-preview-dense .p-row { height: .4rem; }
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: 5.5rem; }
/* The first column of a reorderable table: the handle alone. */
td.grip, th.grip { width: 1.5rem; padding-right: 0; white-space: nowrap; }
td.grip .drag-handle { margin-right: 0; }
/* Rows dragged into another order (reorder.js): a handle, a line where the row would land. */
.drag-handle { cursor: grab; color: var(--text-muted); letter-spacing: -.2em; margin-right: .35rem; user-select: none; }
table.reorderable tr.dragging { opacity: .5; }
table.reorderable tr.over-before > td { box-shadow: inset 0 2px 0 var(--accent); }
table.reorderable tr.over-after > td { box-shadow: inset 0 -2px 0 var(--accent); }
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 widgets and the entity tiles ---- */

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

/* The home page's grid: 12 columns, rows of a fixed height (20 at most are
   meant). A widget with a place (`style`) sits on its cells; the others
   flow in, each in a size that fits its kind. */
/* Tracks are quarters of a cell (48 × 80); the air between widgets is
   their own margin, so that a quarter stays a quarter. */
.dashboard { --cell: 5.5rem; --air: .5rem; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); grid-auto-rows: calc(var(--cell) / 4); grid-auto-flow: dense; gap: 0; margin: 0 0 2.25rem; }
.dashboard .arrange-hint { grid-column: 1 / -1; margin: 0 var(--air) .4rem; }
.dashboard .arrange-refusal { grid-column: 1 / -1; margin: 0 var(--air) .4rem; }
.dashboard .widget { margin: var(--air); }
.widget.stat { grid-column: span 12; grid-row: span 4; }
.widget.chart, .widget.broken { grid-column: span 24; grid-row: span 8; }
.widget.grid-widget { grid-column: span 48; grid-row: span 12; }
.widget { overflow: hidden; position: relative; container-type: size; display: flex; flex-direction: column; }
.widget.chart .bars, .widget.grid-widget .grid { overflow-y: auto; flex: 1; min-height: 0; margin-bottom: 0; }
/* The content fits its tile: the number scales with the room, the
   captions go when it is short, the bars thin down. */
.widget .figure { font-size: clamp(1.1rem, min(26cqh, 11cqw), 3.2rem); }
@container (max-height: 8rem) { .widget .hint, .widget .condition { display: none; } .widget h2 { margin-bottom: .15rem; } }
@container (max-height: 5rem) { .widget h2 { font-size: .78rem; margin: 0; } .widget .figure { margin: 0; } }
@container (max-width: 12rem) { .widget h2 { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@container (max-height: 11rem) { .widget .bars a { min-height: 1.35rem; padding: 0 .3rem; font-size: .82rem; } .widget .bar-track { height: .6rem; } }
@container (max-width: 18rem) { .widget .bars a { grid-template-columns: minmax(4rem, 38%) minmax(0, 1fr) auto; gap: .4rem; } .widget .bar-value { min-width: 3rem; } }
@media (max-width: 40rem) { .dashboard { display: flex; flex-direction: column; } .dashboard .widget { grid-column: auto; grid-row: auto; container-type: normal; } }
/* Layout mode (layout.js): widgets drag, a handle resizes, cells show. */
.dashboard.arranging { background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), var(--border-strong) calc(100% / 12 - 1px), var(--border-strong) calc(100% / 12)); outline: 2px dashed var(--accent); outline-offset: .5rem; border-radius: var(--radius); }
.dashboard.arranging .widget { box-shadow: inset 0 3px 0 var(--tab), 0 0 0 2px var(--accent-soft), var(--shadow-md); transition: none; }
.dashboard.arranging .widget::after { content: "⤡"; position: absolute; right: .3rem; bottom: .2rem; font-size: 1rem; color: var(--text-muted); pointer-events: none; }
.dashboard.arranging .widget { cursor: grab; user-select: none; }
.dashboard.arranging .widget.moving { opacity: .6; cursor: grabbing; }
.dashboard.arranging .widget a, .dashboard.arranging .widget form { pointer-events: none; }
.dashboard.arranging .resize-handle { pointer-events: auto; position: absolute; right: 0; bottom: 0; width: 1.6rem; height: 1.6rem; cursor: nwse-resize; }
.dashboard.arranging .widget.target { outline: 2px solid var(--accent); }
/* A tile with its entity's colour as a band along the top. */
.widget {
  display: block; min-width: 0; padding: var(--space-widget); 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.broken { box-shadow: inset 0 3px 0 var(--danger), var(--shadow-md); }
.widget.broken .alert { margin: .4rem 0 0; }

/* ---- 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; }
/* Stacked series (chart_svg::render_stacked): hues turned from the entity's. */
.chart-plot, .legend {
  --series-0: oklch(from var(--tab) l c calc(h + 0));
  --series-1: oklch(from var(--tab) l c calc(h + 31));
  --series-2: oklch(from var(--tab) l c calc(h + 62));
  --series-3: oklch(from var(--tab) l c calc(h + 93));
  --series-4: oklch(from var(--tab) l c calc(h + 124));
  --series-5: oklch(from var(--tab) l c calc(h + 155));
  --series-6: oklch(from var(--tab) l c calc(h + 186));
  --series-7: oklch(from var(--tab) l c calc(h + 217));
  --series-8: oklch(from var(--tab) l c calc(h + 248));
  --series-9: oklch(from var(--tab) l c calc(h + 279));
  --series-10: oklch(from var(--tab) l c calc(h + 310));
  --series-11: oklch(from var(--tab) l c calc(h + 341));
}
.chart-plot .series-0, .legend .series-0 { fill: var(--series-0); background: var(--series-0); }
.chart-plot .series-1, .legend .series-1 { fill: var(--series-1); background: var(--series-1); }
.chart-plot .series-2, .legend .series-2 { fill: var(--series-2); background: var(--series-2); }
.chart-plot .series-3, .legend .series-3 { fill: var(--series-3); background: var(--series-3); }
.chart-plot .series-4, .legend .series-4 { fill: var(--series-4); background: var(--series-4); }
.chart-plot .series-5, .legend .series-5 { fill: var(--series-5); background: var(--series-5); }
.chart-plot .series-6, .legend .series-6 { fill: var(--series-6); background: var(--series-6); }
.chart-plot .series-7, .legend .series-7 { fill: var(--series-7); background: var(--series-7); }
.chart-plot .series-8, .legend .series-8 { fill: var(--series-8); background: var(--series-8); }
.chart-plot .series-9, .legend .series-9 { fill: var(--series-9); background: var(--series-9); }
.chart-plot .series-10, .legend .series-10 { fill: var(--series-10); background: var(--series-10); }
.chart-plot .series-11, .legend .series-11 { fill: var(--series-11); background: var(--series-11); }
.chart-plot svg.pie { width: min(100%, 15rem); margin: .2rem auto 0; }
.chart-plot .slice { stroke: var(--surface); stroke-width: 2; transition: opacity var(--duration) var(--ease); }
.chart-plot a:hover .slice, .chart-plot a:focus-visible .slice { opacity: .8; }
.chart-plot .slice-label { fill: var(--surface); font-size: 12px; font-weight: 650; pointer-events: none; paint-order: stroke; stroke: color-mix(in oklch, var(--text) 45%, transparent); stroke-width: 2px; }
.chart-plot .pie-center { fill: var(--text); font-size: 20px; font-weight: 650; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .4rem 0 0; padding: 0; font-size: .85rem; color: var(--text-muted); }
.legend li { display: flex; align-items: center; gap: .4rem; }
.legend .swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
.chart-table table.matrix th.num, .chart-table table.matrix td.num { text-align: right; white-space: nowrap; }
.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. */
/* The entities' tiles: widgets of the home page's grid (home.html), the
   entity's colour on a swatch rather than as the band on top. */
.widget.tile { grid-column: span 16; grid-row: span 6; box-shadow: var(--shadow-md); }
.widget.tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; align-content: start; gap: .6rem 1rem; padding: 1.1rem 1.25rem 1rem; }
.widget.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.widget.tile .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);
}
.widget.tile h2 { display: flex; flex-direction: column; gap: .1rem; margin: 0; min-width: 0; font-size: 1.1rem; font-weight: 650; color: var(--text); }
.widget.tile h2 a { color: var(--text); overflow-wrap: anywhere; }
/* The whole card leads to the list; the actions stay above it. */
.widget.tile h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.widget.tile .tile-category { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.widget.tile .tile-category .icon { width: .9rem; height: .9rem; }
.widget.tile .links { grid-column: 1 / -1; align-self: end; position: relative; display: flex; gap: .1rem; flex-wrap: wrap; margin: 0 -.4rem; padding-top: .7rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .875rem; }
.widget.tile .links .action-link { color: var(--accent-text); gap: .3rem; padding: .25rem .4rem; border-radius: var(--radius-sm); transition: background-color var(--duration) var(--ease); }
.widget.tile .links .action-link:hover { background: var(--accent-soft); text-decoration: none; }
/* A low tile keeps its name and actions, a narrow one its icon and name. */
@container (max-height: 7rem) { .widget.tile { gap: .35rem .8rem; padding: .7rem 1rem .6rem; } .widget.tile .swatch { width: 2rem; height: 2rem; } .widget.tile .tile-category { display: none; } .widget.tile .links { padding-top: .35rem; } }
@container (max-height: 4.5rem) { .widget.tile .links { display: none; } }
@container (max-width: 13rem) { .widget.tile h2 { font-size: .95rem; } .widget.tile .links .action-text { display: 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"] .widget.tile .action-link { justify-content: center; min-width: 2rem; min-height: 2rem; border-radius: var(--radius); }
[data-actions="icons"] .widget.tile .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; }
.draft-banner { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1rem; padding: .8rem 1.1rem .8rem 1rem; color: var(--accent-ink, var(--text)); background: var(--accent-soft); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); border-left: 4px solid var(--accent); border-radius: var(--radius); font-size: .925rem; }
.draft-banner .icon { flex: none; margin-top: .15rem; }
.draft-status { display: block; margin-top: .3rem; font-size: .875rem; }
.draft-status:empty { display: none; }
.draft-status .saved { color: var(--text-muted); }
.draft-status .refused { color: var(--danger); font-weight: 600; }
.drafts-notice { display: flex; align-items: center; gap: .4rem; margin: 0 0 1rem; color: var(--text-muted); font-size: .925rem; }
.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); }
/* Events the user may move (table[data-move-url], calendar.js): dragged
   onto another day, stretched by the handle on their last day. */
table.calendar[data-move-url] .event { cursor: grab; position: relative; touch-action: none; user-select: none; }
table.calendar[data-move-url] .event.moving { opacity: .55; cursor: grabbing; }
table.calendar[data-move-url] .event.saving { opacity: .55; pointer-events: none; }
table.calendar td.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.event-resize { position: absolute; right: 0; top: 0; bottom: 0; width: .7rem; cursor: ew-resize; border-right: 3px solid color-mix(in oklch, currentColor 45%, transparent); border-radius: 0 6px 6px 0; }
.calendar-hint { margin: 0 0 .4rem; }
.calendar-status { min-height: 1.2em; margin: 0 0 .4rem; font-size: .9rem; color: var(--text-muted); }
.calendar-status.error { color: var(--danger); }
.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; }
ul.notifications .notification-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
ul.notifications .notification-row form { margin: 0; flex: none; }

/* ---- 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="url"]:checked) .opt-url,
.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="money"]:checked) .opt-money,
.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="sketch"]: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: var(--space-page-narrow, 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; }
  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-choices { display: inline-flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: center; min-height: var(--control-height); }
.filter-choices .choice { margin: 0; font-size: .9rem; white-space: nowrap; }
/* A link's records to tick: a scrolling box, one per line. */
.filter-choices.many { display: block; max-height: 9rem; overflow-y: auto; padding: .3rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.filter-choices.many .choice { display: block; white-space: normal; padding: .1rem 0; }
.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 { position: relative; padding: 1.15rem 1.25rem; margin: 0 0 1rem; }
/* Opened, the body lies over the page below the title (nothing moves);
   a click elsewhere or Escape folds it (ui.js). */
.views-panel[open] { z-index: 30; }
.views-body { position: absolute; left: -1px; right: -1px; top: calc(100% + .35rem); padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.views-panel h2 { margin: 0; font-size: 1rem; }
/* Folded by default: the summary names the view in use. */
.views-panel summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; }
.views-panel summary::-webkit-details-marker { display: none; }
.views-panel summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--duration) var(--ease); }
.views-panel[open] summary::after { transform: rotate(-135deg); }
.views-panel .current-view { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--tab-ink); }
.views-panel .current-view.hint { font-weight: 400; }
.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; }
.widget.tile .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 ---- */
.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 ---- */
/* Ancestors of a record in a tree (`Entity::tree`), the root first. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: -.5rem 0 var(--space-md); font-size: .875rem; color: var(--text-muted); }
.breadcrumb a { color: var(--tab-ink); font-weight: 600; }
.breadcrumb-here { color: var(--text); }
/* The tree view: one line per record, indented by its depth. */
.tree { list-style: none; margin: 0; padding: 0; }
.tree li { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem calc(.5rem + var(--depth) * 1.5rem); border-bottom: 1px solid var(--border); min-height: var(--control-height); }
.tree li:last-child { border-bottom: 0; }
.tree .tree-guide { width: .6rem; height: .6rem; border-radius: 999px; background: var(--tab); flex: none; opacity: .5; }
.tree li.root .tree-guide { opacity: 1; }
.tree .tree-label { font-weight: 600; }
.tree .tree-count { color: var(--text-muted); font-size: .8rem; }
.tree .tree-add { margin-left: auto; color: var(--text-muted); display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; }
.tree .tree-add:hover { background: var(--tab-soft); color: var(--tab-ink); }
.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 fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@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, .widget, .grid-card { animation: fade-in .3s var(--ease) both; }
table.records tbody tr:nth-child(n+2), .widget:nth-child(n+2) { animation-delay: .03s; }
table.records tbody tr:nth-child(n+3), .widget:nth-child(n+3) { animation-delay: .06s; }
table.records tbody tr:nth-child(n+4), .widget:nth-child(n+4) { animation-delay: .09s; }
table.records tbody tr: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); }
/* ---- Confirmation (hx-confirm, confirm.js): the application's own box ---- */

.confirm { width: min(26rem, calc(100vw - 2rem)); margin: 22vh auto; padding: var(--space-5, 1.5rem) var(--space-5, 1.5rem) var(--space-4, 1.2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.confirm[open] { animation: rise-in .18s var(--ease) both; }
.confirm::backdrop { background: color-mix(in oklch, var(--text) 35%, transparent); backdrop-filter: blur(3px); }
.confirm p { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.45; white-space: pre-line; }
.confirm .form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin: 0; }

.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, .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(--hl-bg, var(--tab-soft)); color: var(--hl-text, inherit); }
table.records tr.highlight > td:first-child { box-shadow: inset 3px 0 0 var(--hl-bar, var(--tab)); }
table.records td.highlight { background: var(--hl-bg, var(--tab-soft)); color: var(--hl-text, var(--tab-ink)); box-shadow: inset 3px 0 0 var(--hl-bar, var(--tab)); }
table.records tr.highlight:hover > td, table.records td.highlight:hover { background: color-mix(in oklch, var(--hl-bg, var(--tab-soft)) 85%, var(--hl-bar, var(--tab))); }
/* A text colour picked applies to the link of the first cell too. */
.hl-text a { color: inherit; }
.hl-bold { font-weight: 700; }
.hl-italic { font-style: italic; }
.hl-underline { text-decoration: underline; }
/* The editor's rows: a picker and its « use it » box, the three formats. */
.highlight-rules .hl-color { white-space: nowrap; }
.highlight-rules .hl-color input[type="color"] { width: 2.6rem; height: var(--control-height); padding: .15rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; vertical-align: middle; }
.highlight-rules .hl-color label.checkbox { vertical-align: middle; margin-left: .35rem; }
.highlight-rules .hl-color .hint { display: block; margin: .2rem 0 0; font-size: .75rem; }
.highlight-rules .hl-format { white-space: nowrap; }
.highlight-rules .hl-format label.checkbox { margin-right: .7rem; }

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

/* Feedback (Paramétrage → Retours): one card per message. */
.feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-field); }
.feedback-item { padding: var(--space-field); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.feedback-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-cell); }
.feedback-body { margin: var(--space-cell) 0; }
.feedback-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-field); font-size: .9rem; }
.feedback-status form { margin: 0; }

/* A date-time input with its « Maintenant » button (`now.js`). */
.with-now { display: flex; align-items: center; gap: var(--space-cell); }
.with-now input { flex: 1 1 auto; }
.badge.status-open { background: color-mix(in oklch, var(--success) 18%, var(--surface)); color: var(--text); border-color: color-mix(in oklch, var(--success) 40%, transparent); }
.badge.status-closed { background: var(--surface-2); color: var(--text-muted); border-color: var(--border-strong); }

/* The print template editor: the document beside its preview on a real record. */
/* Layout blocks of a Markdown text (`markdown::Block`) in a record. */
.md .columns { display: flex; gap: var(--space-field); }
.md .column { flex: 1 1 0; min-width: 0; }
.md .right { text-align: right; }
.md .center { text-align: center; }
.md .box { padding: var(--space-field); border-radius: var(--radius); background: var(--accent-soft); }
.md .totals thead { display: none; }
.print-studio .format-choice { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: var(--space-field) 0 0; padding: 0; border: 0; }
.print-studio .format-choice legend { padding: 0; margin-bottom: .35rem; font-weight: 600; }
.print-studio .format-choice label { display: inline-flex; align-items: center; gap: .4rem; }
.print-studio:has(#f-format-html:checked) .md-button, .print-studio:has(#f-format-html:checked) .hint-markdown { display: none; }
.print-studio:not(:has(#f-format-html:checked)) .hint-html { display: none; }
.print-studio .studio-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: var(--space-field); }
.studio-editor { margin: 0; }
.studio-editor textarea { width: 100%; min-height: 34rem; border-radius: 0 0 var(--radius) var(--radius); font-family: var(--mono); font-size: .875rem; line-height: 1.45; resize: vertical; }
.studio-preview { position: sticky; top: 1rem; }
.studio-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.studio-preview-bar select { flex: 1 1 12rem; width: auto; }
.studio-preview iframe { display: block; width: 100%; height: 38rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; }
@media (max-width: 64rem) {
  .print-studio .studio-panes { grid-template-columns: 1fr; }
  .studio-preview { position: static; }
  .studio-preview iframe { height: 28rem; }
}

/* ---- Server page: gauges and levelled figures ---- */
.measured { text-align: right; margin-top: calc(-1 * var(--space-2)); }
.gauges { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.gauge-head { display: flex; justify-content: space-between; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.gauge-track { height: .7rem; border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; margin: .3rem 0; }
.gauge-fill { height: 100%; background: var(--success); transition: width var(--duration) ease; }
.gauge[data-level="warn"] .gauge-fill { background: color-mix(in oklch, var(--danger) 55%, var(--success)); }
.gauge[data-level="danger"] .gauge-fill { background: var(--danger); }
.gauge[data-level="danger"] .gauge-head strong { color: var(--danger); }
.figure[data-level="warn"] .figure-value { color: color-mix(in oklch, var(--danger) 70%, var(--text)); }
.figure[data-level="danger"] .figure-value { color: var(--danger); }
.figure[data-level="ok"] .figure-value { color: var(--success); }
.alerts-form .field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.alerts-form .field-row .field { flex: 1 1 16rem; }
.alerts-form input[type="number"] { width: 6rem; }
tr.failed td { color: var(--danger); }
table.errors tr[data-level="danger"] td:nth-child(2) { color: var(--danger); font-weight: 600; }
table.errors td:last-child { overflow-wrap: anywhere; }

/* Paramétrage → Journal de l'API: a call, then its two bodies folded under it. */
table.api-log .badge.status-ok { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklch, var(--success) 30%, transparent); }
table.api-log .badge.status-client, table.api-log .badge.status-server { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, transparent); }
table.api-log tr.api-log-call td { border-bottom: 0; }
table.api-log tr.api-log-bodies td { padding-top: 0; }
table.api-log summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; }
.api-log-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 1rem); margin-top: .5rem; }
.api-log-pair h3 { margin: 0 0 .3rem; font-size: .85rem; color: var(--text-muted); }
.api-log-pair .code-block { max-height: 24rem; overflow: auto; }
@media (max-width: 720px) { .api-log-pair { grid-template-columns: 1fr; } }

/* Paramétrage: its sections in a column on the left, the page on the right. */
main.settings-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-5, 1.5rem); align-items: start; }
.settings-nav { position: sticky; top: var(--space-page); max-height: calc(100vh - 2 * var(--space-page)); overflow-y: auto; padding: var(--space-2, .5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur)); }
.settings-nav .settings-group { margin: .2rem .7rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.settings-nav ul + .settings-group { margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.settings-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border-radius: var(--radius); color: var(--text); text-decoration: none; transition: background-color var(--duration) var(--ease); }
.settings-nav a .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--text-muted); }
.settings-nav a:hover { background: var(--surface-2); text-decoration: none; }
.settings-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; box-shadow: inset 3px 0 0 var(--accent); }
.settings-nav a[aria-current="page"] .icon { color: var(--accent); }
.settings-main { min-width: 0; }
.settings-crumb { margin: 0 0 .5rem; font-size: .85rem; color: var(--text-muted); }
.settings-crumb a { color: inherit; }
@media (max-width: 900px) {
  main.settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
  .settings-nav .settings-group, .settings-nav ul + .settings-group { margin: 0 .2rem 0 0; padding: 0; border: 0; }
  .settings-nav ul { flex-direction: row; flex-wrap: wrap; margin-right: .8rem; }
}