/* ==========================================================================
   Components: buttons, fields, cards, alerts, badges, tables, lists, menus,
   help tips, disclosures and loading indicators.
   Each component reads its colours from its own custom properties (--btn-*,
   --alert-*, --table-*), so a variant only has to set those.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-padding-x: .95rem;
  --btn-padding-y: .375rem;
  --btn-font-size: .9rem;
  --btn-radius: var(--radius);
  --btn-color: var(--ink-2);
  --btn-bg: transparent;
  --btn-border-color: transparent;
  --btn-hover-color: var(--btn-color);
  --btn-hover-bg: var(--btn-bg);
  --btn-hover-border-color: var(--btn-border-color);
  --btn-active-color: var(--btn-hover-color);
  --btn-active-bg: var(--btn-hover-bg);
  --btn-active-border-color: var(--btn-hover-border-color);
  --btn-disabled-color: var(--btn-color);
  --btn-disabled-bg: var(--btn-bg);
  --btn-disabled-border-color: var(--btn-border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--tap-target);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

.btn:focus-visible {
  border-color: var(--signal);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.btn:active,
.btn.active,
.btn[aria-expanded="true"] {
  border-color: var(--btn-active-border-color);
  background-color: var(--btn-active-bg);
  color: var(--btn-active-color);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  border-color: var(--btn-disabled-border-color);
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-color);
  opacity: .65;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn-sm {
  --btn-padding-x: .65rem;
  --btn-padding-y: .25rem;
  --btn-font-size: .82rem;
  --btn-radius: var(--radius-sm);
  min-height: 32px;
}

.btn-lg {
  --btn-padding-x: 1.3rem;
  --btn-padding-y: .5rem;
  --btn-font-size: 1rem;
  --btn-radius: var(--radius);
  min-height: 50px;
}

/* Small buttons are fine for a mouse; a finger needs the full target */
@media (pointer: coarse) {
  .btn-sm {
    min-height: var(--tap-target);
  }
}

.btn-primary {
  --btn-color: #fff;
  --btn-bg: var(--signal);
  --btn-border-color: var(--signal);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--signal-deep);
  --btn-hover-border-color: var(--signal-deep);
  --btn-active-bg: #1d2d82;
  --btn-active-border-color: #1d2d82;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(38, 57, 160, .25);
}

.btn-outline-primary {
  --btn-color: var(--signal);
  --btn-border-color: var(--signal-line);
  --btn-hover-color: var(--signal-deep);
  --btn-hover-bg: var(--signal-tint);
  --btn-hover-border-color: var(--signal);
  --btn-active-color: #fff;
  --btn-active-bg: var(--signal);
  --btn-active-border-color: var(--signal);
}

.btn-secondary {
  --btn-color: var(--ink-2);
  --btn-bg: var(--surface);
  --btn-border-color: var(--line-strong);
  --btn-hover-color: var(--ink);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-border-color: #a9b2c4;
  --btn-active-color: var(--ink);
  --btn-active-bg: var(--line-2);
  --btn-active-border-color: #a9b2c4;
}

.btn-outline-secondary {
  --btn-color: var(--ink-3);
  --btn-border-color: var(--line-strong);
  --btn-hover-color: var(--ink);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-border-color: #a9b2c4;
  --btn-disabled-color: #6b7385;
  --btn-disabled-border-color: var(--line);
}

.btn-success {
  --btn-color: #fff;
  --btn-bg: var(--pass);
  --btn-border-color: var(--pass);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--pass-ink);
  --btn-hover-border-color: var(--pass-ink);
}

.btn-warning {
  --btn-color: #3b2804;
  --btn-bg: #f2c14e;
  --btn-border-color: #e6b33d;
  --btn-hover-color: #2a1c02;
  --btn-hover-bg: #e8b232;
  --btn-hover-border-color: #d9a325;
  --btn-active-bg: #d9a325;
}

/* Destructive actions use the ink shade of coral, so white text on it is readable */
.btn-danger {
  --btn-color: #fff;
  --btn-bg: var(--danger-bg);
  --btn-border-color: var(--danger-bg);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--danger-bg-hover);
  --btn-hover-border-color: var(--danger-bg-hover);
  --btn-active-bg: var(--danger-bg-active);
  --btn-active-border-color: var(--danger-bg-active);
}

.btn-danger:focus-visible {
  border-color: var(--danger-bg-active);
  box-shadow: 0 0 0 3px rgba(168, 50, 42, .3);
}

.btn-outline-danger {
  --btn-color: var(--coral-ink);
  --btn-border-color: var(--coral-line);
  --btn-hover-color: var(--coral-ink);
  --btn-hover-bg: var(--coral-tint);
  --btn-hover-border-color: var(--coral);
  --btn-active-color: #fff;
  --btn-active-bg: var(--danger-bg);
  --btn-active-border-color: var(--danger-bg);
}

.btn-light {
  --btn-color: var(--ink);
  --btn-bg: #fff;
  --btn-border-color: #fff;
  --btn-hover-color: var(--ink);
  --btn-hover-bg: var(--signal-tint);
  --btn-hover-border-color: var(--signal-tint);
}

.btn-default {
  --btn-color: var(--ink-2);
  --btn-bg: var(--surface);
  --btn-border-color: var(--line);
  --btn-hover-color: var(--ink);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-border-color: var(--line-strong);
}

.btn-link {
  --btn-color: var(--signal);
  --btn-hover-color: var(--signal-deep);
  --btn-disabled-color: var(--muted);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

/* A radio or checkbox drawn as a button: the input stays focusable and announced, the label shows its state */
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-check:checked + .btn-default {
  border-color: var(--signal);
  background: var(--signal-tint);
  color: var(--signal-deep);
  box-shadow: inset 0 0 0 1px var(--signal);
}

.btn-check:focus-visible + .btn {
  border-color: var(--signal);
  box-shadow: var(--focus-ring);
}

.btn-check:disabled + .btn {
  opacity: .65;
  pointer-events: none;
}

/* A button that is only an icon, such as closing the navigation; its name comes from aria-label */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  padding: 0;
}

.icon-button:hover {
  background: rgba(127, 138, 160, .16);
}

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

.form-label {
  margin-bottom: .35rem;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
}

.form-text {
  display: block;
  margin-top: .25rem;
  color: var(--text-muted);
  font-size: .875em;
}

.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-clip: padding-box;
  color: var(--ink);
  font-size: var(--field-font-size);
  font-weight: 400;
  line-height: 1.5;
  padding: .375rem .75rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-2);
  color: var(--ink-3);
}

.form-control[readonly] {
  background-color: var(--surface-2);
}

textarea.form-control {
  min-height: calc(1.5em + .75rem + 2px);
}

.form-control[type="file"] {
  overflow: hidden;
}

.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-control::file-selector-button {
  margin: -.375rem .75rem -.375rem -.75rem;
  border: 0;
  border-inline-end: 1px solid var(--line-strong);
  border-radius: 0;
  background-color: var(--surface-2);
  color: var(--ink-2);
  padding: .375rem .75rem;
  pointer-events: none;
}

.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5em;
  margin: 0;
}

.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232b3449' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position: right .75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}

.form-select[multiple],
.form-select[size]:not([size="1"]) {
  background-image: none;
  padding-right: .75rem;
}

.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--ink);
}

.form-control-sm,
.form-select-sm {
  min-height: 34px;
  border-radius: var(--radius-sm);
  font-size: max(.875rem, var(--field-font-size) - .05rem);
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.form-control-sm {
  padding-left: .5rem;
  padding-right: .5rem;
}

.form-select-sm {
  padding-left: .5rem;
}

.form-control-lg {
  min-height: 50px;
  font-size: 1.1rem;
  padding: .5rem 1rem;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible {
  border-color: var(--signal);
  box-shadow: var(--focus-ring);
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-select {
    transition: none;
  }
}

/* Checkboxes, radios and switches */
.form-check {
  display: block;
  min-height: 1.5rem;
  margin-bottom: .125rem;
  padding-left: 1.5em;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-input {
  --check-image: none;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: .25em;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  background-image: var(--check-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.form-check-input[type="checkbox"] {
  border-radius: .25em;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:active {
  filter: brightness(90%);
}

.form-check-input:checked {
  border-color: var(--signal);
  background-color: var(--signal);
}

.form-check-input:checked[type="checkbox"] {
  --check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
  --check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
  filter: none;
  opacity: .5;
  pointer-events: none;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  cursor: default;
  opacity: .5;
}

.form-check-label {
  cursor: pointer;
}

.form-switch {
  padding-left: 2.5em;
}

.form-switch .form-check-input {
  --check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235e6779'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  border-radius: 2em;
  background-position: left center;
  transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:checked {
  --check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: right center;
}

@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}

/* A field with a fixed prefix or suffix joined to it */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 5;
}

.input-group > .btn {
  position: relative;
  z-index: 2;
}

.input-group-text {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--field-font-size);
  line-height: 1.5;
  padding: .375rem .75rem;
  text-align: center;
  white-space: nowrap;
}

.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Validation: ASP.NET's classes, and invalid fields said so beside them */
.validation-summary-errors,
.field-validation-error {
  color: var(--coral-ink);
}

.field-validation-error {
  display: block;
  margin-top: .25rem;
  font-size: .875em;
}

.validation-summary-errors ul {
  margin-bottom: 0;
}

.input-validation-error,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--coral) !important;
}

.input-validation-error:focus,
.form-control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(226, 87, 76, .25);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  background-clip: border-box;
  box-shadow: var(--shadow-1);
  word-wrap: break-word;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card-header {
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  padding: .9rem 1.15rem;
}

/* A card header that's the section's heading, keeps the header's look */
.card-header .card-heading {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.15rem;
}

.card-title {
  margin-bottom: .5rem;
}

.card-footer {
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  background: var(--surface-2);
  padding: .75rem 1.15rem;
}

.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card > .list-group:first-child {
  border-top-width: 0;
}

.card > .list-group:last-child {
  border-bottom-width: 0;
}

.card > .card-header + .list-group {
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Tables
   A table that can be wider than the page scrolls inside .table-responsive;
   the shadow at its edge says there's more to the side.
   -------------------------------------------------------------------------- */

.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(19, 26, 43, .14), rgba(19, 26, 43, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(19, 26, 43, .14), rgba(19, 26, 43, 0)) right center / 12px 100% no-repeat scroll,
    var(--surface);
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}

.card .table-responsive {
  border: 0;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  box-shadow: none;
}

.table {
  --table-color: var(--ink-2);
  --table-bg: transparent;
  --table-border-color: var(--line-2);
  --table-hover-bg: #f4f6fb;
  width: 100%;
  margin-bottom: 0;
  border-color: var(--table-border-color);
  color: var(--table-color);
  font-size: .9rem;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  border-bottom-width: 1px;
  background-color: var(--table-bg);
  color: var(--table-color);
  padding: .75rem .85rem;
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table > caption {
  color: var(--ink);
  font-weight: 650;
  padding: .75rem .85rem;
}

.table thead th,
.table tbody > tr:first-child > th {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.table thead th .icon {
  color: var(--line-strong);
}

.table tfoot td,
.table tfoot th {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 650;
}

.table-sm > :not(caption) > * > * {
  padding: .25rem;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--table-hover-bg);
}

/* Sortable column headings: the link sorts, aria-sort says which way */
.table th[aria-sort] > a {
  color: inherit;
  text-decoration: none;
}

.table th[aria-sort="ascending"] > a::after,
.table th[aria-sort="descending"] > a::after {
  content: "";
  display: inline-block;
  margin-left: .3em;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  vertical-align: .15em;
}

.table th[aria-sort="ascending"] > a::after { border-bottom: .35em solid currentColor; }
.table th[aria-sort="descending"] > a::after { border-top: .35em solid currentColor; }

/* Status rows get a left rule instead of a full row wash */
.table tr.table-success > :first-child { box-shadow: inset 3px 0 0 var(--pass); }
.table tr.table-danger > :first-child { box-shadow: inset 3px 0 0 var(--coral); }
.table tr.table-warning > :first-child { box-shadow: inset 3px 0 0 var(--watch); }
.table tr.table-secondary > :first-child { box-shadow: inset 3px 0 0 var(--line-strong); }
.table tr.table-info > :first-child { box-shadow: inset 3px 0 0 var(--signal); }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.list-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  border-radius: var(--radius);
  padding-left: 0;
}

.list-group-item {
  position: relative;
  display: block;
  border: 1px solid var(--line-2);
  background-color: var(--surface);
  color: var(--ink-2);
  padding: .5rem 1rem;
  text-decoration: none;
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item.active {
  z-index: 2;
  border-color: var(--signal);
  background-color: var(--signal);
  color: #fff;
}

.list-group-item-action {
  width: 100%;
  color: var(--ink-2);
  text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus-visible {
  z-index: 1;
  background-color: var(--surface-2);
  color: var(--ink);
}

.list-group-flush {
  border-radius: 0;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

/* Grey until a text-bg-* class or a status tone (is-good, is-risk, is-watch, is-neutral) colours it, so a badge is never
   white on the page's white */
.badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  background-color: var(--line-2);
  color: var(--ink-3);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  padding: .32em .55em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.badge:empty {
  display: none;
}

/* The status chips' tones, which the API sends for a badge as it does for a chip */
.badge.is-good {
  background-color: var(--pass-tint);
  color: var(--pass-ink);
}

.badge.is-risk {
  background-color: var(--coral-tint);
  color: var(--coral-ink);
}

.badge.is-watch {
  background-color: var(--watch-tint);
  color: var(--watch-ink);
}

.badge.is-neutral {
  background-color: var(--line-2);
  color: var(--ink-3);
}

.text-bg-info,
.bg-info {
  background-color: var(--signal-tint) !important;
  color: var(--signal-deep) !important;
}

.text-bg-primary,
.bg-primary {
  background-color: var(--signal) !important;
  color: #fff !important;
}

.text-bg-success,
.bg-success {
  background-color: var(--pass-tint) !important;
  color: var(--pass-ink) !important;
}

.text-bg-warning,
.bg-warning {
  background-color: var(--watch-tint) !important;
  color: var(--watch-ink) !important;
}

.text-bg-danger,
.bg-danger {
  background-color: var(--coral-tint) !important;
  color: var(--coral-ink) !important;
}

.text-bg-secondary,
.bg-secondary {
  background-color: var(--line-2) !important;
  color: var(--ink-3) !important;
}

.text-bg-light,
.bg-light {
  background-color: var(--surface-2) !important;
  color: var(--ink-2) !important;
}

.text-bg-dark,
.bg-dark {
  background-color: var(--ink) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Alerts: a message about the page, in the colour of its news
   -------------------------------------------------------------------------- */

.alert {
  --alert-color: var(--ink-2);
  --alert-bg: var(--surface);
  --alert-border-color: var(--line);
  position: relative;
  margin-bottom: 1rem;
  border: 1px solid var(--alert-border-color);
  border-radius: var(--radius);
  background-color: var(--alert-bg);
  color: var(--alert-color);
  font-size: .925rem;
  padding: 1rem;
}

.alert-link {
  color: inherit;
  font-weight: 700;
}

.alert-link:hover {
  color: inherit;
}

.alert-success {
  --alert-bg: var(--pass-tint);
  --alert-border-color: var(--pass-line);
  --alert-color: var(--pass-ink);
}

.alert-danger {
  --alert-bg: var(--coral-tint);
  --alert-border-color: var(--coral-line);
  --alert-color: var(--coral-ink);
}

.alert-warning {
  --alert-bg: var(--watch-tint);
  --alert-border-color: var(--watch-line);
  --alert-color: var(--watch-ink);
}

.alert-info,
.alert-primary {
  --alert-bg: var(--signal-tint);
  --alert-border-color: var(--signal-line);
  --alert-color: var(--signal-deep);
}

.alert-secondary {
  --alert-bg: var(--surface-2);
  --alert-border-color: var(--line);
  --alert-color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Menus: a list of actions opened from a button (ui.js)
   -------------------------------------------------------------------------- */

.menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  color: var(--ink-2);
  font-size: .9rem;
  list-style: none;
  padding: .3rem;
  text-align: left;
}

.menu.is-open {
  display: block;
}

.menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-weight: 400;
  padding: .45rem .6rem;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.menu-item .icon {
  color: var(--muted);
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
  outline: 0;
}

.menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--signal);
}

.menu-item:active,
.menu-item:active .icon {
  background: var(--signal);
  color: #fff;
}

@media (pointer: coarse) {
  .menu-item {
    min-height: var(--tap-target);
  }
}

.menu-text {
  display: block;
  color: var(--muted);
  font-size: .875em;
  padding: .45rem .6rem;
}

.menu-divider {
  height: 0;
  margin: .3rem 0;
  overflow: hidden;
  border-top: 1px solid var(--line-2);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Help tips: a button beside a term whose explanation shows on hover, focus
   or tap (ui.js). Everything the reader must know stays in the page text.
   -------------------------------------------------------------------------- */

.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -.25rem 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: help;
  font-size: .85em;
  padding: 0;
  vertical-align: middle;
}

/* The visible circle stays small; the area that takes a tap is larger */
@media (pointer: coarse) {
  .help-tip {
    position: relative;
  }

  .help-tip::after {
    content: "";
    position: absolute;
    inset: -.6rem;
  }
}

.help-tip:hover,
.help-tip:focus-visible,
.help-tip[aria-expanded="true"] {
  background: var(--signal-tint);
  color: var(--signal-deep);
}

.table thead th .help-tip .icon {
  color: inherit;
}

.tooltip-bubble {
  position: fixed;
  z-index: 1080;
  max-width: min(300px, calc(100vw - 16px));
  border-radius: var(--radius-sm);
  background: var(--ink);
  box-shadow: var(--shadow-2);
  color: #fff;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.45;
  padding: .45rem .65rem;
  text-align: left;
  white-space: normal;
}

.tooltip-bubble[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Disclosures: native <details>, styled as a card that opens
   -------------------------------------------------------------------------- */

.disclosure {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.disclosure + .disclosure {
  margin-top: .75rem;
}

.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: calc(var(--radius-lg) - 1px);
  color: var(--ink);
  font-weight: 600;
  list-style: none;
  padding: .9rem 1.15rem;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::after {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: transform .2s ease-in-out;
}

.disclosure[open] > summary {
  border-bottom: 1px solid var(--line-2);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--surface-2);
}

.disclosure[open] > summary::after {
  transform: rotate(-180deg);
}

.disclosure > summary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

.disclosure-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}

.disclosure-title > .icon:first-child {
  margin-top: .05em;
}

.disclosure-body {
  padding: 1rem 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .disclosure > summary::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Confirmation dialog (ui.js), asked before a form with data-confirm is sent
   -------------------------------------------------------------------------- */

.confirm-dialog {
  width: min(440px, calc(100vw - 2rem));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  color: var(--ink-2);
  padding: 1.35rem 1.4rem 1.2rem;
}

.confirm-dialog::backdrop {
  background: rgba(19, 26, 43, .5);
}

.confirm-dialog-title {
  margin-bottom: .5rem;
  font-size: 1.15rem;
}

.confirm-dialog-text {
  margin-bottom: 1.25rem;
  white-space: pre-line;
}

.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

/* A panel opened by a button with data-toggle-target (ui.js); without script it stays open */
.js .collapsible:not(.is-open) {
  display: none;
}

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */

.spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: .25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.125em;
  animation: spinner .75s linear infinite;
}

.spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: .2em;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 1.5s;
  }
}

/* --------------------------------------------------------------------------
   DNS values and code
   -------------------------------------------------------------------------- */

.dns-record,
code {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .86em;
  word-break: break-word;
}

.dns-record {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: .28rem .45rem;
}

/* --------------------------------------------------------------------------
   Row actions inside tables: quiet by default
   -------------------------------------------------------------------------- */

.action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.table .action-stack {
  align-items: center;
  gap: .3rem;
  min-width: 190px;
}

.table .action-stack .btn {
  min-height: 30px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: .8rem;
  line-height: 1;
  padding: .36rem .6rem;
}

@media (pointer: coarse) {
  .table .action-stack .btn {
    min-height: var(--tap-target);
  }
}

.table .action-stack .btn-primary,
.table .action-stack .btn-success,
.table .action-stack .btn-warning,
.table .action-stack .btn-secondary,
.table .action-stack .btn-outline-primary,
.table .action-stack .btn-outline-secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-2);
}

.table .action-stack .btn-primary {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

.table .action-stack .btn-primary:hover,
.table .action-stack .btn-primary:focus-visible {
  border-color: var(--signal-deep);
  background: var(--signal-deep);
  color: #fff;
}

.table .action-stack .btn-success:hover,
.table .action-stack .btn-warning:hover,
.table .action-stack .btn-secondary:hover,
.table .action-stack .btn-outline-primary:hover,
.table .action-stack .btn-outline-secondary:not(:disabled):hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}

.table .action-stack .btn-outline-secondary:disabled {
  color: #6b7385;
}

.table .action-stack .btn-danger,
.table .action-stack .btn-outline-danger {
  border-color: transparent;
  background: transparent;
  color: var(--coral-ink);
}

.table .action-stack .btn-danger:hover,
.table .action-stack .btn-danger:focus-visible,
.table .action-stack .btn-outline-danger:hover,
.table .action-stack .btn-outline-danger:focus-visible {
  border-color: var(--coral-line);
  background: var(--coral-tint);
  color: var(--coral-ink);
}