/* ============================================================================
   Pharmatool - the application layer, above the Cordis Design System.

   This is the ONLY stylesheet in this application that may be edited.
   tokens.css and cordis.css are vendored byte-identical from
   cordis-design-system@29855f0 and a change to either belongs upstream, as a
   diff to reference/index.html first. See wwwroot/cordis/README.md.

   There used to be a third vendored file here, fonts.css, holding the
   @font-face rules the system did not ship. It is gone: cordis.css declares
   both IBM Plex faces itself and reaches them as ../fonts/, so a second
   declaration in this application would be a fork of the brand type.

   The rules this file keeps, which are the Design System's own:

     * no hex, no px font size, no duration - every value is a --cordis-* token,
       so a change to the contract still changes this application;
     * no token is redefined here. An application may not fork a token: a value
       that does not exist is either a gap in the system or a wrong
       requirement, and a local override hides which;
     * a cordis- component is used wherever one applies. What is left below is
       genuinely this application's own - a facts table, a report body, a log
       block, the entrance screen - and each one says why it is not a cordis-.

   Class names are prefixed pt- so that a name here can never collide with a
   name the system gains later.
   ========================================================================= */

/* ---------- the shell ----------------------------------------------------- */

/* The rail's foot: who is signed in, and the two preference toggles. Pushed to
   the bottom of the rail because it is the least-used thing on it and the
   navigation should start at the top. Not a cordis- component: the system's
   answer for an account menu is cordis-menupanel, which is the panel's
   appearance only, or CordisContextMenu, which is Blazor and interactive - and
   this site renders statically with no JavaScript at all. Three rows of plain
   markup is the static-rendering shape of the same idea.

   cordis-rail__foot exists now and is close, but it is a flex-none band with a
   top border and no column of its own, so the three rows would still need this
   rule. Kept as ours rather than half-adopted. */
.pt-railfoot {
  margin-top: auto;
  padding: var(--cordis-space-3) var(--cordis-space-4);
  border-top: 1px solid var(--cordis-nav-divider);
  display: flex;
  flex-direction: column;
  gap: var(--cordis-space-2);
}
.pt-railfoot__who {
  display: flex;
  align-items: center;
  gap: var(--cordis-space-2);
  color: var(--cordis-nav-text-muted);
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
  min-width: 0;
}
.pt-railfoot__label { display: block; }
.pt-railfoot__name {
  display: block;
  color: var(--cordis-nav-text-on);
  font-weight: var(--cordis-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-railfoot__toggles { display: flex; gap: var(--cordis-space-2); flex-wrap: wrap; }

/* A button that reads as a rail item. cordis-btn--ghost is the right component on
   a light surface and unreadable on the nav surface, whose text colours are the
   separate --cordis-nav-* set precisely because the ordinary ones fail there. */
.pt-navbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--cordis-space-2);
  height: var(--cordis-nav-item-h);
  padding: 0 var(--cordis-space-3);
  border: 1px solid var(--cordis-nav-divider);
  border-radius: var(--cordis-radius-sm);
  background: transparent;
  color: var(--cordis-nav-text);
  font-family: inherit;
  font-size: var(--cordis-fs-xs);
  font-weight: var(--cordis-fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.pt-navbtn:hover { background: var(--cordis-nav-hover); color: var(--cordis-nav-text-on); }

/* The rail is a <nav> of links; cordis-rail__item styles them but leaves the
   underline an <a> comes with, and an underlined navigation item reads as body
   copy that happens to be blue. */
.cordis-rail a, .cordis-rail a:hover { text-decoration: none; color: inherit; }

/* cordis-rail__group supplies the space between the brand and the first item; the
   first group here has no heading, so the item needs it instead. */
.pt-rail__first { margin-top: var(--cordis-space-3); }

.pt-brand {
  display: flex;
  align-items: center;
  gap: var(--cordis-space-2);
  min-width: 0;
}
.pt-brand img { display: block; height: var(--cordis-space-6); width: auto; flex: none; }

/* The wordmark beside the rail's lock-up: which deployment this is, for a sighted
   reader. Sized off the nav surface's own text colour rather than white, so it
   reads as label text next to the mark instead of a second logo.

   The max-width is what actually stops a long CDS_PRODUCT_NAME widening the
   page, and it is not decoration. nowrap + ellipsis + min-width:0 alone do nothing
   here: below the 900px breakpoint .cordis-rail is a grid item that grows past its
   track, so there is no definite width for a flex child to shrink against and the
   ellipsis never engages - measured at a 375px viewport, a 52-character name took
   the document to 457px against a 375px client width. .cordis-rail is vendored and
   not ours to constrain, so the wordmark is capped instead: at 18ch a long name
   truncates and the document stays at 375, while "Pharmatool" (70px) and "Vibrantz"
   (51px) are nowhere near the cap and render in full. */
.pt-brand__product {
  font-size: var(--cordis-fs-sm);
  line-height: var(--cordis-lh-sm);
  font-weight: var(--cordis-fw-semibold);
  color: var(--cordis-nav-text-on);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 18ch;
}

/* The forms in the rail and in a table cell are wrappers around one control and
   must not become layout of their own. */
.pt-inline { display: inline; margin: 0; }

/* ---------- page furniture ------------------------------------------------ */

/* The closing note most pages carry: what the numbers mean, what the retention
   is, which command to run. cordis-notice is the wrong component - a notice is
   about the state of something now, and this is a standing explanation nobody
   needs to act on. */
.pt-note {
  margin-top: var(--cordis-section-gap);
  padding-top: var(--cordis-space-4);
  border-top: 1px solid var(--cordis-border);
  max-width: 80ch;
  font-size: var(--cordis-fs-sm);
  line-height: var(--cordis-lh-sm);
  color: var(--cordis-text-muted);
}

/* Prose between the page head and the first component. Bounded, because a
   measure of 100+ characters is what makes a wide dashboard unreadable. */
.pt-prose { max-width: 80ch; }
.pt-prose p { margin: var(--cordis-space-3) 0; }

/* A table wrapped so it keeps its own scrollbar. The machines table has eleven
   columns for one of ours and the page body must never scroll sideways. */
.pt-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--cordis-border);
  border-radius: var(--cordis-radius-md);
  background: var(--cordis-surface);
}
.pt-tablewrap .cordis-table { border-radius: var(--cordis-radius-md); }
.pt-tablewrap .cordis-table tr:last-child td { border-bottom: 0; }

/* Two-column label/value. The system has no such component and this is not a
   list of records - it is one record's fields, which is why it is not
   cordis-table with headers along the top. */
.pt-facts {
  width: 100%;
  max-width: 80ch;
  border-collapse: collapse;
  font-size: var(--cordis-fs-body);
}
.pt-facts th {
  width: 14rem;
  padding: var(--cordis-space-2) var(--cordis-space-4) var(--cordis-space-2) 0;
  text-align: left;
  vertical-align: top;
  font-weight: var(--cordis-fw-semibold);
  color: var(--cordis-text-muted);
}
.pt-facts td {
  padding: var(--cordis-space-2) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--cordis-border);
}
.pt-facts tr:last-child td, .pt-facts tr:last-child th { border-bottom: 0; }

/* A row of controls under a form or beside a table. */
.pt-actions {
  display: flex;
  gap: var(--cordis-space-3);
  align-items: center;
  flex-wrap: wrap;
}
.pt-actions--tight { gap: var(--cordis-space-2); }

/* The actions at the end of a table row. Deliberately NOT cordis-table__actions,
   which fades in on hover: these are the only way to disable an account or
   reissue a link, and the system's own rule is that nothing is hover-only below
   900px. A phone has no hover, and neither does a keyboard user scanning down. */
.pt-rowactions { display: flex; gap: var(--cordis-space-1); flex-wrap: wrap; }

/* A link that sits at the end of a cell's content rather than starting it. */
.pt-change { margin-left: var(--cordis-space-2); font-size: var(--cordis-fs-xs); }

/* A whole invite link, or any other long unbroken string, which must wrap
   rather than push the page sideways. */
.pt-code--long { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

.pt-nomargin { margin: 0; }

/* A name or a slug does not need a 34rem input to be typed into. */
.pt-input--narrow { max-width: 20rem; }

/* Vertical rhythm between the blocks inside a page or a card. The system sets
   the gap between page-level sections through --cordis-section-gap and leaves
   what is inside a card to the application. */
.pt-spaced { margin: var(--cordis-space-4) 0 0; }
.pt-section { margin: var(--cordis-section-gap) 0 var(--cordis-space-3); }

/* A short list of links or facts. The browser's own indent is the right amount;
   what it lacks is the line height and the measure. */
.pt-list { margin: var(--cordis-space-3) 0; padding-left: var(--cordis-space-5); max-width: 80ch; }
.pt-list li { margin: var(--cordis-space-1) 0; }

/* The day's token spend, in the page head beside the title. cordis-pagehead__actions
   is a flex row of buttons; this is a small stack of facts sitting in the same
   place, so it only needs the direction changed and the text right-aligned. */
.pt-usage { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }

/* cordis-card__head is a single flex row; these two let the summary line wrap on a
   narrow window and push the verdict pill to the end. */
.pt-cardhead { flex-wrap: wrap; }
.pt-cardhead__end { margin-left: auto; }

/* Stacked form. cordis-field is one field; this is the column they sit in. */
.pt-form { display: flex; flex-direction: column; gap: var(--cordis-space-4); max-width: 34rem; }
.pt-form--wide { max-width: 60rem; }

/* A checkbox or radio with its label beside it, which cordis-check is only half of
   - the system styles the control and leaves the row to the application. */
.pt-choice {
  display: flex;
  gap: var(--cordis-space-3);
  align-items: flex-start;
  padding: var(--cordis-space-1) 0;
  font-size: var(--cordis-fs-sm);
  line-height: var(--cordis-lh-sm);
}
.pt-choice input { margin-top: 2px; }
.pt-choices { display: flex; flex-direction: column; gap: var(--cordis-space-1); }
.pt-choices--indent { padding-left: var(--cordis-space-5); }

/* A group of choices with a heading, as a fieldset - which carries the grouping
   for a screen reader and cannot be replaced by a div with a bold line. */
.pt-group {
  border: 1px solid var(--cordis-border);
  border-radius: var(--cordis-radius-md);
  padding: var(--cordis-space-3) var(--cordis-space-4) var(--cordis-space-4);
  margin: 0;
  min-width: 0;
}
.pt-group > legend {
  padding: 0 var(--cordis-space-2);
  font-size: var(--cordis-fs-caption);
  font-weight: var(--cordis-fw-semibold);
  letter-spacing: var(--cordis-ls-caption);
  text-transform: uppercase;
  color: var(--cordis-text-muted);
}

/* ---------- a verdict inside a sentence ----------------------------------- */

/* cordis-status is a pill with a dot, which is right for a table cell whose whole
   content is a verdict and wrong for one word inside a line of prose. These
   carry the same meaning in the same colours, using the system's *text* tokens
   so they stay legible on the page surface in both themes. Ui/StatusClass.cs is
   the only thing that writes these names. */
.pt-word { font-weight: var(--cordis-fw-semibold); }
.pt-word--ok     { color: var(--cordis-success-text); }
.pt-word--warn   { color: var(--cordis-warning-text); }
.pt-word--danger { color: var(--cordis-danger-text); }

/* ---------- monospace ----------------------------------------------------- */

/* Bucket names, slugs, commands and tokens. Tinted rather than plain so that a
   command in a sentence is visibly a thing to type. */
code, kbd, samp {
  font-family: var(--cordis-font-mono);
  font-size: var(--cordis-fs-xs);
  padding: 1px var(--cordis-space-1);
  border-radius: var(--cordis-radius-sm);
  background: var(--cordis-neutral-soft);
  color: var(--cordis-text);
  overflow-wrap: anywhere;
}

/* A log, a raw record, a stack of line protocol. Scrolls in both directions
   inside its own box: these are machine output and wrapping them at an
   arbitrary column loses the alignment that makes them readable. */
.pt-log {
  margin: var(--cordis-space-3) 0 0;
  padding: var(--cordis-space-3) var(--cordis-space-4);
  border: 1px solid var(--cordis-border);
  border-radius: var(--cordis-radius-sm);
  background: var(--cordis-surface-sunken);
  font-family: var(--cordis-font-mono);
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 30rem;
  overflow: auto;
}

.pt-details > summary {
  cursor: pointer;
  font-size: var(--cordis-fs-sm);
  font-weight: var(--cordis-fw-semibold);
  color: var(--cordis-primary-text);
  padding: var(--cordis-space-1) 0;
}

/* ---------- the report body ----------------------------------------------- */

/* The one page whose content is not ours: a model wrote it, it arrived over the
   network, and MarkdownLite escapes it before re-introducing a fixed subset of
   tags. Styled as a document rather than as an interface.

   **100ch, and it is the only width in here.** It was a flat 70ch until
   2026-08-20 - the right measure for a line of text, and the only thing a report
   contained when it was written. It is the wrong measure for what a report has
   gained since: a seven-column table of timestamps and a plot are not read a
   line at a time, and at 70ch both spent the page's whole width on a third of
   their content with a wide screen empty beside them.

   The first attempt at that widened the card to 100ch and kept 70ch on the prose,
   so each part would have the measure it was written for. That was wrong on the
   page in a way it was not wrong in the reasoning, and the deployed report showed
   it immediately: text stopped a third of the way across its own card while the
   tables beside it ran the full width. A body of text that does not reach the
   edge of the document it is in does not read as a considered measure, it reads
   as a bug - and a left margin whose width changes down the page reads as one
   twice over. One measure for the whole document beats the right measure for one
   part of it, so the cap on the text is gone and this number bounds everything.

   That makes a long line the cost, knowingly: 100ch is past the measure prose is
   usually set at. It is one number, here, if a report ever reads as too wide. */
.pt-report {
  max-width: 100ch;
  margin: var(--cordis-section-gap) 0;
  padding: var(--cordis-space-5) var(--cordis-space-6);
  background: var(--cordis-surface);
  border: 1px solid var(--cordis-border);
  border-radius: var(--cordis-radius-md);
  box-shadow: var(--cordis-shadow-sm);
}
.pt-report h2 { font-size: var(--cordis-fs-h2); line-height: var(--cordis-lh-h2); margin: var(--cordis-space-5) 0 var(--cordis-space-2); color: var(--cordis-text-strong); }
.pt-report h3 { font-size: var(--cordis-fs-h3); line-height: var(--cordis-lh-h3); margin: var(--cordis-space-5) 0 var(--cordis-space-2); color: var(--cordis-text-strong); }
.pt-report h4 { font-size: var(--cordis-fs-body); line-height: var(--cordis-lh-body); margin: var(--cordis-space-4) 0 var(--cordis-space-1); color: var(--cordis-text-strong); }
.pt-report > :first-child { margin-top: 0; }
.pt-report p, .pt-report ul, .pt-report ol { margin: var(--cordis-space-3) 0; }
.pt-report li { margin: var(--cordis-space-1) 0; }

/* There was a 70ch cap on the prose elements here for about an hour on
   2026-08-20, so that the card could widen for tables and plots while every
   sentence kept the measure it was written for. Removed after looking at the
   deployed page: what it actually produced was a document whose text stopped a
   third of the way across its own card while the tables beside it ran the full
   width, and a margin that changes width down the page reads as a rendering
   fault, not as typography. One measure for the whole document is worth more
   here than the right measure for one part of it. The card's own max-width is
   now the only bound, which is why that number carries the reasoning. */
.pt-report pre {
  margin: var(--cordis-space-3) 0;
  padding: var(--cordis-space-3) var(--cordis-space-4);
  border: 1px solid var(--cordis-border);
  border-radius: var(--cordis-radius-sm);
  background: var(--cordis-surface-sunken);
  font-family: var(--cordis-font-mono);
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pt-report blockquote {
  margin: var(--cordis-space-4) 0;
  padding-left: var(--cordis-space-4);
  border-left: 3px solid var(--cordis-border-strong);
  color: var(--cordis-text-muted);
}
/* A table in a report body is a cordis-table in a pt-tablewrap, both written by
   MarkdownLite - so there is nothing to style here but the space around it.

   There used to be three rules at this spot giving report tables their own
   width, borders and padding. They are gone deliberately. This file loads after
   cordis.css and `.pt-report th` has the same specificity as `.cordis-table th`,
   so those rules did not sit beside the Design System's table, they quietly beat
   it - a private fork of a component that already exists, which is the one thing
   the header of this file says not to do. The system's table is also simply
   better than what was here: a real header band, a row height, hover feedback,
   and a right-aligned cell class this renderer now uses.

   Why the wrapper is needed at all: a table gets the card's full 100ch, and on a
   phone a seven-column table of timestamps is still wider than that. Measured at
   375px the table scrolls inside its own box and the page itself does not move,
   which is the rule this file already keeps for the machines table. */
.pt-report .pt-tablewrap { margin: var(--cordis-space-4) 0; }

/* The masthead of the document, which is what pharmatool#29 asked for: a report
   that carries the Cordis mark and says what it is about, instead of a slab of
   prose with its metadata standing beside it on the page.

   The logo is chosen on the SERVER, from the theme cookie, and not by a CSS
   rule that swaps two images. The colour lockup on the dark surface is
   unreadable and the white one on the light surface is invisible, so this is a
   correctness question rather than a polish one - and the request already knows
   which theme it is drawing, so guessing in CSS would be the harder way to get
   the same answer. See ReportDetail.razor. */
/* The letterhead: the mark, then the report's own metadata as labelled fields.
   Stacked rather than side by side, because the block below it is a two-column
   grid and a logo sharing that row would set its own baseline against the first
   field's - which looks like a mistake at every width except the one it was
   checked at. */
.pt-report__masthead {
  margin-bottom: var(--cordis-space-5);
  padding-bottom: var(--cordis-space-3);
  border-bottom: 1px solid var(--cordis-border);
}
.pt-report__logo {
  display: block;
  height: var(--cordis-space-6);
  width: auto;
  margin-bottom: var(--cordis-space-3);
}

/* A <dl> as a two-column grid. max-content on the label column so the widest
   label sets the gutter and the values line up - a fixed width would be a guess
   about the longest of five words in two languages, and Dutch is the longer one
   ("Eerste melding", "Rapportdatum"). */
.pt-report__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--cordis-space-1) var(--cordis-space-4);
  margin: 0;
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
}
.pt-report__meta dt {
  color: var(--cordis-text-muted);
  /* Not bold. The label is the quieter half of the pair - it is there to be
     skipped once the reader knows the shape of the block. */
  font-weight: var(--cordis-fw-regular);
}
.pt-report__meta dd {
  margin: 0;
  color: var(--cordis-text);
  font-weight: var(--cordis-fw-medium);
}

.pt-report__zone {
  margin: var(--cordis-space-3) 0 0;
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
  color: var(--cordis-text-muted);
}

/* Under 30rem the gutter costs more than it buys: two words per line beats one
   word and a wrapped value. Labels go above their values, and the pair is kept
   together by the row gap being smaller than the gap between pairs. */
@media (max-width: 30rem) {
  .pt-report__meta { grid-template-columns: 1fr; gap: 0; }
  .pt-report__meta dt { margin-top: var(--cordis-space-2); }
}

/* ---------- a plot inside a report --------------------------------------- */

/* Decision D14: Apache ECharts draws these, through the design system's own two
   builders. The card, the head, the legend and the container are written by
   Components/ReportFigure.cs; the chart draws the plot and nothing else, which
   is the system's rule for these builders and the reason the title, the period
   and the legend are real markup here rather than ECharts options.

   The legend is hand-written for the same reason it is on the specification
   page: cordisCharts.timeseries sets no legend of its own, and stateTimeline
   turns one off explicitly because its bands are named in the tooltip. A
   tooltip is not available to somebody reading on a phone. */
.pt-figure { margin: var(--cordis-space-5) 0; }
.pt-figure__period { margin-left: auto; }
.pt-figure__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cordis-space-1) var(--cordis-space-3);
  margin-bottom: var(--cordis-space-3);
}
.pt-figure__foot { margin: var(--cordis-space-3) 0 0; }

/* A canvas has no intrinsic size, so a height here is not styling - a container
   of zero height is a chart that draws nothing at all and reports no error. */
.pt-chart { width: 100%; height: 200px; }

/* A timeline is as tall as it has rows. --pt-chart-rows is set inline from the
   parsed row count, which is the one inline style on this page: a fixed height
   either crushes eight rows together or leaves a single one adrift in white
   space, and only the server knows which of those it is about to draw. */
.pt-chart--timeline { height: calc(3rem + var(--pt-chart-rows, 2) * 2.25rem); }

/* The legend dot. The series colours are the palette in order, because
   cordisECharts.palette() hands ECharts --cordis-chart-1 to -5 in that order and
   the nth series is therefore drawn in the nth colour. The four state colours
   are the semantic ones, which is the exception to the design system's rule that
   a chart uses the blue ramp: a state timeline is the one plot whose colours
   carry meaning rather than telling series apart. */
.pt-swatch {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: var(--cordis-space-1);
  border-radius: var(--cordis-radius-pill);
  background: var(--cordis-chart-5);
}
.pt-swatch--1 { background: var(--cordis-chart-1); }
.pt-swatch--2 { background: var(--cordis-chart-2); }
.pt-swatch--3 { background: var(--cordis-chart-3); }
.pt-swatch--4 { background: var(--cordis-chart-4); }
.pt-swatch--ok { background: var(--cordis-success); }
.pt-swatch--warn { background: var(--cordis-warning); }
.pt-swatch--danger { background: var(--cordis-danger); }
.pt-swatch--neutral { background: var(--cordis-neutral-text); }

/* ---------- the entrance -------------------------------------------------- */

/* Login and the invite link. --cordis-canvas-brand is the system's own entrance
   surface, defined for exactly this and for nothing else. */
.pt-entrance {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cordis-space-5);
  padding: var(--cordis-space-6) var(--cordis-space-4);
  background: var(--cordis-canvas-brand);
}
.pt-entrance__card {
  width: 100%;
  max-width: 26rem;
  padding: var(--cordis-space-6);
  background: var(--cordis-surface);
  border-radius: var(--cordis-radius-lg);
  box-shadow: var(--cordis-shadow-lg);
}
.pt-entrance__brand {
  display: flex;
  align-items: center;
  gap: var(--cordis-space-2);
  margin-bottom: var(--cordis-space-5);
  min-width: 0;
}
.pt-entrance__brand img { display: block; height: var(--cordis-space-7); width: auto; flex: none; }

/* Same wordmark as the rail's pt-brand__product, on the white card surface instead
   of the nav surface, so it takes the ordinary text colour rather than the
   --cordis-nav-* set. */
.pt-entrance__product {
  font-size: var(--cordis-fs-sm);
  line-height: var(--cordis-lh-sm);
  font-weight: var(--cordis-fw-semibold);
  color: var(--cordis-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 18ch;
}
.pt-entrance__foot {
  width: 100%;
  max-width: 26rem;
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
  color: var(--cordis-canvas-brand-text);
}
.pt-entrance__foot a, .pt-entrance__foot button { color: inherit; }
.pt-entrance__note {
  margin: var(--cordis-space-5) 0 0;
  font-size: var(--cordis-fs-xs);
  line-height: var(--cordis-lh-xs);
  color: var(--cordis-text-muted);
}
/* On the entrance the form fills the card rather than sitting in a 34rem column. */
.pt-form--entrance { max-width: none; gap: var(--cordis-space-4); }
.pt-btn--block { width: 100%; }
/* cordis-notice is a component with no margin of its own, on purpose - the system
   leaves the spacing to whatever lays it out. This is that. */
.pt-notice { margin: var(--cordis-space-4) 0; max-width: 80ch; }

/* On the entrance the two toggles sit on the gradient, not on the nav surface. */
.pt-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cordis-primary-text);
  font-weight: var(--cordis-fw-semibold);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- small screens ------------------------------------------------- */

/* **The rail never collapses to icons here, at any width.**
 *
 * cordis.css narrows the rail to 60px below 1200px and hides every
 * `.cordis-rail__label`, which is right for an application whose rail items carry an
 * icon beside the label. This one's do not: its five destinations are
 * "Machines", "Reports", "Fleet scans", "Accounts" and "Backup", and none of them
 * has an icon at all. Collapsed, this rail is five blank rows - measured, not
 * predicted.
 *
 * The icon set changed under this rule and the answer did not. Bootstrap Icons was
 * retired by decision D8 and Material Symbols Rounded replaces it, which is a far
 * larger vocabulary - but the shipped font is a *subset* of 63 registered names
 * (`tools/shell-icons.txt` upstream), a name outside it renders as nothing at all,
 * and none of these five destinations has a name in it. Giving the rail icons is a
 * change to the upstream register first, and a design question second; it is not
 * something this stylesheet can do.
 *
 * So the label is restored at both of the system's breakpoints. Same specificity
 * as the rule it answers and later in the cascade, which is why it wins without
 * !important. Nothing is redefined and no token is forked - it is a layout choice
 * about this application's own navigation.
 *
 * Worth raising upstream as a question rather than a bug: what a rail should do
 * when an application has labels and no icons is not something reference/index.html
 * currently answers. */
@media (max-width: 1200px) {
  .cordis-appshell { grid-template-columns: 240px 1fr; }
  .cordis-appshell .cordis-rail__label { display: revert; }
  .cordis-appshell .cordis-rail__group { display: revert; }
  .cordis-appshell .cordis-rail__item { justify-content: flex-start; padding: 0 var(--cordis-space-3); }
}

/* Below 900px cordis-appshell makes the rail a fixed off-canvas panel, opened by an
   `.is-open` class this application has no JavaScript to add. So at that width it
   becomes an ordinary band across the top of the page instead - every link still
   reachable, nothing hover-only, and no script. */
@media (max-width: 900px) {
  .cordis-appshell { grid-template-columns: 1fr; }
  .cordis-rail {
    position: static;
    transform: none;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cordis-space-1);
    padding: var(--cordis-space-2);
  }
  .cordis-rail__brand { border-bottom: 0; padding: var(--cordis-space-1) var(--cordis-space-2); }
  /* A group heading in a horizontal band is a label with nothing under it. */
  .cordis-appshell .cordis-rail__group { display: none; }
  /* width, and not only margin, since 29855f0. The rail item now carries
     `width: calc(100% - 2 * var(--cordis-space-2))` so that a column of them lines
     up inside its own inset - correct for a column, and in a wrapping row it makes
     every item claim a whole line. The band was 305px tall on an 800px window with
     four destinations in it, each on its own row: a vertical rail rotated nowhere.
     Measured, not predicted. `auto` puts the width back on the label. */
  .cordis-rail__item, .pt-rail__first { margin: 0; width: auto; }
  .pt-railfoot {
    margin-top: 0;
    margin-left: auto;
    padding: var(--cordis-space-1) var(--cordis-space-2);
    border-top: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--cordis-space-3);
  }
  .pt-facts th { width: auto; }
}