/* =====================================================================================
   PieceDesk « Ardoise » : the software components (DIRECTION.md section 5), on top of tokens.css.
   Import order: ../../tokens.css, ../../shared/slate.css, ../shared/app.css, ../shared/shell.css.
   Every colour is a role (--app-*, --paper-*); no raw value lives here (S11).
   Light by default; [data-theme="dark"] on the .pd-app element switches every role at once.
   State classes .is-hover, .is-focus, .is-active force a state for the kit only; real pages use
   the pseudo-classes. Hover rules live under @media (hover: hover) only (H16).
   ===================================================================================== */

/* ---------- 00. The narrow no-break space (U+202F) ----------
   fr() puts U+202F inside « » and before ? ! ; and in « 8.1 % ». The Instrument Sans and Fragment Mono cuts in brand/fonts
   have no glyph for it (checked with fontTools, 2026-10-25), and Chromium then draws half a word space (HarfBuzz's
   fallback), about 1.5 px at 15 px, so « 8.1 % » reads « 8.1% ». These faces join each family with the same
   descriptors and only U+202F: the character is taken from the system's Arial (0.2 em, the width of Instrument Sans's
   own word space), or the next local face that has it. Declared here and in site.css, so every page has them. */
@font-face { font-family: "PD Text"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 400; font-style: normal; unicode-range: U+202F; }
@font-face { font-family: "PD Text"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 500; font-style: normal; unicode-range: U+202F; }
@font-face { font-family: "PD Text"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 600 700; font-style: normal; unicode-range: U+202F; }
@font-face { font-family: "PD Display"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 600; font-style: normal; unicode-range: U+202F; }
@font-face { font-family: "PD Title"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 600; font-style: normal; unicode-range: U+202F; }
@font-face { font-family: "PD Mono"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 400; font-style: normal; unicode-range: U+202F; }

/* ---------- 0. Base inside the software ---------- */
.pd-app {
  --pd-hover-here: var(--app-hover-canvas);   /* quiet controls on the canvas */
  --pd-pad: var(--pd-s-4);                     /* content padding: 32, phone 16 */
  font: 400 var(--pd-app-body-size)/var(--pd-app-body-lh) var(--pd-font-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pd-app, .pd-app *, .pd-app *::before, .pd-app *::after { box-sizing: border-box; }
.pd-app :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.pd-app :where(ul, ol) { padding: 0; list-style: none; }
.pd-app :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.pd-app :where(a) { color: inherit; text-decoration: none; }
.pd-app :where(table) { border-collapse: separate; border-spacing: 0; }
.pd-app :where(input, textarea) { font: inherit; color: inherit; margin: 0; }
.pd-app :where(svg) { flex: none; }
.pd-app [hidden] { display: none !important; }
.pd-app :focus { outline: none; }
.pd-app :focus-visible, .pd-app .is-focus {
  outline: 2px solid var(--app-focus); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--app-focus-inner);
}
.pd-card, .pd-pop, .pd-dialog, .pd-sheet, .pd-cmd, .pd-top, .pd-table-wrap { --pd-hover-here: var(--app-hover); }
.pd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pd-notrans, .pd-notrans * { transition: none !important; }

/* ---------- 1. Type (one title size and one body size per screen, 4.3) ---------- */
.pd-h1 { font: 600 var(--pd-app-h1-size)/var(--pd-app-h1-lh) var(--pd-font-title); letter-spacing: var(--pd-app-h1-track); color: var(--app-text); text-wrap: balance; }
.pd-sub { font-size: 15px; line-height: 22px; color: var(--app-text-2); }
.pd-title { font: 600 var(--pd-app-title-size)/var(--pd-app-title-lh) var(--pd-font-text); color: var(--app-text); }
.pd-dtitle { font: 600 20px/26px var(--pd-font-title); letter-spacing: -0.01em; color: var(--app-text); }
.pd-strong { font-weight: 600; }
.pd-label { display: block; font: 500 var(--pd-app-label-size)/var(--pd-app-label-lh) var(--pd-font-text); color: var(--app-text); }
.pd-meta { font-size: var(--pd-app-meta-size); line-height: var(--pd-app-meta-lh); color: var(--app-text-3); }
.pd-meta2 { font-size: var(--pd-app-meta-size); line-height: var(--pd-app-meta-lh); color: var(--app-text-2); }
.pd-code { font-family: var(--pd-font-mono); font-size: var(--pd-app-mono-size); line-height: var(--pd-app-mono-lh); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.pd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-amt { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: 600; }
.pd-crit { color: var(--app-crit-ink); }
.pd-money { font: 600 var(--pd-app-money-size)/var(--pd-app-money-lh) var(--pd-font-title); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--app-text); }
.pd-money .pd-cur { font: 400 16px/1 var(--pd-font-text); letter-spacing: 0; color: var(--app-text-2); margin-right: 6px; }
.pd-a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; }
@media (hover: hover) { .pd-a:hover { text-decoration-thickness: 2px; } }
.pd-kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--app-border); border-radius: var(--pd-r-1); font: 400 12px/18px var(--pd-font-mono); color: var(--app-text-2); white-space: nowrap; }
.pd-ic { display: block; flex: none; }

/* ---------- 2. Buttons (5.1) ---------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd-s-1);
  height: var(--pd-control-h); min-width: var(--pd-control-h); padding: 0 var(--pd-s-2);
  border: 1px solid transparent; border-radius: var(--pd-r-2);
  font: 600 15px/20px var(--pd-font-text); white-space: nowrap; text-decoration: none;
  color: var(--app-text); background: transparent; cursor: pointer; user-select: none;
  transition: background-color var(--pd-dur-2) var(--pd-ease-out), border-color var(--pd-dur-2) var(--pd-ease-out), color var(--pd-dur-2) var(--pd-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.pd-btn > .pd-ic { width: 20px; height: 20px; }
.pd-btn--primary { background: var(--app-solid); color: var(--app-on-solid); }
.pd-btn--secondary { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); }
.pd-btn--quiet { background: transparent; color: var(--app-text); }
.pd-btn--danger { background: var(--app-danger); color: var(--app-on-danger); }
.pd-btn--crit { background: transparent; color: var(--app-crit-ink); }                 /* « Supprimer » outside a dialog, with Trash2 */
.pd-btn--accent { background: var(--app-accent); color: var(--app-on-accent); }        /* public pages only (3.2) */
.pd-btn--icon { width: var(--pd-control-h); padding: 0; background: transparent; color: var(--app-text-2); }
.pd-btn--block { display: flex; width: 100%; }
.pd-btn--compact { height: var(--pd-control-h-compact); min-width: var(--pd-control-h-compact); padding: 0 var(--pd-s-15); }
@media (hover: hover) {
  .pd-btn--primary:hover { background: var(--app-solid-hover); }
  .pd-btn--secondary:hover { background: var(--app-hover); }
  .pd-btn--quiet:hover, .pd-btn--icon:hover, .pd-btn--crit:hover { background: var(--pd-hover-here); color: var(--app-text); }
  .pd-btn--crit:hover { color: var(--app-crit-ink); }
  .pd-btn--danger:hover { background: var(--app-danger-hover); }
  .pd-btn--accent:hover { background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); }
}
.pd-btn--primary.is-hover { background: var(--app-solid-hover); }
.pd-btn--secondary.is-hover { background: var(--app-hover); }
.pd-btn--quiet.is-hover, .pd-btn--icon.is-hover { background: var(--pd-hover-here); color: var(--app-text); }
.pd-btn--danger.is-hover { background: var(--app-danger-hover); }
/* pressed: the fill steps one tone, no scale, no lift (H4) */
.pd-btn--primary:active, .pd-btn--primary.is-active { background: var(--app-solid-hover); }
.pd-btn--secondary:active, .pd-btn--secondary.is-active,
.pd-btn--quiet:active, .pd-btn--quiet.is-active, .pd-btn--icon:active, .pd-btn--icon.is-active, .pd-btn--crit:active { background: var(--app-selected); color: var(--app-text); }
.pd-btn--crit:active { color: var(--app-crit-ink); }
.pd-btn--danger:active, .pd-btn--danger.is-active { background: var(--app-danger-hover); }
.pd-btn[aria-pressed="true"], .pd-btn[aria-expanded="true"].pd-btn--icon { background: var(--app-selected); color: var(--app-text); }
/* disabled: keeps its place (H14). Sunken fill and meta text: 7.22:1 light, 7.19:1 dark (see README) */
.pd-btn:disabled, .pd-btn[aria-disabled="true"] { cursor: not-allowed; }
.pd-btn--primary:disabled, .pd-btn--secondary:disabled, .pd-btn--danger:disabled, .pd-btn--accent:disabled,
.pd-btn--primary[aria-disabled="true"], .pd-btn--secondary[aria-disabled="true"], .pd-btn--danger[aria-disabled="true"], .pd-btn--accent[aria-disabled="true"] {
  background: var(--app-surface-2); border-color: transparent; color: var(--app-text-3);
}
.pd-btn--quiet:disabled, .pd-btn--icon:disabled, .pd-btn--crit:disabled, .pd-btn--quiet[aria-disabled="true"] { background: transparent; color: var(--app-text-3); }
/* loading over 300 ms: the label becomes the progress word, width kept, disabled. No spinner (S14) */
.pd-btn.is-loading { cursor: progress; }
.pd-btn.is-loading.pd-btn--primary { background: var(--app-solid-hover); color: var(--app-on-solid); }
.pd-btn.is-loading.pd-btn--secondary { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); }
.pd-btn .pd-btn__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); font: 600 11px/14px var(--pd-font-text); }

/* the floating button (lists on phones) and the phone action bar */
.pd-fab {
  position: fixed; right: var(--pd-s-2); bottom: calc(var(--pd-tabbar-total, 0px) + var(--pd-actionbar-h, 0px) + var(--pd-s-2)); z-index: var(--pd-z-sticky);
  width: var(--pd-fab); height: var(--pd-fab); border-radius: var(--pd-r-2); display: grid; place-items: center;
  background: var(--app-solid); color: var(--app-on-solid); box-shadow: var(--app-shadow-pop);
  transition: background-color var(--pd-dur-2) var(--pd-ease-out);
}
.pd-fab .pd-ic { width: 24px; height: 24px; }
.pd-fab:active { background: var(--app-solid-hover); }
@media (hover: hover) { .pd-fab:hover { background: var(--app-solid-hover); } }
@media (min-width: 768px) { .pd-fab { display: none; } }
.pd-actionbar {
  position: fixed; left: 0; right: 0; bottom: var(--pd-tabbar-total, 0px); z-index: var(--pd-z-sticky);
  display: flex; gap: var(--pd-s-1); padding: var(--pd-s-15) var(--pd-s-2);
  background: var(--app-surface); border-top: 1px solid var(--app-line);
}
.pd-actionbar > .pd-btn { flex: 1; }
@media (max-width: 767px) { body.pd-app:has(.pd-actionbar) { --pd-actionbar-h: 69px; } }
@media (min-width: 768px) { .pd-actionbar { position: static; padding: var(--pd-s-2) 0 0; background: none; border: 0; justify-content: flex-end; } .pd-actionbar > .pd-btn { flex: none; } }

/* ---------- 3. Fields (5.2) ---------- */
.pd-field { display: flex; flex-direction: column; gap: var(--pd-s-1); min-width: 0; }
.pd-help { font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.pd-error { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; color: var(--app-crit-ink); }
.pd-error .pd-ic { width: 16px; height: 16px; margin-top: 1px; color: var(--app-crit); }
.pd-success { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--app-text-2); }
.pd-input, .pd-select, .pd-textarea {
  display: block; width: 100%; min-width: 0; height: var(--pd-control-h); padding: 0 var(--pd-s-15);
  border: 1px solid var(--app-border); border-radius: var(--pd-r-2);
  background: var(--app-surface); color: var(--app-text);
  font: 400 var(--pd-app-input-size)/var(--pd-app-input-lh) var(--pd-font-text);
  transition: border-color var(--pd-dur-2) var(--pd-ease-out);
  -webkit-appearance: none; appearance: none;
}
.pd-input::placeholder, .pd-textarea::placeholder { color: var(--app-text-3); opacity: 1; }
.pd-textarea { height: auto; min-height: calc(3 * 24px + 2 * 10px + 2px); max-height: calc(8 * 24px + 2 * 10px + 2px); padding: 10px var(--pd-s-15); resize: none; overflow-y: auto; field-sizing: content; }
@media (hover: hover) { .pd-input:hover:not(:disabled):not(:focus), .pd-select:hover:not(:disabled), .pd-textarea:hover:not(:disabled):not(:focus) { border-color: var(--app-text-2); } }
.pd-input.is-hover, .pd-select.is-hover { border-color: var(--app-text-2); }
.pd-input:focus, .pd-textarea:focus, .pd-select:focus-visible, .pd-select[aria-expanded="true"], .pd-input.is-focus, .pd-select.is-focus {
  border-color: var(--app-text); outline: 2px solid var(--app-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--app-focus-inner);
}
.pd-input:disabled, .pd-textarea:disabled, .pd-select:disabled, .pd-select[aria-disabled="true"] { background: var(--app-surface-2); color: var(--app-text-3); cursor: not-allowed; }
.pd-input[readonly] { background: var(--app-surface-2); }
.pd-field.is-error .pd-input, .pd-field.is-error .pd-select, .pd-field.is-error .pd-textarea, .pd-input[aria-invalid="true"] { border: 2px solid var(--app-crit); padding-left: 11px; padding-right: 11px; }
.pd-field.is-error .pd-textarea { padding-top: 9px; padding-bottom: 9px; }
/* a field and its button share the line and the height (H13); under 640 the button goes under */
.pd-inline { display: flex; gap: var(--pd-s-1); align-items: flex-start; }
.pd-inline > .pd-input, .pd-inline > .pd-select, .pd-inline > .pd-money, .pd-inline > .pd-affix { flex: 1; }
.pd-inline > .pd-btn { flex: none; }
@media (max-width: 639px) { .pd-inline { flex-direction: column; align-items: stretch; } .pd-inline > * { flex: none !important; } .pd-inline > .pd-btn { width: 100%; } }

/* field with an icon button inside (date, time, password): the button is a 44 square at the right */
.pd-affix { position: relative; display: block; min-width: 0; }
.pd-affix > .pd-input { padding-right: 48px; }
.pd-affix > .pd-btn--icon { position: absolute; top: 0; right: 0; height: 44px; border: 1px solid transparent; background-clip: padding-box; border-radius: 0 var(--pd-r-2) var(--pd-r-2) 0; color: var(--app-text-2); }
.pd-affix > .pd-btn--icon[aria-pressed="true"] { background-color: transparent; color: var(--app-text); }
.pd-affix > .pd-btn--icon .pd-ic { width: 20px; height: 20px; }

/* money: « CHF » inside, digits right-aligned and tabular, chf() on blur, true minus */
.pd-money-in { position: relative; display: block; min-width: 0; }
.pd-money-in > .pd-cur { position: absolute; left: 13px; top: 0; height: 44px; display: flex; align-items: center; font-size: 16px; color: var(--app-text-2); pointer-events: none; }
.pd-money-in > .pd-input { padding-left: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.pd-money-in > .pd-input[readonly] { color: var(--app-text); font-weight: 600; }

/* custom select (ListPicker), never <select> (S2) */
.pd-select { display: flex; align-items: center; gap: var(--pd-s-1); text-align: left; cursor: pointer; padding-right: 10px; }
.pd-select > .pd-select__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-select > .pd-select__value.is-placeholder { color: var(--app-text-3); }
.pd-select > .pd-ic { width: 20px; height: 20px; color: var(--app-text-2); transition: transform var(--pd-dur-2) var(--pd-ease-out); }
.pd-select[aria-expanded="true"] > .pd-ic { transform: rotate(180deg); }
.pd-select .pd-select__pre { color: var(--app-text-2); }

/* checkbox 20 square radius 2, radio 20 circle, each in a 44 hit area */
.pd-check { position: relative; display: inline-flex; align-items: center; gap: var(--pd-s-1); min-height: 44px; cursor: pointer; font-size: 15px; line-height: 22px; }
.pd-check__input { position: absolute; left: -12px; top: 50%; width: 44px; height: 44px; margin: -22px 0 0; opacity: 0; cursor: pointer; z-index: 1; }
.pd-check__box { position: relative; flex: none; width: 20px; height: 20px; border: 1px solid var(--app-border); border-radius: var(--pd-r-1); background: var(--app-surface); color: var(--app-on-solid); display: grid; place-items: center; transition: background-color var(--pd-dur-1) linear, border-color var(--pd-dur-1) linear; }
.pd-check__box .pd-ic { width: 16px; height: 16px; opacity: 0; stroke-width: 2.25; }
.pd-check--radio .pd-check__box { border-radius: var(--pd-r-round); }
.pd-check--radio .pd-check__box::after { content: ""; width: 10px; height: 10px; border-radius: var(--pd-r-round); background: var(--app-on-solid); opacity: 0; }
.pd-check__input:checked + .pd-check__box { background: var(--app-solid); border-color: var(--app-solid); }
.pd-check__input:checked + .pd-check__box .pd-ic, .pd-check--radio .pd-check__input:checked + .pd-check__box::after { opacity: 1; }
.pd-check__input:focus-visible + .pd-check__box { outline: 2px solid var(--app-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--app-focus-inner); }
@media (hover: hover) { .pd-check:hover .pd-check__input:not(:checked):not(:disabled) + .pd-check__box { border-color: var(--app-text); } }
.pd-check__input:disabled + .pd-check__box { background: var(--app-surface-2); border-color: var(--app-border); }
.pd-check__input:disabled ~ .pd-check__label { color: var(--app-text-3); }
.pd-check:has(.pd-check__input:disabled) { cursor: not-allowed; }

/* switch: a 44 × 24 rectangle radius 2, a 20 square knob, never a stadium; in a 44 high button */
.pd-switch { position: relative; display: inline-flex; align-items: center; flex: none; width: 44px; height: 44px; cursor: pointer; border-radius: var(--pd-r-1); }
.pd-switch__track { position: relative; width: 44px; height: 24px; border: 1px solid var(--app-border); border-radius: var(--pd-r-1); background: var(--app-surface); transition: background-color var(--pd-dur-2) var(--pd-ease-out), border-color var(--pd-dur-2) var(--pd-ease-out); }
.pd-switch__track::after { content: ""; position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 1px; background: var(--app-text-2); transition: transform var(--pd-dur-2) var(--pd-ease-out), background-color var(--pd-dur-2) var(--pd-ease-out); }
.pd-switch[aria-checked="true"] .pd-switch__track { background: var(--app-solid); border-color: var(--app-solid); }
.pd-switch[aria-checked="true"] .pd-switch__track::after { transform: translateX(20px); background: var(--app-on-solid); }
@media (hover: hover) { .pd-switch:hover:not(:disabled) .pd-switch__track { border-color: var(--app-text); } .pd-switch[aria-checked="true"]:hover:not(:disabled) .pd-switch__track { background: var(--app-solid-hover); border-color: var(--app-solid-hover); } }
.pd-switch:disabled { cursor: not-allowed; }
.pd-switch:disabled .pd-switch__track { background: var(--app-surface-2); border-color: var(--app-border); }
.pd-switch:disabled .pd-switch__track::after { background: var(--app-text-3); }
.pd-switch-row { display: inline-flex; align-items: center; gap: var(--pd-s-15); min-height: 44px; }
.pd-switch-row > span { font-size: 15px; line-height: 22px; }

/* segmented control: 44 buttons in one 1 px outline, radius 4; selected = --app-selected and 600 */
/* the 1 px outline is drawn over the segments (outline, offset −1) so each segment is a full 44 target */
.pd-seg { display: inline-flex; align-items: stretch; height: var(--pd-control-h); outline: 1px solid var(--app-border); outline-offset: -1px; border-radius: var(--pd-r-2); background: var(--app-surface); max-width: 100%; }
.pd-seg > button, .pd-seg > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; padding: 0 var(--pd-s-2);
  font: 500 15px/20px var(--pd-font-text); color: var(--app-text-2); white-space: nowrap; border-radius: 0;
  transition: background-color var(--pd-dur-2) var(--pd-ease-out), color var(--pd-dur-2) var(--pd-ease-out);
}
.pd-seg > :first-child { border-radius: 3px 0 0 3px; }
.pd-seg > :last-child { border-radius: 0 3px 3px 0; }
.pd-seg > [aria-pressed="true"], .pd-seg > [aria-selected="true"], .pd-seg > [aria-current="page"] { background: var(--app-selected); color: var(--app-text); font-weight: 600; }
@media (hover: hover) { .pd-seg > :not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-current="page"]):hover { background: var(--app-hover); color: var(--app-text); } }
.pd-seg > button:disabled { color: var(--app-text-3); cursor: not-allowed; }
.pd-seg > :focus-visible, .pd-tabs > :focus-visible { position: relative; z-index: 1; }
.pd-seg--block { display: flex; width: 100%; }
.pd-seg--block > * { flex: 1; padding: 0 var(--pd-s-1); }
.pd-seg .pd-seg__n { font-weight: 400; color: var(--app-text-2); }

/* page tabs: quiet 44 buttons, current = --app-selected and 600; no underline bar (5.6) */
.pd-tabs { display: flex; flex-wrap: wrap; gap: var(--pd-s-05); }
.pd-tabs > [role="tab"], .pd-tabs > a {
  display: inline-flex; align-items: center; gap: 6px; height: var(--pd-control-h); padding: 0 var(--pd-s-2); border-radius: var(--pd-r-2);
  font: 500 15px/20px var(--pd-font-text); color: var(--app-text-2); white-space: nowrap;
  transition: background-color var(--pd-dur-2) var(--pd-ease-out), color var(--pd-dur-2) var(--pd-ease-out);
}
.pd-tabs > [aria-selected="true"], .pd-tabs > [aria-current="page"] { background: var(--app-selected); color: var(--app-text); font-weight: 600; }
@media (hover: hover) { .pd-tabs > :not([aria-selected="true"]):not([aria-current="page"]):hover { background: var(--pd-hover-here); color: var(--app-text); } }
.pd-tabs-select { display: none; }
@media (max-width: 639px) { .pd-tabs.has-select { display: none; } .pd-tabs-select { display: flex; } }

/* ---------- 4. Cards, panels, banners (5.3) ---------- */
.pd-card { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--pd-r-2); padding: var(--pd-s-25); min-width: 0; }
.pd-card__head { display: flex; align-items: center; gap: var(--pd-s-1); min-height: 44px; margin: -12px 0 var(--pd-s-05); }
.pd-card__head > .pd-title { min-width: 0; }
.pd-card__head > .pd-meta, .pd-card__head > .pd-meta2 { min-width: 0; }
.pd-card__end { margin-left: auto; display: flex; align-items: center; gap: var(--pd-s-05); }
.pd-count { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); font: 600 11px/14px var(--pd-font-text); font-variant-numeric: tabular-nums; }
.pd-more { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--pd-s-1); margin-right: -8px; border-radius: var(--pd-r-2); font: 600 14px/20px var(--pd-font-text); color: var(--app-text); white-space: nowrap; transition: background-color var(--pd-dur-2) var(--pd-ease-out); }
.pd-more .pd-ic { width: 16px; height: 16px; transition: transform var(--pd-dur-3) var(--pd-ease-out); }
@media (hover: hover) { .pd-more:hover { background: var(--pd-hover-here); } .pd-more:hover .pd-ic { transform: translateX(3px); } }
.pd-rows > * + * { border-top: 1px solid var(--app-line); }
.pd-row { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 48px; padding: var(--pd-s-15) 0; min-width: 0; }
.pd-row__main { flex: 1; min-width: 0; }
.pd-row__end { margin-left: auto; text-align: right; flex: none; }
.pd-card__foot { display: flex; align-items: center; gap: var(--pd-s-15); flex-wrap: wrap; border-top: 1px solid var(--app-line); padding-top: var(--pd-s-15); margin-top: var(--pd-s-05); margin-bottom: -8px; }
.pd-card__foot > .pd-btn:last-child { margin-left: auto; }
@media (max-width: 767px) { .pd-card { padding: var(--pd-s-2); } .pd-card__head { margin-top: -10px; } }

/* settings panels have no card: one row per subject (5.3) */
.pd-setrows { border-top: 1px solid var(--app-line); }
.pd-setrow { display: flex; align-items: center; gap: var(--pd-s-2); min-height: 64px; padding: var(--pd-s-1) 0; border-bottom: 1px solid var(--app-line); }
.pd-setrow > .pd-setrow__label { flex: 1; min-width: 0; font-weight: 600; }
.pd-setrow > .pd-setrow__value { color: var(--app-text-2); text-align: right; }
@media (max-width: 639px) { .pd-setrow { flex-wrap: wrap; row-gap: var(--pd-s-05); } .pd-setrow > .pd-setrow__value { text-align: left; } }

/* banner inside the content: sunken fill, glyph or icon 20, one action on the same line (5.3) */
.pd-banner { display: flex; align-items: center; gap: var(--pd-s-15); flex-wrap: wrap; padding: var(--pd-s-15) var(--pd-s-2); border-radius: var(--pd-r-2); background: var(--app-surface-2); color: var(--app-text); min-height: 48px; }
.pd-banner > .pd-ic { width: 20px; height: 20px; color: var(--app-text-2); }
.pd-banner__text { flex: 1 1 260px; min-width: 0; font-size: 15px; line-height: 22px; }
.pd-banner__text b { font-weight: 600; }
.pd-banner > .pd-btn { flex: none; margin: -6px 0; }
.pd-banner > .pd-tag { flex: none; }
@media (max-width: 639px) { .pd-banner { align-items: flex-start; } .pd-banner > .pd-ic { margin-top: 1px; } .pd-banner > .pd-btn { margin: 0 0 0 32px; } }
/* the prototype banner (preview tenants, S30): full width at the very top of the app */
.pd-proto { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 40px; padding: var(--pd-s-1) var(--pd-s-2); background: var(--app-proto-bg); color: var(--app-proto-text); border-bottom: 1px solid var(--app-proto-edge); font-size: 14px; line-height: 20px; }
.pd-proto__mark { display: inline-flex; color: var(--app-warn); }
.pd-proto b { font-weight: 600; }
.pd-proto__link { margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }

/* tags: names that are not statuses (5.5); never a stadium, never a filled status colour */
.pd-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--pd-s-1); border: 1px solid var(--app-border); border-radius: var(--pd-r-1); font: 600 13px/16px var(--pd-font-text); color: var(--app-text); white-space: nowrap; background: transparent; }
.pd-tag .pd-ic { width: 14px; height: 14px; }
/* status: a 10 px glyph in a 16 box, its word in the text colour, 6 px apart (glyphs.js) */
.pd-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--app-text); }
.pd-statuses { display: flex; flex-wrap: wrap; gap: var(--pd-s-1) var(--pd-s-25); }

/* empty state: the component's icon (24, meta colour) and one fact line, at most one action (5.12) */
.pd-empty { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pd-s-1) var(--pd-s-15); min-height: 48px; padding: var(--pd-s-05) 0; color: var(--app-text-2); }
.pd-empty > .pd-ic { width: 24px; height: 24px; color: var(--app-text-3); }
.pd-empty > span { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 22px; }
.pd-empty > .pd-btn { flex: none; }

/* skeleton: appears after 150 ms, the exact shape, no shimmer, no pulse (5.11) */
.pd-skel { display: block; background: var(--app-surface-2); border-radius: var(--pd-r-1); height: 12px; animation: pd-skel-in var(--pd-dur-1) linear 150ms both; }
.pd-skel--60 { width: 60%; } .pd-skel--80 { width: 80%; } .pd-skel--40 { width: 40%; }
.pd-skel--disc { width: 32px; height: 32px; border-radius: var(--pd-r-round); flex: none; }
.pd-skel--amount { width: 64px; margin-left: auto; flex: none; }
.pd-skel-row { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 48px; }
.pd-skel-row > .pd-skel-lines { flex: 1; display: grid; gap: 8px; }
@keyframes pd-skel-in { from { opacity: 0; } to { opacity: 1; } }
.pd-app[data-theme="dark"] .pd-skel { background: var(--app-selected); }   /* surface-2 is 1.1:1 on a dark card: the shape would vanish */
.pd-fade-in { animation: pd-skel-in var(--pd-dur-1) linear both; }

/* avatars and the tenant square (5.14) */
.pd-av { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--pd-r-round); background: var(--app-surface-2); color: var(--app-text-2); font: 600 13px/1 var(--pd-font-text); letter-spacing: 0.01em; }
.pd-av--36 { width: 36px; height: 36px; font-size: 14px; }
.pd-av--40 { width: 40px; height: 40px; font-size: 15px; }
.pd-sq { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pd-r-4); background: var(--app-accent); color: var(--app-on-accent); font: 600 15px/1 var(--pd-font-text); letter-spacing: 0.02em; }
.pd-sq--36 { width: 36px; height: 36px; border-radius: var(--pd-r-3); font-size: 14px; }
.pd-sq--28 { width: 28px; height: 28px; border-radius: var(--pd-r-2); font-size: 12px; }
.pd-sq--64 { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; }
.pd-sq--24 { width: 24px; height: 24px; border-radius: var(--pd-r-2); font-size: 11px; letter-spacing: 0; }
/* the neutral ink preset disappears on dark surfaces: give it its own edge */
.pd-sq.is-ink { box-shadow: inset 0 0 0 1px var(--app-chrome-line); }

/* keyboard tooltip (icon buttons, rail): one element, placed by ui.js, after 500 ms */
.pd-tooltip { position: fixed; z-index: var(--pd-z-toast); max-width: 240px; padding: var(--pd-s-05) var(--pd-s-1); border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); font: 500 13px/18px var(--pd-font-text); pointer-events: none; white-space: nowrap; }

/* ---------- 5. The ledger table (5.4) ---------- */
.pd-table-wrap { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--pd-r-2); min-width: 0; }
.pd-table { width: 100%; font-size: 15px; line-height: 22px; }
.pd-table th { position: sticky; top: var(--pd-sticky-top, 0px); z-index: 2; height: 40px; padding: 0 var(--pd-s-15); background: var(--app-surface); border-bottom: 1px solid var(--app-line); font: 600 13px/18px var(--pd-font-text); color: var(--app-text-2); text-align: left; white-space: nowrap; vertical-align: middle; }
.pd-table th:first-child { border-top-left-radius: var(--pd-r-2); }
.pd-table th:last-child { border-top-right-radius: var(--pd-r-2); }
.pd-table td { height: var(--pd-row-h); padding: 0 var(--pd-s-15); border-top: 1px solid var(--app-line); vertical-align: middle; }
.pd-table tbody tr:first-child td { border-top: 0; }
.pd-table .num, .pd-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-table td.num { font-weight: 600; }
.pd-table td.code { font-family: var(--pd-font-mono); font-size: 13px; white-space: nowrap; }
.pd-table td.nowrap { white-space: nowrap; }
.pd-table tbody tr { transition: background-color var(--pd-dur-1) linear; }
.pd-table tbody tr[data-href] { cursor: pointer; }
/* a row that opens its record takes the keyboard focus: the ring is drawn on its cells (a table row has no reliable outline) */
.pd-table tbody tr[data-href]:focus-visible { outline: none; box-shadow: none; }
.pd-table tbody tr[data-href]:focus-visible > td { background: var(--app-hover); box-shadow: inset 0 2px 0 var(--app-focus), inset 0 -2px 0 var(--app-focus); }
.pd-table tbody tr[data-href]:focus-visible > td:first-child { box-shadow: inset 2px 0 0 var(--app-focus), inset 0 2px 0 var(--app-focus), inset 0 -2px 0 var(--app-focus); }
.pd-table tbody tr[data-href]:focus-visible > td:last-child { box-shadow: inset -2px 0 0 var(--app-focus), inset 0 2px 0 var(--app-focus), inset 0 -2px 0 var(--app-focus); }
@media (hover: hover) { .pd-table tbody tr:hover { background: var(--app-hover); } }
.pd-table tbody tr.is-hover { background: var(--app-hover); }
.pd-table tr.pd-total td { border-top: 2px solid var(--app-text); font-weight: 600; }
.pd-table .pd-rowacts { display: inline-flex; gap: 0; opacity: 0; transition: opacity var(--pd-dur-1) linear; }
.pd-table tr:hover .pd-rowacts, .pd-table tr:focus-within .pd-rowacts, .pd-table tr.is-hover .pd-rowacts { opacity: 1; }
.pd-table td.acts { width: 1%; padding-right: var(--pd-s-05); white-space: nowrap; text-align: right; }
.pd-table td.acts .pd-btn--icon { margin: -2px 0; }
.pd-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -2px -6px; padding: 0 6px; border-radius: var(--pd-r-2); font: inherit; color: inherit; }
.pd-sort .pd-ic { width: 16px; height: 16px; }
.pd-sort[data-dir], th[aria-sort="ascending"] .pd-sort, th[aria-sort="descending"] .pd-sort { color: var(--app-text); }   /* aria-sort sits on the th (ui.js) */
th.num .pd-sort { flex-direction: row-reverse; }
@media (hover: hover) { .pd-sort:hover { background: var(--app-hover); color: var(--app-text); } }
.pd-table[data-compact] td { height: var(--pd-control-h-compact); }
.pd-table-foot { display: flex; justify-content: center; padding: var(--pd-s-2) 0 var(--pd-s-4); }
/* under 768 the table becomes a list of cards: title, meta, amount at the right, status under it */
@media (max-width: 767px) {
  .pd-table-wrap { background: none; border: 0; border-radius: 0; }
  .pd-table, .pd-table tbody { display: block; }
  .pd-table thead { display: none; }
  .pd-table tbody { display: grid; gap: var(--pd-s-1); }
  .pd-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "m s"; column-gap: var(--pd-s-15); row-gap: 2px; padding: var(--pd-s-15) var(--pd-s-2); background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--pd-r-2); }
  .pd-table td { display: none; height: auto; padding: 0; border: 0; }
  .pd-table td[data-p="1"] { display: block; grid-area: t; font-weight: 600; min-width: 0; }
  .pd-table td[data-p="2"] { display: block; grid-area: m; font-size: 13px; line-height: 18px; color: var(--app-text-3); font-weight: 400; text-align: left; min-width: 0; }
  .pd-table td[data-p="amount"] { display: block; grid-area: a; text-align: right; }
  .pd-table td[data-p="status"] { display: block; grid-area: s; text-align: right; font-size: 13px; line-height: 18px; }
  .pd-table tr.pd-total { border-width: 2px 0 0; border-color: var(--app-text); border-radius: 0; background: none; }
  .pd-table tr.pd-total td { border: 0; }
  .pd-compact-toggle, .pd-check:has(> [data-pd="compact"]) { display: none !important; }   /* compact is a desktop toggle (5.4) */
  .pd-table tbody tr[data-href]:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
  .pd-table tbody tr[data-href]:focus-visible > td { background: none; box-shadow: none !important; }
}

/* ---------- 6. Popovers, lists, menus (5.2, 5.9, 6.3) ---------- */
.pd-pop {
  position: fixed; z-index: var(--pd-z-popover); min-width: 200px; max-width: calc(100vw - 16px);
  background: var(--app-surface); color: var(--app-text); border-radius: var(--pd-r-3);
  box-shadow: 0 0 0 1px var(--app-line), var(--app-shadow-pop);
  transform-origin: var(--pd-origin, top left);
}
.pd-pop.is-in { animation: pd-pop-in var(--pd-dur-2) var(--pd-ease-out) both; }
.pd-pop.is-out { animation: pd-pop-out 120ms var(--pd-ease-in) both; }
@keyframes pd-pop-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pd-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.98); } }
.pd-pop--static { position: relative; z-index: auto; }
.pd-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: var(--pd-s-05) 0; }
/* a row is 44 high on one line; a label that wraps gets the same 11 px above and below instead of touching its neighbours */
.pd-opt { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 44px; padding: 11px var(--pd-s-15); margin: 0 var(--pd-s-05); border-radius: var(--pd-r-2); cursor: pointer; font-size: 15px; line-height: 22px; color: var(--app-text); text-align: left; }
button.pd-opt { width: calc(100% - 2 * var(--pd-s-05)); }
.pd-opt:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--app-focus-inner); }
.pd-opt > .pd-opt__label { flex: 1; min-width: 0; }
.pd-opt > .pd-opt__sub { color: var(--app-text-2); font-size: 13px; line-height: 18px; white-space: nowrap; }
.pd-opt > .pd-ic { width: 20px; height: 20px; color: var(--app-text-2); }
.pd-opt > .pd-opt__check { width: 16px; height: 16px; color: var(--app-text); visibility: hidden; }
.pd-opt[aria-selected="true"] { font-weight: 600; }
.pd-opt[aria-selected="true"] > .pd-opt__check { visibility: visible; }
.pd-opt.is-active { background: var(--app-selected); }
.pd-opt[aria-disabled="true"] { color: var(--app-text-3); cursor: not-allowed; }
.pd-opt--crit { color: var(--app-crit-ink); }
.pd-opt--crit > .pd-ic { color: var(--app-crit-ink); }
.pd-list-search { padding: var(--pd-s-1) var(--pd-s-1) var(--pd-s-05); border-bottom: 1px solid var(--app-line); }
.pd-list-empty { padding: var(--pd-s-15) var(--pd-s-2); color: var(--app-text-2); }
.pd-menu-sep { height: 1px; margin: var(--pd-s-05) 0; background: var(--app-line); }
.pd-menu-head { display: flex; align-items: center; gap: var(--pd-s-15); padding: var(--pd-s-15) var(--pd-s-2); border-bottom: 1px solid var(--app-line); }
.pd-menu-row { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 52px; padding: 0 var(--pd-s-2); }
@media (hover: hover) { .pd-opt:not([aria-disabled="true"]):hover { background: var(--app-selected); } }

/* date picker (never a native date input) */
.pd-cal { width: 332px; max-width: 100%; padding: var(--pd-s-15); }
.pd-cal__head { display: flex; align-items: center; gap: var(--pd-s-05); margin-bottom: var(--pd-s-05); }
.pd-cal__title { flex: 1; font: 600 16px/22px var(--pd-font-text); padding-left: var(--pd-s-1); }
.pd-cal__grid { display: grid; grid-template-columns: repeat(7, 44px); justify-content: center; }
.pd-cal__dow { height: 32px; display: grid; place-items: center; font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.pd-cal__day { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--pd-r-2); font-size: 15px; line-height: 22px; color: var(--app-text); font-variant-numeric: tabular-nums; transition: background-color var(--pd-dur-1) linear; }
.pd-cal__day.is-other { color: var(--app-text-3); }
.pd-cal__day.is-closed { color: var(--app-text-3); background: var(--app-surface-2); cursor: not-allowed; border-radius: 0; }
.pd-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--app-text); }
.pd-cal__day[aria-selected="true"] { background: var(--app-solid); color: var(--app-on-solid); font-weight: 600; box-shadow: none; }
@media (hover: hover) { .pd-cal__day:not(.is-closed):not([aria-selected="true"]):hover { background: var(--app-selected); } }
.pd-cal__day.is-active:not([aria-selected="true"]) { background: var(--app-selected); }
/* meta grey is never on --app-selected (6.70:1): other months' and closed days step up to text-2 when lit */
.pd-cal__day.is-active.is-other, .pd-cal__day.is-active.is-closed { color: var(--app-text-2); }
@media (hover: hover) { .pd-cal__day.is-other:not(.is-closed):hover { color: var(--app-text-2); } }
.pd-cal__foot { display: flex; gap: var(--pd-s-05); margin-top: var(--pd-s-1); padding-top: var(--pd-s-1); border-top: 1px solid var(--app-line); }

/* ---------- 7. Dialogs, sheets, scrim (5.7): nothing pushes the page ---------- */
.pd-scrim { position: fixed; inset: 0; z-index: var(--pd-z-scrim); background: var(--app-scrim); animation: pd-fade var(--pd-dur-2) linear both; }
.pd-scrim.is-out { animation: pd-fade-out var(--pd-dur-2) var(--pd-ease-in) both; }
.pd-scrim--still { animation: none; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pd-fade-out { from { opacity: 1; } to { opacity: 0; } }
.pd-layer { position: fixed; inset: 0; z-index: var(--pd-z-dialog); display: grid; place-items: center; padding: var(--pd-s-2); pointer-events: none; }
.pd-layer > * { pointer-events: auto; }
/* a full-screen window (a drawing surface, « Écran entier ») takes the whole screen: no margin around it (5.7) */
.pd-layer.is-full, .pd-layer:has(> .pd-dialog--full) { padding: 0; }
.pd-dialog {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100svh - 32px); display: flex; flex-direction: column;
  background: var(--app-surface); color: var(--app-text); border-radius: var(--pd-r-3); box-shadow: var(--app-shadow-dialog); overflow: hidden;
  animation: pd-dialog-in var(--pd-dur-3) var(--pd-ease-out) both;
}
.pd-dialog.is-out { animation: pd-dialog-out var(--pd-dur-2) var(--pd-ease-in) both; }
.pd-dialog--form { max-width: 640px; }
.pd-dialog--wide { max-width: 880px; }
.pd-dialog--full { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
@keyframes pd-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pd-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.pd-dialog__head { display: flex; align-items: center; gap: var(--pd-s-1); min-height: 64px; padding: var(--pd-s-15) var(--pd-s-15) 0 var(--pd-s-3); flex: none; }
.pd-dialog__head > :first-child { flex: 1; min-width: 0; }
.pd-dialog__body { padding: var(--pd-s-1) var(--pd-s-3) var(--pd-s-1); overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--pd-s-2); }
/* a long body scrolls; its children keep their height (a 44 px link was squeezed to 37). A full window lays its own surface out */
:where(.pd-dialog:not(.pd-dialog--full)) > .pd-dialog__body > *, .pd-sheet__body > * { flex-shrink: 0; }   /* low specificity: a page's own flex on a child wins */
.pd-dialog__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--pd-s-1); padding: var(--pd-s-25) var(--pd-s-3) var(--pd-s-3); flex: none; }
.pd-dialog--static { animation: none; box-shadow: 0 0 0 1px var(--app-line), var(--app-shadow-dialog); }
@media (max-width: 479px) {
  .pd-dialog__head { padding-left: var(--pd-s-2); }
  .pd-dialog__body { padding: var(--pd-s-1) var(--pd-s-2); }
  .pd-dialog__foot { padding: var(--pd-s-2); }
  .pd-dialog__foot > .pd-btn { flex: 1 1 auto; }
}
/* the facts of an irreversible act: a table, not a sentence (H6) */
.pd-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--app-line); }
.pd-facts > dt, .pd-facts > dd { padding: var(--pd-s-15) 0; border-bottom: 1px solid var(--app-line); min-height: 48px; display: flex; align-items: center; }
.pd-facts > dt { color: var(--app-text-2); padding-right: var(--pd-s-3); }
.pd-facts > dd { font-weight: 600; justify-content: flex-end; text-align: right; }
.pd-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--pd-z-dialog); max-height: 85svh; display: flex; flex-direction: column;
  background: var(--app-surface); color: var(--app-text); border-radius: var(--pd-r-3) var(--pd-r-3) 0 0; box-shadow: var(--app-shadow-dialog);
  padding-bottom: env(safe-area-inset-bottom);
  animation: pd-sheet-in var(--pd-dur-4) var(--pd-ease-out) both;
}
.pd-sheet.is-out { animation: pd-sheet-out var(--pd-dur-3) var(--pd-ease-in) both; }
.pd-sheet--full { top: 0; max-height: none; border-radius: 0; }
@keyframes pd-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pd-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
.pd-sheet__head { display: flex; align-items: center; gap: var(--pd-s-1); min-height: 60px; padding: var(--pd-s-1) var(--pd-s-1) 0 var(--pd-s-2); flex: none; }
.pd-sheet__head > :first-child { flex: 1; min-width: 0; }
.pd-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pd-s-2) var(--pd-s-2); flex: 1; min-height: 0; }
.pd-sheet--form .pd-sheet__body { display: flex; flex-direction: column; gap: var(--pd-s-2); padding-top: var(--pd-s-1); }
.pd-sheet .pd-opt { min-height: 52px; margin: 0; padding: 15px var(--pd-s-1); }
.pd-sheet button.pd-opt { width: 100%; }
.pd-sheet .pd-list { max-height: none; padding: 0; }
.pd-sheet__group { font: 600 13px/18px var(--pd-font-text); color: var(--app-text-2); padding: var(--pd-s-2) var(--pd-s-1) var(--pd-s-05); }
.pd-sheet--static { position: relative; z-index: auto; animation: none; box-shadow: 0 0 0 1px var(--app-line); padding-bottom: 0; }
html.pd-locked, html.pd-locked body { overflow: hidden; }
html.pd-locked { padding-right: var(--pd-sbw, 0px); }
html.pd-locked .pd-top, html.pd-locked .pd-tabbar, html.pd-locked body > .pd-proto, html.pd-locked .pd-actionbar { right: var(--pd-sbw, 0px); }

/* ---------- 8. Toasts (5.8) ---------- */
.pd-toasts { position: fixed; right: var(--pd-s-3); bottom: var(--pd-s-3); z-index: var(--pd-z-toast); width: 360px; max-width: calc(100vw - 32px); height: 0; }
.pd-toast {
  position: absolute; right: 0; bottom: 0; width: max-content; max-width: 100%; display: flex; align-items: center; gap: var(--pd-s-1); min-height: 48px; padding: 0 var(--pd-s-1) 0 var(--pd-s-2);
  background: var(--app-solid); color: var(--app-on-solid); border-radius: var(--pd-r-2); box-shadow: var(--app-shadow-pop);
  font-size: 15px; line-height: 22px; transform-origin: bottom center;
  transition: transform var(--pd-dur-3) var(--pd-ease-out), opacity var(--pd-dur-3) var(--pd-ease-out);
  animation: pd-toast-in var(--pd-dur-3) var(--pd-ease-out) both;
}
.pd-toast__text { flex: 1; min-width: 0; padding: 13px 8px 13px 0; }
.pd-toast > .pd-ic { width: 20px; height: 20px; }
.pd-toast .pd-btn--quiet { color: var(--app-on-solid); }
@media (hover: hover) { .pd-toast .pd-btn--quiet:hover { background: var(--app-solid-hover); color: var(--app-on-solid); } }
.pd-toast.is-out { animation: pd-toast-out var(--pd-dur-2) var(--pd-ease-in) both; }
@keyframes pd-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes pd-toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.pd-toast--static { position: relative; animation: none; }
@media (max-width: 767px) {
  .pd-toasts { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--pd-tabbar-total, 0px) + var(--pd-actionbar-h, 0px) + var(--pd-s-2)); }
  .pd-toast { left: 0; right: 0; width: auto; margin: 0 auto; }
}

/* ---------- 9. Bell panel (5.9) and command search (5.10) ---------- */
.pd-bell { width: 400px; max-width: 100%; max-height: 480px; display: flex; flex-direction: column; overflow: hidden; }
.pd-bell__head { display: flex; align-items: center; gap: var(--pd-s-1); min-height: 56px; padding: var(--pd-s-05) var(--pd-s-1) var(--pd-s-05) var(--pd-s-2); border-bottom: 1px solid var(--app-line); flex: none; }
.pd-bell__head > .pd-title { flex: 1; }
.pd-bell__list { overflow-y: auto; overscroll-behavior: contain; }
.pd-bell__empty { padding: var(--pd-s-1) var(--pd-s-2); }
.pd-bell__head { flex-wrap: wrap; }
.pd-pop--static .pd-bell { max-height: none; }
.pd-bell--sheet { width: auto; max-width: none; max-height: none; overflow: visible; margin: 0 calc(-1 * var(--pd-s-2)); }   /* rows run edge to edge */
.pd-bell--sheet .pd-bell__list { overflow: visible; border-top: 1px solid var(--app-line); }
/* phone: « Tout marquer comme lu » sits in the sheet's head between the title and Fermer; under 380 px
   it takes the line under the title, aligned with it (the three never fit one line there) */
.pd-sheet__head > [data-act="read-all"] { flex: none; padding: 0 var(--pd-s-1); }
@media (max-width: 379px) {
  .pd-sheet__head:has(> [data-act="read-all"]) { flex-wrap: wrap; row-gap: 0; }
  .pd-sheet__head:has(> [data-act="read-all"])::after { content: ""; order: 2; flex-basis: 100%; height: 0; }   /* the line break */
  .pd-sheet__head > [data-act="read-all"] { order: 3; margin: 0 0 var(--pd-s-05) calc(-1 * var(--pd-s-1)); }
}
.pd-note { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--pd-s-15); align-items: start; min-height: 64px; padding: var(--pd-s-15) var(--pd-s-2) var(--pd-s-15) var(--pd-s-3); border-bottom: 1px solid var(--app-line); transition: background-color var(--pd-dur-1) linear; }
.pd-note:last-child { border-bottom: 0; }
.pd-note > .pd-ic { margin-top: 1px; color: var(--app-text-2); }
.pd-note__title { font-size: 15px; line-height: 22px; }
.pd-note.is-unread .pd-note__title { font-weight: 600; }
.pd-note.is-unread::before { content: ""; position: absolute; left: 10px; top: 19px; width: 8px; height: 8px; border-radius: var(--pd-r-round); background: var(--app-text); }
.pd-note__text { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-note__at { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (hover: hover) { a.pd-note:hover, button.pd-note:hover { background: var(--app-hover); } }
.pd-cmd { position: fixed; z-index: var(--pd-z-dialog); top: 120px; left: 50%; transform: translateX(-50%); width: 640px; max-width: calc(100vw - 32px); max-height: calc(100svh - 160px); display: flex; flex-direction: column; background: var(--app-surface); color: var(--app-text); border-radius: var(--pd-r-3); box-shadow: var(--app-shadow-dialog); overflow: hidden; }
.pd-cmd--static { position: relative; top: auto; left: auto; transform: none; z-index: auto; width: 100%; max-width: 640px; max-height: none; box-shadow: 0 0 0 1px var(--app-line), var(--app-shadow-dialog); }
.pd-cmd__bar { display: flex; align-items: center; gap: var(--pd-s-15); height: 52px; padding: 0 var(--pd-s-15) 0 var(--pd-s-2); border-bottom: 1px solid var(--app-line); flex: none; }
.pd-cmd__bar > .pd-ic { color: var(--app-text-2); }
.pd-cmd__input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; font: 400 17px/24px var(--pd-font-text); color: var(--app-text); }
.pd-cmd__input::placeholder { color: var(--app-text-3); opacity: 1; }
.pd-cmd__input:focus-visible, .pd-app .pd-cmd__input:focus-visible, .pd-site .pd-app .pd-cmd__input:focus-visible { outline: none; box-shadow: none; }   /* the panel is the focus */
.pd-cmd__list { overflow-y: auto; overscroll-behavior: contain; padding: var(--pd-s-05) var(--pd-s-1) var(--pd-s-1); flex: 1; min-height: 0; }
.pd-cmd__group { font: 600 13px/18px var(--pd-font-text); color: var(--app-text-2); padding: var(--pd-s-15) var(--pd-s-1) var(--pd-s-05); }
.pd-cmd__row { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 44px; padding: var(--pd-s-05) var(--pd-s-1); border-radius: var(--pd-r-2); cursor: pointer; }
.pd-cmd__row > .pd-ic { color: var(--app-text-2); }
.pd-cmd__label { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--pd-s-1); flex-wrap: wrap; font-size: 15px; line-height: 22px; }
.pd-cmd__sub { font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.pd-cmd__row .pd-kbd { visibility: hidden; }
.pd-cmd__row.is-active { background: var(--app-selected); }
.pd-cmd__row.is-active .pd-cmd__sub { color: var(--app-text-2); }   /* never --app-text-3 on --app-selected */
.pd-cmd__row.is-active .pd-kbd { visibility: visible; }
.pd-cmd__row mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pd-cmd__foot { display: flex; align-items: center; gap: var(--pd-s-2); height: 36px; padding: 0 var(--pd-s-2); border-top: 1px solid var(--app-line); font-size: 13px; line-height: 18px; color: var(--app-text-3); flex: none; white-space: nowrap; overflow: hidden; }
.pd-cmd__empty { padding: var(--pd-s-2) var(--pd-s-1); color: var(--app-text-2); }
.pd-cmd__row--skel { cursor: default; }
.pd-cmd__row--skel > .pd-skel:last-child { flex: none; }
.pd-skel--ic { width: 20px; height: 20px; flex: none; }
.pd-cmd__close { display: none; }
@media (max-width: 767px) {
  .pd-cmd:not(.pd-cmd--static) { top: 0; left: 0; transform: none; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .pd-cmd__foot, .pd-cmd .pd-kbd { display: none; }
  .pd-cmd__close { display: inline-flex; margin-right: -8px; }
}

/* ---------- 10. Agenda: day grid, week, phone time list (5.15) ---------- */
.pd-agenda { --h0: 8; --h1: 19; --hpx: 80px; --cols: 3; position: relative; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--pd-r-2); min-width: 0; }
.pd-agenda__head { position: sticky; top: var(--pd-sticky-top, 0px); z-index: 3; display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); background: var(--app-surface); border-bottom: 1px solid var(--app-line); border-radius: var(--pd-r-2) var(--pd-r-2) 0 0; }
.pd-agenda__who { display: flex; align-items: center; gap: var(--pd-s-1); min-height: 56px; padding: 0 var(--pd-s-15); min-width: 0; border-left: 1px solid var(--app-line); }
.pd-agenda__who b { display: block; font-weight: 600; font-size: 15px; line-height: 22px; white-space: nowrap; }
.pd-agenda__who b + span { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-3); white-space: nowrap; }   /* not the avatar: its initials stay centred */
.pd-agenda__body { position: relative; display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); height: calc((var(--h1) - var(--h0)) * var(--hpx)); }
.pd-agenda__gutter { position: relative; }
.pd-agenda__hour { position: absolute; left: 0; right: 8px; top: calc((var(--h) - var(--h0)) * var(--hpx) - 9px); text-align: right; font-size: 13px; line-height: 18px; color: var(--app-text-3); font-variant-numeric: tabular-nums; }
.pd-agenda__hour:first-child { top: 4px; }
.pd-agenda__col { position: relative; border-left: 1px solid var(--app-line); background: var(--app-surface); min-width: 0; }
.pd-agenda__past { position: absolute; left: 0; right: 0; top: 0; height: calc((var(--now) - var(--h0)) * var(--hpx)); background: var(--app-bg); }
.pd-agenda__lines { position: absolute; inset: 0 0 0 56px; pointer-events: none; background-image: repeating-linear-gradient(to bottom, var(--app-line) 0 1px, transparent 1px var(--hpx)); background-position: 0 var(--hpx); }
.pd-closed { position: absolute; left: 0; right: 0; top: calc((var(--s) - var(--h0)) * var(--hpx)); height: calc((var(--e) - var(--s)) * var(--hpx)); background: var(--app-surface-2); padding: 6px 8px; font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.pd-appt {
  --pd-gut: 0px;
  position: absolute; top: calc((var(--s) - var(--h0)) * var(--hpx) + 1px); height: calc((var(--e) - var(--s)) * var(--hpx) - 2px);
  left: calc(var(--lane, 0) / var(--lanes, 1) * (100% - var(--pd-gut)) + 2px); width: calc((100% - var(--pd-gut)) / var(--lanes, 1) - 4px);
  border-radius: var(--pd-r-2); padding: 6px 8px; overflow: hidden; text-align: left;
  background: var(--app-selected); color: var(--app-text); display: flex; flex-direction: column; gap: 0; z-index: 1;
  transition: background-color var(--pd-dur-1) linear;
}
.pd-appt__t { font-size: 13px; line-height: 18px; color: var(--app-text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pd-appt__who { font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.pd-appt__what { font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-appt__line { font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-appt__line b { font-weight: 600; }
.pd-appt .pd-ic { width: 16px; height: 16px; color: var(--app-text-2); }
/* a block shows fewer lines, never a clipped line: its lines drop by the block's own height */
.pd-appt.is-60 { container-type: size; }
@container (max-height: 75px) { .pd-appt__st { display: none !important; } }
@container (max-height: 55px) { .pd-appt__what { display: none !important; } }
.pd-appt__st { margin-top: 2px; font-size: 13px; line-height: 18px; }
.pd-agenda__hour.is-under { visibility: hidden; }
.pd-appt.is-20 { padding: 1px 8px; flex-direction: row; align-items: center; gap: 6px; }
.pd-appt.is-20 .pd-appt__line { font-size: 12px; line-height: 16px; }
.pd-appt.is-40 { padding: 10px 8px; }
/* past two overlapping blocks (PD.lanes): the lanes leave a 28 px strip, the « +1 » marker sits in it at its time */
.pd-appt.has-more { --pd-gut: 28px; }
.pd-appt-more { position: absolute; z-index: 1; right: 2px; width: 24px; top: calc((var(--s) - var(--h0)) * var(--hpx) + 1px); height: calc((var(--e) - var(--s)) * var(--hpx) - 2px); display: flex; justify-content: center; padding-top: 6px; border-radius: var(--pd-r-2); background: var(--app-surface-2); color: var(--app-text); font: 600 13px/18px var(--pd-font-text); font-variant-numeric: tabular-nums; transition: background-color var(--pd-dur-1) linear; }
@media (hover: hover) { .pd-appt-more:hover { background: var(--app-hover); } }
.pd-appt--request { background: var(--app-surface); border: 1px dashed var(--app-border); }
.pd-appt--deposit { background: var(--app-surface); border: 1px solid var(--app-border); }
.pd-appt--absent, .pd-appt--done { background: var(--app-surface-2); }
.pd-appt--done { color: var(--app-text-2); }
.pd-appt--done .pd-appt__who { font-weight: 500; }
@media (hover: hover) { .pd-appt:hover { background: var(--app-hover); } .pd-appt--confirmed:hover { background: var(--app-selected); box-shadow: inset 0 0 0 1px var(--app-border); } }
.pd-slot { position: absolute; top: calc((var(--s) - var(--h0)) * var(--hpx) + 1px); height: calc((var(--e) - var(--s)) * var(--hpx) - 2px); left: 2px; right: 2px; border: 1px dashed var(--app-border); border-radius: var(--pd-r-2); padding: 6px 8px; font-size: 13px; line-height: 18px; color: var(--app-text-2); text-align: left; display: flex; align-items: flex-start; gap: 4px; background: transparent; z-index: 1; transition: background-color var(--pd-dur-1) linear; }
.pd-slot .pd-ic { width: 16px; height: 16px; margin-top: 1px; }
@media (hover: hover) { .pd-slot:hover { background: var(--app-hover); color: var(--app-text); } }
.pd-now { position: absolute; left: 56px; right: 0; top: calc((var(--now) - var(--h0)) * var(--hpx) - 1px); height: 2px; background: var(--app-now); z-index: 2; pointer-events: none; }
.pd-now__label { position: absolute; right: calc(100% + 4px); top: -9px; height: 20px; padding: 0 5px; border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); font: 400 12px/20px var(--pd-font-mono); white-space: nowrap; }
/* week view: seven columns, 64 px an hour, today in 600 with its date in an ink square */
.pd-agenda--week { --cols: 7; --hpx: 64px; }
/* a week column is narrow: the block is the time and the client at 13/18, so a name fits whole from 768 px */
.pd-agenda--week .pd-appt { padding: 4px 6px; }
.pd-agenda--week .pd-appt__who { font-size: 13px; line-height: 18px; }
.pd-wday { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 0 var(--pd-s-1); border-left: 1px solid var(--app-line); font-size: 13px; line-height: 18px; color: var(--app-text-2); min-width: 0; }
.pd-wday b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--app-text); }
.pd-wday.is-today b { font-weight: 600; }
.pd-wday.is-today .pd-wday__n { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 4px; border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); }
/* phone: a Monday-first week strip and a time list (critique §5 item 3) */
.pd-wstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.pd-wstrip__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 56px; min-width: 0; border-radius: var(--pd-r-2); font-size: 13px; line-height: 16px; color: var(--app-text-2); }
.pd-wstrip__day b { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--app-text); font-variant-numeric: tabular-nums; }
.pd-wstrip__day small { font: 600 11px/14px var(--pd-font-text); color: var(--app-text-2); }
.pd-wstrip__day[aria-pressed="true"] { background: var(--app-solid); color: var(--app-on-solid); }
.pd-wstrip__day[aria-pressed="true"] b, .pd-wstrip__day[aria-pressed="true"] small { color: var(--app-on-solid); }
.pd-wstrip__day.is-closed { color: var(--app-text-3); }
@media (hover: hover) { .pd-wstrip__day:not([aria-pressed="true"]):hover { background: var(--pd-hover-here); } }
.pd-tl > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: var(--pd-s-15); padding: var(--pd-s-15) 0; border-top: 1px solid var(--app-line); align-items: start; }
.pd-tl > li:first-child { border-top: 0; }
.pd-tl__t b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-tl__t span { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.pd-tl__main { min-width: 0; }
.pd-tl__main > b { display: block; font-weight: 600; }
.pd-tl__main > span { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-2); }
.pd-tl__main > .pd-status { display: inline-flex; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--app-text); }
.pd-tl > li.is-free { border-top-style: solid; }
.pd-tl__free { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--pd-s-15); border: 1px dashed var(--app-border); border-radius: var(--pd-r-2); color: var(--app-text-2); font-size: 15px; }
.pd-tl > li.pd-tl__now { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 0; border-top: 0; height: 0; position: relative; z-index: 1; }
.pd-tl__now .pd-now__label { position: static; transform: translateY(-50%); }
/* the 0-high row centres both in a 20 px track (the label's height): the label moves up half its height, the 2 px line
   up by the same 10 px, so it runs through the middle of « 14:10 » */
.pd-tl__now::after { content: ""; display: block; height: 2px; background: var(--app-now); transform: translateY(-10px); }
.pd-tl > li.pd-tl__now + li { border-top: 0; }

/* ---------- 11. The day ruler and the needle (5.16) ---------- */
.pd-ruler { --h0: 8; --hs: 10; --pd-ruler-in: 0px; --pd-ruler-ends: initial; --pd-ruler-shift: -1px; position: relative; padding-top: 22px; container-type: inline-size; }
/* A self-contained ruler (its scale, rows holding only bars, and its needle in one box, as kit.html and S01 draw it)
   insets its time axis by 20 px at both ends, half an hour label: the first and last labels sit centred on their ticks
   and stay inside the ruler, so a desktop ruler labels every hour (5.16) and 08:00 never touches 09:00. A ruler split
   across boxes (its scale in a header, its bars elsewhere) or with marks of its own in the rows keeps the flush axis,
   so its other parts stay aligned. To opt in by hand: class pd-ruler--inset; to opt out: --pd-ruler-in: 0px on it. */
:is(.pd-ruler--inset, .pd-ruler:where(:has(> .pd-ruler__scale):has(> .pd-ruler__rows):not(:has(> .pd-ruler__rows > :not(.pd-ruler__row))):not(:has(> .pd-ruler__rows > .pd-ruler__row > :not(.pd-bar))))) { --pd-ruler-in: 20px; --pd-ruler-ends: -50%; --pd-ruler-shift: 0px; }
.pd-ruler__scale { position: absolute; top: 0; left: var(--pd-ruler-in, 0px); right: var(--pd-ruler-in, 0px); height: 22px; }
.pd-ruler__h { position: absolute; top: 0; left: calc((var(--h) - var(--h0)) / var(--hs) * 100%); transform: translateX(-50%); font: 400 12px/16px var(--pd-font-mono); color: var(--app-text-3); white-space: nowrap; }
/* flush axis: the end labels are anchored inside (their tick at their outer edge); inset axis: centred like the others */
.pd-ruler__h:first-child { transform: translateX(var(--pd-ruler-ends, 0%)); }
.pd-ruler__h:last-child { transform: translateX(var(--pd-ruler-ends, -100%)); }
/* the tick of every hour stays when its label steps aside (odd hours on a narrow ruler, the hour under the needle) */
.pd-ruler__h::after { content: ""; position: absolute; left: 50%; top: 17px; width: 1px; height: 5px; background: var(--app-border); visibility: visible; }
.pd-ruler__h:first-child::after { left: calc(-1 * var(--pd-ruler-ends, 0%)); }
.pd-ruler__h:last-child::after { left: calc(-1 * var(--pd-ruler-ends, -100%)); margin-left: var(--pd-ruler-shift, -1px); }
.pd-ruler__h.is-under { visibility: hidden; }
/* one row per job: a slot of --pd-ruler-pitch (28 by default) with the 12 px track centred in it */
.pd-ruler__row { position: relative; height: var(--pd-ruler-pitch, 28px); }
.pd-ruler__row::before { content: ""; position: absolute; left: var(--pd-ruler-in, 0px); right: var(--pd-ruler-in, 0px); top: 50%; height: 12px; margin-top: -6px; border-radius: var(--pd-r-1); background: var(--app-chart-track); }
.pd-ruler__rows { position: relative; }
.pd-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; left: calc(var(--pd-ruler-in, 0px) + (var(--s) - var(--h0)) / var(--hs) * (100% - 2 * var(--pd-ruler-in, 0px)) + 1px); width: calc((var(--e) - var(--s)) / var(--hs) * (100% - 2 * var(--pd-ruler-in, 0px)) - 2px); border-radius: var(--pd-r-1); transform-origin: left center; }
.pd-bar--done { background: var(--app-chart-2); }
.pd-bar--planned { background: var(--app-surface); box-shadow: inset 0 0 0 1px var(--app-border); }
.pd-bar--free { background: var(--app-surface); box-shadow: none; border: 1px dashed var(--app-border); }
.pd-bar--progress { background: var(--app-surface); box-shadow: inset 0 0 0 1px var(--app-chart-1); overflow: hidden; }
.pd-bar--progress::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--app-chart-1); }
.pd-needle { position: absolute; top: 18px; bottom: -4px; left: calc(var(--pd-ruler-in, 0px) + (var(--t) - var(--h0)) / var(--hs) * (100% - 2 * var(--pd-ruler-in, 0px))); width: 2px; margin-left: -1px; background: var(--app-now); z-index: 2; pointer-events: none; }
.pd-needle__label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); height: 20px; padding: 0 5px; border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); font: 400 12px/20px var(--pd-font-mono); white-space: nowrap; }
.pd-needle--ghost { background: var(--app-text-3); opacity: 0; transition: opacity var(--pd-dur-1) linear; }
.pd-needle--ghost .pd-needle__label { background: var(--app-surface); color: var(--app-text); box-shadow: inset 0 0 0 1px var(--app-border); }
.pd-ruler.is-scrubbing .pd-needle--ghost { opacity: 1; }
.pd-ruler .pd-ruler__scale:has(.pd-needle) { pointer-events: none; }
.pd-ruler[tabindex] { border-radius: var(--pd-r-1); }
/* labels every hour on a desktop, every two hours on a phone or a narrow ruler (5.16). A flush ruler needs 640 px for ten
   hours (its anchored end labels take half a label more); an inset one needs 480 (44 px an hour). A longer day than ten
   hours sets is-odd visibility itself */
@media (max-width: 767px) { .pd-ruler__h.is-odd { visibility: hidden; } }
@container (max-width: 640px) { :where(.pd-ruler:not(.pd-ruler--inset):not(:has(> .pd-ruler__scale):has(> .pd-ruler__rows):not(:has(> .pd-ruler__rows > :not(.pd-ruler__row))):not(:has(> .pd-ruler__rows > .pd-ruler__row > :not(.pd-bar))))) .pd-ruler__h.is-odd { visibility: hidden; } }
@container (max-width: 479px) { .pd-ruler__h.is-odd { visibility: hidden; } }
/* bars grow once from their start when they are drawn, then stay (no light pass in the software).
   Pure CSS: it always ends drawn, with or without script. */
.pd-grow .pd-bar, .pd-grow .pd-split > i, .pd-grow .pd-meter__fill { animation: pd-grow var(--pd-dur-4) var(--pd-ease-out) var(--d, 120ms) both; }
.pd-grow .pd-split > i + i { --d: 200ms; }
@keyframes pd-grow { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- 12. Charts (5.18) ---------- */
.pd-split { display: flex; gap: 2px; height: 12px; }
.pd-split > i { display: block; height: 100%; border-radius: var(--pd-r-1); transform-origin: left center; }
.pd-split > .is-1 { background: var(--app-chart-1); }
.pd-split > .is-2 { background: var(--app-chart-2); }
.pd-split > .is-3 { background: var(--app-chart-3); }
.pd-split > .is-4 { background: repeating-linear-gradient(135deg, var(--app-chart-2) 0 2px, var(--app-surface) 2px 4px); box-shadow: inset 0 0 0 1px var(--app-chart-2); }
.pd-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pd-s-1) var(--pd-s-2); margin-top: var(--pd-s-15); }
.pd-legend > div { min-width: 0; }
.pd-legend dt { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--app-text-2); }
.pd-legend dt i { width: 10px; height: 10px; border-radius: 1px; flex: none; }
.pd-legend dt .is-1 { background: var(--app-chart-1); } .pd-legend dt .is-2 { background: var(--app-chart-2); } .pd-legend dt .is-3 { background: var(--app-chart-3); }
.pd-legend dd { font-size: 15px; line-height: 22px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.pd-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-s-15); margin-bottom: var(--pd-s-1); font-size: 13px; line-height: 18px; color: var(--app-text-2); }
.pd-meter__top b { color: var(--app-text); font-weight: 600; font-size: 15px; line-height: 22px; }
.pd-meter__track { height: 8px; border-radius: var(--pd-r-1); background: var(--app-chart-track); overflow: hidden; }
.pd-meter__fill { height: 100%; width: calc(var(--v) * 100%); background: var(--app-chart-1); border-radius: var(--pd-r-1); transform-origin: left center; }

/* ---------- 13. Paper: A4 and the QR-bill (5.17). White in every theme ---------- */
.pd-a4 { width: 210mm; height: 297mm; position: relative; background: var(--paper-bg); color: var(--paper-text); font: 400 12.5px/18px var(--pd-font-text); font-variant-numeric: tabular-nums; overflow: hidden; }
.pd-a4__body { position: absolute; left: 0; right: 0; top: 0; height: 192mm; padding: 16mm 18mm 0; display: flex; flex-direction: column; }
.pd-a4__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; }
.pd-a4__from { display: flex; gap: 4mm; align-items: flex-start; }
.pd-a4__from b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.pd-a4__from div > span { display: block; color: var(--paper-text-2); }
.pd-a4__to { min-width: 70mm; padding-top: 10mm; }
.pd-a4__to span { display: block; }
.pd-a4__title { margin-top: 14mm; font: 600 22px/28px var(--pd-font-title); letter-spacing: -0.01em; }
.pd-a4__dates { display: flex; flex-wrap: wrap; gap: 0 8mm; margin-top: 3mm; padding: 2.5mm 0; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); color: var(--paper-text-2); }
.pd-a4__dates b { color: var(--paper-text); font-weight: 600; }
.pd-a4 table { width: 100%; margin-top: 7mm; border-collapse: collapse; }
.pd-a4 th { text-align: left; font-weight: 600; color: var(--paper-text-2); padding: 1.6mm 0 1.6mm 4mm; border-bottom: 1px solid var(--paper-line); font-size: 11.5px; white-space: nowrap; }
.pd-a4 td { padding: 2.2mm 0 2.2mm 4mm; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.pd-a4 th:first-child, .pd-a4 td:first-child { padding-left: 0; width: 100%; }
.pd-a4 .r { text-align: right; white-space: nowrap; }
.pd-a4__totals { margin-left: auto; width: 76mm; margin-top: 4mm; }
.pd-a4__totals div { display: flex; justify-content: space-between; padding: 1.2mm 0; }
.pd-a4__totals .is-total { border-top: 2px solid var(--paper-rule-total); margin-top: 1.5mm; padding-top: 2mm; font-weight: 600; font-size: 14px; }
.pd-a4__note { margin-top: auto; padding-bottom: 6mm; color: var(--paper-text-2); }
.pd-a4__demo { position: absolute; right: 18mm; top: 6mm; font-weight: 600; color: var(--paper-text-2); }
/* the receipt (62 × 105 mm) and the payment part (148 × 105 mm): black Arial, SIX */
.pd-bill { position: absolute; left: 0; bottom: 0; width: 210mm; height: 105mm; display: grid; grid-template-columns: 62mm 148mm; font-family: var(--pd-font-bill); color: var(--paper-bill-text); background: var(--paper-bg); font-variant-numeric: normal; }
.pd-bill--alone { position: relative; }
.pd-bill__cut-h { position: absolute; left: 0; right: 0; top: 0; border-top: 0.75px dashed var(--paper-bill-line); }
.pd-bill__cut-v { position: absolute; top: 0; bottom: 0; left: 62mm; border-left: 0.75px dashed var(--paper-bill-line); }
.pd-bill__sc { position: absolute; width: 4mm; height: 4mm; color: var(--paper-bill-line); background: var(--paper-bg); }
.pd-bill__sc--h { top: -2mm; left: 5mm; }
.pd-bill__sc--v { left: calc(62mm - 2mm); top: 5mm; transform: rotate(90deg); }
.pd-bill__sc svg { width: 100%; height: 100%; }
.pd-bill h4 { font: 700 11pt/1.2 var(--pd-font-bill); margin: 0; }
.pd-bill dt { font: 700 6pt/9pt var(--pd-font-bill); }
.pd-bill dd { font: 400 8pt/9pt var(--pd-font-bill); margin: 0 0 9pt; }
.pd-bill__rcpt { position: relative; padding: 5mm; display: flex; flex-direction: column; }
.pd-bill dl { margin: 0; }
.pd-bill__rcpt .pd-bill__inf { margin: 3.5mm 0 0; height: 56mm; overflow: hidden; }
.pd-bill__amt { display: grid; grid-template-columns: 13mm 1fr; gap: 0 1mm; height: 14mm; align-content: start; }
.pd-bill__amt dd { margin: 0; }
.pd-bill__accept { margin-top: auto; text-align: right; font: 700 6pt/9pt var(--pd-font-bill); padding-bottom: 0; }
.pd-bill__pay { position: relative; display: grid; grid-template-columns: 51mm 87mm; grid-template-rows: auto 1fr; padding: 5mm; column-gap: 5mm; }
.pd-bill__pay > h4 { grid-column: 1; grid-row: 1; }
.pd-bill__qr { grid-column: 1; grid-row: 2; padding-top: 5mm; display: flex; flex-direction: column; }
.pd-bill__qr svg { width: 46mm; height: 46mm; display: block; }
.pd-bill__qr .pd-bill__amt { margin-top: 3.5mm; grid-template-columns: 15mm 1fr; height: auto; }
.pd-bill__pay dt { font-size: 8pt; line-height: 11pt; }
.pd-bill__pay dd { font-size: 10pt; line-height: 11pt; margin-bottom: 11pt; }
.pd-bill__info { grid-column: 2; grid-row: 1 / span 2; }
.pd-bill__info dl { margin: 0; }
/* a sheet scaled to its container (phones, side previews): the true-size layout, drawn smaller */
.pd-fit { position: relative; width: 100%; overflow: hidden; }
.pd-fit > .pd-fit__in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pd-qr { display: block; background: var(--paper-bg); }
.pd-qr path, .pd-qr rect { fill: var(--paper-bill-text); }
.pd-qr .pd-qr__w { fill: var(--paper-bg); }
.pd-a4__sq { width: 40px; height: 40px; background: var(--app-accent, var(--paper-text)); color: var(--app-on-accent, var(--paper-bg)); }

/* ---------- 13b. The software's slates: « écran de pièces » (6.4, S02) and Réglages > Pièces (S18) ----------
   One slate per menu entry, 176 × 112, laid in courses by menu group; on a desktop every second course is offset by
   half a slate. Phones: two columns, no offset, 96 high. The slate itself is shared/slate.css (.pd-slate--app). The
   link wraps the slate so its focus ring is not cut by the clip-path. */
.pd-aroof { display: flex; flex-direction: column; gap: var(--pd-joint); }
.pd-aroof__course { display: flex; flex-wrap: wrap; gap: var(--pd-joint); }
@media (min-width: 768px) { .pd-aroof__course:nth-child(even) { padding-left: calc((176px + var(--pd-joint)) / 2); } }
.pd-aslate { display: block; flex: none; width: 176px; height: 112px; color: var(--app-text); }
.pd-aslate > .pd-slate { display: block; height: 100%; }
.pd-aslate .pd-slate__in { display: flex; flex-direction: column; padding: 14px 16px 14px; }
.pd-aslate .pd-slate__in > .pd-ic { width: 20px; height: 20px; color: var(--app-text-2); margin-bottom: auto; }
.pd-aslate .pd-slate__title { font: 600 15px/22px var(--pd-font-text); }
.pd-aslate .pd-slate__data { margin-top: 0; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; text-wrap: balance; }
@media (hover: hover) { .pd-aslate:hover .pd-slate--app > .pd-slate__in { background: var(--app-hover); } }
.pd-aslate:active .pd-slate--app > .pd-slate__in { background: var(--app-selected); }
/* phone: two columns; the icon sits before the label so a two-line live line still fits in 96 */
@media (max-width: 767px) {
  .pd-aroof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-aroof__course { display: contents; }
  .pd-aslate { width: auto; height: 96px; }
  .pd-aslate .pd-slate__in { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--pd-s-1); align-content: center; padding: 10px 12px 12px; }
  .pd-aslate .pd-slate__in > .pd-ic { margin: 1px 0 0; }
  .pd-aslate .pd-slate__data { grid-column: 2; }
}

/* ---------- 14. Page structure inside the content ---------- */
.pd-main { padding: var(--pd-pad); min-width: 0; }
.pd-main > .pd-offline { margin-bottom: var(--pd-s-3); }   /* the shell puts it first in the content: it keeps its distance from the page head */
.pd-stack { display: flex; flex-direction: column; gap: var(--pd-s-2); min-width: 0; }
.pd-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--pd-s-2) var(--pd-s-3); margin-bottom: var(--pd-s-1); }
.pd-head__text { flex: 1 1 320px; min-width: 0; }
.pd-head__text > .pd-sub { margin-top: 2px; }
.pd-head__acts { display: flex; align-items: center; gap: var(--pd-s-1); flex-wrap: wrap; }
.pd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pd-s-2); align-items: start; }
.pd-grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .pd-span-3 { grid-column: span 3; } .pd-span-4 { grid-column: span 4; } .pd-span-5 { grid-column: span 5; } .pd-span-6 { grid-column: span 6; }
  .pd-span-7 { grid-column: span 7; } .pd-span-8 { grid-column: span 8; } .pd-span-9 { grid-column: span 9; } .pd-span-12 { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pd-app { --pd-pad: var(--pd-s-2); }
  .pd-h1 { font-size: 24px; line-height: 30px; }
  .pd-head { align-items: stretch; flex-direction: column; gap: var(--pd-s-2); }
  .pd-head__text { flex: none; }
  .pd-head__acts > .pd-btn { flex: 1 1 0; padding: 0 var(--pd-s-1); }
  .pd-dialog__foot { justify-content: stretch; }
  /* the search list on a phone: one rhythm, the subtitle always on the line under the label */
  .pd-cmd__label { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* two header buttons side by side at 360 (P01): the words keep their room, the leading icon steps aside */
@media (max-width: 419px) { .pd-head__acts > .pd-btn:not(.pd-btn--icon) > .pd-ic:first-child { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pd-pop.is-in, .pd-pop.is-out, .pd-dialog, .pd-dialog.is-out, .pd-sheet, .pd-sheet.is-out, .pd-toast, .pd-toast.is-out { animation-name: pd-fade; }
  .pd-dialog.is-out, .pd-sheet.is-out, .pd-toast.is-out, .pd-pop.is-out { animation-name: pd-fade-out; }
  .pd-grow .pd-bar, .pd-grow .pd-split > i, .pd-grow .pd-meter__fill { animation: none; }
}