/* Made by the components tool from ui-kit 1.9. Change it in shared/components/ui-kit instead. */
/* The UI kit for websites: buttons, fields, choices, cards, list rows, name and value lists, pills, chips,
   number tiles, a meter, tabs, the top bar's pages, menus, sheets, dialogs, messages, an empty state and tables.

   Load, in this order: the brand's theme.css and base.css, then the kit's sizes.css and this file. Every colour,
   font and corner comes from the brand's theme, so any brand fits in both looks, and every size from sizes.css,
   kept once in the kit's sizes.json. The page's <body> has nsys-page, for brand's focus ring.

   The kit takes over brand's button, card, field, pill, message, menu and dialog, keeping their names, and draws
   them to its own sizes. Brand keeps its own copies until its next big version.

   Phones: under 560 px wide, the top bar's pages fold into a menu button, menus rise from the bottom as sheets,
   and nsys-on-wide parts give way to nsys-on-narrow ones, such as a table to list rows.

   See-through: add brand's nsys-glass to a menu's panel or a dialog. It turns solid when the device can't blur or
   asks for less see-through. Movement uses brand's three timings, and none when the device asks for less. */

/* Text */
.nsys-page-title { margin: 0; font: 800 var(--nsys-text-page-title)/1.2 var(--heading-font); }
.nsys-screen-title { margin: 0; font: 700 var(--nsys-text-screen-title)/1.25 var(--heading-font); }
.nsys-section-title { margin: 0; color: var(--muted); font-size: var(--nsys-text-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Buttons: main, quiet, danger and plain, regular or small, and round icon buttons. Off with disabled, or
   aria-disabled="true" on a link. Icons are inline SVGs. */
.nsys-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nsys-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nsys-space-2); box-sizing: border-box;
  min-height: var(--nsys-control); margin: 0; padding: 0 20px; border: 0; border-radius: var(--corner);
  background: linear-gradient(var(--accent-light), var(--accent-deep)); color: var(--on-accent); box-shadow: none; opacity: 1;
  font: 700 var(--nsys-text-button)/1.2 var(--body-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nsys-button svg { flex: none; width: var(--nsys-icon-small); height: var(--nsys-icon-small); }
.nsys-button:hover { background: var(--accent-light); }
.nsys-button--quiet, .nsys-button--quiet:hover { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.nsys-button--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }
.nsys-button--danger, .nsys-button--danger:hover { background: transparent; color: var(--bad-text); box-shadow: inset 0 0 0 1.5px var(--bad-text); }
.nsys-button--danger:hover { background: var(--bad-fill); }
.nsys-button--plain, .nsys-button--plain:hover { padding: 0 8px; background: transparent; color: var(--accent-text); }
.nsys-button--plain:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.nsys-button--small { min-height: var(--nsys-control-small); padding: 0 14px; font-size: var(--nsys-text-label); }
/* nsys-button--wordless: only the icon, as wide as it's high, with the words in aria-label for screen readers. */
.nsys-button--wordless { width: var(--nsys-control); padding: 0; }
.nsys-button--small.nsys-button--wordless { width: var(--nsys-control-small); }
.nsys-button--wide { width: 100%; }
.nsys-button--icon, .nsys-button--icon:hover { width: var(--nsys-control); padding: 0; border-radius: 999px; background: transparent; color: var(--text); }
.nsys-button--icon:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nsys-button--icon svg { width: var(--nsys-icon); height: var(--nsys-icon); }
.nsys-button:disabled, .nsys-button[aria-disabled="true"] {
  background: var(--line); color: var(--muted); box-shadow: none; opacity: 1; filter: none; cursor: not-allowed;
}

/* Fields: a label, the field, and a hint or a problem under it. nsys-entry holds a field with words beside it,
   such as +94 before a phone number or "photos" after a number, in nsys-entry__side. A problem is aria-invalid. */
.nsys-field { display: grid; gap: 6px; align-content: start; }
.nsys-label { display: block; margin: 0; font-size: var(--nsys-text-label); font-weight: 600; }
.nsys-input, .nsys-entry {
  box-sizing: border-box; width: 100%; min-height: var(--nsys-control); margin: 0; padding: 0 14px;
  border: 1.5px solid var(--muted); border-radius: var(--corner); background: var(--page); color: var(--text);
  font: var(--nsys-text-body)/1.45 var(--body-font);
}
.nsys-input { display: block; }
textarea.nsys-input { min-height: calc(2 * var(--nsys-control)); padding-top: 10px; padding-bottom: 10px; resize: vertical; }
.nsys-entry { display: flex; align-items: center; }
.nsys-entry input { flex: 1; min-width: 0; height: calc(var(--nsys-control) - 3px); margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.nsys-entry__side { flex: none; color: var(--muted); }
.nsys-entry__side:first-child { margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--line); }
.nsys-entry__side:last-child { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
.nsys-input::placeholder, .nsys-entry input::placeholder { color: var(--muted); opacity: 1; }
.nsys-input:focus, .nsys-entry:focus-within {
  outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent);
}
.nsys-entry input:focus, .nsys-entry input:focus-visible { outline: none; }
.nsys-input[aria-invalid="true"], .nsys-entry:has([aria-invalid="true"]) { border-color: var(--bad-text); }
.nsys-input[aria-invalid="true"]:focus, .nsys-entry:has([aria-invalid="true"]):focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-text) 22%, transparent);
}
.nsys-hint { margin: 0; color: var(--muted); font-size: var(--nsys-text-hint); }
.nsys-problem { margin: 0; color: var(--bad-text); font-size: var(--nsys-text-hint); font-weight: 600; }

/* Choices: one of a list (radios in a fieldset), a tick box and a switch. The real input is in the label, unseen
   but there for keyboards and screen readers, and the label draws it. */
.nsys-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.nsys-choices > legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; }
.nsys-choices__list { clear: both; overflow: hidden; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); }
.nsys-choice, .nsys-tick, .nsys-switch { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.nsys-choice > input, .nsys-tick > input, .nsys-switch > input {
  position: absolute; left: 0; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.nsys-choice { box-sizing: border-box; min-height: var(--nsys-row-height); padding: 8px 14px; font-size: var(--nsys-text-body); font-weight: 500; }
.nsys-choice + .nsys-choice { border-top: 1px solid var(--line); }
.nsys-choice:has(> input:checked) { font-weight: 700; }
.nsys-choice__mark { flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 2px solid var(--muted); border-radius: 50%; }
.nsys-choice > input:checked + .nsys-choice__mark { border: 7px solid var(--accent-text); }
.nsys-tick, .nsys-switch { min-height: var(--nsys-control); font-size: var(--nsys-text-button); }
.nsys-tick__box {
  flex: none; display: grid; place-items: center; box-sizing: border-box; width: 22px; height: 22px;
  border: 2px solid var(--muted); border-radius: min(var(--corner), 6px);
}
.nsys-tick__box::after {
  content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid var(--page); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg); opacity: 0;
}
.nsys-tick > input:checked + .nsys-tick__box { border-color: var(--accent-text); background: var(--accent-text); }
.nsys-tick > input:checked + .nsys-tick__box::after { opacity: 1; }
.nsys-switch__words { flex: 1; }
.nsys-switch__track { flex: none; box-sizing: border-box; width: 50px; height: 30px; padding: 4px; border-radius: 999px; background: var(--muted); }
.nsys-switch__track::after { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--page); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.nsys-switch > input:checked + .nsys-switch__track { background: var(--accent-text); }
.nsys-switch > input:checked + .nsys-switch__track::after { transform: translateX(20px); }
.nsys-choice > input:focus-visible + .nsys-choice__mark, .nsys-tick > input:focus-visible + .nsys-tick__box,
.nsys-switch > input:focus-visible + .nsys-switch__track { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.nsys-choice:has(> input:disabled), .nsys-tick:has(> input:disabled), .nsys-switch:has(> input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Cards */
.nsys-card {
  display: grid; gap: var(--nsys-space-3); padding: var(--nsys-card-inside);
  border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); color: var(--text);
}
.nsys-card__head { display: flex; align-items: center; gap: 10px; }
.nsys-card__head > :last-child:not(:first-child) { margin-left: auto; }
.nsys-card__title { margin: 0; font: 700 var(--nsys-text-card-title)/1.25 var(--heading-font); }

/* List rows, in nsys-list: a round mark, a title and a hint, then a value, pill or button, and an arrow. A row can
   be a link or a button. The picked row, beside its details, has aria-current. */
.nsys-list { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); }
.nsys-list > * + * { border-top: 1px solid var(--line); }
.nsys-card .nsys-list { margin: 0 calc(-1 * var(--nsys-card-inside)); border-width: 1px 0 0; border-radius: 0; background: transparent; }
.nsys-row {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: var(--nsys-row-height);
  margin: 0; padding: 8px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none;
}
a.nsys-row, button.nsys-row { cursor: pointer; }
a.nsys-row:hover, button.nsys-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nsys-row[aria-current]:not([aria-current="false"]) { background: color-mix(in srgb, var(--accent-text) 10%, transparent); box-shadow: inset 3px 0 var(--accent-text); }
.nsys-row__mark {
  flex: none; display: grid; place-items: center; width: var(--nsys-mark); height: var(--nsys-mark); border-radius: 50%;
  background: color-mix(in srgb, var(--accent-text) 14%, var(--surface)); color: var(--accent-text); font-size: var(--nsys-text-button); font-weight: 700;
}
.nsys-row__mark svg { width: var(--nsys-icon); height: var(--nsys-icon); }
.nsys-row__text { display: grid; flex: 1; min-width: 0; }
.nsys-row__title { font-size: var(--nsys-text-body); font-weight: 600; }
.nsys-row__hint { color: var(--muted); font-size: var(--nsys-text-hint); }
.nsys-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--muted); font-size: var(--nsys-text-label); white-space: nowrap; }
.nsys-row__go { flex: none; width: var(--nsys-icon-small); height: var(--nsys-icon-small); color: var(--muted); }
/* nsys-list--top: rows whose hint runs to two lines or more keep their pill or arrow beside the title, at the top. */
.nsys-list--top .nsys-row { align-items: flex-start; }
.nsys-list--top .nsys-row__end, .nsys-list--top .nsys-row__go { margin-top: 2px; }

/* Name and value lists: a line between rows, and a long value wraps onto a second line. */
.nsys-facts { display: grid; grid-template-columns: max-content 1fr; margin: 0; font-size: var(--nsys-text-button); }
.nsys-facts dt, .nsys-facts dd { margin: 0; padding: var(--nsys-space-2) 0; border-top: 1px solid var(--line); }
.nsys-facts dt { padding-right: var(--nsys-space-5); color: var(--muted); }
.nsys-facts > :nth-child(-n+2) { padding-top: 0; border-top: 0; }
.nsys-facts > :nth-last-child(-n+2) { padding-bottom: 0; }

/* Pills, chips and counts */
.nsys-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.nsys-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: var(--nsys-text-caption); font-weight: 700; line-height: 1.45; white-space: nowrap; }
.nsys-pill--good, .nsys-message--good { background: var(--good-fill); color: var(--good-text); }
.nsys-pill--warn, .nsys-message--warn { background: var(--warn-fill); color: var(--warn-text); }
.nsys-pill--bad, .nsys-message--bad { background: var(--bad-fill); color: var(--bad-text); }
.nsys-pill--plain, .nsys-message--plain { background: var(--plain-fill); color: var(--plain-text); }
.nsys-count {
  margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--plain-fill); color: var(--plain-text);
  font-size: var(--nsys-text-small); font-weight: 700; line-height: 1.4;
}
/* Chips: a row of rounded choices, such as filters or a project's sections, as buttons with aria-pressed or links
   with aria-current. The row scrolls sideways when it doesn't fit. */
.nsys-chips { display: flex; gap: 8px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.nsys-chip {
  flex: none; display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--nsys-control-small); margin: 0; padding: 0 6px 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--text);
  font: 600 var(--nsys-text-label) var(--body-font); text-decoration: none; cursor: pointer;
}
.nsys-chip:not(:has(.nsys-count)) { padding-right: 14px; }
.nsys-chip:hover { border-color: var(--muted); }
.nsys-chip[aria-pressed="true"], .nsys-chip[aria-current]:not([aria-current="false"]) {
  border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 12%, transparent);
}

/* Number tiles: a name, a big number and a quiet line, in a row of equal tiles that wraps on narrow screens. */
.nsys-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nsys-space-3); margin: 0; padding: 0; list-style: none; }
.nsys-tile {
  display: grid; align-content: start; gap: 2px; padding: 14px var(--nsys-card-inside);
  border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface);
}
.nsys-tile__label { color: var(--muted); font-size: var(--nsys-text-hint); font-weight: 600; }
.nsys-tile__value { font: 800 var(--nsys-text-tile-value)/1.25 var(--heading-font); white-space: nowrap; }
.nsys-tile__hint { color: var(--muted); font-size: var(--nsys-text-hint); }

/* A meter: its name and amount, then a bar, which is a <meter> or <progress> element. */
.nsys-meter { display: grid; gap: 6px; }
.nsys-meter__head { display: flex; justify-content: space-between; gap: 10px; font-size: var(--nsys-text-label); }
.nsys-meter__head > :last-child { color: var(--muted); }
.nsys-meter__bar {
  appearance: none; -webkit-appearance: none; display: block; box-sizing: border-box; width: 100%; height: 8px; margin: 0;
  overflow: hidden; border: 0; border-radius: 999px; background: var(--line); color: var(--accent-text);
}
.nsys-meter__bar::-webkit-meter-inner-element { display: block; }
.nsys-meter__bar::-webkit-meter-bar { height: 8px; border: 0; border-radius: 999px; background: var(--line); }
.nsys-meter__bar::-webkit-meter-optimum-value, .nsys-meter__bar::-webkit-meter-suboptimum-value,
.nsys-meter__bar::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--accent-text); }
.nsys-meter__bar::-moz-meter-bar { border-radius: 999px; background: var(--accent-text); }
.nsys-meter__bar::-webkit-progress-bar { border-radius: 999px; background: var(--line); }
.nsys-meter__bar::-webkit-progress-value { border-radius: 999px; background: var(--accent-text); }
.nsys-meter__bar::-moz-progress-bar { border-radius: 999px; background: var(--accent-text); }

/* Tabs across a page or card: links with aria-current, or buttons with aria-selected, each with an optional count. */
.nsys-tabs { display: flex; gap: 4px; margin: 0; padding: 0; border-bottom: 1px solid var(--line); list-style: none; }
.nsys-tab {
  display: flex; align-items: center; box-sizing: border-box; min-height: var(--nsys-control); margin: 0 0 -1px; padding: 0 14px;
  border: 0; border-bottom: 2.5px solid transparent; background: none; color: var(--muted);
  font: 600 var(--nsys-text-button) var(--body-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nsys-tab:hover { color: var(--text); }
.nsys-tab[aria-current]:not([aria-current="false"]), .nsys-tab[aria-selected="true"] { border-bottom-color: var(--accent-text); color: var(--text); }

/* The top bar's pages, in brand's nsys-bar: links in nsys-nav, the current one with aria-current="page". On phones
   they fold into nsys-nav-menu, a menu with the same links. */
.nsys-nav { display: flex; gap: 4px; margin-left: auto; }
/* A page's link, or a form's button among them, such as signing out: the form steps aside, so its button sits in the row. */
.nsys-nav form { display: contents; }
.nsys-nav a, .nsys-nav button {
  margin: 0; padding: 7px 12px; border: 0; border-radius: min(var(--corner), 8px); background: none; color: var(--header-muted);
  font: 600 var(--nsys-text-label) / 1.5 var(--body-font); text-decoration: none; cursor: pointer;
}
.nsys-nav a:hover, .nsys-nav button:hover { color: var(--header-text); }
/* On touch screens, such as tablets, the page links are a finger's height, as the kit's buttons are. */
@media (pointer: coarse) {
  .nsys-nav a, .nsys-nav button { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--nsys-control); }
}
/* nsys-bar--app: a computer app's top bar on a web page, such as an app's drawing, as apps' PageBar draws it: 60 high,
   with no space above and below its parts. */
.nsys-bar.nsys-bar--app { flex-wrap: nowrap; min-height: 60px; padding-top: 0; padding-bottom: 0; }
.nsys-nav a[aria-current]:not([aria-current="false"]) { background: color-mix(in srgb, var(--header-text) 14%, transparent); color: var(--header-text); }
.nsys-menu.nsys-nav-menu { display: none; margin-left: auto; }
.nsys-bar .nsys-button--icon { color: var(--header-text); }
/* The keyboard's mark in a top bar takes the bar's accent, as the link colour can be the bar's own colour. */
.nsys-bar :focus-visible { outline-color: var(--header-accent); }

/* Menus: <details class="nsys-menu">, its <summary> the button, then nsys-menu__panel with an optional
   nsys-menu__title and an nsys-menu__item link or button for each choice. While one is open, a layer over the
   page closes it when people tap or click anywhere else, and ui-kit.js closes it with Escape. The layer and menu
   sit over a sticky top bar, at 1000 and 1001, unless the menu is inside something with its own stacking. */
.nsys-menu { position: relative; display: inline-block; }
.nsys-menu > summary { list-style: none; cursor: pointer; }
.nsys-menu > summary::-webkit-details-marker { display: none; }
.nsys-menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 1000; cursor: default; }
/* While open, the button doesn't shrink or darken as it's pressed: either would pin the layer to the button, so a
   press elsewhere would end off it and leave the menu open. */
.nsys-menu[open] > summary:active:not(:disabled):not([aria-disabled="true"]) { transform: none; filter: none; }
:where(.nsys-menu__panel) { background: var(--surface); }
.nsys-menu__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1001; display: grid; box-sizing: border-box; min-width: 220px; padding: 6px;
  border: 1px solid var(--line); border-radius: min(var(--corner), 12px); color: var(--text); box-shadow: var(--nsys-shadow);
}
.nsys-menu__title { margin: 0; padding: 6px 12px 4px; color: var(--muted); font-size: var(--nsys-text-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nsys-menu .nsys-menu__item {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 40px; margin: 0; padding: 0 12px;
  border: 0; border-radius: min(var(--corner), 8px); background: none; color: var(--text);
  font: 600 var(--nsys-text-button) var(--body-font); text-align: left; text-decoration: none; cursor: pointer;
}
.nsys-menu__item svg { flex: none; width: var(--nsys-icon-small); height: var(--nsys-icon-small); color: var(--muted); }
.nsys-menu .nsys-menu__item:hover, .nsys-menu .nsys-menu__item:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); }
/* The page being shown, in a menu of pages such as the phone's: marked as a list's picked row is. */
.nsys-menu .nsys-menu__item[aria-current]:not([aria-current="false"]) { background: color-mix(in srgb, var(--accent-text) 10%, transparent); box-shadow: inset 3px 0 var(--accent-text); font-weight: 700; }
.nsys-menu .nsys-menu__item--danger, .nsys-menu__item--danger svg { color: var(--bad-text); }

/* Dialogs: <dialog class="nsys-dialog">, opened by a button with data-nsys-opens="the dialog's id" through
   ui-kit.js. Its buttons go in a <form method="dialog">, so "Keep it" closes it, as Escape does. */
:where(.nsys-dialog) { background: var(--surface); }
.nsys-dialog {
  box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-width: none; padding: var(--nsys-space-5);
  border: 1px solid var(--line); border-radius: var(--corner); color: var(--text); box-shadow: var(--nsys-shadow);
}
.nsys-dialog[open] { display: grid; gap: var(--nsys-space-2); }
.nsys-dialog::backdrop { background: var(--nsys-backdrop); }
.nsys-dialog__title { margin: 0; font: 700 var(--nsys-text-card-title)/1.3 var(--heading-font); }
.nsys-dialog__text { margin: 0; color: var(--muted); }
.nsys-dialog .nsys-buttons { justify-content: flex-end; margin: var(--nsys-space-2) 0 0; }

/* Messages: a line in a status colour, with an icon, and an empty state. */
.nsys-message {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: min(var(--corner), 10px);
  font-size: var(--nsys-text-message); font-weight: 600; line-height: 1.4;
}
.nsys-message svg { flex: none; width: var(--nsys-icon-small); height: var(--nsys-icon-small); }
.nsys-empty { display: grid; justify-items: center; gap: var(--nsys-space-2); padding: var(--nsys-space-6) var(--nsys-space-4); text-align: center; }
.nsys-empty__icon {
  display: grid; place-items: center; width: var(--nsys-mark-large); height: var(--nsys-mark-large); border-radius: 50%;
  background: color-mix(in srgb, var(--accent-text) 12%, var(--surface)); color: var(--accent-text);
}
.nsys-empty__icon svg { width: 26px; height: 26px; }
.nsys-empty__title { margin: 0; font: 700 var(--nsys-text-card-title)/1.3 var(--heading-font); }
.nsys-empty p { max-width: 34ch; margin: 0; color: var(--muted); }

/* Tables, on computers and tablets. On phones, show the same things as list rows: the table in nsys-on-wide,
   the rows in nsys-on-narrow. A pill in a cell is a little slimmer, so it never makes its row taller. */
.nsys-table {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); font-size: var(--nsys-text-message);
}
.nsys-table th { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--nsys-text-hint); font-weight: 600; text-align: left; }
.nsys-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.nsys-table tr:last-child td { border-bottom: 0; }
.nsys-table .nsys-num { text-align: right; font-variant-numeric: tabular-nums; }
.nsys-table .nsys-pill { padding-top: 1px; padding-bottom: 1px; line-height: 1.4; }
/* A row that opens what it's about, such as a business: its first cell's words are a link, nsys-table__link, and the
   row takes a tint under the pointer, as clickable list rows do. Apps' KitTable(onRowClick) is its twin. */
.nsys-table__link { color: var(--accent-text); font-weight: 600; text-decoration: underline; }
.nsys-table tr:has(.nsys-table__link):hover > td { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Phones: under 560 px wide */
@media (max-width: 559px) {
  .nsys-on-wide { display: none !important; }
  .nsys-nav { display: none; }
  .nsys-menu.nsys-nav-menu { display: inline-block; }
  .nsys-menu[open] > summary::before { background: var(--nsys-backdrop); }
  .nsys-menu__panel {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; min-width: 0; max-height: 85vh; overflow-y: auto;
    padding: 10px max(12px, var(--nsys-safe-right)) calc(18px + var(--nsys-safe-bottom)) max(12px, var(--nsys-safe-left));
    border-width: 1px 0 0; border-radius: 20px 20px 0 0;
  }
  .nsys-menu__panel::before { content: ""; justify-self: center; width: 40px; height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--line); }
  .nsys-menu__title { padding: 4px 12px 8px; color: var(--text); font: 700 var(--nsys-text-body) var(--heading-font); letter-spacing: 0; text-transform: none; }
  .nsys-menu .nsys-menu__item { min-height: var(--nsys-row-height); }
}
@media (min-width: 560px) {
  .nsys-on-narrow { display: none !important; }
}

/* Movement: short, with brand's timings, and only when the device hasn't asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .nsys-button { transition: transform var(--nsys-quick) var(--nsys-appear), filter var(--nsys-quick) var(--nsys-appear), box-shadow var(--nsys-quick) var(--nsys-appear); }
  .nsys-button:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
  .nsys-switch__track, .nsys-tick__box, .nsys-choice__mark, .nsys-chip, .nsys-tab {
    transition: background-color var(--nsys-quick) var(--nsys-appear), border-color var(--nsys-quick) var(--nsys-appear), color var(--nsys-quick) var(--nsys-appear);
  }
  .nsys-switch__track::after { transition: transform var(--nsys-quick) var(--nsys-appear); }
  .nsys-menu[open] > .nsys-menu__panel { animation: nsys-drop var(--nsys-standard) var(--nsys-appear); }
  .nsys-dialog[open] { animation: nsys-zoom var(--nsys-slow) var(--nsys-appear); }
  .nsys-dialog[open]::backdrop { animation: nsys-fade var(--nsys-slow) var(--nsys-appear); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 559px) {
  .nsys-menu[open] > .nsys-menu__panel { animation-name: nsys-rise; }
}
@keyframes nsys-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes nsys-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes nsys-zoom { from { opacity: 0; transform: scale(0.96); } }
@keyframes nsys-fade { from { opacity: 0; } }