:root {
  --accent: rgb(53, 130, 230);
  --accent-shade: rgb(36, 120, 210);
  --focus: rgb(84, 150, 34);
  --focus-shade: rgb(71, 130, 27);
  --focus-tint: rgb(210, 230, 200);
  --danger: rgb(210, 82, 99);
  --danger-shade: rgb(190, 66, 85);
  --light: white;
  --lesslight: rgba(230, 240, 250, 0.6);
  --text-hint: rgb(94, 99, 110);
  --dark: rgb(4, 1, 0);
  --moredark: black;
  --link: var(--accent);
  --blue-grey: rgb(140, 140, 140);
  --orange: rgb(210, 93, 25);

  --border: 1px solid var(--blue-grey);
  --box-shadow: 0px -1px 1px 0px var(--blue-grey);
  --outline: 3px solid var(--focus);

  --font-default: 1rem;
  --font-xs: .72rem;
  --font-s: .86rem;
  --font-l: 1.25rem;
  --font-xl: 2.4rem;

  --spacing-xs: 2vh;
  --spacing-s: .4rem;
  --spacing-m: 1rem;
  --spacing-l: 2rem;
  --spacing-xl: 4rem;
  --spacing-xxl: calc(0.5rem + 4vw);

  accent-color: var(--accent);
  border-top: 0;
  font-size: 110%;
}

@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
  :root {
    font-size: 110%;
  }
}

@font-face {
  font-family: archivo-black;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ArchivoBlack-Regular.woff2) format('woff2');
}
@font-face {
  font-family: varta;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Varta-Bold.woff2) format('woff2');
}
@font-face {
  font-family: varta;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Varta-Regular.woff2) format('woff2');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/PoppinsLatin-Black.otf) format('opentype');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/PoppinsLatin-Regular.otf) format('opentype');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/PoppinsLatin-Bold.otf) format('opentype');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/PoppinsLatin-ExtraBold.otf) format('opentype');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/PoppinsLatin-SemiBold.otf) format('opentype');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/PoppinsLatin-Medium.otf) format('opentype');
}
@font-face {
  font-family: poppins-latin;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/PoppinsLatin-Light.otf) format('opentype');
}


/* Global styles */

body {
  background-color: var(--lesslight);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
  padding-top: var(--spacing-xs);
  text-decoration-skip-ink: auto;
}

h1 {
  display: inline-block;
  font-size: var(--font-l);
  line-height: 1.1;
  margin-block-start: var(--spacing-m);
  margin-block-end: 0;
  /* margin-block-start: var(--space, --spacing-m); */
  /* margin-block-end: var(--space, 0); */
}

h2 {
  font-size: var(--font-l);
  font-weight: 500;
  line-height: 1.1;
}

h3 {
  display: inline-block;
  font-family: poppins-latin;
  font-size: var(--font-default);
  font-weight: 600;
  margin: 0;
}

input, select, textarea {
  background-color: var(--light);
  border: var(--border);
  box-shadow: var(--box-shadow);
  display: block;
  font: inherit;
}

input, textarea {
  margin-left: var(--spacing-s);
}

input:focus, select:focus, textarea:focus {
  border: var(--border);
  outline: var(--outline);
  outline-offset: 0px;
}

input[type="file"] {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  max-width: 150px;
}

input[type="file"]::file-selector-button {
  padding: .6em 1.2em;
}

input[type="checkbox"], input[type="radio"] {
  box-shadow: none;
  height: 1.25em;
  width: 1.25em;
  margin-left: 0;
}

input[type="checkbox"]:focus, input[type="radio"]:focus {
  outline: var(--outline);
  outline-offset: 2px;
}

input[type="radio"] {
  display: inline-block;
}

a {
  color: var(--link);
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
  transition: all ease-out .15s;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-shade);
  text-decoration-skip-ink: none;
  text-decoration-thickness: .3em;
  text-underline-offset: .25em;
}

.back-link {
  display: inline-flex;
  position: relative;
}

.back-link::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.6em;
  width: .4375em;
  height: .4375em;
  margin: auto 0;
  transform: rotate(225deg);
  border: solid;
  border-width: .1em .1em 0 0;
  border-color: var(--accent);
}

.back-link::after {
  content: "";
  position: absolute;
  top: -14px;
  right: 0;
  bottom: -14px;
  left: 0;
}

.caption-l {
  font-size: var(--font-s);
}

.radiogroup {
  border: var(--border);
  border-radius: .4em;
  padding: var(--spacing-s);
}

.error-message {
  color: var(--danger);
  font-weight: 700;
}

.error {
  border-color: var(--danger);
  border-width: .1em;
}

.error-mark {
  border-left: .23em solid var(--danger);
  padding-left: var(--spacing-m);
}

.error-mark-set {
  border: .23em solid var(--danger);
}

select {
  font: inherit;
  min-width: 26ch;
}

select, textarea {
  border-radius: .25em;
  padding: .5em;
}

label {
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
  /* border: var(--border); */
  /* border-radius: .75em; */
}

legend {
  /* margin-block-end: var(--spacing-s); */
  padding: var(--spacing-s) var(--spacing-s);
}

select {
  margin-bottom: .25em;
  margin-left: .5em;
  width: 23ch;
}

.cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--spacing-s));
}

.no-wrap {
  flex-wrap: nowrap;
}

.justified {
  justify-content: space-between;
}

.justified-center {
  justify-content: center;
}

.justified-end {
  justify-content: flex-end;
}

.with-border {
  background-color: var(--light);
  /* border: var(--border); */
  border-radius: 1.0em;
  box-shadow: 0 0 2px var(--blue-grey);
  padding: var(--spacing-s) .75em;
}

.dock-panel {
  background-color: var(--less-light);
  /* border-radius: .75em; */
  padding: var(--spacing-s);
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}

.with-sidebar > aside {
  flex-basis: 20rem;
  flex-grow: 1;
}

.box {
  /* ↓ Padding set to the first point on the modular scale */
  --border-thin: 1px;
  padding: var(--spacing-s);
  border: var(--border-thin) solid var(--lesslight);
  /* ↓ Always apply the transparent outline, for high contrast mode */
  outline: var(--border-thin) transparent;
  outline-offset: calc(var(--border-thin) * -1);
  /* ↓ The light and dark color vars */
  color: var(--dark);
  background-color: var(--light);
}

.box * {
  /* ↓ Force colors to inherit from the parent
and honor inversion (below) */
  color: inherit;
}
.box.invert {
  /* ↓ The color vars inverted */
  color: var(--light);
  background-color: var(--dark);
}

.box > h2 {
  line-height: 1.5;
}

.error-summary {
  border: .23em solid var(--danger);
  border-radius: .25em;
  padding: var(--spacing-m);
}

.with-bottom-border {
  border-bottom: 1px dotted var(--blue-grey);
}

.with-measure {
  max-inline-size: 18ch;
}

.with-measure-m {
  max-inline-size: 45ch;
}

.with-shadow {
  box-shadow: 10px 10px var(--focus-tint);
  padding: var(--spacing-m);
}

.confirmation {
  background-color: var(--focus-shade);
  border-radius: .25em;
  color: var(--light);
  max-width: 26ch;
}

.alert {
  background-color: var(--accent);
  border-radius: .25em;
  color: var(--light);
  max-width: 26ch;
}

.form-group {
  display: flex;
  flex-flow: column;
}

.frame {
  --n: 1; /* numerator */
  --d: 1; /* denominator */
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame > img,
.frame > svg,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.image-preview {
  max-width: 150px;
}

.header-preview {
  max-width: 400px;
}

.qrcode-preview {
  max-width: 125px;
}

.input-hint {
  color: var(--text-hint);
}

.grid {
  /* ↓ Establish a grid context */
  display: grid;
  /* ↓ Set a gap between grid items */
  grid-gap: .8rem;
  /* ↓ Set the minimum column width */
  --minimum: 18ch;
}

@supports (width: min(var(--minimum), 100%)) {
  .grid {
    /* ↓ Enhance with the min() function into multiple columns */
    grid-template-columns: repeat(auto-fit,minmax(min(var(--minimum), 100%),
                                                   1fr));
  }
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space, var(--spacing-m));
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  /* ↓ The default value is the first point on the modular scale */
  gap: var(--gutter, var(--spacing-s));
  /* ↓ The width at which the layout “breaks” */
  --threshold: 30rem;
}
.switcher > * {
  /* ↓ Allow children to grow */
  flex-grow: 1;
  /* ↓ Switch the layout at the --threshold */
  flex-basis: calc((var(--threshold) - 100%) * 999);
}
.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  /* ↓ Switch to a vertical configuration if
there are more than 4 child elements */
  flex-basis: 100%;
}

.toggles [disabled] + label,
.toggles [disabled]:hover + label {
  color: var(--blue-grey);
}

.toggles [type="checkbox"] {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

input[type="radio"] {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.toggles [type="checkbox"] + label {
  display: block;
  position: relative;
  padding: .5em;
  padding-left: 4em;
  max-width: calc(100% - 2em);
}

input[type="radio"] + label {
  display: block;
  padding: .5em;
  padding-left: 2em;
  max-width: calc(100% - 2em);
}

.toggles [type="checkbox"]:focus + label,
.toggles [type="checkbox"]:hover + label {
  color: var(--accent);
}

input[type="radio"]:focus + label {
  color: var(--accent);
  border-radius: .4em;
  outline: var(--outline);
}

.toggles [type="checkbox"]:focus + label::before,
.toggles [type="checkbox"]:hover + label::before {
  box-shadow: 0 0 .5em var(--blue-grey);
}

.toggles [type="checkbox"]:focus + label::after,
.toggles [type="checkbox"]:hover + label::after {
  background-image:
    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 100 100'
       xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle
       cx='50' cy='50' r='50'
       fill='rgba(0, 0, 0, .25)'/%3E%3C/svg%3E"
    );
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center center;
}

.toggles [type="checkbox"] + label::before,
.toggles [type="checkbox"] + label::after {
  content: "";
  position: absolute;
  height: 1.5em;
  transition: all 0.25s ease;
}

input[type="radio"] + label::before {
  border-radius: 100%;
  content: "";
  position: absolute;
  height: 1.5em;
  transition: all 0.25s ease;
}

.toggles [type="checkbox"] + label::before {
  left: 0;
  top: .2em;
  width: 3em;
  border: .2em solid var(--blue-grey);
  background: var(--blue-grey);
  border-radius: 1.1em;
}

.toggles [type="checkbox"] + label::after {
  left: 0;
  top: .25em;
  background-color: var(--light);
  background-position: center center;
  border-radius: 50%;
  width: 1.5em;
  border: 0.15em solid var(--blue-grey);
}

.toggles [type="checkbox"]:checked + label::after {
  left: 1.6em;
  border-color: var(--accent);
  color: var(--accent);
}

input[type="radio"]:checked + label::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: .5em;
  width: 1em;
  height: 1em;
  transform: rotate(0deg);
  transition: all .1s ease-out;
}

input[type="radio"]:checked + label::before {
  background-color: var(--accent);
  box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95);
}

input[type="radio"] + label::before {
  background-color: var(--lesslight);
  border: .1em solid var(--blue-grey);
  /* box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95); */
  content: '';
  display: block;
  float: left;
  width: 1em;
  height: 1em;
  margin-left: -1.5em;
  margin-top: .15em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all .1s ease-out;
}

.toggles [type="checkbox"]:indeterminate + label::after {
  left: .8em;
}

.toggles [type="checkbox"]:indeterminate + label::before {
  background-color: var(--blue-grey);
}

.toggles [type="checkbox"]:checked + label::before {
  background-color: var(--accent);
  border-color: var(--accent);
}

.toggles [type="checkbox"][disabled] + label::before {
  background-color: transparent;
  border-color: var(--blue-grey);
}

.toggles [type="checkbox"][disabled] + label::after {
  border-color: var(--blue-grey);
}

.toggles [disabled]:hover + label {
  color: var(--blue-grey); /* case for CSS custom property if not supporting IE/Edge */
}

.toggles [type="checkbox"][disabled]:hover + label::before {
  box-shadow: none;
}

.toggles [type="checkbox"][disabled]:hover + label::after {
  background-image: none;
}

.toggle [aria-pressed] {
  display: block;
  box-sizing: border-box;
  border: none;
  color: inherit;
  background: none;
  font: inherit;
  line-height: inherit;
  text-align: left;
  padding: .4em 0 .4em 4em;
  position: relative;
  width: 100%;
}

.toggle [aria-pressed][disabled],
.toggle [aria-pressed][disabled]:hover {
  color: var(--blue-grey);
}

.toggle [aria-pressed]:focus,
.toggle [aria-pressed]:hover {
  color: var(--accent);
  outline: none;
}

.toggle [aria-pressed]:focus::before,
.toggle [aria-pressed]:hover::before {
  box-shadow: 1px 1px 4px var(--blue-grey);
}

.toggle [aria-pressed]:focus::after,
.toggle [aria-pressed]:hover::after {
  background-image:
    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 100 100'
       xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle
       cx='50' cy='50' r='50'
       fill='rgba(0,0,0,.25)'/%3E%3C/svg%3E"
    );
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center center;
}

.toggle [aria-pressed]::before,
.toggle [aria-pressed]::after {
  content: "";
  position: absolute;
  height: 1.8em;
  transition: all 0.25s ease;
}

.toggle [aria-pressed]::before {
  left: 0;
  top: 0.2em;
  width: 3.6em;
  border: 0.2em solid var(--blue-grey);
  background: var(--blue-grey);
  border-radius: 1.1em;
}

.toggle [aria-pressed]::after {
  left: 0;
  top: 0.25em;
  background-color: var(--light);
  background-position: center center;
  border-radius: 50%;
  width: 1.8em;
  border: 0.15em solid var(--blue-grey);
}

.toggle [aria-pressed=true]::after {
  left: 1.6em;
  border-color: var(--accent);
  color: var(--accent);
}

.toggle [aria-pressed=true]::before {
  background-color: var(--accent);
  border-color: var(--accent);
}

.toggle [aria-pressed][disabled]::before {
  background-color: transparent;
  border-color: #ddd;
}

.toggle [aria-pressed][disabled]::after {
  border-color: #ddd;
}

.toggle [aria-pressed][disabled]:hover {
  color: #999; /* case for CSS custom property if not supporting IE/Edge */
}

.toggle [aria-pressed][disabled]:hover::before {
  box-shadow: none;
}

.toggle [aria-pressed][disabled]:hover::after {
  background-image: none;
}

/* Put toggles on the right like the iOS the kids like */

.toggle.flip [aria-pressed]::before,
.toggle.flip [aria-pressed]::after {
  left: auto;
  right: 0;
}

.toggle.flip [aria-pressed]::after {
  left: auto;
  right: 1.9em;
}

.toggle.flip [aria-pressed=true]::after {
  right: 0;
}

.toggle.flip [aria-pressed] {
  padding-left: 0;
  padding-right: 4em;
}

.bubbles {
  /* margin-left: -.6em; */
  margin-right: -.15em;
}

.logo {
  color: var(--accent);
  font-family: poppins-latin;
  font-weight: 700;
  letter-spacing: 0.02ch;
  padding: .4em 0em;
}

.link-wrap {
  overflow-wrap: break-word;
}

.link-wrap a {
  font-size: var(--font-s);
}

.uppercase {
  font-feature-settings: "case", "sinf";
  text-transform: uppercase;
  --opentype-case: on;
}

nav * {
  /* font-weight: bold; */
  list-style-type: none;
  padding: 0;
  text-decoration: none;
}

nav * a {
  display: block;
  padding: .75em .5em;
}

nav ul {
  margin: 0;
}

nav ul li a {
  color: var(--accent);
  font-weight: bold;
  /* margin: .25em .75em; */
  text-align: center;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline var(--accent) solid 2px;
}

.in-form li {
  display: inline;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  gap: .5em;
}

.container-row {
  display: flex;
  flex-flow: row;
}


aside.error {
  display: inline-block;
  border: var(--border);
  border-radius: .25em;
  box-shadow: 0px -3px 1px -1px var(--danger);
  padding: .5em;
  width: 33%;
}

.menu-item[draggable="true"] {
  cursor: move;
}

.menu-item {
  display: flex;
  margin-left: var(--spacing-s);
}

ol.mi-container {
  display: flex;
  flex-flow: column nowrap;
  padding-left: var(--spacing-m);
}

.mi-headers {
  font-size: var(--font-s);
  padding-left: var(--spacing-l);
}

ul.mi-container {
  /* background-color: var(--light); */
  /* border-radius: 1em; */
  /* box-shadow: 0 0 2px var(--blue-grey); */
  display: flex;
  flex-flow: column nowrap;
  list-style-type: none;
  margin-top: .75em;
  margin-bottom: .75em;
  padding-left: 0;
}

ul.cat-container {
  list-style-type: none;
  padding-left: 0;
}

ol.mi-container li {
  align-items: baseline;
}

ol.mi-container li::marker {
  font-weight: 700;
}

ul.mi-container li {
  align-items: baseline;
  column-gap: 1em;
  display: flex;
  padding: .5em .5em;
}

ul.mi-container li:hover {
  /* background-color: var(--lesslight); */
}

ul.mi-container li:not(:last-child) {
  /* border-bottom: var(--border); */
}

/* ul.mi-container li::before { */
/*   color: var(--dark); */
/*   content: '\2630'; */
/*   margin-right: .25em; */
/* } */

.label {
  flex: 4 2 0;
}

.price {
  flex: 2 1 0;
}

.poppins {
  font-family: poppins-latin;
}

.landing {
  font-family: poppins-latin;
  font-size: var(--font-xl);
  font-weight: 500;
  margin-block-start: var(--spacing-l);
  margin-block-end: var(--spacing-m);
}

.prose {
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;

  hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-zone: 8%;
  hyphenate-limit-last: always;
}

.subhead-landing {
  font-family: poppins-latin;
  font-size: var(--font-l);
  font-weight: 400;
  line-height: 1.5;
  max-width: 50ch;
}

.subhead-landing b {
  font-weight: 700;
}

/* h1.display-font { */
/*     color: var(--accent); */
/*     font-family: var(--font-display); */
/*     font-size: 1.3em; */
/*     font-weight: 600; */
/*     text-transform: uppercase; */
/* } */

header.main {
  align-items: center;
  /* border-bottom: var(--border); */
  column-gap: 80px;
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 1em; */
  /* padding: .25em .75em;     */
}

.center {
    box-sizing: content-box;
    max-inline-size: 60ch;
    margin-inline: auto;
    /* padding-inline-start: var(--s1); */
    /* padding-inline-end: var(--s1); */
}

.options {
  border-radius: 0.4em;
}

a.menu-card {
  border-radius: 0.4em;
  color: var(--dark);
  /* flex: 1 1 1; */
  max-width: 100%;
  text-decoration: none;
}

a.menu-card:focus {
  outline: var(--outline);
  outline-offset: 2px;
}

a.menu-card:hover {
  outline: var(--outline);
  outline-offset: 2px;
}

article.menu-card {
  background-color: var(--light);
  border-radius: .4em;
  box-shadow: 0 0 2px var(--blue-grey);
  /* height: 100%; */
  /* max-width: 180px; */
  /* min-width: 160px; */
  /* min-height: 214px; */
  /* height: 290px; */
  /* max-width: 180px; */
  /* border: var(--border); */
  /* padding: .75em .75em; */
  padding: var(--spacing-m) var(--spacing-m);
}

section.content {
  /* background-color: var(--light); */
  /* border-radius: .75em; */
  /* box-shadow: 0 0 2px var(--blue-grey); */
}

.feather {
  vertical-align: middle;
}

.feather-file {
  display: inline-flex;
  margin-right: 0.1em;
  vertical-align: text-top;
}

.feather-user {
  vertical-align: sub;
}

.feather-help-circle {
  vertical-align: text-top;
}

.feather-alert-circle {
  height: 3.5cap;
  vertical-align: middle;
}

footer {
  align-items: center;
  /* border-top: var(--border); */
  column-gap: .25em;
  display: flex;
  margin-top: 2em;
  padding: 1em .75em;
}

.footprint {
  align-items: baseline;
  border-top: 1px dotted var(--blue-grey);
  color: var(--dark);
  display: flex;
  font-size: var(--font-s);
  justify-content: space-between;
  line-height: 1.1;
  margin-block-start: var(--spacing-l);
  padding-top: .5rem;
}

.small-font {
  font-size: var(--font-s);
}

span.section_title {
  font-weight: 600;
}

up-drawer-dismiss, up-modal-dismiss {
  border-width: 0px;
  border-style: solid;
  border-color: var(--blue-grey);
  border-radius: 50%;
  border-bottom-color: var(--lesslight);
  border-bottom-style: solid;
  border-bottom-width: .1em;
  box-shadow: 0px 2px 4px var(--blue-grey);
  color: var(--dark);
  font-size: 1.7rem;
  line-height: 1;
  padding: 4px 12px;
  top: 5px;
}

up-drawer-dismiss:hover {
  background-color: var(--lesslight);
}

up-drawer-dismiss:active {
  transform: scale(96%);
}

up-drawer, up-modal {
  --space: 0;
}

up-drawer-box {
  padding: var(--spacing-s) var(--spacing-m);
}

up-modal-box, up-popup {
  background-color: var(--light);
  border-radius: .75em;
}

.segno {
  background-color: white;
  height: 200px;
  width: 200px;
}

.segno-demo {
  height: 200px;
  width: 200px;
}

.arg {
  vertical-align: bottom;
}

.imposter {
  /* ↓ Choose the positioning element */
  position: var(--positioning, absolute);
  /* ↓ Position the top left corner in the center */
  inset-block-start: 92%;
  inset-inline-start: 50%;
  /* ↓ Reposition so the center of the element
is the center of the container */
  transform: translate(-50%, -50%);
}

.imposter.contain {
  /* ↓ Include a unit, or the calc function will be invalid */
  --margin: 1px;
  /* ↓ Provide scrollbars so content is not obscured */
  overflow: auto;
  /* ↓ Restrict the height and width, including optional
spacing/margin between the element and positioning container */
  max-inline-size: calc(100% - (var(--margin) * 2));
  max-block-size: calc(100% - (var(--margin) * 2));
}

.round-button {
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 1em;
  border-color: var(--blue-grey);
  color: var(--dark);
  padding: .3em;
  line-height: 1.1;
  cursor: pointer;
}

.round-button:hover {
  background: var(--lesslight);
  border-color: var(--accent);
}

.round-button:focus {
  outline-style: solid;
  outline-width: .2em;
  outline-color: var(--focus);
  outline-offset: 2px;
}

.button {
  /* Configuration */
  --button-padding: .7em 1.2em;
  --button-gap: .1em;
  --button-bg: #342a21;
  --button-color: #ffffff;
  --button-font-size: var(--font-default);
  --button-hover-bg: #4b4b4a;
  --button-hover-color: #ffffff;
  --button-border-width: 0px;
  --button-border-style: solid;
  --button-border-color: var(--blue-grey);
  --button-radius: 1.0em;
  --button-outline-width: .2em;
  --button-outline-color: var(--focus);
  --button-outline-offset: .15em;
  /* Layout and spacing */
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);
  /* Colours */
  background: var(--button-bg);
  color: var(--button-color);
  /* Stroke and radius */
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);
  box-shadow: 0px 2px 4px var(--blue-grey);
  border-bottom-color: var(--button-hover-bg);
  border-bottom-style: solid;
  border-bottom-width: .25em;
  /* Typography */
  text-decoration: none;
  font-weight: var(--button-font-weight, 700);
  font-size: var(--button-font-size, 1rem);
  letter-spacing: 0.05ch;
  font-family: sans-serif;
  line-height: 1.1;
  /* Interactive */
  cursor: pointer;
}

.button svg {
  height: var(--button-icon-size, 1.2cap);
  width: auto;
  flex: none;
}

.button:active {
  transform: scale(99%);
}

.button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
  text-decoration: none;
}

.button:focus {
  outline-width:
    var(--button-outline-width, var(--button-border-width));
  outline-style:
    var(--button-outline-style, var(--button-border-style));
  outline-color:
    var(--button-outline-color, var(--button-border-color));
  outline-offset:
    var(--button-outline-offset, calc(var(--button-border-width) * 2));
}

.button[data-button-variant="auth"] {
  --button-bg: transparent;
  --button-border-color: var(--accent);
  --button-color: var(--accent);
  --button-font-size: .8rem;
  --button-font-weight: 700;
  --button-hover-bg: rgba(230, 240, 250, 1.0);
  --button-hover-color: var(--accent-shade);
  --button-padding: .8em .69em;
  /* border-bottom-width: 0; */
  /* border: var(--border); */
  border-left-width: .1em;
  border-right-width: .1em;
  border-top-width: .1em;
  /* box-shadow: none; */
  /* max-width: 34vw; */
}

.button[data-button-variant="landing"] {
  --button-bg: var(--focus);
  --button-color: white;
  --button-border-color: currentColor;
  --button-hover-bg: var(--focus-shade);
  --button-hover-color: white;
  --button-outline-color: var(--accent);
  --button-outline-offset: 3px;
  --button-outline-width: 4px;
}

.button[data-button-variant="options"] {
  --button-bg: transparent;
  --button-color: var(--dark);
  --button-font-size: var(--font-s);
  border-width: 1px;
  border-style: solid;
  border-radius: 1em;
  border-color: var(--blue-grey);
  box-shadow: none;
}

.button[data-button-variant="primary"] {
  --button-bg: var(--accent);
  --button-color: white;
  --button-border-color: currentColor;
  --button-hover-bg: var(--accent-shade);
  --button-hover-color: white;
}

.button[data-button-variant="secondary"] {
  --button-bg: var(--light);
  --button-border-color: var(--blue-grey);
  --button-color: var(--dark);
  --button-hover-bg: var(--lesslight);
  --button-hover-color: var(--dark);
  --button-font-size: .9rem;
  --button-font-weight: 400;
  --button-icon-size: 1.6cap;
  --button-padding: .25em 1.1em;
  /* box-shadow: 1px 1px 4px var(--lesslight); */
}

.button[data-button-variant="positive"] {
  --button-bg: var(--light);
  --button-color: var(--accent);
  --button-border-color: var(--blue-grey);
  /* --button-border-width: 1px; */
  /* --button-border-style: solid; */
  --button-hover-bg: var(--lesslight);
  --button-hover-color: var(--accent);
}

.button[data-button-variant="negative"] {
  --button-bg: var(--danger);
  --button-border-color: currentColor;
  --button-hover-bg: var(--danger-shade);
}

.button[data-ghost-button] {
  --button-bg: transparent;
  --button-border-color: currentColor;
  --button-color: currentColor;
}

@media only screen and (max-width: 540px) {
  .hide-on-small {
    display: none;
  }
  .order-on-small {
    order: -1;
  }
}

@media only screen and (max-width: 450px) {
  .grow-on-small {
    flex-grow: 1;
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }
  .error-mark {
    padding-left: var(--spacing-s);
  }
  .error-summary {
    padding: var(--spacing-s);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --link: rgb(230, 240, 250);
    --accent: rgb(230, 240, 250);
    --light: rgba(94, 99, 110, 0.25);
    --lesslight: rgb(2 15 34);
    --blue-grey: rgba(94, 99, 110, 0.8);
    --text-hint: rgba(230, 240, 250, 0.85);
    /* --lesslight: oklch(0.13638 0.03644 75.34); */
    /* --lesslight: black; */
    --dark: rgb(230, 240, 250);
    --moredark: rgba(230, 240, 250, 0.6); /* #e8f2ff */
    --outline: 0.3em solid var(--focus);
  }
  *:focus {
	  outline: ;
	  box-shadow: ;
  }
  a:hover {
    text-decoration-color: var(--focus);
  }
  .button {

  }
  .button[data-button-variant="auth"]:hover {
    background: rgba(94, 99, 110, 0.4);
    color: white;
  }
  .button[data-button-variant="primary"] {
    --button-bg: rgb(53, 130, 230);
  }
  .button[data-button-variant="positive"] {
    border-bottom-color: rgb(2, 15, 34);
  }
  .button[data-button-variant="positive"]:hover {
    background: rgba(94, 99, 110, 0.4);
  }
  .confirmation {
    --light: rgb(230, 240, 250)
  }
  input:focus {

  }
  .logo {
    color: var(--dark);
  }
  .feather-plus-circle {
    --accent: rgb(53, 130, 230);
  }
  .feather-check-circle {
    --blue-grey: white;
  }
  .toggle [aria-pressed]::before {
    --accent: rgb(53, 130, 230);
  }
  .toggle [aria-pressed]::after {
    --accent: rgb(53, 130, 230);
    --light: rgb(230, 240, 250);
  }
  up-drawer-box, up-modal-box {
    background: rgb(2 15 34);
  }
}