/* ============================================================
   Seith design system: component styles for the Razor components.
   Load order (SeithDesignHead does this): seith-fonts.css, design/tokens.css, design/bundle.css, this file.
   --ease and --dur-* come from bundle.css.

   Spec: Design/README.md and Design/components/<Component>/README.md.
   The React bundle in Design/components styles itself with inline JS, so there is
   nothing to link here: these rules are the CSS port of that spec.
   Prefix .seith- keeps us clear of Umbraco/MudBlazor/Bootstrap class names.
   Plain HTML (Umbraco partials) can use any class below directly; the Razor components only emit these classes.
   ============================================================ */

/* The status text tints are given in the README for concrete surfaces; tokens.json has no variable for them. */
:root {
  --seith-go-text: #3e6120;
  --seith-warn-text: #7a5800;
  --seith-stop-text: #8e1d15;
}

/* ---------- Button ---------- */

.seith-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  cursor: pointer;
  text-decoration: none; /* the class is also used on <a> */
  transition: background-color var(--dur-micro) var(--ease), filter var(--dur-micro) var(--ease);
}

.seith-btn:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* Petrol on ink is only ~2:1, so the focus ring switches to petrol-light on dark grounds. */
.seith-btn--on-ink:focus-visible {
  outline-color: var(--color-petrol-light);
}

.seith-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Hover shifts the fill, press darkens by ~12%, never both effects at once and never a scale. */
.seith-btn:not(:disabled):active {
  filter: brightness(0.88);
}

.seith-btn--primary {
  background: var(--color-petrol);
  color: var(--fg-on-petrol);
}
.seith-btn--primary:not(:disabled):hover { background: var(--color-petrol-2); color: var(--fg-on-petrol); }
.seith-btn--primary:not(:disabled):active { background: var(--color-petrol-3); color: var(--fg-on-petrol); filter: none; }

.seith-btn--secondary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.seith-btn--secondary:not(:disabled):hover { background: var(--color-slate-2); color: var(--color-paper); }
.seith-btn--secondary.seith-btn--on-ink {
  background: var(--color-rail);
  color: var(--fg1-on-ink);
}
.seith-btn--secondary.seith-btn--on-ink:not(:disabled):hover { background: var(--color-rail-2); color: var(--fg1-on-ink); }

.seith-btn--ghost {
  background: transparent;
  color: var(--fg1-on-paper);
  border-color: var(--color-paper-line);
}
.seith-btn--ghost:not(:disabled):hover { background: var(--color-paper-2); color: var(--fg1-on-paper); }
.seith-btn--ghost.seith-btn--on-ink {
  color: var(--fg1-on-ink);
  border-color: var(--color-rail);
}
.seith-btn--ghost.seith-btn--on-ink:not(:disabled):hover { background: var(--color-rail); color: var(--fg1-on-ink); }

/* Destructive machine actions: ALL CAPS mono label ("STOP MACHINE"). */
.seith-btn--stop {
  background: var(--color-stop);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.seith-btn--stop:not(:disabled):hover { background: var(--color-stop-2); color: var(--color-paper); }

/* Full width. justify-content centers the label, because the button is a flex box. */
.seith-btn--block {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
}

/* Button of an external identity provider ("Sign in with Microsoft"): white ground, as the provider asks. */
.seith-btn--provider {
  background: #fff;
  color: var(--fg1-on-paper);
  border-color: var(--color-paper-line);
}
.seith-btn--provider:not(:disabled):hover { background: var(--color-paper); }

/* The mark is drawn with gradients: no image, no request to the provider. The four squares are the Microsoft colours. */
.seith-provider-mark {
  flex: none;
  width: 16px;
  height: 16px;
}
.seith-provider-mark--microsoft {
  background:
    linear-gradient(#f25022, #f25022) 0 0 / 7px 7px no-repeat,
    linear-gradient(#7fba00, #7fba00) 9px 0 / 7px 7px no-repeat,
    linear-gradient(#00a4ef, #00a4ef) 0 9px / 7px 7px no-repeat,
    linear-gradient(#ffb900, #ffb900) 9px 9px / 7px 7px no-repeat;
}
/* ---------- Status badge ---------- */

.seith-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: var(--seith-badge-bg);
  color: var(--seith-badge-fg);
}

/* The dot is decoration; the word carries the meaning. */
.seith-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--seith-badge-dot);
}

.seith-badge--go   { --seith-badge-bg: rgba(79, 122, 40, 0.15);  --seith-badge-fg: var(--seith-go-text);   --seith-badge-dot: var(--color-go); }
.seith-badge--warn { --seith-badge-bg: rgba(217, 154, 0, 0.18);  --seith-badge-fg: var(--seith-warn-text); --seith-badge-dot: var(--color-warn); }
.seith-badge--stop { --seith-badge-bg: rgba(179, 36, 27, 0.15);  --seith-badge-fg: var(--seith-stop-text); --seith-badge-dot: var(--color-stop); }
.seith-badge--idle { --seith-badge-bg: var(--color-paper-2);     --seith-badge-fg: var(--fg2-on-paper);    --seith-badge-dot: var(--color-graphite); }

/* On ink the paper tints are unreadable (dark red on dark teal), so: light text, tinted fill, lighter -2 dot.
   Not in the design spec, which only defines paper badges. */
.seith-badge--on-ink { --seith-badge-fg: var(--fg1-on-ink); }
.seith-badge--on-ink.seith-badge--go   { --seith-badge-bg: rgba(106, 154, 58, 0.22);  --seith-badge-dot: var(--color-go-2); }
.seith-badge--on-ink.seith-badge--warn { --seith-badge-bg: rgba(232, 176, 32, 0.20);  --seith-badge-dot: var(--color-warn-2); }
.seith-badge--on-ink.seith-badge--stop { --seith-badge-bg: rgba(204, 65, 54, 0.28);   --seith-badge-dot: var(--color-stop-2); }
.seith-badge--on-ink.seith-badge--idle { --seith-badge-bg: var(--color-rail);         --seith-badge-fg: var(--fg2-on-ink); }

/* r-pill is reserved for dots and this capsule. */
.seith-badge--live {
  --seith-badge-bg: var(--color-ink);
  --seith-badge-fg: var(--fg1-on-ink);
  --seith-badge-dot: var(--color-petrol-light);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

/* ---------- Panel ---------- */

.seith-panel {
  --seith-panel-line: var(--color-paper-line);
  background: var(--color-paper);
  color: var(--fg1-on-paper);
  border: 1px solid var(--seith-panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* Dark data card: hairline instead of shadow. */
.seith-panel--ink {
  --seith-panel-line: var(--color-rail);
  background: var(--color-panel);
  color: var(--fg1-on-ink);
  box-shadow: none;
}

.seith-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--seith-panel-line);
}

.seith-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg2-on-paper);
}
.seith-panel--ink .seith-panel__title { color: var(--fg2-on-ink); }

.seith-panel__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.seith-panel__body { padding: 18px; }

/* ---------- Form fields ---------- */

.seith-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seith-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-slate);
}

.seith-input,
.seith-select {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg1-on-paper);
  transition: border-color var(--dur-micro) var(--ease);
}

/* Data entry (IDs, thresholds): mono with tabular figures. */
.seith-input--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* An outline, not a box-shadow: it survives Windows High Contrast (forced-colors), shadows do not. */
.seith-input:focus-visible,
.seith-select:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
  border-color: var(--color-petrol);
}

/* Blazor EditForm marks fields; Umbraco forms can add the same class. */
.seith-input.invalid,
.seith-select.invalid {
  border-color: var(--color-stop);
}

.seith-input:disabled,
.seith-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* A value that the person cannot change, for example the e-mail address of a work account. Unlike a disabled input it stays at full
   contrast, in the tab order and in the posted form, so a reader of the screen and a keyboard user find it. */
.seith-input[readonly] {
  background: var(--color-paper);
  cursor: default;
}

.seith-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  color: var(--color-slate);
}

.seith-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--seith-stop-text);
}

/* ---------- Checkbox ---------- */

.seith-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The native box keeps keyboard, forced-colors and screen reader behaviour; accent-color paints it petrol. */
.seith-check__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-petrol);
  cursor: pointer;
}

.seith-check__input:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

.seith-check__input:disabled { cursor: not-allowed; }

.seith-check__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: var(--lh-snug);
  color: var(--fg1-on-paper);
  cursor: pointer;
}

/* ---------- Alert: a message above a form or a page ---------- */

.seith-alert {
  --seith-alert-accent: var(--color-petrol);
  --seith-alert-bg: rgba(15, 94, 99, 0.08);
  padding: 12px 14px;
  border: 1px solid var(--color-paper-line);
  border-left: 3px solid var(--seith-alert-accent);
  border-radius: var(--r-sm);
  background: var(--seith-alert-bg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: var(--lh-snug);
  color: var(--fg1-on-paper);
}

.seith-alert--info    { --seith-alert-accent: var(--color-petrol); --seith-alert-bg: rgba(15, 94, 99, 0.08); }
.seith-alert--success { --seith-alert-accent: var(--color-go);   --seith-alert-bg: rgba(79, 122, 40, 0.12); }
.seith-alert--warn    { --seith-alert-accent: var(--color-warn); --seith-alert-bg: rgba(217, 154, 0, 0.14); }
.seith-alert--stop    { --seith-alert-accent: var(--color-stop); --seith-alert-bg: rgba(179, 36, 27, 0.10); }

.seith-alert__list {
  margin: 0;
  padding-left: 18px;
}

/* ---------- Auth pages: sign in and the account pages (centered card on the concrete ground) ---------- */

.seith-auth {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--sp-7) var(--sp-4);
}

.seith-auth__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  box-sizing: border-box;
  width: min(100%, 440px);
  min-width: 0;
  padding: var(--sp-6);
  background: var(--color-paper-2);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.seith-auth__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.seith-auth__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-petrol);
}

.seith-auth__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg1-on-paper);
}

.seith-auth__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg2-on-paper);
}

.seith-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.seith-auth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Other ways to sign in, set off by a hairline. */
.seith-auth__providers {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-paper-line);
}
/* ---------- Forms with sections (register): a wider card, and sections that sit side by side on a wide screen ---------- */

.seith-auth__card--medium {
  width: min(100%, 560px);
}

.seith-auth__card--wide {
  width: min(100%, 880px);
}

.seith-form-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 760px) {
  .seith-form-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.seith-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.seith-form-section__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-petrol);
}

.seith-form-section__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2-on-paper);
}

/* Two short fields in one row (postal code and city). One column on a narrow screen. */
.seith-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 520px) {
  .seith-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Details and settings (account page): labels with values, and a row with a text and an action ---------- */

.seith-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}

.seith-detail-list__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.seith-detail-list__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg2-on-paper);
}

.seith-detail-list__value {
  margin: 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg1-on-paper);
  overflow-wrap: anywhere;
}

/* A value that is an id or a code. One click selects all of it, so it is easy to copy. */
.seith-detail-list__value--mono {
  font-family: var(--font-mono);
  font-size: 14px;
  user-select: all;
}

/* A name in a head or in a list row (a domain, an e-mail address): the body face, in the case it was written. It breaks where it must. */
.seith-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--fg1-on-paper);
  text-transform: none;
  overflow-wrap: anywhere;
}

/* A form stack with less space between its parts: a block inside a panel (one domain, one challenge). */
.seith-form-stack--tight {
  gap: var(--sp-3);
}

/* A part of a page that opens and closes (native details): a bordered box with the summary as its title. */
.seith-disclosure {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
  background: #fff;
}

.seith-disclosure > summary {
  cursor: pointer;
  font-weight: var(--w-medium);
}

.seith-disclosure[open] > summary {
  margin-bottom: var(--sp-2);
}

.seith-disclosure__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.seith-disclosure__body > p {
  margin: 0;
}

@media (min-width: 520px) {
  .seith-detail-list__item {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-5);
  }

  .seith-detail-list__label {
    flex: 0 0 150px;
  }
}

/* One setting: the title and the text on one side, the action on the other. They stack on a narrow screen. */
.seith-setting {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-paper-line);
}

.seith-setting__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg1-on-paper);
}

.seith-setting__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2-on-paper);
}

@media (min-width: 520px) {
  .seith-setting {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }
}

/* ---------- Data table: hairlines, no zebra, tabular numerals ---------- */

.seith-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--fg1-on-paper);
}

.seith-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-paper-line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-slate);
}

.seith-table td {
  padding: 10px;
  border-bottom: 1px solid var(--color-paper-line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.seith-table tbody tr:last-child td { border-bottom: none; }

.seith-table .seith-table__num { text-align: right; }
.seith-table .seith-table__id { color: var(--color-petrol); }

/* Status dot for table cells; always followed by the status word. */
.seith-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: var(--r-pill);
  vertical-align: middle;
}
.seith-dot--go   { background: var(--color-go); }
.seith-dot--warn { background: var(--color-warn); }
.seith-dot--stop { background: var(--color-stop); }

/* ---------- Logo and icon (inline SVG) ---------- */

.seith-logo {
  display: inline-block;
  height: var(--seith-logo-height, 40px);
  line-height: 0;
}
.seith-logo > svg {
  display: block;
  height: 100%;
  width: auto;
}

.seith-icon {
  display: inline-flex;
  flex: none;
  width: var(--seith-icon-size, 16px);
  height: var(--seith-icon-size, 16px);
}
.seith-icon > svg {
  width: 100%;
  height: 100%;
}

/* ---------- Site shell: skip link, header, language switch and footer (the frame of the sign-in and account pages) ---------- */

.seith-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--fg1-on-paper);
}

/* The base of a page on library components: the paper ground, the body face and border-box sizing. A page opts in with data-theme="default"
   on the shell. */
.seith-shell[data-theme="default"] {
  margin: 0;
  background: var(--color-paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.seith-shell[data-theme="default"],
.seith-shell[data-theme="default"] *,
.seith-shell[data-theme="default"] *::before,
.seith-shell[data-theme="default"] *::after {
  box-sizing: border-box;
}

.seith-shell__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The skip link points here. The target gets the focus without a ring, because it is not a control. */
.seith-shell__main:focus {
  outline: none;
}

.seith-skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-3);
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--color-petrol);
  border-radius: var(--r-sm);
  background: var(--color-paper-2);
  color: var(--fg1-on-paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.seith-skip-link:focus {
  top: var(--sp-3);
}

.seith-shell-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* The line is a shadow and not a border, so the header is exactly --rail-top high. A border would add 1px, and the frame (the rail
     and the page under the header) would be 1px taller than the window: a scrollbar on a page that has no content to scroll. */
  box-shadow: inset 0 -1px 0 var(--color-rail);
  background: rgba(20, 34, 36, 0.94);
  background: color-mix(in srgb, var(--color-ink) 94%, transparent);
  backdrop-filter: blur(12px);
}

.seith-shell-header__inner,
.seith-shell-footer__inner {
  box-sizing: border-box;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding-inline: var(--sp-5);
}

.seith-shell-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--rail-top);
}

.seith-shell-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-4);
}

.seith-shell-brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg1-on-ink);
  text-decoration: none;
}

.seith-shell-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2-on-ink);
  text-decoration: none;
}

.seith-shell-link:hover {
  color: var(--fg1-on-ink);
}

/* Focus rings on the dark header use petrol-light, as the button does: petrol on ink is only ~2:1. */
.seith-shell-brand:focus-visible,
.seith-shell-link:focus-visible,
.seith-lang__link:focus-visible,
.seith-shell-signout__button:focus-visible {
  outline: 2px solid var(--color-petrol-light);
  outline-offset: 2px;
}

.seith-shell-user {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg3-on-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.seith-shell-signout {
  margin: 0;
}

.seith-shell-signout__button {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg2-on-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}

.seith-shell-signout__button:hover {
  color: var(--fg1-on-ink);
  border-color: var(--color-rail-2);
  background: rgba(237, 238, 235, 0.06);
}

/* Language switch: the language in use is bold and is no link. It works without JavaScript. */
.seith-lang__list {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seith-lang__link {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2-on-ink);
  text-decoration: none;
}

a.seith-lang__link:hover {
  color: var(--fg1-on-ink);
  border-bottom-color: currentColor;
}

.seith-lang__link--current {
  color: var(--fg1-on-ink);
  font-weight: 700;
}

.seith-shell-footer {
  border-top: 1px solid var(--color-paper-line);
  background: rgba(237, 238, 235, 0.88);
  background: color-mix(in srgb, var(--color-paper) 88%, transparent);
}

.seith-shell-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  min-height: 64px;
  padding-block: var(--sp-2);
  color: var(--fg2-on-paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.seith-shell-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.seith-shell-footer__links a {
  color: var(--color-petrol);
  text-decoration: none;
}

.seith-shell-footer__links a:hover {
  text-decoration: underline;
}

.seith-shell-footer__links a:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* A narrow header keeps the account links on one row, so the name leaves the screen. It stays in the page for screen readers. */
@media (max-width: 700px) {
  .seith-shell-header__actions {
    column-gap: var(--sp-3);
  }

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

@media (max-width: 600px) {
  .seith-shell-header__inner,
  .seith-shell-footer__inner {
    padding-inline: var(--sp-4);
  }
}


/* ---------- Application shell: page header, trail, tag, empty state, confirm action, navigation rail ----------
   The frame of the staff and customer pages of an application (IdentityService, later the backoffice and the user app).
   The top bar is the site header (seith-shell-header). Layout: seith-app__body holds the rail and the page. */

/* Small button: a row of a table, the actions of a card. */
.seith-btn--sm {
  padding: 6px 12px;
  gap: 6px;
  font-size: 13px;
}

.seith-btn--sm.seith-btn--stop {
  font-size: 11px;
}

/* ---------- Tag: a plain label for a role or a kind ---------- */

.seith-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
  background: var(--color-paper-2);
  color: var(--fg2-on-paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  white-space: nowrap;
}

.seith-tag--neutral {
  background: var(--color-paper-2);
  color: var(--fg2-on-paper);
}

.seith-tag--accent {
  border-color: rgba(15, 94, 99, 0.35);
  background: rgba(15, 94, 99, 0.1);
  color: var(--color-petrol);
}

/* Several tags in a row (the roles of a user), and text of the second rank (a cell with nothing to say). */
.seith-tag-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.seith-muted {
  color: var(--fg3-on-paper);
  font-size: 13px;
}

/* ---------- Trail above the title ---------- */

.seith-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.seith-crumbs__item + .seith-crumbs__item::before {
  content: "/";
  padding-inline: var(--sp-2);
  color: var(--color-graphite);
}

.seith-crumbs__link {
  color: var(--fg3-on-paper);
  text-decoration: none;
}

.seith-crumbs__link:hover {
  color: var(--color-petrol);
  text-decoration: underline;
}

.seith-crumbs__link:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

.seith-crumbs__current {
  color: var(--fg1-on-paper);
}

/* ---------- Page header: a petrol rule, the title in the display face, the actions at the right ---------- */

.seith-page-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 0 var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-paper-line);
}

.seith-page-head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--sp-4);
  left: 0;
  width: 4px;
  background: var(--color-petrol);
}

.seith-page-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 320px;
}

.seith-page-head__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-petrol);
}

.seith-page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--fg1-on-paper);
}

.seith-page-head__subtitle {
  margin: 0;
  max-width: 72ch;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg2-on-paper);
}

.seith-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---------- Empty state ---------- */

.seith-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--color-paper-line);
  border-radius: var(--r-md);
  text-align: center;
}

.seith-empty__icon {
  color: var(--color-graphite);
}

.seith-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg1-on-paper);
}

.seith-empty__text {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2-on-paper);
}

/* Detail at the bottom of the frame (the reference of a request). A long value breaks at any place, so it never leaves the frame. */
.seith-empty__detail {
  max-width: 100%;
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg3-on-paper);
  overflow-wrap: anywhere;
}

/* ---------- Confirm action: a button that asks before it posts ----------
   The question is a popover (the native popover attribute), so it needs no script: the button opens it, Escape and a click
   outside close it, and the Cancel button closes it too. The UA places a popover in the middle of the screen. */

.seith-confirm {
  display: inline-block;
}

.seith-confirm__panel {
  box-sizing: border-box;
  width: min(92vw, 420px);
  padding: var(--sp-5);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-md);
  background: var(--color-paper);
  color: var(--fg1-on-paper);
  box-shadow: var(--shadow-2);
  /* A popover keeps the text rules of the place where it sits in the page (a right-aligned or upper-case table cell, for example),
     so the panel names its own. */
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
}

.seith-confirm__panel::backdrop {
  background: rgba(20, 34, 36, 0.45);
}

.seith-confirm__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}

.seith-confirm__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-petrol);
}

.seith-confirm__message {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.seith-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

/* ---------- Navigation rail ---------- */

.seith-rail {
  box-sizing: border-box;
  background: var(--color-paper-2);
  border-right: 1px solid var(--color-paper-line);
}

.seith-rail__inner {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-4);
}

.seith-rail__group + .seith-rail__group {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-paper-line);
}

.seith-rail__label {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3-on-paper);
}

.seith-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seith-rail__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  border-left: 2px solid transparent;
  color: var(--fg2-on-paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}

.seith-rail__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.seith-rail__link:hover {
  background: var(--color-paper);
  color: var(--fg1-on-paper);
}

.seith-rail__link:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: -2px;
}

.seith-rail__link[aria-current="page"] {
  border-left-color: var(--color-petrol);
  background: var(--color-paper);
  color: var(--color-petrol);
}

/* ---------- The frame: rail at the left, the page at the right ---------- */

.seith-app__body {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

/* The rail fills its grid cell (its background runs to the bottom of the page), and the links inside it stay under the header while the page
   scrolls. The rail has no height of its own: the height of the frame comes from the page, so a short page never gets a scrollbar. */
.seith-app__body > .seith-rail > .seith-rail__inner {
  position: sticky;
  top: var(--rail-top);
  max-height: calc(100vh - var(--rail-top));
  overflow-y: auto;
}

.seith-app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
}

.seith-app__main:focus {
  outline: none;
}

/* The column at the right of the rail: the page, then the footer. The footer is inside it, so the grid ends at the bottom of the page and
   the sticky rail keeps its place to the end. A footer after the grid would push the rail up when it comes into view. */
.seith-app__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.seith-app__column > .seith-app__main {
  flex: 1 1 auto;
}

.seith-app__column > .seith-shell-footer .seith-shell-footer__inner {
  width: 100%;
  margin: 0;
  padding-inline: var(--sp-6);
}

/* A safety net: content that is wider than the column scrolls sideways here, and the header, the rail and the footer stay in place.
   Without it the whole window scrolls sideways, and the rail moves with it. A component that is wider than the column on purpose (a table)
   still wraps itself (seith-table-wrap). The rule is auto and not clip, so the content stays reachable and the fault stays visible.
   Nothing inside the content may use position: sticky, because it would stick to this box and not to the window. */
.seith-app__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  box-sizing: border-box;
  width: min(100%, 1240px);
  min-width: 0;
  overflow-x: auto;
}

/* The name of the application next to the logo. */
.seith-shell-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.seith-shell-product {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--color-rail-2);
  color: var(--fg3-on-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* A narrow screen: the rail becomes a strip of links under the top bar, one icon over one word, and the strip scrolls sideways. */
@media (max-width: 900px) {
  /* The strip takes its own height and the column takes the rest, so the footer stays at the bottom of the window on a short page. */
  .seith-app__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .seith-app__body > .seith-rail {
    position: sticky;
    top: var(--rail-top);
    z-index: 20;
    align-self: start;
    border-right: none;
    border-bottom: 1px solid var(--color-paper-line);
  }

  /* The strip itself sticks under the top bar, so the links inside it do not stick on their own. */
  .seith-app__body > .seith-rail > .seith-rail__inner {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .seith-rail__inner {
    flex-direction: row;
    padding-block: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .seith-rail__group {
    display: flex;
    flex: none;
  }

  .seith-rail__group + .seith-rail__group {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--color-paper-line);
  }

  .seith-rail__label {
    display: none;
  }

  .seith-rail__list {
    flex-direction: row;
    gap: 0;
  }

  .seith-rail__link {
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    box-sizing: border-box;
    width: auto;
    min-width: 84px;
    max-width: 132px;
    min-height: 56px;
    padding: var(--sp-2) var(--sp-3);
    border-left: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-regular);
    letter-spacing: var(--tracking-caps);
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: break-word;
  }

  .seith-rail__text {
    overflow-wrap: break-word;
  }

  .seith-rail__link[aria-current="page"] {
    border-left-color: transparent;
    border-bottom-color: var(--color-petrol);
  }

  .seith-app__main {
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
  }

  .seith-app__column > .seith-shell-footer .seith-shell-footer__inner {
    padding-inline: var(--sp-4);
  }

  .seith-shell-product {
    display: none;
  }
}

@media (max-width: 600px) {
  .seith-page-head {
    padding-left: var(--sp-4);
  }

  .seith-page-head__actions {
    width: 100%;
  }

  .seith-page-head__actions .seith-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ---------- Staff and customer pages: cards that lead to a page, tables in a panel, forms with sections ---------- */

/* A grid of links to the pages of an application (the dashboard). */
.seith-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.seith-nav-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  box-sizing: border-box;
  min-height: 168px;
  padding: var(--sp-5);
  border: 1px solid var(--color-paper-line);
  border-top: 3px solid var(--color-petrol);
  border-radius: var(--r-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-1);
  color: var(--fg1-on-paper);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}

.seith-nav-card:hover {
  background: var(--color-paper-2);
  border-color: var(--color-slate);
  border-top-color: var(--color-petrol);
}

.seith-nav-card:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

.seith-nav-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--color-petrol);
}

.seith-nav-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg2-on-paper);
}

.seith-nav-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.seith-nav-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.seith-nav-card__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2-on-paper);
}

/* A panel that holds a table: no padding, so the table runs to the edges. The wrapper scrolls on a narrow screen, so the page does not. */
.seith-panel--flush > .seith-panel__body {
  padding: 0;
}

.seith-table-wrap {
  overflow-x: auto;
}

/* A wide table keeps a width that reads well. On a narrow screen it scrolls inside its box and does not squeeze its columns. */
.seith-table-wrap > .seith-table {
  min-width: 720px;
}

.seith-panel--flush .seith-table th:first-child,
.seith-panel--flush .seith-table td:first-child {
  padding-left: var(--sp-4);
}

.seith-panel--flush .seith-table th:last-child,
.seith-panel--flush .seith-table td:last-child {
  padding-right: var(--sp-4);
}

.seith-table td {
  vertical-align: middle;
}

/* A cell with a name and a smaller line under it (the id of the record). A word is not broken in the middle: a wide table scrolls instead. */
.seith-table__title {
  display: block;
  overflow-wrap: break-word;
}

.seith-table__sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--fg3-on-paper);
  overflow-wrap: anywhere;
}

/* The buttons of a row, at the right end, on one line. */
.seith-table .seith-table__actions {
  text-align: right;
  white-space: nowrap;
}

.seith-table__actions .seith-actions {
  flex-wrap: nowrap;
}

.seith-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* Row states. A record that is switched off is muted. A row that the person works on is marked at its left edge. */
.seith-table tbody tr.seith-table__row--muted td {
  color: var(--fg3-on-paper);
}

.seith-table tbody tr.seith-table__row--selected td {
  background: rgba(15, 94, 99, 0.08);
}

.seith-table tbody tr.seith-table__row--selected td:first-child {
  box-shadow: inset 3px 0 0 var(--color-petrol);
}

.seith-table.seith-table--hover tbody tr:hover td {
  background: var(--color-paper-2);
}

/* A list that turns into cards on a narrow screen (finding IS-46). The wrapper measures its own width, so the table becomes cards exactly when it
   would scroll sideways: the limit below is the min-width of the table, less a hair. Each cell that has a head also carries data-label with the
   text of that head. The first cell (the name) and the cell of the buttons have no label. */
.seith-table-wrap--cards {
  container-type: inline-size;
}

@container (max-width: 719.98px) {
  .seith-table-wrap--cards > .seith-table {
    min-width: 0;
  }

  /* The heads stay for a screen reader. Each cell shows its own label instead. */
  .seith-table-wrap--cards > .seith-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .seith-table-wrap--cards > .seith-table,
  .seith-table-wrap--cards > .seith-table tr {
    display: block;
  }

  .seith-table-wrap--cards > .seith-table tbody {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .seith-table-wrap--cards > .seith-table tbody tr {
    padding: var(--sp-2) 0;
    border: 1px solid var(--color-paper-line);
    border-radius: var(--r-md);
    background: var(--color-paper);
  }

  .seith-table-wrap--cards > .seith-table.seith-table--hover tbody tr:hover {
    background: var(--color-paper-2);
  }

  /* A cell is a label and a value, side by side. The three selectors beat the padding rules of a flush panel. */
  .seith-table-wrap--cards > .seith-table td,
  .seith-table-wrap--cards > .seith-table td:first-child,
  .seith-table-wrap--cards > .seith-table td:last-child {
    display: grid;
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: none;
    text-align: left;
    white-space: normal;
  }

  .seith-table-wrap--cards > .seith-table td[data-label]::before {
    content: attr(data-label);
    grid-column: 1;
    padding-top: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-slate);
  }

  .seith-table-wrap--cards > .seith-table td[data-label] > * {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }

  /* The name leads the card, and the buttons close it, with a hairline above. Both have no label, so they take the whole width. */
  .seith-table-wrap--cards > .seith-table td:not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .seith-table-wrap--cards > .seith-table td:not([data-label]):first-child {
    padding-bottom: var(--sp-3);
  }

  .seith-table-wrap--cards > .seith-table td.seith-table__actions {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-paper-line);
  }

  .seith-table-wrap--cards > .seith-table .seith-table__actions .seith-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* The row that the person works on: the card gets the mark, not each cell. */
  .seith-table-wrap--cards > .seith-table tbody tr.seith-table__row--selected {
    border-color: var(--color-petrol);
    background: rgba(15, 94, 99, 0.08);
  }

  .seith-table-wrap--cards > .seith-table tbody tr.seith-table__row--selected td,
  .seith-table-wrap--cards > .seith-table tbody tr.seith-table__row--selected td:first-child {
    background: transparent;
    box-shadow: none;
  }
}

/* A form in a panel: the sections one under the other, and the buttons at the end (Cancel first on a wide screen, last on a narrow one). */
.seith-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

.seith-form-stack > .seith-form-section + .seith-form-section {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-paper-line);
}

.seith-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-paper-line);
}

/* A checkbox with a line under it that says what the setting does. */
.seith-check-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.seith-check-field__hint {
  margin: 0;
  padding-left: 28px;
}

@media (max-width: 600px) {
  .seith-form-actions {
    flex-direction: column-reverse;
  }

  .seith-form-actions .seith-btn {
    justify-content: center;
    width: 100%;
  }
}

/* A section head: the title and a line of help at the left, badges and buttons at the right. */
.seith-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
}

/* A table cell with no value shows a dash. The dash comes from the stylesheet, so it is no text of a language. */
.seith-table__empty::before {
  content: "\2014";
  color: var(--fg3-on-paper);
}

/* A form with one box that switches on its optional sections (the box has data-toggle-section, each section has data-toggled-section).
   Without :has() the sections stay visible, and the form still works. */
.seith-form-stack:has(input[data-toggle-section]:not(:checked)) > [data-toggled-section] {
  display: none;
}

/* A list of boxes (the roles of a user): one box in a bordered row. */
.seith-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.seith-check-grid > .seith-check {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
  background: #fff;
}

/* A form with one button that sits among other controls (confirm an e-mail address, link a user). */
.seith-inline-form {
  display: inline-flex;
  margin: 0;
}

/* ---------- Editors of values: a list with a field to add to it, a picker with two lists, and pairs of a key and a value ----------
   The OIDC application form uses them. A page holds the items as rows with hidden inputs, so the form posts without a script.
   A small script adds and removes rows from a template that the page holds (see oidc-create.js). */

/* One editor: the label, the row to add a value, the list, and a hint. */
.seith-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

/* A field and a button on one row. On a narrow screen the button goes under the field. */
.seith-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.seith-add-row > .seith-input {
  flex: 1 1 160px;
  min-width: 0;
}

/* The values in the list: one bordered row each, the value at the left and the button at the right. */
.seith-value-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seith-value-list:not(:has(> li)) {
  display: none;
}

.seith-value-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
  background: #fff;
}

.seith-value-list__text {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Two lists side by side: what can be chosen, and what is chosen. One column on a narrow screen. */
.seith-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.seith-picker__column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
}

.seith-picker__column > .seith-label {
  margin: 0;
}

/* The values that can be chosen: they wrap, so a long list does not make a tall column. */
.seith-picker__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* A value that can be chosen. One click moves it to the chosen list. */
.seith-picker__choice {
  display: inline-block;
  max-width: 100%;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--fg1-on-paper);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.seith-picker__choice:hover {
  background: var(--color-paper-2);
}

.seith-picker__choice:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* Pairs of a key and a value: a field for each, and the button at the end. */
.seith-pair-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.seith-pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: var(--sp-2);
  align-items: center;
}

.seith-pair-list:not(:has(> .seith-pair-row)) {
  display: none;
}

@media (max-width: 720px) {
  .seith-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .seith-pair-row {
    grid-template-columns: minmax(0, 1fr);
  }
}