/*
 * Attempts to create universal defaults for various basic HTML elements.
 *
 * Browsers are inconsistent and these rules bring them in line and enhance
 * behaviour match to what novices intuit.
 *
 * Development guidelines:
 *   1. Keep selector specificity minimal to make overriding easier
 *     a. No ID references                        eg.  #button { ... }
 *     b. No class references                     eg.  .button { ... }
 *     c. No custom element/component references  eg.  custom-button { ... }
 *   2. Every ruleset must have accompanying commentary to justify its inclusion.
 *
 * ---
 * Authors: Robin Miller
 */

/* ============================================
 *                   GENERAL
 * ============================================ */

/**
 * Setting all basic container elements to flex + column because either flex or grid is more commonly
 * expected behaviour of container elements.
 *
 * Defaulting to scrollbars on containers prevents unexpectedly drawing over adjacent content.
 * Better to always be able to access content if the container is unexpectedly too small.
 */
html,
body,
header,
main,
nav,
footer,
article,
section,
div,
aside,
address,
picture,
figure,
dl,
form {
   display: flex;
   flex-direction: column;
}

/**
 * Chrome limits the HTML node to min height of viewport. Firefox does not.
 * This can cause odd behaviour when, eg. a linear-gradient background is set.
 * 
 * Sans-serif fonts are better for displays, serif is better for print.
 */
html {
   min-height: 100%;

   font-family: ui-sans-serif, system-ui, sans-serif;
}

@media print {
   html {
      font-family: serif;
   }
}

/**
 * All elements should default to border-box instead of content-box because the
 * intuitive "size" of an object includes all its visible area. Since borders
 * are very commonly visible, many developers (especially new ones) expect
 * border-box behaviour instead of content-box.
 */
* {
   box-sizing: border-box;
}

/**
 * Creating space from viewport edge should be done by the primary <header>, <footer>,
 * and <main> elements, instead of <body>.
 *
 * Then these core containers may fill the space but maintain legible spacing for their content.
 */
body > header,
main,
body > footer {
   padding: 1rem;
}

/* see ruleset above */
body {
   margin: 0;
   padding: 0;
}

/**
 * Headers should be closer to their contents than the previous section to indicate relationship
 */
h1,
h2,
h3,
h4,
h5,
h6 {
   margin-block-start: 1rem;
   margin-block-end: 0.5rem;
}

/**
 * With containers set to flex, text containers can drop their leading margins
 */
p,
pre,
dl,
ol,
ul {
   margin-block-start: 0.5em; /* flex containers do not merge margins, so using half standard values */
   margin-block-end: 0.5em;
}

/**
 * Definition terms should be highlighted as different from definitions
 */
dt {
   font-weight: bold;
}

/**
 * Separate interior definitions from each other
 */
dd + dt {
   margin-block-start: 0.25em;
}

/**
 * Flex layout can stretch Anchors and Labels to have a much larger clickable area than expected.
 * This resets that default behaviour to reduce the cases of accidental interaction.
 *
 * Note: Chrome does not respect align-items in fieldsets.
 */
a,
label {
   align-self: flex-start;
}

/**
 * Links should be visually distinct from surrounding text, and should draw the eye.
 * Additive-styling of underline on hover (extremely common design practice) implies that
 * bold font is the correct morphological distinguisher.
 */
a {
   font-weight: bold;
   text-decoration: underline rgba(0, 0, 0, 0);
}

/**
 * Show underline on hover to indicate interactivity.
 */
a:hover {
   text-decoration-color: inherit;
}

/**
 * Indicating there is hover title text increases discoverability.
 */
abbr[title],
dfn[title] {
   cursor: help;
}

/* Figures are almost always centered on the page between paragraphs */
figure {
   margin-left: auto;
   margin-right: auto;

   max-height: fit-content;
   max-width: fit-content;
}

/* Distinguishes caption from normal body text */
figcaption {
   text-align: center;
}

/**
 * Alt-text should appear different than standard text to indicate it is metadata
 */
img {
   font-style: italic;
}

/**
 * remove underline for <u> as it no longer should be used to underline text.
 * It now means "Unarticulated Annotation", which *may* be indicated by underline, (eg. spellcheck)
 * but could also indicate highlight, etc.
 *
 * Better to disable the old behaviour to discourage incorrect use.
 */
u {
   text-decoration: none;
}

/**
 * Template nodes should never be shown, by spec.
 * Explicitly hidden just in case the browser does not know about templates.
 */
template {
   display: none;
}

/**
 * Removing user-select because summary is a clickable element that confusingly highlights on doubleclick
 */
details > summary {
   user-select: none;
}

/**
 * When an hr (thematic break) is a child of a flex layout container, it can disappear
 * in some default browser styles
 */
hr {
   /* providing any vertical margin will allow it to render in flex;
    * choosing this amount as a reasonable default */
   margin: 2rem 0;

   /* browser defaults often make it an inset 1px box, for some reason.
    * Using a single border is a simpler basic line. */
   border: none;
   border-top: 1px solid black;
}

/* Key-press instructions should be obvious as such. */
kbd {
   display: inline-block;

   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
   0 2px 0 0 rgba(255, 255, 255, 0.7) inset;

   border: 1px solid #b4b4b4;
   border-radius: 0.2em;

   background-color: #eee;
   padding: 0.12em 0.25em;

   color: #333;
   font-size: 0.85em;
   line-height: 1;
   white-space: nowrap;
   text-transform: capitalize;
}

/* Much more commonly want to ignore leading whitespace, because the tag itself will be indented */
pre {
   white-space: pre-line;
}

/* code lines inside a pre block can retain their interior whitespace */
pre code {
   white-space: pre-wrap;
}

/* ============================================
 *                INPUTS & FORMS
 * ============================================ */

form {
   /* shrink to a consistent size; contents will default to full width */
   width: fit-content;
}

fieldset {
   /* Space for fieldsets from other form elements increases legibility */
   margin: 0.5rem 0;

   /* space for the fieldset top and bottom border for visibility */
   padding-top: 0.5em; /* most contents in a fieldset have their own top margin */
   padding-bottom: 1em;
}

/**
 * Labels should create space from other form elements to indicate relationship of the label
 * and the input.
 *
 * Recommendation: place label text and input inside the same label tag to gain the expected behaviour of
 * selecting the input when the label is clicked.
 * Otherwise an ID on the input is required and the label must have a "for" attribute.
 */
label {
   /* better control over internal positioning */
   display: flex;

   /* Visual separation from other form elements by default for legibility & accessibility */
   margin: 0.5rem 0;

   /* checkboxes for example only make sense horizontally, so that limits the general rule here */
   flex-direction: row;

   /* flexibility for squished up situations */
   flex-wrap: wrap;

   /* Align labels and widget along central axis for clean line */
   align-items: center;

   /* avoid stretching to container width by default */
   width: fit-content;

   /* space label from input */
   gap: 0.5em;
}

label span:has(+:required):after,
fieldset[aria-required] legend:after {
   content: '*';
}

/**
 * Users can get confused when the placeholder text doesn't disappear on click, thinking
 * that it is inputted text they cannot delete.
 * Both Firefox and Chrome keep the text.
 */

/* NOTE: these are done in separate blocks because of the behaviour where
 * if any listed pseudo selector is invalid, the entire rule is ignored.
 *
 * For Chrome 6-57 & Opera 15-44 & Safari 5-10.1 ...
 */
input:focus::placeholder::-webkit-input-placeholder,
textarea:focus::placeholder::-webkit-input-placeholder {
   color: transparent;
}

/* ... Firefox 19-51 ... */
input:focus::placeholder::-moz-placeholder,
textarea:focus::placeholder::-moz-placeholder {
   color: transparent;
}

/* ... Edge 12-18 ... */
input:focus::placeholder:-ms-input-placeholder,
textarea:focus::placeholder:-ms-input-placeholder {
   color: transparent;
}

/* ... and the official pseudo-element */
input:focus::placeholder,
textarea:focus::placeholder {
   color: transparent;
}

/**
 * Text areas are x-y resizable by default, but interfaces are normally designed to expand downward, not sideways.
 *
 * Defaulting to only-vertical reduces breaking behaviour.
 */
textarea {
   resize: vertical;
}

/**
 * Chrome has essentially no padding on form fields, which decreases legibility.
 *
 * Firefox has over-designed fields (gradient, sizing), which the border-radius causes to reset to plain white.
 *
 * Fields should be at least slightly rounded-edged, for UI psychology.
 */
input,
textarea,
select {
   /* Default border to override Firefox's huge default borders and standardize */
   border: 1px inset grey;
   border-radius: 0.25rem;

   /* Visual separation from input content for legibility */
   padding: 0.25rem 0.5rem;

   /* Chrome does not apply input font family consistently */
   font-family: ui-sans-serif, system-ui, sans-serif;

   /* Firefox does not apply a consistent input font size */
   font-size: 1rem;
}

/**
 * Clickable things should indicate their clickiness via the cursor and a hover highlight
 */
button:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover,
input[type="submit"]:enabled:hover,
input[type="radio"]:enabled:hover,
label:hover input[type="radio"]:enabled,
label:hover input[type="radio"]:enabled + span,
input[type="checkbox"]:enabled:hover,
label:hover input[type="checkbox"]:enabled,
label:hover input[type="checkbox"]:enabled + span,
select:enabled:hover,
select:enabled:focus-within, /* as of at least Firefox 91, filter rule closes the dropdown. Including focus-within fixes it  */
summary:hover {
   /* highlighting on hover provides instant feedback */
   filter: brightness(105%);
   cursor: pointer;
}

/**
 * Firefox uses OS focus indication, which may only be colour based (bad for colourblind)
 * Chrome uses Outlines to indicate focus.
 *
 * This standardizes and forces morphological visual focus indication.
 */
input:focus,
textarea:focus,
button:focus,
select:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
   /* remove Chrome's focus highlight outline */
   outline: none;

   /* use internal shading to indicate focus */
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8) inset
}

/**
 * General button style
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
   /* Center button labelling */
   display: inline-flex;
   align-items: center;
   justify-content: center;

   /**
    * Minimum size based on accessibility recommendations:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
    */
   min-width: 44px;
   min-height: 44px;

   /* basic raised appearance indicates it is separate from page content */
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   border: none;
   border-radius: 0.25rem;

   /* visual separation of text from button edge and interior contents from each other for legibility. */
   padding: 0.5rem 1rem;
   gap: 0.5rem;

   background-color: buttonFace;
   color: buttonText;

   /* Some browsers have a custom smaller fontsize for inputs */
   font-size: 1rem;
}

/* draw button as depressed to indicate active interaction / movement */
button:enabled:active:hover,
input[type="button"]:enabled:active:hover,
input[type="reset"]:enabled:active:hover,
input[type="submit"]:enabled:active:hover {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
}

/**
 * disabled elements get reduced contrast to draw less attention, and
 * a little transparency to further blend & imply a reduced tangibility
 */
*:disabled,
input[type="radio"]:disabled + span:before,
input[type="checkbox"]:disabled + span:before,
input[type="radio"]:disabled + span:after,
input[type="checkbox"]:disabled + span:after {
   opacity: 0.5;
   filter: saturate(0.5) contrast(0.8);
}

input[type="checkbox"],
input[type="radio"] {
   /* chrome adds margins which break alignment in flex centering */
   margin: 0;
}
/*
 * A basis for theme files to extend.
 */

label {
   flex-direction: column;
   align-items: flex-start;
}

/* ============================================
 *                INPUTS & FORMS:
 *            Checkboxes / Radiobuttons
 * ============================================ */

/* Replace standard radios/checkboxes with one that can be styled */
input[type="radio"],
input[type="checkbox"] {
   display: none;
}

input[type="radio"] + span,
input[type="checkbox"] + span {
   position: relative;

   padding: 0 0 0 1.25rem;
   overflow: visible;

   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}

/* box and mark */
input[type="radio"] + span:before,
input[type="checkbox"] + span:before,
input[type="radio"] + span:after,
input[type="checkbox"] + span:after {
   position: absolute;
   display: flex;

   left: 0;
   top: 0;
   bottom: 0;
   margin: auto;

   align-items: center;
   justify-content: center;

   width: 1em;
   height: 1em;

   box-sizing: border-box;

   overflow: visible;
}

/* box / radio-circle */
input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
   border: 1px solid #aaa;

   background: #f8f8f8;

   content: '';
}

input[type="radio"] + span:before {
   border-radius: 100%;
}

input[type="checkbox"] + span:before {
   border-radius: 0.2rem;
}

/* both radio and check mark (unchecked) */
input[type="radio"] + span:after,
input[type="checkbox"] + span:after {
   opacity: 0;
   transform: scale(0);

   font-size: 1em;

   /* remove pointer events on the marks for cases when the mark is stylized to draw larger than the box
      eg. a really big checkmark whose tail goes outside the box */
   pointer-events: none;
   --transition-speed: 150ms;
   transition: opacity var(--transition-speed) ease-out, transform var(--transition-speed) ease-out;
}

/* radio mark */
input[type="radio"] + span:after {
   text-shadow: 0 0 2px;
   font-weight: bold;

   content: '\2022';
}

/* check mark */
input[type="checkbox"] + span:after {
   /* the base of the check in Arial is approx here */
   transform-origin: 30% 70%;

   content: '\2714';
}

/* scale to full size when checked */
input[type="radio"]:checked + span:after,
input[type="checkbox"]:checked + span:after {
   transform: scale(1);
}

/* be visible when checked & enabled (general disabled element rules also use opacity) */
input[type="radio"]:enabled:checked + span:after,
input[type="checkbox"]:enabled:checked + span:after {
   opacity: 1;
}
dialog-busy {
   display: flex;

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   flex-direction: column;

   transition: all 1s ease-out;
   pointer-events: none;
}

dialog-busy > * {
   --duration: 200ms;

   opacity: 0;
   visibility: hidden;

   transition-property: visibility, all;
   transition-duration: 0s, var(--duration);
   transition-delay: var(--duration), 0s;
   transition-timing-function: ease-out;

   pointer-events: all;
}

dialog-busy .visible {
   opacity: 1;
   visibility: visible;
}

dialog-busy > .frame {
   position: sticky;
   top: 15vh;

   margin: 15vh auto;
   z-index: 101;

   box-shadow: 0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.3);
   border-radius: 0.3em;

   max-width: 30rem;
   min-width: 25vw;

   overflow: auto;
}

dialog-busy header {
   padding: 1rem;

   background-color: lightgrey;

   text-align: center;
   font-weight: bold;
   user-select: none;
}

dialog-busy .frame .title-text {
   grid-column: 2;
}

dialog-busy > .frame .dialog-contents {
   padding: 1em;

   background-color: white;
}

dialog-busy .message-body {
   padding: 2rem;

   background: white;
}

dialog-busy .message {
   margin: 0;

   text-align: center;
}

@keyframes dialog-busy-dots {
   0% {
      content: '';
   }
   33% {
      content: '.';
   }
   66% {
      content: '..';
   }
   100% {
      content: '...';
   }
}

dialog-busy .message:after {
   position: absolute;

   animation-name: dialog-busy-dots;
   animation-duration: 1s;
   animation-timing-function: steps(3, end);
   animation-iteration-count: infinite;

   white-space: nowrap;
   content: '...';
}

dialog-busy .overlay {
   position: absolute;

   padding: 0.5rem;

   /* set to content box and be a tiny bit wider overall */
   box-sizing: content-box;
   top: -0.5rem;
   left: -0.5rem;
   width: 100%;
   height: 100%;
   z-index: 100;

   background: rgba(0, 0, 0, 0.5);
}
dialog-confirm {
   display: flex;

   position: absolute;

   flex-direction: column;

   transition: all 1s ease-out;
}

dialog-confirm > * {
   --duration: 200ms;

   opacity: 0;
   visibility: hidden;

   transition-property: visibility, all;
   transition-duration: 0s, var(--duration);
   transition-delay: var(--duration), 0s;
   transition-timing-function: ease-out;
}

dialog-confirm .visible {
   opacity: 1;
   visibility: visible;
}

dialog-confirm > .frame {
   margin: 0 auto 1em auto;

   border-radius: 0.3em;
   width: fit-content;
   min-width: 5rem;

   overflow: auto;
}

dialog-confirm header {
   display: grid;

   padding: 1rem;

   grid-template-columns: 1fr 8fr 1fr;
   align-items: center;
   background-color: lightgrey;

   text-align: center;
   font-weight: bold;
   user-select: none;
}

dialog-confirm header .dismiss {
   margin-left: auto
}

dialog-confirm .frame .title-text {
   grid-column: 2;
}

dialog-confirm > .frame {
   position: fixed;
   top: 10vh;

   /* centering */
   left: 0;
   right: 0;
   z-index: 101;

   box-shadow: 0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.3);

   max-width: 30rem;
}

dialog-confirm > .frame .dialog-contents {
   padding: 1rem;
   gap: 1rem;

   background-color: white;
}

dialog-confirm .overlay {
   position: fixed;

   padding: 0.5em;

   /* set to content box and be a tiny bit wider overall */
   box-sizing: content-box;
   top: -0.5em;
   left: -0.5em;
   width: 100%;
   height: 100%;
   z-index: 100;

   background: rgba(0, 0, 0, 0.5);
}

dialog-confirm .controls {
   display: flex;

   flex-direction: row;
   justify-content: flex-end;
   gap: 1rem;
}

dialog-confirm .controls .action {
   text-transform: capitalize;
}
@keyframes fade-in {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

info-toast {
   display: flex;
   flex-direction: column;
}

info-toast .toasts-container {
   display: flex;

   position: fixed;
   /* ten above normal float-panels */
   z-index: 110;

   gap: 1rem;
   flex-direction: column;
   align-items: flex-end;
}

info-toast .notices,
info-toast .warnings,
info-toast .errors {
   display: flex;

   margin: 0;

   padding: 0;
   gap: 1rem;
   flex-direction: column;

   color: white;
}

info-toast .toast {
   box-shadow: 0.15em 0.15em 0.25em rgba(0, 0, 0, 0.5);
   border-radius: 0.25rem;

   overflow: auto;
}

info-toast .toast header {
   position: relative;

   padding: 1em;

   font-weight: bold;
   text-align: center;

   user-select: none;
   cursor: default;
}

info-toast .toast header .title-text {
   margin: auto;
}

info-toast .toast .dismiss {
   border: none;
   padding: 0;

   background: none;
}

info-toast .toast .dismiss:before {
   display: flex;

   border-radius: 100%;

   width: 1.5em;
   height: 1.5em;

   min-width: 1em;
   min-height: 1em;
   align-items: center;
   justify-content: center;

   font-size: 1.1rem;

   content: "\2715";
}

info-toast .toast .dismiss:hover {
   cursor: pointer;
}

info-toast .toast .dismiss:hover:before {
   background: rgba(0, 0, 0, 0.2);
}

info-toast .toast .dismiss:hover:active:before {
   background: rgba(0, 0, 0, 0.4);
}

info-toast .toast .dismiss:focus {
   outline: none;
}

info-toast .toast {
   display: flex;

   position: relative;
   animation: fade-in 200ms ease-out;
   animation-fill-mode: forwards;

   max-width: min(25rem, 50vw);

   gap: 0.25rem 0.5rem;
   padding: 0.75rem;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   background-color: lightgrey;
}

info-toast .toast header {
   padding: 0;
   flex-basis: 100%;

   text-transform: capitalize;
   text-align: left;
}

info-toast .notices header {
   display: none;
}

info-toast .toast .dismiss {
   position: static;

   min-height: auto;
   min-width: auto;
}

info-toast .toast .dismiss,
info-toast .toast .dismiss:active:hover {
   box-shadow: none;
}

info-toast .message {
   margin: 0;
   flex-direction: row;
   flex-grow: 1;
   width: 80%; /* prevents overflow nudging the dismiss button into wrapping */

   text-align: justify;
   color: white;
}

info-toast .warnings .toast {
   background-color: rgba(238, 255, 184, 0.97);
}

info-toast .errors .toast {
   background-color: rgba(255, 128, 128, 0.98);
}

info-toast .errors header {
   margin: 0;

   width: 100%;

   background: none;
   font-size: 1.25em;
   font-weight: bold;
}

/* mobile */
@media (max-width: 1023px) {
   info-toast {
      font-size: larger;
   }

   info-toast .toasts-container {
      left: 0;
      right: 0;
      bottom: 0;

      width: 100%;
      min-height: 3em;
      align-items: normal;
   }

   info-toast .toast {
      max-width: 100%;
   }
}

/* desktop */
@media (min-width: 1024px) {
   info-toast > div {
      left: auto;
      right: 4rem;
      bottom: 2rem;
   }

   info-toast .toast {
      width: 20rem;
   }
}
input-checklist {
   display: flex;
   flex-direction: column;
}

input-checklist legend {
   text-transform: capitalize;
}
input-date-range .range {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
}

input-date-range .range label {
   width: auto;
}

/* Chrome adds extra padding that isn't quite needed */
input::-webkit-calendar-picker-indicator {
   margin: 0;
}

input-date-range input[type="date"] {
   max-width: 8.5rem;
}

input-date-range .quick-options summary {
   margin-block: 0.5rem;
}

input-date-range .quick-options-list {
   gap: 0.5rem;
   flex-wrap: wrap;
   justify-content: space-around;
}

input-date-range .quick-options button {
   min-height: auto;
   padding-inline: 0.5rem;
   font-size: small;
}

/* need to assign a class instead of using something like :empty
   because empty always returns true for inputs - remiller, Aug 2021 */
input-date-range input[type="date"].blank {
   color: rgba(0, 0, 0, 0.5);
}

input-date-range input[type="date"].blank:not(:focus-within) {
   color: transparent;
}

input-date-range .separator {
   padding: 0.5rem;
}
input-duration .time-unit {
   text-transform: capitalize;
}
/**
 * Applied as part of the longclick binding.
 *
 * Note: The styling is imperfect for circular buttons, but close. It cannot use overflow: hidden because that also
 *       clips the help prompt.
 */

.kowt-longclick {
   position: relative;

   /*overflow: hidden;*/

   /* bugfix to cause chrome to clip filter on circular buttons */
   filter: brightness(1);
}

.kowt-longclick:focus-within {
   /* TODO: this is here because chrome adds a focus outline, which is great normally, but
      TODO: gets extended to the helper popup. would be nice to find a way to support focus */
   outline: none;
}

/* === FILL-UP BAR === */
.kowt-longclick:before {
   position: absolute;

   display: flex;

   bottom: -2px;

   box-sizing: border-box;
   /*
    * removed border-top and bo shadow to sidestep the clipping issue
    */
   /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset, -1px -1px 1px rgba(255, 255, 255, 0.7) inset;*/
   /*border-top: 2px solid transparent;*/
   width: calc(100% + 1px);
   height: 0;
   opacity: 0.3; /* start a little more visible than 0 */

   -webkit-backdrop-filter: invert(20%) hue-rotate(180deg); /* webkit prefix needed until IOS 17 (2024) */
   backdrop-filter: invert(20%) hue-rotate(180deg);
   transition-property: height;
   /* duration optionally defined on the html element */
   transition-duration: var(--kowt-longclick-duration, 1s);
   transition-timing-function: ease-out;

   content: '';
}

.kowt-longclick-active:enabled:before {
   border-top-color: var(--brand1, grey);
   opacity: 0.75;
   height: calc(100% + 1px);
}

/* using :active to hopefully still allow selection when in larger block. Trying to use as light a touch as possible (ba-dum-tsh) */
.kowt-longclick:active {
   /* Required to prevent Safari from triggering text select on long presses */
   -webkit-user-select: none;
}

/* === HELP TEXT POPUP === */
.kowt-longclick:after {
   position: absolute;

   opacity: 0;
   visibility: hidden;

   bottom: calc(100%);
   z-index: 10;

   box-shadow: 0.2em 0.2em 0.25em rgba(0, 0, 0, 0.7);

   padding: 0.5em;
   background-color: grey;

   transition: all 200ms;
   color: white;
   font-size: 0.9em;

   content: 'Hold to Complete';
   /* TODO: fallback-enabled line below is eventually supposed to be supported, but not yet */
   /* content: attr(data-help-text, 'Hold to Complete'); */
}

.kowt-longclick-help:active:after,
.kowt-longclick-help:focus-within:after {
   opacity: 1;
   visibility: visible;
}

.kowt-longclick:focus-within {
   z-index: 1; /* Need any z-index for the pseudoelements of the focused button to draw their shadows over neighbour buttons */
}
input-password {
   display: flex;
   flex-direction: row;

   white-space: nowrap;

   --pw-radius: 0.25em;
}

input-password:focus-within {
   outline: -webkit-focus-ring-color auto 5px;
}

input-password .input-wrapper {
   flex-grow: 1;

   display: inline-block;
   position: relative;
}

input-password input[type="text"],
input-password input[type="password"] {
   position: relative;
   z-index: 2;

   margin: 0;

   border-radius: var(--pw-radius) 0 0 var(--pw-radius);
   border-right: none;
   height: 100%;
   width: 100%;

   font-family: monospace;
}

/* hide the non-standard built-in show password button in MS Edge */
input-password input::-ms-reveal {
   display: none;
}

input-password input:focus {
   outline: none;
}

input-password .char-boxes {
   display: flex;

   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;

   width: 100%;
   flex-direction: row;
   gap: 0;

   font-family: monospace;
   font-size: 1rem;
}

input-password .char-box {
   font-family: monospace;

   /* retain cursor for input hover */
   pointer-events: none;
}

input-password .space-highlight {
   z-index: 3;

   opacity: 0.25;

   margin: 0;
   padding: 0;

   background: grey;
}

input-password button {
   min-height: auto;
}

input-password .show-pw {
   position: relative;
   z-index: 1;

   display: flex;

   box-shadow: none;

   border: 1px solid grey;
   border-radius: 0 var(--pw-radius) var(--pw-radius) 0;

   padding: 0.5em 0.5em 0.5em 0.5em;
}

input-password .show-pw:active {
   box-shadow: none;
}

input-password .show-pw .hide,
input-password .show-pw[aria-checked="true"] .show {
   display: none;
}

input-password .show-pw .show,
input-password .show-pw[aria-checked="true"] .hide {
   display: inline-block;
}


input-password .show-pw span {
   display: flex;
   align-items: center;

   margin: 0;

   min-width: auto;

   line-height: 1em;
   font-size: 0.75em;
}

input-password .fa-solid {
   min-width: 20px; /* the width of the wider icon */
}

input-password .show-pw .icon-label {
   min-width: 2.5em;
}

input-password .show-pw .hide {
   position: relative;
}

input-password .show-pw .hide:before {
   opacity: 0.5;
}
input-radiolist {
   display: flex;
   flex-direction: column;
}

input-radiolist legend {
   text-transform: capitalize;
}
input-search {
   display: flex;
   flex-direction: column;
   position: relative;
}

input-search > .searchbox {
   margin: 0;

   min-width: 6em;
}

input-search .results-section {
   display: none;

   position: absolute;
   top: calc(100% - 2px); /* snug up to the input border for assocication */
   z-index: 10;
   width: 100%;
}

input-search:focus-within .results-section {
   display: flex;
   flex-direction: column;
}

input-search .results-section {
   margin: 0;

   box-shadow: 0.1rem 0.2rem 0.5rem rgba(0, 0, 0, 0.4);

   border: 1px solid grey;
   border-radius: 0 0 0.5rem 0.5rem;

   padding: 0;

   width: max-content;
   background: white;
}

input-search .no-results .result {
   padding: 0.5rem;
   opacity: 0.7;
}

input-search .result {
   white-space: nowrap;
   user-select: none;

   list-style: none;
}

input-search button {
   display: flex;

   border: none;
   width: 100%;

   justify-content: flex-start;
   background: none;
   cursor: pointer;

   color: inherit;
}

input-search button:focus,
input-search button:hover {
   background: lightblue;
}
pane-carousel {
   display: flex;
   flex-direction: column;
}
pane-menu ul {
   padding: 0;
}

/* Dropdown Menus */
pane-menu > ul ul {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   background: #000;
   border: 1px solid #fff;
   
   white-space: nowrap;
   
   box-shadow: 5px 5px 5px #333;
   
   text-align: left;
   padding-left: 0;
   
   transition: visibility 0s linear 0s, opacity 0.3s ease-in-out;
}

/* Every menu item, including the menu headers */
pane-menu li {
   position: relative;
   list-style: none;
}

/* All menu item contents */
pane-menu a,
pane-menu span {
   display: flex;
   flex-direction: column;
}

/* Show the immediate dropdown menu iff the parent item is hovered over */
pane-menu > ul li:hover > ul {
   opacity: 1;
   visibility: visible;
}

/* sub-menus */
pane-menu ul ul {
   top: 1.15em;
   left: -1px;
   z-index: 1;
}

/* sub-sub menus and deeper */
/* TODO: should probably use nth-of-type(odd) here */
pane-menu > ul ul ul {
   left: 10em;
   top: -1px;
}

pane-menu > ul {
   display: flex;
   
   margin: 0 auto;
}

/* Menu header contents only */
pane-menu > ul > li > span,
pane-menu > ul > li > a {
   padding: 0.5em;
}

pane-menu img {
   max-height: 1em;
}

pane-menu > ul li > * {
   display: inline-flex;
}

pane-menu > ul li > div {
   height: 100%;
}

pane-menu .current-page span,
pane-menu .current-page a {
   font-weight: bold;
}
pane-paged {
   display: flex;
   flex-direction: row;

   align-items: center;

   margin-top: 1rem;
   margin-bottom: 1rem;
}

pane-paged .hidden {
   --duration: 200ms;

   visibility: hidden;
   opacity: 0;
   transition-property: visibility, all;
   transition-duration: var(--duration);
   transition-delay: var(--duration), 0s;
   transition-timing-function: ease-out;
}

pane-paged .meta-controls,
pane-paged .meta-controls label,
pane-paged .controls,
pane-paged .numbers,
pane-paged .stats {
   flex-direction: row;
}

pane-paged .meta-controls,
pane-paged .stats {
   font-size: smaller;
   gap: 0.25rem;
}

pane-paged .meta-controls label {
   margin: auto;

   gap: 0.5rem;
   align-items: center;
}

pane-paged .per-page {
   width: auto;
}

pane-paged .controls {
   margin: 0 auto;
}

pane-paged .numbers {
   margin: auto 1rem;

   grid-gap: 0.75rem;
}

pane-paged .current {
   font-weight: bold;
}

pane-paged .page-gap {
   margin: 0 0.25rem;

   align-self: center;
   font-size: medium;
}

pane-paged .prev:before,
pane-paged .next:after {
   line-height: 1rem;
}

pane-paged .prev:before {
   /* \00A0 is equal to &nbsp;. Used here to add padding but not interrupt underline */
   content: '\25C4\00A0';
}

pane-paged .next:after {
   /* \00A0 = &nbsp; and is used to add padding but not interrupt underline */
   content: '\00A0\25BA';
}
/* To include a new directory, list it here using a require, require_directory, or require_tree directive.
 * 






 */
/**
 * Shims to the KOWT styling
 * TODO: export all these to KOWT
 */

/* set global defaults for duration and timing, but leave actual properties to elements */
* {
   /*transition-property: none;*/
   /*transition-duration: 150ms;*/

   /* Default is 'transition-property: all', so just need to set transition duration to any value when transition desired */
   transition-duration: 0ms; /* TODO: 0 is the spec default. probably do not need to include */
   transition-timing-function: ease-out;
}

dialog-busy {
   transition-property: background-color, color, opacity;
}

/* TODO: a bunch of these dialog properties are identical to all dialogs. they should be merged into a generic dialog-general css file in KOWT */
dialog-confirm > .frame,
dialog-busy > .frame {
   /* keeps the contents cropped */
   overflow: hidden;

   /* expand relative to parent but never more than 15vh to keep it on screen */
   margin: min(5%, 10vh) auto;

   top: 10vh;

   /* overtaking the current viewport is bad */
   max-height: 75vh;

   border-radius: 0.2rem;
}

dialog-busy > .frame {
   /* remain on screen within its container, stay somewhat close to top third */
   position: sticky;
}

dialog-confirm .dialog-contents {
   /* to trigger the overflow bar in main-section */
   overflow: hidden;
}

dialog-confirm .dialog-contents .main-section,
dialog-busy .message-body {
   /* scrollbar if needed */
   overflow-y: auto;
}


dialog-busy label,
dialog-confirm label {
   align-self: unset;
}
:root {
   /* brand color 1: gold contrast white */
   --brand1-h: 34;
   --brand1-s: 75.8%;
   --brand1-l: 54.7%;
   --brand1: hsl(var(--brand1-h), var(--brand1-s), var(--brand1-l));
   --brand1-light: hsl(var(--brand1-h), var(--brand1-s), calc(var(--brand1-l) / .9));
   --brand1-dark: hsl(var(--brand1-h), var(--brand1-s), calc(var(--brand1-l) * .9));

   --neutral1-h: 0;
   --neutral1-s: 100%;
   --neutral1-l: 100%;
   --neutral1: hsl(var(--neutral1-h), var(--neutral1-s), var(--neutral1-l));
   --neutral1-light: hsl(var(--neutral1-h), var(--neutral1-s), calc(var(--neutral1-l) / .9));
   --neutral1-dark: hsl(var(--neutral1-h), var(--neutral1-s), calc(var(--neutral1-l) * .9));

   /* brand color 2: charcoal contrast silver */
   --brand2-h: 0;
   --brand2-s: 0%;
   --brand2-l: 35%;
   --brand2: hsl(var(--brand2-h), var(--brand2-s), var(--brand2-l));
   --brand2-light: hsl(var(--brand2-h), var(--brand2-s), calc(var(--brand2-l) / .9));
   --brand2-dark: hsl(var(--brand2-h), var(--brand2-s), calc(var(--brand2-l) * .9));

   --neutral2-h: 0;
   --neutral2-s: 0%;
   --neutral2-l: 100%;
   --neutral2: hsl(var(--neutral2-h), var(--neutral2-s), var(--neutral2-l));
   --neutral2-light: hsl(var(--neutral2-h), var(--neutral2-s), calc(var(--neutral2-l) / .9));
   --neutral2-dark: hsl(var(--neutral2-h), var(--neutral2-s), calc(var(--neutral2-l) * .9));

   /* brand color 3: green contrast white */
   --brand3-h: 168;
   --brand3-s: 81.4%;
   --brand3-l: 31.6%;
   --brand3: hsl(var(--brand3-h), var(--brand3-s), var(--brand3-l));
   --brand3-light: hsl(var(--brand3-h), var(--brand3-s), calc(var(--brand3-l) / .9));
   --brand3-dark: hsl(var(--brand3-h), var(--brand3-s), calc(var(--brand3-l) * .9));

   --neutral3-h: 0;
   --neutral3-s: 100%;
   --neutral3-l: 100%;
   --neutral3: hsl(var(--neutral3-h), var(--neutral3-s), var(--neutral3-l));
   --neutral3-light: hsl(var(--neutral3-h), var(--neutral3-s), calc(var(--neutral3-l) / .9));
   --neutral3-dark: hsl(var(--neutral3-h), var(--neutral3-s), calc(var(--neutral3-l) * .9));

   --error: rgba(255, 102, 102, 0.98);
   --error-neutral: white;

   /* non-standard link colours */
   --font-color-link: #20669C;
   --font-color-link-hover: #277ccc;
}
:root {
   /* Reasonable max column size for text containers */
   --max-text-width: 80ch;

   /* Pads elements that span the whole screen from the screen edge */
   --page-padding: 1rem;

   /**
    * Text Styles. Body is main text, accent is used for highlights like headers
    */
   --body-font: 'Quicksand', Arial, Verdana, sans-serif;
   --accent-font: 'Quicksand', Arial, Verdana, sans-serif;
}

/* ==================================================
 * Major page sections (body, header, footer, main)
 * ==================================================
 */

body {
   color: var(--brand2);
   font-family: var(--body-font);
}

/* main page header */
body > header {
   min-height: 9rem;
   padding: 0;

   justify-content: flex-end; /* mostly relevant for very small mobile */
}

body > header .hero {
   padding: 1rem;

   grid-gap: 1rem;
   flex-direction: row;
   justify-content: space-around;
}

body > header img {
   user-select: none;
}

body > header .logo {
   display: flex;

   /* center logo link vertically */
   margin-top: auto;
   margin-bottom: auto;

   justify-content: center;
   align-items: center;
}

body > header .logo img {
   max-width: 20rem;
}

body > header .logo img,
body > header .sprinkler {
   max-height: 7rem;
}

body > header .sprinkler {
   flex-direction: row;

   z-index: -5;
   flex-grow: 1;
   gap: 0.5rem;

   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
}

body > header .sprinkler img {
   box-shadow: 0.1rem 0.1rem 0.25rem rgba(0, 0, 0, 0.5);
   display: inline;
   vertical-align: top;
   max-width: 15rem;
   max-height: 10rem;
}

/*  Applying Cicada Principle to shortcut natural randomness */
body > header .sprinkler img:nth-of-type(1) {
   transform: rotate(-7deg);
}

body > header .sprinkler img:nth-of-type(2) {
   transform: rotate(6deg);
}

body > header .sprinkler img:nth-of-type(3) {
   transform: rotate(-5deg);
}

body > header .sprinkler img:nth-of-type(4) {
   transform: rotate(-3deg);
}

body > header .sprinkler img:nth-of-type(5) {
   transform: rotate(3deg);
}

body > main {
   align-items: center;
}

body > footer {
   display: grid;
   grid-template-columns: 2fr 2fr 1fr;
   column-gap: 10%;
   row-gap: 0.5rem;

   padding: 1.5rem 1rem 6rem 1rem;
}

body > footer h2 {
   grid-row: 1;
   align-self: flex-end;

   margin: 0;

   font-size: large;
}

body > footer address {
   grid-gap: 1rem;
   flex-direction: row;

   font-style: normal;
}

body > footer p {
   margin: 0;
}

body > footer .icon {
   width: 1.25rem;
   text-align: center;
}

body > footer small {
   margin-top: auto;

   font-size: small;
}

body > footer .logo img {
   filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));

   max-width: 10rem;
   max-height: 4rem;

   transition: all 100ms ease-out;
}

body > footer .logo img:hover {
   filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.3));
}

/* ==================================================
 * Container UI elements (h_, details, figure, etc)
 * ==================================================
 */

h1, h2, h3, h4, h5 {
   margin: 0;
}

h2 {
   font-size: xx-large;
   font-weight: normal;
}

h3 {
   font-size: xx-large;
   font-weight: normal;
}

h4 {
   font-size: x-large;
   font-weight: normal;
}

h5 {
   font-size: large;
   font-weight: normal;
}

/* TODO: extract what is generic to KOWT */
info-toast .toast {
   align-items: center;

   background-color: var(--brand1);

   color: var(--neutral1);
}

info-toast .toast {
   display: grid;

   grid-template-areas: 'title x'
                        'msg msg';
   font-family: system-ui, Verdana, sans-serif;
}

info-toast .notices .toast {
   display: flex;
}

info-toast .notices p:first-of-type {
   max-width: 80%;
}

info-toast .toast p {
   grid-area: msg;
   width: auto;
}

info-toast .toast .dismiss {
   grid-area: x;
   align-self: flex-start;
   justify-content: flex-end;
}

/* TODO: extract fix to KOWT. */
/* Align circles with first line of multiline radio text */
input[type="radio"] + span:before,
input[type="checkbox"] + span:before,
input[type="radio"] + span:after,
input[type="checkbox"] + span:after {
   margin-top: 0.15rem;
}

/* Nudge the dot to center */
input[type="radio"] + span:after {
   padding-top: 2px;
}

/* ==================================================
 * Simple/inline UI elements (eg. links)
 * ==================================================
 */
/* TODO: Extract to KOWT reset? */
img {
   object-fit: contain;
}

a {
   color: var(--font-color-link);
}

a:hover,
a:visited {
   color: var(--font-color-link-hover);
}

abbr.info {
   cursor: help;
   text-decoration: none;
}

.placeholder {
   padding: 1rem;
   text-align: center;
   opacity: 0.6;
}

pane-paged .current {
   background-color: var(--brand3);
}

/* ==================================================
 * Form elements (buttons, fieldsets, inputs)
 * ==================================================
 */
form {
   gap: 2rem;
}

fieldset {
   margin: 0;
   border-radius: 0.2rem;
   border-color: var(--neutral2-dark);
}

legend {
   padding: 0 0.5rem;

   font-size: larger;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button {
   background-color: var(--brand1);
   gap: 0.5rem;

   color: var(--neutral1);

   transition: all ease-out 100ms;
}

/* TODO: possibly extract to KOWT */
input-radiolist label {
   margin: 0;
   flex-direction: row;
   align-items: center;
   user-select: none;
}

input-radiolist .radio-list {
   gap: 0.5rem;
}

/* meter styling is not standardized yet. Test in multiple browsers */
meter:-moz-meter-optimum {
   border-radius: 0.5rem;
   border: 1px solid var(--brand3);
   height: 0.5rem;

   background: var(--neutral3);
}

meter:-moz-meter-optimum::-moz-meter-bar {
   background: var(--brand3);
}

meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-optimum-value {
   background-color: var(--brand3);
}


form label.invalid input,
   /* TODO: extract this generic rule to KOWT theme basis or Reset.
            Note, :user-invalid is really what is desired (only fires after touched) but has low support.
            Disabling :required for now and relying on classname */
form :is(input, select, textarea):not(:focus-within, :required):invalid {
   outline: 2px solid red;
}

label span:has(+:required):after,
fieldset[aria-required] legend:after {
   margin-left: 0.5rem;
   font-size: small;
   font-style: italic;
   opacity: 0.5;
   content: 'required';
}

/* These are double-entry validated fields, so they have nested error message spans */
form .validated > span {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0 0.5rem;
   align-items: baseline;
}

form .validated span:has(+:required):after {
   margin: 0;
   padding-right: 0.1rem; /* needed for Safari / iOS, otherwise the last letter is clipped */
}

form .form-error {
   display: inline-block;

   opacity: 0;
   order: 10; /* push to the back of the label, after any :after etc */
   border-bottom: 1px dotted red;
   max-height: 1.25rem;
   max-width: 0;

   padding: 0.1rem;
   overflow: hidden;

   text-overflow: ellipsis;
   font-size: small;

   transition-property: max-width, opacity;
   transition-duration: 200ms;
   transition-timing-function: ease-out;
}

form .form-error .fa-solid {
   color: red;
}

form .invalid .form-error {
   opacity: 1;
   max-width: 100vw;
}

/* By Spec: button's default type is "submit" when unspecified */
input[type="submit"],
button[type="submit"],
button {
   background-color: var(--brand1);
   color: var(--neutral1);

   font-size: 1.1em;
}

input[type="button"],
button[type="button"] {
   background-color: var(--neutral2-dark);
   color: var(--brand2);
}

.kowt-longclick::before {
   backdrop-filter: invert(20%) hue-rotate(180deg);
}

@media (max-width: 1023px) {
   fieldset {
      border: none;

      padding-left: 0;
      padding-right: 0;
   }

   legend {
      margin: 0.5rem 0;
      border-bottom: 1px solid var(--brand2);
      width: 100%;
      padding: 0.5rem 0;
   }
}

/* ========================
 *  General Specific Pages
 * ========================
 */
form.new-password,
form.new-confirmation {
   max-width: min-content;
}

/* =======================
 *       FontAwesome
 * =======================
 */

/* Generic FontAwesome regular and solid */
.fa-regular,
.fa-solid {
   color: var(--brand3);
}

/* FontAwesome icons inside buttons */
button .fa-regular,
button .fa-solid,
input[type='button'] .fa-regular,
input[type='button'] .fa-solid,
input[type='submit'] .fa-regular,
input[type='submit'] .fa-solid {
   color: inherit;
}
/* desktop */
@media (min-width: 1024px) {
   body {
      margin: 0 auto;
      min-width: 66vw;
   }

   main {
      font-size: 16px;
      width: 100%;
      min-height: 20rem;
   }
}
/* print */
@media print {
   body > main {
      border: none;
   }

   .controls {
      display: none;
   }
}
body {
   background-image: linear-gradient(135deg, var(--neutral2) 0%, var(--neutral2-dark) 100%);
   background-repeat: no-repeat;
}

body > header nav,
main {
   border-style: outset;
   border-color: rgba(0, 0, 0, 0.2);
   border-radius: 0 0 0.2rem 0.2rem;

   border-width: thin medium medium thin;
}

body > header nav {
   display: flex;

   border-bottom: 0;
   border-radius: 0.2rem 0.2rem 0 0;

   background-color: var(--neutral2);
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

body > header nav ul,
body > header nav li {
   display: flex;
}

body > header nav ul {
   margin: 0;
   padding: 0;

   flex-grow: 1;

   flex-direction: row;
   justify-content: space-between;

   list-style: none;
   font-size: 1rem;
}

body > header nav a {
   display: flex;
   padding: 0.5rem;

   align-items: center;
   justify-content: center;
}

#admin-bar {
   position: sticky;
   display: flex;

   top: 0;
   z-index: 100;

   padding: 0.5rem;
   gap: 0.5rem;
   align-items: center;
   flex-direction: row;
   background-color: var(--brand1);

   color: var(--neutral1);
}

#admin-bar .fa-solid {
   color: inherit;
}

#admin-bar .admin-link {
   color: var(--neutral1);
}

body > header .socials {
   flex-direction: row;
}

body > header .social {
   display: flex;

   filter: saturate(0);
   opacity: 0.5;

   justify-content: center;
   align-items: center;

   font-size: 1.5rem;
   text-decoration: none;
   transition: all 150ms;
}

body > header .social:hover {
   filter: saturate(1);
   opacity: 1;

   background-color: var(--brand1);

   color: var(--neutral1);
}

main {
   padding-bottom: 2rem;

   border-top-style: solid;
   border-top-color: var(--brand1);
   border-top-width: 1px;
   border-radius: 0 0 0.2rem 0.2rem;

   background-color: var(--neutral1);
}

form .hint {
   margin-top: 0;
   opacity: 0.5;
}

/* mobile */
@media (max-width: 1023px) {
   body {
      margin: 0 auto;

      padding: 0 1em;
   }

   body > header .sprinkler {
      display: none;
   }

   body > header .logo {
      padding: 0.5em;

      text-align: center;
   }

   body > header .logo img {
      max-height: 5em;
      max-width: 50vw;
   }

   main {
      padding: 0.5rem 1rem 2rem 1rem;
   }

   body > footer {
      display: flex;

      margin-top: 0;
      padding: 0;

      flex-direction: column;
      text-align: center;
   }

   body > footer h2 {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      align-self: unset;
   }

   body > footer address {
      justify-content: center;
      text-align: left;
   }

   body > footer .logo {
      order: 100;
      margin-top: 1rem;
   }

   body > footer .copyright {
      order: 101;
      text-align: left;
      margin: auto;
   }
}
paged-wizard {
   display: flex;
   position: relative;

   flex-direction: column;
   gap: 1rem;
}

paged-wizard .crumb-line {
   display: flex;

   margin: 0;

   /*box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);*/

   border: 3px solid var(--brand3);
   border-radius: 0.5rem;

   flex-direction: row;
   padding: 0;
   overflow: hidden;

   user-select: none;
}

paged-wizard .crumb-line .crumb {
   position: relative;

   --crumb-vpad: 0.5rem;
   --crumb-lh: 1.1rem;

   display: flex;
   justify-content: center;
   align-items: center;

   width: 100%;

   /* the rare case when it's actually useful! */
   box-sizing: content-box;
   padding: 0; /* padding is handled by the crummary */
   background-color: var(--neutral3);

   white-space: nowrap;
   line-height: var(--crumb-lh);
   text-transform: capitalize;

   transition: all 150ms ease-out;
}

/* diamond shape to create chevron */
paged-wizard .crumb-line .crumb:after {
   position: absolute;

   box-sizing: border-box;

   display: inline-block;

   z-index: 1;
   transform: scalex(0.5) rotate(45deg);

   /* 0.707... is the ratio for 1 square's side to get hypotenuse = 1 */
   --hyp-ratio: 0.707;
   --radius: 1px;

   /* 1rem line height + 2*0.25rem element y-padding */
   --nlines: 2;
   --size: calc((calc(var(--crumb-lh) * var(--nlines)) + 2 * var(--crumb-vpad)) * var(--hyp-ratio) + var(--radius) * 0.5 + 4px);

   height: var(--size);
   width: var(--size);
   right: calc(var(--size) * -0.5);

   border-width: 3px;
   border-color: var(--brand3) var(--brand3) transparent transparent;
   border-style: solid;
   border-radius: var(--radius);
   background-color: inherit;

   content: '';
}

paged-wizard .crumb-line .current {
   background-color: var(--brand3);

   color: var(--neutral3);
}

paged-wizard .crumb-line .expected {
   /*opacity: 0.2;*/
}

paged-wizard .crumb-line .crumb:last-of-type:after {
   display: none;
}

paged-wizard .crummary {
   display: inline-block;

   max-width: 20vw;
   min-height: auto;
   min-width: auto;
   border-radius: 0;
   width: 100%;
   height: 100%;

   box-shadow: none;
   padding: var(--crumb-vpad) 1rem;
   background-color: inherit;

   color: inherit;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

paged-wizard .crumb + .crumb .crummary {
   padding-left: 1.5rem;
}

paged-wizard .crummary:disabled {
   filter: none;
   opacity: 0.2;
}

paged-wizard .current .crummary:disabled {
   opacity: initial;
}

paged-wizard .main-panel {
   width: 100%;
   height: 100%;
   min-height: 20rem;

   overflow: hidden;

   text-align: center;
}

paged-wizard .main-panel .page {
   position: relative;

   height: 0;
   opacity: 0;

   padding: 0 0.25rem;

   visibility: hidden;

   right: -150%;
}

paged-wizard .main-panel .page {
   --slide-duration: 0.3s;

   --transit-opacity: opacity var(--slide-duration) ease-out;
   --transit-right: right var(--slide-duration) ease-out;

   transition: var(--transit-opacity), var(--transit-right), visibility 0s ease-out var(--slide-duration);
}

paged-wizard .main-panel .page.back {
   right: 150%;

   transition: var(--transit-opacity), var(--transit-right), visibility 0s linear var(--slide-duration);
}

paged-wizard .main-panel .page.current {
   height: 100%;
   opacity: 1;
   right: 0;
   visibility: visible;

   transition: var(--transit-opacity), var(--transit-right), visibility 0s linear 0s;
}

paged-wizard .main-panel .page-header {
   margin-bottom: 0.5em;
}

paged-wizard .controls {
   display: flex;

   gap: 1.5rem;

   flex-direction: row;
   justify-content: center;
}

paged-wizard .controls button {
   min-width: 6em;
}

paged-wizard .controls button:enabled {
   background-color: var(--brand1);

   color: var(--neutral1);
}

paged-wizard .controls .back:disabled {
   opacity: 0;
}

paged-wizard .controls .back .icon {
   font-size: larger;
}

paged-wizard .controls .next .icon {
   font-size: larger;
}

paged-wizard .controls .final:after {
   content: '';
   margin: 0;
}

/* Desktop */
@media (max-width: 1023px) {
   paged-wizard .main-panel {
      min-height: 32rem;
   }
}

/* Mobile */
@media (max-width: 1023px) {
   paged-wizard .crumb-line {
      overflow: scroll hidden;
      scroll-snap-type: x proximity;
      max-width: 90vw;
      scroll-snap-align: end end;
   }

   paged-wizard .crummary {
      max-width: 66vw;
   }

   paged-wizard .main-panel .page.current {
      padding: 0 0.1em;
   }

   paged-wizard .controls input {
      font-size: 1.1em;
   }
}
pane-toolbar {
   display: block;
}

pane-toolbar .toolbar-buttons {
   display: flex;
   flex-direction: column;
   
   user-select: none;
}

pane-toolbar label {
   width: auto;
}

pane-toolbar label input[type="radio"] {
   display: none;
}

pane-toolbar label input:checked + .label {
   border-color: var(--brand1);
   
   background-color: var(--brand1);
   color: var(--neutral1);
}

pane-toolbar label input:checked + .label:hover {
   background-color: var(--brand1);
}

pane-toolbar label .icon {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

pane-toolbar button,
pane-toolbar label {
   display: block;
   
   margin: 0;
   
   border: none;
   
   background: none;
   
   font-size: 14px;
   
   cursor: pointer;
}

pane-toolbar button:hover,
pane-toolbar label:hover {
   background: rgba(255, 255, 255, 0.6);
}

pane-toolbar button,
pane-toolbar label .icon {
   min-width: 2em;
   min-height: 2em;
   
   padding: 0.25em;
}

pane-toolbar .toolbar-button {
   display: flex;
   flex-direction: row;
}

pane-toolbar .toolbar-button .label {
   display: flex;
   flex-direction: row;
   
   align-items: center;
}
.fat-radio {
   gap: 0.5rem;
}

.fat-radio label {
   margin: 0;
   align-self: auto;
   width: 100%;
}

.fat-radio input + span {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

   border: none;
   border-radius: 0.25em;
   width: 100%;

   align-items: center;
   /* buttons are centered, but this is a (radio) list, so flex-start is better */
   justify-content: flex-start;
   padding: 0.5rem;
   background-color: var(--neutral2-dark);
   /*background-color: var(--brand2);*/
   cursor: pointer;
   user-select: none;

   color: var(--brand2);
   /*color: var(--neutral2);*/
   text-decoration: none;
   text-align: left;

   transition: all ease-out 150ms;
}

.fat-radio input + span:before,
.fat-radio input + span:after {
   content: none;
}

/* Desktop */
@media (min-width: 1024px) {
   /*
    * hover only on desktop because some mobile situations trigger hover with click,
    * causing a sort of pointless flicker
    */
   .fat-radio input + span:hover {
      background-color: var(--brand3);
      color: var(--neutral3);
      text-decoration: none;
   }
}

.fat-radio span:active {
   /*box-shadow: 1px 1px 1px lighten($color2, 50%);*/
}

.fat-radio span:disabled {
   color: grey;
   background-color: lightgrey;
   text-shadow: 0 1px 0 white;
}

/* Mobile */
@media (max-width: 1023px) {
   .fat-radio span {
      /* Needed for iOS bug that prevents clicks
       * https://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser
       */
      pointer-events: none;
   }
}

.fat-radio input[type=radio] {
   display: none;
}

.fat-radio input[type=radio]:checked + span {
   background-color: var(--brand1);
   color: white;
}

.fat-radio input[type=radio]:disabled + span {
   pointer-events: none;

   border: none;

   background-color: grey;
   color: lightgrey;
}

/* FontAwesome */
.fat-radio input:checked + span .fa-solid,
.fat-radio input + span:hover .fa-solid {
   color: var(--neutral1);
}
sign-in {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: stretch;
   align-items: center;
   gap: 2rem;
}

sign-in form {
   flex-direction: column;
   gap: 0.5rem;
}

sign-in .remember {
   flex-direction: row;
   align-items: center;
}

sign-in input-password input {
   border-right: none;
}

sign-in input-password input:focus {
   box-shadow: none;
}

sign-in input-password .show-pw {
   margin: 0; /* safari adds a 1px margin */

   border-style: inset;
   border-left: none;

   background-color: transparent;
   color: currentColor;
}

sign-in input-password button .fa-solid {
   opacity: 0.9;
}

sign-in button[type=submit] {
   margin-top: 1rem;
}

sign-in .links {
   border-top: 1px solid var(--neutral2);
   padding: 2rem;
   flex-direction: column;
   gap: 1.5rem;
}

sign-in label,
sign-in input {
   width: 100%;
}

@media (max-width: 1023px) {
   sign-in {
      justify-content: center;
   }

   sign-in form,
   sign-in .links {
      flex-grow: 1;
   }

   sign-in .links {
      margin: 2rem 0 1rem 0;
      padding: 0;
   }
}
appointment-booker {
   display: flex;
   width: 100%;

   flex-direction: column;
   gap: 1rem;
}

appointment-booker * {
   transition: opacity 0.25s ease-in-out 0.1s;
}

appointment-booker form {
   width: 100%;
}

appointment-booker .hidden-warning {
   margin: 0.25rem;

   border: 2px solid gold;

   padding: 0.5rem;

   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;

   background-color: #ffb812;

   font-size: large;
   text-align: center;
   font-weight: bold;
}

appointment-booker .hidden-warning .fa-solid {
   color: currentColor;
}

appointment-booker .banner {
   display: flex;

   flex-direction: row;
   justify-content: center;

   margin: 0.25em 0;

   border-radius: 0 1rem;

   padding: 0.5rem;

   background-color: var(--brand2);
   color: var(--neutral2);

   text-align: center;
}

appointment-booker .banner a {
   font-style: normal;
   color: var(--neutral1);
}

appointment-booker .crummary .question {
   display: block;
   font-size: small;
   opacity: 0.7;
}

appointment-booker .crummary:not(:has(.answer)) .question {
   font-size: medium;
   opacity: 1;
}

appointment-booker .location-name {
   margin-bottom: 0.5rem;
}

appointment-booker .location-name .location {
   margin: 0;

   flex-direction: row;
   align-items: center;
   grid-gap: 0.25rem;
}

appointment-booker .datetime {
   padding-bottom: 0.25rem;
}

appointment-booker .person {
   display: flex;

   grid-gap: 2rem;

   flex-direction: row;
   justify-content: space-around;
}

appointment-booker .person > div {
   position: relative;

   flex-basis: 50%;
   min-height: 25rem;

   gap: 0.5rem;
}


appointment-booker .person .register fieldset.wrapper {
   margin: 0;
   border: none;
   padding: 0;
}

appointment-booker .person .fat-radio label {
   font-size: 1.5rem;
}

appointment-booker .person > div > label span {
   text-align: center;
}

appointment-booker .person > div > label input[type="radio"]:checked + span {
   background-color: var(--brand1);
   color: var(--neutral1);
}

appointment-booker .person > div details summary {
   display: none;
}

appointment-booker .person > div details + .watermark {
   max-width: 100%;

   opacity: 0.4;
}

appointment-booker .person > div details[open] + .watermark {
   display: none;
}

appointment-booker .person form {
   min-height: 25rem;

   background-color: white;
}

appointment-booker .person .watermark {
   position: absolute;

   left: 25%;
   top: 33%;
   width: 50%;
}

appointment-booker .person .signin {
   display: flex;
   position: relative;

   flex-direction: column;
}

appointment-booker .person .signin fieldset {
   text-align: left;
}

appointment-booker .person .signin fieldset legend {
   padding: 0.25rem;

   font-size: 1.1rem;
}

appointment-booker .person .signin label:last-of-type {
   flex-direction: row;
   align-items: center;
}

appointment-booker .person .signin sign-in label {
   min-width: 5rem;
}

appointment-booker .page.location .radio-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr) );
   column-gap: 1rem;
}

appointment-booker .page.location label {
   /*white-space: nowrap;*/
}

appointment-booker .page.location fieldset {
   border: none;
   padding-inline: 0;
   padding-top: 0;
}

appointment-booker .page.location legend {
   display: none;
}

appointment-booker .page.covid-confirm,
appointment-booker .page.degree {
   margin: 0 auto;

   max-width: var(--max-text-width);
   text-align: left;
}

appointment-booker .covid-confirm label {
   flex-direction: row;
   align-items: baseline;
}

appointment-booker .covid-confirm input {
   margin-top: 0.2rem;
   margin-inline-end: 0.5rem;
}

@media (max-width: 1023px) {
   appointment-booker .location-name {
      margin-bottom: 1rem;
   }

   appointment-booker .location-name .location {
      margin-left: auto;
      margin-right: auto;

      flex-wrap: wrap;
      justify-content: center;
   }

   appointment-booker .location-name .location select {
      max-width: 60vw;
   }

   appointment-booker .crumb-line {
      margin-left: auto;
      margin-right: auto;
   }

   /* takes too much room */
   appointment-booker .crummary .question {
      display: none;
   }

   appointment-booker .datetime .date {
      padding-bottom: 1rem;
      border-bottom: 1px dotted grey;
   }

   appointment-booker .person {
      flex-direction: column-reverse;
      min-height: auto;
   }

   appointment-booker .person > div {
      min-height: auto;
   }

   appointment-booker .person form {
      min-height: auto;
   }

   appointment-booker .person .signin form:after {
      content: '\2014\2002or\2002\2014';

      display: block;
      text-align: center;

      padding-bottom: 1rem;
   }

   appointment-booker .person .watermark {
      display: none;
   }
}
photo-session-details {
   display: flex;
   flex-direction: column;

   box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.33);
   padding: 0.75em;
   background-color: white;
}

photo-session-details .when .date {
   display: block;

   font-size: x-large;
   font-weight: bold;
}

photo-session-details .detail > header {
   margin-top: 0.5em;
   margin-bottom: 0.25em;

   opacity: 0.5;

   border-bottom: 1px solid grey;

   padding-bottom: 0.25em;
   flex-direction: row;
   grid-gap: 0.25rem;
   align-items: center;

   font-size: 1em;
}

photo-session-details .detail.instructions {
   margin: 0;
   text-align: left;
}

photo-session-details .instructions-part,
photo-session-details .instructions-part div {
   display: block;

   /* Needed when dynamic instructions content is really wide */
   max-width: 80ch;
}

photo-session-details .why .purpose-list {
   /*min-height: 4em;*/

   padding: 0 0.25em;
}

photo-session-details .why .purpose-part {
   flex-direction: row;
}

photo-session-details .why .purpose-part:before {
   margin-right: 0.25em;
   margin-top: -0.25rem;

   content: '\2192';
}

photo-session-details .why .purpose-part:first-of-type:before {
   content: none;
}

photo-session-details .when {
   text-align: center;
   font-size: larger;
}

photo-session-details > div {
   gap: 1rem;
}

photo-session-details > div > .controls {
   flex-direction: row;
   justify-content: space-evenly;
   gap: 2rem;
}

photo-session-details .past button.cancel {
   visibility: hidden;
}

@media (max-width: calc(1024px - 1px)) {
   photo-session-details .when {
      font-size: larger;
   }

   photo-session-details {
      text-align: justify;
   }
}
appointment-purpose-selector {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

   grid-gap: 1rem;
}

appointment-purpose-selector .details {
   position: relative;
}

appointment-purpose-selector .details .img-container {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;

   display: flex;
   flex-direction: column;
   align-items: center;

   margin: 0 auto;

   max-width: 80%;

   border-radius: 0.25rem;

   opacity: 0;
}

appointment-purpose-selector .details .img-container .description {
   display: flex;
   flex-direction: column;
   align-content: space-evenly;
   justify-content: center;

   padding: 0.75rem;
}

appointment-purpose-selector .details .img-container img {
   max-width: 100%;
   max-height: 100%;

   vertical-align: bottom;
}

appointment-purpose-selector .details .img-container .splat {
   display: block;

   font-size: 0.8rem;
   color: var(--neutral3);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);

   background-color: var(--brand3);

   position: relative;
   z-index: 5;
   width: 66%;
   left: 0;
   right: 0;
   margin: auto;
   border-radius: 1rem;
   padding: 0.5rem 0.25rem;

   /* These settings turn it into a top-right circle sticker */
   /*
   top: -2.5em;
   right: -3em;
   transform: rotate(-25deg);
   width: 10em;
   height: 10em;
   border-radius: 100%;
   padding: 1.5em;
   background-color: var(--brand3);
   text-align: center;
   */
}

appointment-purpose-selector .details .default {
   height: 100%;
}

appointment-purpose-selector .details .with-text.current,
appointment-purpose-selector .details .current {
   opacity: 1;
}

appointment-purpose-selector .details .default.current {
   opacity: 0.8;
}

appointment-purpose-selector .details .default.current img {
   opacity: 0.2;
}

/* desktop */
@media (min-width: 1024px) {
   appointment-purpose-selector .list,
   appointment-purpose-selector .details {
      flex-basis: calc(50% - 0.5rem);
   }

   appointment-purpose-selector .details {
      /* hard coding a height because images are absolute positioned
         might be able to make it use flex in the future */
      --details-height: 25rem;

      min-height: var(--details-height);

      user-select: none;
   }

   appointment-purpose-selector .details .description {
      z-index: 1;

      margin: 2rem auto;

      min-height: 2.5rem;
   }

   appointment-purpose-selector .details .img-container {
      max-height: var(--details-height);
      max-width: var(--details-height);

      border: 1rem solid var(--brand1);
   }

   appointment-purpose-selector .details .img-container .splat {
      position: absolute;
      bottom: -1.5rem;
   }

   appointment-purpose-selector .details .default img,
   appointment-purpose-selector .details .with-text img {
      box-sizing: content-box;

      margin-bottom: 3rem;

      max-width: 60%;
   }

   appointment-purpose-selector .details .with-text {
      height: 100%;
   }

   appointment-purpose-selector .faq,
   appointment-purpose-selector .offline-only {
      flex-basis: 100%;
   }
}

/* mobile */
@media (max-width: 1023px) {
   appointment-purpose-selector {
      flex-direction: column;
   }

   appointment-purpose-selector .details {
      margin-top: 1rem;

      transition: 0.25s all;
   }

   appointment-purpose-selector .details .description {
      flex-grow: 0.5;

      min-height: 6.35rem;
   }

   appointment-purpose-selector .details .description span {
      font-size: 6vw;
   }

   appointment-purpose-selector .details .img-container {
      top: 0;
      left: 0;

      max-width: 100%;
      max-height: none;
      min-height: calc(100vw - 2.6rem); /* 88.4vw; */

      border: 1px outset rgba(0, 0, 0, 0.3);
   }

   appointment-purpose-selector .details .img-container .splat {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      min-height: 3rem;

      width: 100%;
      border-radius: 0;

      font-size: 1rem;

      /*
        images: 900 x 900
        logo    752 x 765
      
              0.835 x 0.85
              1.198 x 1.176
      */
   }

   appointment-purpose-selector .details .default img,
   appointment-purpose-selector .details .with-text img {
      max-width: 66%;
      border: none;

      margin-bottom: 1.5rem;
   }

   appointment-purpose-selector .details .default {
      position: static;
   }

   /*appointment-purpose-selector .details .default.current {*/
   /*   opacity: 0.2;*/
   /*}*/

   appointment-purpose-selector .faq {
      margin-top: 4rem;

      font-size: 1rem;
   }
}
appointment-time-selector {
   display: flex;
   grid-gap: 1rem;
   flex-wrap: wrap;
   justify-content: space-around;
}

appointment-time-selector .date {
   position: relative;
   grid-gap: 1rem;
}

appointment-time-selector .day-name {
   padding: 0.5rem 0;
   text-decoration: none;
   cursor: default;
   font-weight: bold;
}

appointment-time-selector .date-selector {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: auto;
   gap: 0;
}

appointment-time-selector .month-selector {
   flex-direction: row;
   grid-gap: 1rem 2rem;
   justify-content: space-between;
   flex-wrap: wrap;
}

appointment-time-selector .month-selector .month {
   margin: 0;
   height: 100%;
   flex-direction: row;
   justify-content: flex-end;
}

appointment-time-selector .month-selector .next-prev {
   flex-direction: row;
   grid-gap: 1rem;
}

appointment-time-selector .month-selector input[type=number] {
   width: 4.5rem;
}

appointment-time-selector .today-jumper {
   flex-grow: 1;
}

appointment-time-selector .date-selector label {
   margin: 0;
}

appointment-time-selector .fat-radio input + span {
   display: flex;
   justify-content: center;
   min-height: 3rem;
}

appointment-time-selector .fat-radio input:disabled + span {
   opacity: 0.3;
}

appointment-time-selector .date-option span {
   box-shadow: none;
   border-radius: 0.1rem;
   /*border-color: var(--brand3-light); !*rgba(0,0,0,0.1);*!*/
   /*border-style: dotted;*/
   /*border-width: 1px;*/
   /*border: 1px solid var(--neutral2);*/
}

/* need fat-radio selector to win the specificity */
appointment-time-selector .fat-radio .date-option input[type=radio] + span {
   border: 0.25rem solid transparent; /* default to keep the spacing the same */
}

appointment-time-selector .date-option.today input[type=radio] + span {
   border-color: var(--brand3);
}

appointment-time-selector .date-option.extra-avail :is(input[type=radio] + span, .exemplar)
   /*,*/
   /*appointment-time-selector .booking-window-notice.call-out */
{
   --size: 0.5rem;
   --color: var(--brand1);
   border-image: linear-gradient(225deg, var(--color), var(--color) var(--size), rgba(0, 0, 0, 0.5) calc(var(--size) + 1px), transparent calc(var(--size) + 2px));
   /* somewhat of a magic number. causes it to render as dog-ear corner highlight inside border */
   border-image-slice: 0 fill;
}

appointment-time-selector .call-out .date-option.extra-avail {
   display: flex;
   margin-inline: 0.1rem;
   border: 2px solid var(--neutral2-dark);
   border-radius: 0.1rem;
}

appointment-time-selector .date-option.extra-avail .exemplar {
   display: inline-flex;

   min-height: 2rem;
   min-width: 2rem;
   justify-content: center;
   align-items: center;

   background-color: var(--neutral2-dark);
   color: var(--brand2);
}

appointment-time-selector .booking-window-notice {
   position: absolute;

   left: 0;
   /* top: 35%; */
   right: 0;
   bottom: 35%;
   margin: auto 3rem;

   border-radius: 0.5rem;
   opacity: 1;
   pointer-events: none;

   flex-direction: row;
   flex-wrap: wrap;
   grid-gap: 0.5ch;
   padding: 2rem;
   align-items: center;
   justify-content: center;

   background: var(--brand3);
   color: var(--neutral1);
   font-weight: bold;

   transition: opacity 0.25s ease-out;
}

appointment-time-selector .booking-window-notice.allowed {
   opacity: 0;
}

appointment-time-selector .booking-window-notice .icon {
   color: var(--neutral3);
   font-size: x-large;
   margin-inline-end: 0.33rem;
}

/* use a div to group text together. */
appointment-time-selector .booking-window-notice div {
   text-align: left;
}

appointment-time-selector .booking-window-notice.call-out {
   position: static;

   margin: 0 auto;
   padding: 0.75rem 1rem;
}

appointment-time-selector .hour > header {
   font-size: x-large;
}

appointment-time-selector .prompt,
appointment-time-selector .walk-ins {
   grid-column-end: 3 span;
}

appointment-time-selector .hour .placeholder {
   display: flex;

   padding: 0;
   justify-content: center;
   align-items: center;
}

appointment-time-selector .hour .all-hours {
   display: grid;

   padding-bottom: 0.5rem;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-flow: column;
   column-gap: 1rem;
   grid-template-areas: "morning midday afternoon";
   align-items: center;
}

appointment-time-selector .hour .prompt {
   display: block;
   font-style: italic;
}

appointment-time-selector .hour > .walk-ins {
   width: auto;

   border: 3px solid var(--brand1);

   padding: 0.5rem 1rem;

   animation-name: 'expand-highlight';
   animation-duration: 200ms;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;

   white-space: nowrap;
   font-weight: bold;
   color: var(--brand1);
}

appointment-time-selector .all-hours header {
   grid-row: 1;

   font-size: small;
}

appointment-time-selector .all-hours .hour-slot {
   white-space: nowrap;
}

appointment-time-selector .all-hours .morning {
   grid-column: morning;
}

appointment-time-selector .all-hours .midday {
   grid-column: midday;
}

appointment-time-selector .all-hours .afternoon {
   grid-column: afternoon;
}

/* desktop */
@media (min-width: 1024px) {
   appointment-time-selector dialog-busy .overlay {
      top: 2.75em;
      bottom: 0.1em;
      left: 1em;
      right: 1em;
      height: auto;
      width: auto;
   }

   appointment-time-selector .date,
   appointment-time-selector .hour {
      min-width: 45%;
   }
}

/* mobile */
@media (max-width: 1023px) {
   appointment-time-selector dialog-busy .overlay {
      position: fixed;
   }

   appointment-time-selector .next-prev {
      justify-content: space-between;
      flex-grow: 1;
   }

   appointment-time-selector .month-selector {
      justify-content: center;
   }

   appointment-time-selector .month-selector .month {
      height: auto;
   }
}
degree-chooser {
   display: grid;
   grid-template-columns: auto auto;
   justify-content: start;
}

degree-chooser div header {
   display: block;

   margin-top: 1rem;
   margin-bottom: 0.5rem;

   font-size: 1.25rem;

   text-align: left;
}

degree-chooser div.program header {
   color: lightgrey;

   transition: all 0.2s ease-in;
}

degree-chooser div.program.expanded header {
   color: var(--brand2);
}

/* mobile */
@media (max-width: 1023px) {
   degree-chooser {
      display: flex;
      flex-direction: column;
   }

   degree-chooser .fat-radio {
      display: flex;
   }

   degree-chooser .drop-down {
      display: none;
   }

   degree-chooser fieldset legend {
      border-bottom: none;
      padding-bottom: 0;
   }

   degree-chooser div.program .fat-radio {
      max-height: 0;

      overflow: hidden;

      transition: all 0.3s ease-in-out;
   }

   degree-chooser .program.expanded .fat-radio {
      /* TODO: this was set to 100em because the grow animation needs a real value, but
       * TODO: the real list can get bigger than that.
       * TODO: It might become irrelevant when full purpose change is complete
       */
      max-height: none;
      overflow: visible;
   }
}

/* desktop */
@media (min-width: 1024px) {
   degree-chooser div {
      margin-right: 1em;
   }

   degree-chooser div > div,
   degree-chooser fieldset {
      display: none;
   }

   degree-chooser div > select {
      border-radius: 0.25em;

      padding: 0.5em;
   }

   degree-chooser div > select.selected {
      background-color: var(--brand1);
      color: var(--neutral1);
   }

   degree-chooser div > select option {
      background-color: var(--brand3);
      color: var(--neutral3);
   }
}
account-creator {
   display: flex;

   flex-direction: column;
}

account-creator marketing-questionnaire {
   display: none;
}

account-creator degree-chooser {
   display: flex;
   flex-direction: column;
}

@media (max-width: 1023px) {
   /* mobile rules here */
}
sign-up {
   display: block;

   text-align: left;
}

sign-up fieldset.privacy span {
   display: block;
}

sign-up .placeholder {
   padding: 0;
}

/* desktop */
@media (min-width: 1024px) {
   sign-up fieldset > span {
      display: block;
   }
}
marketing-questionnaire {
   display: flex;
}

marketing-questionnaire input-radiolist {
   flex-grow: 1;
}

marketing-questionnaire label span {
   display: flex;

   align-items: center;
   column-gap: inherit;
   flex-wrap: wrap;
}
user-photo-sessions {
   display: flex;

   width: 100%;
   padding: 2rem;
   flex-direction: column;
}

user-photo-sessions > header {
   display: block;

   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
   margin-bottom: 1em;

   padding-bottom: 0.5em;

   font-size: 1.5em;
   text-align: center;
}

user-photo-sessions .confirmation-prompt {
   margin: 1rem 0;

   border: 0.25rem solid var(--error);

   padding: 0.5rem 1rem;

   align-items: center;
   /*background-color: var(--neutral2);*/

   color: var(--brand2);
}

user-photo-sessions .confirmation-prompt .fa-solid {
   color: var(--error);
}

user-photo-sessions .confirmation-prompt header {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);

   padding: 0.75rem 2rem;
   flex-direction: row;
   grid-gap: 0.5rem;
   justify-content: center;
   align-items: center;

   font-size: 1.1rem;
   font-weight: bold;
   color: var(--error);
}

user-photo-sessions .photo-sessions-list {
   display: grid;
   grid-template-columns: repeat( auto-fill, minmax(20vw, 1fr) );
   grid-gap: 1.5rem;
   align-items: flex-start;
}

user-photo-sessions.past-photo-sessions button.cancel {
   visibility: hidden;
}

/* mobile */
@media (max-width: 1023px) {
   user-photo-sessions {
      padding: 0;
   }

   user-photo-sessions .photo-sessions-list {
      display: flex;
      flex-direction: column;
   }

   user-photo-sessions photo-session-details {
      display: block;

      margin-left: auto;
      margin-right: auto;

      width: 100%;

      box-shadow: 0 -5px 9px 0 rgba(0, 0, 0, 0.15);
      padding: 1em;
   }
}
user-editor {
   display: flex;
   flex-direction: column;
}

user-editor .controls {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   grid-gap: 1rem;
}

user-editor .controls > * {
   margin: auto 0;
}

user-editor .controls input {
   margin: 0 2rem;
}

user-editor user-contact-editor,
user-editor user-privacy-editor,
user-editor user-address-editor {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

user-editor user-contact-editor {
   display: grid;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
}

user-editor user-contact-editor label {
   grid-column: 1;
}

user-editor user-contact-editor .confirmation-date {
   opacity: 0.6;
   grid-column: 2;

   margin-left: 0.5rem;
}

user-editor .degree div {
   display: inline-block;

   padding: 0 1rem;
}

user-editor .identity-verification {
   border-top: 1px dotted var(--brand2);
   border-bottom: 1px dotted var(--brand2);

   padding: 1rem;
}

user-editor .identity-verification p {
   margin-top: 0;
}
user-contact-editor {
   display: flex;

   flex-direction: column;
   gap: 0.3rem;
}

user-contact-editor .name {
   flex-direction: row;
   column-gap: 1rem;
   flex-wrap: wrap;
}

user-contact-editor .name label {
   flex-grow: 1;
}

user-contact-editor .name input {
   width: 100%;
}

user-contact-editor > label {
   width: 100%;
   align-items: normal;
}

user-contact-editor input-radiolist {
   grid-column: 1;
}

user-contact-editor .reminder-preference {
   border: none;

   padding-inline: 0;
}

user-contact-editor .reminder-preference legend {
   padding-inline: 0;

   font-size: inherit;
}
user-privacy-editor {
   flex-direction: row;
}

user-privacy-editor label {
   margin: 0;

   flex-direction: row;
   align-items: center;
}

user-privacy-editor p:first-of-type {
   margin: 0 0 0.5rem 0;
}

/* hide the nested fieldset */
user-privacy-editor fieldset {
   margin: 0;
   border: none;
   padding: 0;
}

user-privacy-editor legend {
   display: none;
}

/* mobile */
@media (max-width: 1023px) {
   user-privacy-editor input-radiolist .radio-list {
      flex-direction: row;
      gap: 1.5rem;
   }
}
user-session {
   display: flex;
   align-items: center;
   flex-wrap: wrap;

   padding: 0.5rem;

   grid-gap: 0.5rem;
}

user-session .user-info {
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   grid-gap: 0.5rem;
}

body > header user-session a {
   margin: auto;
   padding: 0;
}
account-confirmer {
   position: relative;

   display: flex;

   margin-top: 2rem;

   flex-direction: column;
   flex-grow: 1;
   width: 100%;
   height: 100%;
   min-height: max(33vh, 20rem);
}

account-confirmer dialog-busy > .frame {
   position: static;
}

@media (max-width: 1023px) {
   /* mobile rules here */
}
session-sheet {
   display: block; /* must be block for printing to page break correctly */

   max-height: 100vw;
   max-width: 70rem;
}

session-sheet header {
   display: grid;
   grid-template-areas: 'title meta';
   grid-template-columns: 2fr 30%;
   align-items: center;

   gap: 2rem;
}

session-sheet header img {
   max-width: 5rem;
}

session-sheet .main {
   display: grid;

   grid-template-areas: 'details qr'
                        'details samples'
                        'details .';
   grid-template-columns: auto 30%;

   gap: 2rem;
   align-items: stretch;
   justify-content: center;
}

session-sheet .print-time time {
   white-space: nowrap;
}

session-sheet header .meta {
   grid-area: meta;

   text-align: center;
}

session-sheet header a {
   margin: auto 0;
}

session-sheet header .title-block {
   grid-area: title;

   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: left;
   gap: 1rem;
}

session-sheet header .start-time {
   font-weight: bold;
}

session-sheet header .print-time {
   font-size: small;
   opacity: 0.8;
}

session-sheet article {
   gap: 2rem;
}

session-sheet .details {
   grid-area: details;

   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

   min-width: 10rem;
   height: fit-content;

   gap: 2rem;
}

session-sheet .detail h2 {
   order: 2;

   opacity: 0.6;
   border-top: 1px solid grey;

   font-size: large;
}

session-sheet .detail p {
   margin: 0 0 0.25rem 0;
   max-width: 32ch;
   font-size: xx-large;
}

session-sheet .phone p,
session-sheet .email p {
   font-size: x-large;
   word-break: break-all;
}

session-sheet .phone p {
   /* North America is often 14 chars wide (C-AAA-NXX-XXXX) */
   min-width: 14ch;
}

/*
session-sheet .detail .colour-pip {
   display: inline-block;
   border-radius: 30%;
   width: 0.75em;
   height: 0.75em;
}
*/

session-sheet .name {
   flex-direction: row;
   flex-basis: 100%;
   gap: 1rem;
}

session-sheet .first-name,
session-sheet .last-name,
session-sheet .purpose,
session-sheet .degree {
   flex-grow: 1;
}

/* TODO: remove when degrees become purposes */
session-sheet .degree p span:not(:last-of-type):after {
   content: '; ';
}

session-sheet .purpose {
   flex-basis: 100%;
}

session-sheet .email {
   flex-grow: 2;
}

session-sheet .publicity-consent {
   margin-inline: auto;

   grid-area: samples;
}

session-sheet .publicity-consent p {
   text-align: center;
}

session-sheet .publicity-consent abbr {
   text-decoration: none;
}

session-sheet .fa-x {
   color: red;
}

session-sheet figure {
   grid-area: qr;

   margin: 0;

   width: 100%;
   max-width: none;

   min-width: 30%;
   gap: 0.5rem;
}

session-sheet figure img {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
}

session-sheet .qr-code {
   height: 100%;
}

session-sheet figcaption {
   font-size: x-large;
   overflow-x: hidden;
   text-overflow: ellipsis;
   /* prevents it from adding interior scrollbar */
   height: 1.2lh;
}

:root {
   /* 5x4 cards */
   /*
   --print-width: 127mm;
   --print-height: 102mm;
   */

   /*--bleed: 0.5cm;*/
   --bleed: 0.5in;

   /* half-letter */
   --print-width: 216mm;
   --print-height: 140mm;

   /* half-letter */
   /*--print-width: 100%;
   --print-height: 100%;*/
}

@page {
   /*margin: 1cm;*/
   /* approx 5in x 4in */
   /*size: 127mm 102mm;*/
   /*page-orientation: landscape;*/
   /* approx half-letter 8.5x5.5 */
   /*size: 216mm 140mm;*/
   /*size: 8.5in 5.5in;*/
}

@media screen {
   session-sheet {
      padding-block: 1rem;
   }
}

/* mobile view is intended to prioritize holding a phone up to do the QR photo */
@media screen and (max-width: 1023px) and (orientation: portrait) {
   html, body {
      padding: 0;
      scroll-snap-type: block mandatory;
   }

   body > header {
      min-height: 0;
      /*scroll-margin-block-start: 4rem;*/
      scroll-snap-align: start;
   }

   body > main {
      scroll-snap-align: start;
      scroll-snap-stop: always;
   }

   session-sheet {
      max-height: none;

      padding: 0;
   }

   session-sheet header {
      display: flex;
      flex-direction: column-reverse;
      gap: 1rem;
   }

   session-sheet :is(article, .main, .details) {
      gap: 1rem;
   }

   session-sheet .main {
      display: flex;
      flex-direction: column;
   }

   session-sheet .qr {
      order: 1;
   }

   session-sheet .details {
      order: 3;
   }

   session-sheet .details .name {
      order: 1;
   }

   session-sheet .details .purpose {
      order: 2;
   }

   session-sheet .details .degree {
      order: 3;
   }

   session-sheet .details .email {
      order: 4;
   }

   session-sheet .details .phone {
      order: 5;
   }

   session-sheet .publicity-consent {
      font-size: large;
      order: 2;
      flex-direction: row;
      gap: 0.25rem;
   }

   session-sheet .publicity-consent h2 {
      border: none;
      order: unset;
   }

   session-sheet .publicity-consent p {
      margin: 0;
      font-size: inherit;
   }
}

/* Using important in many of these because it's overridden later by non-print rules and
 * it is critical to not overflow printing */
@media print {
   html {
      /*margin: var(--bleed) !important;*/
      margin: auto;
   }

   body {
      margin: 0 !important;
   }

   body > header {
      display: none;
   }

   html, body {
      padding: 0 !important;

      min-width: 0 !important;
      min-height: 0 !important;
      max-width: calc(var(--print-width) - calc(var(--bleed) * 2));
      max-height: calc(var(--print-height) - calc(var(--bleed) * 2));
      width: 100%;
      height: 100%;

      /* ditch the page background */
      background: unset;

      font-size: 13pt;
   }

   session-sheet ~ session-sheet {
      break-before: page;
   }

   session-sheet article {
      gap: 0.5rem;
   }

   session-sheet header {
      min-height: auto !important;
      gap: 0.5rem;
   }

   session-sheet header .logo img {
      max-height: 3rem;
   }

   session-sheet .main {
      margin: auto !important;

      grid-template-areas: 'details qr'
                           'details samples';

      max-width: calc(var(--print-width) * 0.9);
      max-height: calc(var(--print-height) * 0.9);
      width: 100%;
      height: 100%;

      padding: 0 !important;
      gap: 1rem !important;
      justify-content: space-around !important;
   }

   h1 {
      font-size: xx-large !important;
   }

   session-sheet .details {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.75rem;
   }

   session-sheet .detail p {
      font-size: x-large;
   }

   session-sheet .degree {
      max-width: calc(50% - 0.5rem);
   }

   session-sheet .email p,
   session-sheet .phone p,
   session-sheet .degree p {
      font-size: large;
   }

   session-sheet figure {
      max-height: calc(var(--print-height) * 0.5);
   }

   session-sheet figcaption {
      font-size: medium;
   }

   /*debug*
   .main, header, footer {
      outline: 1px solid red;
   }

   /*debug*
   div {
      outline: 1px solid purple;
      background-color: rgba(128, 0, 128, 0.2);
   }

   /*debug*/
   /**
   html {
      outline: 1px solid green;
      padding: 0;
   }

   /*debug*/
   /**
   body {
      outline: 1px solid black;
   }

   /**/
   footer {
      display: none !important;
   }
}
/******************************
 * This file is the whole page styling for session sheet(s).
 * Edit universal component styles in the component's sheet
 ******************************/

body.qr-sheet {
   /*max-height: 100vw;*/
   max-width: 70rem;
}

body.qr-sheet main {
   gap: 2rem;
}

.qr-sheet .controls {
   flex-direction: row;
   gap: 1.5rem;
   padding: 1rem;
   justify-content: flex-end;
}

@media print {
   body.qr-sheet main {
      /* display flex clobbers break-after in firefox, but that may change later
         https://bugzilla.mozilla.org/show_bug.cgi?id=1695475 */
      display: block;
   }
}

@media screen {
   /* back to back sheets should indicate separation on screens only */
   session-sheet ~ session-sheet {
      border-top: 0.1rem dotted grey;
   }
}
#account-confirmed {
   padding: 1rem;

   gap: 2rem;
}

#account-confirmed h1 {
   text-align: center;
}

#account-confirmed p {
   margin: 0;
   font-size: x-large;
   text-align: center;
}

#account-confirmed .content {
   display: flex;

   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;

   gap: 2rem;
}

#account-confirmed .confirmation {
   display: flex;

   min-width: 33%;

   flex-direction: column;
   gap: 1rem;
}

#account-confirmed .actions {
   display: flex;

   border: 1px solid var(--brand1);
   border-radius: 1rem 0 1rem 0;

   padding: 1rem;
   flex-direction: row;
   justify-content: space-around;
}

#account-confirmed a {
   display: flex;

   max-width: 6rem;

   gap: 0.5rem;
   flex-direction: column;
   align-items: center;

   text-align: center;
}

#account-confirmed .actions .icon {
   font-size: 2rem;
}

#account-confirmed picture {

}

#account-confirmed img {
   max-height: 20rem;
}
.registration-instructions {
   margin: 1rem 0;
   gap: 1rem;
   align-items: center;
   max-width: 30rem;
   text-align: center;
}

.registration-instructions p {
   margin: 0;
}
#walk-in-ready {
   padding: 1rem;

   gap: 2rem;
}

#walk-in-ready h1 {
   text-align: center;
}

#walk-in-ready .content {
   display: flex;

   flex-direction: column;
   flex-wrap: wrap;
   justify-content: center;

   gap: 2rem;
}

#walk-in-ready p {
   margin: 0;

   text-align: center;
   font-size: x-large;
}

#walk-in-ready .confirmation {
   display: flex;

   min-width: 33%;

   flex-direction: column;
   gap: 1rem;
}

#walk-in-ready picture {
   opacity: 0.1;
}

#walk-in-ready img {
   max-height: 10rem;
}
#walk-in-closed {
   padding: 1rem;

   gap: 2rem;
}

#walk-in-closed h1 {
   text-align: center;
}

#walk-in-closed .content {
   display: flex;

   flex-direction: column;
   flex-wrap: wrap;
   justify-content: center;

   gap: 2rem;
}

#walk-in-closed p {
   margin: 0;

   text-align: center;
   font-size: x-large;
}

#walk-in-closed .confirmation {
   display: flex;

   min-width: 33%;

   flex-direction: column;
   gap: 1rem;
}

#walk-in-closed picture {
   opacity: 0.1;
}

#walk-in-closed img {
   max-height: 10rem;
}
/*
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
*/
/*































 */
