/* Cybernext PTaaS portal
   ==================================================================
   Built on the NL Design System (nldesignsystem.nl), the design system
   Dutch government and business services run on. Taken from it:

     type      IBM Plex Sans, their own pick for the Start theme
     scale     0.875 / 1 / 1.125 / 1.25 / 1.5 / 2 rem
     spacing   steps of 4px: 4 8 12 16 20 24 32 48, plus 6 for the tight
               gap between an inline icon and its label
     corners   2 / 4 / 8 px, 4 by default
     colour    neutral greys plus signal colours, not one brand colour
               smeared across the whole screen

   The signal colours do the work: blue = planned, green = done, amber =
   sitting with us. The Cybernext orange stays for the button someone is
   meant to press, and for the credit bars.

   Class names are English, like the rest of the codebase. The interface
   text is not: that comes from src/i18n and follows the reader. */

:root {
  /* neutral */
  --white: #FFFFFF;
  --page: #F4F5F7;
  --surface: #FFFFFF;
  --sunken: #EDEFF2;
  --border: #D5D9DF;
  --border-light: #E4E7EB;
  --text: #1A1D21;
  --text-soft: #454C54;
  --grey: #6A727C;

  /* signal */
  --blue: #14488F;
  --blue-dark: #0E3266;
  --blue-surface: #E8EEF8;
  --blue-border: #BFD2EC;
  --green: #226E1D;
  --green-surface: #E9F3E8;
  --green-border: #C4DFC1;
  --amber: #8A5300;
  --amber-surface: #FBF0DF;
  --amber-border: #EBD3A8;
  --amber-stripe: #E0A94F;
  --red: #A61B1B;
  --red-surface: #FBEAEA;

  /* brand */
  --orange: #C7501C;
  --orange-dark: #A54015;
  --orange-light: #E79A75;
  --orange-surface: #FBEFE9;

  /* A step away from white: the hover ground, and days outside the month. */
  --soft: #FAFBFC;

  --r-sm: 2px;
  --r: 4px;
  --r-lg: 8px;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

/* The browser hides [hidden] with display:none, but any class here that sets a
   display beats it, because an author rule outranks the user agent. Half the
   interface toggles things with the hidden attribute, so it has to win. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.centered { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 1.5rem; line-height: 1.3; }
h2 { font-size: 1.125rem; line-height: 1.35; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.muted { color: var(--grey); }
.small { font-size: 0.875rem; }
.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
.eyebrow { font-size: 0.875rem; font-weight: 600; color: var(--grey); }

/* Spacing and a rule from the scale, so it does not end up in a style
   attribute per page -- and so the gap is the same everywhere. The content
   policy forbids inline style anyway; see the helmet block in app.js. */
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.ml-auto { margin-left: auto; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

*:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  height: 56px; padding: 0 24px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.brand-text { font-weight: 600; font-size: 1rem; }
.brand-mark {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--orange); color: var(--white);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .02em;
}
.brand-mark.large { width: 38px; height: 38px; font-size: 1rem; }

/* Mark plus wordmark, as it appears on the sign-in page. */
.brandblock { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.brandblock-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }

.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a {
  padding: 6px 12px; border-radius: var(--r);
  text-decoration: none; color: var(--text-soft);
  font-size: 0.9375rem;
}
.nav a:hover { background: var(--sunken); color: var(--text); }
.nav a.active { background: var(--blue-surface); color: var(--blue); font-weight: 500; }
.logout { display: flex; }

/* The language switch. Two words, the current one not a button: a button that
   does nothing when you press it is worse than no button. */
.langswitch { display: flex; align-items: center; gap: 4px; }
.langswitch-current {
  padding: 4px 8px; border-radius: var(--r);
  font-size: 0.8125rem; font-weight: 600;
  background: var(--sunken); color: var(--text);
}
.langswitch button {
  font: inherit; font-size: 0.8125rem;
  padding: 4px 8px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--blue);
  cursor: pointer;
}
.langswitch button:hover { background: var(--sunken); }
.langswitch-blank { justify-content: center; margin-top: 20px; }

/* ---------- frame ---------- */
.shell { max-width: 1100px; margin: 0 auto; padding: 24px 24px 64px; }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px 20px;
}
.card h2 { margin-bottom: 12px; }
/* Two cards stacked: without this rule they run into each other and read as
   one card with a line through it. */
.card + .card { margin-top: 16px; }
.narrow { max-width: 520px; }

/* The page heading is a row, not a stack. Without the flex the button in the
   top right (New account, Request something new) dropped below the lead text
   and sat against it on the left. */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.lead { margin: 4px 0 0; color: var(--grey); font-size: 0.9375rem; }

.stat {
  display: block; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  text-decoration: none; color: inherit;
}
.stat:hover { border-color: var(--grey); }
.stat-value { display: block; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { display: block; font-size: 0.875rem; color: var(--grey); margin-top: 2px; }

.footer {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px 32px;
  display: flex; justify-content: space-between;
  font-size: 0.8125rem; color: var(--grey);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 0.9375rem; font-weight: 500;
  padding: 8px 16px; min-height: 40px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--white); color: var(--text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--sunken); border-color: var(--grey); color: var(--text); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--sunken); border-color: transparent; }
.btn-block { width: 100%; justify-content: center; }
.btn-small { min-height: 32px; padding: 4px 12px; font-size: 0.875rem; }

/* ---------- input ---------- */
.stack { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; color: var(--text-soft); }
input, select, textarea {
  font: inherit; font-size: 0.9375rem; color: var(--text);
  padding: 8px 12px; min-height: 40px;
  border: 1px solid var(--grey); border-radius: var(--r);
  background: var(--white); width: 100%;
}
textarea { resize: vertical; min-height: 80px; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; max-width: 440px; }
.field-heading { font-size: 0.9375rem; font-weight: 600; margin: 24px 0 8px; }

/* ---------- signing in ---------- */
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 32px;
}
.login-card .lead { margin-bottom: 20px; }

/* ---------- data ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th {
  text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--text-soft);
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--border);
}
.table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border-light); }
.table .right { text-align: right; }
.row-muted td { color: var(--grey); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.list li:last-child { border-bottom: none; }
/* The trailing item of a row sits right: a time, a badge, a note. Without this
   the label hangs against the name and the column edge means nothing. */
.list li > time:last-child,
.list li > .badge:last-child,
.list li > .muted:last-child { margin-left: auto; }

.detail { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 0; font-size: 0.9375rem; }
.detail dt { color: var(--grey); }
.detail dd { margin: 0; }

/* Status: colour and a word, never colour alone. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 500;
  padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--text-soft);
  white-space: nowrap;
}
.badge-active, .badge-ok { background: var(--green-surface); color: var(--green); }
.badge-onboarding, .badge-paused { background: var(--amber-surface); color: var(--amber); }
.badge-failed, .badge-rejected, .badge-offboarded { background: var(--red-surface); color: var(--red); }
.badge-admin { background: var(--blue-surface); color: var(--blue); }

.flash {
  padding: 12px 16px; margin-bottom: 16px; font-size: 0.9375rem;
  border: 1px solid var(--border); border-left: 4px solid var(--grey);
  border-radius: var(--r); background: var(--white);
}
.flash-success { border-left-color: var(--green); background: var(--green-surface); color: var(--green); }
.flash-error { border-left-color: var(--red); background: var(--red-surface); color: var(--red); }

/* What changed since this person last looked. Amber rather than red: something
   happened that they should know about, not an alarm. It clears once the
   planning page has been opened, so there is nothing to dismiss. */
.news { border-left: 3px solid var(--amber); }
.news-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.news-list li { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.news-list .muted { display: block; font-size: 0.875rem; margin-top: 2px; }

/* ---------- head of the client overview ---------- */
.overview-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.overview-sub { margin: 4px 0 0; color: var(--grey); font-size: 0.9375rem; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 500;
  padding: 4px 12px; border-radius: var(--r-sm);
  background: var(--green-surface); color: var(--green);
}
.summary { font-size: 1.125rem; line-height: 1.5; max-width: 52ch; margin: 0 0 20px; }

/* ---------- credit ---------- */
.credits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  margin-bottom: 20px;
}
.credit-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px 20px;
}
.credit-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.credit-name { font-size: 0.9375rem; font-weight: 600; }
.credit-figure { font-size: 0.875rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.credit-figure strong { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.credit-state { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 0.8125rem; color: var(--grey); }
.credit-state .emphasis { color: var(--amber); font-weight: 500; }

/* The same credit on a client page, with the expiry rule alongside. Same bar
   and same keys as the client sees: two drawings of the same numbers would
   have two pages saying different things about one thing. */
.credit-list { display: grid; gap: 20px; }
.credit-row { display: grid; gap: 8px; }
.credit-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.credit-row-name { font-size: 0.9375rem; font-weight: 600; }
.credit-row-figures { font-size: 0.875rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.credit-row-figures strong { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.credit-row-state { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8125rem; color: var(--grey); }
.credit-row-expiry { font-size: 0.8125rem; color: var(--text-soft); }
.credit-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-top: 4px; font-size: 0.8125rem; color: var(--grey);
  border-top: 1px solid var(--border-light);
}
.credit-legend span { display: inline-flex; align-items: center; gap: 8px; }
.credit-year { font-size: 0.9375rem; font-weight: 600; margin: 20px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.credit-year:first-of-type { margin-top: 12px; }

.hatch-defs { position: absolute; width: 0; height: 0; }
.hatch-ground { fill: var(--amber-surface); }
.hatch-stripe { fill: var(--amber-stripe); }

.meter { display: block; width: 100%; height: 8px; border-radius: var(--r-sm); overflow: hidden; }
.meter-left { fill: var(--border-light); }
.meter-used { fill: var(--orange); }
.meter-scheduled { fill: var(--orange-light); }
.meter-seam { fill: var(--surface); }

.key { width: 10px; height: 10px; border-radius: var(--r-sm); display: inline-block; flex: 0 0 auto; }
.key-used { background: var(--orange); }
.key-scheduled { background: var(--orange-light); }
.key-requested {
  background-color: var(--amber-surface);
  background-image: repeating-linear-gradient(45deg, var(--amber-stripe) 0 3px, transparent 3px 6px);
}
.key-left { background: var(--border-light); }

.buttonrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.buttonrow .muted { font-size: 0.875rem; }

/* ---------- calendar ---------- */
.cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.cal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.cal-head h2 { font-size: 1.125rem; }
.cal-count { margin: 2px 0 0; font-size: 0.875rem; color: var(--grey); }
.cal-nav { display: flex; gap: 8px; }
.cal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--white); color: var(--text);
  text-decoration: none; font-size: 0.9375rem;
}
.cal-btn:hover { background: var(--sunken); border-color: var(--grey); }

/* Picking a month directly. Reaching next spring used to be six clicks on the
   arrow; the arrows stay for stepping one at a time, and this opens for
   anything further away. */
.cal-pick { position: relative; }
.cal-pick > summary { list-style: none; cursor: pointer; }
.cal-pick > summary::-webkit-details-marker { display: none; }
.cal-pick[open] > summary { background: var(--sunken); border-color: var(--grey); }

.cal-pick-panel {
  position: absolute; z-index: 10; right: 0; margin-top: 4px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px;
  padding: 16px; min-width: 16rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  /* The one shadow in the stylesheet, because this floats over the grid and
     a border alone does not say which layer it is on. */
  box-shadow: 0 2px 8px rgba(26, 29, 33, .12);
}
.cal-pick-panel label { font-size: 0.875rem; color: var(--text-soft); }
.cal-pick-panel select { width: 100%; min-height: 36px; }
.cal-pick-panel button { grid-column: 1 / -1; justify-content: center; }

@media (max-width: 760px) {
  .cal-head { flex-wrap: wrap; }
  .cal-nav { flex-wrap: wrap; }
}

.cal-grid {
  display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr));
  background: var(--border-light); gap: 1px;
  border-top: 1px solid var(--border-light);
}
.cal-corner, .cal-dayname {
  background: var(--sunken); padding: 8px 12px;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-soft);
}
.cal-corner { text-align: center; padding-left: 0; padding-right: 0; color: var(--grey); }
.cal-dayname.cal-weekend { color: var(--grey); }

.cal-week { background: var(--sunken); display: flex; justify-content: center; padding: 10px 0; }
.cal-weekno { font-size: 0.8125rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.cal-week-now { background: var(--blue-surface); }
.cal-week-now .cal-weekno { color: var(--blue); font-weight: 600; }

.cal-day {
  background: var(--surface); min-height: 104px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
}
.cal-day.cal-weekend, .cal-day-outside { background: var(--soft); }
.cal-day-outside .cal-daynum { color: var(--border); }
.cal-daynum { font-size: 0.875rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cal-day-today .cal-daynum {
  color: var(--white); background: var(--blue);
  width: 24px; height: 24px; border-radius: 999px; /* unslop-ignore: today is a dot */
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8125rem;
}
.cal-day-bookable { cursor: pointer; }
.cal-day-bookable:hover { background: var(--blue-surface); }
.cal-plus { margin-top: auto; font-size: 0.8125rem; color: var(--blue); opacity: 0; }
.cal-day-bookable:hover .cal-plus, .cal-day-bookable:focus-visible .cal-plus { opacity: 1; }

/* Signal colours: blue is planned, green is done, amber sits with us. */
.cal-item, .cal-band {
  display: block; width: 100%; font: inherit; text-align: left;
  font-size: 0.8125rem; line-height: 1.3; font-weight: 500;
  padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item-scheduled { background: var(--blue-surface); border-color: var(--blue-border); color: var(--blue); }
.cal-item-completed { background: var(--green-surface); border-color: var(--green-border); color: var(--green); }
.cal-item:hover, .cal-band:hover { filter: brightness(.97); }
.cal-item.is-open, .cal-band.is-open { outline: 2px solid var(--blue); outline-offset: 1px; }

.cal-band {
  min-height: 24px; color: var(--amber);
  background-color: var(--amber-surface);
  background-image: repeating-linear-gradient(45deg, rgba(224,169,79,.55) 0 4px, transparent 4px 8px);
  border-color: var(--amber-border); border-left-width: 0; border-right-width: 0; border-radius: 0;
}
.cal-band-start { border-left-width: 3px; border-left-color: var(--amber); border-radius: var(--r-sm) 0 0 var(--r-sm); }

.cal-detail { margin: 16px 20px; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--r); padding: 16px; }
.cal-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cal-close { border: 0; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--grey); }
.cal-close:hover { color: var(--text); }
.cal-detail-when { margin-top: 2px; font-size: 0.9375rem; color: var(--text-soft); }
.cal-detail-state { margin-top: 8px; font-size: 0.875rem; font-weight: 500; color: var(--blue); }
.cal-detail-note { margin-top: 4px; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 12px 20px 16px; font-size: 0.8125rem; color: var(--grey);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 8px; }
/* The calendar gets its own keys: it uses the signal colours, the credit bars
   use the brand orange. One legend for both would be a lie. */
.cal-key {
  width: 12px; height: 12px; border-radius: var(--r-sm);
  display: inline-block; flex: 0 0 auto; border: 1px solid transparent;
}
.cal-key-scheduled { background: var(--blue-surface); border-color: var(--blue-border); }
.cal-key-completed { background: var(--green-surface); border-color: var(--green-border); }
.cal-key-requested {
  background-color: var(--amber-surface); border-color: var(--amber-border);
  background-image: repeating-linear-gradient(45deg, rgba(224,169,79,.55) 0 3px, transparent 3px 6px);
}

/* ---------- planning ----------
   The page leads with what comes next, at a size you can read across a desk,
   and the rest is a list underneath. Before this everything on the page had
   the same weight, so the one thing a client opens the page for -- what is
   happening and when -- had to be found rather than read. */
.next { border-left: 3px solid var(--orange); }
.next-line {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: 4px;
}
.next-what { font-size: 1.25rem; }
.next-when { margin-top: 2px; font-size: 1rem; color: var(--text-soft); }
.next-note { margin-top: 8px; max-width: 48ch; }
.next-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.next-relative { font-size: 1.125rem; font-weight: 600; color: var(--orange-dark); }

.plan { list-style: none; margin: 0; padding: 0; }
.plan-month {
  font-size: 0.875rem; font-weight: 600; color: var(--grey);
  padding: 16px 0 4px;
}
.plan-month:first-child { padding-top: 0; }
.plan-row {
  display: grid; grid-template-columns: 76px 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.plan-row:last-child { border-bottom: none; }
.plan-date { display: flex; flex-direction: column; gap: 1px; }
.plan-day { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-week { font-size: 0.75rem; }
.plan-what { display: flex; flex-direction: column; gap: 1px; }
.plan-kind { font-size: 0.9375rem; font-weight: 500; }
.plan-side { display: flex; align-items: center; gap: 12px; }
/* "in 6 weeks" should not break mid-phrase: half a sentence on two lines reads
   as something broken rather than something wrapped. */
.plan-side > .muted { white-space: nowrap; }
/* A quiet plus rather than a second button per row: with one on every line the
   list stops reading as a list and starts reading as a toolbar. */
.plan-add {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--blue); text-decoration: none; font-weight: 600; line-height: 1;
}
.plan-add:hover { background: var(--blue-surface); border-color: var(--blue); }

/* ---------- this planning in your own calendar ---------- */
.subscribe { border-left: 3px solid var(--blue); }
.feed-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.feed-row input { flex: 1 1 22rem; background: var(--sunken); color: var(--text-soft); }

/* A fold for the part that is a look-up rather than news. */
.fold > summary {
  cursor: pointer; font-size: 0.9375rem; font-weight: 600;
  list-style-position: outside;
}
.fold > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 620px) {
  .plan-row { grid-template-columns: 64px 1fr; }
  .plan-side { grid-column: 2; padding-top: 4px; }
  .next-side { align-items: flex-start; }
}

/* ---------- request form ---------- */
.flow { max-width: 680px; }
.step { margin-bottom: 32px; }
.step-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.step-no { font-size: 0.875rem; font-weight: 600; color: var(--grey); }
.step-head h2 { font-size: 1.125rem; }
.step-hint { margin: 8px 0 0; font-size: 0.875rem; color: var(--grey); }
.step-hint-loose { margin-top: 12px; }

.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-box {
  display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 0 12px;
  padding: 12px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--white);
}
.choice-box::before {
  content: ""; grid-row: span 2;
  width: 18px; height: 18px; margin-top: 1px;
  border: 1px solid var(--grey); border-radius: var(--r-sm);
  background: var(--white);
}
.choice input[type="radio"] + .choice-box::before { border-radius: 999px; } /* unslop-ignore: a radio is round */
.choice-box:hover { border-color: var(--grey); background: var(--soft); }
.choice input:checked + .choice-box { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-surface); }
.choice input:checked + .choice-box::before { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px var(--white); }
.choice input:focus-visible + .choice-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.choice input:disabled + .choice-box { opacity: .5; cursor: not-allowed; background: var(--sunken); }
.choice-title { font-size: 0.9375rem; font-weight: 500; }
.choice-note { grid-column: 2; font-size: 0.875rem; color: var(--grey); }

/* A week that already has something of the same kind in it. */
.choice-taken { color: var(--amber); }
.choice.is-taken .choice-box { opacity: .55; cursor: not-allowed; background: var(--sunken); }

.date-field { max-width: 240px; margin-top: 16px; }
.flow-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 20px; }
.flow-foot p { flex-basis: 100%; margin: 0; max-width: 60ch; }

/* ---------- development sign-in ---------- */
.dev-buttons { display: flex; flex-direction: column; gap: 6px; }
.dev-buttons .btn { justify-content: space-between; text-align: left; }
.dev-buttons .muted { font-size: 0.8125rem; font-weight: 400; }

/* Requests taken off the diary, with the reason alongside. The client had an
   email about it; whoever signs in later should find it here too. */
.dropped { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.dropped li {
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--amber-surface);
}
.dropped-what { margin: 0; font-weight: 600; }
.dropped-reason { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; }

/* The week picker.
   The same calendar as on the overview, but you pick a week and not a day.
   The whole row is the button: the week number on its own is a box a few tens
   of pixels wide, and the row is what someone looks at while picking a week.
   On the right, per row, whether it can be picked and why not. */
.wp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.wp-nav { display: flex; align-items: center; gap: 8px; }
.wp-month { font-weight: 600; min-width: 9rem; }
.wp-chosen { margin: 0; color: var(--grey); font-size: 0.875rem; }
.wp-chosen-set { color: var(--text); font-weight: 600; }

.wp-grid {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.wp-row {
  display: grid;
  grid-template-columns: 3rem repeat(7, 1fr) 9.5rem;
  border-top: 1px solid var(--border-light);
}
.wp-grid > .wp-row:first-child { border-top: 0; }
.wp-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.wp-row > .cal-day,
.wp-row > .cal-corner,
.wp-row > .cal-dayname { border-right: 1px solid var(--border-light); }

/* The row you can pick: it answers to the pointer, and the whole row colours
   in as soon as it is on. */
.wp-can { cursor: pointer; }
.wp-can:hover { background: var(--orange-surface); }
.wp-can:hover .wp-no { background: var(--orange-light); color: var(--text); }

.wp-can:has(input:checked) {
  background: var(--orange-surface);
  box-shadow: inset 3px 0 0 var(--orange);
}
.wp-can:has(input:checked) .wp-no {
  background: var(--orange);
  color: var(--white);
}
.wp-can:has(input:checked) .wp-no-digit { display: none; }
.wp-can:has(input:checked) .wp-check { display: grid; }
.wp-can:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }

.wp-cannot { background: var(--page); cursor: default; }
.wp-cannot .cal-daynum,
.wp-cannot .cal-day { color: var(--border); }

.wp-no {
  display: grid;
  place-items: center;
  min-height: 60px;
  border-right: 1px solid var(--border-light);
  background: var(--sunken);
  color: var(--text-soft);
  font-size: 0.875rem;
  font-weight: 600;
}
.wp-cannot .wp-no { background: transparent; color: var(--border); }
.wp-check { display: none; place-items: center; }

.wp-status {
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.wp-weeklabel { color: var(--text-soft); font-weight: 600; }
.wp-reason { color: var(--grey); }
.wp-status-off .wp-weeklabel { color: var(--grey); font-weight: 400; }
.wp-status-off .wp-reason { color: var(--grey); }
/* Two classes, because .wp-status-off .wp-reason above is two classes as well
   and would otherwise win -- and then "full on our side" sat in the same grey
   as the rest. */
.wp-status .wp-reason-full { color: var(--red); font-weight: 600; }
.wp-status .wp-reason-nearly { color: var(--amber); font-weight: 600; }
.wp-status .wp-reason-ok { color: var(--orange-dark); font-weight: 600; }

/* What this client already has that week. No time and no name: all that
   matters is seeing that the week is taken. */
.wp-own {
  display: block;
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: var(--r-sm);
  background: var(--blue-surface);
  color: var(--blue);
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px) {
  .cal-grid { grid-template-columns: 32px repeat(7, minmax(0, 1fr)); }
  .cal-day { min-height: 72px; padding: 4px; }
  .cal-item, .cal-band { font-size: 0.75rem; padding: 4px; }
  .cal-plus { display: none; }
}

/* On a narrow screen the explanation moves below the days instead of beside. */
@media (max-width: 760px) {
  .wp-row { grid-template-columns: 2.5rem repeat(7, 1fr); }
  .wp-status { grid-column: 1 / -1; padding: 4px 12px 8px; }
  .wp-header .cal-dayname:last-child { display: none; }
}

/* ---------- who can sign in at this organisation ---------- */
.people { list-style: none; margin: 16px 0 0; padding: 0; }
.person {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border);
}
.person-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-name { font-weight: 600; }
.person-self { font-weight: 400; color: var(--grey); }
.person-mail { font-size: 0.875rem; color: var(--grey); overflow-wrap: anywhere; }
.person-access { font-size: 0.875rem; color: var(--text-soft); }
/* A switched-off account stays listed, so asking twice is obviously pointless. */
.person-off .person-who, .person-off .person-access { color: var(--grey); }

/* The request sits folded away: it is the rare act on this page, not the first one. */
.person-remove { grid-column: 1 / -1; }
.person-remove > summary { display: inline-flex; cursor: pointer; list-style: none; }
.person-remove > summary::-webkit-details-marker { display: none; }
.person-remove[open] > summary { background: var(--sunken); border-color: var(--grey); }
.person-remove > form { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--border); }
.person-remove-lead { margin: 0; font-size: 0.875rem; color: var(--text-soft); }

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