/* Zion — admin stylesheet. No external resources: system fonts.
   Themes (spec §3.8): "auto" (plain, follows the system), "light", "dark", "matrix".
   A theme = a set of variables; the rest of the sheet only knows the variables. */
:root {
  /* The LRob apps' tokens, from shieldlist.eu (docs/UI.md): one accent, the blue → violet gradient. */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #0f172a;
  --muted: #475569;
  --faint: #7b8798;
  --border: #dde3ec;
  --accent: #0b6fd6;
  --accent-2: #5b3df5;
  --grad: linear-gradient(90deg, #1e90ff, #5b3df5);
  --accent-text: #ffffff;
  --error-bg: #fdecec;
  --error: #9b1c1c;
  --ok-bg: #e7f6ec;
  --ok: #166534;
  --warn-bg: #fff4e0;
  --warn: #8a4b00;
  --danger: #c0262d;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="matrix"]) {
    --bg: #0d1117;
    --surface: #141a22;
    --surface-2: #1b2330;
    --text: #e6ebf2;
    --muted: #a7b2c2;
    --faint: #6e7a8c;
    --border: #27313f;
    --accent: #1e90ff;
    --accent-text: #ffffff;
    --error-bg: #3a1616;
    --error: #ffb3b3;
    --ok-bg: #12291b;
    --ok: #86efac;
    --warn-bg: #3a2a12;
    --warn: #fcd34d;
    --danger: #f87171;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #141a22;
  --surface-2: #1b2330;
  --text: #e6ebf2;
  --muted: #a7b2c2;
  --faint: #6e7a8c;
  --border: #27313f;
  --accent: #1e90ff;
  --accent-text: #ffffff;
  --error-bg: #3a1616;
  --error: #ffb3b3;
  --ok-bg: #12291b;
  --ok: #86efac;
  --warn-bg: #3a2a12;
  --warn: #fcd34d;
  --danger: #f87171;
  color-scheme: dark;
}
/* Matrix: phosphor green on black, the theme of the early days. */
:root[data-theme="matrix"] {
  --bg: #050a07;
  --surface: #0b140e;
  --text: #cdebd6;
  --muted: #6f9c80;
  --border: #1d3a28;
  --accent: #3ddc84;
  --accent-text: #06120c;
  --error-bg: #3a1616;
  --error: #ffb3b3;
  --ok-bg: #0f2c1a;
  --ok: #8ef0b4;
  --warn-bg: #3a2a12;
  --warn: #ffcf8a;
  --danger: #ff6b5e;
  --font: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --surface-2: #10201a;
  --faint: #4f7a60;
  --grad: #3ddc84;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font);
  font-variant-numeric: tabular-nums;
}
.top {
  position: relative; display: flex; align-items: center; gap: 0.5rem 1rem;
  padding: 0.5rem clamp(0.75rem, 2vw, 1.25rem); background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: 0.02em; }
main { padding: 1rem clamp(1rem, 2vw, 3rem) 2rem; }
/* Full width (spec §3.8): cards fill the screen; only the
   authentication pages stay narrow. */
.card {
  margin: 0; padding: 1.5rem 1.75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.card.narrow { max-width: 26rem; margin: 2rem auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.cards .card + .card { margin-top: 0; }
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 0 1.5rem; }
nav.sub { display: flex; gap: 0.25rem; flex-wrap: wrap; padding: 0.4rem clamp(0.75rem, 2vw, 3rem); background: var(--surface); border-bottom: 1px solid var(--border); }
h1 { font-size: 1.4rem; margin: 0 0 0.75rem; }
label { display: block; margin: 0 0 1rem; font-weight: 600; font-size: 0.95rem; }
input {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.7rem;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button {
  font: inherit; font-weight: 600; padding: 0.55rem 1.15rem; cursor: pointer;
  color: var(--accent-text); background: var(--grad); border: 0; border-radius: 999px;
}
button:hover, a.button:hover { filter: brightness(1.07); }
button:focus-visible, a.button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.link { background: none; color: var(--muted); padding: 0; font-weight: 400; text-decoration: underline; }
a { color: var(--accent); }
.error { background: var(--error-bg); color: var(--error); padding: 0.6rem 0.8rem; border-radius: 8px; }
.muted { color: var(--muted); }
.label { margin-bottom: 0.25rem; color: var(--muted); font-size: 0.9rem; }
.secret { font: 600 1.2rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.05em; margin-top: 0; }
.uri { font: 0.8rem/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; color: var(--muted); }
details { margin: 0 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.card + .card { margin-top: 1.25rem; }
.ok { background: var(--ok-bg); color: var(--ok); padding: 0.6rem 0.8rem; border-radius: 8px; }
button.danger { background: var(--danger); color: #fff; }
a.button {
  display: inline-block; font-weight: 600; padding: 0.55rem 1.15rem; text-decoration: none;
  color: var(--accent-text); background: var(--grad); border-radius: 999px;
}

/* Wide cards, headers */
.card.wide { max-width: none; }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.head h1 { margin: 0; }
.kicker { margin: 0 0 0.25rem; font-size: 0.9rem; }

/* Lists */
table.list { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.list th { text-align: left; font-weight: 600; font-size: 0.9rem; color: var(--faint); border-bottom: 1px solid var(--border); padding: 0.5rem 0.6rem; }
table.list td { border-bottom: 1px solid var(--border); padding: 0.55rem 0.6rem; vertical-align: top; }
table.list tr:hover td { background: var(--surface-2); }
table.compact td { padding: 0.35rem 0.6rem; }
.pager { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }
.filters { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filters input[type=search] { flex: 1; min-width: 14rem; margin: 0; }
.filters select { width: auto; margin: 0; }
/* Lists of the team (2026-11-05): a period, the way back to the whole list, sortable headers. */
.filters label.inline { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 400; }
.filters input[type=date] { width: auto; margin: 0; }
.filters a.clear { align-self: center; }
.pager > span { min-width: min(8rem, 30%); }
.pager > span:nth-child(2) { text-align: center; flex: 1; }
.pager > span:last-child { text-align: right; }
table.list th a.sort { color: inherit; text-decoration: none; }
table.list th a.sort:hover, table.list th a.sort.active { color: var(--text); }

/* Forms */
select, textarea {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.55rem 0.6rem;
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem 0.25rem; margin: 0 0 1.25rem; }
legend { font-weight: 700; padding: 0 0.4rem; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0 1rem; }
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
label.check input { width: auto; margin: 0; }
.field-error { display: block; color: var(--error); font-weight: 400; font-size: 0.9rem; margin-top: 0.25rem; }
.actions { display: flex; gap: 1rem; align-items: center; }
button.small { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
form.inline { display: inline-block; margin: 0.25rem 1rem 0 0; }

/* Record pages */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem 2rem; }
dl { display: grid; grid-template-columns: 10rem 1fr; gap: 0.4rem 1rem; margin: 0; }
/* Buttons after a list of details never stick to its last line (Robin, 2026-11-06). */
dl + .actions { margin-top: 1.25rem; }
dt { color: var(--muted); }
dd { margin: 0; }
.notes { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; white-space: pre-line; }
.contact { border-top: 1px solid var(--border); padding: 0.75rem 0; }
.contact-head { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.roles { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.5rem 0; }
.roles label { margin: 0; }
/* A contact's access and roles (2026-11-05): the access first, the roles, the rights folded; the
   removal of a contact in a discreet menu. */
.roles-form { margin: 0.5rem 0; }
.roles-form .roles { align-items: center; }
.role-box { display: inline-flex; align-items: center; }
.fine-rights > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.fine-rights .roles.is-off { opacity: 0.5; }
.roles-sole { margin: 0.5rem 0; }
.contact-edit { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.more-actions { position: relative; }
.more-actions > summary { list-style: none; cursor: pointer; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-weight: 700; }
.more-actions > summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 20; min-width: 18rem; padding: 0.6rem 0.8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.more-menu button.link { color: var(--danger); text-align: left; }
details.add { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
details.add summary { cursor: pointer; font-weight: 600; margin-bottom: 0.75rem; }
/* Notes of a record (app/templates/notes.php): the older notes and the payment log, folded. */
#notes details summary, #payment-log details summary { cursor: pointer; margin: 0.5rem 0; color: var(--muted); }

/* Tags and statuses */
.tag { display: inline-block; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); vertical-align: middle; white-space: nowrap; }
.status { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; vertical-align: middle; background: var(--bg); border: 1px solid var(--border); white-space: nowrap; }
.status-active { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.status-blocked { color: var(--error); background: var(--error-bg); border-color: transparent; }
.status-prospect { color: var(--accent); }
.status-inactive { color: var(--muted); }
/* Capacity of the servers: green, orange, red (the availability of a product follows). */
.status-green, .status-available { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.status-orange, .status-on_request { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.status-red, .status-unavailable { color: var(--error); background: var(--error-bg); border-color: transparent; }
/* Customers' monitoring: the tone of a site's or a server's status. */
.status-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.status-warning { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.status-critical { color: var(--error); background: var(--error-bg); border-color: transparent; }
.status-neutral, .status-muted { color: var(--muted); }
.suggestion { margin-bottom: 0.4rem; }
td.level-orange { color: var(--warn); font-weight: 600; }
td.level-red { color: var(--error); font-weight: 600; }
/* Catalog */
details.plan { border-top: 1px solid var(--border); padding: 0.6rem 0; }
details.plan summary { cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
details.plan form { margin-top: 0.75rem; }
details.plan .plan-images { margin-top: 0.75rem; }
details.plan .plan-images h3 { font-size: 1rem; margin: 0 0 0.25rem; }
details.plan .image form { margin-top: 0; }
table.prices input { margin: 0; max-width: 10rem; }
/* Billing */
.num { text-align: right; white-space: nowrap; }
.notice { background: var(--bg); border-left: 4px solid var(--accent); padding: 0.6rem 0.8rem; border-radius: 6px; }
.small { font-size: 0.85rem; }
table.lines textarea { min-width: 18rem; margin: 0; }
table.lines input, table.lines select { margin: 0 0 0.25rem; }
input.short { max-width: 7rem; }
.add-plan select { flex: 1; }
.totals { margin: 1rem 0 1rem auto; max-width: 24rem; }
.totals p { display: flex; justify-content: space-between; margin: 0.25rem 0; }
.totals p.grand { font-size: 1.15rem; border-top: 1px solid var(--border); padding-top: 0.4rem; }
.proof code { font-size: 0.8rem; overflow-wrap: anywhere; }
/* Team */
.avatar { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; object-fit: cover; }
.avatar.initials { display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--accent-text); background: var(--accent); }
.me-head { display: flex; align-items: center; gap: 0.75rem; }
.me-head .avatar { width: 48px; height: 48px; font-size: 1.1rem; }
h1 .avatar { width: 40px; height: 40px; font-size: 0.95rem; margin-right: 0.35rem; }
code.wrap { overflow-wrap: anywhere; }
input[type=file] { padding: 0.4rem; }
/* Dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.kpi b { display: block; font-size: 1.6rem; line-height: 1.2; }
.kpi.bad { border-color: var(--danger); }
.online { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ok); margin-right: 0.35rem; vertical-align: middle; }
/* Settings: dense grid, a wide section spans two columns; stacked on small screens. */
.grid-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 1rem; grid-auto-flow: dense; align-items: start; }
.grid-settings .span-2 { grid-column: span 2; }
@media (max-width: 48rem) { .grid-settings .span-2 { grid-column: span 1; } }
.grid-settings fieldset { margin: 0; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0 1.25rem; }
.field { break-inside: avoid; }
.head.compact { margin-bottom: 0.5rem; }
.head label.check { margin: 0; }
h3 { font-size: 1rem; margin: 1rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
label[hidden] { display: none; }
button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
button.secondary:hover, a.button.secondary:hover { filter: none; border-color: var(--faint); }
.test-result.ok { color: var(--ok); }
.test-result.error { color: var(--error); }
.inplace-status { margin: 0.5rem 0 0; min-height: 1.2em; color: var(--muted); }
.inplace-status.ok, .inplace-status.error { padding: 0.35rem 0.6rem; }

/* Product images: thumbnails with their names, editable in place. */
.images { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin: .75rem 0 1rem; }
.image { margin: 0; border: 1px solid var(--border); border-radius: 6px; padding: .5rem; }
.image img { display: block; width: 100%; height: 10rem; object-fit: contain; background: var(--bg-soft, transparent); }
.image figcaption { display: grid; gap: .35rem; margin-top: .5rem; }
.image figcaption form { display: grid; gap: .35rem; }
/* Brand logos: the original and the copy the PDF print, on a checkerboard that shows transparency. */
.logos { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0 1rem; }
.logo { margin: 0; border: 1px solid var(--border); border-radius: 6px; padding: .5rem; max-width: 100%; }
.logo img { display: block; max-width: 100%; height: 6rem; object-fit: contain; background-color: #fff;
  background-image: linear-gradient(45deg, #dde2e8 25%, transparent 25%), linear-gradient(-45deg, #dde2e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dde2e8 75%), linear-gradient(-45deg, transparent 75%, #dde2e8 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.logo figcaption { margin-top: .4rem; }
/* The copy the PDF print, on white as on paper: a logo drawn for a dark background (white
   lettering) shows here what the documents will lose. */
.logo.on-paper img { background: #fff; }
/* Tickets: three columns on a large screen (context | thread | properties), stacked below. */
.badge { display: inline-block; min-width: 1.3em; padding: 0 0.4em; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1.4; vertical-align: middle; }
/* Red says "to handle" (Robin, 2026-11-05); a count that waits for nobody of us is neutral. */
.badge.neutral { background: var(--border); color: var(--text); }
table.tickets .pick { width: 2rem; text-align: center; }
nav.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
nav.tabs a { padding: 0.4rem 0.75rem; text-decoration: none; color: var(--muted); border-radius: 7px 7px 0 0; }
nav.tabs a.active { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
a.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.head .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
table.tickets tr.priority-urgent td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.tickets tr.priority-high td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.typing { color: var(--accent); font-style: italic; }
/* The live list (2026-11-05): sections, tickets taken by others dimmed, one action per row,
   the received mails under the list. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.tickets tr.section-head th { background: var(--bg); color: var(--text); font-size: 0.9rem; text-transform: none; padding-top: 0.9rem; }
table.tickets tr.taken-by-other td { opacity: 0.55; }
table.tickets tr.taken-by-other:hover td { opacity: 1; }
td.row-action { white-space: nowrap; text-align: right; }
td.row-action form.inline { margin: 0 0 0 0.5rem; }
details.row-form { display: inline-block; margin: 0 0 0 0.5rem; text-align: left; white-space: normal; }
details.row-form summary { list-style: none; cursor: pointer; display: inline-block; font-weight: 600; padding: 0.35rem 0.8rem; font-size: 0.9rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
details.row-form summary::-webkit-details-marker { display: none; }
details.row-form[open] form { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; margin-top: 0.5rem; }
details.row-form label { margin: 0; }
button.link.danger-text { color: var(--danger); }
.received-mails { margin-top: 2rem; }
.received-mails h2 { font-size: 1.1rem; }
.notice.taken { border-color: var(--danger); }
.notice.return-ticket { border-color: var(--warn); margin-bottom: 0.8rem; }
.notice.return-ticket .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.notice.return-ticket blockquote { margin: 0.4rem 0 0; padding-left: 0.8rem; border-left: 2px solid var(--border); }
.notice.close-request { border-color: var(--warn); margin-bottom: 0.8rem; }
.notice.close-request .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
/* The page of a ticket (2026-11-05, Robin: "à toutes les largeurs"): the thread, one side column
   that goes under it in a narrow window. */
.ticket-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1.25rem; align-items: start; }
@media (max-width: 52rem) { .ticket-page { grid-template-columns: minmax(0, 1fr); } }
.ticket-page .card + .card { margin-top: 1rem; }
.ticket-side .card { padding: 1rem 1.1rem; }
.ticket-side h2 { font-size: 1.05rem; margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.ticket-side h3, .summary-grid h3 { margin: 0 0 0.35rem; font-size: 0.95rem; padding-top: 0; border-top: 0; }
.ticket-side p { margin: 0 0 0.35rem; }
.ticket-side p:last-child { margin-bottom: 0; }
.ticket-side .notes { margin-top: 0.5rem; padding-top: 0.5rem; }
.ticket-side .kicker { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ticket-side .requester { border-left: 4px solid var(--accent); }
.ticket-side .requester-name { font-size: 1.05rem; overflow-wrap: anywhere; }
.ticket-side .origin { overflow-wrap: anywhere; }
.user-agent { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-number { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.customer-number code { font-size: 0.95rem; }
button.copy-button { padding: 0.15rem 0.5rem; font-size: 0.8rem; font-weight: 600; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.time-left-list li, .time-left-list li.current { font-weight: 400; }
.time-left-list .service-name { display: block; font-size: 0.9rem; font-weight: 600; }
.time-figure { font-size: 1.25rem; font-weight: 700; }
.time-figure.exhausted { color: var(--error); background: var(--error-bg); padding: 0 0.4rem; border-radius: 6px; }
.properties .assignee { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.properties .assignee form.inline { margin: 0; }
.properties form.assign { margin: 0.5rem 0 0.75rem; }
.props-form { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.props-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0 0.75rem; }
.props-form label { margin-bottom: 0.6rem; font-size: 0.85rem; }
.props-form select, .props-form input { margin-top: 0.2rem; padding: 0.4rem 0.5rem; }
.ticket-dates { margin: 0.75rem 0 0; }
.ticket-dates summary, .note-only > summary, .thread-older summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.ticket-dates dl.compact { margin-top: 0.5rem; grid-template-columns: max-content 1fr; }
.ticket-thread .head { flex-wrap: wrap; }
.ticket-thread .head > div:first-child { min-width: 0; flex: 1 1 18rem; }
.ticket-thread h1 { overflow-wrap: anywhere; }
.ticket-from { margin: 0.35rem 0 0; color: var(--muted); }
@media (min-width: 52.01rem) { .ticket-from { display: none; } }
a.button.small { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
li.thread-older > details { margin: 0; }
li.thread-older > details > summary { padding: 0.5rem 0.8rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg); text-align: center; }
li.thread-older > details[open] > summary { margin-bottom: 0.75rem; }
li.thread-older > details > ol.thread { margin: 0; }
.message header time { cursor: help; }
.must-take { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; }
.must-take p { margin: 0 0 0.6rem; }
.note-only { margin: 0; }
.note-only[open] > summary { margin-bottom: 0.75rem; }
.time-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.time-entry { margin: 0; flex: 1 1 100%; }
.time-entry > summary { display: inline-block; cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 0.3rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.time-entry[open] > summary { margin-bottom: 0.75rem; }
.time-line > .time-entry:not([open]) { flex: 0 1 auto; }
/* The customer in short, in a modal (static/customer.js). */
dialog.customer-modal { width: min(52rem, calc(100vw - 1.5rem)); }
dialog.customer-modal[aria-busy="true"] > .modal-body { min-height: 8rem; background: linear-gradient(90deg, var(--surface) 30%, var(--bg) 50%, var(--surface) 70%) 0 0 / 200% 100%; animation: customer-loading 1.2s linear infinite; }
@keyframes customer-loading { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { dialog.customer-modal[aria-busy="true"] > .modal-body { animation: none; } }
.customer-summary .head { flex-wrap: wrap; margin-bottom: 0.5rem; }
.customer-summary .head h2 { margin: 0 0 0.25rem; }
.customer-summary .notes { margin: 0 0 0.75rem; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.5rem; }
.summary-grid p { margin: 0 0 0.5rem; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain li.current { font-weight: 600; }
ol.thread { list-style: none; padding: 0; margin: 0 0 1.5rem; }
ol.thread li { margin: 0 0 0.75rem; }
ol.thread li.event { padding: 0.2rem 0.6rem; border-left: 2px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.message { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem; background: var(--surface); }
.message.author-staff { border-left: 4px solid var(--accent); }
.message.note { background: var(--bg); border-style: dashed; }
.message header { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; }
.message .body { overflow-wrap: anywhere; line-height: 1.5; }
details.quoted { margin: 0.5rem 0 0; }
details.quoted summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
ul.attachments { margin: 0.5rem 0 0; padding-left: 1.1rem; }
form.reply { border-top: 1px solid var(--border); padding-top: 1rem; }
.kind-choice { display: flex; gap: 1.25rem; }
.quick-replies { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.quick-replies input { flex: 1; min-width: 10rem; margin: 0; }
.quick-replies select { width: auto; flex: 2; margin: 0; }
fieldset.time .chrono { display: flex; align-items: center; gap: 0.5rem; padding-top: 1.4rem; }
form.assign { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
form.assign select { margin: 0; }
dl.compact { grid-template-columns: 8rem 1fr; font-size: 0.92rem; }

/* Customer reviews and mail sequences. */
.stars { color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.review-body { white-space: pre-wrap; margin: 0.5rem 0; }
pre.mail-preview { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem; font-size: 0.9rem; }

/* Customer form: the button Enter presses (saving), out of sight; the company lookup. */
.default-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
fieldset.lookup .lookup-row { grid-template-columns: minmax(14rem, 1fr) auto; align-items: end; }
fieldset.lookup .lookup-row > button { margin-bottom: 0.75rem; }
.lookup-results { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.lookup-results > li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: start; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; }
.lookup-results > li > p, .lookup-results > li > ul { grid-column: 1 / -1; margin: 0; }
.lookup-establishments { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.lookup-establishments li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* Product page (Robin, 2026-10-06): cards in reading, edited in modals. A <details class="modal">
   is a disclosure without JavaScript; zion.js moves its body into a <dialog>. */
[hidden] { display: none !important; }
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.panel-head h2, .panel-head h3 { margin: 0; border: 0; padding: 0; }
.panel-head h3 { margin-top: 1rem; }
.panel dl.compact { grid-template-columns: 11rem 1fr; }
.panel .notes { margin-top: 0.75rem; }
details.modal { display: inline-block; margin: 0; vertical-align: middle; }
details.modal > summary { list-style: none; cursor: pointer; display: inline-block; }
details.modal > summary::-webkit-details-marker { display: none; }
details.modal > summary.button { font-weight: 600; padding: 0.6rem 1.1rem; color: var(--accent-text); background: var(--grad); border-radius: 999px; }
details.modal > summary.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
details.modal > summary.small { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
details.modal[open] { display: block; }
details.modal > .modal-body { margin: 0.75rem 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
dialog.modal { padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  width: min(58rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.modal > .modal-body { padding: 1.25rem 1.5rem; }
.modal-body > h2 { margin-bottom: 1rem; }
.modal-body .actions { margin-top: 0.5rem; }
.modal-body [data-close] { margin-left: 0.5rem; }
.option { border-top: 1px solid var(--border); padding: 0.6rem 0; }
.option-head { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; }
.option-actions { margin-left: auto; display: inline-flex; gap: 0.75rem; align-items: baseline; }
ul.values { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--muted); }
table.choices input, table.choices select { margin: 0; }
table.choices input.short { max-width: 6rem; }
table.list td.num button.link { white-space: nowrap; }
.plan-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; border-top: 1px solid var(--border); padding: 0.75rem 0; }
.plan-row .plan-thumb { width: 7rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; text-align: center; }
.plan-row .plan-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.plan-row .plan-prices { margin: 0.25rem 0 0; }
.plan-row .actions { gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 48rem) { .plan-row { grid-template-columns: minmax(0, 1fr); } .plan-row .plan-thumb { width: 100%; } }

/* Admin UI (Robin, 2026-10-06: "rien n'est aligné"): the general rules of the layout. Grids of
   cards share their row's height, forms in rows line up their controls, helps are tooltips,
   the settings come by sections. The product page's block builds on these. */
.cards { align-items: stretch; gap: 1.25rem; }
.cards > .card { margin: 0; min-width: 0; }
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }
/* No more masonry: a wide group spans two columns, nothing fills the holes out of order. */
.grid-settings { grid-auto-flow: row; align-items: stretch; }
/* Forms in rows: the same height for every control, each pushed down to its row's baseline
   so that a label on two lines never shifts its field. */
select { padding: 0.6rem 0.7rem; }
.row > label:not(.check) { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.row > label.check { align-self: end; min-height: 2.7rem; margin-bottom: 1rem; }
/* Lists and records: long values wrap inside their cell instead of pushing the layout; in a table,
   between words (2026-11-05): a table too wide for the window scrolls in its frame, words whole. */
table.list td { overflow-wrap: break-word; }
dd { min-width: 0; overflow-wrap: anywhere; }
/* Tooltip of a short help: a "?" button; the text shows on hover, on focus and on click
   (zion.js), and sits in the button's title without JavaScript. */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.35rem; }
.tip-button { width: 1.2rem; height: 1.2rem; padding: 0; border-radius: 50%; font-size: 0.75rem; line-height: 1; font-weight: 700;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border); cursor: help; }
.tip-button:hover, .tip-button:focus-visible, .tip.open .tip-button { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.tip-text { display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 0.4rem); width: max-content; min-width: 12rem; max-width: min(24rem, 80vw);
  padding: 0.5rem 0.7rem; font-size: 0.85rem; font-weight: 400; line-height: 1.4; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); white-space: normal; }
.tip:hover .tip-text, .tip:focus-within .tip-text, .tip.open .tip-text { display: block; }
.tip.flip .tip-text { left: auto; right: 0; }
/* Settings by sections: tabs, one section shown, each group a card, its fields on one grid of
   equal columns (label, control, tooltip); a box sits on the control line of its column. */
.settings-tabs { margin-bottom: 1.25rem; }
.settings-links { margin: 0 0 0.75rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 0 1.5rem; align-items: stretch; }
.field { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; margin: 0 0 1rem; }
.field-head { display: flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; font-weight: 600; font-size: 0.95rem; }
.field-head label { display: inline; margin: 0; }
.field-control { display: flex; align-items: center; min-height: 2.7rem; margin-top: 0.35rem; }
.field-control label.check { margin: 0; }
.field > label.check.small { margin: 0.35rem 0 0; }
/* Product page — second pass (Robin, 2026-10-06): an aligned grid instead of the masonry, the
   thumbnail as the button, compact plan cards and the plan form by sections. */
.product-head { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; }
.product-head > .panel { margin: 0; }
.product-media { display: flex; flex-direction: column; gap: 0.5rem; }
.product-media details.modal { align-self: stretch; }
.product-media details.modal > summary { display: block; text-align: center; }
.thumb-upload { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.thumb { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0.25rem;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); color: var(--muted); font-weight: 600; text-align: center; }
.thumb.empty { border-style: dashed; }
label.thumb { cursor: pointer; }
label.thumb:hover { border-color: var(--accent); color: var(--accent); }
.thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.thumb input[type=file] { display: none; }
.thumb-upload button[data-nojs] { align-self: flex-start; }
dl.pairs { grid-template-columns: max-content minmax(6rem, 1fr) max-content minmax(6rem, 1fr); gap: 0.3rem 1rem; }
@media (max-width: 60rem) { .product-head { grid-template-columns: minmax(0, 1fr); } .product-head .product-media { max-width: 13rem; } dl.pairs { grid-template-columns: max-content 1fr; } }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1.25rem; align-items: stretch; }
.grid-2 > .panel { margin: 0; }
.grid-2 .panel h3 { margin: 1rem 0 0.4rem; padding-top: 0.6rem; }
.grid-2 .panel h3.first { margin-top: 0; padding-top: 0; border-top: 0; }
.grid-2 .panel table.list { margin-bottom: 0.5rem; }
.grid-2 .panel > form > details.modal { margin-top: 0.25rem; }
.panel-head.compact { margin-bottom: 0.25rem; }
.panel-head.compact .label { margin: 0; }
/* Plan cards. */
.plan-card { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; border-top: 1px solid var(--border); padding: 0.7rem 0; }
.plan-card .plan-thumb { width: 6rem; height: 4rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; text-align: center; background: var(--bg); }
.plan-card .plan-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.plan-card .plan-title { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.plan-card .plan-prices { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.25rem 0 0; }
.plan-card .plan-attrs { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted); }
.plan-card .plan-attrs b { color: var(--text); font-weight: 600; }
.plan-card .actions { gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 48rem) { .plan-card { grid-template-columns: minmax(0, 1fr); } .plan-card .plan-thumb { width: 100%; } }
/* The variant form: the image widget beside the name, then sections. */
.plan-edit .img-widget { float: left; width: 7rem; margin: 0 1rem 0.5rem 0; }
.plan-edit .thumb { aspect-ratio: 1 / 1; }
.plan-edit form { clear: none; }
.plan-edit .section { clear: both; border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem; }
.plan-edit .section > .label, .plan-edit .panel-head .label { color: var(--text); font-weight: 600; }
.plan-edit label.check.small { font-size: 0.9rem; }
.plan-edit form.plan-retire { clear: both; margin-top: 0.75rem; text-align: right; }
.cycle-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.cycle-row { display: grid; grid-template-columns: 9rem 7rem minmax(0, 1fr); gap: 0.3rem 1rem; align-items: baseline; padding: 0.2rem 0; border-top: 1px dashed var(--border); }
.cycle-row:first-child { border-top: 0; }
.cycle-row b { text-align: right; }
@media (max-width: 40rem) { .cycle-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
table.pricing-rule input[type=number] { margin: 0; max-width: 5rem; }
table.pricing-rule input[type=text] { margin: 0; max-width: 8rem; }
table.pricing-rule input[type=checkbox] { width: auto; margin: 0; }
table.pricing-rule tr[hidden] { display: none; }
/* The compact image widget (Robin, 2026-10-06): the thumbnail, two actions on hover or focus. */
.img-widget { position: relative; display: flex; flex-direction: column; gap: 0.35rem; }
.img-widget .img-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.img-widget .img-actions form { margin: 0; }
@media (hover: hover) {
  .img-widget .img-actions { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; padding: 0.35rem; background: color-mix(in srgb, var(--bg) 85%, transparent); opacity: 0; transition: opacity .15s; }
  .img-widget:hover .img-actions, .img-widget:focus-within .img-actions { opacity: 1; }
}
/* The gallery modal: a grid, the details of each image folded. */
.gallery-modal { max-width: 60rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 1rem; margin: 0.75rem 0 1rem; }
.gallery .image { margin: 0; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gallery .image a.thumb { aspect-ratio: 4 / 3; }
.gallery .image.add { justify-content: center; }
.gallery figcaption { display: flex; flex-direction: column; gap: 0.35rem; }
.gallery .img-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.gallery .img-actions form { margin: 0; }
.gallery details.image-details > summary { cursor: pointer; color: var(--muted); }
.gallery details.image-details form { display: grid; gap: 0.35rem; margin: 0.35rem 0; }

/* Home and menus (Robin, 2026-11-05, server spec §16). The home's cards: wholly a link, the title
   large, the figure below, a line only when it helps; alerts in the colours of an error. The
   menu's counters are links of their own to what is to be done. The administration has a colour
   of its own. */
:root { --admin: #6b3fb0; --admin-bg: #f1eafb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="matrix"]) { --admin: #c9a6ff; --admin-bg: #2a2140; }
}
:root[data-theme="dark"] { --admin: #c9a6ff; --admin-bg: #2a2140; }
:root[data-theme="matrix"] { --admin: #ffd166; --admin-bg: #2a2410; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The header (Robin, 2026-11-05: "désencombrer", every window width). The main menu is a
   <details>: on a wide window its button is hidden and its links show in a row; below 42rem (or
   in a browser without ::details-content) they fold behind "Menu", in a panel under the header.
   The member's menu opens on their name: who they are, the display mode, the administration,
   their account, signing out. A counter sits in its menu button, as an exponent. */
.brand { flex: none; }
.main-menu, .user-menu { margin: 0; }
.main-menu > summary, .user-menu > summary { list-style: none; cursor: pointer; }
.main-menu > summary::-webkit-details-marker, .user-menu > summary::-webkit-details-marker { display: none; }
.top summary:focus-visible, .nav-item > a:focus-visible, .menu-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.main-menu { flex: 1 1 auto; min-width: 0; }
.menu-button { display: inline-flex; align-items: center; gap: 0.5rem; width: max-content; padding: 0.35rem 0.75rem;
  border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-weight: 600; }
.menu-button:hover, .main-menu[open] > .menu-button { background: var(--bg); }
.menu-icon { width: 1rem; height: 2px; margin: 5px 0; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
nav.main { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.5rem clamp(0.75rem, 2vw, 1.25rem) 0.75rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12); }
.main-menu nav.main .nav-item { align-self: flex-start; }
@supports selector(::details-content) {
  @media (min-width: 42rem) {
    .main-menu::details-content { display: block; content-visibility: visible; }
    .main-menu > summary { display: none; }
    nav.main { position: static; flex-direction: row; flex-wrap: wrap; padding: 0; background: none; border: 0; box-shadow: none; }
  }
  @media (min-width: 42rem) and (max-width: 52rem) { nav.main .nav-item > a:first-child { padding-left: 0.45rem; padding-right: 0.45rem; } }
}
.nav-item { display: inline-flex; align-items: flex-start; border-radius: 7px; white-space: nowrap; }
.nav-item > a:first-child { padding: 0.35rem 0.7rem; border-radius: inherit; color: var(--muted); text-decoration: none; }
.nav-item:hover > a:first-child { color: var(--text); }
.nav-item.active > a:first-child { color: var(--text); font-weight: 600; }
nav.main .nav-item:hover, nav.main .nav-item.active { background: var(--bg); }
nav.sub .nav-item > a:first-child { padding: 0.3rem 0.7rem; font-size: 0.95rem; }
nav.sub .nav-item.active { box-shadow: inset 0 -2px 0 var(--accent); }
nav.sub.admin { background: var(--admin-bg); }
nav.sub.admin .nav-item.active { box-shadow: inset 0 -2px 0 var(--admin); }
/* The counter: in the button, top right, pulled into the label's padding; a second one beside. */
.nav-item > .badge { flex: none; margin: 0.15rem 0.4rem 0 -0.45rem; font-size: 0.7rem; line-height: 1.45; }
.nav-item > .badge + .badge { margin-left: -0.2rem; }
a.badge { padding: 0 0.4em; color: #fff; background: var(--danger); text-decoration: none; border-radius: 999px; }
a.badge:hover, a.badge:focus-visible { color: #fff; background: var(--danger); outline: 2px solid var(--danger); outline-offset: 1px; }
.user-menu { position: relative; flex: none; margin-left: auto; }
.me { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.55rem 0.2rem 0.2rem; border-radius: 999px; color: var(--text); }
.me:hover, .user-menu[open] > .me { background: var(--bg); }
.me.in-admin .avatar { box-shadow: 0 0 0 2px var(--admin); }
.me-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { width: 0.45rem; height: 0.45rem; margin: 0 0.1rem 0.2rem; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 60rem) { .me-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.menu-panel { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 40; display: flex; flex-direction: column; width: max-content; min-width: 15rem;
  max-width: calc(100vw - 1.5rem); padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
.menu-who { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.45rem 0.6rem 0.6rem; }
.menu-who > span { display: flex; flex-direction: column; line-height: 1.3; }
.menu-who .muted { font-size: 0.85rem; }
.menu-group { display: flex; flex-direction: column; margin: 0; padding: 0.35rem 0; border-top: 1px solid var(--border); }
.menu-group:last-child { padding-bottom: 0; }
.menu-group form { margin: 0; }
.menu-heading { display: flex; align-items: center; margin: 0.15rem 0.7rem 0.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.menu-group.admin .menu-heading { color: var(--admin); }
.menu-entry { display: block; width: 100%; padding: 0.4rem 0.7rem; border: 0; border-radius: 6px; font: inherit; font-weight: 400; text-align: left; text-decoration: none;
  color: var(--text); background: none; cursor: pointer; }
.menu-entry:hover { background: var(--bg); }
.menu-entry[aria-current], .menu-entry[aria-pressed="true"] { font-weight: 600; }
.menu-group.admin .menu-entry:hover, .menu-group.admin .menu-entry[aria-current] { color: var(--admin); background: var(--admin-bg); }
.menu-entry.choice::before { content: ""; display: inline-block; width: 1.2rem; }
.menu-entry.choice[aria-pressed="true"]::before { content: "\2713"; color: var(--accent); }
/* Tables scroll sideways in their frame (View::frameTables()), never the page. Narrow windows:
   lighter margins, headers that wrap. */
.table-frame { position: relative; max-width: 100%; overflow-x: auto; }
.filters > * { max-width: 100%; }
@media (max-width: 40rem) {
  main { padding: 0.75rem 0.75rem 1.5rem; }
  .card { padding: 1rem; }
  .head { flex-wrap: wrap; }
}
.home > h1 { margin-bottom: 1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1.25rem; align-items: stretch; }
.tile { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tile:hover, .tile:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tile-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.tile-count { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--accent); }
.tile-note { font-size: 0.85rem; color: var(--muted); }
.tile.warn .tile-count { color: var(--warn); }
.tile.alert { background: var(--error-bg); border-color: var(--danger); }
.tile.alert .tile-title, .tile.alert .tile-count { color: var(--error); }
.tile.alert:hover, .tile.alert:focus-visible { box-shadow: 0 0 0 1px var(--danger); }
.home > .card + .card { margin-top: 1.25rem; }
.home .card .head { align-items: baseline; }
.home .card .head h2 { margin: 0; }

/* The customer's technical skill (Robin, 2026-11-06): in sight on a ticket and the customer's page. */
.technical-skill { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.technical-skill .skill-line { margin: 0; }
.technical-skill .kicker-inline, .manager-rate .kicker-inline, .customer-discount .kicker-inline { color: var(--muted); margin-right: 0.5rem; }
.technical-skill .skill-dots { letter-spacing: 0.1em; font-size: 1.05rem; }
.technical-skill .skill-form { margin: 0; display: inline-flex; gap: 0.4rem; align-items: center; }
.technical-skill .skill-form select { width: auto; }

/* The deactivated accounts of the team, folded (Robin, 2026-11-06). */
details.inactive-members { margin-top: 1rem; }
details.inactive-members > summary { cursor: pointer; color: var(--muted); }

/* A demonstration instance (Robin, 2026-11-06). */
.demo-banner { background: #b45309; color: #fff; text-align: center; font-weight: 700; padding: 0.35rem 1rem; letter-spacing: 0.02em; }

/* The live control (server spec §12, 2026-11-06): Webmonit's pill, play/pause and the cadence,
   everything else in the little menu the ▾ opens; drawn by live.js on the pages whose data can
   change while they are open. Its colours are the desk's. */
.livegroup { position: relative; display: inline-flex; align-items: center; gap: 0; flex: none; }
.livegroup[hidden] { display: none; }
.livegroup button { font: inherit; font-weight: 400; color: var(--text); }
.livebtn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0.9rem 0.32rem 0.6rem; font-size: 0.8rem;
  border: 1px solid var(--border); border-radius: 999px 0 0 999px; background: var(--bg); cursor: pointer; }
.livebtn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.livebtn.on .dot { background: var(--ok); }
.livebtn .ic { width: 14px; text-align: center; font-size: 0.7rem; color: var(--muted); }
.livebtn.on { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.livegroup .cadbtn { border: 1px solid var(--border); border-left: 0; background: var(--bg); color: var(--muted); padding: 0.32rem 0.55rem;
  border-radius: 0 999px 999px 0; cursor: pointer; font-size: 0.8rem; }
.livegroup button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.livegroup .pop-menu { position: absolute; right: 0; top: 100%; margin-top: 0.3rem; z-index: 40; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); font-size: 0.9rem; }
.livegroup .pop-menu[hidden] { display: none; }
.livegroup .pop-menu .chips { display: flex; gap: 0.25rem; }
.livegroup .pop-menu button.small { padding: 0.24rem 0.6rem; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.livegroup .pop-menu button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.livegroup .pop-menu button.on { border-color: var(--accent); font-weight: 600; }
.livegroup .pop-menu .small { font-size: 0.8rem; }
.livegroup .pop-menu label.check { margin: 0; font-size: 0.85rem; }
/* A narrow window (Webmonit's rule): the control takes a row of its own under the header, on the
   right, and its menu opens across the header. */
@media (max-width: 30rem) {
  .top:has(> .livegroup:not([hidden])) { flex-wrap: wrap; }
  .livegroup { position: static; order: 9; width: 100%; justify-content: flex-end; }
  .livegroup .pop-menu { left: 0.75rem; right: 0.75rem; white-space: normal; }
  .livegroup .pop-menu .chips { flex-wrap: wrap; }
}
/* The regions a page refreshes (data-live-region): a block of cards keeps the space between cards;
   the counter of the "Menu" button sits in a box of its own, which takes no room. */
.card + .live-block, .live-block + .card { margin-top: 1.25rem; }
.live-block:not(:has(> *)) { margin: 0; }
.menu-pending { display: contents; }

/* The warnings of every page (Stripe live while WooCommerce is not closed): a red banner under the menus. */
.warning-banner { margin: 0; padding: 0.6rem clamp(0.75rem, 2vw, 3rem); color: #fff; background: var(--danger); }
.warning-banner a { color: #fff; font-weight: 600; text-decoration: underline; margin-left: 0.5rem; }

/* The Stripe mode, at the top of the payment settings, and the mode of each registrar, at the top of
   « API Registrar »: the mode in large, red when live. */
.stripe-mode, .registrar-mode { border-left: 6px solid var(--accent); }
.stripe-mode.live, .registrar-mode.live { border-left-color: var(--danger); background: var(--error-bg); }
.stripe-mode-head, .registrar-mode-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.stripe-mode-head h2, .registrar-mode-head h2 { margin: 0; }
.stripe-mode-badge, .registrar-mode-badge { display: inline-block; padding: 0.15rem 0.8rem; border-radius: 999px; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #fff; background: var(--accent); }
.stripe-mode.live .stripe-mode-badge, .registrar-mode.live .registrar-mode-badge { background: var(--danger); }
.stripe-mode.live .stripe-mode-note, .registrar-mode.live .registrar-mode-note { color: var(--error); font-weight: 600; }
.stripe-sets, .registrar-sets { margin: 0.5rem 0; padding-left: 1.2rem; }
.stripe-mode-switch, .registrar-mode-switch { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin-top: 0.6rem; }
.stripe-mode-switch .field, .registrar-mode-switch .field { min-width: 14rem; }

/* Domain names' prices: a purchase price that moved stands out on its row; one small form per row. */
.domain-prices tr.cost-changed td { background: var(--warn-bg); }
.domain-prices form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0 0.3rem 0.2rem 0; }
.domain-prices input[name="amount"] { width: 6.5rem; }

/* The manager's rate of a customer, under the technical skill. */
.manager-rate { margin-top: 0.6rem; }
.manager-rate form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.customer-discount { margin-top: 0.6rem; }
.customer-discount form.inline, .customer-discount label.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.customer-discount input[name="discount"] { width: 5em; }
.customer-discount details { margin-top: 0.4rem; }

/* The bookkeeping (server spec §7.10): a zone where files are dropped, what became of them, the
   payments of an issued invoice, the small forms of a row. */
.dropzone { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 0.8rem 0; padding: 0.9rem 1rem;
  border: 2px dashed var(--border); border-radius: 8px; background: var(--bg); }
.dropzone.over { border-color: var(--accent); }
.dropzone.sending { opacity: 0.6; }
.dropzone label { display: flex; flex-direction: column; gap: 0.3rem; }
.files-report { margin: 0.6rem 0 1rem; }
.files-report summary { cursor: pointer; font-weight: 600; }
.payment-line + .payment-line { margin-top: 0.3rem; }
.payment-line.refund { color: var(--warn); }
.inline-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.3rem; }
.inline-upload input[type=file] { max-width: 12rem; font-size: 0.8rem; }
.edit-external form { display: grid; gap: 0.4rem; margin-top: 0.4rem; min-width: 14rem; }
.received-invoices form.inline { display: inline-flex; margin: 0.2rem 0.4rem 0 0; }
/* Fields of the bookkeeping (Robin, 2026-11-09: « un libellé et sa valeur du même côté »): each label above its value,
   on one grid aligned to the left, inputs and values read alike (.field-read: a value that is not typed). */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: 0.8rem 1rem; align-items: start; margin-bottom: 0.5rem; }
.field-grid > label, .field-grid > .field-read { display: grid; gap: 0.3rem; align-content: start; margin: 0; min-width: 0; }
/* What is typed is not bold: only the field's name is (2026-11-10). */
.field-grid > label { font-weight: 400; }
.field-grid > label > span:first-child, .field-read > span:first-child { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.field-grid input, .field-grid select { width: 100%; margin: 0; }
.field-read > a, .field-read > strong { overflow-wrap: anywhere; }
.field-grid > .field-wide { grid-column: 1 / -1; }
/* The exclusion rules of the bank, a modal (Robin, 2026-11-09): one line a rule; opened from elsewhere (.remote: no button of its own). */
details.modal.remote > summary { display: none; }
dialog.modal:has(> .rules-body) { width: min(52rem, calc(100vw - 1.5rem)); }
.rules-body > h2 { margin-bottom: 0.5rem; }
details.rule-edit > summary { list-style: none; cursor: pointer; display: inline-block; padding: 0.35rem 0.8rem; font-size: 0.9rem; font-weight: 600;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; }
details.rule-edit > summary::-webkit-details-marker { display: none; }
details.rule-edit[open] { padding: 0.6rem 0; }
details.rule-edit[open] > form { margin-top: 0.6rem; min-width: min(30rem, 70vw); }
details.rule-edit .actions { margin: 0.4rem 0; }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0 1.25rem; }
.export-actions form.inline { margin: 0; }
.export-facts { margin-bottom: 0.25rem; }
.pick-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin-top: 0.8rem; }
.pick-form > label { display: grid; gap: 0.3rem; margin: 0; flex: 1 1 18rem; }
.pick-form select { width: 100%; margin: 0; }

/* Moving in time (partial month_nav, Robin, 2026-11-09): the month before, the month shown, the month after, a jump by
   year then month. */
.month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.month-nav .button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.month-nav-step { min-width: 2.4rem; text-align: center; padding-left: 0.6rem; padding-right: 0.6rem; }
.month-nav-pick { position: relative; margin: 0; }
.month-nav-pick > summary { list-style: none; cursor: pointer; min-width: 9.5rem; text-align: center; font-weight: 600; font-size: 1.05rem;
  padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid transparent; }
.month-nav-pick > summary::-webkit-details-marker { display: none; }
.month-nav-pick > summary::after { content: " ▾"; color: var(--faint); font-size: 0.8em; }
.month-nav-pick > summary:hover, .month-nav-pick[open] > summary { border-color: var(--border); background: var(--surface); }
.month-grid { position: absolute; z-index: 30; top: calc(100% + 0.4rem); right: 0; width: max-content; max-height: 20rem; overflow-y: auto;
  padding: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); }
.month-grid-year { display: grid; grid-template-columns: 3.2rem repeat(6, 3.4rem); gap: 0.2rem; align-items: center; padding: 0.15rem 0; }
.month-grid-year + .month-grid-year { border-top: 1px solid var(--border); padding-top: 0.35rem; margin-top: 0.2rem; }
.month-grid-label { grid-row: span 2; font-weight: 600; color: var(--muted); }
.month-grid-cell { display: block; text-align: center; padding: 0.25rem 0; border-radius: 999px; font-size: 0.9rem; text-decoration: none; color: var(--text); }
a.month-grid-cell:hover { background: var(--surface-2); }
a.month-grid-cell.current { background: var(--grad); color: #fff; font-weight: 600; }
.month-grid-cell[aria-disabled="true"] { color: var(--faint); opacity: 0.5; }
.month-nav-today { font-size: 0.9rem; }
@media (max-width: 40rem) { .month-grid { right: auto; left: 50%; transform: translateX(-50%); } }
.head .actions .month-nav { margin: 0; }
.head .actions a.active { outline: 2px solid var(--accent); }

/* The inconsistencies of the bookkeeping, as a table grouped by kind (Robin, 2026-11-09): one row a case, « Correct… »
   a modal (a <dialog>, in the top layer: never clipped by the table's frame). */
table.inconsistencies td { vertical-align: top; }
table.inconsistencies tr.tone-red td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.inconsistencies tbody.inconsistency-group + tbody.inconsistency-group tr.group-head th { padding-top: 1.4rem; }
table.inconsistencies tr.group-head th { text-align: left; font-size: 1rem; font-weight: 700; background: var(--surface); border-bottom: 1px solid var(--border); }
table.inconsistencies tr.group-more td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
details.fix-menu > summary { white-space: nowrap; }
td.row-actions { white-space: nowrap; }
td.row-actions form.row-direct { margin: 0 0.4rem 0.3rem 0; }
td.row-actions details.fix-menu { display: inline-block; }
dialog.modal:has(> .fix-body) { width: min(38rem, calc(100vw - 1.5rem)); }
dialog.modal > .fix-body { display: grid; gap: 0.9rem; }
@media (max-width: 40rem) { dialog.modal > .fix-body { padding: 1rem; } }
.fix-body > h2 { margin: 0; font-size: 1.05rem; }
.fix-body > h2 + .fix-option { border-top: 0; padding-top: 0; }
.fix-option { display: grid; gap: 0.45rem; margin: 0; padding: 0.8rem 0 0; border-top: 1px solid var(--border); }
.fix-option h3 { margin: 0; padding: 0; border: 0; font-size: 0.98rem; }
.fix-option p { margin: 0; }
.fix-option label { display: grid; gap: 0.25rem; margin: 0; font-weight: 600; }
.fix-option input, .fix-option select { width: 100%; margin: 0; }
.fix-option select[size] { min-height: 8rem; }
.fix-option .actions { margin: 0.2rem 0 0; }
.fix-option .fix-debit { margin: 0; padding: 0.5rem 0.7rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.fix-option .field-grid { margin: 0; }
details.fix-aside { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 2px dashed var(--border); }
details.fix-aside > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
details.fix-aside .fix-option { border-top: 0; padding-top: 0.5rem; }

/* The dashboard of the bookkeeping: the month's figures beside the inconsistencies, two charts in inline SVG. The
   series' colours pass the palette checks (lightness, chroma, colour-blind separation) on each theme's surface. */
:root { --chart-1: #2a6bb5; --chart-2: #d07a2d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="matrix"]) { --chart-1: #4a8bd4; --chart-2: #c97a35; }
}
:root[data-theme="dark"] { --chart-1: #4a8bd4; --chart-2: #c97a35; }
:root[data-theme="matrix"] { --chart-1: #3ddc84; --chart-2: #ffd166; }
.dash-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr); gap: 1rem; margin-bottom: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .dash-top { grid-template-columns: 1fr; } }
.dash-side { display: grid; gap: 0.5rem; align-content: start; }
.dash-side > .tile { height: auto; }
.dash-aside { margin: 0; color: var(--muted); }
.dash-figures { margin: 0; align-self: start; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); }
.dash-figures .kpi { display: flex; flex-direction: column; gap: 0.2rem; }
.dash-figures .kpi a { color: var(--text); text-decoration: none; }
.dash-figures .kpi a:hover b { color: var(--accent); }
.kpi-label { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.dash-kinds { display: grid; gap: 0.15rem; margin-top: 0.35rem; font-size: 0.88rem; color: var(--muted); }
.dash-kind { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.4rem; align-items: baseline; }
.dash-kind b { text-align: right; color: var(--text); }
.dash-kind.red, .dash-kind.red b { color: var(--error); font-weight: 700; }
/* The counts of the inconsistencies lead to their lists (Robin, 2026-11-09): the tile is no link itself. */
.tile.dash-inconsistencies:hover { border-color: var(--border); box-shadow: none; }
.tile.alert.dash-inconsistencies:hover { border-color: var(--danger); box-shadow: none; }
.dash-inconsistencies a.tile-title, .dash-inconsistencies a.tile-count { color: inherit; text-decoration: none; }
.dash-inconsistencies a.tile-count { color: var(--accent); }
.tile.alert.dash-inconsistencies a.tile-title, .tile.alert.dash-inconsistencies a.tile-count { color: var(--error); }
a.dash-kind { color: var(--muted); text-decoration: none; border-radius: 4px; }
a.dash-kind:hover, a.dash-kind:focus-visible { color: var(--text); background: var(--hover, rgba(127, 127, 127, 0.08)); }
a.dash-kind.red { color: var(--error); }
/* The badge of an inconsistency on its row, and « Correct… » beside it (the lists of the bookkeeping). */
.row-fix { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.row-fix + .row-fix { margin-top: 0.3rem; }
.inconsistency-badge { white-space: nowrap; }
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 1.25rem; }
figure.chart { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
figure.chart figcaption { display: flex; align-items: center; gap: 0.4rem; }
figure.chart figcaption h2 { margin: 0 0 0.5rem; }
svg.bar-chart { display: block; width: 100%; height: auto; }
svg.bar-chart .grid { stroke: var(--border); stroke-width: 1; }
svg.bar-chart .grid.base { stroke: var(--muted); }
svg.bar-chart .tick { fill: var(--muted); font-size: 12px; font-family: var(--font); }
svg.bar-chart .tick.strong { fill: var(--text); font-weight: 700; }
svg.bar-chart .hit { fill: transparent; }
svg.bar-chart .group:hover .hit { fill: var(--bg); }
svg.bar-chart .bar.s1 { fill: var(--chart-1); }
svg.bar-chart .bar.s2 { fill: var(--chart-2); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.4rem 0 0; font-size: 0.88rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; }
.swatch.s1 { background: var(--chart-1); }
.swatch.s2 { background: var(--chart-2); }
details.chart-table { margin: 0.5rem 0 0; }
details.chart-table summary { cursor: pointer; color: var(--muted); }

/* Export (docs/UI.md, lot 2): the table of the months, a month's page, the transmission and the planning in modals. */
.crumb { margin: 0 0 0.25rem; font-size: 0.9rem; }
.crumb a { color: var(--muted); }
.planning-state { color: var(--muted); margin: 0 0 0.75rem; }
table.export-months td.date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
table.export-months td, table.export-gaps td { vertical-align: middle; }
table.export-months td.row-actions, table.export-gaps td.row-actions { white-space: nowrap; }
table.export-months td.row-actions > * + * { margin-left: 0.35rem; }
table.export-gaps td.row-actions { text-align: right; }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.export-actions .export-options { color: var(--muted); }
.export-actions .export-options a { margin-left: 0.5rem; }
dialog.modal:has(> .transmit-body), dialog.modal:has(> .note-body), dialog.modal:has(> .planning-body) { width: min(46rem, calc(100vw - 1.5rem)); }
.transmit-body pre.mail-preview { max-height: 22rem; overflow: auto; }
.planning-body pre.mail-preview { max-height: 11rem; overflow: auto; margin: 0; }
.note-body pre.monthly-note { max-height: 70vh; overflow: auto; }
.planning-body form { display: grid; gap: 0.75rem; }
.planning-body .notice { margin: 0; }
.planning-body h3 { margin: 0.25rem 0 0; font-size: 1rem; }
.gaps-none { display: flex; align-items: center; gap: 0.6rem; }
table.export-months td:first-child { white-space: nowrap; }
@media (max-width: 40rem) {
  table.export-gaps thead { display: none; }
  table.export-gaps td { display: block; }
  table.export-gaps td:first-child { border-bottom: 0; padding-bottom: 0.25rem; }
  table.export-gaps td.row-actions { text-align: left; white-space: normal; }
}
/* The filters of a list as tabs under its title (list_tabs.php, docs/UI.md rule 1). */
nav.list-tabs { margin-top: -0.25rem; }
nav.list-tabs .tab-count { display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.8rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
nav.list-tabs .tab-count.status-red { color: var(--error); background: var(--error-bg); }
.drop-body .dropzone { border: 0; padding: 0; background: none; }
dialog.modal:has(> .drop-body) { width: min(34rem, calc(100vw - 1.5rem)); }
.list-facts { color: var(--muted); }
table.received-invoices td.debit-cell button { white-space: nowrap; }
table.received-invoices td.debit-cell > form.inline, table.received-invoices td.debit-cell > details.modal { margin: 0 0.35rem 0.3rem 0; }
table.issued-invoices td:nth-child(-n+2) { white-space: nowrap; }
/* « Résultats » (lot 5, Robin's review): invoiced and collected in two blocks, each its curves — the current year in
   the first chart colour, the one before in the second, the older ones in grey dashes, each named at its end —, the
   HT / TTC switch under the curves, the unit after every amount. */
.results-block { margin-top: 1.75rem; }
.results-block:first-of-type { margin-top: 0.5rem; }
.results-block > h2 { margin-bottom: 0.5rem; }
.accounting-results figure.chart.line { margin: 0 0 0.75rem; padding: 0.75rem 1rem 0.25rem; max-width: 60rem; }
svg.line-chart { display: block; width: 100%; height: auto; }
svg.line-chart .grid { stroke: var(--border); stroke-width: 1; }
svg.line-chart .grid.base { stroke: var(--faint); }
svg.line-chart .tick { fill: var(--muted); font-size: 12px; font-family: var(--font); }
svg.line-chart .curve polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.line-chart .curve circle { stroke: var(--surface); stroke-width: 1.5; }
svg.line-chart .curve circle:hover { r: 5; }
svg.line-chart .curve-name { font-size: 12px; font-weight: 700; font-family: var(--font); }
svg.line-chart .current polyline { stroke: var(--chart-1); stroke-width: 3; }
svg.line-chart .current circle, svg.line-chart .current .curve-name { fill: var(--chart-1); }
svg.line-chart .previous polyline { stroke: var(--chart-2); }
svg.line-chart .previous circle, svg.line-chart .previous .curve-name { fill: var(--chart-2); }
svg.line-chart .older polyline { stroke: var(--faint); stroke-width: 1.5; }
svg.line-chart .older circle, svg.line-chart .older .curve-name { fill: var(--faint); }
/* The switch: a label, two options in one rounded track, the chosen one raised; its one-line reason beside it. */
.basis-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0 0 1rem; }
.basis-label { color: var(--faint); font-size: 0.9rem; font-weight: 600; }
nav.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
nav.segmented a { min-width: 3.4rem; padding: 0.3rem 0.9rem; border-radius: 999px; text-align: center; text-decoration: none; color: var(--muted);
  font-weight: 600; font-size: 0.9rem; line-height: 1.4; transition: background-color 0.15s, color 0.15s; }
nav.segmented a:hover { color: var(--text); }
nav.segmented a.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--border); }
nav.segmented a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.basis-note { color: var(--muted); font-size: 0.88rem; flex: 1 1 18rem; }
@media (prefers-reduced-motion: reduce) { nav.segmented a { transition: none; } }
.unit { color: var(--faint); font-size: 0.8em; font-weight: 600; }
table.results-table td.num, table.results-forecast-months td.num, table.forecast-items td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.results-table th.num { white-space: nowrap; }
table.results-table tr.current td { background: var(--surface-2); }
table.list tfoot th, table.list tfoot td { border-top: 2px solid var(--border); border-bottom: 0; padding: 0.55rem 0.6rem; text-align: left; }
table.list tfoot tr + tr th, table.list tfoot tr + tr td { border-top: 1px solid var(--border); }
table.list tfoot td.num { text-align: right; }
.chart-more { margin: 0.5rem 0 0; font-size: 0.9rem; }
table.list th.num { text-align: right; }
.accounting-results figure.chart { max-width: 58rem; }
/* The countdown to the next export (Robin, 2026-11-10), at the head of Export: its tone says how urgent. */
.export-countdown { margin: 0 0 0.5rem; padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--surface-2); font-weight: 600; }
.export-countdown a { color: var(--text); text-decoration: none; }
.export-countdown a:hover { text-decoration: underline; }
.export-countdown.soon { background: var(--warn-bg); }
.export-countdown.soon a { color: var(--warn); }
.export-countdown.late { background: var(--error-bg); }
.export-countdown.late a { color: var(--error); }
/* Trésorerie: the three curves of the flows side by side. */
.accounting-treasury .dash-charts { margin-bottom: 1rem; }
.accounting-treasury .dash-charts figure.chart.line { max-width: none; margin: 0; }
.accounting-treasury figure.chart figcaption h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.results-facts strong.big { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.accounting-treasury figure.chart figcaption h3 { border: 0; padding: 0; }
/* « Ce que je peux me verser »: the answer first, large; then the calculation, each line its source. */
.pay-answer { display: grid; gap: 0.25rem; margin: 0.5rem 0 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), color-mix(in srgb, var(--accent-2) 8%, var(--surface))); }
.pay-answer-label { color: var(--muted); font-weight: 600; }
.pay-answer-value { font-size: 2.4rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.pay-answer-note { color: var(--muted); }
.pay-estimate { margin-top: 0.35rem; font-size: 0.85rem; color: var(--faint); font-style: italic; }
.pay-answer.nothing { background: var(--surface-2); }
table.pay-lines td.num { white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: top; }
table.pay-lines .sign { color: var(--muted); }
table.pay-lines tfoot td.num strong { font-size: 1.15rem; }
.source { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.source-estimate { color: var(--warn); background: var(--warn-bg); }
.source-entered { color: var(--ok); background: var(--ok-bg); }
table.pay-dues tr.paid td { color: var(--muted); }
.accounting-pay .results-block > .head { margin-bottom: 0.5rem; }
/* « Résultats », the period, the modes and HT / TTC (Robin, 2026-11-10): the switches are radio buttons styled as the
   segmented control; the view changes in place by CSS (:has), the page does not move. */
.results-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.results-toolbar .tool { display: flex; align-items: center; gap: 0.6rem; }
.segmented input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented label { min-width: 3.4rem; padding: 0.3rem 0.9rem; border-radius: 999px; text-align: center; color: var(--muted); font-weight: 600;
  font-size: 0.9rem; line-height: 1.4; cursor: pointer; margin: 0; transition: background-color 0.15s, color 0.15s; }
.segmented label:hover { color: var(--text); }
.segmented input:checked + label { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--border); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
span.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .segmented label { transition: none; } }
.results-view:has(#mode-linear:checked) [data-only-mode="overlay"],
.results-view:not(:has(#mode-linear:checked)) [data-only-mode="linear"],
.results-view:has(#basis-ttc:checked) [data-only-basis="ht"],
.results-view:not(:has(#basis-ttc:checked)) [data-only-basis="ttc"],
.results-view:has(#split-on:checked) [data-only-split="all"],
.results-view:not(:has(#split-on:checked)) [data-only-split="split"] { display: none; }
/* Recurring and one-off side by side (Robin, 2026-11-10), one under the other on a narrow screen. */
.split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 0.5rem 1.5rem; }
.split-grid h3 { margin: 0 0 0.25rem; font-size: 1rem; }
dialog.modal:has(> .revenue-body) { width: min(52rem, calc(100vw - 1.5rem)); }
.revenue-body .table-frame { max-height: 60vh; overflow: auto; }
.revenue-products tr.overridden td:first-child { font-weight: 600; }
.revenue-products select { min-width: 13.5rem; }
/* The time charts: one colour a series (the chart palette, never a state's), a dashed line for a reference. */
:root { --chart-3: #2a9d8f; --chart-4: #8e5bd0; --chart-5: #c44e7a; --chart-6: #7b8798; }
svg.time-chart { display: block; width: 100%; height: auto; }
svg.time-chart .grid { stroke: var(--border); stroke-width: 1; }
svg.time-chart .grid.base { stroke: var(--faint); }
svg.time-chart .tick { fill: var(--muted); font-size: 12px; font-family: var(--font); }
svg.time-chart .curve polyline { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
svg.time-chart .curve circle { stroke: var(--surface); stroke-width: 1.5; }
svg.time-chart .ref line { stroke-width: 1.5; stroke-dasharray: 6 4; }
svg.time-chart .c1 polyline { stroke: var(--chart-1); stroke-width: 3; } svg.time-chart .c1 circle, .swatch.c1 { fill: var(--chart-1); background: var(--chart-1); }
svg.time-chart .c2 polyline { stroke: var(--chart-2); } svg.time-chart .c2 circle, .swatch.c2 { fill: var(--chart-2); background: var(--chart-2); }
svg.time-chart .c3 polyline { stroke: var(--chart-3); } svg.time-chart .c3 circle, .swatch.c3 { fill: var(--chart-3); background: var(--chart-3); }
svg.time-chart .c4 polyline { stroke: var(--chart-4); } svg.time-chart .c4 circle, .swatch.c4 { fill: var(--chart-4); background: var(--chart-4); }
svg.time-chart .c5 polyline { stroke: var(--chart-5); stroke-dasharray: 5 3; } svg.time-chart .c5 circle, .swatch.c5 { fill: var(--chart-5); background: var(--chart-5); }
svg.time-chart .c6 polyline { stroke: var(--chart-6); stroke-dasharray: 2 3; } svg.time-chart .c6 circle, .swatch.c6 { fill: var(--chart-6); background: var(--chart-6); }
svg.time-chart .ref-min line { stroke: var(--chart-5); } .swatch.ref-min { background: var(--chart-5); }
svg.time-chart .ref-max line { stroke: var(--chart-3); } .swatch.ref-max { background: var(--chart-3); }
svg.time-chart [hidden] { display: none; }
.chart-legend.toggles { gap: 0.4rem 0.6rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.legend-item[aria-pressed="false"] { color: var(--faint); background: var(--surface-2); }
.legend-item[aria-pressed="false"] .swatch { opacity: 0.35; }
.legend-item .swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; }
.accounting-results figure.chart.line.wide-chart { max-width: none; }
/* The home in three parts (Robin, 2026-11-10): tickets, bookkeeping, services; each its title, its tiles aligned — the
   same height, the title on two lines at most, the figure on one baseline across the row, the note under it. */
.home-group { margin: 0 0 1.25rem; padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.home-group > h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.home-group .tiles { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); margin-bottom: 0; }
.home-live .tile { min-height: 8.5rem; }
.home-live .tile-title { min-height: 2.6em; font-size: 1rem; line-height: 1.3; }
.home-live .tile-count { font-variant-numeric: tabular-nums; }
/* chart_series (Robin, 2026-11-10): eight distinct colours (the chart palette, never a state's), a dashed curve for a
   bound, the name at the end of each curve; the hovered curve forward, the others faded. */
:root { --chart-7: #b5651d; --chart-8: #3a7d44; }
svg.series-chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.series-chart .grid { stroke: var(--border); stroke-width: 1; }
svg.series-chart .grid.base { stroke: var(--faint); }
svg.series-chart .tick { fill: var(--muted); font-size: 12px; font-family: var(--font); }
svg.series-chart .curve polyline { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; transition: opacity 0.15s; }
svg.series-chart .curve circle { stroke: var(--surface); stroke-width: 1.5; }
svg.series-chart .curve.dashed polyline { stroke-dasharray: 6 4; stroke-width: 1.75; }
svg.series-chart .curve.steps circle { opacity: 0; }
svg.series-chart .curve.steps circle:hover { opacity: 1; }
svg.series-chart .curve-name { font-size: 12px; font-weight: 700; font-family: var(--font); }
svg.series-chart [hidden] { display: none; }
svg.series-chart .c1 polyline { stroke: var(--chart-1); stroke-width: 3; }
svg.series-chart .c2 polyline { stroke: var(--chart-2); }
svg.series-chart .c3 polyline { stroke: var(--chart-3); }
svg.series-chart .c4 polyline { stroke: var(--chart-4); }
svg.series-chart .c5 polyline { stroke: var(--chart-5); }
svg.series-chart .c6 polyline { stroke: var(--chart-6); }
svg.series-chart .c7 polyline { stroke: var(--chart-7); }
svg.series-chart .c8 polyline { stroke: var(--chart-8); }
svg.series-chart .c1 circle, svg.series-chart .c1 .curve-name, .swatch.c1 { fill: var(--chart-1); background: var(--chart-1); }
svg.series-chart .c2 circle, svg.series-chart .c2 .curve-name, .swatch.c2 { fill: var(--chart-2); background: var(--chart-2); }
svg.series-chart .c3 circle, svg.series-chart .c3 .curve-name, .swatch.c3 { fill: var(--chart-3); background: var(--chart-3); }
svg.series-chart .c4 circle, svg.series-chart .c4 .curve-name, .swatch.c4 { fill: var(--chart-4); background: var(--chart-4); }
svg.series-chart .c5 circle, svg.series-chart .c5 .curve-name, .swatch.c5 { fill: var(--chart-5); background: var(--chart-5); }
svg.series-chart .c6 circle, svg.series-chart .c6 .curve-name, .swatch.c6 { fill: var(--chart-6); background: var(--chart-6); }
svg.series-chart .c7 circle, svg.series-chart .c7 .curve-name, .swatch.c7 { fill: var(--chart-7); background: var(--chart-7); }
svg.series-chart .c8 circle, svg.series-chart .c8 .curve-name, .swatch.c8 { fill: var(--chart-8); background: var(--chart-8); }
svg.series-chart:has(g.curve:hover) g.curve:not(:hover), [data-chart-series].focusing svg g.curve:not(.focus) { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) { svg.series-chart .curve polyline { transition: none; } }
.on-basis { font-weight: 500; color: var(--muted); font-size: 0.9em; }

/* Quotes (Robin, 2026-11-10): the list's states, the « Nouveau devis » modal (a customer, or a prospect), the editor:
   lines in a table that scrolls in its frame, the terms beside the totals. */
.status.quote-draft { color: var(--muted); }
.status.quote-sent { color: var(--accent); }
.status.quote-accepted { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.status.quote-expired, .status.quote-cancelled { color: var(--faint); }
dialog.modal:has(> .quote-new-body) { width: min(44rem, calc(100vw - 1.5rem)); }
.quote-new-body form { display: grid; gap: 1rem; }
.quote-new-body .tool { display: flex; }
.quote-new-body:has(#who-prospect:checked) [data-only-who="existing"],
.quote-new-body:not(:has(#who-prospect:checked)) [data-only-who="prospect"] { display: none; }
.quote-facts { margin: 0 0 1.25rem; }
table.quote-lines { min-width: 52rem; }
table.quote-lines td { vertical-align: top; }
table.quote-lines td.designation { width: 40%; }
table.quote-lines textarea { width: 100%; min-width: 16rem; resize: vertical; }
table.quote-lines input.qty { width: 4.5rem; }
table.quote-lines input.money { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
table.quote-lines td.num { padding-top: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.with-unit { display: inline-flex; align-items: center; gap: 0.35rem; }
.with-unit > span { color: var(--muted); }
input.pct { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.line-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0.75rem 0 1.5rem; }
.catalogue-add { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.catalogue-add select { margin: 0; max-width: 24rem; }
.quote-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); gap: 1.5rem 2.5rem; align-items: start; }
.quote-terms h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.quote-totals { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
.quote-totals dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 0; }
.quote-totals dt { color: var(--muted); }
.quote-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-totals .grand { color: var(--text); font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.25rem; }
.quote-totals p { margin: 0.75rem 0 0; }
.quote-form > .actions { margin-top: 1.25rem; }
.quote-delete { margin-top: 0.5rem; }
@media (max-width: 760px) { .quote-bottom { grid-template-columns: 1fr; } }

/* The accountant's desk (Robin, 2026-11-10): FR / EN on every page. */
.language-switch { display: inline-flex; gap: 0.15rem; margin: 0 0.5rem 0 auto; }
.language-switch button.link { padding: 0.2rem 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 999px; }
.language-switch button.link.active { color: var(--accent); background: var(--surface-2); }

/* Stripe payouts (Robin, 2026-11-10): a payout's credit unfolds on what it carries; one tied to no invoice stands out. */
tr.payout-row > td { padding-top: 0; border-top: 0; }
.payout-unfold > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; padding: 0.15rem 0 0.5rem; }
.payout-unfold[open] > summary { margin-bottom: 0.5rem; }
table.payout-lines tr.unlinked td { background: color-mix(in srgb, var(--error) 6%, transparent); }
.payout-check { margin: 0.4rem 0 0; color: var(--muted); }
.payout-check.gap { color: var(--error); }
.payout-block { margin-top: 1.75rem; }
.payout-block h2 { margin: 0; font-size: 1.1rem; }
.payout-block > p.muted { margin: 0.15rem 0 0.6rem; }
.payouts-facts { margin-bottom: 1rem; }
.status-blocked-text { color: var(--error); }
table.payout-lines { table-layout: fixed; min-width: 40rem; }
table.payout-lines th:nth-child(1) { width: 13%; }
table.payout-lines th:nth-child(2) { width: 18%; }
table.payout-lines th:nth-child(4), table.payout-lines th:nth-child(5), table.payout-lines th:nth-child(6) { width: 13%; }

/* The transfer code of a domain name, shown once (service_transfer_code.php): large, selected in one click. */
.transfer-code code { font-size: 1.4rem; padding: 0.3rem 0.6rem; user-select: all; }

/* The brand's looks (Robin, 2026-11-11); the template of its mails (2026-11-12): a whole mail as preview, the foot's layout. */
.looks-title { margin: 1.4rem 0 0.6rem; font-size: 1.05rem; }
.card input[type=color] { width: 4rem; height: 2.2rem; padding: 0.15rem; }
.row > .field-read { display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
#mail-template .mail-preview-frame { max-width: 40rem; display: block; }
.foot-layout input[type=number] { width: 4.5rem; }
.foot-layout td, .foot-layout th { vertical-align: middle; }
/* A page title with its filters right after it, not pushed to the far side (Robin, 2026-11-12). */
.head.head-start { justify-content: flex-start; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* The brands as a tree (Robin, 2026-11-11): the parent company, then its brands indented under a rule. */
.brand-tree { margin-top: 1rem; display: grid; gap: 1rem; }
.brand-children { list-style: none; margin: 0 0 0 1.4rem; padding: 0 0 0 1.2rem; border-left: 2px solid var(--border); display: grid; gap: 1rem; }
.brand-node { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.6rem 1.2rem; align-items: start; }
.brand-node h2 { margin: 0; font-size: 1.05rem; }
.brand-node p { margin: 0.2rem 0 0; }
.brand-node-main { display: flex; gap: 0.8rem; align-items: center; }
.brand-node-logo { max-height: 2.4rem; max-width: 6rem; background: #fff; border-radius: 4px; }
.brand-node-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0; font-size: 0.9rem; }
.brand-node-facts dt { color: var(--muted); }
.brand-node-facts dd { margin: 0; }
.brand-node-gaps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.brand-node .actions { margin: 0; justify-self: end; grid-column: 3; grid-row: 1; }
.tag.warn, .tag.mailbox-missing { background: var(--error-bg); color: var(--error); }
.tag.mailbox-own { background: var(--ok-bg); color: var(--ok); }
.error-text { color: var(--error); }
.senders-list th, .senders-list td { vertical-align: top; }
.senders-list th { text-align: left; font-weight: 600; width: 34%; }
.brand-children > li { margin: 0; }
.senders-list tr.warn th { color: var(--error); }
@media (max-width: 760px) { .brand-node { grid-template-columns: 1fr; } .brand-node .actions { justify-self: start; } .brand-children { margin-left: 0.4rem; } }

/* The gallery of the brands' logos (Robin, 2026-11-11): one logo, every brand that chooses it. */
.logo-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: end; margin-top: 0.8rem; }
.logo-gallery { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.8rem; }
.logo-gallery li { border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; display: grid; gap: 0.4rem; align-content: start; }
.logo-gallery img { max-width: 100%; max-height: 4rem; background: #fff; justify-self: start; }
.logo-gallery p { margin: 0; }

/* « Gérer les tickets » on a mailbox (2026-11-11): the three choices for the mails without a ticket number, each with its
   one-line help under it; greyed while the box is unticked. */
fieldset.choices { padding-bottom: 0.5rem; }
fieldset.choices legend { font-weight: 600; padding: 0 0.25rem; }
fieldset.choices label.check { flex-wrap: wrap; row-gap: 0; margin-bottom: 0.5rem; }
fieldset.choices label.check .muted { flex-basis: 100%; padding-left: 1.6rem; }
fieldset.choices:disabled { opacity: 0.55; }

/* « Mails reçus » under the tickets (point 6, 2026-11-11): one heading per mailbox, the preview of each mail under its
   subject, its attachments one per line. */
.received-mails tr.group th { text-align: left; font-weight: 600; padding-top: 1rem; border-bottom: 1px solid var(--border); }
.received-mails tr.group th .muted { font-weight: 400; margin-left: 0.5rem; }
.received-mails .mail-subject .preview { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.received-mails .attachment-name { display: block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.received-mails td.row-action { white-space: normal; min-width: 15rem; max-width: 20rem; }
.received-mails td.row-action > details.row-form, .received-mails td.row-action > form.inline { margin: 0 0.5rem 0.4rem 0; }

/* A brand's mailbox inherited from the parent company (point 8, 2026-11-11): what leaves today, above the form that
   gives the brand its own. */
.notice.inherited-box { margin-bottom: 1rem; }
.notice.inherited-box p { margin: 0 0 0.25rem; }

/* The price display of a brand (point 8, 2026-11-11): radios dressed as the HT / TTC switch of the results (nav.segmented). */
.segmented-field { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.segmented-field legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.segmented label { position: relative; margin: 0; font-weight: 600; }
.segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented span { display: block; min-width: 3.4rem; padding: 0.3rem 0.9rem; border-radius: 999px; text-align: center; color: var(--muted);
  font-size: 0.9rem; line-height: 1.4; transition: background-color 0.15s, color 0.15s; }
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--border); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented input:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) { .segmented span { transition: none; } }

/* Our servers at Hetzner (fleet_server.php): the power actions, one per line with what it does. */
.choice-list { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.45rem; }
.choice-list label.check { align-items: baseline; }

/* Our servers at Hetzner, the server's page (Robin, 2026-11-11). The actions: one icon each, spaced, what
   it does on hover or focus, the hard ones (power cut) apart and in red; each confirms in a modal that
   names the server. The types: a folding block per family, the server's own open, all with the same columns. */
.fleet-power { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.fleet-power details.modal { margin: 0; }
.fleet-power .fleet-hard-first { margin-left: 0.6rem; padding-left: 1.5rem; border-left: 1px solid var(--border); }
details.modal > summary.fleet-icon { position: relative; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.fleet-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fleet-icon:hover { border-color: currentColor; background: var(--surface-2); }
.fleet-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details#command-poweron > summary.fleet-icon { color: var(--ok); }
details.fleet-hard > summary.fleet-icon { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.fleet-icon::after { content: attr(data-tip); position: absolute; top: calc(100% + 0.55rem); left: 0;
  width: max-content; max-width: 17rem; white-space: pre-line; text-align: left; padding: 0.5rem 0.7rem; border-radius: 8px;
  background: var(--text); color: var(--bg); font-size: 0.85rem; font-weight: 400; line-height: 1.4; opacity: 0; pointer-events: none;
  transition: opacity 0.12s; z-index: 5; }
.fleet-icon:hover::after, .fleet-icon:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fleet-icon::after { transition: none; } }
dialog.modal:has(> .fleet-confirm) { width: min(34rem, calc(100vw - 2rem)); }
.fleet-confirm-server { padding: 0.55rem 0.8rem; border-radius: 8px; background: var(--surface-2); font-weight: 600; }
.fleet-recap { font-weight: 600; }
.fleet-family { margin: 0.7rem 0; border: 1px solid var(--border); border-radius: var(--radius); }
.fleet-family > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.8rem; padding: 0.7rem 1rem; cursor: pointer; }
.fleet-family > summary::before { content: "▸"; color: var(--faint); }
.fleet-family[open] > summary::before { content: "▾"; }
.fleet-family > summary::-webkit-details-marker { display: none; }
.fleet-family > summary { list-style: none; }
.fleet-family[open] > summary { border-bottom: 1px solid var(--border); }
.fleet-family-name { font-weight: 600; }
.fleet-family-note { margin: 0.7rem 1rem 0.2rem; font-size: 0.92rem; color: var(--muted); }
.fleet-family-blocked { color: var(--danger); }
.fleet-types { table-layout: fixed; }
.fleet-types col.fleet-col-pick { width: 5rem; }
.fleet-types col.fleet-col-small { width: 5rem; }
.fleet-types col.fleet-col-num { width: 6rem; }
.fleet-types col.fleet-col-money { width: 9rem; }
.fleet-types th { white-space: normal; }
.fleet-types col.fleet-col-state { width: 10rem; }
.fleet-reason { display: block; margin-top: 0.2rem; }
.fleet-types tr:last-child td { border-bottom: 0; }
.fleet-types th.num, .fleet-types td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fleet-types tr.fleet-current td { background: var(--ok-bg); font-weight: 600; }
.fleet-mark { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--ok); color: var(--bg); font-size: 0.8rem; font-weight: 600; }
.fleet-types tr.fleet-impossible td { color: var(--muted); }
.fleet-types tr.fleet-up .fleet-delta { color: var(--warn); }
.fleet-types tr.fleet-down .fleet-delta { color: var(--ok); }
.fleet-disk { margin-top: 0.8rem; align-items: baseline; }
@media (max-width: 720px) { .fleet-family { overflow-x: auto; } .fleet-types { min-width: 44rem; } }
/* The changes of a line of history (customer, contact): one field a line, no bullets. */
ul.changes { list-style: none; margin: 0; padding: 0; }
ul.changes li { overflow-wrap: anywhere; }

/* An automatic mail (settings, mail texts): its preview in a frame, the brand's template reserved beside it. */
.mail-text-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin: 1rem 0; }
.mail-text-preview { margin: 0; }
.mail-text-field { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; }
.mail-text-field label { display: flex; gap: 0.5rem; align-items: center; }
.mail-text-preview figcaption { margin-bottom: 0.35rem; }
.mail-preview-frame { width: 100%; height: 34rem; border: 1px solid var(--border); border-radius: 4px; background: #f4f6f5; }
.pre-line { white-space: pre-line; }
@media (max-width: 900px) { .mail-text-grid { grid-template-columns: 1fr; } }

/* E-mail (2026-11-12): the mails' screens as a grid of links with one line each. */
.email-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; margin: 1rem 0 1.5rem; }
.email-hub-item { display: grid; gap: 0.3rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text); }
.email-hub-item:hover, .email-hub-item:focus-visible { border-color: var(--accent); }
.email-templates { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0; list-style: none; }
.filters .inline-field { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0; }

/* Grouped sends (2026-11-12): the two versions side by side in the modal, the lists of the criteria aligned. */
.campaign-versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.campaign-versions fieldset { display: grid; gap: 0.6rem; }
.campaign-lists select[multiple] { min-height: 8rem; }
.campaign-counts { display: grid; grid-template-columns: max-content max-content; gap: 0.3rem 1.2rem; }

/* Risk signals of an order to review (server spec §6.5): hints in a row, never a verdict. */
.risk-signals { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }

/* A secret shown once (the standby private key of the licences' signing keys): it stands out, and it wraps. */
.secret-once { background: var(--warn-bg); border: 2px solid var(--warn); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-top: 1rem; }
.secret-once h2 { margin-top: 0; color: var(--warn); }
.secret-once code.secret { word-break: break-all; }
/* The folded addresses of a registrar's sets (Robin, 2026-11-13). */
details.registrar-addresses { margin: 0.4rem 0 0.6rem; }
details.registrar-addresses > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }