/* Yoda Bill components. Every value comes from tokens.css. */

/* ---------- Logo ---------- */
.yb-logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--yb-logo-size, 28px) * 0.36);
  color: var(--yb-text);
  text-decoration: none;
}

.yb-logo__mark {
  flex: none;
}

.yb-logo__wordmark {
  font-size: calc(var(--yb-logo-size, 28px) * 0.72);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

a.yb-logo:hover {
  color: var(--yb-text);
}

/* ---------- Perforation (signature motif) ---------- */
.yb-perforation {
  --yb-perforation-color: var(--yb-border-strong);
  position: relative;
  display: flex;
  align-items: center;
  height: 16px;
  background: radial-gradient(circle, var(--yb-perforation-color) var(--yb-perforation-dot), transparent calc(var(--yb-perforation-dot) + 0.5px)) 0 50% / var(--yb-perforation-gap) 8px repeat-x;
}

.yb-perforation__scissors.mud-icon-root {
  position: relative;
  left: var(--yb-space-4);
  padding: 0 4px;
  background: var(--yb-bg);
  color: var(--yb-text-muted);
  font-size: 16px;
  box-sizing: content-box;
  transform: rotate(-90deg) scaleX(-1);
}

/* ---------- Page header ---------- */
.yb-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-2);
}

.yb-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
  font-weight: var(--yb-weight-medium);
}

.yb-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--yb-text-muted);
}

.yb-breadcrumbs li > span {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yb-breadcrumbs a {
  color: var(--yb-text-muted);
  text-decoration: none;
}

.yb-breadcrumbs a:hover {
  color: var(--yb-text);
  text-decoration: underline;
}

.yb-breadcrumbs__sep.mud-icon-root {
  margin: 0 2px;
  color: var(--yb-text-disabled);
  font-size: 16px;
}

.yb-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--yb-space-3) var(--yb-space-6);
}

.yb-page-header__heading {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: var(--yb-space-1);
  min-width: 0;
}

.yb-page-header__title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-2) var(--yb-space-3);
}

.yb-page-header__title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.yb-page-header__title:focus {
  outline: none;
}

.yb-page-header__subtitle {
  color: var(--yb-text-muted);
}

/* A link of the subtitle (e.g. the client of a document → its record). */
.yb-page-header__subtitle a {
  color: var(--yb-primary);
  font-weight: var(--yb-weight-medium);
  text-decoration: none;
}

.yb-page-header__subtitle a:hover {
  color: var(--yb-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.yb-page-header__subtitle a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--yb-focus);
  outline-offset: 2px;
}

.yb-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-2);
}

/* Phone (ux-guidelines §2): the actions take a row of their own under the sentence; the main (filled) action fills it,
   the « ⋯ » and an outlined action keep their size — never a lone button stuck to the left. */
@media (max-width: 767.98px) {
  .yb-page-header__actions {
    width: 100%;
  }

  .yb-page-header__actions > .mud-button-filled,
  .yb-page-header__actions > .yb-file-button--filled {
    flex: 1 1 auto;
  }
}

/* ---------- Panel ---------- */
.yb-panel {
  min-width: 0;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-md);
  background: var(--yb-surface);
}

.yb-panel__header {
  display: flex;
  align-items: center;
  gap: var(--yb-space-2);
  min-height: 52px;
  padding: var(--yb-space-2) var(--yb-space-3) var(--yb-space-2) var(--yb-space-5);
  border-bottom: 1px solid var(--yb-border);
}

.yb-panel__title {
  font-size: var(--yb-text-title-3);
  line-height: var(--yb-leading-title-3);
  font-weight: var(--yb-weight-title-3);
}

.yb-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--yb-radius-pill);
  background: var(--yb-accent);
  color: var(--yb-on-accent);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-strong);
  font-variant-numeric: tabular-nums;
}

/* Centred on the header line: a text (the period of the chart) beside a « ⋯ » button does not cling to the top. */
.yb-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--yb-space-2);
  margin-left: auto;
}

.yb-panel__body {
  padding: var(--yb-space-5);
}

.yb-panel__body--flush {
  padding: 0;
}

.yb-panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-3);
  padding: var(--yb-space-3) var(--yb-space-4);
  border-bottom: 1px solid var(--yb-border);
}

/* ---------- Key figures ---------- */
.yb-stat {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-1);
  min-width: 0;
  padding: var(--yb-space-5);
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-md);
  background: var(--yb-surface);
}

.yb-stat__label {
  color: var(--yb-text-muted);
  font-weight: var(--yb-weight-medium);
}

.yb-stat__value {
  margin-top: var(--yb-space-1);
  white-space: nowrap;
}

.yb-stat--danger .yb-stat__value .yb-money__amount {
  color: var(--yb-error);
}

.yb-stat--attention .yb-stat__label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--yb-space-2);
  border-radius: 50%;
  background: var(--yb-accent);
}

.yb-stat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-1) var(--yb-space-2);
  min-height: var(--yb-leading-caption);
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
}

/* A caption may take two lines (« contre CHF 641.05 à la même date le mois dernier »): cut, it hid what the figure is
   compared with (audit UX). The strip's subgrid keeps the amounts aligned. */
.yb-stat__caption {
  overflow-wrap: anywhere;
}

.yb-stat__link {
  align-self: flex-start;
  margin-top: var(--yb-space-2);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-strong);
  text-decoration: none;
}

.yb-stat__link:hover {
  text-decoration: underline;
}

/* The fourth row of a key figure when it carries a line of its own (lot 29: the other currencies) and the link. */
.yb-stat__extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.yb-stat__extra .yb-stat__link {
  margin-top: var(--yb-space-1);
}

.yb-stat__skeleton {
  margin: 6px 0 4px;
}

.yb-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: var(--yb-weight-strong);
  font-variant-numeric: tabular-nums;
}

.yb-trend__icon.mud-icon-root {
  font-size: 14px;
}

.yb-trend--good {
  color: var(--yb-success);
}

.yb-trend--bad {
  color: var(--yb-error);
}

/* A strip of key figures: one bordered block divided into cells (no floating cards). */
.yb-stat-strip-host {
  container: stats / inline-size;
}

/* Each cell spans four shared rows (label, value, trend or caption, link) through a subgrid: a label that wraps onto
   two lines ("Encaissé sur l'exercice" in 2 × 2 on a phone) pushes the values of its whole row, which stay aligned. */
.yb-stat-strip {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  overflow: hidden;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-md);
  background: var(--yb-border);
  gap: 1px;
}

.yb-stat-strip > .yb-stat {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: var(--yb-space-1);
  border: 0;
  border-radius: 0;
}

@container stats (max-width: 999px) {
  .yb-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  /* An odd last cell takes the whole row instead of leaving an empty border-coloured cell beside it. */
  .yb-stat-strip > .yb-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@container stats (max-width: 519px) {
  .yb-stat-strip > .yb-stat {
    padding: var(--yb-space-4);
  }

  .yb-stat-strip .yb-money--hero,
  .yb-stat-strip .yb-amount-hero {
    font-size: var(--yb-text-amount-compact);
    line-height: var(--yb-leading-amount-compact);
  }

  .yb-stat-strip .yb-stat__caption {
    white-space: normal;
  }
}

/* ---------- Status chip ---------- */
.yb-status {
  --yb-status-fg: var(--yb-status-neutral-fg);
  --yb-status-bg: var(--yb-status-neutral-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 100%;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--yb-radius-pill);
  background: var(--yb-status-bg);
  color: var(--yb-status-fg);
  font-size: var(--yb-text-caption);
  line-height: 1;
  font-weight: var(--yb-weight-strong);
  white-space: nowrap;
  vertical-align: middle;
}

.yb-status--small {
  height: 20px;
  padding: 0 7px;
  font-size: 0.75rem;
}

.yb-status__extra {
  font-weight: var(--yb-weight-medium);
  font-variant-numeric: tabular-nums;
}

.yb-status--struck .yb-status__label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.yb-status--dashed {
  border: 1px dashed var(--yb-status-fg);
  background: transparent;
}

.yb-status__progress {
  position: absolute;
  right: 9px;
  bottom: 3px;
  left: 9px;
  height: 2px;
  border-radius: var(--yb-radius-pill);
  background: color-mix(in srgb, var(--yb-status-fg) 22%, transparent);
}

.yb-status__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--yb-status-fg);
}

.yb-status:has(.yb-status__progress) {
  padding-bottom: 3px;
}

.yb-status--violet { --yb-status-fg: var(--yb-status-violet-fg); --yb-status-bg: var(--yb-status-violet-bg); }
.yb-status--blue { --yb-status-fg: var(--yb-status-blue-fg); --yb-status-bg: var(--yb-status-blue-bg); }
.yb-status--green { --yb-status-fg: var(--yb-status-green-fg); --yb-status-bg: var(--yb-status-green-bg); }
.yb-status--petrol { --yb-status-fg: var(--yb-status-petrol-fg); --yb-status-bg: var(--yb-status-petrol-bg); }
.yb-status--red { --yb-status-fg: var(--yb-status-red-fg); --yb-status-bg: var(--yb-status-red-bg); }
.yb-status--amber { --yb-status-fg: var(--yb-status-amber-fg); --yb-status-bg: var(--yb-status-amber-bg); }
.yb-status--orange { --yb-status-fg: var(--yb-status-orange-fg); --yb-status-bg: var(--yb-status-orange-bg); }
.yb-status--bordeaux { --yb-status-fg: var(--yb-status-bordeaux-fg); --yb-status-bg: var(--yb-status-bordeaux-bg); }

/* ---------- Amounts ---------- */
.yb-money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.yb-money__currency {
  color: var(--yb-text-muted);
  font-size: 0.86em;
  font-weight: var(--yb-weight-medium);
}

.yb-money__amount {
  font-weight: var(--yb-weight-medium);
}

.yb-money--small {
  font-size: var(--yb-text-caption);
}

.yb-money--large {
  font-size: var(--yb-text-title-2);
  letter-spacing: -0.01em;
}

.yb-money--large .yb-money__amount,
.yb-money--hero .yb-money__amount {
  font-weight: var(--yb-weight-strong);
}

.yb-money--hero {
  font-size: var(--yb-text-amount-hero);
  line-height: var(--yb-leading-amount-hero);
  letter-spacing: -0.02em;
}

.yb-money--hero .yb-money__currency {
  margin-right: 0.1em;
  font-size: 0.5em;
  font-weight: var(--yb-weight-strong);
  letter-spacing: 0;
  vertical-align: 0.6em;
}

.yb-money--negative .yb-money__amount,
.yb-money--negative .yb-money__currency {
  color: var(--yb-error);
}

.yb-money--positive .yb-money__amount {
  color: var(--yb-success);
}

.yb-money--muted .yb-money__amount {
  color: var(--yb-text-muted);
}

.yb-money--strike .yb-money__amount {
  text-decoration: line-through;
  text-decoration-color: var(--yb-text-muted);
}

/* ---------- Empty states and illustrations ---------- */
.yb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yb-space-2);
  padding: var(--yb-space-10) var(--yb-space-6);
  text-align: center;
}

.yb-empty--compact {
  padding: var(--yb-space-6) var(--yb-space-4);
}

.yb-empty--page {
  padding: var(--yb-space-16) var(--yb-space-6);
}

.yb-empty__art {
  margin-bottom: var(--yb-space-3);
}

.yb-empty__title {
  font-size: var(--yb-text-title-2);
  line-height: var(--yb-leading-title-2);
  font-weight: var(--yb-weight-title-2);
  letter-spacing: var(--yb-tracking-title-2);
}

.yb-empty--compact .yb-empty__title {
  font-size: var(--yb-text-title-3);
  line-height: var(--yb-leading-title-3);
}

.yb-empty__text {
  max-width: 46ch;
  color: var(--yb-text-muted);
}

.yb-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--yb-space-2);
  margin-top: var(--yb-space-4);
}

.yb-illu {
  max-width: 100%;
  height: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.yb-illu .s { stroke: var(--yb-illu-stroke); }
.yb-illu .p { fill: var(--yb-illu-paper); }
.yb-illu .f { fill: var(--yb-illu-fill); }
.yb-illu .h { fill: var(--yb-illu-shade); }
.yb-illu .d { stroke-dasharray: 2 5; opacity: 0.55; }
.yb-illu .dots { stroke-dasharray: 0.01 6; stroke-width: 2.5; }

/* ---------- Address ---------- */
.yb-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  line-height: var(--yb-leading-body);
}

.yb-address__name {
  font-weight: var(--yb-weight-strong);
  overflow-wrap: anywhere;
}

.yb-address__contact {
  margin-top: var(--yb-space-1);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.yb-address__contact + .yb-address__contact {
  margin-top: 0;
}

.yb-address--compact {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yb-address--compact .yb-address__name::after {
  content: ", ";
  font-weight: var(--yb-weight-regular);
}

.yb-address--compact .yb-address__line {
  color: var(--yb-text-muted);
}

/* ---------- Filter chips ---------- */
.yb-filter-bar {
  display: flex;
  gap: var(--yb-space-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* A few tabs (not filters) wrap on a phone rather than hide the last one off screen (audit UX, page 10). */
@media (max-width: 767.98px) {
  .yb-filter-bar--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.yb-filter-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-sm);
  background: var(--yb-surface);
  color: var(--yb-text-muted);
  font: inherit;
  font-weight: var(--yb-weight-medium);
  cursor: pointer;
  transition: border-color var(--yb-duration-fast) var(--yb-ease), background-color var(--yb-duration-fast) var(--yb-ease);
}

.yb-filter-chip:hover {
  border-color: var(--yb-border-strong);
  color: var(--yb-text);
}

.yb-filter-chip--selected,
.yb-filter-chip--selected:hover {
  border-color: var(--yb-text);
  background: var(--yb-text);
  color: var(--yb-bg);
}

.yb-filter-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yb-dot);
}

.yb-filter-chip--selected .yb-filter-chip__dot {
  box-shadow: 0 0 0 1.5px var(--yb-bg);
}

.yb-filter-chip__count {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

/* ---------- Search bar ---------- */
.yb-search-bar {
  max-width: 320px;
}

/* One clear button only: the one of the field, not the browser's own on a search input. */
.yb-search-bar input[type="search"]::-webkit-search-cancel-button,
.yb-search-bar input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- Skeletons ---------- */
/* The tracks (one per column) come from the component. */
.yb-skeleton-table__row {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr 1fr 1fr;
  align-items: center;
  gap: var(--yb-space-6);
  height: var(--yb-row-height);
  padding: 0 var(--yb-space-4);
  border-bottom: 1px solid var(--yb-border);
}

.yb-skeleton-table__head {
  height: var(--yb-row-head-height);
  background: var(--yb-bg-sunken);
}

.yb-skeleton-table__row:last-child {
  border-bottom: 0;
}

.yb-skeleton-cards {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-3);
}

.yb-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-2);
  padding: var(--yb-space-4) var(--yb-space-4) 0;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-md);
  background: var(--yb-surface);
}

.yb-skeleton-card__stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin: var(--yb-space-1) calc(-1 * var(--yb-space-4)) 0;
  padding: 0 var(--yb-space-4);
  border-top: 1px dashed var(--yb-border-strong);
}

.yb-skeleton-pill.mud-skeleton {
  border-radius: var(--yb-radius-pill);
}

.yb-skeleton-form {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-5);
}

.yb-skeleton-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-2);
}

/* ---------- The "Payé" stamp: the one moment of delight (DESIGN §6) ----------
   In components.css: the issued document and the home page of the public site. Laid over the first page of the preview (PdfPreview FirstPageOverlay) and sized in cqw, i.e. in % of the page width:
   it keeps its place on the paper at every zoom and screen size, right of the document title, between the address
   window and the title or intro text (the invoice layout is fixed: window 50–90 mm, title below it; checked with a
   six-line address and an intro text). Everything inside is in em of the word, so --yb-stamp-size scales the whole
   stamp (34px out of a page, e.g. in the style guide). */
.yb-paid-stamp {
  --yb-stamp-size: max(10px, 2.7cqw);
  position: absolute;
  top: 41cqw;
  right: 10cqw;
  z-index: 2;
  font-size: var(--yb-stamp-size);
  pointer-events: none;
  transform: rotate(-11deg);
}

.yb-paid-stamp__ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3em 0.76em 0.24em;
  border: max(3px, 0.12em) double var(--yb-accent);
  border-radius: 0.41em;
  background: color-mix(in srgb, var(--yb-accent-soft) 70%, transparent);
  color: var(--yb-on-accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--yb-accent) 40%, transparent);
}

.yb-paid-stamp__word {
  font-size: 1em;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yb-paid-stamp__date {
  margin-top: 0.12em;
  font-size: 0.37em;
  font-weight: var(--yb-weight-strong);
  letter-spacing: 0.04em;
}

.yb-paid-stamp--press {
  animation: yb-paid-stamp-press 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

@keyframes yb-paid-stamp-press {
  0% {
    opacity: 0;
    transform: rotate(-24deg) scale(1.9);
  }

  55% {
    opacity: 1;
    transform: rotate(-9deg) scale(0.92);
  }

  75% {
    transform: rotate(-12deg) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: rotate(-11deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yb-paid-stamp--press {
    animation: none !important;
  }
}

/* ---------- Document card (mobile lists): body + perforated stub ---------- */
.yb-doc-cards {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-3);
}

.yb-doc-card {
  --yb-stub: 44px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-md);
  background: var(--yb-surface);
  color: var(--yb-text);
  text-decoration: none;
  -webkit-mask:
    radial-gradient(circle 7px at 0 calc(100% - var(--yb-stub)), transparent 6.5px, #000 7px) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% calc(100% - var(--yb-stub)), transparent 6.5px, #000 7px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 7px at 0 calc(100% - var(--yb-stub)), transparent 6.5px, #000 7px) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% calc(100% - var(--yb-stub)), transparent 6.5px, #000 7px) right / 51% 100% no-repeat;
}

.yb-doc-card:hover {
  border-color: var(--yb-border-strong);
  color: var(--yb-text);
}

.yb-doc-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yb-space-3);
  padding: var(--yb-space-4);
}

/* The client is the main name of the card: two lines rather than cut (ux-guidelines §8). */
.yb-doc-card__party {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  font-weight: var(--yb-weight-strong);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.yb-doc-card__amount {
  flex: none;
}

.yb-doc-card__amount .yb-money__amount {
  font-weight: var(--yb-weight-strong);
}

.yb-doc-card__stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yb-space-3);
  height: var(--yb-stub);
  margin: 0 10px;
  padding: 0 6px;
  background: radial-gradient(circle, var(--yb-border-strong) 1.5px, transparent 2px) 0 0 / 7px 4px repeat-x;
}

.yb-doc-card__meta {
  display: flex;
  gap: var(--yb-space-3);
  min-width: 0;
  overflow: hidden;
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  white-space: nowrap;
}

.yb-doc-card__date {
  overflow: hidden;
  text-overflow: ellipsis;
}

.yb-doc-card__stub .yb-status {
  flex: none;
}

.yb-doc-card__number {
  color: var(--yb-text);
  font-weight: var(--yb-weight-medium);
}

/* ---------- Tables (MudTable / MudDataGrid content) ---------- */
.yb-table.mud-table,
.yb-grid.mud-table {
  border-radius: 0 0 var(--yb-radius-md) var(--yb-radius-md);
  background: transparent;
}

.yb-table .mud-table-container {
  border-radius: 0 0 var(--yb-radius-md) var(--yb-radius-md);
}

.yb-cell-amount,
.mud-table-cell.yb-cell-amount,
th.yb-cell-amount {
  text-align: right !important;
}

th.yb-cell-amount .column-header {
  justify-content: flex-end;
}

.mud-table-cell.yb-cell-amount .yb-money__amount {
  font-weight: var(--yb-weight-strong);
}

.mud-table-cell.yb-cell-amount,
.mud-table-cell.yb-cell-status {
  width: 1%;
  white-space: nowrap;
}

.mud-table-cell.yb-cell-number {
  width: 1%;
  color: var(--yb-text);
  font-weight: var(--yb-weight-medium);
  white-space: nowrap;
}

.mud-table-cell.yb-cell-date {
  width: 1%;
  color: var(--yb-text-muted);
  white-space: nowrap;
}

.mud-table-cell.yb-cell-client {
  max-width: 0;
  width: 100%;
}

.yb-cell-client__name {
  display: block;
  overflow: hidden;
  color: var(--yb-text);
  font-weight: var(--yb-weight-medium);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yb-cell-client__name:hover {
  color: var(--yb-primary);
  text-decoration: underline;
}

.yb-cell-client__city {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
}

.mud-table-cell.yb-cell-client-grid {
  max-width: 280px;
}

.mud-table-cell.yb-cell-actions {
  width: 1%;
  padding-right: var(--yb-space-2) !important;
  text-align: right;
}

/* Lists drop secondary columns when their container gets narrow (tablets, side panels). */
.yb-table-host {
  container: table / inline-size;
}

@container table (max-width: 720px) {
  .yb-col-optional {
    display: none;
  }
}

.yb-row--overdue .yb-cell-date {
  color: var(--yb-error) !important;
  font-weight: var(--yb-weight-medium);
}

/* Row actions appear on hover/focus on pointer devices. */
@media (hover: hover) and (pointer: fine) {
  .mud-table-row .yb-action-menu {
    opacity: 0;
    transition: opacity var(--yb-duration-fast) var(--yb-ease);
  }

  .mud-table-row:hover .yb-action-menu,
  .mud-table-row:focus-within .yb-action-menu {
    opacity: 1;
  }
}

/* ---------- To-do list (dashboard) ---------- */
.yb-todo {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yb-todo__item {
  --yb-todo-fg: var(--yb-status-neutral-fg);
  --yb-todo-bg: var(--yb-status-neutral-bg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon text amount"
    "icon text action";
  align-items: center;
  gap: 2px var(--yb-space-3);
  padding: var(--yb-space-3) var(--yb-space-4) var(--yb-space-3) var(--yb-space-5);
  border-bottom: 1px solid var(--yb-border);
}

.yb-todo__item:last-child {
  border-bottom: 0;
}

.yb-todo__item--danger { --yb-todo-fg: var(--yb-status-red-fg); --yb-todo-bg: var(--yb-status-red-bg); }
.yb-todo__item--warning { --yb-todo-fg: var(--yb-status-amber-fg); --yb-todo-bg: var(--yb-status-amber-bg); }
.yb-todo__item--violet { --yb-todo-fg: var(--yb-status-violet-fg); --yb-todo-bg: var(--yb-status-violet-bg); }
.yb-todo__item--todo { --yb-todo-fg: var(--yb-on-accent-soft); --yb-todo-bg: var(--yb-accent-soft); }

.yb-todo__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--yb-radius-sm);
  background: var(--yb-todo-bg);
  color: var(--yb-todo-fg);
}

.yb-todo__icon .mud-icon-root {
  font-size: var(--yb-icon-size);
}

.yb-todo__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yb-todo__title {
  overflow: hidden;
  color: var(--yb-text);
  font-weight: var(--yb-weight-medium);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yb-todo__title:hover {
  color: var(--yb-primary);
  text-decoration: underline;
}

/* A title that opens its document over the dashboard (owner's rule of 2026-11-07): a button that reads like the link. */
button.yb-todo__title {
  /* Not the button's own flex box: a long name goes on two lines then is cut at its end (« … »), never centred and cut
     on both sides. */
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--yb-weight-medium);
  text-align: left;
  cursor: pointer;
}

/* Two lines rather than « en retard de 65 jo… » (ux-guidelines §8): the delay is the point of the line. */
.yb-todo__meta {
  display: -webkit-box;
  overflow: hidden;
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.yb-todo__amount {
  grid-area: amount;
  justify-self: end;
}

.yb-todo__action {
  grid-area: action;
  justify-self: end;
}

.yb-todo__item:not(:has(.yb-todo__amount)) .yb-todo__action {
  grid-row: 1 / span 2;
}

/* ---------- Drop zone ---------- */
.yb-dropzone-host {
  position: relative;
  width: 100%;
}

.yb-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yb-space-1);
  padding: var(--yb-space-8) var(--yb-space-5);
  border: 2px dotted var(--yb-border-strong);
  border-radius: var(--yb-radius-md);
  background: var(--yb-surface);
  text-align: center;
  transition: border-color var(--yb-duration-fast) var(--yb-ease), background-color var(--yb-duration-fast) var(--yb-ease);
}

.yb-dropzone:hover {
  border-color: var(--yb-border-input);
}

.yb-dropzone--dragging {
  border-color: var(--yb-primary);
  background: var(--yb-primary-soft);
}

.yb-dropzone--error {
  border-color: var(--yb-error);
}

.yb-dropzone__icon.mud-icon-root {
  margin-bottom: var(--yb-space-2);
  color: var(--yb-primary);
  font-size: 28px;
}

.yb-dropzone__title {
  font-weight: var(--yb-weight-strong);
}

.yb-dropzone__hint {
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
}

.yb-dropzone__browse {
  position: relative;
  z-index: 11;
  margin-top: var(--yb-space-3) !important;
}

.yb-dropzone__progress {
  width: min(240px, 100%);
  margin-top: var(--yb-space-3);
}

.yb-dropzone__error {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 40ch;
  text-align: left;
  margin-top: var(--yb-space-3);
  color: var(--yb-error);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-medium);
}

/* ---------- PDF preview ---------- */
.yb-pdf {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-md);
  background: var(--yb-surface);
}

.yb-pdf__toolbar {
  display: flex;
  align-items: center;
  gap: var(--yb-space-2);
  min-height: 44px;
  padding: 0 var(--yb-space-2) 0 var(--yb-space-4);
  border-bottom: 1px solid var(--yb-border);
}

.yb-pdf__info {
  flex: 1;
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-medium);
}

.yb-pdf__zoom {
  display: flex;
  align-items: center;
}

.yb-pdf__zoom-value.mud-button-root.mud-button {
  min-width: 56px;
  padding: 0 6px;
}

/* "safe center": a zoomed page wider than the desk starts at its left edge and stays reachable by scrolling. */
/* Fills the viewer below the toolbar: a page shorter than a tall viewer (large screen) lies on the desk, not on a band
   of the viewer's white surface. */
.yb-pdf__desk {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: safe center;
  min-height: 0;
  gap: var(--yb-space-4);
  padding: var(--yb-space-5);
  overflow: auto;
  background: var(--yb-bg-sunken);
}

/* The pages drawn by pdf.js (lot 23); --yb-pdf-fit-max caps the fitted width (wide viewers). */
.yb-pdf__pages {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: safe center;
  gap: var(--yb-space-4);
  position: relative;
  max-width: none;
}

.yb-pdf__pages[hidden] {
  display: none;
}

/* Layer over the first page (FirstPageOverlay): the pages column is as wide as the page, so 1cqw = 1 % of its width,
   at every zoom; it scrolls with the pages and lets clicks and text selection through. */
.yb-pdf__overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  container-type: inline-size;
  pointer-events: none;
}

.yb-pdf__page {
  /* Variables read by the pdf.js text layer (--scale-factor is set per page by the viewer). */
  --total-scale-factor: var(--scale-factor, 1);
  --scale-round-x: 1px;
  --scale-round-y: 1px;
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: 2px;
  background: var(--yb-pdf-paper);
  box-shadow: var(--yb-shadow-sm);
}

/* The canvas fills its page: its pixel size is the CSS size × the device pixel ratio. */
.yb-pdf__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.yb-pdf__page--skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-2);
  max-width: var(--yb-pdf-fit-max, none);
  aspect-ratio: 210 / 297;
  padding: 10%;
  background: var(--yb-surface);
}

/* The pages as one button: thumbnail of the editor's side column, opening the large preview. */
.yb-pdf__pages--button {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

.yb-pdf__sheets {
  display: contents;
}

.yb-pdf__pages--button .yb-pdf__page {
  transition: box-shadow var(--yb-duration-fast) var(--yb-ease);
}

.yb-pdf__pages--button:hover .yb-pdf__page {
  box-shadow: var(--yb-shadow-md), 0 0 0 1px var(--yb-border-strong);
}

.yb-pdf__pages--button:focus-visible {
  outline: 2px solid var(--yb-focus);
  outline-offset: 3px;
}

/* Text layer of pdf.js (rules of its web/pdf_viewer.css, Apache 2.0): transparent text exactly over the drawn glyphs,
   for selection, search and screen readers. */
.yb-pdf__text {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  color-scheme: only light;
  line-height: 1;
  text-align: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
}

.yb-pdf__text :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  user-select: text;
}

.yb-pdf__text > :not(.markedContent),
.yb-pdf__text .markedContent span:not(.markedContent) {
  --font-height: 0;
  --scale-x: 1;
  --rotate: 0deg;
  z-index: 1;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.yb-pdf__text .markedContent {
  display: contents;
}

.yb-pdf__text span[role="img"] {
  cursor: default;
  user-select: none;
}

.yb-pdf__text ::selection {
  background: color-mix(in srgb, var(--yb-focus) 28%, transparent);
  color: transparent;
}

.yb-pdf__text br::selection {
  background: transparent;
}

.yb-pdf__text .endOfContent {
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  display: block;
  cursor: default;
  user-select: none;
}

/* ---------- Marks over a document: where the values of a form were read ----------
   Saffron frames on the paper (light theme, like the proposed fields), in percent of the page: they follow the zoom.
   Slightly larger than the text they frame. The frame of the field being edited stands out with its name; a low
   confidence is dashed in the warning colour; a value changed since is grey. Above the pdf.js text layer. */
.yb-marks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.yb-mark {
  position: absolute;
  box-sizing: content-box;
  margin: -3px 0 0 -3px;
  padding: 3px;
  border-radius: 4px;
  outline: 1.5px solid color-mix(in srgb, var(--yb-accent) 85%, transparent);
  outline-offset: -1.5px;
  background: color-mix(in srgb, var(--yb-accent) 14%, transparent);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--yb-duration-fast) var(--yb-ease), box-shadow var(--yb-duration-fast) var(--yb-ease);
}

.yb-mark:hover {
  background: color-mix(in srgb, var(--yb-accent) 24%, transparent);
}

.yb-mark.is-low {
  outline-style: dashed;
  outline-color: var(--yb-warning);
}

.yb-mark.is-edited {
  outline-style: dashed;
  outline-color: var(--yb-border-strong);
  background: color-mix(in srgb, var(--yb-text) 4%, transparent);
}

.yb-mark.is-active {
  z-index: 1;
  outline-width: 2px;
  outline-offset: -2px;
  background: color-mix(in srgb, var(--yb-accent) 26%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yb-accent) 32%, transparent);
}

.yb-mark.is-edited.is-active {
  background: color-mix(in srgb, var(--yb-text) 8%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yb-text) 12%, transparent);
}

/* The name of the field, above the frame (below it at the top of the page, aligned right near the right edge). */
.yb-mark__tag {
  position: absolute;
  bottom: calc(100% + 5px);
  left: -1px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--yb-accent);
  box-shadow: var(--yb-shadow-sm);
  color: var(--yb-on-accent);
  font: var(--yb-weight-strong) 11px / 16px var(--yb-font);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--yb-duration-fast) var(--yb-ease), transform var(--yb-duration-fast) var(--yb-ease);
  pointer-events: none;
}

.yb-mark.is-below .yb-mark__tag {
  top: calc(100% + 5px);
  bottom: auto;
  transform: translateY(-2px);
}

.yb-mark.is-end .yb-mark__tag {
  right: -1px;
  left: auto;
}

.yb-mark.is-edited .yb-mark__tag {
  background: var(--yb-surface-raised);
  color: var(--yb-text);
}

.yb-mark:hover .yb-mark__tag,
.yb-mark.is-active .yb-mark__tag {
  opacity: 1;
  transform: none;
}

/* ---------- Period picker ---------- */
/* No gap of the column: the (empty) popover anchor after the button would add one below it, and the button would no
   longer line up with the buttons beside it (« Nouvelle facture » of the dashboard). The label keeps its space. */
.yb-period {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.yb-period__label {
  margin-bottom: 6px;
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-medium);
}

.yb-period__button.mud-button-root .mud-button-label {
  gap: var(--yb-space-2);
}

.yb-period__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--yb-space-2);
  white-space: nowrap;
}

.yb-period__button.mud-button-root {
  align-self: flex-start;
}

.yb-period__preset {
  font-weight: var(--yb-weight-strong);
}

.yb-period__dates {
  color: var(--yb-text-muted);
  font-weight: var(--yb-weight-regular);
}

/* Reflow at 320 px (WCAG 1.4.10): the preset and its dates go on two lines rather than widen the page. */
@media (max-width: 359px) {
  .yb-period {
    max-width: 100%;
  }

  .yb-period__value {
    flex-wrap: wrap;
    white-space: normal;
  }
}

.yb-period__panel {
  display: flex;
  gap: var(--yb-space-2);
  padding: var(--yb-space-2);
}

.yb-period__presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  margin: 0;
  padding: 0 var(--yb-space-2) 0 0;
  border-right: 1px solid var(--yb-border);
  list-style: none;
}

.yb-period__preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--yb-radius-sm);
  background: none;
  color: var(--yb-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.yb-period__preset-item:hover {
  background: var(--yb-hover);
}

.yb-period__check.mud-icon-root {
  visibility: hidden;
  color: var(--yb-primary);
  font-size: 18px;
}

.yb-period__preset-item.is-selected {
  background: var(--yb-selected);
  color: var(--yb-on-primary-soft);
  font-weight: var(--yb-weight-strong);
}

.yb-period__preset-item.is-selected .yb-period__check {
  visibility: visible;
}

.yb-period__calendar .mud-picker-static {
  box-shadow: none;
}

@media (max-width: 767px) {
  .yb-period__panel {
    flex-direction: column;
  }

  .yb-period__presets {
    padding: 0 0 var(--yb-space-2);
    border-right: 0;
    border-bottom: 1px solid var(--yb-border);
  }
}

/* ---------- Autocomplete options ---------- */
.yb-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.yb-option--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--yb-space-4);
}

.yb-option__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yb-option__primary {
  font-weight: var(--yb-weight-medium);
}

.yb-option__secondary {
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
}

.yb-option__aside {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 4px;
}

.yb-option--empty {
  padding: var(--yb-space-2) var(--yb-space-3);
  color: var(--yb-text-muted);
}

.yb-option--create {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--yb-space-2);
  min-height: 40px;
  margin-top: 2px;
  padding: 0 var(--yb-space-3);
  border: 0;
  border-top: 1px solid var(--yb-border);
  background: none;
  color: var(--yb-primary);
  font: inherit;
  font-weight: var(--yb-weight-strong);
  text-align: left;
  cursor: pointer;
}

.yb-option--create:hover {
  background: var(--yb-hover);
}

/* ---------- Keyboard shortcut ---------- */
.yb-shortcut {
  display: inline-flex;
  gap: 3px;
}

/* ---------- Confirm dialog ---------- */
.yb-confirm__message {
  max-width: 52ch;
  color: var(--yb-text-muted);
}

/* ---------- SSR fields ---------- */
.yb-checkbox-field {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-1);
}

.yb-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  cursor: pointer;
}

.yb-checkbox__input {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
}

.yb-checkbox__box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--yb-border-input);
  border-radius: 4px;
  background: var(--yb-surface);
  color: var(--yb-on-primary);
  transition: background-color var(--yb-duration-fast) var(--yb-ease), border-color var(--yb-duration-fast) var(--yb-ease);
}

.yb-checkbox__box svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0;
}

.yb-checkbox__input:checked + .yb-checkbox__box {
  border-color: var(--yb-primary);
  background: var(--yb-primary);
}

.yb-checkbox__input:checked + .yb-checkbox__box svg {
  opacity: 1;
}

.yb-checkbox__input:focus-visible + .yb-checkbox__box {
  outline: 2px solid var(--yb-focus);
  outline-offset: 2px;
}

.yb-checkbox__helper {
  padding-left: 28px;
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
}

.yb-checkbox__helper--error,
.yb-ssr-validation {
  color: var(--yb-error);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-medium);
}

.yb-ssr-summary {
  display: flex;
  gap: var(--yb-space-2);
  padding: var(--yb-space-3);
  border-radius: var(--yb-radius-sm);
  background: var(--yb-error-soft);
  color: var(--yb-error);
  font-weight: var(--yb-weight-medium);
}

.yb-ssr-submit.mud-button-root {
  margin-top: var(--yb-space-1);
  cursor: pointer;
}

/* ---------- Error view ---------- */
.yb-error-view__details {
  max-width: 60ch;
  margin-top: var(--yb-space-3);
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  text-align: left;
}

.yb-error-view__details pre {
  white-space: pre-wrap;
}

/* ---------- Native radios and checkboxes ----------
   Plain <input type="radio|checkbox"> (selection columns of the Drive, choices in settings, the recurring editor,
   dialogs) are drawn with the tokens like the MudBlazor and SSR controls, identical in both themes, instead of the
   browser's own widget (which ignored the dark theme for unchecked radios). Specific rules (sizes) still win. */
:where(input[type="radio"], input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input) {
  appearance: none;
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--yb-border-input);
  border-radius: 4px;
  background: var(--yb-surface);
  color: var(--yb-on-primary);
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--yb-duration-fast) var(--yb-ease), border-color var(--yb-duration-fast) var(--yb-ease);
}

:where(input[type="radio"]):not([class*="mud-"], .yb-sr-only) {
  border-radius: 50%;
}

:where(input[type="radio"], input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input)::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  transform: scale(0);
  transition: transform var(--yb-duration-fast) var(--yb-ease);
}

:where(input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input)::before {
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

:where(input[type="radio"]):not([class*="mud-"], .yb-sr-only)::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yb-primary);
}

:where(input[type="radio"], input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):hover:not(:disabled) {
  border-color: var(--yb-primary);
}

:where(input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):is(:checked, :indeterminate) {
  border-color: var(--yb-primary);
  background: var(--yb-primary);
}

:where(input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):indeterminate::before {
  height: 2px;
  clip-path: none;
}

:where(input[type="radio"]):not([class*="mud-"], .yb-sr-only):checked {
  border-color: var(--yb-primary);
}

:where(input[type="radio"], input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):is(:checked, :indeterminate)::before {
  transform: scale(1);
}

:where(input[type="radio"], input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):focus-visible {
  outline: 2px solid var(--yb-focus);
  outline-offset: 2px;
}

:where(input[type="radio"], input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):disabled {
  border-color: var(--yb-text-disabled);
  background: var(--yb-bg-sunken);
  cursor: not-allowed;
}

:where(input[type="checkbox"]):not([class*="mud-"], .yb-sr-only, .yb-checkbox__input):disabled:is(:checked, :indeterminate) {
  background: var(--yb-text-disabled);
}

:where(input[type="radio"]):not([class*="mud-"], .yb-sr-only):disabled::before {
  background: var(--yb-text-disabled);
}

@media (prefers-reduced-motion: reduce) {
  :where(input[type="radio"], input[type="checkbox"])::before {
    transition: none;
  }
}

/* ---------- Snackbar undo ---------- */
.yb-snackbar-undo .mud-snackbar-content-action .mud-button-root {
  color: var(--yb-inverse-accent);
}

/* ---------- Date fields (DateField: MudBlazor's date picker for every date, owner's choice, 2026-10-29) ---------- */
.yb-date {
  min-width: 0;
}

.yb-date .mud-picker,
.yb-date .mud-input-control {
  width: 100%;
  margin: 0;
}

.yb-date .mud-input-adornment-end {
  margin-inline-start: 0;
}

.yb-date .mud-input-adornment .mud-icon-button {
  color: var(--yb-text-muted);
}

/* Paper and cell: the text field itself, as the other fields of the editor (no MudBlazor underline or margins). */
.yb-date--paper .mud-input,
.yb-date--cell .mud-input {
  margin: 0;
  border-radius: 4px;
  color: var(--yb-text);
  font: inherit;
  transition: background-color var(--yb-duration-fast) var(--yb-ease), border-color var(--yb-duration-fast) var(--yb-ease),
    box-shadow var(--yb-duration-fast) var(--yb-ease);
}

.yb-date.yb-date--paper .mud-input .mud-input-slot,
.yb-date.yb-date--cell .mud-input .mud-input-slot {
  box-sizing: border-box;
  height: 30px;
  padding: 4px 6px;
  font: inherit;
  line-height: var(--yb-leading-body);
}

.yb-date--paper .mud-input-slot::placeholder,
.yb-date--cell .mud-input-slot::placeholder {
  color: var(--yb-text-disabled);
  opacity: 1;
}

.yb-date--paper .mud-input-adornment .mud-icon-button,
.yb-date--cell .mud-input-adornment .mud-icon-button {
  padding: 3px;
}

/* A read-only document shows the date as text: no calendar button. */
.yb-date--paper .mud-disabled .mud-input-adornment,
.yb-date--cell .mud-disabled .mud-input-adornment {
  display: none;
}

.yb-date--paper .mud-input.mud-disabled,
.yb-date--paper .mud-input.mud-disabled .mud-input-slot,
.yb-date--cell .mud-input.mud-disabled,
.yb-date--cell .mud-input.mud-disabled .mud-input-slot {
  color: var(--yb-text);
  cursor: default;
}

/* Paper and cell: tinted as the other fields of the editor (owner's choice, 2026-10-29); plain once read-only. */
.yb-date--paper .mud-input:not(.mud-disabled),
.yb-date--cell .mud-input:not(.mud-disabled) {
  background: var(--yb-field-tint);
}

.yb-date--paper .mud-input:hover:not(.mud-disabled) {
  background: var(--yb-field-tint-hover);
}

.yb-date--paper .mud-input:focus-within {
  background: var(--yb-surface);
  box-shadow: inset 0 0 0 1px var(--yb-border-input), 0 0 0 2px color-mix(in srgb, var(--yb-focus) 35%, transparent);
}

.yb-date--paper .mud-input.mud-input-error {
  border-bottom: 2px solid var(--yb-error);
  background: var(--yb-error-soft);
}

/* Cell: as .yb-cell-input. */
.yb-date--cell .mud-input:hover:not(.mud-disabled) {
  background: var(--yb-field-tint-hover);
}

.yb-date--cell .mud-input:focus-within {
  background: var(--yb-surface);
  box-shadow: inset 0 0 0 1px var(--yb-border-input), 0 0 0 2px color-mix(in srgb, var(--yb-focus) 35%, transparent);
}

.yb-date--cell .mud-input.mud-input-error {
  background: var(--yb-error-soft);
  box-shadow: inset 0 0 0 1px var(--yb-error);
}

/* Consent banner (D422, D423, D427), on every page (public site and application): a quiet card at the bottom left; "Accept" is the button, "Decline" a discreet text link. */
.yb-consent {
  --yb-consent-gutter: 24px;
  position: fixed;
  z-index: 1350; /* above the app bar and drawers (MudBlazor 1100–1200), below dialogs and snackbars (1400+) */
  inset-inline-start: var(--yb-consent-gutter);
  inset-block-end: var(--yb-consent-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-4);
  width: min(420px, calc(100vw - 2 * var(--yb-consent-gutter)));
  padding: var(--yb-space-5);
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius-lg);
  background: var(--yb-surface-raised);
  box-shadow: var(--yb-shadow-lg);
  color: var(--yb-text);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .yb-consent {
    --yb-consent-gutter: 16px;
  }
}

.yb-consent[hidden] {
  display: none;
}

.yb-consent__text a {
  color: var(--yb-primary);
  font-weight: var(--yb-weight-strong);
  white-space: nowrap;
}

.yb-consent__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--yb-space-5);
}

.yb-consent__button {
  min-height: 40px;
  padding: 0 var(--yb-space-1);
  border: 0;
  border-radius: var(--yb-radius-sm);
  background: transparent;
  color: var(--yb-text-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.yb-consent__button:hover {
  color: var(--yb-text);
  text-decoration: underline;
}

.yb-consent__button--primary {
  min-width: 140px;
  padding: 0 var(--yb-space-5);
  border: 1px solid var(--yb-primary);
  background: var(--yb-primary);
  color: var(--yb-on-primary);
  font-size: inherit;
  font-weight: var(--yb-weight-strong);
}

.yb-consent__button--primary:hover {
  color: var(--yb-on-primary);
  text-decoration: none;
}

.yb-consent__button--primary:hover {
  border-color: var(--yb-primary-hover);
  background: var(--yb-primary-hover);
}

.yb-consent__button:focus-visible {
  outline: 2px solid var(--yb-focus);
  outline-offset: 2px;
}