/* Generated by brand/scripts/build-components.mjs from brand/components/. Do not edit. Load public/tokens/tokens.css first. */

/* Base: the root of a screen built with the components (usually <body>). The font, size, line height and color of the
   brand, the screen's background, border-box sizing, and no bold anywhere: hierarchy goes by size and color. Form
   controls take the font of the screen instead of the browser's. */

/* The brand's fonts, from the kit, never from a fonts service (it breaks the "ō" of Kōdo). The addresses are relative to this
   file, so they work wherever brand/public is published (ui.nuevauno.com, a Worker's own files). */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/urbanist-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/urbanist-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-mono-400.woff2") format("woff2");
}
.nu-ui,
.nu-ui *,
.nu-ui *::before,
.nu-ui *::after {
  box-sizing: border-box;
}

.nu-ui {
  margin: 0;
  background: var(--nu-color-background);
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-size-body);
  font-weight: var(--nu-font-weight-regular);
  line-height: var(--nu-font-line-height-normal);
  color: var(--nu-color-ink);
  -webkit-font-smoothing: antialiased;
}

.nu-ui :where(b, strong, h1, h2, h3, h4, h5, h6, th) {
  font-weight: var(--nu-font-weight-regular);
}

.nu-ui :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

/* What is hidden stays hidden, even when its component's class says display: flex (a form shown after a step). */
.nu-ui [hidden] {
  display: none;
}

/* Density. Without it the components keep their touch sizes (one-column pages, Home, wizards). --compact is for work
   screens with a mouse (lists, records, apps): 32 px controls and 14 px text, back to touch sizes on a touch screen.
   The components read these variables, each with the comfortable value as its fallback. */
.nu-ui--compact {
  --nu-ui-control: var(--nu-control-pointer);
  --nu-ui-control-small: var(--nu-control-pointer-small);
  --nu-ui-text: var(--nu-size-small);
  --nu-ui-text-small: var(--nu-size-small);
  --nu-ui-input: var(--nu-size-small);
  --nu-ui-chip: var(--nu-control-chip-small);
  --nu-ui-chip-pad: var(--nu-space-8);
  --nu-ui-pad: var(--nu-space-14);
  --nu-ui-pad-small: var(--nu-space-10);
  --nu-ui-field-pad: var(--nu-space-10);
  --nu-ui-gap: var(--nu-space-8);
  font-size: var(--nu-size-small);
}

@media (pointer: coarse) {
  .nu-ui--compact {
    --nu-ui-control: var(--nu-control-touch);
    --nu-ui-control-small: var(--nu-control-touch-small);
    --nu-ui-text: var(--nu-size-body);
    --nu-ui-text-small: var(--nu-size-body);
    --nu-ui-input: var(--nu-size-input);
    font-size: var(--nu-size-body);
  }
}

/* Button. The default one is secondary (border on the surface); --primary is the one main action of a screen, never
   two together; --text is an action that reads as a link. 44 px by default (touch) and 32 px inside nu-ui--compact;
   --small is one step smaller, --large is for Home and wizards, --block takes the whole width (a one-column page). */
.nu-button {
  display: inline-flex;
  box-sizing: border-box;
  min-height: var(--nu-ui-control, var(--nu-control-touch));
  align-items: center;
  justify-content: center;
  gap: var(--nu-ui-gap, var(--nu-space-10));
  margin: 0;
  border: var(--nu-border-width) solid var(--nu-color-border-strong);
  border-radius: var(--nu-radius-default);
  padding: 0 var(--nu-ui-pad, var(--nu-space-20));
  background: var(--nu-color-surface);
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-ui-text, var(--nu-size-body));
  font-weight: var(--nu-font-weight-regular);
  color: var(--nu-color-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.nu-button:hover,
.nu-button:focus-visible {
  border-color: var(--nu-color-accent);
}

.nu-button:focus-visible {
  outline: var(--nu-border-focus) solid var(--nu-color-accent);
  outline-offset: var(--nu-border-focus);
}

.nu-button--primary {
  border-color: var(--nu-color-accent);
  background: var(--nu-color-accent);
  color: var(--nu-color-on-accent);
}

.nu-button--primary:hover,
.nu-button--primary:focus-visible {
  border-color: var(--nu-color-accent-hover);
  background: var(--nu-color-accent-hover);
}

.nu-button--text {
  border-color: transparent;
  padding: 0 var(--nu-space-4);
  background: none;
  color: var(--nu-color-accent);
}

.nu-button--text:hover,
.nu-button--text:focus-visible {
  border-color: transparent;
  text-decoration: underline;
}

.nu-button--small {
  min-height: var(--nu-ui-control-small, var(--nu-control-pointer));
  padding: 0 var(--nu-ui-pad-small, var(--nu-space-12));
  font-size: var(--nu-ui-text-small, var(--nu-size-small));
}

.nu-button--large {
  min-height: var(--nu-control-large);
  padding: 0 var(--nu-space-28);
  font-size: var(--nu-size-input);
}

.nu-button--block {
  display: flex;
  width: 100%;
  white-space: normal;
}

.nu-button:disabled,
.nu-button[aria-disabled="true"] {
  border-color: var(--nu-color-border);
  cursor: not-allowed;
  opacity: var(--nu-opacity-disabled);
}

.nu-button--primary:disabled,
.nu-button--primary[aria-disabled="true"] {
  border-color: var(--nu-color-accent);
  background: var(--nu-color-accent);
}

.nu-button--text:disabled,
.nu-button--text[aria-disabled="true"] {
  border-color: transparent;
  text-decoration: none;
}

.nu-button > svg,
.nu-button > img {
  width: var(--nu-control-icon);
  height: var(--nu-control-icon);
  flex: none;
}

/* A row of buttons: the main one first. */
.nu-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nu-space-8);
}

/* Field: a system label on top, the control and, below, a help line that turns into the error. The control is a text
   input, a select or a text area. --line is the wizard's field: only a bottom line and large text. */
.nu-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--nu-space-6);
}

.nu-field__label {
  font-family: var(--nu-font-family-mono);
  font-size: var(--nu-size-label);
  font-weight: var(--nu-font-weight-regular);
  letter-spacing: var(--nu-font-letter-spacing-label);
  text-transform: uppercase;
  color: var(--nu-color-muted);
}

.nu-field__control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--nu-ui-control, var(--nu-control-touch));
  margin: 0;
  border: var(--nu-border-width) solid var(--nu-color-border-strong);
  border-radius: var(--nu-radius-default);
  padding: 0 var(--nu-ui-field-pad, var(--nu-space-12));
  background: var(--nu-color-surface);
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-ui-input, var(--nu-size-body));
  font-weight: var(--nu-font-weight-regular);
  color: var(--nu-color-ink);
  outline: 0;
  appearance: none;
}

textarea.nu-field__control {
  min-height: var(--nu-control-textarea);
  padding: var(--nu-space-10) var(--nu-ui-field-pad, var(--nu-space-12));
  line-height: var(--nu-font-line-height-normal);
  resize: vertical;
}

/* The select's chevron, drawn with two gradients in the muted color (no image, follows the mode). */
select.nu-field__control {
  padding-right: var(--nu-space-32);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nu-color-muted) 50%),
    linear-gradient(135deg, var(--nu-color-muted) 50%, transparent 50%);
  background-position:
    calc(100% - var(--nu-space-16)) 50%,
    calc(100% - var(--nu-space-12)) 50%;
  background-size: var(--nu-space-4) var(--nu-space-4);
  background-repeat: no-repeat;
}

.nu-field__control::placeholder {
  color: var(--nu-color-faint);
}

.nu-field__control:hover {
  border-color: var(--nu-color-muted);
}

.nu-field__control:focus {
  border-color: var(--nu-color-accent);
}

.nu-field__control:disabled {
  border-color: var(--nu-color-border);
  background-color: var(--nu-color-hover);
  color: var(--nu-color-muted);
  cursor: not-allowed;
}

.nu-field__control:disabled:hover {
  border-color: var(--nu-color-border);
}

.nu-field__control[readonly] {
  background-color: var(--nu-color-background);
}

.nu-field__help {
  margin: 0;
  font-size: var(--nu-size-caption);
  color: var(--nu-color-muted);
}

.nu-field[data-error="true"] .nu-field__control,
.nu-field__control[aria-invalid="true"] {
  border-color: var(--nu-color-accent);
}

.nu-field[data-error="true"] .nu-field__help {
  color: var(--nu-color-accent);
}

/* The wizard's field: one question per screen, the answer large on a line. */
.nu-field--line .nu-field__control {
  min-height: var(--nu-control-large);
  border: 0;
  border-bottom: var(--nu-border-width) solid currentColor;
  padding: 0;
  background: transparent;
  font-size: var(--nu-size-heading);
}

.nu-field--line .nu-field__control:focus {
  border-bottom-color: var(--nu-color-accent);
}

/* Touch screens: 16 px text, so a phone does not zoom into the field. */
@media (pointer: coarse) {
  .nu-field__control {
    font-size: var(--nu-size-input);
  }
}

/* Several fields stacked, as in a form. */
.nu-fields {
  display: flex;
  flex-direction: column;
  gap: var(--nu-space-16);
}

/* Notice: a row with a square mark, the text and, if there is one, its action. Several go together in nu-notices,
   glued by a 1 px line. The mark is orange (needs attention); the feedback colors say it went well, informs, warns or
   failed. nu-message is the one-line status under a form ("We sent you the code"). */
.nu-notices {
  display: flex;
  flex-direction: column;
  gap: var(--nu-border-width);
  border: var(--nu-border-width) solid var(--nu-color-border);
  background: var(--nu-color-border);
}

.nu-notice {
  display: flex;
  box-sizing: border-box;
  min-height: var(--nu-control-row);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nu-space-12);
  padding: var(--nu-space-10) var(--nu-space-18);
  background: var(--nu-color-surface);
  font-size: var(--nu-size-small);
  color: var(--nu-color-ink);
}

.nu-notice__mark {
  width: var(--nu-control-mark);
  height: var(--nu-control-mark);
  flex: none;
  background: var(--nu-color-accent);
}

.nu-notice__text {
  min-width: 0;
  flex: 1 1 var(--nu-layout-text-min);
}

.nu-notice--success .nu-notice__mark { background: var(--nu-color-success); }
.nu-notice--info .nu-notice__mark { background: var(--nu-color-info); }
.nu-notice--warning .nu-notice__mark { background: var(--nu-color-warning); }
.nu-notice--error .nu-notice__mark { background: var(--nu-color-error); }

.nu-message {
  margin: 0;
  font-size: var(--nu-size-small);
  color: var(--nu-color-muted);
}

.nu-message:empty {
  display: none;
}

.nu-message--success { color: var(--nu-color-success); }
.nu-message--error { color: var(--nu-color-error); }

/* Card: a white surface with a 1 px border. The head carries the block's label and an action; the body, the content.
   nu-cards glues several with a 1 px line, the way data strips and app grids look. */
.nu-card {
  border: var(--nu-border-width) solid var(--nu-color-border);
  border-radius: var(--nu-radius-default);
  background: var(--nu-color-surface);
  color: var(--nu-color-ink);
}

.nu-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nu-space-12);
  border-bottom: var(--nu-border-width) solid var(--nu-color-divider);
  padding: var(--nu-space-14) var(--nu-space-20);
}

.nu-card__body {
  padding: var(--nu-space-16) var(--nu-space-20);
}

/* A number that tells the state, with its small unit. */
.nu-card__figure {
  display: flex;
  align-items: baseline;
  gap: var(--nu-space-8);
  margin: 0;
  font-size: var(--nu-size-number);
  line-height: var(--nu-font-line-height-tight);
}

.nu-card__unit {
  font-size: var(--nu-size-small);
  color: var(--nu-color-muted);
}

.nu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--nu-layout-card-min), 1fr));
  gap: var(--nu-border-width);
  border: var(--nu-border-width) solid var(--nu-color-border);
  background: var(--nu-color-border);
}

.nu-cards > .nu-card {
  border: 0;
}

/* Chip: a short tag in a box (a filter, a category, a count). --accent marks the one that is on. */
.nu-chip {
  display: inline-flex;
  box-sizing: border-box;
  min-height: var(--nu-ui-chip, var(--nu-control-chip));
  align-items: center;
  gap: var(--nu-space-6);
  border: var(--nu-border-width) solid var(--nu-color-border);
  border-radius: var(--nu-radius-default);
  padding: 0 var(--nu-ui-chip-pad, var(--nu-space-10));
  background: var(--nu-color-surface);
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-size-caption);
  font-weight: var(--nu-font-weight-regular);
  white-space: nowrap;
  color: var(--nu-color-ink);
}

.nu-chip--accent {
  border-color: var(--nu-color-accent);
  color: var(--nu-color-accent);
}

button.nu-chip {
  cursor: pointer;
}

button.nu-chip:hover {
  border-color: var(--nu-color-accent);
}

button.nu-chip:focus-visible {
  outline: var(--nu-border-focus) solid var(--nu-color-accent);
  outline-offset: var(--nu-border-focus);
}

.nu-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nu-space-8);
}

/* Status: a square of color next to a system label. Grey is inactive, orange is active or needs attention, green is
   online. */
.nu-status {
  display: inline-flex;
  align-items: center;
  gap: var(--nu-space-8);
  font-family: var(--nu-font-family-mono);
  font-size: var(--nu-size-label);
  font-weight: var(--nu-font-weight-regular);
  letter-spacing: var(--nu-font-letter-spacing-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nu-color-muted);
}

.nu-status::before {
  width: var(--nu-control-mark);
  height: var(--nu-control-mark);
  flex: none;
  background: var(--nu-color-faint);
  content: "";
}

.nu-status--active::before { background: var(--nu-color-accent); }
.nu-status--online::before { background: var(--nu-color-online); }
.nu-status--alert { color: var(--nu-color-accent); }
.nu-status--alert::before { background: var(--nu-color-accent); }

/* System label: Ubuntu Mono, uppercase, letter-spaced, grey. Names blocks, dates, counters and states; it is the
   logo's letter and ties the screen to the brand. --block names a block of Home; --accent is the date of Home. */
.nu-label {
  margin: 0;
  font-family: var(--nu-font-family-mono);
  font-size: var(--nu-size-label);
  font-weight: var(--nu-font-weight-regular);
  line-height: var(--nu-space-14);
  letter-spacing: var(--nu-font-letter-spacing-label);
  text-transform: uppercase;
  color: var(--nu-color-muted);
}

.nu-label--block {
  font-size: var(--nu-size-label-block);
}

.nu-label--accent {
  color: var(--nu-color-accent);
}

/* Link: orange text that goes somewhere or does a small thing ("Configure", "See all activity"). */
.nu-link {
  display: inline-flex;
  min-height: var(--nu-space-24);
  align-items: center;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-size-small);
  font-weight: var(--nu-font-weight-regular);
  color: var(--nu-color-accent);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nu-link:hover {
  color: var(--nu-color-accent-hover);
  text-decoration: underline;
}

.nu-link:focus-visible {
  outline: var(--nu-border-focus) solid var(--nu-color-accent);
  outline-offset: var(--nu-border-focus);
}

/* Touch screens: a 44 px target. */
@media (pointer: coarse) {
  .nu-link {
    min-height: var(--nu-control-touch);
  }
}

/* A quiet link: grey and underlined, for what is secondary ("I forgot my password"). */
.nu-link--muted {
  color: var(--nu-color-muted);
  text-decoration: underline;
  text-underline-offset: var(--nu-space-4);
}

.nu-link--muted:hover {
  color: var(--nu-color-ink);
}

/* One-column page: the sign-in, the account, a claim or a notice. The logo file on top, a title and a narrow column
   centered on the screen's background. It follows the system's mode through the tokens. */
.nu-page {
  display: flex;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  align-items: center;
  justify-content: center;
  background: var(--nu-color-background);
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-size-body);
  font-weight: var(--nu-font-weight-regular);
  color: var(--nu-color-ink);
}

.nu-page__main {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--nu-layout-page-narrow);
  padding: var(--nu-space-32) var(--nu-space-16);
}

.nu-page__logo {
  display: block;
  margin-bottom: var(--nu-space-32);
}

.nu-page__logo img {
  display: block;
  width: auto;
}

.nu-page__title {
  margin: 0 0 var(--nu-space-24);
  font-size: var(--nu-size-page-title);
  font-weight: var(--nu-font-weight-regular);
  line-height: var(--nu-font-line-height-tight);
}

.nu-page__subtitle {
  margin: var(--nu-space-32) 0 var(--nu-space-8);
  font-size: var(--nu-size-subtitle);
  font-weight: var(--nu-font-weight-regular);
}

/* The form and the buttons under it, one under the other. */
.nu-page__stack {
  display: flex;
  flex-direction: column;
  gap: var(--nu-space-16);
  margin: 0;
}

/* "or" between two ways in, with a line to each side. */
.nu-page__divider {
  display: flex;
  align-items: center;
  gap: var(--nu-space-12);
  margin: var(--nu-space-24) 0 var(--nu-space-8);
  font-size: var(--nu-size-small);
  color: var(--nu-color-muted);
}

.nu-page__divider::before,
.nu-page__divider::after {
  flex: 1;
  border-top: var(--nu-border-width) solid var(--nu-color-border);
  content: "";
}

/* A list of rows with a line under each (the companies of an account). */
.nu-page__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nu-page__list > li {
  border-bottom: var(--nu-border-width) solid var(--nu-color-border);
  padding: var(--nu-space-8) 0;
}