/* Made by the components tool from brand 1.9. Change it in shared/components/brand instead. */
/* The shared look for web pages: the page, top bar, wordmark, cards, fields,
   buttons, messages and the credit. Every colour, font and corner comes from
   theme.css, which the brand maker writes from each business's brand file,
   so any brand fits. Load theme.css first, then this file.

   Every class starts with "nsys-", so it can't clash with a site's own styles.

   Safe areas: on a phone with a notch, rounded corners or a home bar, the page
   runs under them, as the site's viewport meta has viewport-fit=cover. Colours
   and photos run edge to edge, and text and buttons are kept inside the safe
   area. The insets are 0 on other screens, where nothing here changes a page.

   Movement and see-through: buttons, menus and dialogs move a little, with the
   shared timings in theme.css, and not at all when the device asks for less.
   Bars, menus and dialogs over the page can be see-through, and turn solid when
   the browser can't blur or the device asks to reduce transparency. */

/* The insets, once, for these classes and for a site's own layout, such as an arrow
   placed at left: calc(8px + var(--nsys-safe-left)). */
:root {
  --nsys-safe-top: env(safe-area-inset-top, 0px);
  --nsys-safe-right: env(safe-area-inset-right, 0px);
  --nsys-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nsys-safe-left: env(safe-area-inset-left, 0px);
}

.nsys-page {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 16px/1.5 var(--body-font);
}
.nsys-heading { margin: 0; font: 700 1.5rem/1.22 var(--heading-font); }
.nsys-quiet { color: var(--muted); }

/* Top bar */
.nsys-bar {
  --wordmark-accent: var(--header-accent);
  --wordmark-muted: var(--header-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  min-height: 56px;
  padding: 10px max(20px, var(--nsys-safe-right)) 10px max(20px, var(--nsys-safe-left));
  background: var(--header-bg); color: var(--header-text);
}
.nsys-bar a { color: inherit; }
/* A bar at the top of the screen, fixed or not: its colour runs up under the notch, and its contents start below it. */
.nsys-bar--top { padding-top: calc(10px + var(--nsys-safe-top)); }
/* A bar along the bottom of the screen: its contents stay above the home bar. */
.nsys-bar--bottom { padding-bottom: calc(10px + var(--nsys-safe-bottom)); }

/* A part of the page that runs edge to edge, with its words kept clear of a notch at the side, as when a phone is
   turned: the site's own side space, --nsys-gutter, or the inset if that's larger. --nsys-safe-extra adds to the inset,
   for a row of links whose tap areas reach past their words, such as one with margin-inline: -0.25rem. */
.nsys-safe {
  padding-left: max(var(--nsys-gutter, 20px), calc(var(--nsys-safe-left) + var(--nsys-safe-extra, 0px)));
  padding-right: max(var(--nsys-gutter, 20px), calc(var(--nsys-safe-right) + var(--nsys-safe-extra, 0px)));
}
/* The first and last parts of the page, such as a header and footer without nsys-bar: the site's own space,
   --nsys-space-top or --nsys-space-bottom (0 unless set), plus the inset. With no notch they're as drawn. */
.nsys-safe-top { padding-top: calc(var(--nsys-space-top, 0px) + var(--nsys-safe-top)); }
.nsys-safe-bottom { padding-bottom: calc(var(--nsys-space-bottom, 0px) + var(--nsys-safe-bottom)); }

/* Wordmark: one line beside the logo, or two lines with the rest small and widely spaced */
.nsys-wordmark { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.nsys-wordmark__logo { display: inline-flex; flex: none; width: 30px; height: 30px; color: var(--wordmark-accent, var(--accent-text)); }
.nsys-wordmark__logo svg { width: 100%; height: 100%; }
.nsys-wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.nsys-wordmark__name { font: 700 19px/1.1 var(--heading-font); white-space: nowrap; }
.nsys-wordmark__first { color: var(--wordmark-accent, var(--accent-text)); }
.nsys-wordmark__tagline { margin-top: 4px; font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--wordmark-muted, var(--muted)); }
.nsys-wordmark--capitals .nsys-wordmark__name { text-transform: uppercase; letter-spacing: 0.02em; }
.nsys-wordmark--stacked .nsys-wordmark__name { display: flex; flex-direction: column; gap: 5px; letter-spacing: 0; }
.nsys-wordmark--stacked .nsys-wordmark__first { font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: 0.14em; }
.nsys-wordmark--stacked .nsys-wordmark__rest { font: 500 10.5px/1 var(--body-font); letter-spacing: 0.42em; text-transform: uppercase; }

/* Cards */
.nsys-card {
  display: grid; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--corner);
  background: var(--surface); color: var(--text);
}

/* Fields */
.nsys-label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.nsys-input {
  display: block; box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--muted); border-radius: var(--corner);
  background: var(--page); color: var(--text); font: 16px var(--body-font);
}

/* Buttons */
.nsys-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.nsys-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--corner);
  background: linear-gradient(var(--accent-light), var(--accent-deep)); color: var(--on-accent);
  font: 700 15px var(--body-font); text-decoration: none; cursor: pointer;
}
.nsys-button:hover { background: var(--accent-light); }
.nsys-button--quiet { border: 1.5px solid var(--line); background: transparent; color: var(--text); }
.nsys-button--quiet:hover { border-color: var(--muted); background: transparent; }
.nsys-button--wide { width: 100%; }
.nsys-button:disabled, .nsys-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* Pressed: a little darker, and, unless the device asks for less movement, a little smaller (below). */
.nsys-button:active:not(:disabled):not([aria-disabled="true"]) { filter: brightness(0.92); }
.nsys-link { color: var(--accent-text); font-weight: 600; }

/* Menus: <details class="nsys-menu">, its <summary> the button that opens it, then <div class="nsys-menu__panel">
   with an optional <p class="nsys-menu__title"> and a link or button with nsys-menu__item for each choice.
   It opens and closes without scripts. */
.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__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 10;
  display: grid; box-sizing: border-box; min-width: 14rem; padding: 6px;
  border: 1px solid var(--line); border-radius: min(var(--corner), 12px);
  background: var(--surface); color: var(--text); box-shadow: var(--nsys-shadow);
}
.nsys-menu__title { margin: 0; padding: 6px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nsys-menu__item { padding: 9px 10px; border-radius: min(var(--corner), 8px); color: var(--text); font-weight: 600; text-decoration: none; }
.nsys-menu__item:hover, .nsys-menu__item:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); }

/* Dialogs: <dialog class="nsys-dialog">, opened with showModal(). */
.nsys-dialog {
  box-sizing: border-box; width: min(30rem, calc(100vw - 32px)); padding: 20px;
  border: 1px solid var(--line); border-radius: var(--corner);
  background: var(--surface); color: var(--text); box-shadow: var(--nsys-shadow);
}
.nsys-dialog::backdrop { background: var(--nsys-backdrop); }

/* Movement: short, so people see what changed, with the timings from theme.css, kept once in the brand
   component's motion.json. Only when the device hasn't asked for less: then buttons only change colour,
   and menus and dialogs appear at once. Nothing loops or plays by itself. */
@media (prefers-reduced-motion: no-preference) {
  .nsys-button { transition: transform var(--nsys-quick) var(--nsys-appear), filter var(--nsys-quick) var(--nsys-appear), border-color var(--nsys-quick) var(--nsys-appear); }
  .nsys-button:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
  .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); }
}
@keyframes nsys-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes nsys-zoom { from { opacity: 0; transform: scale(0.96); } }
@keyframes nsys-fade { from { opacity: 0; } }

/* See-through: a top bar (nsys-bar--glass), or a menu panel or dialog (nsys-glass), over the page lets it show
   through with a soft blur. Each keeps enough of its own colour that its words stay readable with the blur off,
   over anything: the brand maker works that out as --nsys-bar-glass and --nsys-panel-glass. Keep it to these
   small areas, so scrolling stays smooth on low-cost phones. Making the bar stay at the top is the site's
   choice, such as position: sticky and top: 0.
   The bar's blur is drawn on a layer behind its contents, not on the bar itself: a blurred element stops
   anything inside it blurring the page, so a see-through menu opening from the bar would show the page sharp. */
:where(.nsys-bar--glass) { position: relative; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, currentColor 50%, transparent)) {
  .nsys-bar--glass { isolation: isolate; background: transparent; }
  .nsys-bar--glass::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--header-bg) var(--nsys-bar-glass), transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  }
  .nsys-glass {
    background: color-mix(in srgb, var(--surface) var(--nsys-panel-glass), transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  }
}
/* Solid when the device asks to reduce transparency. Browsers that can't blur never leave the solid look. */
@media (prefers-reduced-transparency: reduce) {
  .nsys-bar--glass { background: var(--header-bg); }
  .nsys-bar--glass::before { display: none; }
  .nsys-glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Focus: easy to see on every brand */
.nsys-page :focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }

/* Status: the same colours for every brand */
.nsys-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.nsys-pill { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.nsys-message { margin: 0; padding: 10px 14px; border-radius: min(var(--corner), 10px); font-size: 14px; font-weight: 600; line-height: 1.35; }
.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); }

/* The credit: small and quiet, a link with no address */
.nsys-credit { color: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }