/* The look of the Product Catalogue app: the tokens of the Redpill Linpro design system, the page base and the parts
   every page shares, then the front page and How it works. A view that still has its earlier markup gets its own
   rules from extra.css, which is loaded after this file. */

/* Inter Tight, the one typeface of the design system, as a variable font the app serves itself. build.py copies the
   files from node_modules to vendor/ and writes the package version into these two addresses. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/inter-tight-5.3.0-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/inter-tight-5.3.0-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens of the design system ---------- */
:root {
  --rl-red: #f03239;
  --rl-red-hover: #d92b32;
  --rl-red-gradient: linear-gradient(135deg, #f03239 0%, #a32035 100%);
  --rl-burgundy: #a32035;
  --rl-rose: #c2707a;
  --rl-blush: #f7c0c1;
  --rl-teal: #0099a8;
  --rl-teal-light: #b1dcdf;
  --rl-teal-lightest: #e4f3f8;
  --rl-green: #00997c;
  --rl-green-light: #7dc697;
  --rl-green-lightest: #d8ebe1;
  --rl-amber: #ffb548;
  --rl-amber-light: #fedf9e;
  --rl-amber-lightest: #fff9cd;
  --rl-black: #1a1a1a;
  --rl-dark: #4d4d4d;
  --rl-grey: #c9cac9;
  --rl-grey-light: #f0f0f0;
  --rl-white: #ffffff;
  --rl-bg-primary: #ffffff;
  --rl-bg-secondary: #f0f0f0;
  --rl-bg-warm: #faf9f7;
  --rl-bg-dark: #4d4d4d;

  --font-primary: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi: 600;
  --font-weight-bold: 700;

  --fs-hero: clamp(2.75rem, 5vw + 1rem, 4.5rem);
  --fs-h1: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.25rem, 2.5rem);
  --fs-h3: clamp(1.375rem, 2vw + 0.25rem, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem);
  --fs-h5: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-snippet: 0.75rem;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.06em;
  --tracking-snippet: 0.1em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-card: var(--radius-lg);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* What the app adds: the hairline between rows, the width of a page with its side margins, the side margin and
     the height of the bar. */
  --hairline: 1px solid rgba(26, 26, 26, 0.1);
  --page-max: 1280px;
  --page-gutter: 40px;
  --bar-height: 73px;

  /* The names the earlier views use, on the colours above. They go when the last of those views is redone. */
  --bg: var(--rl-white);
  --ink: var(--rl-black);
  --body: var(--rl-dark);
  --muted: var(--rl-dark);
  --rule: rgba(26, 26, 26, 0.1);
  --card: var(--rl-white);
  --red: var(--rl-red);
  --brand: var(--rl-red);
  --tint: #fdecec;
  --link: var(--rl-red);
  --met: var(--rl-green);
  --proposed-bg: var(--rl-amber-lightest);
  --proposed-ink: #6b4a00;

  color-scheme: light;
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 20px;
    --bar-height: 0px;
  }
}

/* ---------- page base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* On a phone with a notch the page starts below it, and a white strip covers what scrolls under the notch. */
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-height) + env(safe-area-inset-top, 0px) + 16px);
}

body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: calc(var(--z-sticky) + 1);
  background: var(--rl-white);
}

body {
  margin: 0;
  background: var(--rl-bg-warm);
  color: var(--rl-dark);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-light);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  color: var(--rl-black);
  font-weight: var(--font-weight-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

h1 {
  margin: 0 0 16px;
  font-size: var(--fs-h1);
  text-wrap: balance;
}

h2 {
  margin: 40px 0 12px;
  font-size: var(--fs-h3);
}

h3 {
  margin: 6px 0 8px;
  font-size: 1.125rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  letter-spacing: 0;
}

b,
strong {
  font-weight: var(--font-weight-semi);
}

code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

a {
  color: var(--rl-red);
  text-decoration: none;
}

a:hover {
  color: var(--rl-red-hover);
}

p a:hover,
li a:hover,
td a:hover,
dd a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--rl-red);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

main {
  padding-bottom: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- header bar ---------- */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.top-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  display: block;
  width: auto;
  height: 36px;
}

/* ---------- navigation pills ---------- */
.nav {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  color: var(--rl-dark);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-default),
    color var(--duration-fast);
}

.nav a:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rl-black);
}

.nav a[aria-current='page'] {
  background: var(--rl-red);
  color: var(--rl-white);
  font-weight: var(--font-weight-medium);
}

.nav a[aria-current='page']:hover {
  background: var(--rl-red-hover);
}

/* ---------- search field ---------- */
.search {
  position: relative;
  flex: 0 1 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.05);
}

.search:focus-within {
  outline: 2px solid var(--rl-red);
  outline-offset: 2px;
}

.search svg {
  flex: 0 0 auto;
}

.search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--rl-black);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-light);
  line-height: normal;
}

.search input::placeholder {
  color: var(--rl-dark);
  opacity: 1;
}

.results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: var(--z-dropdown);
  max-height: 60vh;
  margin: 0;
  padding: 8px;
  overflow: auto;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--rl-white);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
}

.results a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--rl-dark);
}

.results a:hover,
.results a:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.results b {
  display: block;
  color: var(--rl-black);
  font-weight: var(--font-weight-medium);
}

.results small {
  display: block;
  font-size: var(--fs-caption);
}

/* ---------- account button and its menu ---------- */
/* The button keeps to the right edge, also on a start-up page that has neither navigation nor search. */
.account {
  position: relative;
  margin-left: auto;
}

.account-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rl-grey);
  border-radius: 50%;
  background: var(--rl-white);
  color: var(--rl-black);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.account-btn:hover,
.account-btn[aria-expanded='true'] {
  border-color: var(--rl-dark);
}

.account-menu,
.export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--rl-white);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
}

.account-who {
  margin: 0 0 8px;
  padding: 8px 12px 12px;
  border-bottom: var(--hairline);
  overflow-wrap: anywhere;
}

.whoami {
  display: block;
  color: var(--rl-black);
  font-weight: var(--font-weight-medium);
}

.whomail {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-regular);
}

.account-menu a,
.account-menu button,
.export-menu button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rl-black);
  font-weight: var(--font-weight-regular);
  text-align: left;
  cursor: pointer;
}

.account-menu a:hover,
.account-menu button:hover,
.export-menu button:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* The Export button opens a menu of the same kind, under its left edge. */
.export {
  position: relative;
  display: inline-flex;
}

.export-menu {
  right: auto;
  left: 0;
  min-width: 280px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border: 2px solid var(--rl-red);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--rl-red);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default),
    transform var(--duration-base) var(--ease-default);
}

.btn:hover {
  background: var(--rl-red);
  color: var(--rl-white);
  text-decoration: none;
}

.btn.primary {
  background: var(--rl-red);
  color: var(--rl-white);
}

.btn.primary:hover {
  border-color: var(--rl-red-hover);
  background: var(--rl-red-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn.small {
  padding: 8px 24px;
  font-size: var(--fs-caption);
}

/* A button that reads as a link inside a sentence or a row. */
.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rl-black);
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The same on its own beside the buttons, with the height of a button to aim at. */
.quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--rl-black);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- labels ---------- */
/* The eyebrow is the red line in capitals above a headline. Earlier views call it label. */
.eyebrow,
.label {
  display: block;
  margin: 0 0 12px;
  color: var(--rl-red);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* The small grey label, for the name of a group or of a fact. */
.snippet {
  margin: 0;
  color: var(--rl-dark);
  font-size: var(--fs-snippet);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  letter-spacing: var(--tracking-snippet);
  text-transform: uppercase;
}

.lead {
  max-width: 640px;
  margin: 0 0 16px;
  color: var(--rl-dark);
  font-size: var(--fs-body-lg);
  font-weight: var(--font-weight-light);
  line-height: 1.7;
}

/* ---------- delivery form badge ---------- */
/* Earlier views call it code. The outline says that nothing in that form is approved yet. */
.badge,
.code {
  display: inline-block;
  padding: 6px 9px;
  border-radius: var(--radius-full);
  background: var(--rl-red);
  color: var(--rl-white);
  font-size: var(--fs-snippet);
  font-weight: var(--font-weight-semi);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
}

.badge.outline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rl-red);
  color: var(--rl-red);
}

/* ---------- card ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--rl-white);
  box-shadow: var(--shadow-card);
  color: var(--rl-black);
}

a.card {
  transition:
    box-shadow var(--duration-base) var(--ease-default),
    transform var(--duration-base) var(--ease-default);
}

a.card:hover {
  box-shadow: var(--shadow-lg);
  color: var(--rl-black);
  transform: translateY(-3px);
}

.card-title {
  font-size: 1.375rem;
  font-weight: var(--font-weight-light);
  line-height: var(--lh-heading);
}

.card-text {
  color: var(--rl-dark);
  font-size: var(--fs-small);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

/* ---------- table ---------- */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 16px 12px 0;
  border-bottom: var(--hairline);
  text-align: left;
  vertical-align: top;
}

thead th {
  padding-top: 0;
  border-bottom: 2px solid var(--rl-dark);
  color: var(--rl-black);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-semi);
}

/* A code and the name beside it stand on one line of text. */
.list td {
  vertical-align: baseline;
}

.scroll {
  overflow-x: auto;
}

/* ---------- tabs under a headline ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  border-bottom: var(--hairline);
}

.tabs a {
  display: inline-flex;
  align-items: center;
  height: 48px;
  color: var(--rl-dark);
  font-weight: var(--font-weight-regular);
}

.tabs a:hover {
  color: var(--rl-black);
}

.tabs a[aria-current='page'] {
  margin-bottom: -1px;
  border-bottom: 2px solid var(--rl-red);
  color: var(--rl-black);
  font-weight: var(--font-weight-medium);
}

/* ---------- accordion row ---------- */
.folds {
  border-bottom: var(--hairline);
}

.fold {
  border-top: var(--hairline);
}

.fold-head {
  margin: 0;
  font: inherit;
  letter-spacing: 0;
}

.fold-btn {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: var(--rl-black);
  text-align: left;
  cursor: pointer;
}

.fold-text {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 24px;
}

.fold-title {
  font-size: 1.375rem;
  line-height: var(--lh-heading);
  transition: color var(--duration-fast);
}

.fold-btn:hover .fold-title {
  color: var(--rl-red);
}

.fold-sub {
  color: var(--rl-dark);
  line-height: normal;
}

/* The red dot of the design system. It shows a plus on a closed row and a minus on an open one. */
.dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rl-red);
  color: var(--rl-white);
  transition: background-color var(--duration-fast);
}

.fold-btn:hover .dot {
  background: var(--rl-red-hover);
}

.fold-btn[aria-expanded='true'] .dot-plus,
.fold-btn[aria-expanded='false'] .dot-minus {
  display: none;
}

.fold-panel {
  padding: 8px 0 32px;
}

/* The Edit link of a section stands to the right of its first lines. */
.fold-tools {
  float: right;
  margin: 0 0 8px 24px;
}

.fold-panel > section:first-of-type > h2:first-child,
.fold-panel > .doc > p:first-child {
  margin-top: 0;
}

/* ---------- footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 40px;
  padding-bottom: 48px;
  color: var(--rl-dark);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-regular);
  line-height: normal;
}

/* ---------- messages ---------- */
#toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: var(--z-overlay);
  max-width: min(560px, calc(100% - 32px));
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--rl-black);
  box-shadow: var(--shadow-lg);
  color: var(--rl-white);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
  transform: translateX(-50%);
}

.banner {
  margin: 16px 0 0;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--tint);
  color: var(--rl-black);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
}

/* ---------- front page: headline and the ring of delivery forms ---------- */
.front-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 56px;
  padding-top: 64px;
}

.front-text {
  flex: 1 1 520px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.front-text > * {
  margin: 0;
}

.front-text .lead {
  max-width: 520px;
}

.front-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

/* The ring is drawn in parts of its own width, so it keeps its shape from a desktop down to a phone. */
.ring-box {
  flex: 0 1 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
}

.ring {
  position: relative;
  width: 100cqw;
  height: 80cqw;
}

.ring-line {
  position: absolute;
  top: 6cqw;
  left: 16cqw;
  width: 68cqw;
  height: 68cqw;
  border: 2px solid var(--rl-grey);
  border-radius: 50%;
}

.ring-centre {
  position: absolute;
  top: 40cqw;
  left: 50cqw;
  padding: max(10px, 3cqw) max(18px, 6cqw);
  border-radius: var(--radius-full);
  background: var(--rl-red-gradient);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  color: var(--rl-white);
  font-size: max(14px, 4cqw);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* A pill keeps a 44 px target on a narrow screen: the part that is drawn may be lower, the rest is a clear border. */
.ring-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: max(6px, 2cqw);
  height: max(44px, 8.8cqw);
  padding: 0 max(11px, 3.6cqw) 0 max(5px, 1.4cqw);
  border-style: solid;
  border-color: transparent;
  border-width: max(0px, (44px - max(32px, 8.8cqw)) / 2) 0;
  border-radius: var(--radius-full);
  background: var(--rl-white);
  background-clip: padding-box;
  color: var(--rl-black);
  font-size: max(12px, 3.2cqw);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.06));
  transform: translate(-50%, -50%);
  transition:
    background-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default);
}

.ring-pill b {
  padding: max(5px, 1.6cqw) max(7px, 2cqw);
  border-radius: var(--radius-full);
  background: var(--rl-red);
  color: var(--rl-white);
  font-size: max(12px, 2.4cqw);
  font-weight: var(--font-weight-semi);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  transition:
    background-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default);
}

.ring-pill[data-form='CS'] {
  top: 10.6cqw;
  left: 67cqw;
}

.ring-pill[data-form='SO'] {
  top: 40cqw;
  left: 84cqw;
}

.ring-pill[data-form='MS'] {
  top: 69.4cqw;
  left: 67cqw;
}

.ring-pill[data-form='PF'] {
  top: 69.4cqw;
  left: 33cqw;
}

.ring-pill[data-form='SS'] {
  top: 40cqw;
  left: 16cqw;
}

.ring-pill[data-form='RS'] {
  top: 10.6cqw;
  left: 33cqw;
}

.ring-note {
  margin: 0;
  color: var(--rl-dark);
  font-size: var(--fs-small);
  line-height: normal;
  text-align: center;
}

/* ---------- front page: the families ---------- */
.front-families {
  padding: 88px 0 24px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.section-head h2 {
  margin: 0;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.check,
.pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--rl-dark);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
}

.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--rl-red);
}

.pick select {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rl-grey);
  border-radius: var(--radius-full);
  background: var(--rl-white);
  color: var(--rl-black);
}

.fam-group-title {
  margin: 32px 0 6px;
}

.fam-group {
  border-bottom: var(--hairline);
}

.fam-row {
  border-top: var(--hairline);
}

.fam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: 18px 0;
  color: var(--rl-black);
  line-height: normal;
}

a.fam-name,
a.fam-name:hover {
  color: var(--rl-black);
}

.fam-name {
  flex: 0 1 300px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.fam-no {
  flex: 0 0 auto;
  width: 30px;
  color: var(--rl-red);
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.fam-title {
  font-size: 1.375rem;
  line-height: var(--lh-heading);
  transition: color var(--duration-fast);
}

a.fam-name:hover .fam-title {
  color: var(--rl-red);
}

.fam-state {
  color: var(--rl-dark);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.fam-line {
  flex: 1 1 320px;
  color: var(--rl-dark);
  line-height: 1.5;
}

/* One fixed place for each delivery form, so a form can be read down the list. */
.fam-counts {
  flex: 0 0 auto;
  align-self: flex-start;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56px;
  align-items: center;
}

.front-families.with-proposals .fam-counts {
  grid-auto-columns: 84px;
}

.fam-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-medium);
}

/* A count is a link to the list of those products, and the proposals beside it are a link of their own. */
.fam-count a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  color: var(--rl-black);
}

.fam-count a:hover {
  color: var(--rl-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fam-count i {
  color: var(--rl-dark);
  font-style: normal;
  font-weight: var(--font-weight-regular);
}

.fam-count a:hover i {
  color: inherit;
}

.fam.idle .fam-title,
.fam.idle .fam-no {
  color: var(--rl-dark);
}

.fam-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: -10px 0 8px;
  padding-left: 46px;
  font-size: var(--fs-small);
}

.fam-admin .linkbtn {
  color: var(--rl-dark);
}

.fam-none {
  margin: 32px 0 0;
  padding: 18px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.fam-add {
  margin-top: 32px;
}

/* ---------- front page: the packages ---------- */
.front-packages {
  padding: 40px 0 0;
}

.packages-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.packages-head h2,
.packages-head p {
  margin: 0;
}

.packages-head p {
  line-height: normal;
}

.packages-head .quiet {
  margin-left: auto;
}

/* ---------- a page under the catalogue: where it sits and its head ---------- */
.crumbs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}

.crumbs {
  margin: 32px 0 0;
  color: var(--rl-dark);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-regular);
  line-height: normal;
}

.crumbs-row .crumbs {
  margin: 0;
}

.crumbs a {
  color: var(--rl-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs a:hover {
  color: var(--rl-black);
}

/* A crumb is a small word. The padding gives it a taller target without moving the line. */
.crumbs a {
  padding: 14px 0;
}

/* How we deliver is running text under the same small red headings as the product tab. */
.deliver {
  max-width: 80ch;
  padding-top: 40px;
}

/* A table inside a part scrolls sideways on a narrow screen and keeps its columns readable. */
.part .scroll table {
  min-width: 520px;
}

.hero {
  padding: 40px 0 32px;
}

.hero .label {
  margin: 0 0 14px;
}

.hero h1 {
  margin: 0;
}

.hero .lead {
  margin: 14px 0 0;
}

/* The head of a page that has actions of its own: the text at the left, the actions at the right on its last line. */
.hero.split,
.hero.family {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}

.hero-text {
  flex: 1 1 520px;
  min-width: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
}

/* Edit is a red text link, as on the handbook sections. */
.btn.edit-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--rl-red);
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
}

.btn.edit-btn:hover {
  background: none;
  color: var(--rl-red-hover);
  text-decoration: underline;
}

/* A family opens with its number, large and red, beside its name. */
.hero.family {
  justify-content: flex-start;
  gap: 16px 40px;
  padding-bottom: 8px;
}

.number {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
  color: var(--rl-red);
  font-size: clamp(4.5rem, 20vw, 7.5rem);
  font-weight: var(--font-weight-light);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* ---------- a page under the catalogue: two columns and their parts ---------- */
/* The text at the left and what belongs beside it at the right. On a narrow screen the right column comes below. */
.cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  padding-top: 40px;
}

.cols > :first-child {
  flex: 999 1 560px;
  min-width: 0;
}

.side {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.parts {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.part {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.part > *,
.part .eyebrow {
  margin: 0;
}

.part .lead {
  max-width: none;
}

.products h2 {
  margin-top: 0;
}

/* What you get: one white card per point. */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}

.value {
  margin: 0;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  background: var(--rl-white);
  box-shadow: var(--shadow-card);
  color: var(--rl-black);
  font-size: var(--fs-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
}

/* The facts of a product, a family or a package: a small grey name over each value, side by side. */
dl.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 24px 32px;
  margin: 0;
  padding-top: 28px;
  border-top: var(--hairline);
}

.cols + dl.facts {
  margin-top: 40px;
}

dl.facts.stack {
  grid-template-columns: 1fr;
  gap: 20px;
  padding-top: 0;
  border-top: 0;
}

dl.facts > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

dl.facts dt {
  color: var(--rl-dark);
  font-size: var(--fs-snippet);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  letter-spacing: var(--tracking-snippet);
  text-transform: uppercase;
}

dl.facts dd {
  margin: 0;
  color: var(--rl-dark);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* A white card that is not a link: the sovereignty of a product, the problem of a family, the aid for colleagues. */
.panel {
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--rl-white);
  box-shadow: var(--shadow-card);
}

.panel > .eyebrow {
  margin: 0 0 16px;
  font-size: var(--fs-snippet);
}

.panel > p {
  margin: 0;
  color: var(--rl-black);
  font-size: var(--fs-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.sov ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sov li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--rl-black);
  font-weight: var(--font-weight-regular);
  line-height: normal;
}

.sov .mk {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.sov-state {
  margin-left: auto;
  color: var(--rl-dark);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-light);
  text-align: right;
}

.sov > p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: var(--hairline);
  color: var(--rl-dark);
  font-size: var(--fs-small);
}

.panel.aid .aid-title {
  margin: 20px 0 10px;
  color: var(--rl-black);
  font-size: var(--fs-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
}

.panel.aid .eyebrow + .aid-title {
  margin-top: 0;
}

/* The points have the red dot of the design system's lists. */
.panel.aid ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--rl-dark);
  line-height: 1.5;
  list-style: none;
}

.panel.aid li {
  position: relative;
  padding-left: 20px;
}

.panel.aid li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rl-red);
}

.panel.aid .actions {
  margin: 10px 0 0;
}

/* The picture of a product, above its sovereignty. */
.art {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--radius-card);
  background: #f2f4f3;
}

/* What is folded away under a page, such as the lifecycle of a product: a row that opens, as an accordion row. */
.more {
  margin-top: 48px;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  color: var(--rl-black);
  font-size: 1.375rem;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  list-style: none;
  cursor: pointer;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary::after {
  content: '+';
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rl-red);
  color: var(--rl-white);
  font-size: 1.125rem;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0;
}

.more[open] summary::after {
  content: '\2212';
}

.more > :not(summary) {
  margin-bottom: 24px;
}

/* ---------- a list of products: one line each, with its code, its name and its promise ---------- */
.plist {
  margin: 0;
  padding: 0;
  border-bottom: var(--hairline);
  list-style: none;
}

.plist li {
  border-top: var(--hairline);
}

/* The code, the name and the promise stand in three columns. Where the list is too narrow for that, the promise goes
   under the name, never under the code. */
.plist {
  container-type: inline-size;
}

.pline {
  display: grid;
  grid-template-columns: 84px minmax(0, 360px) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 24px;
  padding: 16px 0;
  color: var(--rl-black);
  line-height: normal;
}

@container (max-width: 760px) {
  .pline {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .pline-text {
    grid-column: 2;
  }
}

.pline .pill {
  white-space: nowrap;
}

.pline-name {
  font-size: 1.25rem;
  line-height: var(--lh-heading);
  transition: color var(--duration-fast);
}

.pline:hover {
  color: var(--rl-black);
}

.pline:hover .pline-name {
  color: var(--rl-red);
}

.pline-text {
  color: var(--rl-dark);
  line-height: 1.5;
}

.plist-note {
  margin: 0 0 12px;
}

.plist-none {
  margin: 0;
  padding: 18px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

/* ---------- how it works ---------- */
.how-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 64px 0 40px;
}

.how-hero > * {
  margin: 0;
}

/* ---------- where the counts no longer fit beside the family ---------- */
/* The counts then stand on a row of their own under the name, without the empty places. With proposals a count is
   wider, so that happens on a wider screen. */
@media (max-width: 1090px) {
  .fam-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-width: 100%;
    padding-left: 46px;
  }

  .fam-counts > span:empty {
    display: none;
  }
}

@media (max-width: 1260px) {
  .front-families.with-proposals .fam-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-width: 100%;
    padding-left: 46px;
  }

  .front-families.with-proposals .fam-counts > span:empty {
    display: none;
  }
}

/* ---------- product board ---------- */
/* The tabs Board, Lifecycle and Reports stand under the head of each of the three views. */
.board-filter {
  margin-top: 32px;
}

/* The select is as wide as its longest family, and gives way on a narrow screen. */
.board-filter select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* A short cell, such as a date or a status, stays on one line. */
.nw {
  white-space: nowrap;
}

/* The values of a change can be long words without a space, which break where they must. */
.list.changes td {
  overflow-wrap: anywhere;
}

/* The report and its text start level under the tabs. */
.cols .doc > :first-child {
  margin-top: 0;
}

.tabs + .doc {
  margin-top: 32px;
}

/* Six lanes: what waits for the meeting is the wide one, the five lanes of what was decided are narrow. A lane is
   its name, the line under it and its cards, and the lanes share those three rows, so the cards start level
   whatever the length of a name. */
.kanban.lanes {
  display: grid;
  grid-template-columns: 2fr repeat(5, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 24px;
}

/* The one column of a lane never grows past the lane, whatever a card holds. */
.kcol {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: span 3;
  align-content: start;
  min-width: 0;
  border-radius: var(--radius-card);
}

.kcards {
  min-height: 160px;
  padding-bottom: 32px;
}

.kcol h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--rl-black);
  font-size: 1.125rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
}

.count {
  color: var(--rl-dark);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
  font-variant-numeric: tabular-nums;
}

.lane-sub {
  margin: 4px 0 16px;
  line-height: 1.4;
}

/* A lane that a card is dragged over says so. */
.kcol.over {
  outline: 2px dashed var(--rl-red);
  outline-offset: 6px;
}

.kcard {
  margin: 0 0 12px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background: var(--rl-white);
  box-shadow: var(--shadow-card);
  color: var(--rl-dark);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.kcard[draggable='true'] {
  cursor: grab;
}

.kcard.dragging {
  opacity: 0.4;
}

.kcard.rejected {
  opacity: 0.8;
}

.kid {
  color: var(--rl-red);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}

.ktype {
  margin-left: 8px;
  color: var(--rl-dark);
  font-size: var(--fs-caption);
}

.kcard h4 {
  margin: 8px 0 10px;
  font-size: 1.375rem;
  font-weight: var(--font-weight-light);
  line-height: 1.2;
}

.kcard h4 a {
  color: var(--rl-black);
}

.kcard h4 a:hover {
  color: var(--rl-red);
}

.kcard p {
  margin: 0 0 8px;
}

.kcard p:last-child {
  margin-bottom: 0;
}

.kcard .rework {
  color: var(--proposed-ink);
}

/* Approve is the button, More information and Reject are the quiet choices beside it. */
.kactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 14px;
}

/* A long choice, such as Send back to the board, breaks inside a narrow card. */
.kactions .btn {
  padding: 10px 18px;
  text-align: center;
  white-space: normal;
}

.kactions .quiet {
  padding: 0;
}

/* A card in a narrow lane: the same parts, smaller. */
.kcard.compact {
  padding: 14px 16px;
}

.kcard.compact .ktype {
  display: block;
  margin: 2px 0 0;
}

.kcard.compact h4 {
  margin: 6px 0;
  font-size: var(--fs-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  letter-spacing: 0;
}

.kcard.compact .kactions .btn {
  padding: 8px 16px;
  font-size: var(--fs-snippet);
}

@media (max-width: 1100px) {
  .kanban.lanes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .kanban.lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  .kcards {
    min-height: 0;
  }

  .kactions .btn {
    min-height: 44px;
  }
}

/* The page of one item: what kind it is and where it stands, in a card under the head. */
.item-facts dl.facts {
  padding-top: 0;
  border-top: 0;
}

.item-facts > p {
  margin: 20px 0 0;
  color: var(--rl-dark);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-light);
}

.item-facts .k {
  display: block;
  margin-bottom: 6px;
  color: var(--rl-dark);
  font-size: var(--fs-snippet);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  letter-spacing: var(--tracking-snippet);
  text-transform: uppercase;
}

/* The product or the package an item concerns, as a card with its code, name and promise. */
.card.concern {
  max-width: 640px;
}

.card.concern h3 {
  margin: 0;
}

.card.concern h3 a {
  color: var(--rl-black);
}

.card.concern p {
  margin: 0;
}

/* The sovereignty marks beside a headline, where the page has no card for them. */
h1 .marks {
  margin: 0 4px;
  vertical-align: middle;
}

h1 .mk {
  width: 14px;
  height: 14px;
}

/* ---------- how it works: the films ---------- */
/* The whole story is the large card. The three parts stand beside it, and under it on a narrow screen. */
.films {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.films + .folds {
  margin-top: 64px;
}

.film {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rl-black);
  line-height: normal;
  text-align: left;
  cursor: pointer;
}

.film-still {
  position: relative;
  display: block;
  overflow: hidden;
}

.film-still img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.film-big {
  flex: 2 1 560px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.film-big .film-still {
  border-radius: var(--radius-card);
  background: var(--rl-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-default);
}

.film-big:hover .film-still {
  box-shadow: var(--shadow-lg);
}

.film-play {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rl-red);
  box-shadow:
    0 0 0 3px var(--rl-white),
    0 6px 16px rgba(0, 0, 0, 0.16);
  color: var(--rl-white);
}

.film-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
}

.film-title {
  font-size: 1.375rem;
  font-weight: var(--font-weight-light);
  line-height: var(--lh-heading);
}

.film-length {
  color: var(--rl-dark);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
}

.film-list {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.film-list.alone {
  flex-direction: row;
  flex-wrap: wrap;
}

.film-list.alone .film-small {
  flex: 1 1 320px;
}

.film-small {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--rl-white);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--duration-base) var(--ease-default),
    transform var(--duration-base) var(--ease-default);
}

.film-small:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.film-small .film-still {
  flex: 0 0 168px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 10px;
}

.film-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.film-small .eyebrow {
  margin: 0;
  font-size: var(--fs-snippet);
}

.film-small .film-title {
  font-size: var(--fs-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
}

/* A film plays in a dialog over the page, as wide as the screen and its height allow. */
.film-dialog {
  width: min(1280px, calc(100vw - 32px), calc((100vh - 136px) * 16 / 9));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--rl-black);
  overflow: visible;
}

.film-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.film-dialog video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: inherit;
  background: var(--rl-bg-warm);
}

.film-close {
  position: absolute;
  top: -56px;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rl-white);
  color: var(--rl-black);
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- a narrow screen ---------- */
@media (max-width: 640px) {
  .top {
    position: static;
  }

  .top-inner {
    gap: 8px 12px;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
  }

  .nav a {
    padding: 0 12px;
  }

  .search {
    order: 4;
    flex: 1 1 100%;
  }

  .fam-counts,
  .front-families.with-proposals .fam-counts {
    padding-left: 0;
  }

  /* A count and the proposals beside it are two targets for a finger. */
  .fam-count a {
    min-height: 44px;
  }

  .fam-count a + a {
    justify-content: center;
    min-width: 36px;
    margin-left: 4px;
  }

  .fam-admin {
    margin-top: -6px;
  }

  /* The Export menu opens under the whole row of buttons, so it never reaches past the screen. */
  .front-actions {
    position: relative;
  }

  .export {
    position: static;
  }

  .export-menu {
    top: calc(100% + 8px);
    max-width: 100%;
  }
}

/* On the narrowest phones a film's still is smaller, so its title keeps room beside it. */
@media (max-width: 380px) {
  .film-small .film-still {
    flex-basis: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* What still has its earlier rules: the form fields, the path through a family, the one-pager page with its figure,
   the calculator, the handbook figures and the lightbox. design.css is loaded first and sets the look. Rules leave
   this file as each of these is redone. */
.muted { color: var(--muted); }
.small { font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 0; }
.card p { margin: 0; }
.num { text-align: right; }
.list.compact td, .list.compact th { padding: 8px 12px 8px 0; font-size: 14px; }
.sku { color: var(--red); font-size: 13px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.pill { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 400; letter-spacing: 0; padding: 2px 9px; border-radius: 10px; }
.pill.proposed { background: var(--proposed-bg); color: var(--proposed-ink); }
h1 .pill { font-size: 14px; }
.marks { display: inline-flex; gap: 4px; vertical-align: middle; }
.mk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--met); }
.mk.met { background: var(--met); }
.mk.depends { background: radial-gradient(circle, var(--met) 38%, transparent 42%); }
.mk.not-met { border-color: var(--muted); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.doc { max-width: 80ch; }
.doc table { margin: 12px 0; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.notice { background: var(--proposed-bg); color: var(--proposed-ink); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.notice a { color: inherit; }
.pill.proposed-retired, .pill.retired, .pill.rejected, .pill.rework { background: #ececea; color: #5a5c5e; }
.pill.approved { background: #ddefe4; color: #1f5c3b; }
.pform { max-width: 920px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-5); }
.field > span { font-size: var(--fs-small); font-weight: var(--font-weight-medium); color: var(--rl-dark); line-height: normal; margin-bottom: 4px; }
.field .help { display: block; font-size: var(--fs-caption); color: var(--muted); margin-top: 4px; }
.field input, .field textarea, .field select { font: inherit; color: var(--rl-black); background: var(--rl-white); border: 1px solid var(--rl-grey); border-radius: var(--radius-sm); padding: 10px 16px; min-height: 48px; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--rl-red); box-shadow: 0 0 0 3px rgba(240, 50, 57, 0.12); }
.field textarea { resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234d4d4d' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field input:disabled { color: var(--rl-dark); background: transparent; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--space-5); }
.field .grid2 .field { margin-bottom: 0; }
.op-more { margin: 0 0 14px; }
.op-more summary { cursor: pointer; color: var(--link); font-weight: 600; margin: 0 0 14px; }
.error { background: var(--tint); color: var(--red); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
details.retire { max-width: 920px; margin: 28px 0; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-card); padding: 12px 20px; }
details.retire summary { cursor: pointer; color: var(--red); font-weight: 600; }
details.retire .grid2 { margin-top: 14px; }
.figure { margin: 20px 0 8px; max-width: 980px; }
.figure svg { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: #fff; cursor: zoom-in; display: block; }
.figure figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.f-title { font: 600 17px Arial, sans-serif; fill: #1a1a1a; }
.f-sub { font: 14px Arial, sans-serif; fill: #4d4d4d; }
.f-head { font: 600 20px Arial, sans-serif; fill: #1a1a1a; }
.f-red { fill: #c8262d; }
.f-q { font: 600 13px Arial, sans-serif; fill: #1a1a1a; }
.f-link { font: 600 13px Arial, sans-serif; fill: #c8262d; }
.f-box { fill: #f4f4f4; stroke: #c9cac9; stroke-width: 1.5; }
.f-board { fill: #fdecec; stroke: #c8262d; stroke-width: 2; }
.f-queue { fill: #fff; stroke: #c8262d; stroke-width: 1; }
.f-out { fill: #e3f3f5; stroke: #2a8a95; stroke-width: 1.5; }
.f-pill { fill: #fff; stroke: #c9cac9; stroke-width: 1.5; }
.f-arrow { fill: none; stroke: #333; stroke-width: 2; }
.f-dash { stroke-dasharray: 6 6; stroke: #777; }
.f-node { cursor: pointer; }
.f-node:hover .f-box { stroke: #c8262d; stroke-width: 2.5; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); cursor: zoom-out; }
.lightbox svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: #fff; border-radius: 12px; }
.lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #1a1a1a; font-size: 26px; cursor: pointer; }
.pform.wide { max-width: none; }
.field textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.figure.doc-width { max-width: 820px; }
.zoomable { cursor: zoom-in; }
.why { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-card); padding: 8px 22px 18px; margin: 8px 0 24px; }
.why .two { grid-template-columns: minmax(0, 1fr) 420px; align-items: center; }
.why img { width: 100%; border-radius: 10px; background: #fff; }
.lightbox img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 12px; }
.figure.html { border: 1px solid var(--rule); border-radius: 12px; padding: 16px; background: var(--bg); margin: 16px 0 20px; }
.figure.html h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.figure.html p { margin: 0; font-size: 13px; color: var(--body); }
.fig-how { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.6fr); gap: 14px; align-items: center; }
.fig-org { background: var(--card); border-radius: 12px; padding: 14px; }
.fig-org h3 { margin-bottom: 10px; }
.fig-item { background: var(--bg); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; color: var(--ink); }
.fig-arrow { width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 24px solid var(--brand); margin: 0 auto; }
.fig-right { display: flex; flex-direction: column; gap: 10px; }
.fig-box { border: 1.5px solid var(--brand); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.fig-box.tint { background: var(--tint); }
.fig-box.solid { background: #c8262d; border-color: #c8262d; color: #fff; }
.fig-box.solid h3, .fig-box.solid p { color: #fff; }
.fig-customer { background: linear-gradient(90deg, #f03239, #a8161c); color: #fff; text-align: center; border-radius: 10px; padding: 10px; font-size: 16px; font-weight: 600; }
.fig-team { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; border: 1.5px solid #2a8a95; background: #e3f3f5; border-radius: 10px; padding: 10px 14px; margin: 10px 0; color: #1a1a1a; }
.fig-team b { font-size: 15px; }
.fig-team span { font-size: 13px; }
.fig-grid { display: grid; gap: 10px; }
.fig-grid.forms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fig-grid.eco { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .fig-grid.forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fig-grid.eco { grid-template-columns: 1fr; } }
.fig-form { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
.fig-form.blue { background: #e3f3f5; border-color: #2a8a95; }
.fig-form.green { background: #ddefe4; border-color: #1f5c3b; }
.fig-form .fig-code { font-size: 12px; color: var(--muted); }
.fig-eco { margin-top: 12px; background: var(--card); border-radius: 10px; padding: 12px; }
.fig-eco > h3 { text-align: center; }
.fig-eco .fig-form { background: var(--bg); border-style: dashed; }
.fig-eco .fig-form.green { background: #ddefe4; border-style: solid; }
@media (max-width: 700px) { .fig-how { grid-template-columns: 1fr; } .fig-arrow { transform: rotate(90deg); } }
.path { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin: 8px 0 28px; }
.paxis { position: relative; border-left: 2px solid var(--rule); }
.paxis::before { content: ""; position: absolute; left: -7px; top: -2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--muted); }
.paxis span { position: absolute; left: -4px; bottom: 0; transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap; font-size: 12px; color: var(--muted); }
.psteps { display: grid; gap: 14px; align-items: end; }
.pstep { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 16px; margin-top: calc(var(--lift) * 44px); }
.pstep h3 { margin: 0 0 10px; font-size: 18px; font-weight: 400; display: flex; align-items: center; gap: 8px; }
.pstep .pnum { color: var(--brand); font-size: 22px; }
.pstep .code { margin-left: auto; }
.pprod { margin: 4px 0; font-size: 14px; }
.pprod a { color: var(--ink); text-decoration: none; font-weight: 600; }
.pprod .sku { color: var(--red); }
.pband { grid-column: 1 / -1; margin-top: 10px; background: var(--card); border-radius: 20px; padding: 8px 16px; font-size: 14px; }
.pband + .pband { background: var(--bg); border: 1px solid var(--rule); }
@media (max-width: 820px) { .path { grid-template-columns: 1fr; } .paxis { display: none; } .psteps { grid-template-columns: 1fr !important; } .pstep { margin-top: 0; } }
.calc { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 18px 8px; margin: 24px 0 8px; }
.calc h2 { margin-top: 4px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 10px 0 14px; }
.calc-grid label { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.calc-grid label span { grid-column: 1 / -1; color: var(--ink); }
.calc-grid input, .calc-grid select { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; min-height: 36px; max-width: 100%; }
.calc .list td { background: var(--bg); }
.calc-total td { font-weight: 600; color: var(--ink); }
@media (max-width: 700px) { .calc-grid { grid-template-columns: 1fr; } }
.calc h3 { font-size: 15px; margin: 14px 0 6px; }
.calc-total.grand td { background: var(--tint); }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .why .two { grid-template-columns: 1fr; } }

/* The parts of the page that only the web app has: the test bar, the start-up pages and the access list. */

[hidden] {
  display: none !important;
}

.devbar {
  background: var(--proposed-bg);
  color: var(--proposed-ink);
  font-size: 14px;
  padding: 6px 24px;
  text-align: center;
}

.devbar select {
  font: inherit;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

.boot-note {
  padding: 48px 0;
}

.boot {
  max-width: 70ch;
  padding-top: 48px;
}

.banner .linkbtn {
  margin-left: 6px;
}

.access-mode {
  max-width: 70ch;
}

.access-list td {
  overflow-wrap: anywhere;
}

.access-list .you {
  font-size: 13px;
  color: var(--muted);
}