* {
   margin: 0; padding: 0;
}

:root {
   /* 257 is (close to) the original hue of old BYT.
      281 is what I've been developing with
      halfway between would be 269
      103 is this lovely REI kind of beige.*/
   --hue: 281;
   --main-bg-color: oklch(92% 0.017 var(--hue));
   --light-border-color: oklch(79% 0.02 var(--hue));
   --border-color: oklch(68% 0.02 var(--hue));
   --semi-dark-border-color: oklch(55% 0.02 var(--hue));
   --dark-border-color: oklch(42% 0.02 var(--hue));
   --light-bg-lightness: 98%;
   --light-bg-chroma: 0.01;
   --light-bg-color: oklch(var(--light-bg-lightness) var(--light-bg-chroma) var(--hue)); /* #fcfdfe */
   --banner-color: oklch(31% 0.06 var(--hue));
   --outline-color: oklch(51% 0.11 var(--hue));
   --outline-shadow: inset 0 0 0 2px var(--outline-color);
   --gfx-color: oklch(78% 0.07 44);
   --danger-hue: 27;
   --warning-hue: 95;
   --cancel-hue: 228;
   --navig-hue: 207;
   --good-hue: 148;
   --alert-hue: 99;
   --instr-border-rad: 0.71em;
   --button-border-rad: 0.71em;
   --inner-border-gap: 0.29em;
   --inner-border-wid: 1.5px;
   --inner-border-vpad: 0;
   --inner-border-hpad: 0;
   --medium-size: 0.83em;
   --large-size: 1.3em;
   --x-large-size: 1.9em;

   --text-lightness: 59%;
   --text-chroma: 0.17;

   --link-lightness: 41%;
   --link-chroma: 0.04;
   --link-hue: 245;

   --link-color: oklch(var(--link-lightness) var(--link-chroma) var(--link-hue));

   --lightness-disabled: 83%;
   --chroma-disabled: 0.053;
}

html, body {
   background: var(--main-bg-color);
}

.light-bg {
   background: var(--light-bg-color);
}

:root, .font-sans, body, h2, form, input, form input, .grp .title, form textarea, button, form select { font-family: 'Noto Sans'; font-size: 16px; }
.font-serif, h1, .pagetitle, .title, .help, .hdr, thead, .weekdays, .cal-date, .snipe, dt { font-family: 'Merriweather'; font-size: 16px; }
.long-date, pre, .input-sample, .perf-box-label, .monospace, .diagram-label { font-family: 'Noto Sans Mono', monospace; }

.main-bg {
   background-color: var(--main-bg-color);
}

.a a {
   padding: 0 0.13em;
   --link-light-delta: 0%;
   color: oklch(calc(var(--link-lightness) + var(--link-light-delta)) 0.09 var(--link-hue));
   font-weight: 600;
   letter-spacing: 0.02em;
   text-decoration-thickness: .07em;
   text-decoration: underline;
   cursor: pointer;
}

.tixtep {
   font-size: 24px;
}

.a:focus {
   /* outline: 1px dotted #000; */
   /* outline: -webkit-focus-ring-color auto 5px; */
}

.a a:hover {
   --link-light-delta: 5%;
}

.a::before {
   content: "[";
}

.a::after {
   content: "]";
}

.tab-list {
   border-bottom: 3px var(--border-color) solid;
   padding-bottom: 0.21em;
}

.crumbs {
   margin-bottom: 0.21em;
   align-items: baseline;
}

.crumb {
   outline: none;
}

.crumb:focus {
   box-shadow: 0 0 0 2px var(--outline-color);
}

.incrementer {
   padding: 0.5em;
   background-color: oklch(59% 0.17 var(--navig-hue));
   color: white;
   border-radius: var(--button-border-rad);
}

.icon {
   --icon-lightness: 59%;
   --icon-chroma: 0.17;
   --icon-chroma-delta: 0;
   --icon-light-delta: 0%;
   /* NOTE: --icon-hue is not set here, making this color invalid. For group
            headers and buttons, color will be set on the parent button/hdr and
            the icon will inherit that. For icons out in the open, the hue will
            be set by the classes such as .good, .warning, .danger, .navigation,
            etc. and then this color will be valid. */
   color: oklch(calc(var(--icon-lightness) + var(--icon-light-delta)) calc(var(--icon-chroma) + var(--icon-chroma-delta)) var(--icon-hue));
   display: flex;
   justify-content: center;
   align-items: center;
}

.icons-wrap, .icons-wrap-03, .icons-wrap-07 {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.7em;
   user-select: none;
}

.icons-wrap-03 {
   gap: 0.3em;
}

.icons-wrap-07 {
   gap: 0.7em;
}

.icons-layer {
   position: relative;
}

.icons-layer > * {
   position: absolute;
   top: 0; left: 0;
}

.wrap-left {
   display: flex;
   justify-content: start;
}

.wrap-right {
   display: flex;
   justify-content: end;
}

.wrap-spread {
   display: flex;
   justify-content: space-between;
}

.gap-zero { gap: 0; }

.gap-03 { gap: 0.3em; }

h1 {
   font-weight: 900; font-size: 36px;
   letter-spacing: 0.03em;
   /* margin-bottom: -0.5em; */
}

.bold {
   font-weight: 700;
}

.med-bold { font-weight: 600; }

.italic {
   font-style: italic;
}

h2 {
   font-weight: 700; font-size: 20px;
}

.larger {
   font-size: 170%;
}

html {
   tab-size: 4;
}

.em1 {
   width: 1em;
}

.em2 {
   width: 2em;
}

.pointer { cursor: pointer; }

.cursor-default { cursor: default; }

.table {
   border-collapse: collapse;
   table-layout: fixed;
   /* width: fit-content; */
}

.table thead {
   font-size: var(--medium-size);
   font-weight: 400;
   letter-spacing: 0.03em;
   background: var(--dark-border-color);
   color: var(--main-bg-color);
   border: solid 1px var(--cal-border-color);
}

.table td {
   border: solid 2px var(--border-color);
   padding: 0.5em;
}

.table-footer {
   border: solid 2px var(--border-color);
   border-top: none;
   padding: 0.5em;
   display: flex;
   justify-content: center;
}

/* - Banner, logo, header stuff --------------------------------------------- */

.banner {
   width: 100%;
   height: 13em;
   max-height: 50vw;
   background: var(--banner-color);
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 3em;
}

.event-banner {
   height: 3.1em;
   position: sticky; top: 0;
   margin-bottom: 1em;
   z-index: 90;
   /* position: relative; */
}

.banner .overlay {
   width: calc(100% - 2em);
   padding: 0 1em;
   height: 3.1em;
   display: flex;
   gap: 1.1em;
   justify-content: flex-end;
   align-items: center;
   position: absolute;
   left: 0;
   top: 0;
   color: var(--main-bg-color);
}

.banner .username {
   display: flex;
   align-items: center;
}

.banner .overlay .filler { flex: 1; }

.byt-logo {
   -webkit-mask: url("../logos/byt-logo.svg") center center / contain no-repeat;
   mask: url("../logos/byt-logo.svg") center center / contain no-repeat;
   aspect-ratio: 325 / 95;
   width: 400px;
   background: var(--main-bg-color);
}

.event-banner .byt-logo {
   width: 140px;
}

.page-wrap {
   display: flex;
   flex-flow: column;
   align-items: center;
   margin: 1em;
   gap: 1.7em;
}

.page-wrap > * {
   width: 100%;
}

.page-wide > * {
   max-width: 840px;
}

.page-narrow > * {
   max-width: 480px;
}

.home-page {
   display: flex;
   flex-flow: column;
   align-items: center;
   gap: 5em;
   margin: 1em;
   margin-bottom: 3em;
}

.home-item {
   display: flex;
   flex-flow: column;
   gap: 1.1em;
   flex: 3;
   max-width: 16em;
   align-items: center;
   text-align: center;
}

@media (width > 640px) { /* TODO: Why is this not 576 like the others? */
   .home-page {
      flex-flow: row;
      justify-content: center;
      align-items: flex-start;
   }
}

/* - Snipes ----------------------------------------------------------------- */

.snipe {
   --snipe-translate: -30px;
   --width: 104px;
   width: var(--width);
   height: calc(var(--width) / 2);
   font-size: 10px;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.07em;
   position: absolute;
   left: 0;
   top: 0;
   transform-origin: top center;
   transform: translate(calc(-1 * calc(var(--width) / 2)))
              rotate(-45deg)
              translate(0, var(--snipe-translate));
   display: flex;
   flex-flow: column;
   justify-content: flex-end;
   align-items: center;
   border-bottom: var(--cal-border-wid) solid var(--cal-border-color);
   background: var(--dark-border-color);
   color: var(--main-bg-color);
}

.profile-wrap {
   position: fixed; top: 0;
   z-index: 900;
}


.profile-snipe {
   --snipe-translate: -7px;
   padding-bottom: 0.2em;
   font-size: 14px;
   font-weight: 900;
}

.profile-DEV {
   background: aquamarine;
   color: black;
}

.profile-TEST {
   background: hotpink;
   color: black;
}

.client-disabled {
   background: red;
}

.client-incomplete {
   background: orange;
}

.client-unfunded {
   background: yellow;
}

.client-active {
   background: green;
}

.event-disabled {
   background: red;
}

.event-unlaunched {
   background: orange;
}

.event-pending {
   background: yellow;
}

.event-active {
   background: green;
}

.event-ended {
   background: blue;
}

.event-archived {
   background: purple;
}

/* - Group list ------------------------------------------------------------- */

.grplst {
   display: flex;
   flex-flow: column;
   gap: 1.7em;
   text-align: center;
}

.grplst a {
   text-decoration: none;
}

.grp {
   position: relative;
   overflow: hidden;
   padding: 0.7em;
   color: black;
   --bkgr: oklch(var(--light-bg-lightness) var(--light-bg-chroma) var(--hue));
   background: var(--bkgr);
}

.grp:hover {
   color: black;
   --light-bg-lightness: 95%;
}

.grp-snipe {
   --snipe-translate: -1px;
}

/* - Forms ------------------------------------------------------------------ */

.form {
   display: flex;
   flex-flow: column;
   gap: 1.3em;
}

.field {
   display: flex;
   flex-flow: column;
   gap: 0.3em;
}

.form fieldset {
   border: none;
}

.form fieldset:invalid {
   border: solid 2px red;
}

.instr {
   font-style: italic;
   display: flex;
   flex-flow: column;
   gap: 0.7em;
}

.instr ol, .instr ul {
   margin: 0 3em;
   display: flex;
   flex-flow: column;
   gap: 0.3em;
}

.inp ul {
   padding-left: 1em;
}

.md ul {
   padding-left: 1em;
}

.instr li .subli {
   display: flex;
   flex-flow: column;
   gap: 0.3em;
}

.help > * {
   font-size: var(--medium-size);
   color: oklch(39% 0 0);
}

.help {
   display: flex;
   flex-flow: column;
   gap: 0.3em;
}

.lbl-wrap {
   display: flex;
   gap: 1.1em;
   align-items: baseline;
}

.warn-wrap {
   display: flex;
   gap: 0.3em;
   align-items: baseline;
}

.lbl {
   font-weight: 700;
}

.inp {
   display: flex;
   gap: 1.7em;
   position: relative;
}

.inp input[type='text'],
.inp input[type='email'],
.inp input[type='password']
 {
   padding: 0.5em;
   height: 1.5em;
   flex-grow: 1;
   border: none;
   --bkgr: oklch(var(--light-bg-lightness) var(--light-bg-chroma) var(--hue));
   background: var(--bkgr);
}

.inp input.err {
   background: oklch(87% 0.17 var(--danger-hue));
}

.on-white {
   margin: 0;
}

.on-white input[type='text'],
.on-white input[type='email'],
.on-white input[type='password']
 {
   box-shadow: inset 0 0 0 2px var(--border-color);
}

.has-icons {
   position: relative;
}

.has-icons-right > input {
   padding-right: 3em !important;
}

.has-2-icons-right > input {
   padding-right: 6em !important;
}

.icon-right {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 2.5rem;
   height: 2.5rem;
   position: absolute;
   right: 0;
   font-size: var(--large-size);
}

.two-icons-right {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 5.0rem;
   height: 2.5rem;
   gap: 1.0rem;
   position: absolute;
   right: 0;
   font-size: var(--large-size);
}

.err {
   background: oklch(71% 0.17 var(--danger-hue));
   padding: 0.5rem 0.7rem;
}

.relative { position: relative; }

.msg-wrap {
   filter: drop-shadow(0 0 2.5px black);
   position: absolute; bottom: -1.9rem; left: 0.7rem;
   z-index: 40;
}

.msg {
   display: flex; flex-flow: column; justify-content: flex-end;
   background: oklch(71% 0.17 var(--danger-hue));
   --drop: 0.7rem;
   padding: calc(var(--drop) + 0.3rem) 0.5rem 0.3rem 0.5rem;
   clip-path: polygon(0% var(--drop), 0.8rem var(--drop), 1.5rem 0%, 2.2rem var(--drop), 100% var(--drop), 100% 100%, 0% 100%);
   font-size: var(--medium-size);
}

span.radio {
   display: flex;
   gap: 0.7em;
   align-items: baseline;
}

.inp > select {
   padding: 0.5em;
}

.inp, .inp-margin {
   margin-left: 1em;
   margin-right: 1em;
}

.space-top-03 {
   margin-top: 0.3em;
}

.space-top-07 {
   margin-top: 0.7em;
}

.v-spacer-03 {
   height: 0.3em;
}

.v-spacer-13 {
   height: 1.3em;
}

.span-cols {
   grid-column: 1 / -1;
}

.a-wrap {
   display: flex;
   flex-flow: row;
   gap: 1.1em;
   /* margin-top: 0.7em; */
}

.align-start {
   align-items: flex-start;
}

.a-wrap > * {
   flex: 0 1 content;
}

input {
   outline: none;
}

textarea {
   outline: none;
}

.textarea {
   width: 100%;
   padding: 0.5em;
   border: none;
   --bkgr: oklch(var(--light-bg-lightness) var(--light-bg-chroma) var(--hue));
   background: var(--bkgr);
}

button {
   font-weight: 700;
   letter-spacing: 0.03em;
   --button-hue: var(--good-hue);
   --button-lightness: 59%;
   --button-chroma: 0.17;
   --button-chroma-delta: 0;
   --button-light-delta: 0%;
   --button-hover-delta: 0%;
   --bkgr: oklch(calc(var(--button-lightness) + var(--button-light-delta) + var(--button-hover-delta)) calc(var(--button-chroma) + var(--button-chroma-delta)) var(--button-hue));
   --inner-background: var(--bkgr);
   --inner-border-color: var(--main-bg-color);
   --inner-border-vpad: 0.41em;
   --inner-border-hpad: 1.3em;
   background: var(--bkgr);
   color: var(--main-bg-color);
   border: none;
   border-radius: var(--button-border-rad);
   cursor: pointer;
   outline: none;
   width: 100%; /* TODO: what impact does this have? */
}

/* - Menu ------------------------------------------------------------------- */

.menu button {
   --button-lightness: var(--link-lightness);
   --button-chroma: var(--link-chroma);
   --button-hue: var(--link-hue);
   --inner-border-vpad: 0.23rem;
   --inner-border-hpad: 2.3rem;
}

button.medium {
   --inner-border-hpad: 1.3rem;
   --inner-border-vpad: 0.23rem;
}

.menu-wrap {
   display: flex;
   gap: 1.7rem;
}

@media (width < 576px) {
   .menu-wrap {
      flex-flow: column;
   }
}

.inner-border {
   box-shadow:
      inset 0 0 0 var(--inner-border-gap) var(--inner-background),
      inset 0 0 0 calc(var(--inner-border-wid) + var(--inner-border-gap)) var(--inner-border-color);
   padding: calc(var(--inner-border-vpad) + var(--inner-border-wid) + var(--inner-border-gap)) calc(var(--inner-border-hpad) + var(--inner-border-wid) + var(--inner-border-gap));
}

.inner-border:focus {
   /* --inner-border-wid: calc(1.5px + 1px);
   --inner-border-gap: calc(0.29em - 1px); */
   --inner-background: var(--outline-color);
   /* --inner-border-color: var(--outline-color); */
}

.button-ref {
   letter-spacing: 0.03em;
   font-weight: 700;
}

.wait-wrap {
   position: relative;
}

.rotating {
   animation: rotating 2s infinite;
}

@keyframes rotating {
   0% { transform: rotate(0deg); }
   100% {transform: rotate(360deg); }
}

.waiting, .waiting button {
   --button-lightness: var(--lightness-disabled);
   --button-chroma: var(--chroma-disabled);
}

.wait-overlay {
   animation: rotating 2s infinite;
   font-size: var(--large-size);
   position: absolute; top: 0; left: 0;
   height: 100%;
   width: 100%;
   color: var(--dark-border-color);
}

.medium {
   font-size: var(--medium-size);
}

.large {
   font-size: var(--large-size);
}

.x-large {
   font-size: var(--x-large-size);
}

button:hover {
   --button-hover-delta: -5%;
}

button:disabled {
   --button-lightness: var(--lightness-disabled);
   --button-chroma: var(--chroma-disabled);
   cursor: default;
}

.action {
   --button-lightness: var(--link-lightness);
   --button-chroma: var(--link-chroma);
   --button-hue: var(--link-hue);
}

.danger, .menu button.danger {
   --button-hue: var(--danger-hue);
   --icon-hue: var(--danger-hue);
   --text-hue: var(--danger-hue);
}

.shadow-light svg {
   filter: drop-shadow(1px 0px 2px var(--main-bg-color));
}

.warning, button.warning {
   --button-hue: var(--warning-hue);
   --icon-hue: var(--warning-hue);
   --button-light-delta: 11%;
   --button-chroma-delta: -0.03;
   --icon-light-delta: 11%;
   --icon-chroma-delta: -0.03;
   --text-hue: var(--warning-hue);
}

.alert {
   /* color: yellow; */
   --button-hue: var(--alert-hue);
   --icon-hue: var(--alert-hue);
   --icon-light-delta: 30%;
}

.cancel {
   --button-hue: var(--cancel-hue);
   --icon-hue: var(--cancel-hue);
   --button-chroma-delta: -0.07;
   --icon-chroma-delta: -0.07;
}

.navigation {
   --button-hue: var(--navig-hue);
   --icon-hue: var(--navig-hue);
}

.disabled {
   --button-lightness: var(--lightness-disabled);
   --button-chroma: var(--chroma-disabled);
   --icon-lightness: var(--lightness-disabled);
   --icon-chroma: var(--chroma-disabled);
}

.text {
   color: oklch(var(--text-lightness) var(--text-chroma) var(--text-hue));
}

.good {
   --button-hue: var(--good-hue);
   --icon-hue: var(--good-hue);
   --text-hue: var(--good-hue);
}

.hover-good:hover {
   --button-hue: var(--good-hue);
   --icon-hue: var(--good-hue);
}

.inputfile:focus + label {
   outline: 1px dotted #000;
   outline: -webkit-focus-ring-color auto 5px;
}

/* - Tickets page ----------------------------------------------------------- */

.event-header {
   display: flex;
   flex-flow: column;
   gap: 0.3em;
   align-items: center;
   text-align: center;
}

.event-header .img {
   width: 600px;
   max-width: 100%;
   aspect-ratio: 5;
   margin-top: 0.3em;
   display: flex;
   flex-flow: column;
   justify-content: center;
   background: var(--light-bg-color);
}

.event-header .title {
   font-size: min(36px,10vw);

}

.event-header h2 {
   font-size: min(24px, 6vw);
}

/* - Drag and drop images --------------------------------------------------- */

.drop-area {
   padding: 3em 1em 1.7em;
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   gap: 1.7em;
   border: 2px solid var(--border-color);
}

.preview {
   width: 600px;
   max-width: 100%;
   aspect-ratio: 5;
   border: 2px dotted var(--border-color);
}

.is-dropping {
   background-color: var(--light-bg-color);
}

.no-padding {
   padding: 0 !important;
}

.grid-wrap {
   display: grid;
   background: var(--main-bg-color);
   gap: 3px;
   position: relative;
}

.grid-bordered {
   border: 3px solid var(--main-bg-color);
}

.grid-wrap .hdr {
   background: var(--dark-border-color);
   color: var(--main-bg-color);
   font-size: var(--medium-size);
   /* position: sticky; top: 0; z-index: 50; */
}

.grid-wrap > * {
   padding: 0.43rem;
   background: var(--light-bg-color);
}

.grid-wrap .grid-cell {
   padding: 0.43rem;
}

.inner-grid {
   font-size: var(--medium-size);
   border: 3px solid var(--border-color);
   background: var(--border-color);
}

.inner-grid .hdr {
   background: var(--main-bg-color);
   color: black;
}

.inner-grid > * {
   padding: 0.23rem;
   background: var(--light-bg-color);
}

/* - Ref code table --------------------------------------------------------- */

.ref-code-table {
   grid-template-columns: repeat(3, minmax(0,1fr));
}

/* - Calendar --------------------------------------------------------------- */

.calendar {
   grid-template-columns: repeat(7, minmax(0, 1fr));
   width: 100%;
}

.calendar > * {
   position: relative;
   overflow: hidden;
   padding: 0.3em;
}

.calendar .hdr {
   text-align: center;
}

.calendar .perf {
   display: flex;
   gap: 0.3em;
   flex-flow: column;
}

.showtime {
   --showtime-color: oklch( 71% /*var(--text-lightness)*/ .061 /*var(--text-chroma)*/ var(--navig-hue));
   background-color: var(--showtime-color);
   border: 3px solid var(--showtime-color);
   padding: 0.3em;
   display: flex;
   flex-flow: row wrap;
   gap: 0.3em;
}

.showtime-selected {
   border-color: oklch(42% 0.02 var(--navig-hue)); /* NOTE: L, and C same as dark-border-color. */
}

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

.showtime-spread {
   justify-content: space-between;
}

/* .showtimes {
   display: flex;
   flex-flow: column;
   margin: 0.3em 0.5em;
   gap: 0.5em;
}

.showtime {
   text-align: center;
   font-weight: 700;
   padding: 0.3em;
   background-color: oklch(59% 0.17 148);
   color: var(--main-bg-color);
   font-variant: small-caps;
} */

.ampm {
   font-variant: small-caps;
}

.allcaps {
   text-transform: uppercase;
}

.cal-date {
   text-align: right;
}

.year {
   --snipe-translate: -17px;
}

.mnth {
   --snipe-translate: -27px;
}

.long-date {
   display: none;
}

.week-skip {
   grid-column: 1 / -1;
   padding: 0;
   background: var(--main-bg-color);
   border-bottom: 5px dotted var(--light-bg-color);
}

@media (width < 576px) {

   .calendar .snipe, .calendar .skip, .calendar > *, .calendar .short-date {
      display: none;
   }

   .calendar .long-date {
      display: revert;
   }

   .calendar {
      max-height: 50vh;
      overflow: auto;
      grid-template-columns: minmax(0, 1fr);
   }

   .calendar .perf {
      flex-flow: row;
      justify-content: space-between;
   }

   .cal-date {
      text-align: left;
   }
}

/* - Calendar picker -------------------------------------------------------- */

.cal-picker {
   height: 200px;
   font-size: var(--medium-size);
   text-align: center;
   grid-template-columns: repeat(7, minmax(0,1fr));
   grid-template-rows: 0fr 0fr;
   grid-auto-rows: 1fr;
}

.cal-picker .hdr {
   padding: 0.23em;
   display: flex;
   justify-content: center;
   align-items: center;
}

.cal-picker .nav {
   padding: 0.23em;
   display: flex;
   justify-content: space-between;
}

.cal-picker .nav > * {
   padding: 0 0.43em;
}

.cal-picker .cal-i {
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

.cal-picker .oor {
   color: var(--border-color);
}

.cal-picker .selected {
   background: var(--link-color);
   color: var(--main-bg-color);
}

.cal-picker .existing {
   background: green;

}

.cal-picker .not-selected {
   background: var(--light-bg-color);
   color: black;   /* TODO: do we need an explicit default color? */
}

.clock-picker {
   width: 200px;
   height: 200px;
   font-size: var(--medium-size);
}

.clock-picker .clk-i { /* CLocK-Item */
   stroke: var(--main-bg-color);
   fill: var(--light-bg-color);
   stroke-width: 3px;
}

.clock-picker .selected .clk-i {
   fill: var(--link-color);
}

.clock-picker text {
   pointer-events: none;
}

.clock-picker .selected text {
   fill: var(--main-bg-color);
}

.indent {
   margin-left: 1em;
}

dd {
   margin-left: 1em;
}

.right {
   text-align: right;
}

.left {
   text-align: left;
}

.center {
   text-align: center;
}

.col-2 {
   grid-template-columns: auto auto;
}

.col-4 {
   grid-template-columns: auto auto auto auto;
}

.col-5 {
   grid-template-columns: 0fr auto auto auto auto;
}

.action-column {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   white-space: nowrap;
}

.no-wrap {
   white-space: nowrap;
}

.no-user-select {
   user-select: none;
}

/* - Signup email sample ---------------------------------------------------- */

/* This is very specific. We might want to move it into its own file if we do
code splitting and provide more specific layout pages. */

.email-sample {
   padding: 0.7em 1em;
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 0.7em;
   justify-content: start;
   font-style: normal;
   background: var(--light-bg-color);
}

.email-sample *:nth-child(2n+1) {
   justify-self: end;
}

.email-sample *:nth-child(2n) {
   font-weight: 700;
}

.address-sample {
   padding: 0.7em 1em;
   font-style: normal;
   background: var(--light-bg-color);
}

/* - Modal ------------------------------------------------------------------ */

.modal {
   align-items: center;
   display: flex;
   flex-direction: column;
   /* justify-content: center; */
   /* overflow: hidden; */
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 100;
   background-color: rgba(76, 76, 76, 0.5);
}

.modal-content-wrap {
   max-height: calc(100vh - 43px);
   max-width: 640px;
   margin: 1em;
   background-color: var(--main-bg-color);
   border-radius: 1.3em;
   overflow: hidden;
}

.modal-scroll-wrap {
   padding: 2em;
   overflow-y: auto;
   overflow-x: hidden;
   max-height: calc(100vh - 43px - 4em);
   height: 100%;
}

.modal-content {
   width: min(640px - 4em, 100vw - 6em);
   display: flex;
   flex-flow: column;
   gap: 1.7em;
}

/* - Diagrams --------------------------------------------------------------- */

.paint-mode {
   position: absolute;
   top: 0; left: 0;
   width: 2em; height: 2em;
   display: flex;
   justify-content: center;
   align-items: center;
}

.diagram-label {
   background-color: var(--dark-border-color);
   color: var(--main-bg-color);
   text-align: center;
   padding: 0.3em 0;
}

div.diagram {
   position: relative;
   max-width: 100%;
   background: var(--light-bg-color);
   border: solid 2px var(--dark-border-color);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;
}

div.wrap-mainmap {
   /* max-width: 100%; */
   width: 100%;
   min-height: 200px;
   position: relative;
   max-height: 50vh;
}

div.wrap-mainmap .mainmap {
   position: absolute;
   top: 0px;
   left: 0px;
}

@keyframes fading {
   from {opacity: 15%;}
   to {opacity: 35%;}
}

.fading {
   animation: fading 0.5s ease-in-out infinite alternate;
}

div.wrap-minimap {
   position: absolute;
   top: -2px;
   right: -2px;
   width: 150px;
   height: 150px;
   background: var(--light-bg-color);
   /* border: solid 2px var(--border-color); */
   border: solid 2px var(--dark-border-color);
}

div.wrap-minimap .minimap {
   position: absolute;
}

div.wrap-thumbnail {
   position: relative;
   background: var(--light-bg-color);
   border: solid 2px var(--border-color);
}

div.wrap-thumbnail .thumbnail {
   position: absolute;
   top: -2px;
   right: -2px;
   width: 150px;
   height: 150px;
}

.shw-visible {
   visibility: visible;
   opacity: 1;
}

.shw-hidden {
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s 0.75s, opacity 0.75s ease-out;
}

div.wrap-shift-warning {
   position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   pointer-events: none;
   font-size: 3.7em;
}

div.shift-warning {
   color: var(--semi-dark-border-color);
   margin: 1.1em;
   text-align: center;
}

/* - Dropdown ----------------------------------------------------------------*/

.dropdown {
   position: relative;
   /* display: inline-block; */
}

.dropdown-content {
   background: var(--light-bg-color);
   display: block;
   position: absolute;
   z-index: 10;
   box-shadow:
      /* 0 0.5em 1em -0.125em oklch(15% 0 0 / 0.2),
      0 0px 0 1px oklch(15% 0 0 / 0.05); */
      0 0 5px 2px oklch(15% 0 0 / 25%),
      0 0 3px 2px oklch(15% 0 0 / 25%);
}

.user-dropdown .dropdown-content {
   right: 0;
   color: black;
}

.dropdown-trigger {
   cursor: pointer;
}

.ppr-wrap {
   --shadow-gap: 7px;
   position: relative;
}

.ppr-clip {
   height: 2.5em;
   overflow: hidden;
}

.ppr-shadow {
   box-shadow:
      0 0 5px 2px oklch(15% 0 0 / 25%),
      0 0 3px 2px oklch(15% 0 0 / 25%);
}

.ppr-content-lower, .ppr-content-upper, .ppr-content-sel {
   display: block;
   width: calc(100% + 6px);
   position: absolute;
   left: calc(-3px - var(--shadow-gap));
   z-index: 10;
   padding: var(--shadow-gap);
   overflow: hidden;
}

.ppr-content-lower {
   padding-top: 0;
}

.ppr-content-sel {
   bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
}

.ppr-content-upper {
   bottom: 2.5em;
   padding-bottom: 0;
}

.ppr-empty {
   border-top: none;
}

.not-showing {
   display: none !important;
}

.baseline-wrap {
   display: flex;
   gap: 0.7em;
   align-items: baseline;
}

.wrap-palette {
   display: flex;
   justify-content: start;
   gap: 1.7em;
}

.palette {
   display: grid;
   padding: 0.65em;
   background: var(--light-bg-color);
}

.seat-sample {
   background: var(--light-bg-color);
   padding: 1rem;
   font-size: 900%;
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
}

.wrap-overlay {
   position: relative;
}

.sample-overlay {
   background: none;
   position: absolute;
   width: calc(100% - 2rem); height: calc(100% - 2rem);
   top: 0;
   left: 0;
}

@media (width < 576px) {
   .wrap-palette {
      flex-flow: column;
   }
}

.swatch {
   font-size: var(--large-size);
   width: 2.3em;
   height: 2.3em;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 0.5em;
   outline: none;
   --shadow-color: var(--light-bg-color);
   box-shadow: inset 0 0 0 3px var(--shadow-color);
}

.swatch:focus {
   --shadow-color: var(--outline-color);
}

.swatch:hover:not(:focus) {
   --shadow-color: var(--light-border-color);
}

.swatch-selected:not(:focus) {
   --shadow-color: var(--dark-border-color);
}

@media (width < 480px) {
   .wrap-radio-480 {
      flex-flow: column;
      gap: 0.7em;
   }
}

.v-stack-00 {
   display: flex;
   flex-flow: column;
}

.v-stack-03 {
   display: flex;
   flex-flow: column;
   gap: 0.3em;
}

.v-stack-07 {
   display: flex;
   flex-flow: column;
   gap: 0.7em;
}

.v-stack-11 {
   display: flex;
   flex-flow: column;
   gap: 1.1em;
}

.v-stack-13 {
   display: flex;
   flex-flow: column;
   gap: 1.3em;
}

.h-stack-00 {
   display: flex;
}

.h-stack-03 {
   display: flex;
   gap: 0.3em;
}

.h-stack-07 {
   display: flex;
   gap: 0.7em;
}

.h-stack-11 {
   display: flex;
   gap: 1.1em;
}

.flex-spacer {
   flex: 1;
}

.flex-grower {
   flex-grow: 100;
}

.filter-stack {
   display: flex;
   gap: 3px;
   flex-wrap: wrap;
   justify-content: flex-start;
}

.min-content {
   width: min-content;
}

/* - Tables ------------------------------------------------------------------*/

@media (width < 624px) {
   .item-wide {
      display: none;
   }
}

@media (width >= 624px) {
   .item-narrow {
      display: none;
   }
}

@media (width < 432px) {
   .item-wide-9 {
      display: none;
   }
}

@media (width >= 432px) {
   .item-narrow-9 {
      display: none;
   }
}


/* Stat table */

.stat-table {
   display: grid;
   grid-template-columns: 0fr 0fr;
   column-gap: 1.1em;
}

.stat-table *:nth-child(even) {
   text-align: right;
}

/* Venue table */

dt {
   color: var(--dark-border-color);
   font-size: var(--medium-size);
}

dt:not(:first-child) {
   margin-top: 0.7rem;
}

.venue-table {
   grid-template-columns: auto 0fr 0fr;
}

@media (width < 624px) {
   .venue-table {
      grid-template-columns: auto 0fr;
   }
}

.venues-table {
   grid-template-columns: 0fr auto 0fr 0fr;
}

@media (width < 624px) {
   .venues-table {
      grid-template-columns: 0fr auto 0fr;
   }
}

.select-table-row {
   display: flex;
   gap: 3px;
   --shadow-color: var(--main-bg-color);
   outline: none;
   box-shadow: 0 0 0 3px var(--shadow-color);
}

.select-table-row:focus {
   --shadow-color: var(--outline-color);
}

.select-table-row:hover:not(:focus) {
   --shadow-color: var(--light-border-color);
}

.select-table-row-selected:not(:focus) {
   --shadow-color: var(--dark-border-color);
}

.venue-table-event {
   grid-template-columns: auto 0fr 0fr;
}

@media (width < 624px) {
   .venue-table-event {
      grid-template-columns: auto 0fr;
   }
}

/* Price outline table */

.price-outline {
   display: grid;
   grid-template-columns: 0fr auto;
   gap: 0.3em;
}

.level { /* For indenting levels in an outline. */
   margin-left: 1em;
}

/* Price table */

.price-table {
   grid-template-columns: 0fr 0fr auto 0fr;
   background: var(--light-bg-color);
}

.price-table > * {
   padding: 0.23em;
}

.price-table-unlaunched {
   grid-template-columns: 0fr 0fr 0fr auto 0fr;
}

/* Perf table */

.perf-table-unlaunched {
   grid-template-columns: 0fr auto 0fr;
}

.perf-table {
   grid-template-columns: auto 0fr;
}

@media (width < 432px) {
   .perf-table-unlaunched {
      grid-template-columns: 0fr auto;
   }
   .perf-table {
      grid-template-columns: auto;
   }
}

/* Rule table */

.rule-table {
   grid-template-columns: 0fr auto auto;
}

@media (width < 624px) {
   .rule-table {
      grid-template-columns: 0fr auto;
   }
}

/* Section table */

.section-table {
   grid-template-columns: 0fr 0fr auto auto 0fr 0fr 0fr 0fr 0fr;
}

.section-table .totals {
   grid-column-start: 1;
   grid-column-end: 5;
   grid-column: 1 / 5;
}

@media (width < 672px) {
   .section-table {
      grid-template-columns: 0fr 0fr auto 0fr 0fr;
   }
   .section-table .totals {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-column: 1 / 4;
   }
   .cc-item-wide {
      display: none;
   }
}

@media (width >= 672px) {
   .cc-item-narrow {
      display: none;
   }
}

/* User table */

.user-table {
   grid-template-columns: 0fr auto auto auto 0fr;
}

@media (width < 624px) {
   .user-table {
      grid-template-columns: 0fr auto 0fr;
   }
}

/* Discount table */

.discount-table {
   grid-template-columns: /*0fr*/ auto 0fr;
}

@media (width < 624px) {
   .discount-table {
      grid-template-columns: /*0fr*/ auto;
   }
}

/* Orders table */

.orders-table {
   grid-template-columns: auto 0fr;
}

@media (width < 624px) {
   .orders-table {
      grid-template-columns: auto;
   }
}

/* Order table */

.divider {
   padding: 0;
   border-bottom: 3px solid var(--border-color);
}

.amt {
   text-align: right;
   white-space: nowrap;
}

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

/* Tix table */

.tix-table {
   grid-template-columns: 0fr 0fr 0fr 0fr;
   /* max-height: 60vh; */
   /* overflow: auto; */
}

/* Share table */
.share-table {
   grid-template-columns: 0fr 0fr;
   display: grid;
   gap: 3px;
}

.share-table > * {
   padding: 0.23em;
}

/* general input table */

.input-table > .input-cell {
   display: flex;
   padding: 0;
   position: relative;
}

.input-table > .input-cell > input {
   width: 100%;
}

/* voucher input code table */

.voucher-inp-table {
   grid-template-columns: 0fr 2fr 2fr 3fr;
}

.voucher-inp-table .input-cell {
   display: flex;
   padding: 0;
   position: relative;
}

@media (width < 624px) {
   .voucher-inp-table {
      grid-template-columns: 0fr auto;
   }
}

/* Donations table */

.donations-table {
   grid-template-columns: 0fr 1fr 1fr 0fr;
}

/* codes table */

.codes-table-unlaunched {
   grid-template-columns: 0fr 1fr 1fr 0fr;
}

.codes-table {
   grid-template-columns: auto 0fr;
}

/* */

.link-wrap {
   margin: 0 1em;
   display: flex;
   flex-flow: column;
   gap: 0.7em;
}

.link-example-wrap {
   display: flex;
   gap: 0.7em;
}

.code-sample {
   padding: 0.7em 1em;
   font-family: monospace;
   background: var(--light-bg-color);
   flex: 1;
}

.code-wrap {
   position: relative;
}

.input-sample {
   margin: 1em;
   flex: 1;
}

.link-copy {
   position: absolute;
   top: 0;
   right: 0;
}

.strike {
   text-decoration: line-through;
   color: var(--semi-dark-border-color);
}

.dark-border-color {
   color: var(--dark-border-color);
}

.action-icon {
   padding: 0.2rem;
   background: var(--link-color);
   color: var(--main-bg-color);
   border-radius: 0.2rem;
}

.border-color {
   color: var(--border-color);
}

.custom-control {
   background: var(--light-bg-color);
   padding: 0.5em;
   height: 1.5em;
   gap: 0.3em;
   outline: none;
   flex-grow: 1;
}

.read-only {
   background: var(--main-bg-color);
   box-shadow: inset 0 0 0 3px var(--light-bg-color);
}

.read-only-on-white {
   background: var(--main-bg-color);
   box-shadow: inset 0 0 0 2px var(--border-color);
}

.control-ish {
   background: var(--light-bg-color);
   padding: 0.5em;
}

.control-height {
   height: 1.5em;
}

input:focus, .custom-control:focus, .on-white input:focus, textarea:focus, .focus-shadow {
   box-shadow: var(--outline-shadow);
}

.jiggle {
   animation: jiggle 0.23s ease-in-out 0.1s 2;
}

@keyframes jiggle {
  0% { transform: rotate(0deg); }
  25% { transform: translate(0,2300px) rotate(0.23deg) translate(0,-2300px); }
  50% { transform: rotate(0deg); }
  75% { transform: translate(0,2300px) rotate(-0.23deg) translate(0,-2300px); }
  100% { transform: rotate(0deg); }
}

/* revenue report table */

.report-wrap {
   background: var(--light-bg-color);
}

.revenue-report-table {
   display: grid;
   grid-template-columns: 0fr 0fr 0fr;
   gap: 0.3em;
   row-gap: 0.3em;
   column-gap: 1.7em;
   font-weight: 700;
   text-wrap: nowrap ;
   margin: 0.7em;
}

.revenue-report-table *:nth-child(3n-1), .revenue-report-table *:nth-child(3n) {
   text-align: right;
}

.revenue-report-table .sub-item, .revenue-report-table .sub-item+* {
   font-weight: 400;
}

.revenue-report-table .sub-item {
   margin-left: 1em;
}

.emails-report-table {
   display: grid;
   grid-template-columns: 0fr 0fr 0fr;
   gap: 0.3em;
   row-gap: 0.3em;
   column-gap: 1.7em;
   font-weight: 400;
   text-wrap: nowrap ;
   margin: 0.7em;
}

.emails-report-table .header {
   font-weight: 700;
}


/* tender table */

.tender-table {
   display: grid;
   grid-template-columns: 0fr 0fr;
   gap: 0.7em;
   align-items: center;
}

.tender-table .inp {
   margin-left: 0; margin-right: 0;
}

.tender-table input {
   width: 5em;
   text-align: right;
}

/* Order summary */

.perf-box-wrap {
   width: 100%;
}

.perf-box {
   border: solid 2px var(--dark-border-color);
   border-top: none;
}

.perf-box-label {
   background-color: var(--dark-border-color);
   color: var(--main-bg-color);
   /* text-align: center; */
   padding: 0.7em;
}

.qr-wrap {
}

.qr-nav-wrap {
   /* padding: 0.7em; */
   display: flex;
   align-items: center;
   cursor: pointer;
   flex: 1;
   user-select: none;
}

.tix-hilite {
   font-weight: 700;
   background-color: oklch(77% 0.047 var(--navig-hue));
   padding: 0 0.3em;
}

/* Order page */

.order-summary-table {
   display: flex;
   gap: 3.7em;
}

/* @media (width < 576px) {
   .order-summary-table {
      flex-flow: column;
      gap: 0.7em;
   }
} */

.page-nav {
   --pn-hue: var(--navig-hue);
   --pn-lightness: 81%;
   --pn-chroma: 0.091;
   --pn-color: oklch( var(--pn-lightness) var(--pn-chroma) var(--navig-hue));
   --pn-chroma-delta: 0;
   --pn-light-delta: 0%;
   --pn-hover-delta: 0%;
   --pn-bkgr: oklch(calc(var(--pn-lightness) + var(--pn-light-delta) + var(--pn-hover-delta)) calc(var(--pn-chroma) + var(--pn-chroma-delta)) var(--pn-hue));
   /* background-color: var(--bkgr); */
   border: 3px solid var(--pn-bkgr);
   height: 1.7em; /* matches the size of the icon */
   font-weight: 700;
   letter-spacing: 0.03em;
   /* color: var(--main-bg-color); */
   border-radius: 0.2em;
   cursor: pointer;
   outline: none;
   padding: 0.3em;
   display: flex;
   justify-content: center;
   align-items: center;
   aspect-ratio: 1 / 1;
   user-select: none;
}

.page-curr {
   background-color: var(--pn-bkgr);
}

.page-ell {
   border-color: var(--main-bg-color);
   cursor: default;
}