/*
  The site's own CSS, after the design kit (public/assets): only what the kit lacks.
  - the language switcher in the nav (five languages; it opens with a tap, never on hover);
  - the app-frame recipe (references/sections-library.md, app-frame), the one window across the .wrap;
  - inside the visuals: the times of the transcript; the download cards and fingerprints.
*/

/* The language switcher: a 44px control like the buttons, a short list under it. */
.lang { position: relative; }
.lang__now {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--btn-h, 44px); padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-btn);
  font: 500 var(--t-small)/1 var(--font-text); color: var(--ink); background: var(--bg);
}
.lang__now::-webkit-details-marker { display: none; }
.lang__now::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang__list {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 20; margin: 0; padding: var(--s-1); list-style: none;
  min-width: 11rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
}
.lang__list a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.lang__list a:hover, .lang__list a:focus-visible { background: var(--surface); }
.lang__list a[aria-current] { font-weight: 500; color: var(--action); }

/* app-frame: the recipe as written. */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* Inside the transcript: the time of each line, in the mono face, quieter than the words. */
.app .ui-doc__text time { font-family: var(--font-mono); font-size: 12px; color: var(--u-muted, var(--muted)); margin-right: var(--s-2); }

/* The download page: one card a system, its real mark on a light tile, a button a file. */
.downloads { margin-top: var(--s-7); }
.download__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-4); }
.download__icon img { width: 28px; height: 28px; }
.download__file { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.download__file .btn { justify-self: start; }
.downloads__prints { margin-top: var(--s-7); }
.downloads__prints li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.downloads__prints .rows__name, .downloads__prints .rows__value, .downloads__prints code { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.downloads__prints code { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 639px) { .downloads__prints li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.downloads__note { margin-top: var(--s-5); }

/* close-word: the kit sizes the name for 8 letters; "Deus ex machina" has 15, so it is set to fill the .wrap at
   every width (the recipe: a hand-set size per breakpoint, never a transform). */
.closing__cta { min-width: 0; }
.close__word { font-size: clamp(40px, 10.9vw, 156px); line-height: 1.04; }
@media (max-width: 639px) { .close__word { font-size: 10.9vw; } }

/* app-frame: the open item fills its pane (the doc fragment is 440 wide on its own). */
.app > .app__pane--open > .ui-doc { width: 100%; }

/* Two screens on a phone only (.g2m: #come, #prezzi). The .grid's .screen groups are the two rows of the phone's
   .wrap; from 640px they vanish and the grid lays out their children, which take the full row like any grid child
   (with no weight, so the .span-* classes still win from 1024px). */
:where(.grid > .screen) > * { min-width: 0; grid-column: 1 / -1; }
@media (min-width: 640px) { .grid > .screen { display: contents; } }
@media (max-width: 639px) {
  .g2m > .wrap > .grid:has(> .screen) { display: contents; }
  .grid > .screen { display: flex; flex-direction: column; gap: var(--s-6); min-height: 0; }
  .grid > .screen > .section-head { margin-bottom: max(0px, var(--head-gap) - var(--s-6)); }
}

/* The three steps (#come): the heading is in the grid, so the row gap is part of its gap to the cards. */
@media (min-width: 640px) { #come .section-head { margin-bottom: max(0px, var(--head-gap) - var(--card-gap)); } }
/* 1024-1279: the steps keep one row, with lower panels (two-up and the third under them is taller than a screen). */
@media (min-width: 1024px) and (max-width: 1279px) { #come .panel { --p-h: 232px; } }
/* 640-1023: a step a row, its words beside its screenshot, so the three fit one screen. */
@media (min-width: 640px) and (max-width: 1023px) {
  #come .card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); }
  #come .card > :not(.panel) { grid-column: 1; }
  #come .card > .panel { grid-column: 2; grid-row: 1 / -1; margin: 0; --p-h: 200px; }
  #prezzi .card--plan { grid-column: auto / span 6; }
}
/* a phone: the number beside the title and lower panels, so the last two steps share the second screen. */
@media (max-width: 639px) {
  #come .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; }
  #come .card > :not(.step-num, h3) { grid-column: 1 / -1; }
  #come .panel { --p-h: 176px; }
}
/* A real screenshot of the app in each step's panel, cut by its right and bottom like a window. */
.stage .shot { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--card);
               box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent), 0 12px 32px -12px color-mix(in oklab, var(--ink) 30%, transparent); }
/* The prices in brief (#prezzi): the amount and its period on one line (.price is the prices page's card). */
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.plan-price .t-stat { font-size: var(--t-stat); }
/* The statement's three facts, under its line (#frase): air between the statement and the row. */
.frase__facts { margin-top: var(--s-8); }
/* The diagram's frame (#programmi): .frame--lit would make it 2:1, too low beside the text. */
#programmi .frame { --ratio: 80%; }
/* 1024 to 1279: a six-column frame is too narrow for the five lanes' labels, so text and diagram stack. */
@media (min-width: 1024px) and (max-width: 1279px) { #programmi .grid > * { grid-column: 1 / -1; } #programmi .frame { --ratio: 42%; margin-top: var(--s-6); } }

/* A phone: the four department cards (#reparti) in their two screens in every language, and the name,
   the main button and the menu on one line even with "Télécharger". */
@media (max-width: 639px) { #reparti .panel { --p-h: 216px; } #reparti-h .muted { display: none; } }
@media (max-width: 399px) { .nav__logo { font-size: 16px; } }

/* The line under the statement is read, so it takes the ink (7:1), not the moment's grey. */
#frase .mo-la__sub { color: var(--ink); }

/* A phone holds every loop still: the live dot of the hero's float card rests too. */
@media (max-width: 639px) { .ly-live::before { animation: none; } }

/* The account pages (templates/account/): short pages, not screens of the showcase. A section as tall as its
   content, the heading left and the form right, the footer only its links (closing--plain). */
main.page > section.page__section { height: auto; min-height: 0; padding-block: calc(var(--nav, 72px) + var(--s-8)) var(--s-8); }
main.page > section.page__section + section.page__section { padding-top: var(--s-8); border-top: 1px solid var(--line); }
footer.closing.closing--plain { height: auto; min-height: 0; padding-top: var(--s-8); }
.page__head h1 { font-size: clamp(36px, 5vw, 56px); }
.page__head .t-lead { overflow-wrap: anywhere; }
.page__body { display: grid; gap: var(--s-5); align-content: start; }
.page__aside { color: var(--muted); }
.page__aside a, .notice a { color: var(--ink); text-underline-offset: 4px; }
.notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.notice--error { background: color-mix(in oklab, var(--p-accent) 10%, var(--bg)); border-left: 3px solid var(--p-accent); }
.field__hint { font-weight: 400; color: var(--muted); }
.field__error { font-weight: 500; color: var(--p-accent); }
.field [aria-invalid="true"] { border-color: var(--p-accent); }
.field select { appearance: auto; }
.form > .notice, .form > h3 { grid-column: 1 / -1; }
.form .btn-row .btn { min-height: 44px; }
.account__blocks { display: grid; gap: var(--s-7); }
.account__block { display: grid; gap: var(--s-3); }
.account__block > p { color: var(--muted); }
.account__danger { color: var(--p-accent); }
@media (max-width: 1023px) { .page__body { margin-top: var(--s-6); } }
@media (max-width: 639px) { .form .btn-row .btn { width: 100%; } }

/* 1024 to 1279: the kit fits four words in the bar; with Accedi / Account there are five. The name keeps
   its width on one line, the words sit closer and a little smaller, and "Départements" in French still
   leaves air on both sides. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav--centre .nav__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); }
  .nav--centre .nav__logo { white-space: nowrap; }
  .nav--centre .nav__links { justify-self: center; }
  .nav--centre .nav__link { padding: 0 6px; font-size: 14px; }
  .nav--centre .nav__link::before { left: 6px; right: 6px; }
  .nav__actions { gap: var(--s-3); }
}

/* The catalogue of fixtures (templates/catalog/): the search form, the results as rows, a model's facts and channels. */
.catalog__rows { margin-top: var(--s-5); }
.catalog__rows .rows__name { color: var(--ink); text-underline-offset: 4px; }
.catalog__rows .rows__value { color: var(--muted); }
.catalog__rows li { position: relative; min-height: 44px; }
/* the whole row is the model's link: a tap target as tall as the row, on a tablet too */
.catalog__rows .rows__name::after { content: ""; position: absolute; inset: 0; }
.catalog__rows li:hover .rows__name { text-decoration: underline; }
.catalog__pages { margin-top: var(--s-6); align-items: center; }
.catalog__facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.catalog__facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.catalog__facts dt { color: var(--muted); }
.catalog__facts dd { margin: 0; font-weight: 500; text-align: right; }
.catalog__channels { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.catalog__channels th { text-align: left; font-size: var(--t-small); font-weight: 500; color: var(--muted); padding: 0 var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line-strong); }
.catalog__channels td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.catalog__channels td:first-child { width: 4.5rem; font-family: var(--font-mono); }
.catalog__channels td:last-child, .catalog__channels th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

/* The profile form (templates/catalog/_profile_form.html.twig): a mode is a group of rows, one per channel; the
   cells keep the kit's 44px controls. The invisible first button only answers Enter. */
.profile__enter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
.profile__mode { grid-column: 1 / -1; display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.profile__mode legend { padding: 0; margin-bottom: var(--s-2); }
.profile__rows { width: 100%; border-collapse: collapse; table-layout: fixed; }
.profile__rows th { text-align: left; font-size: var(--t-small); font-weight: 500; color: var(--muted); padding: 0 var(--s-2) var(--s-2) 0; }
.profile__rows th:first-child { width: 5.5rem; }
.profile__rows td { padding: 0 var(--s-2) var(--s-2) 0; }
.profile__rows :is(th, td):last-of-type { padding-right: 0; }
.profile__rows :is(input, select) {
  width: 100%; height: var(--btn-h); padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-text); min-width: 0;
}
.form textarea { width: 100%; min-height: 120px; padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font-text); }
.notice ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.diff :is(th, td):last-child { text-align: left; white-space: normal; }
.diff__changed td { background: color-mix(in oklab, var(--p-accent) 8%, var(--bg)); }
.diff__mark { font-size: var(--t-small); font-weight: 500; color: var(--p-accent); }
/* a phone: each row on two lines, the number and the function, then the name under them */
@media (max-width: 639px) {
  .profile__rows thead { display: none; }
  .profile__rows tr { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); }
  .profile__rows td { padding: 0; }
  .profile__rows td:nth-child(3) { grid-column: 1 / -1; }
}

/* The manual (templates/manual/chapter.html.twig): the index at the side from 1024px, a menu above the chapter
   under it (it opens with a tap); the chapter in a reading measure. */
.manual__aside { position: sticky; top: calc(var(--nav, 72px) + var(--s-6)); align-self: start; }
.manual__label { margin-bottom: var(--s-3); color: var(--muted); }
.manual__chapters { margin: 0; padding: 0; list-style: none; display: grid; }
.manual__chapters a { display: flex; align-items: center; min-height: 44px; padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; line-height: 1.3; }
.manual__chapters a:hover { background: var(--surface); }
.manual__chapters a[aria-current] { background: var(--surface); font-weight: 500; box-shadow: inset 2px 0 0 var(--p-accent); }
.manual__menu { display: none; grid-column: 1 / -1; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.manual__menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); font-weight: 500; }
.manual__menu > summary::-webkit-details-marker { display: none; }
.manual__menu > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.manual__menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.manual__menu > nav { padding: 0 var(--s-2) var(--s-2); }
@media (max-width: 1023px) {
  .manual__aside { display: none; }
  .manual__menu { display: block; }
  .manual .prose { grid-column: 1 / -1; margin-top: var(--s-6); }
}
.prose { max-width: 72ch; font-size: var(--t-body); line-height: 1.6; }
.prose > * + * { margin-top: var(--s-4); }
.prose h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; margin-bottom: var(--s-6); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-8); }
.prose h3 { font-size: var(--t-card, 20px); margin-top: var(--s-6); }
.prose :is(ul, ol) { padding-left: 1.4em; }
.prose li + li { margin-top: var(--s-2); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--p-accent); text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: .9em; padding: 1px 4px; border-radius: 4px; background: var(--surface); }
.prose img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.prose blockquote { margin-inline: 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--p-accent); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); display: block; overflow-x: auto; }
.prose :is(th, td) { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); }
.manual__pages { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); justify-content: space-between; }
.manual__pages .btn { height: auto; min-height: 44px; white-space: normal; text-align: left; }

/* The prices (templates/shop/prices.html.twig): the switch Lifetime / Annual as two 44px links, the tiers in
   columns from the free one (a row on a desktop, two on a tablet, one on a phone), the add-ons the same way. */
.segmented { justify-self: start; display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--bg); }
.segmented a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font-weight: 500; }
.segmented a[aria-current] { background: var(--ink); color: var(--bg); }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--card-gap); margin-top: var(--s-5); }
.price { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.price--mine { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.price h3 { font-size: var(--t-card, 20px); }
.price__amount { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.price__amount span { font-size: var(--t-small); font-weight: 400; color: var(--muted); white-space: nowrap; }
.price__amount--none { font-size: var(--t-body); color: var(--muted); }
.price > .btn, .price__mine { margin-top: auto; align-self: start; }
.price__mine { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--p-accent); }
.prices__soon { margin-top: var(--s-4); }
.catalog__total { font-size: var(--t-lead); }
.catalog__total dd { font-weight: 600; }

/* The two boxes before paying (templates/shop/buy.html.twig) and the switches of the cookie banner: a box at the
   left of its text, the whole line a 44px target. */
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-2) 0; cursor: pointer; line-height: 1.45; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--p-accent); cursor: pointer; }
.check input:disabled { cursor: default; }
.check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--p-accent); text-underline-offset: 3px; }
.check--switch input { appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--line-strong); transition: background .15s; }
.check--switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); transition: transform .15s; }
.check--switch input:checked { background: var(--p-accent); }
.check--switch input:checked::after { transform: translateX(18px); }
.check--switch input:disabled { opacity: .55; }
.check--switch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The cookie banner (templates/_cookies.html.twig): a band at the bottom, above everything; customising, a panel as
   tall as it needs up to most of the screen, scrolling inside. */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 85vh; overflow-y: auto; padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line-strong); box-shadow: 0 -12px 32px rgb(28 25 23 / .12); }
.cookies[hidden], .cookies [hidden] { display: none; }
.cookies__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.cookies__text { flex: 1 1 420px; display: grid; gap: var(--s-2); }
.cookies__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--p-accent); text-underline-offset: 3px; }
.cookies__title { font-size: var(--t-card, 20px); font-weight: 500; }
.cookies__actions { flex: 0 1 auto; }
.cookies__custom { display: grid; gap: var(--s-3); max-width: 760px; }
.cookies__category { margin: 0; padding: var(--s-3) 0; border: 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-2); }
.cookies__badge { display: inline-block; margin-left: var(--s-2); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: var(--t-small); font-weight: 500; }
.cookies__badge--partial { border-color: var(--p-accent); color: var(--p-accent); }
.cookies__description { display: block; color: var(--muted); font-size: var(--t-small); }
.cookies__entries > summary { display: flex; align-items: center; min-height: 44px; padding-left: calc(44px + var(--s-3)); cursor: pointer; font-weight: 500; }
.cookies__entries ul { margin: 0; padding: 0 0 0 calc(44px + var(--s-3)); list-style: none; }
.cookies__entries code { font-family: var(--font-mono); font-size: .9em; }
@media (max-width: 640px) {
  .cookies__actions { width: 100%; }
  .cookies__actions .btn { flex: none; width: 100%; min-height: 44px; }
}

/* A content that waits for consent (public/js/cookies.js): its place, with a line and a button. */
.consent-gate { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }

/* The panel of the legal pages: the table of versions, and the text to write. */
.admin-legal th[scope="row"] { font-weight: 500; color: var(--ink); white-space: nowrap; }
.admin-legal td:first-child { width: auto; font-family: inherit; }
.admin-legal td, .admin-legal td:last-child { text-align: left; white-space: nowrap; }
.admin-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.form textarea.admin-legal__body { min-height: 60vh; font-family: var(--font-mono); font-size: 14px; line-height: 1.55; }

/* The panel (templates/admin/): its sections in a row of 44px links, the open one marked; each licence or payment
   a line that opens its forms. */
.admin-nav, .admin-filter { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.admin-nav a, .admin-filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: var(--t-small); font-weight: 500; }
.admin-nav a:hover, .admin-filter a:hover { background: var(--surface); }
.admin-nav a[aria-current], .admin-filter a[aria-current] { background: var(--ink); color: var(--bg); }
.admin-item { border-top: 1px solid var(--line); }
.admin-item > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); align-items: center; min-height: 48px; padding: var(--s-2) 0; cursor: pointer; list-style: none; }
.admin-item > summary::-webkit-details-marker { display: none; }
.admin-item[open] > summary { font-weight: 500; }
.admin-item > .form, .admin-item > p { margin-bottom: var(--s-4); }
/* A customer's page has an e-mail for title: smaller, and broken where it must, never off the column. */
.admin-heading { display: block; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; overflow-wrap: anywhere; }

/* The demos and the testimonials (templates/showcase/): cards with their first image, the video as wide as the
   column and never wider, the testimonials as quotes with who wrote them; in the panel the images to keep. */
.demos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--card-gap); }
.demo-card a { display: flex; flex-direction: column; gap: var(--s-3); min-height: 44px; color: var(--ink); text-decoration: none; }
.demo-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); transition: transform .3s; }
.demo-card a:hover img { transform: scale(1.02); }
.demo-card__title { font-weight: 500; font-size: var(--t-card, 20px); }
.demo__video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); background: #000; margin-bottom: var(--s-6); }
.demo__gate { display: grid; place-items: center; padding: var(--s-5); background: var(--surface); color: var(--ink); }
.demo__images { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--card-gap); }
.demo__images img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.testimonials { display: grid; gap: var(--s-6); }
.testimonial { margin: 0; display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.testimonial blockquote { margin: 0; font-size: var(--t-lead, 19px); line-height: 1.5; }
.testimonial__who { display: flex; align-items: center; gap: var(--s-3); }
.testimonial__who > span { display: grid; }
.testimonial__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--card-gap); margin-top: var(--s-6); }
.admin-images { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.admin-images img, .admin-photo { display: block; border-radius: var(--r-sm); border: 1px solid var(--line); }
/* The notes of the download page: as long as they are written, so the section grows instead of being one screen. */
main > section#novita { height: auto; min-height: 0; }
.release-notes h2 { margin-bottom: var(--s-5); }
.releases-old > details { border-top: 1px solid var(--line); }
.releases-old summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: 500; }