/* The shell every page of the application shares, on the brand.
   Values come from public/tokens.css, a checked copy of logos-branding's bible/tokens.css; the rules are
   bible/GUIDE.md's: paper ground, ink text, one action colour (blue), the red only on small labels, one
   rule (ink at 14 %), states (success green, error #b3261e, warning orange and info light blue as grounds
   under ink), Bricolage Grotesque for titles and Figtree for the rest (public/fonts.css), a visible focus,
   and targets of 44 px at least. Icons are Lucide's (ISC, public/icons), at a 2.3 stroke.
   Every selector the pages and their scripts used before is still here: only how it looks has changed. */

:root {
  color-scheme: light;
  /* The names the pages used before, on the brand's values. */
  --ink: var(--logos-ink);
  --muted: var(--logos-ink-soft);
  --line: var(--logos-hairline);
  --paper: var(--logos-paper);
  --card: var(--logos-paper);
  --accent: var(--logos-blue);
  --ok: var(--logos-success);
  --ok-bg: color-mix(in oklab, var(--logos-success) 9%, var(--logos-paper));
  --warn-bg: color-mix(in oklab, var(--logos-warning) 22%, var(--logos-paper));
  --bad: var(--logos-error);
  --bad-bg: color-mix(in oklab, var(--logos-error) 8%, var(--logos-paper));
  --info-bg: color-mix(in oklab, var(--logos-info) 22%, var(--logos-paper));
  --max: 40rem;
}

* { box-sizing: border-box; }
/* What a script hides stays hidden, whatever display a rule of the shell gives it: .tabs a and .rail a are
   flex, which outranked the browser's own [hidden] and left on screen the links site.js hides. */
[hidden] { display: none !important; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--logos-font-text);
  font-size: var(--logos-app-t-body);
  line-height: 1.5;
  color: var(--logos-ink);
  background: var(--logos-paper);
}
::selection { background: var(--logos-selection); color: var(--logos-ink); }
:focus-visible { outline: var(--logos-focus-outline); outline-offset: 3px; border-radius: var(--logos-r-focus); }
a { color: var(--logos-blue); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }

main {
  width: min(var(--max), calc(100% - 2 * var(--logos-app-space-4)));
  margin: 0 auto;
  padding: var(--logos-app-space-5) 0 var(--logos-app-space-6);
}

/* ------------------------------------------------------------------ header */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--logos-app-space-3);
  padding: var(--logos-app-space-2) var(--logos-app-space-4);
  border-bottom: 1px solid var(--logos-hairline);
  background: var(--logos-paper);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--logos-app-target);
  font-family: var(--logos-font-display);
  font-weight: 720;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--logos-ink);
}
/* The flat tomoe: 32 px and less is its size (bible/GUIDE.md, « Le symbole »). */
.brand-mark { width: 28px; height: 28px; flex: none; }

nav { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-2); align-items: center; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-1); }
/* The menu is built after the page loads (public/menu.js): its row is kept, so nothing jumps. */
.tabs[data-menu] { min-height: var(--logos-app-target); }
/* A link set straight in the navigation (scan.html) is a tab too. */
.tabs a, .rail a, nav > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--logos-app-target);
  padding: 0 var(--logos-app-space-4);
  border-radius: var(--logos-r-pill);
  text-decoration: none;
  color: var(--logos-ink);
  font-weight: 600;
  transition: background-color var(--logos-d-fast) var(--logos-ease-out);
}
.tabs a:hover, .rail a:hover, nav > a:hover { background: var(--logos-tint); }
.tabs a.on, .rail a.on { background: var(--logos-ink); color: var(--logos-paper); font-weight: 700; }

/* ----------------------------------------------------------------- buttons */
/* A button is secondary unless it says otherwise: a blue outline on paper (decision of 2026-10-02).
   .primary is the one action: blue, paper text (5.70:1). */
button, .lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--logos-app-target);
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--logos-r-pill);
  background: var(--logos-paper);
  color: var(--logos-button-secondary-ink);
  box-shadow: var(--logos-button-secondary-border);
  font: var(--logos-w-button) var(--logos-app-t-body)/1.2 var(--logos-font-text);
  letter-spacing: var(--logos-track-button);
  cursor: pointer;
  transition: background-color var(--logos-d-fast) var(--logos-ease-out), scale 120ms var(--logos-ease-out);
}
button:hover { background: var(--logos-button-secondary-hover); }
button:active { scale: 0.97; }
button.primary { background: var(--logos-blue); color: var(--logos-paper); box-shadow: none; }
button.primary:hover { background: var(--logos-action-hover); }
button:focus-visible, .lang:focus-visible { outline: none; box-shadow: var(--logos-button-secondary-border), var(--logos-focus-ring); }
button.primary:focus-visible { box-shadow: var(--logos-focus-ring); }
button:disabled { opacity: var(--logos-disabled-opacity); cursor: not-allowed; scale: none; }
/* The language switch is a quiet control beside the navigation, not an action. */
.lang { min-width: var(--logos-app-target); padding: 0 0.6rem; color: var(--logos-ink); box-shadow: inset 0 0 0 1px var(--logos-hairline); font-weight: 600; }
.lang:hover { background: var(--logos-tint); }

/* ------------------------------------------------------------------- titles */
h1, h2, h3 { font-family: var(--logos-font-display); color: var(--logos-ink); text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: var(--logos-app-space-5) 0 var(--logos-app-space-3); }
h2 { font-size: 1.2rem; font-weight: 760; letter-spacing: -0.02em; line-height: 1.2; margin: var(--logos-app-space-5) 0 var(--logos-app-space-2); }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
p { color: var(--logos-ink-soft); margin: 0 0 var(--logos-app-space-3); text-wrap: pretty; }
.lede { color: var(--logos-ink); font-size: 1.05rem; }

ol { padding-left: 1.2rem; color: var(--logos-ink-soft); }
ol li { margin: 0.45rem 0; }

/* Signing out: a quiet button at the foot of a page, under a rule (site.js). Not printed. */
.signout { width: min(var(--max), calc(100% - 2 * var(--logos-app-space-4))); margin: 0 auto var(--logos-app-space-6); padding-top: var(--logos-app-space-2);
  border-top: 1px solid var(--logos-hairline); }
.signout button { padding: 0; background: transparent; box-shadow: none; color: var(--logos-blue); }
.signout button:hover { background: transparent; text-decoration: underline; }
.signout button:focus-visible { box-shadow: var(--logos-focus-ring); }
@media print { .signout { display: none; } }

/* --------------------------------------------------------- message bands */
/* Success, error, warning, information: a light ground of the state's colour under ink text, a mark
   of the colour on the edge, and Lucide's icon. Warning and information are never text colours
   (bible/GUIDE.md: never orange or light blue text on paper). .wait is neutral, with no icon. */
.banner {
  position: relative;
  margin: var(--logos-app-space-4) 0;
  padding: var(--logos-app-space-3) var(--logos-app-space-4) var(--logos-app-space-3) 3rem;
  border-radius: var(--logos-r-field);
  border: 1px solid var(--logos-hairline);
  border-left-width: 4px;
  background: var(--logos-paper);
  color: var(--logos-ink);
  font-weight: 650;
  font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.banner::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: calc(var(--logos-app-space-3) + 0.1em);
  width: 1.4rem;
  height: 1.4rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.banner.ok, .banner.success { --icon: url(/icons/circle-check.svg?v=5d27c304e130); background: var(--ok-bg); border-color: var(--logos-success); }
.banner.ok::before, .banner.success::before { background: var(--logos-success); }
.banner.bad, .banner.error { --icon: url(/icons/circle-x.svg?v=0ccef32ab0ba); background: var(--bad-bg); border-color: var(--logos-error); }
.banner.bad::before, .banner.error::before { background: var(--logos-error); }
.banner.warn, .banner.alert { --icon: url(/icons/triangle-alert.svg?v=7dc063529943); background: var(--warn-bg); border-color: var(--logos-warning); }
.banner.step, .banner.info { --icon: url(/icons/info.svg?v=b160ddf1f665); background: var(--info-bg); border-color: var(--logos-info); }
.banner.wait { padding-left: var(--logos-app-space-4); background: var(--logos-tint); border-left-color: var(--logos-hairline); }
.banner.wait::before { display: none; }

/* ------------------------------------------------------------------ fields */
label { display: block; font-size: var(--logos-t-label); font-weight: var(--logos-w-label); color: var(--logos-ink); margin: var(--logos-app-space-3) 0 var(--logos-app-space-1); }
/* What a field needs said under it: one short line, in soft ink. */
.hint { font-size: var(--logos-app-t-small); color: var(--logos-ink-soft); margin: var(--logos-field-gap) 0 0; }
input, select, textarea {
  width: 100%;
  min-height: var(--logos-app-field);
  padding: var(--logos-field-pad);
  border: 1px solid var(--logos-field-border);
  border-radius: var(--logos-r-field);
  background: var(--logos-paper);
  color: var(--logos-ink);
  font: 400 var(--logos-app-t-body)/1.3 var(--logos-font-text);
  caret-color: var(--logos-blue);
  transition: border-color 140ms var(--logos-ease-out), box-shadow 140ms var(--logos-ease-out);
}
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; accent-color: var(--logos-blue); }
input:hover, select:hover, textarea:hover { border-color: var(--logos-field-border-hover); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--logos-blue); box-shadow: var(--logos-field-focus); border-radius: var(--logos-r-field); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--logos-error); box-shadow: var(--logos-field-error); }
input:disabled, select:disabled, textarea:disabled { opacity: var(--logos-disabled-opacity); cursor: not-allowed; }
/* Read-only is not disabled: full ink, selectable, on the tint, with the rule for a border. */
input[readonly], textarea[readonly] { background: var(--logos-readonly-ground); border-color: var(--logos-readonly-border); }
input::placeholder, textarea::placeholder { color: var(--logos-ink-soft); opacity: 1; }
input[type="color"] { padding: 6px; cursor: pointer; }
input[type="file"] { padding: 4px 6px; cursor: pointer; }
input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: var(--logos-app-space-3);
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--logos-r-pill);
  background: var(--logos-paper);
  color: var(--logos-button-secondary-ink);
  box-shadow: var(--logos-button-secondary-border);
  font: var(--logos-w-button) var(--logos-app-t-small)/1 var(--logos-font-text);
  cursor: pointer;
}

/* A password field keeps an eye inside its right edge. The text stops before it. */
.password-field { position: relative; width: 100%; }
.password-field input { padding-right: calc(var(--logos-app-target) + var(--logos-app-space-2)); }
.password-eye {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--logos-app-target);
  height: var(--logos-app-target);
  min-width: var(--logos-app-target);
  min-height: var(--logos-app-target);
  margin-block: auto;
  padding: 0;
  border-radius: var(--logos-r-field);
  background: var(--logos-paper);
  box-shadow: none;
  color: var(--logos-ink);
}
.password-eye:hover { background: var(--logos-tint); }
.password-eye:focus-visible { outline: none; box-shadow: var(--logos-focus-ring); }
.password-eye svg { display: block; width: 1.25rem; height: 1.25rem; }

.row { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-3); align-items: end; margin-top: var(--logos-app-space-3); }
.row button { flex: 1 1 8rem; }

/* ------------------------------------------------------------------ tables */
/* Headers in Figtree 650, one rule under them, alternate rows on the tint (decision of 2026-10-02). */
table { border-collapse: collapse; }
th { font-family: var(--logos-table-head-font); font-weight: var(--logos-table-head-weight); color: var(--logos-ink); text-align: left; }
.inventory table, .pharmacies table { margin: var(--logos-app-space-2) 0 var(--logos-app-space-4); font-size: 0.9375rem; }
.inventory th, .inventory td, .pharmacies th, .pharmacies td { padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.inventory tr:first-child th, .pharmacies tr:first-child th { border-bottom: var(--logos-table-rule); }
.inventory tr:nth-child(even) td, .pharmacies tr:nth-child(even) td { background: var(--logos-table-row-alt); }
.inventory td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
.inventory details { margin: var(--logos-app-space-2) 0 var(--logos-app-space-4); }
/* A label is display: block above, which outranks the browser's own rule for
   [hidden]: without this, the choice of pharmacy stays on screen when the page
   hides it for an organisation that has only one. */
.inventory label[hidden] { display: none; }

/* The due rule of a colour (069), under its count on the admin page: the form, and the fields it needs. */
.tone .rule, .colour-row .rule {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--logos-app-space-2) var(--logos-app-space-3);
  align-items: end;
}
.tone .rule .field label, .colour-row .rule .field label { margin-top: var(--logos-app-space-2); }
/* The two choices of a colour's due rule say it in words (« minutes après la réception »): wide enough to read whole. */
.colour-row .rule { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* ------------------------------------------------------------ opening hours */
/* The seven days of the admin page of the baskets: the day, whether it is open, and its two times, on
   one line where there is room and stacked on a phone. */
.hours-days { display: grid; gap: var(--logos-app-space-2); margin-top: var(--logos-app-space-3); }
.hours-day {
  display: grid;
  grid-template-columns: 7rem repeat(3, minmax(0, 1fr));
  gap: var(--logos-app-space-2) var(--logos-app-space-3);
  align-items: end;
  margin: 0;
  padding: var(--logos-app-space-2) 0;
  border: 0;
  border-top: 1px solid var(--logos-hairline);
}
.hours-day legend { float: left; padding: 0; align-self: center; font-weight: 650; color: var(--logos-ink); }
.hours-day .field label { margin-top: 0; }
.hours-day .field[hidden] { display: none; }
@media (max-width: 640px) {
  .hours-day { grid-template-columns: 1fr 1fr; }
  .hours-day legend { grid-column: 1 / -1; }
  .hours-day .field:first-of-type { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------- baskets screen */
/* /baskets.html: the scan field and its band in one column, the open baskets beside them on a desk or
   a tablet and under them on a phone. The column stays in view while the board scrolls. A basket is a
   card: the swatch of its colour, its code in Bricolage Grotesque, its due time in tabular figures,
   and its marks. */
main.baskets {
  width: min(76rem, calc(100% - 2 * var(--logos-app-space-4)));
  display: grid;
  gap: var(--logos-app-space-4);
  align-items: start;
}
.baskets #code {
  min-height: 56px;
  padding: 0 var(--logos-app-space-4);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.baskets .banner { margin: var(--logos-app-space-3) 0 0; }
#board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--logos-app-space-2);
  align-content: start;
}
.basket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: var(--logos-app-space-2) var(--logos-app-space-3);
  min-height: 64px;
  padding: var(--logos-app-space-3) var(--logos-app-space-4);
  border: 1px solid var(--logos-hairline);
  border-radius: var(--logos-r-field);
  background: var(--logos-paper);
}
.basket-code {
  font-family: var(--logos-font-display);
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--logos-ink);
}
/* The swatch of the bin's colour, given by the organisation (tenant_colors.hex), ringed so that a white
   or a pale bin still shows. The colour on a card is the bin's and the due time's, nothing else's. */
.basket-chip {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--chip, transparent);
  box-shadow: inset 0 0 0 1px var(--logos-hairline);
}
/* A hue under 3:1 against the paper is ringed in ink (14.89:1): white, yellow, light blue, pink and a few
   more (colour-name.js needsOutline). The same on every swatch. */
.basket-chip.outlined, .swatch-dot.outlined { box-shadow: inset 0 0 0 2px var(--logos-ink); }
/* The swatch and when its colour is due head the card, on a line of their own; the code and its state below. */
.basket-colour { display: flex; align-items: center; gap: 0.4rem; flex-basis: 100%; }
.basket-rule { font-size: 0.875rem; font-weight: 600; color: var(--logos-ink-soft); font-variant-numeric: tabular-nums; }
.swatch-dot {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chip, transparent);
  box-shadow: inset 0 0 0 1px var(--logos-hairline);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Late in the error colour (#b3261e, 6.48:1 on paper); what is left, and how long a basket with no due
   time has been open, in the soft ink (5.51:1). */
.basket-due {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--logos-ink-soft);
}
.basket-due.late { color: var(--logos-error); font-weight: 700; }
/* The characteristics of a basket: a Lucide symbol each, in ink, never a colour of their own (the colour
   on a card is the bin's and the due time's). Their name beside the symbol on a desk or a tablet; on a
   phone the symbol alone, and a touch opens its name. Each is a 44 px target. */
.basket-marks { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-1) var(--logos-app-space-2); flex-basis: 100%; }
.mark {
  min-width: var(--logos-app-target);
  padding: 0 0.75rem 0 0.6rem;
  gap: 0.4rem;
  background: transparent;
  color: var(--logos-ink);
  box-shadow: inset 0 0 0 1px var(--logos-hairline);
  font-weight: 600;
  font-size: 0.9375rem;
}
.mark:hover { background: var(--logos-tint); }
.mark:focus-visible { box-shadow: inset 0 0 0 1px var(--logos-hairline), var(--logos-focus-ring); }
.mark-icon {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.mark-icon[data-icon="message-circle"] { --icon: url(/icons/message-circle.svg?v=cd18fe8fe88c); }
.mark-icon[data-icon="snowflake"] { --icon: url(/icons/snowflake.svg?v=b9d3991eae73); }
.mark-icon[data-icon="flask-conical"] { --icon: url(/icons/flask-conical.svg?v=ab295eb46307); }
.mark-icon[data-icon="truck"] { --icon: url(/icons/truck.svg?v=b6c1ba0fd578); }
.mark-icon[data-icon="lock"] { --icon: url(/icons/lock.svg?v=43366b2fe683); }
.mark-icon[data-icon="circle-help"] { --icon: url(/icons/circle-help.svg?v=ed57a632546b); }
/* The five characteristics on the management page (074): a box, the symbol, the name, whether it is in service. */
.mark-rows { display: grid; gap: var(--logos-app-space-2); margin: var(--logos-app-space-3) 0; }
.mark-row { display: flex; align-items: center; gap: var(--logos-app-space-3); min-height: var(--logos-app-target); padding: var(--logos-app-space-2) var(--logos-app-space-3); border-radius: var(--logos-r-field); background: var(--logos-tint); color: var(--logos-ink); font-weight: 600; cursor: pointer; margin: 0; }
.mark-row input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--logos-ink); }
.mark-row .mark-icon { width: 22px; height: 22px; flex: none; }
.mark-row .mark-state { margin-left: auto; font-weight: 500; color: var(--logos-ink-soft); }
.mark-print .mark-warning { margin: 0 0 var(--logos-app-space-3); }
@media (max-width: 640px) {
  .mark { padding: 0; width: var(--logos-app-target); }
  .mark .mark-name { display: none; }
  .mark[aria-expanded="true"] { width: auto; padding: 0 0.75rem 0 0.6rem; }
  .mark[aria-expanded="true"] .mark-name { display: inline; }
}
@media (min-width: 900px) {
  main.baskets { grid-template-columns: minmax(18rem, 24rem) 1fr; gap: var(--logos-app-space-5); }
  .scan-panel { position: sticky; top: var(--logos-app-space-5); }
}

/* ------------------------------------------------------------------- admin */
.admin {
  width: min(56rem, calc(100% - 2 * var(--logos-app-space-4)));
  margin: 0 auto;
  padding: var(--logos-app-space-5) 0 var(--logos-app-space-6);
}
.admin main { width: auto; margin: 0; padding: 0; }
.rail { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-1); margin-bottom: var(--logos-app-space-4); }
.rung { margin: var(--logos-app-space-3) 0; }
.person { margin: var(--logos-app-space-3) 0; padding: var(--logos-app-space-3) 0; border-top: 1px solid var(--logos-hairline); }
.tone { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--logos-app-space-3); align-items: center; }
.tone input { grid-column: 1 / -1; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-2); margin: var(--logos-app-space-2) 0 var(--logos-app-space-3); }
.swatch {
  width: var(--logos-app-target);
  height: var(--logos-app-target);
  min-height: var(--logos-app-target);
  padding: 0;
  border-radius: var(--logos-r-small);
  box-shadow: inset 0 0 0 2px var(--logos-hairline);
  flex: 0 0 var(--logos-app-target);
}
.swatch.on { box-shadow: inset 0 0 0 2px var(--logos-ink); outline: 2px solid var(--logos-ink); outline-offset: 2px; }
.swatch { background: var(--chip, transparent); }
.swatch.outlined { box-shadow: inset 0 0 0 2px var(--logos-ink); }
/* The palette: one swatch a colour; a colour in use is ringed in ink, and says so to a screen reader
   (aria-pressed), so that the choice never rests on colour alone. */
.palette { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-2); margin: var(--logos-app-space-3) 0 var(--logos-app-space-4); }
.palette .swatch { border-radius: 50%; }
.palette .swatch[aria-pressed="true"] { outline: 3px solid var(--logos-ink); outline-offset: 3px; }
.palette .swatch[aria-pressed="true"]::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background: var(--logos-paper);
  box-shadow: 0 0 0 2px var(--logos-ink);
}
.colour-row { display: block; }
/* The sections of the management page of the baskets, each with its anchor for the setup list. */
.manage-section { scroll-margin-top: var(--logos-app-space-5); padding-top: var(--logos-app-space-2); }
.manage-section + .manage-section { border-top: 1px solid var(--logos-hairline); margin-top: var(--logos-app-space-5); }
.manage-section h3 { font-size: 1.05rem; margin: var(--logos-app-space-5) 0 var(--logos-app-space-2); }
/* The setup list at the head of the page: each step ticked from the data, never by hand; the next one
   said in an information band with a link to its section. */
.setup { margin: var(--logos-app-space-3) 0 var(--logos-app-space-5); }
.setup details { border: 1px solid var(--logos-hairline); border-radius: var(--logos-r-field); padding: 0 var(--logos-app-space-4); }
.setup summary { display: list-item; min-height: var(--logos-app-target); padding: 0.65rem 0; cursor: pointer; font-family: var(--logos-font-display); font-weight: 760; font-size: 1.1rem; line-height: 1.35; }
.setup summary #setup-progress { font-family: var(--logos-font-text); font-weight: 600; font-size: 0.95rem; color: var(--logos-ink-soft); }
.setup-steps { list-style: none; margin: 0 0 var(--logos-app-space-3); padding: 0; display: grid; gap: var(--logos-app-space-2); }
.setup-step { display: flex; align-items: center; gap: var(--logos-app-space-3); min-height: 32px; color: var(--logos-ink); }
.setup-step.todo { color: var(--logos-ink-soft); }
.setup-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--logos-field-border); }
.setup-step.done .setup-mark {
  box-shadow: none;
  background: var(--logos-success);
  -webkit-mask: url(/icons/circle-check.svg?v=5d27c304e130) center / contain no-repeat;
  mask: url(/icons/circle-check.svg?v=5d27c304e130) center / contain no-repeat;
}
.setup-next { margin: 0 0 var(--logos-app-space-4); font-size: 1rem; font-weight: 500; }
.setup-next p { margin: 0 0 var(--logos-app-space-2); color: var(--logos-ink); }
.setup-go { display: inline-flex; align-items: center; min-height: var(--logos-app-target); font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The table of the day: a swatch, and when its baskets fall due today. */
.today-rows { list-style: none; margin: var(--logos-app-space-3) 0; padding: 0; display: grid; gap: var(--logos-app-space-2); }
.today-row { display: flex; align-items: center; gap: var(--logos-app-space-3); min-height: var(--logos-app-target); padding: 0 var(--logos-app-space-3); border-radius: var(--logos-r-field); background: var(--logos-tint); color: var(--logos-ink); font-weight: 600; }
.today-row .swatch-dot { width: 22px; height: 22px; }
.today-empty { color: var(--logos-ink-soft); }
/* The summary of the colours, at the head of the page: a swatch, its letter, its due phrase. */
.summary-row { padding-block: var(--logos-app-space-2); line-height: 1.35; }
.summary-letter { flex: none; min-width: 2ch; font-family: var(--logos-font-display); font-weight: 800; letter-spacing: 0.04em; }
.fleet-stock { margin: var(--logos-app-space-2) 0 0; color: var(--logos-ink-soft); font-variant-numeric: tabular-nums; }
.colour-head { display: flex; align-items: center; gap: var(--logos-app-space-3); }
.colour-head .swatch { pointer-events: none; }
.colour-due { margin: 0; color: var(--logos-ink); font-weight: 600; }
.add-colour { margin: var(--logos-app-space-3) 0 var(--logos-app-space-5); }
.add-colour summary { min-height: var(--logos-app-target); display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--logos-blue); }

/* ------------------------------------------------- printed basket labels */
/* The colours of a sheet of labels are the baskets' own, printed: they stay, under ink text. */
.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--logos-app-space-3);
  margin-top: var(--logos-app-space-4);
}
.label {
  border: 2px solid var(--logos-ink);
  border-radius: var(--logos-r-small);
  padding: 0.8rem 0.5rem;
  text-align: center;
  background: var(--logos-paper);
}
/* A QR code is drawn at five pixels a module and scaled: kept sharp, never smoothed. */
.label img { display: block; margin: 0 auto 0.4rem; image-rendering: pixelated; }
.label .code {
  margin: 0;
  font-family: var(--logos-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--logos-ink);
}
/* A characteristic card prints its symbol and its name under the QR code, never its code. */
.label .mark-icon { display: inline-block; width: 28px; height: 28px; margin: 0 auto 0.2rem; color: var(--logos-ink); }
.label .mark-name { margin: 0; font-family: var(--logos-font-display); font-size: 1.3rem; font-weight: 800; color: var(--logos-ink); }
/* The colour of a label is printed: a browser leaves backgrounds out of a print unless told. */
.label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* A label is tinted with its basket's colour: 22 % of it on white, under ink (9:1 and more, black included). */
.label[style*="--label-tint"] { background: color-mix(in srgb, var(--label-tint) 22%, #ffffff); }
/* « PANIER ROUGE »: the colour of the basket under its code, in the reader's language, in ink. */
/* Under the code: the swatch of the basket's colour and when it is due (« 15 h »), never the colour's name. */
.label .colour { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.2rem 0 0; font-size: 0.75rem; font-weight: 650; color: var(--logos-ink); }

@media print {
  header, .row, .lede, h1, .rail, .admin > aside { display: none; }
  main, .admin { width: 100%; padding: 0; margin: 0; }
  /* A sheet of labels prints alone, across the page: the admin grid would keep it in its narrow first
     column once the rail is hidden, and the forms above it would print with it. */
  .admin { display: block; }
  main:has(> .sheet) > :not(.sheet) { display: none; }
  .manage-section { display: none; }
  .sheet { grid-template-columns: repeat(4, 1fr); margin: 0; }
  .label { break-inside: avoid; }
}

/* Phone: the brand and the language on one line would leave the tabs a line each. The navigation
   takes the full width under the brand, the tabs scroll sideways on one line, the language stays at its end.
   A wide table scrolls inside its own box rather than pushing the page sideways. */
@media (max-width: 640px) {
  header { padding: var(--logos-app-space-2) var(--logos-app-space-3); row-gap: var(--logos-app-space-1); }
  header nav { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; gap: var(--logos-app-space-1); }
  header .tabs { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: auto; }
  header .tabs::-webkit-scrollbar { display: none; }
  header .tabs a { flex: none; padding: 0 var(--logos-app-space-3); }
  header .lang { flex: none; }
  .inventory table, .pharmacies table { display: block; max-width: 100%; overflow-x: auto; }
}

/* A narrow phone: three tabs and the language fit on one line, nothing hides past the edge. */
@media (max-width: 420px) {
  header .tabs a { padding: 0 var(--logos-app-space-2); font-size: 0.95rem; }
  header .lang { min-width: 0; padding: 0 0.45rem; }
}

@media (min-width: 800px) {
  .admin {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--logos-app-space-5);
    padding-top: var(--logos-app-space-6);
  }
  .rail { display: block; margin: 0; }
  .rail a { display: flex; margin: 0 0 var(--logos-app-space-1); }
}

/* Each shift filter keeps its label with its box. Inputs are full width
   everywhere else in this app, so inside a flex row each of the five would take
   a line of its own and the labels would drift onto the line above. The pairs
   sit side by side while there is room and wrap together when there is not. */
#need-filters .field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 8rem; }
#need-filters .field input,
#need-filters .field select { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  button, .tabs a, .rail a, input, select, textarea { transition-duration: var(--logos-d-transition-reduced, 1ms); }
  button:active { scale: none; }
}

/* What the OPQ's register says of a locum pharmacist (staffing, 088). */
.opq { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 13px; line-height: 1.35; }
.opq.ok { background: var(--ok-bg); color: var(--ok); }
.opq.wait { background: var(--warn-bg); color: var(--ink); }
.opq.none { background: var(--bad-bg); color: var(--bad); }

/* A part of Logos: its name and what it does on the left, its switch on the
   right. The row wraps when the screen is too narrow for both. */
.kit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--logos-app-space-3);
}
.kit-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--logos-app-space-3);
}
.kit-copy { flex: 1 1 12rem; min-width: min(12rem, 100%); }
.kit-copy strong { display: block; color: var(--ink); font-weight: 700; }
.kit-copy p { margin: 0; }
.kit-copy .hint { margin-top: var(--logos-field-gap); }
.kit-copy label { margin-top: var(--logos-app-space-3); }
.kit-aside { margin: 0 0 0 auto; flex: none; }
.kit-list > li > .switch { margin-left: auto; }

/* A switch any page can reuse. The checkbox is the track; the knob is a
   gradient, because a checkbox draws no ::before or ::after. Off is a grey
   of the brand, on is the one action colour. The box is at least 44 px. */
input[type="checkbox"].switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: calc(var(--logos-app-target) + var(--logos-app-space-6));
  height: var(--logos-app-target);
  min-width: var(--logos-app-target);
  min-height: var(--logos-app-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--logos-r-pill);
  background-color: var(--logos-grey-26);
  background-image: radial-gradient(circle closest-side, var(--paper) 100%, transparent 100%);
  background-repeat: no-repeat;
  background-size: calc(var(--logos-app-target) - 2 * var(--logos-app-space-1)) calc(var(--logos-app-target) - 2 * var(--logos-app-space-1));
  background-position: var(--logos-app-space-1) center;
  cursor: pointer;
  transition: background-color var(--logos-d-fast) var(--logos-ease-out), background-position var(--logos-d-fast) var(--logos-ease-out);
}
input[type="checkbox"].switch:checked {
  background-color: var(--accent);
  background-position: right var(--logos-app-space-1) center;
}
input[type="checkbox"].switch:focus-visible {
  outline: none;
  box-shadow: var(--logos-focus-ring);
}
input[type="checkbox"].switch:disabled {
  opacity: var(--logos-disabled-opacity);
  cursor: not-allowed;
}

/* The drug page, quiet on purpose: white space instead of boxes, one rule
   between items, the number that matters big and everything else small and
   muted. Blue is the one accent; red says rupture or withdrawn, green says
   covered or up on a year. */
main.drugs { width: min(48rem, calc(100% - 2 * var(--logos-app-space-4))); }
.drugs h2 { margin-top: var(--logos-app-space-6); }
.drugs form .row { display: flex; gap: var(--logos-app-space-2); align-items: stretch; }
.drugs form .row input { flex: 1 1 auto; min-width: 0; }
.drugs #drug-next { margin: var(--logos-app-space-3) 0; }
/* A status line that only tells where things stand is a muted line, not a band. */
.drugs .banner.step, .drugs .banner.wait { padding: 0; background: none; border: 0; color: var(--logos-ink-soft); font-weight: 400; font-size: var(--logos-app-t-small); }
.drugs .banner.step::before { display: none; }

.drug-card { padding: var(--logos-app-space-5) 0; border-bottom: 1px solid var(--logos-hairline); }
.drug-card:last-child { border-bottom: 0; }
.drug-card h2, .drug-card h3 { margin: 0; }
.drug-card h2 { font-size: 1.15rem; font-weight: 760; }
.drug-card p { margin: 0.25rem 0 0; }
.drug-what { font-size: var(--logos-app-t-small); overflow-wrap: anywhere; }

/* Stat tiles: three side by side, stacked on a phone. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--logos-app-space-3); margin: var(--logos-app-space-4) 0 0; }
.stat { display: grid; gap: 0.15rem; padding: var(--logos-app-space-3) var(--logos-app-space-4); border-radius: var(--logos-r-field); background: var(--logos-tint); }
.stat-value { font-family: var(--logos-font-display); font-size: 1.6rem; font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; color: var(--logos-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-label { font-size: var(--logos-app-t-small); color: var(--logos-ink-soft); line-height: 1.3; }
.stats-title { margin: var(--logos-app-space-4) 0 0; font-size: var(--logos-app-t-small); font-weight: 650; color: var(--logos-ink-soft); font-family: var(--logos-font-text); }
@media (max-width: 30rem) {
  .stats { grid-template-columns: 1fr; gap: var(--logos-app-space-2); }
  .stat { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--logos-app-space-3); padding: var(--logos-app-space-2) var(--logos-app-space-3); }
  .stat-value { font-size: 1.35rem; }
}

/* Chips only for what a register says: red for shortage or withdrawn, green for covered. */
.drug-badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--logos-app-space-2); margin: var(--logos-app-space-3) 0 0; padding: 0; }
.drug-badges:empty { display: none; }
.drug-badge { padding: 0.2rem 0.65rem; border-radius: var(--logos-r-pill); font-size: var(--logos-app-t-small); font-weight: 600; color: var(--logos-ink-soft); }
.drug-badge.ok { background: var(--ok-bg); color: var(--logos-success); }
.drug-badge.warn { background: var(--warn-bg); color: var(--logos-ink); }
.drug-badge.bad { background: var(--bad-bg); color: var(--logos-error); }
.drug-badge.none { padding-left: 0; }

/* Alternatives: a compact list of brand · DIN, each a link that searches it. */
.drug-alternatives { margin-top: var(--logos-app-space-4); }
.drug-alternatives h3 { margin: 0 0 var(--logos-app-space-1); font-family: var(--logos-font-text); font-size: var(--logos-app-t-small); font-weight: 650; color: var(--logos-ink-soft); }
.drug-alternatives ul { list-style: none; margin: 0; padding: 0; }
.drug-alternative { min-height: var(--logos-app-target); padding: 0; background: none; box-shadow: none; color: var(--logos-blue); font-weight: 600; text-align: left; justify-content: flex-start; }
.drug-alternative:hover { background: none; text-decoration: underline; }

/* « Voir les patients » on a drug card: a link-like button, shown only where
   the patients section is shown (a demo organisation). */
.drug-patients-link { display: inline-flex; align-items: center; min-height: var(--logos-app-target); margin-top: var(--logos-app-space-2); padding: 0; background: none; box-shadow: none; color: var(--logos-blue); font-weight: 600; text-align: left; justify-content: flex-start; }
.drug-patients-link:hover { background: none; text-decoration: underline; }
/* A card's molecule opens the explorer on it. */
.drug-what .drug-molecule { color: var(--logos-blue); text-decoration: underline; text-underline-offset: 0.2em; }
.drug-patients-product { display: flex; flex-wrap: wrap; align-items: center; gap: var(--logos-app-space-2) var(--logos-app-space-3); margin: 0 0 var(--logos-app-space-2); }
.drug-patients-product p { margin: 0; overflow-wrap: anywhere; }
.drug-patients-product .filter-chip { margin: 0; }
/* « Chercher des patients »: each family on a plain row, its name, then its
   two boxes, « Prend » and « Ne prend pas », which wrap under it on a phone. */
.cohort-families h4 { margin: var(--logos-app-space-4) 0 0; font-size: var(--logos-app-t-small); font-weight: 650; color: var(--logos-ink-soft); }
.cohort-family { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--logos-app-space-3); padding: var(--logos-app-space-2) 0; }
.cohort-family p { flex: 1 1 16rem; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.cohort-ticks { flex: none; display: flex; }
.cohort-ticks .filter-chip { margin: var(--logos-app-space-1) var(--logos-app-space-1) 0 0; }
.cohort-labs h4 { margin: var(--logos-app-space-4) 0 var(--logos-app-space-1); font-size: var(--logos-app-t-small); font-weight: 650; color: var(--logos-ink-soft); }
/* A patient's results: the latest of each test, an abnormal one in the colour of an error. */
.lab-latest li { padding: var(--logos-app-space-1) 0; font-size: var(--logos-app-t-small); overflow-wrap: anywhere; }
.lab-latest li.lab-flag { color: var(--logos-error); font-weight: 650; }
.lab-history summary { min-height: var(--logos-app-target); display: flex; align-items: center; cursor: pointer; color: var(--logos-blue); font-weight: 600; font-size: var(--logos-app-t-small); }
.lab-history li { padding: var(--logos-app-space-1) 0; font-size: var(--logos-app-t-small); overflow-wrap: anywhere; }
/* Scores and renal alerts: a plain list, the tier of an alert in its colour. */
.score-list li, .alert-list li { padding: var(--logos-app-space-2) 0; overflow-wrap: anywhere; }
.score-list p, .alert-list p { margin: 0 0 var(--logos-app-space-1); }
.score-line { font-weight: 650; }
.alert-tier { font-size: var(--logos-app-t-small); font-weight: 700; }
.alert-tier-1 .alert-tier, .alert-tier-1 > .list-row-button { color: var(--logos-error); }
.alert-tier-3 .alert-tier { color: var(--logos-ink-soft); }
.cohort-tools { display: flex; flex-wrap: wrap; gap: 0 var(--logos-app-space-1); margin-top: var(--logos-app-space-3); }

/* « Mes médicaments »: the search of what was sold, its rows as they are
   typed (the product, its molecule, and what was sold of it), and the national
   search folded under them. */
.drug-sold-results { list-style: none; margin: 0; padding: 0; }
.drug-sold-results:empty { display: none; }
.drug-sold-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.1rem var(--logos-app-space-3); }
.drug-sold-figures { margin-left: auto; font-size: var(--logos-app-t-small); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--logos-ink); text-align: right; }
.drugs #drug-sold-next { margin: var(--logos-app-space-3) 0; }
.drug-national { margin-top: var(--logos-app-space-4); }
.drug-national summary { display: inline-flex; align-items: center; min-height: var(--logos-app-target); color: var(--logos-blue); font-weight: 600; cursor: pointer; }

/* The sales explorer: three fields and the button, the other filters behind
   « Plus de filtres », the total as tiles, a chart of two lines, plain rows. */
.explorer-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--logos-app-space-2) var(--logos-app-space-3); margin: 0 0 var(--logos-app-space-3); }
.explorer-form label { display: grid; gap: 0.25rem; min-width: 0; }
.explorer-form select, .explorer-form input { min-width: 0; width: 100%; }
.explorer-form .row { grid-column: 1 / -1; display: flex; gap: var(--logos-app-space-2); }
.explorer-form .row button { flex: none; }
.drugs #explorer-total p { font-size: var(--logos-app-t-small); margin-top: var(--logos-app-space-2); }
.explorer-more { grid-column: 1 / -1; }
.explorer-more summary { display: inline-flex; align-items: center; min-height: var(--logos-app-target); color: var(--logos-blue); font-weight: 600; cursor: pointer; }
.explorer-more-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--logos-app-space-2) var(--logos-app-space-3); }
@media (max-width: 30rem) {
  .explorer-form { grid-template-columns: 1fr 1fr; }
  .explorer-form label:first-child { grid-column: 1 / -1; }
  .explorer-more-fields { grid-template-columns: 1fr; }
}
.explorer-chart { margin: var(--logos-app-space-4) 0; }
/* The legend above the chart: a green swatch for the period, a grey dotted one for the year before. */
.explorer-legend { display: flex; flex-wrap: wrap; gap: var(--logos-app-space-1) var(--logos-app-space-4); margin: 0 0 var(--logos-app-space-2); font-size: var(--logos-app-t-small); color: var(--logos-ink-soft); }
.explorer-key { display: inline-flex; align-items: center; gap: var(--logos-app-space-2); }
.explorer-key::before { content: ""; width: 1.5rem; border-top: 3px solid var(--logos-success); }
.explorer-key.previous::before { border-top: 3px dotted var(--logos-grey-38); }
/* The chart spans the column, 320 px high, 240 px on a phone; its words keep their size. */
.explorer-plot { position: relative; height: 320px; touch-action: pan-y; }
@media (max-width: 640px) { .explorer-plot { height: 240px; } }
.explorer-plot svg { display: block; overflow: visible; }
.explorer-plot svg:focus-visible { outline: var(--logos-focus-outline); outline-offset: 2px; border-radius: var(--logos-r-small); }
.explorer-grid { stroke: var(--logos-hairline); stroke-width: 1; }
.explorer-tick { font-size: 12px; fill: var(--logos-ink-soft); font-variant-numeric: tabular-nums; }
.explorer-partial { font-size: 12px; fill: var(--logos-ink-soft); font-style: italic; }
.explorer-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.explorer-line.current { stroke: var(--logos-success); }
.explorer-line.current.partial { stroke-dasharray: 5 5; opacity: 0.5; }
.explorer-line.previous { stroke: var(--logos-grey-38); stroke-width: 2; stroke-dasharray: 2 4; }
.explorer-cross line { stroke: var(--logos-ink-soft); stroke-width: 1; }
.explorer-cross circle.current { fill: var(--logos-success); stroke: var(--logos-paper); stroke-width: 2; }
.explorer-cross circle.previous { fill: var(--logos-grey-38); stroke: var(--logos-paper); stroke-width: 2; }
/* The tooltip of the crosshair: beside the line, on the side with room. */
.explorer-tip { position: absolute; top: 0; display: grid; gap: 0.1rem; padding: var(--logos-app-space-2) var(--logos-app-space-3); background: var(--logos-paper); border: 1px solid var(--logos-hairline); border-radius: var(--logos-r-small); box-shadow: var(--logos-shadow-card); font-size: var(--logos-app-t-small); white-space: nowrap; pointer-events: none; }
.explorer-tip[hidden] { display: none; }
.explorer-tip .current { color: var(--logos-success); font-weight: 650; }
.explorer-tip .previous { color: var(--logos-ink-soft); }
.explorer-tip .up { color: var(--logos-success); }
.explorer-tip .down { color: var(--logos-error); }

/* A plain row: name and muted line on the left, the amount big on the right;
   the explorer's rows open on a tap, the patients' rows are buttons. */
.list-row { border-bottom: 1px solid var(--logos-hairline); }
.list-row summary { display: flex; align-items: center; justify-content: space-between; gap: var(--logos-app-space-3); min-height: var(--logos-app-row); padding: var(--logos-app-space-3) 0; cursor: pointer; list-style: none; }
.list-row summary::-webkit-details-marker { display: none; }
.list-row summary:hover .list-row-name, .list-row-button:hover { color: var(--logos-blue); }
.list-row-main { display: grid; gap: 0.1rem; min-width: 0; }
.list-row-name { font-weight: 650; color: var(--logos-ink); overflow-wrap: anywhere; }
.list-row-sub { font-size: var(--logos-app-t-small); color: var(--logos-ink-soft); }
.list-row-sub .up { color: var(--logos-success); }
.list-row-sub .down { color: var(--logos-error); }
.list-row-value { flex: none; font-family: var(--logos-font-display); font-size: 1.15rem; font-weight: 760; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--logos-ink); }
.list-row > p { margin: 0 0 var(--logos-app-space-1); font-size: var(--logos-app-t-small); }
.list-row > p:last-child { margin-bottom: var(--logos-app-space-3); }
.list-row-action { margin: 0 0 var(--logos-app-space-3); }
.list-row-button { width: 100%; min-height: var(--logos-app-row); padding: var(--logos-app-space-2) 0; background: none; box-shadow: none; color: var(--logos-ink); font-weight: 650; text-align: left; justify-content: flex-start; border-radius: 0; }
.list-row-button:hover { background: none; }
.list-row > .list-row-button + p { margin-top: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { border-bottom: 1px solid var(--logos-hairline); }
.filter-chip { min-height: var(--logos-app-target); padding: 0 0.9rem; font-size: var(--logos-app-t-small); box-shadow: inset 0 0 0 1px var(--logos-hairline); color: var(--logos-ink); margin: 0 var(--logos-app-space-1) var(--logos-app-space-2) 0; }
.filter-chip[aria-pressed="true"] { background: var(--logos-ink); color: var(--logos-paper); box-shadow: none; }

/* The gate of the demos (/demo, /demo/pharmacie): a band shows only when the
   address names it (#merci, #invalide, #trop, #attendre, #envoi), so the page
   needs no script of its own. A box is beside its words. The form of the code
   replaces the form of the email while the address names one of its bands
   (#code-envoye, #code-refuse). Past the gate, the modules: one open, the
   others to come. */
.on-target { display: none; }
.on-target:target { display: block; }
.demo-gate .gate-code { display: none; }
.demo-gate .gate-code:has(:target) { display: block; }
.demo-gate:has(.gate-code :target) .gate-ask { display: none; }
label.check { display: flex; gap: var(--logos-app-space-3); align-items: flex-start; font-weight: 400; margin-top: var(--logos-app-space-4); }
label.check input { flex: none; margin-top: 0.2rem; }
.demo-modules { list-style: none; padding: 0; display: grid; gap: var(--logos-app-space-3); }
.demo-modules li[aria-disabled="true"] { color: var(--logos-ink-soft); padding: var(--logos-app-space-3) 0; }
.demo-modules .soon { font-size: var(--logos-app-t-small); text-transform: uppercase; letter-spacing: 0.04em; }
.demo-modules a.demo-open { display: inline-flex; align-items: center; min-height: var(--logos-app-target); padding: 0 var(--logos-app-space-4); border-radius: var(--logos-r-field); background: var(--logos-blue); color: var(--logos-paper); font-weight: 650; text-decoration: none; }
.demo-modules a.demo-open:hover { background: var(--logos-action-hover); }
.demo-modules a.demo-open:focus-visible { outline: none; box-shadow: var(--logos-focus-ring); }

/* The patients page: the search box at the top, full width, its label above it. */
#demo-patients-search { display: grid; gap: var(--logos-app-space-1); margin: var(--logos-app-space-3) 0; }
#demo-patients-search input { width: 100%; }
/* A patient as a plain row: the whole row opens the file; the name reads as a link. */
.list-row-link { display: grid; gap: 0.1rem; min-height: var(--logos-app-row); padding: var(--logos-app-space-3) 0; color: var(--logos-ink); text-decoration: none; }
.list-row-link .list-row-name { color: var(--logos-blue); text-decoration: underline; text-underline-offset: 0.2em; }
.list-row-link:hover .list-row-name { color: var(--logos-action-hover); }
.list-row-link:focus-visible { outline: var(--logos-focus-outline); outline-offset: 2px; }
.patient-profile { margin: var(--logos-app-space-4) 0; }
.profile-row { padding: var(--logos-app-space-2) 0; }
.profile-row p { margin: 0; }
/* The history: one block per medication, its latest prescription, the earlier ones folded. */
.med-block { padding: var(--logos-app-space-3) 0; border-top: 1px solid var(--logos-hairline); }
.med-block h4 { margin: 0; overflow-wrap: anywhere; }
.med-class { margin: 0.1rem 0 0; font-size: var(--logos-app-t-small); }
.rx-block { margin-top: var(--logos-app-space-2); }
.rx-block p { margin: 0; overflow-wrap: anywhere; }
.rx-head { color: var(--logos-ink); font-weight: 600; }
.rx-fills { margin: var(--logos-app-space-1) 0 0; padding-left: 1.2rem; color: var(--logos-ink-soft); font-variant-numeric: tabular-nums; }
.rx-fills li { overflow-wrap: anywhere; }
.med-earlier summary { display: inline-flex; align-items: center; min-height: var(--logos-app-target); color: var(--logos-blue); font-weight: 600; cursor: pointer; }