/* Made by the components tool from brand 1.0. 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. */

.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 20px;
  background: var(--header-bg); color: var(--header-text);
}
.nsys-bar a { color: inherit; }

/* 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; }
.nsys-link { color: var(--accent-text); font-weight: 600; }

/* 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; }