/* Desktop Stylesheets */

/* NOTE: Restart the Ember server process when changing this file, or else it won't be copied to 'app/styles/app.css'
         (although the live-reload server restarts when updating this file, it won't run the copy task) */

/* shared */

/* --------------------------------------------------------------
   Reset (http://snipplr.com/view/8840/typographycss/)
-------------------------------------------------------------- */

/* TODO: might be nice to kill this reset, but could be quite some code relying on it. */

/* stylelint-disable */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1.5;
  margin: 1.5em 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: 400;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
}

blockquote,
q {
  quotes: '' '';
}

a img {
  border: none;
}

input,
textarea {
  margin: 0;
}

ul,
ol {
  list-style: none;
}

/* stylelint-enable */

/* shared variables */

:root {
  /* shadows */
  --misc-window-shadow: 0 4px 24px 4px hsl(0 0% 10% / 30%); /* heavier, used for large windows (modals etc) */
  --misc-popover-shadow: 0 4px 12px 1px hsl(0 0% 0% / 20%); /* lighter, used for smaller / less popping elements */
  --misc-tooltip-shadow: 0 4px 16px 4px hsl(0 0% 10% / 10%);
  --misc-card-shadow: 0 1px 5px 1px hsl(0 0% 10% / 5%);
  /* no shadow color specified here, */
  /* since this var will be paired with a shadow color variable for each individual element */
  --misc-form-element-shadow: 0 1px 2px 0;
  --misc-form-element-shadow-hover: 0 2px 3px 0;
}

@media (prefers-color-scheme: dark) {

:root {
    --misc-window-shadow: 0 4px 24px 4px hsl(0 0% 0% / 60%); /* heavier, used for large windows (modals etc) */
    --misc-popover-shadow: 0 4px 12px 1px hsl(0 0% 0% / 40%); /* lighter, used for smaller / less popping elements */
    --misc-tooltip-shadow: 0 4px 16px 4px hsl(0 0% 0% / 20%);
    --misc-card-shadow: 0 1px 5px 1px hsl(0 0% 0% / 15%);
}
  }

:root {

  /* outline */
  --misc-focus-outline: 2px solid var(--color-select-signature);

  /* rounding / radius */
  --misc-subtle-rounding: 0.25em; /* not sure if em is the ideal unit here, px would probably be better */
  --misc-moderate-rounding: 8px; /* rarely used, most rounding should be of the subtle type */
  --misc-heavy-rounding: 16px; /* rarely used, only used in mobile */

  /* separator */
  --misc-inline-separator: '|';

  /* arrow */
  --misc-open-arrow: polygon(50% 80%, 0 20%, 100% 20%);
  --misc-close-arrow: polygon(50% 20%, 100% 80%, 0% 80%);

  /* z-index */

  /* We use z-index values to control the stacking order of elements,
   * and should only use values defined here (to avoid conflicts).
   *
   * It's also fine to put elements relative to one of these layers, but those relative
   * placements should generally be +1 or -1 from the layer they are relative to,
   * and should be for elements that are themselves associated with one of the primary layers.
   *
   * Keep the number of z-layers to a minimum, strongly avoid adding new layers.
   *
   * Note that when two elements are on the same layer, the stacking order is determined
   * by the order in the DOM, so the element that comes last in the DOM will be on top.
   *
   * In some cases, this may be the order of the wormholes that we render into. */

  /* most content will have this z-index by default, and usually we shouldn't
   * specify this. But useful when we need to add an element slightly on top of the default layer */
  --misc-z-index-default: 0;

  /* for example report stamps and other static content */
  --misc-z-index-overlay: 10;

  /* modals and other popups that aren't part of an ongoing interaction
   * (i.e. they can themselves spawn interactive elements within them) */
  --misc-z-index-popup: 100;

  /* things where the user can only engage in one interaction at time,
   * for example search select */
  --misc-z-index-interactive: 1000;

  /* inescapable and brief information, shown above interactive elements, for example
   * tooltips, heralds or other "flashes of information". */
  --misc-z-index-flash: 10000;

  /* form specific */
  --misc-form-element-border-width: 1px;

  /* fontawesome base icon size (it's drawn on a 16x16 grid) */
  --icon-grid-size: 16px;

  /* spacing between icon and text */
  --icon-text-spacing: 0.2em;
}

/*                Mockup mileage component, with
 *                different space types highlighted.
 *
 *                The space naming and this illustration is borrowed from:
 *                https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
 *
 *               ╔═══════════════════════════════════╗
 *               ║                                   ║
 *               ║                   ┌─── Berlin     ║
 *               ║   Hannover *      │               ║
 *               ║                   │               ║
 *               ║                   │    * Leipzig  ║
 *               ║      Frankfurt ◀──┘               ║
 *               ║                                   ║
 *               ╠═══════════════════════════════════╣
 * Inset ─────┬──╬─▶                                 ║
 *            │  ║ Mileage, Berlin to Frankfurt      ║
 *            │  ║                                ◀──╬──┬──── Stack
 *            │  ║ Driving distance, 510 km. Total   ║  │
 *            │  ║ journey time was six hours. For   ║  │
 *            │  ║ this trip, there were 3 people    ║  │
 *            │  ║ in the car.                       ║  │
 *            │  ║                                ◀──╬──┤
 *            │  ║ ┌────────────┐ ┌───────────────┐  ║  │
 *            └──╬─┼▶Project 45 │ │ Cost center A │  ║  │
 *               ║ └────────────┘▲└───────────────┘  ║  │
 *               ║               └───────────────────╬──┼──── Inline
 *               ║               ◀───────────────────╬──┘
 *               ║ ┌────────────┐                    ║
 * Squish ───────╬─┼▶   Edit    │                    ║
 *               ║ └────────────┘                    ║
 *               ╚═══════════════════════════════════╝
 */

/* desktop-only variables */

/* NOTE root refers to the <html> element, which has a class for the client type (desktop/mobile) */

:root.desktop {
  /* form specific */
  --misc-form-element-vertical: 0.6rem;
  --misc-form-element-horizontal: 1rem;

  /* layout */
  /* navigation width must be wide enough for the longest word in the sidebar (currently 'Skrzynka wychodząca') */
  --layout-navigation-base-width: 230px;
  --layout-navigation-collapsed-width: 80px;
  --layout-width-boundary: 800px; /* default view limit (harder to read if they are wider) */
  --layout-width-wide: 1200px; /* wide view limit used for expense and drive form */

  /* line length for readability
   * ch is the width of the 0-glyph, but many characters aren't that wide so ~65 will roughly give us ~70 characters
   * of line width, which is good for readability. */
  --font-readable-line-length: 65ch;

  /* line-height */
  --font-line-height-base: 1.5;
  --font-line-height-short: 1.3;

  /* headings */
  --font-size-heading1: 28px; /* h1; primary page headings */
  --font-size-heading2: 22px; /* h2; page-section, form heading */
  --font-size-heading3: 18px; /* h3; modal window heading, registerable title */
  --font-size-heading4: 16px; /* h4; modal window secondary heading */

  /* text */
  --font-size-text-xlarge: 18px; /* long passages of text */
  --font-size-text-large: 16px; /* large body text and other text that we want to emphasise */
  --font-size-text: 14px; /* the base font, this is the default font size for all content */
  --font-size-text-small: 12px; /* text with low emphasis, timestamps, helpful hints and similar */

  /* others */
  --font-size-button: 14px;
  --font-size-tooltip: 14px;
  --font-size-form: 14px;
  --font-size-herald: 22px;
  --font-size-stamp: 20px;
  --font-size-stamp-secondary: 16px;
  --font-size-navigation: 10px; /* used spairly, for when text is not necessary to understand the content */

  /* spacing */
  /* space between horizontal elements */
  --space-inline-xs: 0.2rem; /* small spaces like around inline separator */
  --space-inline-s: 0.6rem; /* between buttons, links, pills and inline controls */
  --space-inline-m: 1.2rem; /* between inline control-groups, reciepts */
  --space-inline-l: 2rem;

  /* space between vertical elements */
  --space-stack-xs: 0.4rem; /* between small elements and text */
  --space-stack-s: 0.8rem; /* between elements like between data sheet entrys and controls */
  --space-stack-m: 1.2rem; /* same value as --space-inline-m, beetween blocks of element, like between control-groups */
  --space-stack-l: 1.5rem; /* larger space like between form sections, under paragraphs and lists */
  --space-stack-xl: 2rem; /* around divider component */

  /* inset square, for evenly distributed space inside an element */
  --space-inset-square-xs: 0.35rem; /* padding in forms and small space like padding for reciept indicators */
  --space-inset-square-s: 0.5rem; /* padding in tables */
  --space-inset-square-sm: 0.85rem;
  --space-inset-square-m: 1.1rem; /* most common space for padding, used for collection items */
  --space-inset-square-l: 1.5rem; /* modal toolbar and header, registerable-full */
  --space-inset-square-xl: 2rem; /* larger spaces like herald notification, empty state, geographic map */

  /* inset squish, for larger horizontal space than vertical, inside an element */
  --space-inset-squish-xs: 0.2rem 0.4rem; /* padding for thinner pills like regulation-tabulation */
  --space-inset-squish-s: 0.3rem 0.5rem; /* padding for pills, small buttons */
  --space-inset-squish-m: 0.5rem 0.9rem; /* padding for tooltips, nav-items */
  --space-inset-squish-l: 0.5rem 1rem; /* content-navigation, form input in bare */
  --space-inset-squish-xl: 0.6rem 1rem; /* padding for buttons */
}

/* mobile-only variables */

:root.mobile {
  /* form specific */
  --misc-form-element-vertical: 0.9rem;
  --misc-form-element-horizontal: 1.2rem;

  /* line-height */
  --font-line-height-base: 1.5;
  --font-line-height-short: 1.3;

  /* headings */
  --font-size-heading1: 20px; /* h1, h2, h3; primary headings and modal window headings */
  --font-size-heading2: 18px; /* h4; */

  /* text */
  --font-size-text-large: 18px;
  --font-size-text: 16px; /* the base font, this is the default font size for all content */
  --font-size-text-small: 14px;
  --font-size-text-xsmall: 12px;

  /* form */
  --font-size-form: 16px;
  --font-size-form-label: 14px;

  /* headers */
  --font-size-header: 18px;

  /* others */
  --font-size-button: 18px; /* button and links */
  --font-size-herald: 18px;
  --font-size-navigation: 10px; /* used spairly, for when text is not necessary to understand the content */
  --width-nav-menu: 290px;

  /* spacing */
  /* space between horizontal elements */
  --space-inline-xs: 0.3rem; /* small spaces like around inline separator */
  --space-inline-s: 0.6rem; /* between buttons, links and inline controls */
  --space-inline-m: 1.2rem; /* between reciepts */
  --space-inline-l: 2rem;

  /* space between vertical elements */
  --space-stack-xs: 0.4rem; /* around small elements and text */
  --space-stack-s: 0.8rem; /* between elements like between data sheet entrys and controls */
  --space-stack-m: 1.2rem; /* same value as --space-inline-m, spaces beetween blocks of element like control-groups */
  --space-stack-l: 1.5rem; /* larger space like between sections around divider component */
  --space-stack-xl: 2rem;

  /* inset square, for evenly distributed space inside an element */
  --space-inset-square-xs: 0.35rem; /* small space like padding for count badge */
  --space-inset-square-s: 0.5rem; /* padding for form input */
  --space-inset-square-sm: 0.85rem; /* used for modals */
  --space-inset-square-m: 1.1rem; /* most common space, used for cards in mobile */
  --space-inset-square-l: 1.5rem;
  --space-inset-square-xl: 2rem; /* larger spaces like herald notification, empty state, geographic map */

  /* inset squish, for larger horizontal space than vertical, inside an element */
  --space-inset-squish-xs: 0.2rem 0.4rem;
  --space-inset-squish-s: 0.3rem 0.5rem; /* used for registerable-count */
  --space-inset-squish-m: 0.4rem 1rem;
  --space-inset-squish-l: 0.5rem 1rem; /* used for small buttons, navigation pills, collection */
  --space-inset-squish-xl: 0.9rem 1.2rem; /* large buttons */
}

/* Colors
 *
 * HSL-components are exposed, for where we'd like to keep hue/sat/light consistency
 * but with some of the other components different. */

:root {
  /* brand color */
  --color-brand-hue: 135;
  --color-brand-primary: hsl(var(--color-brand-hue) 50% 30%); /* logotype and other brand details */

  /* background colors */
  --color-bg: hsl(0 0% 100%); /* general background color */
  --color-bg-contour: hsl(28 6% 90%); /* lines, separators and arrows */
  --color-bg-deep: hsl(28 35% 98%);
  --color-bg-deep-border: hsl(28 40% 90%);
  --color-bg-container: hsl(28 2% 96%); /* containers such as code-example, action pills, info-boxes */
  --color-bg-container-discreet: hsl(0 0% 98%);
  --color-bg-container-evident: hsl(0 0% 87%);
  --color-bg-hover: hsl(28 20% 98%); /* when hovering over a line in a table, or item in a list */
  --color-bg-select: hsl(28 20% 97%); /* for selected rows in reports */

  /* text colors */
  --color-text: hsl(0 0% 20%); /* general text */
  --color-text-subtle: hsl(0 0% 41%); /* text and icons that blends more into background than general text */
  --color-text-disabled: hsl(0 0% 58%); /* for input forms, radio buttons and checkboxes */
  --color-text-weekend: hsl(0 100% 30%); /* red color for weekends */
  --color-text-intense: hsl(0 0% 0%);

  /* image containers */
  --color-img-bg-primary: hsl(0 0% 95%);
  --color-img-bg-secondary: hsl(0 0% 98%);
  --color-img-border: hsl(0 0% 95%);

  /* empty state */
  --color-empty-state-bg: hsl(0 0% 95%);
  --color-empty-state-text: var(--color-text-subtle);

  /* primary navigation */
  --color-nav-primary-bg: hsl(28 30% 95%);
  --color-nav-primary-border: hsl(28 30% 90%);
  --color-nav-primary-header: hsl(28 10% 70%);
  --color-nav-primary-separator: hsl(28 30% 92%);
  --color-nav-primary-text: hsl(28 15% 35%);
  --color-nav-primary-text-subtle: hsl(28 15% 50%);
  --color-nav-primary-hover-text: var(--color-text);
  --color-nav-primary-hover-bg: hsl(28 40% 92%);
  --color-nav-primary-select-text: hsl(28 30% 20%);
  --color-nav-primary-select-bg: hsl(28 40% 90%);
  --color-nav-primary-counter-bg: hsl(28 30% 80%);
  --color-nav-primary-counter-text: var(--color-nav-primary-text);
  --color-nav-primary-bg-container: hsl(28 30% 92%);
  --color-nav-primary-scrollbar: hsl(28 30% 80%);
  --color-nav-primary-scrollbar-thumb: hsl(28 30% 92%);

  /* setting navigation */
  --color-nav-secondary-bg: var(--color-bg-deep);
  --color-nav-secondary-border: var(--color-bg-deep-border);
  --color-nav-secondary-header: var(--color-nav-primary-header);
  --color-nav-secondary-text: hsl(28 10% 35%);
  --color-nav-secondary-hover-text: var(--color-text);
  --color-nav-secondary-hover-bg: hsl(28 40% 95%);
  --color-nav-secondary-active-bg: hsl(28 40% 93%);
  --color-nav-secondary-search-bg: hsl(28 35% 98%);

  /* status bar */
  --color-status-bar-bg: var(--color-bg-deep);
  --color-status-bar-border: var(--color-bg-deep-border);
  --color-status-bar-text: var(--color-nav-secondary-text);
  --color-status-bar-contour: var(--color-bg-contour);

  /* navigation pills */
  --color-nav-pills-text: hsl(0 0% 100%);
  --color-nav-pills-bg: hsl(28 10% 40%);
  --color-nav-pills-inactive-text: var(--color-text);

  /* navigation tabs */
  --color-nav-tabs-text: var(--color-text-subtle);
  --color-nav-tabs-hover-bg: hsl(28 10% 94%);
  --color-nav-tabs-hover-text: var(--color-text);
  --color-nav-tabs-border: var(--color-nav-primary-border);
  --color-nav-tabs-active-border: hsl(0 0% 30%);
  --color-nav-tabs-active-text: var(--color-text);

  /* Signal colors
   * Text colors are used together with bg colors.
   * For icons and text on top of other backgrounds, use signature color. */
  --color-neutral-signature: hsl(0 0% 60%);
  --color-neutral-bg: hsl(0 0% 95%); /* neutral states or information */
  --color-neutral-text: var(--color-text-subtle);
  --color-success-signature: hsl(var(--color-brand-hue) 50% 40%);
  --color-success-bg: hsl(var(--color-brand-hue) 30% 92%);
  --color-success-text: hsl(var(--color-brand-hue) 100% 15%);
  --color-danger-signature: hsl(0 50% 45%);
  --color-danger-bg: hsl(0 30% 92%);
  --color-danger-text: hsl(0 100% 15%);
  --color-warning-signature: hsl(35 80% 50%);
  --color-warning-bg: hsl(35 80% 90%);
  --color-warning-text: hsl(36 100% 15%);
  --color-info-signature: hsl(210 50% 42%);
  --color-info-bg: hsl(210 30% 91%);
  --color-info-text: hsl(210 100% 15%);

  /* links */
  --color-link: hsl(210 55% 40%); /* regular blue link */
  --color-link-disabled: var(--color-text-disabled);
  --color-link-hover: var(--color-text-intense);
  --color-link-active: hsl(210 55% 30%);
  --color-link-discreet: var(--color-text);
  --color-link-discreet-hover: var(--color-text-intense);
  --color-link-danger: var(--color-danger-signature);
  --color-link-danger-hover: hsl(0 50% 30%);

  /* select */
  --color-select-signature: var(--color-link);
  --color-select-bg: hsl(197 40% 93%);
  --color-select-text: hsl(0 0% 100%);

  /* report categorization */
  --color-report: hsl(57 83% 81%); /* only used under report history for now */
  --color-expense: hsl(230 49% 85%);
  --color-expense-inactive: hsl(230 49% 95%);
  --color-expense-pill: hsl(230 49% 40%);
  --color-refund: hsl(280 49% 85%);
  --color-refund-inactive: hsl(280 49% 95%);
  --color-refund-pill: hsl(280 49% 40%);
  --color-trip: hsl(180 49% 85%);
  --color-trip-inactive: hsl(180 49% 95%);
  --color-trip-pill: hsl(180 49% 40%);
  --color-drive: hsl(330 49% 85%);
  --color-drive-inactive: hsl(330 49% 95%);
  --color-drive-pill: hsl(330 77% 65%);

  /* These colors are used when we want to use color to easily group/distinguish between different items,
   * in scenarios where the colors themselves aren't conveying any meaning.
   * Colors are chosen to work as a background for white text. */
  --color-swatch-text: hsl(0 0% 100%);
  --color-swatch-alpha: hsl(346 90% 66%);
  --color-swatch-beta: hsl(210 80% 52%);
  --color-swatch-gamma: hsl(169 50% 41%);
  --color-swatch-delta: hsl(35 81% 44%);
  --color-swatch-epsilon: hsl(280 80% 56%);
  --color-swatch-zeta: hsl(74 75% 34%);

  /* amex, mastercard & visa */
  --color-amex: hsl(209 66% 44%); /* amex blue */
  --color-mastercard: hsl(353 100% 46%); /* mastercard red */
  --color-visa: hsl(237 63% 27%); /* visa blue */

  /* unread dot */
  --color-dot-unread: var(--color-success-signature);
  --color-dot-read: hsl(210 5% 85%);

  /* segmented control */
  --color-control-active-bg: var(--color-bg);
  --color-control-active-text: var(--color-text);
  --color-control-inactive-bg: hsl(0 0% 95%); /* same as button background */
  --color-control-inactive-contour: hsl(0 0% 50% / 20%);
  --color-control-inactive-text: var(--color-text-subtle);
  --color-control-inactive-hover-text: var(--color-text);

  /* forms */
  --color-form-bg: hsl(0 0% 98%);
  --color-form-border: hsl(0 0% 85%);
  --color-form-contour: var(--color-text); /* arrows in drop downs */
  --color-form-placeholder-text: hsl(0 0% 46%);
  --color-form-overlay-bg: hsl(0 0% 100%);
  --color-form-overlay-line: hsl(0 0% 0% / 10%);
  --color-form-overlay-text-mark: var(--color-text-intense);
  --color-form-overlay-text-subtle: hsl(0 0% 40%); /* secondary text and icons */
  --color-form-overlay-disabled-bg: hsl(0 0% 95%);
  --color-form-overlay-disabled-text: var(--color-text-disabled);
  --color-form-overlay-disabled-border: hsl(0 0% 90%);
  --color-form-input-addon-item-bg: hsl(0 0% 90%);

  /* counter badges */
  --color-counter-bg: hsl(0 0% 87%);
  --color-counter-text: var(--color-text);
  --color-counter-emphasis-bg: var(--color-danger-signature);
  --color-counter-emphasis-text: hsl(0 0% 100%);

  /* notification */
  --color-notification-bg: hsl(0 0% 0% / 85%);
  --color-notification-text: hsl(0 0% 100%);

  /* marker to highlight text */
  --color-marker: hsl(57 96% 95%);
  --color-marker-alt1: hsl(179 100% 96%);
  --color-marker-alt2: hsl(290 100% 96%);

  /* modal */
  --color-modal-bg: var(--color-bg);
  --color-modal-header-bg: hsl(0 0% 97%);
  --color-modal-overlay: hsl(0 0% 50% / 40%); /* moving focus to modal with overlay background */

  /* popover */
  --color-popover-window-bg: var(--color-bg);
  --color-popover-window-border: hsl(0 0% 80%); /* border color must match popover-window-tip-light */
  --color-popover-bg-hover: hsl(0 0% 95%);

  /* tooltip */
  --color-tooltip-bg: hsl(210 10% 24%);
  --color-tooltip-text: hsl(210 10% 85%);

  /* route progress bar */
  --color-route-progress-bar-bg: var(--color-brand-primary);
  --color-route-progress-bar-shadow: hsl(var(--color-brand-hue) 50% 30% / 20%);

  /* stacked progress bar */
  --color-stacked-progress-bar-background: var(--color-bg-container);
  --color-stacked-progress-bar-one: var(--color-swatch-alpha);
  --color-stacked-progress-bar-two: var(--color-swatch-beta);
  --color-stacked-progress-bar-three: var(--color-swatch-gamma);
  --color-stacked-progress-bar-four: var(--color-swatch-delta);
  --color-stacked-progress-bar-five: var(--color-swatch-zeta);

  /* receipt toolbar - no variables used as they will have the same appearance in light and dark mode */
  --color-receipt-toolbar-icon: hsl(0 0% 10% / 90%);
  --color-receipt-toolbar-icon-warning: hsl(35 80% 50%); /* same as --color-warning-signature */
  --color-receipt-toolbar-bg: hsl(0 0% 90% / 90%);
  --color-receipt-toolbar-icon-hover: hsl(0 0% 10%);
  --color-receipt-toolbar-bg-hover: hsl(0 0% 95%);

  /* spinner */
  --color-spinner-top: var(--color-brand-primary);
  --color-spinner-bg: hsl(var(--color-brand-hue) 30% 86%);

  /* bare */
  --color-bare-text: var(--color-nav-primary-text);
  --color-bare-bg-grad1: hsl(28 30% 95%);
  --color-bare-bg-grad2: hsl(28 30% 80%);
  --color-bare-container: var(--color-bg);

  /* misc */
  --color-golden-star: hsl(43 80% 49%);
  --color-magnifier-border: hsl(0 0% 20%);
  --color-scrollbar-thumb: hsl(210 0% 75%);
  --color-table-shadow: hsl(0 0% 10% / 8%);

  /* button - regular */
  --color-button-bg: hsl(0 0% 96%);
  --color-button-text: var(--color-text);
  --color-button-border: hsl(0 0% 90%); /* same as form border */
  --color-button-shadow: hsl(0 0% 25% / 10%);
  --color-button-hover-bg: hsl(0 0% 92%);
  --color-button-active-bg: hsl(0 0% 85%);
  --color-button-disabled-bg: hsl(0 0% 96%);
  --color-button-disabled-text: hsl(0 0% 70%);
  --color-button-disabled-border: hsl(0 0% 90%);
  --color-button-focus-bg: hsl(210 55% 98%);

  /* button - emphasis */
  --color-button-emphasis-bg: var(--color-link);
  --color-button-emphasis-text: hsl(0 0% 100%);
  --color-button-emphasis-shadow: hsla(210 25% 25% / 15%);
  --color-button-emphasis-hover-bg: hsl(210 55% 35%);
  --color-button-emphasis-disabled-bg: hsl(210 35% 75%);
  --color-button-emphasis-disabled-text: hsl(0 0% 98%);
  --color-button-emphasis-active-bg: var(--color-link-active);
  --color-button-emphasis-focus-bg: hsl(210 55% 45%);

  /* button - danger */
  --color-button-danger-text: var(--color-danger-signature);
  --color-button-danger-disabled-text: hsl(0 24% 71%);

  /* button - danger emphasis */
  --color-button-danger-emphasis-text: hsl(0 0% 100%);
  --color-button-danger-emphasis-bg: var(--color-danger-signature);
  --color-button-danger-emphasis-shadow: hsl(0 40% 30% / 15%);
  --color-button-danger-emphasis-hover-bg: hsl(0 50% 40%);
  --color-button-danger-emphasis-active-bg: hsl(0 50% 35%);
  --color-button-danger-emphasis-disabled-bg: hsl(0 30% 70%);
  --color-button-danger-emphasis-focus-bg: hsl(0 50% 50%);

  /* MOBILE */
  /* background and cards */
  --color-mobile-bg: var(--color-bg-deep);
  --color-mobile-deep-text: hsl(28 3% 52%);
  --color-mobile-deep-contour: var(--color-bg-contour); /* borders, lines, separators and arrows */
  --color-mobile-card: hsl(0 0% 100%);
  --color-mobile-box-shadow: hsl(0 0% 0% / 10%); /* cards on android and header */

  /* forms */
  --color-mobile-form-border: var(--color-form-border);
  --color-mobile-form-placeholder-text: hsl(0 0% 46%);
  --color-mobile-input-bg: hsl(0 0% 100%);

  /* header */
  --color-mobile-header-bg: hsl(0 0% 100%);
  --color-mobile-nav-header-link: var(--color-link);

  /* navbar */
  --color-mobile-nav-bg: hsl(0 0% 100%);
  --color-mobile-nav-border: hsl(0 0% 94%);
  --color-mobile-nav-text: hsl(28 10% 30%);
  --color-mobile-nav-text-subtle: hsl(28 10% 50%);
  --color-mobile-nav-text-active: var(--color-text);

  /* trip, drive, expense */
  --color-mobile-expense-card: hsl(230 100% 98%);
  --color-mobile-refund-card: hsl(280 100% 98%);
  --color-mobile-trip-card: hsl(180 100% 98%);
  --color-mobile-drive-card: hsl(330 100% 98%);
}

@media (prefers-color-scheme: dark) {

:root {
    /* brand color */
    --color-brand-primary: hsl(var(--color-brand-hue) 50% 70%); /* logotype and other brand details */

    /* background colors */
    --color-bg: hsl(210 10% 14%); /* general background color */
    --color-bg-contour: hsl(210 10% 30%); /* lines, separators and arrows */
    --color-bg-deep: hsl(210 10% 18%);
    --color-bg-deep-border: hsl(210 10% 20%);
    --color-bg-container: hsl(210 10% 24%); /* containers such as code-example, action pills, info-boxes */
    --color-bg-container-discreet: hsl(210 10% 19%);
    --color-bg-container-evident: hsl(210 10% 35%);
    --color-bg-hover: hsl(210 10% 16%); /* when hovering over a line in a table, or item in a list */
    --color-bg-select: hsl(210 10% 18%); /* for selected rows in reports */

    /* text colors */
    --color-text: hsl(210 10% 80%); /* general text */
    --color-text-subtle: hsl(210 10% 60%); /* text and icons that blends more into background than general text */
    --color-text-disabled: hsl(210 10% 50%); /* for input forms, radio buttons and checkboxes */
    --color-text-weekend: hsl(0 60% 70%); /* red color for weekends */
    --color-text-intense: hsl(210 10% 90%);

    /* image containers */
    --color-img-border: hsl(210 10% 25%);

    /* empty state */
    --color-empty-state-bg: hsl(210 10% 20%);
    --color-empty-state-text: hsl(210 10% 70%);

    /* primary navigation */
    --color-nav-primary-bg: hsl(210 10% 20%);
    --color-nav-primary-border: hsl(210 10% 24%);
    --color-nav-primary-header: hsl(210 10% 45%);
    --color-nav-primary-separator: hsl(210 10% 22%);
    --color-nav-primary-text: hsl(210 10% 65%);
    --color-nav-primary-text-subtle: hsl(210 10% 50%);
    --color-nav-primary-hover-text: hsl(210 10% 75%);
    --color-nav-primary-hover-bg: hsl(210 10% 23%);
    --color-nav-primary-select-text: var(--color-text);
    --color-nav-primary-select-bg: hsl(210 10% 26%);
    --color-nav-primary-counter-bg: hsl(210 10% 33%);
    --color-nav-primary-bg-container: hsl(210 10% 25%);

    /* setting navigation */
    --color-nav-secondary-header: hsl(210 10% 50%);
    --color-nav-secondary-text: var(--color-nav-primary-text);
    --color-nav-secondary-hover-bg: hsl(210 10% 20%);
    --color-nav-secondary-active-bg: hsl(210 10% 25%);
    --color-nav-secondary-search-bg: hsl(210 10% 15%);

    /* navigation pills */
    --color-nav-pills-text: var(--color-text-intense);
    --color-nav-pills-bg: hsl(210 10% 40%);

    /* navigation tabs */
    --color-nav-tabs-hover-bg: hsl(210 10% 25%);

    /* Signal colors
     * Text colors are used together with bg colors.
     * For icons and text on top of other backgrounds, use signature color. */
    --color-neutral-signature: hsl(210 2% 70%);
    --color-neutral-bg: hsl(210 5% 25%); /* neutral states or information */
    --color-neutral-text: hsl(210 5% 65%);
    --color-success-bg: hsl(var(--color-brand-hue) 15% 25%);
    --color-success-text: hsl(var(--color-brand-hue) 10% 80%);
    --color-danger-signature: hsl(0 70% 70%);
    --color-danger-bg: hsl(0 40% 25%);
    --color-danger-text: hsl(0 25% 80%);
    --color-warning-signature: hsl(35 70% 70%);
    --color-warning-bg: hsl(35 65% 25%);
    --color-warning-text: hsl(36 25% 80%);
    --color-info-signature: hsl(210 70% 70%);
    --color-info-bg: hsl(210 70% 25%);
    --color-info-text: hsl(210 25% 80%);

    /* links */
    --color-link: hsl(210 80% 70%); /* regular blue link */
    --color-link-hover: hsl(210 70% 95%);
    --color-link-active: hsl(210 55% 80%);
    --color-link-discreet-hover: var(--color-text-intense);
    --color-link-danger-hover: hsl(0 50% 80%);

    /* select */
    --color-select-signature: hsl(210 80% 50%);
    --color-select-bg: hsl(211 40% 22%);

    /* report categorization */
    --color-report: hsl(60 50% 50%); /* only used under report history for now */
    --color-expense: hsl(230 40% 40%);
    --color-expense-inactive: hsl(230 40% 30%);
    --color-expense-pill: hsl(230 40% 40%);
    --color-refund: hsl(280 40% 35%);
    --color-refund-inactive: hsl(280 40% 30%);
    --color-refund-pill: hsl(280 40% 40%);
    --color-trip: hsl(180 40% 35%);
    --color-trip-inactive: hsl(180 40% 30%);
    --color-trip-pill: hsl(180 40% 40%);
    --color-drive: hsl(330 40% 35%);
    --color-drive-inactive: hsl(330 40% 30%);
    --color-drive-pill: hsl(330 40% 40%);

    /* These colors are used when we want to use color to easily group/distinguish between different items,
     * in scenarios where the colors themselves aren't conveying any meaning.
     * Colors are chosen to work as a background for white text. */
    --color-swatch-text: hsl(0 0% 100%);
    --color-swatch-alpha: hsl(346 90% 60%);
    --color-swatch-beta: hsl(210 100% 52%);
    --color-swatch-gamma: hsl(169 50% 38%);
    --color-swatch-delta: hsl(35 80% 40%);
    --color-swatch-epsilon: hsl(280 50% 56%);
    --color-swatch-zeta: hsl(74 80% 30%);

    /* amex, mastercard & visa */
    --color-amex: hsl(209 60% 50%); /* amex blue */
    --color-mastercard: hsl(353 60% 50%); /* mastercard red */
    --color-visa: hsl(237 60% 50%); /* visa blue */

    /* unread dot */
    --color-dot-read: hsl(210 5% 35%);

    /* segmented control */
    --color-control-active-bg: hsl(210 10% 25%); /* same as --color-button-bg */
    --color-control-inactive-bg: hsl(210 10% 5%);

    /* forms */
    --color-form-bg: hsl(210 10% 22%);
    --color-form-border: hsl(210 10% 30%);
    --color-form-contour: var(--color-text); /* arrows in drop downs */
    --color-form-placeholder-text: hsl(210 10% 60%);
    --color-form-overlay-bg: hsl(210 10% 22%);
    --color-form-overlay-line: hsl(210 10% 30%);
    --color-form-overlay-text-mark: hsl(0 0% 100%);
    --color-form-overlay-text-subtle: hsl(210 10% 55%); /* secondary text and icons */
    --color-form-overlay-disabled-bg: hsl(210 10% 26%);
    --color-form-overlay-disabled-text: var(--color-text-disabled);
    --color-form-overlay-disabled-border: hsl(210 10% 34%);
    --color-form-input-addon-item-bg: hsl(210 10% 30%);

    /* counter badges */
    --color-counter-bg: hsl(210 10% 40%);
    --color-counter-emphasis-bg: hsl(0 50% 40%);

    /* notification */
    --color-notification-bg: hsl(210 10% 10%);
    --color-notification-text: var(--color-text-intense);

    /* marker to highlight text */
    --color-marker: hsl(57 50% 15%);
    --color-marker-alt1: hsl(179 60% 15%);
    --color-marker-alt2: hsl(290 60% 15%);

    /* modal */
    --color-modal-header-bg: var(--color-bg-deep);
    --color-modal-overlay: hsl(0 0% 0% / 65%); /* moving focus to modal with overlay background */

    /* popover */
    --color-popover-window-bg: hsl(210 10% 18%);
    --color-popover-window-border: var(--color-bg-deep-border); /* border color must match popover-window-tip-dark */
    --color-popover-bg-hover: hsl(210 10% 25%);

    /* tooltip */
    --color-tooltip-bg: hsl(210 10% 30%);

    /* stacked progress bar */
    --color-stacked-progress-bar-two: hsl(210 80% 70%);

    /* spinner */
    --color-spinner-bg: hsl(var(--color-brand-hue) 10% 30%);

    /* bare */
    --color-bare-bg-grad1: hsl(210 10% 12%);
    --color-bare-bg-grad2: var(--color-nav-primary-bg);
    --color-bare-container: hsl(210 10% 20%);

    /* misc */
    --color-scrollbar-thumb: hsl(210 0% 40%);
    --color-table-shadow: hsl(0 0% 0% / 65%);

    /* button - regular */
    --color-button-bg: hsl(210 10% 25%);
    --color-button-border: hsl(210 10% 30%);
    --color-button-shadow: none;
    --color-button-hover-bg: hsl(210 10% 35%);
    --color-button-active-bg: hsl(210 10% 40%);
    --color-button-disabled-bg: hsl(210 10% 20%);
    --color-button-disabled-border: hsl(210 10% 30%);
    --color-button-focus-bg: hsl(210 10% 25%);

    /* button - emphasis */
    --color-button-emphasis-bg: hsl(210 80% 40%);
    --color-button-emphasis-shadow: none;
    --color-button-emphasis-hover-bg: hsl(210 80% 45%);
    --color-button-emphasis-disabled-bg: hsl(210 20% 30%);
    --color-button-emphasis-disabled-text: hsl(0 0% 50%);
    --color-button-emphasis-active-bg: hsl(210 80% 50%);

    /* button - danger */
    --color-button-danger-text: hsl(0 80% 70%);

    /* button - danger emphasis */
    --color-button-danger-emphasis-bg: hsl(0 60% 40%);
    --color-button-danger-emphasis-shadow: none;
    --color-button-danger-emphasis-hover-bg: hsl(0 60% 45%);
    --color-button-danger-emphasis-active-bg: hsl(0 60% 50%);
    --color-button-danger-emphasis-disabled-bg: hsl(0 20% 30%);
    --color-button-danger-emphasis-focus-bg: var(--color-button-danger-emphasis-active-bg);

    /* MOBILE */
    /* background and cards */
    --color-mobile-bg: var(--color-bg);
    --color-mobile-deep-text: var(--color-text-subtle);
    --color-mobile-deep-contour: var(--color-bg-contour); /* borders, lines, separators and arrows */
    --color-mobile-card: var(--color-bg-deep);
    --color-mobile-box-shadow: none; /* cards on android and header */

    /* forms */
    --color-mobile-form-border: var(--color-form-border);
    --color-mobile-form-placeholder-text: var(--color-form-placeholder-text);
    --color-mobile-input-bg: var(--color-form-bg);

    /* header */
    --color-mobile-header-bg: var(--color-bg-deep);

    /* navbar */
    --color-mobile-nav-bg: var(--color-nav-primary-bg);
    --color-mobile-nav-border: var(--color-nav-primary-separator);
    --color-mobile-nav-text: var(--color-nav-primary-text);
    --color-mobile-nav-text-subtle: var(--color-nav-primary-text-subtle);

    /* trip, drive, expense */
    --color-mobile-expense-card: hsl(230 40% 15%);
    --color-mobile-refund-card: hsl(280 40% 15%);
    --color-mobile-trip-card: hsl(180 40% 15%);
    --color-mobile-drive-card: hsl(330 40% 15%);
}
  }

/* PT Sans (regular) */

@font-face {
  font-family: 'PT Sans';
  src: url('/assets/fonts/pt-sans-regular-43dd98c71f6266d2986bd05323b07e4f.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* PT Sans (bold) */

@font-face {
  font-family: 'PT Sans';
  src: url('/assets/fonts/pt-sans-bold-2a16cfcf98443c4c9e5e57ed41f6c099.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

/* PT Sans (italic) */

@font-face {
  font-family: 'PT Sans';
  src: url('/assets/fonts/pt-sans-italic-98c643ef84bb92e433768b955ee3642b.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

/* PT Sans Caption (regular) */

@font-face {
  font-family: 'PT Sans Caption';
  src: url('/assets/fonts/pt-sans-caption-regular-075e64de6cb45f0fd38d2f441393f2bc.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* PT Sans Caption (bold) */

@font-face {
  font-family: 'PT Sans Caption';
  src: url('/assets/fonts/pt-sans-caption-bold-4293e980267d56e704548c74e3e75de0.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

/* PT Sans Mono (regular) */

@font-face {
  font-family: 'PT Mono';
  src: url('/assets/fonts/pt-mono-regular-81414c2ba941acf48eb8c2f56533c483.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* global font variables (we should only use these fonts) */

:root {
  --font-regular: 'PT Sans', sans-serif;
  --font-caption: 'PT Sans Caption', sans-serif;
  --font-monospace: 'PT Mono', monospace;
}

/* More inspiration:
 * https://github.com/animate-css/animate.css */

@keyframes rotate-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes spinner-rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* used in client/desktop/app/instance-initializers/form-instruction.js,
 * but that code will likely be removed eventually, and this can be moved or removed */

@keyframes fade-out {
  from {
    opacity: 100%;
  }

  to {
    opacity: 0%;
  }
}

.fade-out {
  animation: fade-out ease-in 200ms both;
}

@keyframes fade-in {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

.fade-in {
  animation: fade-in ease-in 200ms both;
}

/* adjustments to plugins and other vendored code */

/*
 * Adjustments to original font face definitions (imported via Node modules)
 *
 * When original font face definitions are updated, make sure overrides stay in sync:
 * 1. Use same font family name as in original font face definition.
 * 2. Set source URL path prefix to '/assets/fonts/'.
 * 3. Set format to WOFF2 only (no other format needed, all our clients support WOFF2).
 * 4. Set `font-display` to `auto`.
 */

/* Brands */

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('/assets/fonts/fa-brands-400-c7a123d482392be7eb8de33b11cd7558.woff2') format('woff2');
}

.fab,
.fa-brands {
  font-weight: 400;
}

/* Light */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url('/assets/fonts/fa-light-300-0d184347c51948a8bcdbd7fca95670f5.woff2') format('woff2');
}

.fal,
.fa-light {
  font-weight: 300;
}

/* Regular */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('/assets/fonts/fa-regular-400-c09e2a7cabb0e12ee1c8c358b0ffca70.woff2') format('woff2');
}

.far,
.fa-regular {
  font-weight: 400;
}

/* Solid */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url('/assets/fonts/fa-solid-900-65eb2b3ada891a1af106299113562dcd.woff2') format('woff2');
}

.fas,
.fa-solid {
  font-weight: 900;
}

/* Thin */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 100;
  font-display: auto;
  src: url('/assets/fonts/fa-thin-100-2a8b6a16a9fd29152eb462dfde8e1ba0.woff2') format('woff2');
}

.fat,
.fa-thin {
  font-weight: 100;
}

/* end of font face adjustments */

/* mapbox */

.mapboxgl-ctrl-logo {
  opacity: 40%;
  pointer-events: none; /* disable the link, to avoid navigation on ghost clicks */
}

.mapboxgl-ctrl-attrib {
  opacity: 50%;

  /* remove links from attribution field,
   * mapbox logo is already shown elsewhere */
}

.mapboxgl-ctrl-attrib a[href*='mapbox.com'] {
    display: none;
  }

.mapboxgl-ctrl .mapboxgl-ctrl-zoom-in,.mapboxgl-ctrl .mapboxgl-ctrl-zoom-out {
    /* default width/height is 29px, smaller to make it match our UI better */
    width: 25px;
    height: 25px;
  }

/* Hide improve map text in map attribution */

.mapbox-improve-map {
  display: none;
}

/* resets properties from button, otherwise map control buttons are stretched wide, becoming an ugly rectangular */

.mapboxgl-ctrl button {
  min-width: 0;
  min-width: initial;
}

/* resets properties from button, otherwise the attribution button displays faultily */

.mapboxgl-ctrl-attrib-button {
  padding: 0;
  padding: initial;
  min-width: 0;
  min-width: initial;
}

/* For performance, we use this append container instead of appending directly to body (or other elements)
 * whose inner tree contains a lot of elements. It's used by tooltip and similar absolutely positioned stuff,
 * to minimise sub-tree invalidation when these elements are added, removed or updated.
 *
 * This container needs to be defined in index.html instead of application.hbs, since we are using it for the
 * progress bar, which exist before the application.hbs template has rendered.
 * https://atfzl.com/don-t-attach-tooltips-to-document-body */

#global-append-container {
  /* avoid affecting the regular flow and sibling elements */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* otherwise we'll force line-breaks between words in tooltip and other children */

  /* Everything in this container should be interactive or higher, so we don't have to put this one higher than
   * what's going to be appended inside it. */
  z-index: calc(1000 - 1);
  z-index: calc(var(--misc-z-index-interactive) - 1);
}

/* As receipts normally use a bright background, most receipt photos are bright,
 * making a dark overlay work best in terms of contrast. However, high contrast also
 * makes for a cluttered impression, especially in the receipt overview.
 *
 * Used for buttons and icons rendered on top of receipt photos.
 *
 * - maybe we should flip between light/dark depending on the color scheme,
 *   if we add dark-mode in the future. Not sure though, could also be better to keep it,
 *   since the photos themselves won't be inverted by a dark color scheme. */

.photo-overlay-button {
  color: hsl(0 0% 10% / 90%);
  color: var(--color-receipt-toolbar-icon);
  background-color: hsl(0 0% 90% / 90%);
  background-color: var(--color-receipt-toolbar-bg);

  /* Would like to use a slight blur on the background here,
   * but performance isn't good enough with multiple receipts visible (detached receipts view),
   * it will lag while scrolling (in Chrome, possibly others too). */
  /* backdrop-filter: blur(2px); */
}

.photo-overlay-button.warning {
    color: hsl(35 80% 50%);
    color: var(--color-receipt-toolbar-icon-warning);
  }

.photo-overlay-button .icon-component {
    margin-right: 0; /* remove margin from icon inside of links */
  }

/* only add hover styles to devices that have a pointer and support hover */

@media (hover: hover) and (pointer: fine) {
    .photo-overlay-button:hover {
      color: hsl(0 0% 10%);
      color: var(--color-receipt-toolbar-icon-hover);
      background-color: hsl(0 0% 95%);
      background-color: var(--color-receipt-toolbar-bg-hover);
    }

    .photo-overlay-button.warning:hover {
      color: hsl(35 80% 50%);
      color: var(--color-receipt-toolbar-icon-warning);
    }
  }

/* Inline code */

code {
  background-color: hsl(28 2% 96%);
  background-color: var(--color-bg-container);
  padding: 0.1em var(--space-inline-xs);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  font-family: 'PT Mono', monospace;
  font-family: var(--font-monospace);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; /* to apply padding on line break */
}

/* ––––––––––––
   Lists
–––––––––––– */

ul:empty,
ol:empty,
dl:empty {
  /* don't show empty lists */
  display: none !important;
}

ul.basic,
ol.basic {
  margin-left: var(--space-inline-m);
  text-align: left;
}

:is(ul.basic,ol.basic)  > li {
    margin-bottom: var(--space-stack-s);
  }

ol.basic > li {
  list-style: decimal outside;
}

ul.basic > li {
  list-style: disc outside;
}

/* legal */

ol.legal > li {
  list-style-type: lower-roman;
}

/* definition lists */

dl.basic {
  margin: 0 0 var(--space-stack-l);
}

dl.basic  > dt {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-weight: bold;
  }

:is(dl.basic > dt)::after {
      content: ':';
    }

:is(.desktop :scope) ul.basic,:is(.desktop :scope) ol.basic {
    margin-bottom: var(--space-stack-m);
  }

:is(.mobile :scope) ul.basic {
    margin-bottom: 0;
  }

/* desktop */

/* ––––––––––––
   Typography
–––––––––––– */

/* General Typography */

body {
  font-size: var(--font-size-text);
  line-height: var(--font-line-height-base);
}

/* Default fonts and colors. */

body {
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular);
  color: hsl(0 0% 20%);
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'PT Sans Caption', sans-serif;
  font-family: var(--font-caption);
}

/* buttons should inherit font-family from body
 * (for now other form elements, such as input, select and textarea won't) */

button {
  font-family: inherit;
}

/* Default margins and some other properties */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: 1;
  margin-bottom: var(--space-stack-s);
}

h1 {
  font-size: var(--font-size-heading1);
}

h2 {
  font-size: var(--font-size-heading2);
  margin-bottom: var(--space-stack-xs);
}

h3 {
  font-size: var(--font-size-heading3);
}

h4,
h5,
h6 {
  font-size: var(--font-size-heading4);
}

p {
  margin-bottom: var(--space-stack-l);
}

abbr,
acronym {
  font-feature-settings: normal;
  font-variant: normal;
  border-bottom: 1px dotted hsl(0 0% 0%);
  border-bottom: 1px dotted var(--color-text-intense);
  letter-spacing: 0.1em;
  cursor: help;
}

address {
  margin-top: var(--space-stack-l);
  font-style: italic;
}

del {
  color: hsl(0 0% 0%);
  color: var(--color-text-intense);
}

blockquote {
  margin: var(--space-stack-l);
}

strong,
dfn {
  font-weight: bold;
}

em,
dfn {
  font-style: italic;
}

pre {
  white-space: pre;
  font: 1em monospace;
  line-height: var(--font-line-height-base);
}

/* paragraphs */

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

/* longer passages of text */

/* adjust headings
   * we don't want more than 2 levels of headings */

section.prose h1 {
    font-size: var(--font-size-heading2);
    line-height: var(--font-line-height-base);
  }

section.prose h2,section.prose h3,section.prose h4,section.prose h5,section.prose h6 {
    font-size: var(--font-size-heading3);
    line-height: var(--font-line-height-base);
  }

section.prose p {
    font-size: var(--font-size-text-xlarge);
  }

section.prose ul {
    list-style: disc outside;
    margin-left: var(--space-inline-l);
    margin-bottom: var(--space-stack-m);
  }

section.prose li {
    font-size: var(--font-size-text-large);
  }

/* Metal
 * This stylesheet is responsible for the overall layout of the app, and it's various layout frames.
 *
 * NOTE
 * - For viewport maximized height to work there need to be a chain of 100% height on all ancestor elements.
 * - There is an issue where the stripes (top bars) affect the height of the outbox/report view, creating
 *   some weirdness in scrolling behaviour. Afaik this is unavoidable, since we need the two panes to scroll
 *   independently and the only way to achieve this is to use `height: 100vh`. If `calc` could take the height
 *   of another element (in this case the stripes container) we could set their height to
 *   `calc(100vh - stripes-container-height)` but this isn't possible.
 *
 *   The fix is to change the stripes to not occupy content height. For example into a prominent, translucent bar
 *   on the top that hovers above the content or a smaller indicator anchored on the navigation.
 */

html,
body,
.metal-frame {
  margin: 0;
  padding: 0;
  height: 100vh;

  display: flex;
  flex-flow: column;
}

body {
  background-color: hsl(0 0% 100%);
  background-color: var(--color-bg);

  /* Fixes a bug where scrollbars appear in light mode color even in dark mode. scrollbar-color only works
     in Firefox and Chrome, but we should avoid using the alternative ::webkit-scrollbar as it is non-standard.
     https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling
     https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar */
  scrollbar-color: hsl(210 0% 75%) transparent;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.mother-frame {
  flex: 1;
}

.mother-frame .sidebar-navigation-component,.mother-frame .primary-frame {
    -webkit-overflow-scrolling: touch;

    /* otherwise padding ruins the height */
    box-sizing: border-box;
  }

/* avoid using `overflow: auto/scroll/hidden` on these frames, since that will clip
   * tooltips and other absolute-positioned elements that may need to render across frames */

.mother-frame .sidebar-navigation-component {
    position: fixed;

    width: var(--layout-navigation-base-width);
    max-height: 100vh;
    min-height: 100vh;
  }

.collapsed:is(.mother-frame .sidebar-navigation-component) {
      width: var(--layout-navigation-collapsed-width);
    }

/* make space for navigation */

.mother-frame.navigation-visible .primary-frame {
    margin-left: var(--layout-navigation-base-width);
  }

.mother-frame.navigation-visible .sidebar-navigation-component.collapsed + .primary-frame {
    margin-left: var(--layout-navigation-collapsed-width);
  }

:is(.mother-frame .primary-frame) .main-frame,:is(.mother-frame .primary-frame) .inner-main-frame {
      min-height: 100vh;
    }

:is(.mother-frame .primary-frame) .main-frame {
      display: flex;
    }

:is(:is(.mother-frame .primary-frame) .main-frame) .inner-main-frame {
        flex-grow: 1;
        container: inner-main-container / inline-size;

        /* otherwise padding ruins the height */
        box-sizing: border-box;

        /* The container imposes an 'inline-size' containment, that will effectively deactivate horizontal scroll
        * when screen is smaller than layout. By setting our default layout width plus side padding as a min-width,
        * we ensure no content will escape the container and instead be accessible by scrolling the container. */
        contain-intrinsic-width: calc(var(--layout-width-boundary) + (2 * var(--space-inline-m)));
      }

:is(:is(:is(.mother-frame .primary-frame) .main-frame) .inner-main-frame) .content-frame {
          display: flex;

          /* content holder is the primary visual section,
           * where we'll render most content unique to a particular application view */
        }

:is(:is(:is(:is(.mother-frame .primary-frame) .main-frame) .inner-main-frame) .content-frame) .content-holder {
            order: 1;
            flex-shrink: 0; /* otherwise wide items in ancillary-holder will shrink this element */
            padding: var(--space-inset-square-m);
            width: var(--layout-width-boundary);
          }

/* Since this is a wormhole target for things rendered within the main outlet,
           * it needs to be before the main outlet in the DOM hierarchy. However, visually we need
           * this to be to the right of the content-holder. We're solving this by using the CSS `order` property.
           * Another solution would be to (somehow) wait for the wormhole element to render before invoking the
           * in-element block, but that seemed overly complicated, compared to changing visual order. */

:is(:is(:is(:is(.mother-frame .primary-frame) .main-frame) .inner-main-frame) .content-frame) .ancillary-holder {
            order: 2;
            padding: var(--space-inset-square-m);
            flex-grow: 1; /* allow ancillary holder to grow when screen is wider */
          }

:is(:is(:is(:is(.mother-frame .primary-frame) .main-frame) .inner-main-frame) .content-frame) .ancillary-holder:empty {
            display: none;
          }

/* The "wormhole-ancillary" DOM element is used for non-essential content. On wide screens, this content will
   be placed to the right of the main content. On narrow screens, this content will be placed below the main
   content. */

@container inner-main-container (max-width: 1200px) {
  .primary-frame .main-frame .inner-main-frame .content-frame {
    flex-direction: column;
    flex-wrap: wrap;

    /* The default alignment of the items changes when the direction is changed to
        column. This will retain visual similarity (left-anchored). */
  }
    :is(.primary-frame .main-frame .inner-main-frame .content-frame) .content-holder {
      align-self: flex-start;
    }

  #wormhole-ancillary {
    width: var(--layout-width-boundary);
  }
}

/* Bare layout is used for login, signup and a few others */

/* center in parent */

:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .content-holder {
    margin: 0 auto;
  }

/* center content */

:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-main-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
  }

:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box {
    flex: 1;
    text-align: center;
  }

/* style */

:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .mother-frame {
    background-image: linear-gradient(315deg, hsl(28 30% 95%), hsl(28 30% 80%));
    background-image: linear-gradient(315deg, var(--color-bare-bg-grad1), var(--color-bare-bg-grad2));
  }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) h1 {
      color: hsl(0 0% 20%);
      color: var(--color-text);
      margin-bottom: var(--space-stack-m);
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) .instruction {
      font-size: var(--font-size-text-large);
      color: hsl(28 15% 35%);
      color: var(--color-bare-text);
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) .additional-links {
      margin-top: var(--space-stack-s);
    }

:is(:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) .additional-links) a {
        color: hsl(0 0% 20%);
        color: var(--color-link-discreet);
        text-decoration: underline;
      }

:is(:is(:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) .additional-links) a):hover {
          color: hsl(0 0% 0%);
          color: var(--color-link-discreet-hover);
        }

:is(:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) .additional-links) a ~ a {
        margin-left: var(--space-inline-s);
      }

:is(:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .outer-box) .additional-links) div ~ div {
        margin-top: var(--space-stack-xs);
      }

:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    max-width: 25em;
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--space-inset-square-xl);
    background-color: hsl(0 0% 100%);
    background-color: var(--color-bare-container);
  }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .error {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
      font-weight: bold;
      font-size: var(--font-size-text-large);
      margin-bottom: var(--space-stack-xs);
    }

/* smaller error text for signup form */

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .control-group .error {
      font-size: var(--font-size-text);
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .confirmation {
      margin-bottom: 0;
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .help-block-component {
      color: hsl(28 15% 35%);
      color: var(--color-bare-text);
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .control-label {
      text-align: left;
    }

:is(:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .input-addon) .input-addon-holder {
        width: 100%;
      }

:is(:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .input-addon) .input-addon-item {
        padding: var(--space-inset-squish-l) !important;
      }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) input:not([type='checkbox']),:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) button,:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) select {
      padding: var(--space-inset-squish-l) !important;
      width: 100%; /* 100% of .controls */
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) select {
      height: auto;
    }

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) button {
      font-size: var(--font-size-text-large); /* give button same size as input fields */
      padding: 0.85rem !important;
    }

/* recommend that people use a desktop browser
    * (or the mobile app) when logging in */

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .mobile-notice {
      display: none;
    }

@media only screen and (max-width: 480px) {

:is(:is(.signup-route,.login-route,.login-catcher-route,.logout-loading-route,.password-route,.password-assign-route) .inner-box) .mobile-notice {
        display: block;
    }
      }

.content-navigation {
  display: flex;

  margin-bottom: var(--space-stack-l);
  border-bottom: 1px solid hsl(28 30% 90%);
  border-bottom: 1px solid var(--color-nav-tabs-border);
  font-size: var(--font-size-text);
}

.content-navigation .content-navigation-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

.content-navigation .content-navigation-heading {
    flex: 1;
  }

.content-navigation .content-navigation-items {
    display: flex;
    gap: var(--space-inline-s);
    margin-left: calc(-1 * var(--space-inline-s)); /* compensate padding to align with heading */
  }

:is(.content-navigation .content-navigation-items) .content-navigation-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      font-family: 'PT Sans Caption', sans-serif;

      font-family: var(--font-caption);
      font-weight: bold;

      color: hsl(0 0% 41%);

      color: var(--color-nav-tabs-text);
      padding: var(--space-stack-s) 0;
      margin: 0 var(--space-inline-s);
    }

:is(:is(.content-navigation .content-navigation-items) .content-navigation-item):not(.active):hover {
        color: hsl(0 0% 20%);
        color: var(--color-nav-tabs-hover-text);
        text-decoration: none;

        /*
         * Using ::before pseudo-element for hover background to avoid flickering.
         * This approach maintains stable element dimensions while providing the visual effect.
         * The pseudo-element extends beyond the item's padding to create the desired background area.
         */
      }

:is(:is(.content-navigation .content-navigation-items) .content-navigation-item):not(.active):hover::before {
          content: '';
          position: absolute;
          top: var(--space-stack-xs);
          left: 0;
          right: 0;
          bottom: var(--space-stack-xs);
          margin: 0 calc(-1 * var(--space-inline-s));
          background-color: hsl(28 10% 94%);
          background-color: var(--color-nav-tabs-hover-bg);
          border-radius: 8px;
          border-radius: var(--misc-moderate-rounding);
          z-index: -1;
        }

.active:is(:is(.content-navigation .content-navigation-items) .content-navigation-item) {
        color: hsl(0 0% 20%);
        color: var(--color-nav-tabs-active-text);
        position: relative;
      }

.active:is(:is(.content-navigation .content-navigation-items) .content-navigation-item):hover {
          cursor: default;
          text-decoration: none;
          color: inherit;
        }

.active:is(:is(.content-navigation .content-navigation-items) .content-navigation-item)::after {
          --local-border-active-width: 3px;

          position: absolute;
          bottom: calc(3px / -2);
          bottom: calc(var(--local-border-active-width) / -2);
          left: 0;
          content: '';
          display: block;
          width: 100%;
          height: 3px;
          height: var(--local-border-active-width);
          background-color: hsl(0 0% 30%);
          background-color: var(--color-nav-tabs-active-border);
          border-radius: 0.25em;
          border-radius: var(--misc-subtle-rounding);
        }

:is(:is(.content-navigation .content-navigation-items) .content-navigation-item) .count-badge-component {
        margin-left: var(--space-inline-s);
      }

.inner-main-frame .status-bar {
    background-color: hsl(28 35% 98%);
    background-color: var(--color-status-bar-bg);
    padding: var(--space-inset-squish-l);

    border-bottom: 1px solid hsl(28 40% 90%);

    border-bottom: 1px solid var(--color-status-bar-border);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    min-width: var(--layout-width-boundary);
  }

:is(.inner-main-frame .status-bar):empty {
      display: none;
    }

:is(.inner-main-frame .status-bar) .status-bar-content {
      display: flex;
      justify-content: space-between;
      gap: var(--space-inline-s);
      width: var(--layout-width-boundary);
    }

:is(.inner-main-frame .status-bar) .status-bar-breadcrumbs {
      color: hsl(28 10% 35%);
      color: var(--color-status-bar-text);
    }

:is(:is(.inner-main-frame .status-bar) .status-bar-breadcrumbs) a {
        color: hsl(28 10% 35%);
        color: var(--color-status-bar-text);
      }

:is(:is(.inner-main-frame .status-bar) .status-bar-breadcrumbs) a:hover {
        color: hsl(0 0% 20%);
        color: var(--color-text);
      }

/* breadcrumbs */

:is(:is(:is(.inner-main-frame .status-bar) .status-bar-breadcrumbs) .breadcrumbs) .separator {
          color: hsl(28 6% 90%);
          color: var(--color-status-bar-contour);
          margin: 0 var(--space-inline-xs);
        }

:is(:is(:is(.inner-main-frame .status-bar) .status-bar-breadcrumbs) .breadcrumbs) .breadcrumb {
          display: inline-block;
        }

.route-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0%;
  background-color: hsl(135 50% 30%);
  background-color: var(--color-route-progress-bar-bg);
  height: 2px;
  width: 0%;
  transition-property: width;
  transition-duration: 250ms; /* sync with js */
  transition-timing-function: ease-in-out;
  z-index: 10000;
  z-index: var(--misc-z-index-flash);
  box-shadow: 0 1px 1px hsl(135 50% 30% / 20%);
  box-shadow: 0 1px 1px var(--color-route-progress-bar-shadow);
}

/* ––––––––––––
   Common styles
–––––––––––– */

/* Minor elements */

mark {
  background: hsl(57 96% 95%);
  background: var(--color-marker);
  color: hsl(0 0% 20%);
  color: var(--color-text);
}

/* Links */

a {
  color: hsl(210 55% 40%);
  color: var(--color-link);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

a .icon-component {
    margin-right: 0.2em;
    margin-right: var(--icon-text-spacing);
  }

a:hover {
    color: hsl(0 0% 0%);
    color: var(--color-link-hover);
    text-decoration: underline;
  }

a.disabled,a[disabled] {
    color: hsl(0 0% 58%);
    color: var(--color-link-disabled);
    pointer-events: none;
  }

/* This outline will be applied to all form elements (input, select, button etc),
 * as well as any links. In addition, any element with `tabindex="0"` will get this
 * outline. This makes it easy to style the focus state of custom-made components,
 * by simply setting the tabindex property on them. */

*:focus-visible {
  outline: 2px solid hsl(210 55% 40%);
  outline: var(--misc-focus-outline);
}

/* DEPRECATED,
 * style the specific no-link element directly,
 * or probably even better, don't use a link element (if/else in template logic) */

a.current {
  text-decoration: none;
  cursor: default;
  color: inherit;
}

a.current:hover {
    text-decoration: none;
    color: inherit;
  }

a.danger {
  color: hsl(0 50% 45%);
  color: var(--color-link-danger);
}

a.danger:hover {
    color: hsl(0 50% 30%);
    color: var(--color-link-danger-hover);
  }

/* DEPRECATED should be removed as a class, in favor of more specific styles */

span.de-emphasis {
  color: hsl(0 0% 58%);
  color: var(--color-text-disabled);
}

/* disable scrolling when modal window is open */

html.modal-window-open {
  overflow-y: hidden;
}

.modal-window-wrapper {
  position: fixed;
  z-index: 100;
  z-index: var(--misc-z-index-popup);
  height: 100vh;
  left: 0;
  right: 0;
  top: 0;
}

.modal-window-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  background-color: hsl(0 0% 50% / 40%);

  background-color: var(--color-modal-overlay);
  -webkit-backdrop-filter: grayscale(60%);
          backdrop-filter: grayscale(60%); /* grayscale on overlay background, moving focus to modal */
}

.modal-window-frame {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  box-shadow: 0 4px 24px 4px hsl(0 0% 10% / 30%);
  box-shadow: var(--misc-window-shadow);

  /* height boundaries for all modal sizes */
  max-height: 80vh;

  background-color: hsl(0 0% 100%);

  background-color: var(--color-modal-bg);

  /* position reference for close button and loading indicator */
  position: relative;
}

.modal-window-frame.small {
    width: 30em;
  }

.modal-window-frame.medium {
    width: 38em;
  }

.modal-window-frame.large {
    width: 50em;
  }

.modal-window-frame.max {
    width: 85vw;
    min-width: 40em;
    max-width: 80em;
  }

.modal-window-frame .modal-window-header,.modal-window-frame .modal-window-content,.modal-window-frame .modal-window-toolbar {
    padding: var(--space-inset-square-l);
  }

.modal-window-frame:has(.modal-window-toolbar) .modal-window-content {
      padding-bottom: 0; /* when toolbar is present, remove duplicate spacing */
    }

/* less modal margin (larger modal) on small displays */

@media screen and (max-height: 1024px) and (max-width: 1440px) {

.modal-window-frame {
    max-height: 90vh;
}

    .modal-window-frame.max {
      max-width: 90vw;
    }
  }

/* Loading indicator shown on top of modal content, to avoid trashing DOM (and tear down components).
   * For example when submitting data to the server for validation, where we may need to return to a
   * form and show an error. In that case we don't want to tear it down in the loading state. */

.modal-window-frame .modal-window-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(0 0% 100%);
    background-color: var(--color-modal-bg); /* hide content */

    /* center spinner */
    display: flex;
    justify-content: center;
    align-items: center;
  }

.modal-window-frame {

  /* pin actions to the bottom */
  display: flex;
  flex-direction: column;

  /* close button */
}

.modal-window-frame .modal-window-close {
    line-height: 1;
    padding: var(--space-inset-square-s);
    cursor: pointer;
    color: hsl(0 0% 20%);
    color: var(--color-link-discreet);
    background-color: inherit;
  }

:is(.modal-window-frame .modal-window-close):hover {
      color: hsl(0 0% 0%);
      color: var(--color-link-discreet-hover);
    }

/* modal header */

.modal-window-frame .modal-window-header {
    border-radius: 0.25em 0.25em 0 0;
    border-radius: var(--misc-subtle-rounding) var(--misc-subtle-rounding) 0 0;
  }

.modal-window-frame .modal-window-header.modal-v2 {
    background-color: hsl(0 0% 97%);
    background-color: var(--color-modal-header-bg);
    display: flex;
    align-items: center;
  }

:is(.modal-window-frame .modal-window-header.modal-v2) .modal-window-heading {
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);
      font-size: var(--font-size-heading3);
      font-weight: bold;
    }

:is(.modal-window-frame .modal-window-header.modal-v2) .modal-window-close {
      margin-left: auto; /* push to the right */
    }

/* when no header is present the close button
   * will float in the right corner, instead of
   * being part of the header element */

.modal-window-frame  > .modal-window-close {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
  }

/* legacy header style (should be removed) */

.modal-window-frame .modal-window-header:not(.modal-v2) {
    background-color: hsl(0 0% 97%);
    background-color: var(--color-modal-header-bg);
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    font-size: var(--font-size-heading3);
    font-weight: bold;
  }

:is(.modal-window-frame .modal-window-header:not(.modal-v2)) .modal-window-close {
      display: hidden; /* not shown in legacy mode, update to v2 if needed */
    }

/* danger style modal */

.modal-window-frame.danger .modal-window-header.modal-v2 {
    color: hsl(0 100% 15%);
    color: var(--color-danger-text);
    background-color: hsl(0 30% 92%);
    background-color: var(--color-danger-bg);
  }

:is(.modal-window-frame.danger .modal-window-header.modal-v2) .modal-window-close {
      color: inherit;
    }

:is(:is(.modal-window-frame.danger .modal-window-header.modal-v2) .modal-window-close):hover {
        color: hsl(0 0% 0%);
        color: var(--color-link-discreet-hover);
      }

/* modal content */

.modal-window-frame .modal-window-content {
    flex-grow: 1;
    overflow-y: auto; /* using overflow here to always keep the header and toolbar visible */
  }

:is(.modal-window-frame .modal-window-content) p:last-child {
      margin-bottom: var(--space-stack-s); /* decrease default margin */
    }

/* modal toolbar */

.modal-window-frame .modal-window-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-s);
  }

:is(.modal-window-frame .modal-window-toolbar) a,:is(.modal-window-frame .modal-window-toolbar) button {
      flex-shrink: 0;
    }

:is(.modal-window-frame .modal-window-toolbar) .secondary {
      margin-left: auto; /* pin to the right */
    }

/* specific modal adjustments */

.modal-window-frame.confirm-modal-component {
    min-height: 10em;
  }

/* The magnifier styles an element to look like a magnifying glass,
 * used to provide magnification of receipt images, via the receipt aide service. */

.magnifier,
.magnifier::after {
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.magnifier.anchor-left,
.magnifier.anchor-left::after {
  border-top-left-radius: 0;
  border-top-right-radius: 50%;
}

.magnifier.anchor-right,
.magnifier.anchor-right::after {
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
}

.magnifier {
  box-shadow: 0 4px 24px 4px hsl(0 0% 10% / 30%);
  box-shadow: var(--misc-window-shadow);
  background-color: hsl(0 0% 100%);
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  border: 2px solid hsl(0 0% 20%);
  border: 2px solid var(--color-magnifier-border);
  height: 200px;
  position: absolute;
  width: 200px;
  z-index: 1000;
  z-index: var(--misc-z-index-interactive);
}

/* glass effect on top of enlarged image */

.magnifier::after {
  background-image: linear-gradient(315deg, hsl(0 0% 100% / 0%), hsl(0 0% 100% / 40%));
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: calc(1000 + 1);
  z-index: calc(var(--misc-z-index-interactive) + 1);
}

.registerable-compact {
  padding: var(--space-inset-square-m);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);

  /* Colored stripe at the edge, to make it easier to identify different kinds of items
   * within a single collection, for example expenses, drives, and trips in a report. */
  position: relative;
}

.registerable-compact::before {
    content: '';
    position: absolute;
    height: calc(100% - calc(var(--space-inset-square-m)) * 2);
    top: var(--space-inset-square-m);
    left: 0;
    width: 4px;
    background-color: hsl(57 83% 81%);
    background-color: var(--color-report);
    border-radius: 8px;
    border-radius: var(--misc-moderate-rounding);
  }

.registerable-compact.expense.is-selected::before {
    background-color: hsl(230 49% 85%);
    background-color: var(--color-expense);
  }

.registerable-compact.expense.is-unselected::before {
    background-color: hsl(230 49% 95%);
    background-color: var(--color-expense-inactive);
  }

.registerable-compact.expense.is-refuse-selected::before {
    background-color: hsl(0 50% 45%);
    background-color: var(--color-danger-signature);
  }

.registerable-compact.refund.is-selected::before {
    background-color: hsl(280 49% 85%);
    background-color: var(--color-refund);
  }

.registerable-compact.refund.is-unselected::before {
    background-color: hsl(280 49% 95%);
    background-color: var(--color-refund-inactive);
  }

.registerable-compact.refund.is-refuse-selected::before {
    background-color: hsl(0 50% 45%);
    background-color: var(--color-danger-signature);
  }

.registerable-compact.drive.is-selected::before {
    background-color: hsl(330 49% 85%);
    background-color: var(--color-drive);
  }

.registerable-compact.drive.is-unselected::before {
    background-color: hsl(330 49% 95%);
    background-color: var(--color-drive-inactive);
  }

.registerable-compact.drive.is-refuse-selected::before {
    background-color: hsl(0 50% 45%);
    background-color: var(--color-danger-signature);
  }

.registerable-compact.trip.is-selected::before {
    background-color: hsl(180 49% 85%);
    background-color: var(--color-trip);
  }

.registerable-compact.trip.is-unselected::before {
    background-color: hsl(180 49% 95%);
    background-color: var(--color-trip-inactive);
  }

.registerable-compact.trip.is-refuse-selected::before {
    background-color: hsl(0 50% 45%);
    background-color: var(--color-danger-signature);
  }

.registerable-compact {

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

.registerable-compact .registerable-row {
    display: flex;
    justify-content: space-between;
  }

:is(.registerable-compact .registerable-row) .registerable-secondary {
      text-align: right;
      margin-left: var(--space-inline-m);
    }

:is(.registerable-compact .registerable-row) .registerable-datum + .registerable-datum::before {
      content: '|';
      content: var(--misc-inline-separator);
      padding: 0 var(--space-inline-xs);
      color: hsl(28 6% 90%);
      color: var(--color-bg-contour);
    }

/* TODO (TECH-4605): Move this styling to the Icon component itself.  */

:is(.registerable-compact .registerable-row) .authorization-icon {
      color: hsl(43 80% 49%);
      color: var(--color-golden-star);
    }

:is(.registerable-compact .registerable-row):first-child {
      font-size: var(--font-size-text-large);
    }

:is(.registerable-compact .registerable-row):last-child {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

:is(.registerable-compact .registerable-row):last-child .registerable-secondary {
        /* increase spacing to registerable-primary to clearly separate the values */
        margin-left: 15%;
      }

.registerable-compact:last-child {
    margin-bottom: var(--space-stack-m);
  }

/* compact registerables are selectable */

.registerable-compact:hover {
    background-color: hsl(28 20% 98%);
    background-color: var(--color-bg-hover);
    cursor: pointer;
  }

.registerable-compact.highlighted {
    background-color: hsl(28 20% 97%);
    background-color: var(--color-bg-select);
  }

.registerable-compact.unrelated {
    opacity: 50%;
  }

.registerable-compact + .registerable-compact {
  margin-top: var(--space-stack-xs);
}

.registerable-full {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-m);
}

.registerable-full .registerable-details-frame {
    flex-basis: 25em;
  }

.registerable-full {
  padding: var(--space-inset-square-l);
  margin-bottom: var(--space-stack-m);

  /* colored border, to make it easier to identify expenses, trips and drives */
  border: 5px solid hsl(0 0% 95%);
  border: 5px solid var(--color-neutral-bg);
  border-radius: 8px;
  border-radius: var(--misc-moderate-rounding);

  /* These colors are slightly different from the compact colors above,
   * because larger areas of color are perceived different from small ones. */
}

.registerable-full.expense.is-selected {
    border-color: hsl(230 49% 85%);
    border-color: var(--color-expense);
  }

.registerable-full.expense.is-unselected {
    border-color: hsl(230 49% 95%);
    border-color: var(--color-expense-inactive);
  }

.registerable-full.expense.is-refuse-selected {
    border-color: hsl(0 50% 45%);
    border-color: var(--color-danger-signature);
  }

.registerable-full.refund.is-selected {
    border-color: hsl(280 49% 85%);
    border-color: var(--color-refund);
  }

.registerable-full.refund.is-unselected {
    border-color: hsl(280 49% 95%);
    border-color: var(--color-refund-inactive);
  }

.registerable-full.refund.is-refuse-selected {
    border-color: hsl(0 50% 45%);
    border-color: var(--color-danger-signature);
  }

.registerable-full.drive.is-selected {
    border-color: hsl(330 49% 85%);
    border-color: var(--color-drive);
  }

.registerable-full.drive.is-unselected {
    border-color: hsl(330 49% 95%);
    border-color: var(--color-drive-inactive);
  }

.registerable-full.drive.is-refuse-selected {
    border-color: hsl(0 50% 45%);
    border-color: var(--color-danger-signature);
  }

.registerable-full.trip.is-selected {
    border-color: hsl(180 49% 85%);
    border-color: var(--color-trip);
  }

.registerable-full.trip.is-unselected {
    border-color: hsl(180 49% 95%);
    border-color: var(--color-trip-inactive);
  }

.registerable-full.trip.is-refuse-selected {
    border-color: hsl(0 50% 45%);
    border-color: var(--color-danger-signature);
  }

.registerable-full .subtle-value {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

.registerable-full .callout-component {
    margin-top: var(--space-stack-s);
    margin-bottom: 0; /* remove default bottom margin on callout-component */
  }

.registerable-full .registerable-header {
    display: flex;
    gap: var(--space-inline-s);
  }

:is(.registerable-full .registerable-header) .registerable-toolbar {
      margin-left: auto;
      justify-content: flex-end; /* TODO when turning toolbar into a component, add an @align property */
      margin-bottom: 0; /* remove default bottom margin on `.toolbar` */
    }

:is(.registerable-full .registerable-header) .registerable-heading {
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);
      font-weight: bold;
      font-size: var(--font-size-heading3);
    }

:is(:is(.registerable-full .registerable-header) .registerable-heading) .registerable-amount {
        font-weight: normal;
      }

.registerable-full .registerable-section-content {
    display: flex;
    gap: var(--space-inline-s);
  }

:is(.registerable-full .registerable-section-content) .empty-state-component {
      min-width: 20em;
    }

.registerable-full .duplicate-warning {
    margin-top: var(--space-stack-xs);
  }

.registerable-full.unrelated {
    opacity: 50%;
  }

.registerable-full.trip {
    --local-timeline-width: 40px; /* cannot use em, since font-size vary for these elements */
    --local-value-width: 150px;
  }

.registerable-full.trip .refection > :first-child {
      margin-right: var(--space-inline-m);
    }

.registerable-full.trip .event > :first-child {
      margin-right: var(--space-inline-m);
    }

.registerable-full.trip .dates-meals {
      flex: 1;
      font-size: var(--font-size-text-large);
    }

:is(.registerable-full.trip .dates-meals) .dates-meals-row + .dates-meals-row {
        margin-top: 0; /* reset default margin between date and event */
      }

:is(.registerable-full.trip .dates-meals) .dates-meals-row + .dates-meals-row.refection {
        margin-top: var(--space-stack-m); /* some extra space between days */
      }

:is(.registerable-full.trip .dates-meals) .dates-meals-row:last-child {
        margin-bottom: var(--space-stack-m);
      }

.registerable-full.trip .refection {
      display: flex;
    }

:is(.registerable-full.trip .refection) .refection-date {
        display: flex;
        flex-flow: column;
        flex-basis: var(--local-timeline-width);
        min-width: var(--local-timeline-width);
      }

.saturday:is(:is(.registerable-full.trip .refection) .refection-date),.sunday:is(:is(.registerable-full.trip .refection) .refection-date) {
          color: hsl(0 100% 30%);
          color: var(--color-text-weekend);
        }

:is(:is(.registerable-full.trip .refection) .refection-date) .refection-date-day {
          font-size: var(--font-size-heading2);
        }

:is(:is(.registerable-full.trip .refection) .refection-date) .refection-date-month {
          text-transform: uppercase;
          font-size: var(--font-size-text);
        }

:is(.registerable-full.trip .refection) .meal-value {
        display: flex;
        flex-direction: column;
        flex-basis: var(--local-value-width);
        font-size: var(--font-size-text-large);
      }

:is(:is(.registerable-full.trip .refection) .meal-value) .meal-label {
          color: hsl(0 0% 41%);
          color: var(--color-text-subtle);
          font-size: var(--font-size-text);
        }

:is(.registerable-full.trip .refection) .meal-value + .meal-value {
        margin-left: var(--space-inline-m);
      }

.registerable-full.trip .event {
      display: flex;
      font-size: var(--font-size-text-small);
    }

:is(.registerable-full.trip .event) .event-time {
        flex-basis: var(--local-timeline-width);
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);

        /* keep AM/PM on same line (but allow overflow into margin if needed) */
        max-width: var(--local-timeline-width);
        white-space: nowrap;
        overflow: visible;
      }

:is(.registerable-full.trip .event) .event-description {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
        /* icon not always present */
      }

:is(:is(.registerable-full.trip .event) .event-description) .icon-component {
          min-width: 1em;
          margin-right: 0.2em;
          margin-right: var(--icon-text-spacing);
        }

.registerable-full.drive .geographic-map-component {
      width: 30em;
    }

.registerable-full .sheet-value-content {
    flex: 1;
  }

:is(.registerable-full .sheet-value-content) .sheet-value-row + .sheet-value-row {
      margin-top: var(--space-stack-xs);
    }

:is(.registerable-full .sheet-value-content) .sheet-value-row:last-child {
      margin-bottom: var(--space-stack-m);
    }

:is(.registerable-full .sheet-value-content) .location {
      line-height: var(--font-line-height-short);
    }

:is(.registerable-full .sheet-value-content) .location > .context {
      font-size: var(--font-size-text-small); /* negate larger font-size on parent element */
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

.registerable-full .expand-content-button {
    margin-top: var(--space-stack-s);
    margin-bottom: var(--space-stack-m);
    font-size: var(--font-size-text);
  }

.expense-receipt-pair-container {
  display: flex;
}

.expense-receipt-pair-container .expense-form {
    flex-basis: 25em;
    flex-shrink: 0;
  }

.refund-receipt-pair-container {
  display: flex;
}

.refund-receipt-pair-container .refund-form {
    flex-basis: 25em;
    flex-shrink: 0;
  }

/* keep in sync with .linked-items-heading and form-heading */

.registerable-section-heading {
  font-family: 'PT Sans Caption', sans-serif;
  font-family: var(--font-caption);
  font-weight: bold;
  font-size: var(--font-size-text);
  margin-bottom: var(--space-stack-s);
}

.stamp {
  border-radius: 10px; /* has to be in px so it doesn't adjust to font-size; */
  position: absolute;
  opacity: 70%;
  text-transform: uppercase;
  z-index: 10;
  z-index: var(--misc-z-index-overlay);
  transform: rotate(10deg);
  padding: var(--space-inset-square-s);
  text-align: center;
  pointer-events: none; /* make it possible to click-through */
  border: 5px solid hsl(0 0% 60%);
  border: 5px solid var(--color-neutral-signature);
  color: hsl(0 0% 60%);
  color: var(--color-neutral-signature);
  font-weight: bold;
  font-size: var(--font-size-stamp);
}

.stamp .secondary {
    display: block;
    font-size: var(--font-size-stamp-secondary);
  }

.stamp.success {
    border-color: hsl(135 50% 40%);
    border-color: var(--color-success-signature);
    color: hsl(135 50% 40%);
    color: var(--color-success-signature);
    opacity: 90%; /* for better contrast */
  }

.stamp.danger {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);
    border-color: hsl(0 50% 45%);
    border-color: var(--color-danger-signature);
  }

/* If we need to make the table more clever, we can switch it over to CSS grid.
 * https://adamlynch.com/flexible-data-tables-with-css-grid/
 * https://rachelandrew.co.uk/archives/2017/07/20/why-display-contents-is-not-css-grid-layout-subgrid/
 * https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
 */

/* table styles must be at root level because the advanced table component need to
 * apply these directly to <table>. */

table.default {
  border-collapse: collapse;
  border-spacing: 0;
}

.full-width table.default {
    width: 100%;
  }

table.default th,table.default td {
    border: none; /* disable border if any (some browsers have them by default) */
    padding: var(--space-inset-square-s);
  }

table.default caption {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    text-align: right;
    font-size: var(--font-size-text-small);
    margin-bottom: var(--space-stack-xs);
  }

:is(table.default thead) tr:last-child {
      border-bottom: 1px solid hsl(28 6% 90%);
      border-bottom: 1px solid var(--color-bg-contour);
    }

:is(table.default thead) th {
      font-size: var(--font-size-text-small);
      text-transform: uppercase;
      color: hsl(0 0% 20%);
      color: var(--color-text);
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);

      /* need to set custom border radius as the background color ignores what's set in table-wrapper */
    }

:is(:is(table.default thead) th):first-child {
        border-top-left-radius: 0.25em;
        border-top-left-radius: var(--misc-subtle-rounding);
      }

:is(:is(table.default thead) th):last-child {
        border-top-right-radius: 0.25em;
        border-top-right-radius: var(--misc-subtle-rounding);
      }

:is(table.default tbody) tr + tr {
      border-top: 1px solid hsl(28 6% 90%);
      border-top: 1px solid var(--color-bg-contour);
    }

:is(table.default tbody) tr:hover {
      background-color: hsl(28 20% 98%);
      background-color: var(--color-bg-hover);
    }

:is(table.default tbody) td.emphasis {
      font-weight: bold;
    }

/* this style is applied to the '<:empty>' named block,
     * if one is passed in and @items is empty. */

:is(table.default tbody) td.empty-state {
      text-align: center;
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

:is(table.default tbody) td.actions {
      text-align: right;
      text-wrap: nowrap;
    }

:is(:is(table.default tbody) td.actions) a {
        display: inline-block; /* prevent underline extending next to icons */
      }

:is(:is(table.default tbody) td.actions) a + a {
        margin-left: var(--space-inline-xs);
      }

:is(:is(table.default tbody) td.actions) .icon-button-component {
        margin: calc(-1 * var(--space-inset-square-xs)) 0; /* counteract some of the icon-button padding */
      }

:is(table.default tbody) .error {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

:is(table.default tfoot) tr:first-child {
      border-top: 1px solid hsl(28 6% 90%);
      border-top: 1px solid var(--color-bg-contour);
    }

:is(table.default tfoot) td {
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);
      font-weight: bold;
    }

/* with no line between table foot rows it looks better
     * if the top/bottom padding is half */

:is(table.default tfoot) tr:first-child td {
      /* the first footer row is adjacent to a line, so don't reduce top padding */
      padding-top: var(--space-inset-square-s);
    }

:is(table.default tfoot) tr:last-child td {
      /* last footer row is adjacent to table edge, so don't reduce bottom padding */
      padding-bottom: var(--space-inset-square-s);
    }

/* first and last child has more specificity and will override these properties */

:is(table.default tfoot) tr td {
      padding-top: calc(var(--space-inset-square-s) / 2);
      padding-bottom: calc(var(--space-inset-square-s) / 2);
    }

.right-aligned-summary:is(table.default tfoot) td {
        text-align: right;
      }

/* encapsulate a group of links or buttons */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-s);

  /* TODO should turn toolbar into a component,
   * where the default block would always go into
   * the "primary" subgroup. That would avoid duplicate
   * gap styling.
   * <Toolbar>
   *  <:primary>
   *    <button {{on 'click' this.something}}>
   *  </:primary>
   *
   *  <:secondary>
   *    <button {{on 'click' this.other}}>
   *  </:secondary>
   * </Toolbar> */
}

.toolbar .primary,.toolbar .secondary {
    display: flex;
    gap: var(--space-inline-s);
    flex-wrap: wrap;
  }

.toolbar  > a,.toolbar  > button,.toolbar  > .toolbar-element {
    flex-shrink: 0;
  }

/* Pin secondary to the right.
   *
   * By setting the margin on the primary element, it will only push
   * the secondary as long as they are on the same row.
   * If the flexbox wrap is in force (and the secondary block is a row below),
   * it won't be pushed and will left-align (which looks better). */

.toolbar .primary {
    margin-right: auto;
  }

.toolbar {

  margin-bottom: var(--space-stack-l);
}

.sort-toolbar {
  text-align: right;
}

.sort-toolbar .selected {
    font-weight: bold;
  }

@keyframes tooltip-appear {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

/* TODO: Remove this style block once the form-instruction instance initializer no longer needs it */

/* TODO: implement form instructions using the tooltip modifier, so we can ditch all of this */

/* form instruction tooltip */

.form-element-instruction {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  background: hsl(210 10% 24%);
  background: var(--color-tooltip-bg);
  box-shadow: 0 4px 16px 4px hsl(0 0% 10% / 10%);
  box-shadow: var(--misc-tooltip-shadow);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px); /* translucency; slightly better text legibility */
  color: hsl(210 10% 85%);
  color: var(--color-tooltip-text);
  padding: var(--space-inset-squish-m);
  pointer-events: none;
  text-align: center;

  /* clear properties that may be inherited */
  font-weight: normal;
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular);
  text-shadow: none;

  max-width: 20em;
  position: absolute;
  z-index: 10000;
  z-index: var(--misc-z-index-flash);
}

.tooltip {
  --local-tooltip-arrow-size: 8px;

  /* if non-clickable text has a tooltip,
   * make it non-selectable (looks better) */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  /* tooltip text */

  z-index: 10000;

  z-index: var(--misc-z-index-flash);
  max-width: 45ch;

  /* dark overlay */
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  background: hsl(210 10% 24%);
  background: var(--color-tooltip-bg);
  box-shadow: 0 4px 16px 4px hsl(0 0% 10% / 10%);
  box-shadow: var(--misc-tooltip-shadow);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px); /* translucency; slightly better text legibility */
  color: hsl(210 10% 85%);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-tooltip);
  padding: var(--space-inset-squish-m);
  pointer-events: none;
  text-align: center;

  /* clear properties that may be inherited */
  font-weight: normal;
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular);
  text-shadow: none;

  /* animation */
  animation-name: tooltip-appear;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;

  /* arrow */
}

.tooltip .tooltip-arrow,.tooltip .tooltip-arrow::before {
    position: absolute;
    width: var(--local-tooltip-arrow-size);
    height: var(--local-tooltip-arrow-size);
    background: inherit;
    box-shadow: inherit;
  }

.tooltip .tooltip-arrow {
    visibility: hidden;
  }

.tooltip .tooltip-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
    box-shadow: none;
  }

/* The CSS code determing the popper position disappears in the production CSS output when using the
   selectors '&[' together with nesting another class (see previous version below). To avoid having
   it mangled by the CSS pre-processors in production, we skip the '&' for nesting in the beginning.

   PREVOUS VERSION:

  &[data-popper-placement^='top'] > .tooltip-arrow {
    bottom: ...
  }
 */

.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
  bottom: calc(-1 * var(--local-tooltip-arrow-size) / 2);
  margin-left: calc(-1 * var(--local-tooltip-arrow-size) / 2);
}

.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
  top: calc(-1 * var(--local-tooltip-arrow-size) / 2);
  margin-left: calc(-1 * var(--local-tooltip-arrow-size) / 2);
}

.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
  right: calc(-1 * var(--local-tooltip-arrow-size) / 2);
  margin-top: calc(-1 * var(--local-tooltip-arrow-size) / 2);
}

.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
  left: calc(-1 * var(--local-tooltip-arrow-size) / 2);
  margin-top: calc(-1 * var(--local-tooltip-arrow-size) / 2);
}

/* –––––––––––––––––––––––––––––––––
   Form look and feel
   (layout goes into forms/_layout)
––––––––––––––––––––––––––––––––– */

/* variables */

:root {
  --form-element-width: 14rem;
  --form-element-width-small: 6.7rem; /* (--space-inline-s + --form-element-width) / 2 */
  --form-element-spacing: 1rem;
}

/* The `.artificial-input` class is used to style Stripe payment/card forms */

/* General styles */

.artificial-input,
select,
textarea,
.simple-select,
.search-select-component .minimized-element {
  width: 14rem;
  width: var(--form-element-width);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  font-family: inherit;
  font-size: var(--font-size-form);
  line-height: var(--font-line-height-base);
  color: hsl(0 0% 20%);
  color: var(--color-text);
  background-color: hsl(0 0% 98%);
  background-color: var(--color-form-bg);
}

.ember-text-field {
  width: 14rem;
  width: var(--form-element-width);
  font-size: var(--font-size-form);
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular);
}

.canonical-input,
.time-field,
.distance-field-component,
.number-field {
  width: 6.7rem;
  width: var(--form-element-width-small);
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular);
  font-size: var(--font-size-form);
  line-height: var(--font-line-height-base);
  color: hsl(0 0% 20%);
  color: var(--color-text);
}

.distance-field-component .ember-text-field {
  width: 6.7rem;
  width: var(--form-element-width-small); /* keep in sync with width of .distance-field-component */
}

/* hide dummy fields (used to fool/disable autocomplete behavior) */

input.dummy-field {
  display: none !important;
}

/* Disable spin buttons (up/down arrows) since they are useless for dates, times and most numeric input. */

input[type='number'],
input[type='time'],
input[type='date'] {
  -moz-appearance: textfield; /* hide in Firefox */
}

/* hide in Chrome and Safari */

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button,
input[type='time']::-webkit-outer-spin-button,
input[type='time']::-webkit-inner-spin-button,
input[type='date']::-webkit-outer-spin-button,
input[type='date']::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

/* Disable input clear button in IE11 and Edge
 * (it auto-appears on the far right, when text has been entered) */

input::-ms-clear {
  display: none;
}

.artificial-input,
input,
textarea,
select,
label {
  line-height: var(--font-line-height-base);
}

.artificial-input,
input,
select,
textarea {
  box-sizing: border-box;
  /* TODO add this globally! */
  /*
  html {
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
  */
  border: 1px solid hsl(0 0% 85%);
  border: 1px solid var(--color-form-border);
  background-color: hsl(0 0% 98%);
  background-color: var(--color-form-bg);
  color: hsl(0 0% 20%);
  color: var(--color-text);
}

.artificial-input::-moz-placeholder, input::-moz-placeholder, textarea::-moz-placeholder {
  color: hsl(0 0% 46%);
  color: var(--color-form-placeholder-text);
}

.artificial-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: hsl(0 0% 46%);
  color: var(--color-form-placeholder-text);
}

/* checkboxes, radioboxes, range and textarea cannot have padding */

.artificial-input,
input:not([type='checkbox'], [type='radio'], [type='range']),
textarea,
select {
  padding: var(--space-inset-square-xs);
}

.artificial-input,
input,
textarea {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
}

textarea {
  /* disable textarea resizing, easily causes glitches in the UI */
  resize: none;
  display: block;
}

.code-input {
  font-family: 'PT Mono', monospace;
  font-family: var(--font-monospace);
}

select {
  /* allow parent to restrict select width */
  max-width: 100%;
}

/* shared across vertical and horizontal forms */

/* When placed in a modal window this margin will interfere with
   * the modal content padding. By not applying margin to last child
   * elements we avoid this issue. */

:is(.form-horizontal,.form-vertical):not(:last-child) {
    margin-bottom: var(--space-stack-m);
  }

:is(.form-horizontal,.form-vertical) .form-header {
    margin-bottom: var(--space-stack-s);
    display: flex;

    /* sync styles with .registerable-section-heading and .linked-items-heading */
  }

:is(:is(.form-horizontal,.form-vertical) .form-header) .form-heading {
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);
      font-weight: bold;
      font-size: var(--font-size-text);
    }

:is(:is(.form-horizontal,.form-vertical) .form-header) .form-toolbar {
      margin-left: auto; /* push right */

      display: flex; /* to ignore whitespace between elements */
      gap: var(--space-inline-s);
    }

/* form sections */

:is(.form-horizontal,.form-vertical) .form-section {
    margin-bottom: var(--space-stack-s);
  }

:is(:is(.form-horizontal,.form-vertical) .form-section) .form-section-header {
      display: flex; /* heading and toolbar on the same line */
      align-items: baseline;
      margin-bottom: var(--space-stack-s);
    }

:is(:is(:is(.form-horizontal,.form-vertical) .form-section) .form-section-header) .form-section-heading {
        font-family: 'PT Sans Caption', sans-serif;
        font-family: var(--font-caption);
        font-size: var(--font-size-text);
        font-weight: bold;
      }

:is(:is(:is(.form-horizontal,.form-vertical) .form-section) .form-section-header) .form-section-toolbar {
        margin-left: auto; /* push right */
      }

:is(:is(.form-horizontal,.form-vertical) .form-section):last-of-type {
      margin-bottom: 0; /* clear margin */
    }

:is(.form-horizontal,.form-vertical) .form-section + .form-section {
    margin-top: var(--space-stack-s);
  }

:is(.form-horizontal,.form-vertical) .form-description {
    font-size: var(--font-size-text-large);
    max-width: var(--font-readable-line-length);
    margin-bottom: var(--space-stack-m);
  }

:is(:is(.form-horizontal,.form-vertical) .form-description) p {
      margin-bottom: var(--space-stack-m);
    }

/* Some forms contain links for form interaction, e.g. "add another email".
   * If these are marked with the 'form-interaction' class they will be disabled
   * along with everything else in a disabled fieldset. Notably, the CancelButton
   * will not be marked as a form-interaction, since it merely navigate away from
   * the form, and shouldn't be disabled. */

:is(:is(.form-horizontal,.form-vertical) fieldset:disabled) a.form-interaction {
      pointer-events: none;
      color: hsl(0 0% 58%);
      color: var(--color-text-disabled);
    }

/* controls */

/* For advanced controls (actions or suggestions) we add this extra class.
     * When browser support for the `:has()` selector is better, or when we have
     * streamlined all form html to always include the .control-element child,
     * we can remove the `control-advanced` class.
     * https://developer.mozilla.org/en-US/docs/Web/CSS/:has
     */

:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced {
      display: flex;
      flex-wrap: wrap; /* used to force suggestions onto a new line */
      align-items: center; /* center action relative to control element */

      /* Used for links and buttons that need to be anchored
       * to the right of a an input field or similar. */
    }

:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-action {
        margin-left: var(--space-inline-s);
      }

:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-suggestions {
        /* Setting flex-basis to 100% of parent, to force a line-break (this element will always occupy a full row).
         * Tried to use a grid layout for .control first, but it's difficult to get it working with
         * full-width elements and actions without weird wrapping in certain cases. */
        flex-basis: 100%;

        margin-top: var(--space-stack-xs); /* cannot use gap, since this element isn't always present */
        font-size: var(--font-size-text-small);
        line-height: 1;
      }

:is(:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-suggestions) .control-suggestion + .control-suggestion::before {
          display: inline-block; /* avoid 'text-decoration: underline' from parent */
          content: '|';
          content: var(--misc-inline-separator);
          /* The dynamic before-element has spacing between itself and the preceeding element,
           * equal to about half a glyph. To offset this space we use a small negative margin. */
          margin-left: -0.5ch;
          padding: 0 var(--space-inline-xs);
          color: hsl(28 6% 90%);
          color: var(--color-bg-contour);
        }

/* full-width control */

.full-width:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-element {
          flex: 1;

          /* set the input, select, etc. to 100% width */
        }

:is(.full-width:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-element)  > * {
            width: 100%;
          }

/* input fields with addon holders, e.g. password field, does not
             automatically expand to 100% width without direct targeting */

:is(.full-width:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-element) .input-addon .input-addon-holder,:is(.full-width:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-element) .input-addon .input-addon-holder input {
            width: 100%;
          }

:is(.full-width:is(:is(:is(.form-horizontal,.form-vertical) .controls) .control.control-advanced) .control-element) textarea {
            /* when textarea is wide it makes sense with more height too */
            min-height: 10em; /* better proportions for wide elements */
          }

/* vertical space between each control */

:is(:is(.form-horizontal,.form-vertical) .controls) .control + .control {
      margin-top: var(--space-stack-s);
    }

/* when we want all controls to share the same "line" */

.controls-inline:is(:is(.form-horizontal,.form-vertical) .controls) {
      flex-direction: row;
      display: flex;
      gap: var(--space-inline-s); /* space between each control */
    }

.controls-inline:is(:is(.form-horizontal,.form-vertical) .controls) .control + .control {
        margin-top: 0; /* clear margin-top set above */
      }

/* element positioning and size */

:is(:is(.form-horizontal,.form-vertical) .controls) textarea {
      min-height: 5em;
    }

.tall:is(:is(:is(.form-horizontal,.form-vertical) .controls) textarea) {
        height: 30em;
      }

.towering:is(:is(:is(.form-horizontal,.form-vertical) .controls) textarea) {
        height: 50em;
      }

/* element wrapping checkbox */

:is(:is(.form-horizontal,.form-vertical) .controls) label.checkbox {
      display: block; /* each checkbox on a new line, when multiple */
      margin-bottom: var(--space-stack-xs);
      /* Label element should be no wider than the checkbox + label text,
       * since it's clickable. If it would span the width of parent we risk
       * ghost clicks toggling the checkbox inadvertently. */
      width: -moz-fit-content;
      width: fit-content;

      /* space between checkbox/radio and label text */
    }

:is(:is(:is(.form-horizontal,.form-vertical) .controls) label.checkbox) input[type='checkbox'],:is(:is(:is(.form-horizontal,.form-vertical) .controls) label.checkbox) input[type='radio'] {
        margin-right: var(--space-inline-xs);
      }

:is(:is(.form-horizontal,.form-vertical) .controls) .help-block-component {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      margin-top: var(--space-stack-xs);
      font-size: var(--font-size-text-small);
      line-height: var(--font-line-height-short); /* help blocks don't need default line height (too much) */
      max-width: var(--font-readable-line-length);
    }

/* form actions */

:is(.form-horizontal,.form-vertical) .form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-inline-s);
    padding-top: var(--space-stack-s); /* separate from form content */
  }

:is(:is(.form-horizontal,.form-vertical) .form-actions) .secondary {
      margin-left: auto; /* push right */
    }

/* primary button should have minimum width,
     * to make it more prominent even with short label */

:is(:is(.form-horizontal,.form-vertical) .form-actions) button.emphasis {
      min-width: 4em;
    }

:is(.form-horizontal,.form-vertical) .error {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);
  }

/* vertical form layout */

.form-vertical .control-group {
    margin-bottom: var(--space-stack-s);
  }

.form-vertical .control-label {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    display: block; /* <label> is inline by default */
    margin-bottom: 0.1rem;
  }

/* horizontal form layout */

.form-horizontal {
  --local-gutter: 10em;
  --local-gutter-long: 15em;
}

.form-horizontal .control-group {
    display: flex;
    /* For `align-items: baseline` to work all children of `.controls` must be block elements,
     * otherwise tall label elements will be misaligned. */
    align-items: baseline;
    margin-bottom: var(--space-stack-m);
  }

:is(.form-horizontal .control-group) .control-label {
      margin-right: var(--space-inline-m);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      flex: 0 0 var(--local-gutter); /* fixed label width */
      line-height: var(--font-line-height-short); /* labels don't need default line-height */
    }

:is(.form-horizontal .control-group) .controls {
      flex-grow: 1; /* needed for .full-width input and textarea */
    }

/* avoid the case when .form-actions is inside a modal window */

.form-horizontal .form-actions:not(.modal-window-frame .form-actions) {
    margin-left: calc(var(--local-gutter) + var(--space-inline-m));
  }

/* long form labels */

.form-horizontal.long-labels .control-group .control-label {
      flex: 0 0 var(--local-gutter-long); /* fixed label width */
    }

/* avoid the case when .form-actions is inside a modal window */

.form-horizontal.long-labels .form-actions:not(.modal-window-frame .form-actions) {
      margin-left: calc(var(--local-gutter-long) + var(--space-inline-m));
    }

/* Special case for this form, as it won't be the last element in the modal (as assumed
   * in the general form styles), here we show the receipt after. */

.expense-form.form-vertical {
    margin-bottom: 0;
  }

.expense-form .expense-item {
    margin-bottom: var(--space-stack-m); /* same space as between control-groups */
  }

:is(.expense-form .expense-item) .divider-component {
      width: 14rem;
      width: var(--form-element-width);
      margin: var(--space-stack-m) 0;
    }

.expense-form .total-vat-item {
    display: flex;
    align-items: flex-end;
    gap: var(--space-inline-s);
  }

:is(.expense-form .total-vat-item) .total-vat-pair {
      display: flex;
      flex-direction: column;
      gap: var(--space-inline-s);
    }

:is(.expense-form .total-vat-item) .control-group {
      margin-bottom: 0;
    }

:is(.expense-form .total-vat-item) .zero-vat-warning {
      padding-left: var(--space-inset-square-s);
    }

.expense-form .add-item-button {
    padding-bottom: var(--space-stack-m); /* same space as between control-groups */
  }

.expense-form .error,.expense-form .controls .help-block-component {
    width: 14rem;
    width: var(--form-element-width);
  }

.expense-form .custom-field-split-button {
    display: inline-block; /* align tooltip properly (button is otherwise smaller than its contents) */
  }

.expense-form .pill-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-stack-xs);
    margin-bottom: var(--space-stack-s);
    gap: var(--space-inline-s);
  }

:is(.expense-form .pill-container) .control + .control {
      margin-top: 0; /* override styles for control */
    }

/* Special case for this form, as it won't be the last element in the modal (as assumed
    * in the general form styles), here we show the receipt after. */

.refund-form.form-vertical {
    margin-bottom: 0;
  }

.trip-form {
  --local-timeline-width: 60px; /* cannot use em, since font-size vary for these elements */
}

.trip-form .step-indicator-component {
    margin-bottom: var(--space-stack-m);
  }

:is(.trip-form .step-indicator-component) .step-label {
      font-size: var(--font-size-text-small);
    }

/* this separator is used to indicate progression, using a series of dots */

.trip-form .segment-entry-separator {
    min-height: var(--space-stack-m);
    border-left: 2px dotted hsl(28 6% 90%);
    border-left: 2px dotted var(--color-bg-contour);
    padding-left: var(--space-inline-s);
    margin-left: var(--space-inline-s);
    margin-bottom: var(--space-stack-s);
    display: flex;
    align-items: center;
  }

:is(.trip-form .segment-entry-separator) .error {
      margin-left: var(--space-inline-s);
    }

/* extra space between departure/arrival pairs, to signify that they are a unit */

.trip-form.time-step .arrival-location-controls ~ .departure-location-controls {
      margin-top: 3rem;
    }

.trip-form.time-step .location {
      align-self: center;
      font-size: var(--font-size-text-large);
      width: 10em;
    }

.trip-form.time-step .departure-location-controls,.trip-form.time-step .arrival-location-controls {
      display: flex;
      gap: var(--space-inline-s);
    }

.trip-form.time-step .departure-location-controls + .segment-entry-separator,.trip-form.time-step .arrival-location-controls.with-arrival-time + .segment-entry-separator,.trip-form.time-step .segment-entry-separator + .arrival-location-controls.with-arrival-time {
      /* reduce distance to time/date inputs, since 'suggestions' and 'labels' are pushing away */
      margin-top: calc(-1 * var(--space-stack-m));
    }

.trip-form.refection-step .refection:not(:first-child) {
      margin-top: var(--space-stack-l);
    }

.trip-form.refection-step .refection {
      display: flex;
    }

:is(.trip-form.refection-step .refection) select {
        width: 13em;
      }

.trip-form.refection-step .refection-date {
      display: flex;
      flex-flow: column;
      flex-basis: var(--local-timeline-width);
      justify-content: flex-end;
    }

.saturday:is(.trip-form.refection-step .refection-date),.sunday:is(.trip-form.refection-step .refection-date) {
        color: hsl(0 100% 30%);
        color: var(--color-text-weekend);
      }

:is(.trip-form.refection-step .refection-date) .refection-date-day {
        font-size: var(--font-size-heading2);
      }

:is(.trip-form.refection-step .refection-date) .refection-date-month {
        text-transform: uppercase;
      }

.trip-form.refection-step .refection-events {
      margin-top: var(--space-stack-s);
    }

.trip-form.refection-step .event {
      display: flex;
      font-size: var(--font-size-text);
    }

:is(.trip-form.refection-step .event) .event-time {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
        flex-basis: var(--local-timeline-width);
      }

/* icon not always present */

:is(:is(.trip-form.refection-step .event) .event-description) .icon-component {
          margin-right: 0.2em;
          margin-right: var(--icon-text-spacing); /* small space between icon and text */
        }

.trip-form.refection-step .event + .event {
      margin-top: var(--space-stack-xs);
    }

.drive-form {
  display: grid;
  grid-column-gap: var(--space-inline-m);
  -moz-column-gap: var(--space-inline-m);
       column-gap: var(--space-inline-m); /* space between label, value and actions */
  grid-template-columns: 21em;
  grid-template-areas:
    'form map'
    'actions map';
}

.drive-form .form-content {
    grid-area: form;
  }

.drive-form .form-actions {
    grid-area: actions;
  }

.drive-form .geographic-map-component {
    grid-area: map;
    height: 100%;
  }

.drive-form .locations {
    display: inline-block;
  }

.hide-btn:is(:is(.drive-form .locations) .location-field-row,:is(.drive-form .locations) .location-add-row) .hidden {
        visibility: hidden; /* needs to take up space so button is aligned at far right */
      }

:is(.drive-form .locations) .location-field-row {
      display: flex;
      gap: var(--space-inline-s);
      align-items: center;
    }

:is(.drive-form .locations) .location-add-row {
      display: flex;
      flex-direction: row-reverse;
      margin: -0.4rem 0 -0.8rem; /* reduce gap between control-groups */
    }

:is(.drive-form .locations) .return-trip-button {
      margin-bottom: var(--space-stack-m); /* same space as between control-groups */
    }

/* shared */

button {
  display: inline-block;
  min-width: 3em;
  padding: var(--misc-form-element-vertical) var(--misc-form-element-horizontal);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);

  font-size: var(--font-size-button);
  font-family: 'PT Sans Caption', sans-serif;
  font-family: var(--font-caption);
  line-height: 1;
  text-align: center; /* useful along with min-width */

  background-color: hsl(0 0% 96%);

  background-color: var(--color-button-bg);
  color: hsl(0 0% 20%);
  color: var(--color-button-text);
  border: 1px solid hsl(0 0% 90%);
  border: var(--misc-form-element-border-width) solid var(--color-button-border);
  box-shadow: 0 1px 2px 0 hsl(0 0% 25% / 10%);
  box-shadow: var(--misc-form-element-shadow) var(--color-button-shadow);
}

button.small {
    padding: var(--space-inset-squish-s);
    font-size: var(--font-size-text-small);

    /* larger click area for mobile */
  }

.mobile button.small {
      padding: var(--space-inset-squish-l);
      box-shadow: none;
    }

button .icon-component {
    margin-right: 0.2em;
    margin-right: var(--icon-text-spacing);
  }

.desktop button:hover {
    /* only allow hover on desktop to avoid stuck hover states in mobile that
       doesn't clear properly on scroll when using ActionMenu */
    cursor: pointer;

    color: hsl(0 0% 20%);

    color: var(--color-button-text);
    background-color: hsl(0 0% 92%);
    background-color: var(--color-button-hover-bg);
    box-shadow: 0 2px 3px 0 hsl(0 0% 25% / 10%);
    box-shadow: var(--misc-form-element-shadow-hover) var(--color-button-shadow);
  }

button:active {
    color: hsl(0 0% 20%);
    color: var(--color-button-text);
    background-color: hsl(0 0% 85%);
    background-color: var(--color-button-active-bg);
    box-shadow: none;
  }

button:focus-visible {
    background-color: hsl(210 55% 98%);
    background-color: var(--color-button-focus-bg);
  }

/* inside a disabled fieldset or disabled manually
   * (pseudo-selector for <button> and attribute-selector to support <a>) */

fieldset:disabled button,button:disabled {
    /* by disabling pointer events via CSS we don't need to style
     * the active and hover states. Plus it's unclickable. */
    pointer-events: none;
    cursor: not-allowed;

    color: hsl(0 0% 70%);

    color: var(--color-button-disabled-text);
    background-color: hsl(0 0% 96%);
    background-color: var(--color-button-disabled-bg);
    box-shadow: none;
    border-color: hsl(0 0% 96%);
    border-color: var(--color-button-disabled-bg);
  }

/* primary button style when we want to highlight a button
   * (e.g. in a form with multiple buttons) */

button.emphasis {
    color: hsl(0 0% 100%);
    color: var(--color-button-emphasis-text);
    background-color: hsl(210 55% 40%);
    background-color: var(--color-button-emphasis-bg);
    box-shadow: 0 1px 2px 0 hsla(210 25% 25% / 15%);
    box-shadow: var(--misc-form-element-shadow) var(--color-button-emphasis-shadow);
    border-color: hsl(210 55% 40%);
    border-color: var(--color-button-emphasis-bg);
  }

button.emphasis:hover {
      background-color: hsl(210 55% 35%);
      background-color: var(--color-button-emphasis-hover-bg);
      box-shadow: 0 2px 3px 0 hsla(210 25% 25% / 15%);
      box-shadow: var(--misc-form-element-shadow-hover) var(--color-button-emphasis-shadow);
      border-color: hsl(210 55% 35%);
      border-color: var(--color-button-emphasis-hover-bg);
    }

button.emphasis:active {
      background-color: hsl(210 55% 30%);
      background-color: var(--color-button-emphasis-active-bg);
      border-color: hsl(210 55% 30%);
      border-color: var(--color-button-emphasis-active-bg);
      box-shadow: none;
    }

button.emphasis:focus-visible {
      background-color: hsl(210 55% 45%);
      background-color: var(--color-button-emphasis-focus-bg);
    }

fieldset:disabled button.emphasis,button.emphasis[disabled],button.emphasis:disabled {
      color: hsl(0 0% 98%);
      color: var(--color-button-emphasis-disabled-text);
      background-color: hsl(210 35% 75%);
      background-color: var(--color-button-emphasis-disabled-bg);
      box-shadow: none;
      border-color: hsl(210 35% 75%);
      border-color: var(--color-button-emphasis-disabled-bg);
    }

button.danger {
    color: hsl(0 50% 45%);
    color: var(--color-button-danger-text);
  }

fieldset:disabled button.danger,button.danger:disabled {
      color: hsl(0 24% 71%);
      color: var(--color-button-danger-disabled-text);
    }

button.danger.emphasis {
    color: hsl(0 0% 100%);
    color: var(--color-button-danger-emphasis-text);
    background-color: hsl(0 50% 45%);
    background-color: var(--color-button-danger-emphasis-bg);
    box-shadow: 0 1px 2px 0 hsl(0 40% 30% / 15%);
    box-shadow: var(--misc-form-element-shadow) var(--color-button-danger-emphasis-shadow);
    border-color: hsl(0 50% 45%);
    border-color: var(--color-button-danger-emphasis-bg);
  }

fieldset:disabled button.danger.emphasis,button.danger.emphasis:disabled {
      color: hsl(0 0% 98%);
      color: var(--color-button-emphasis-disabled-text);
      background-color: hsl(0 30% 70%);
      background-color: var(--color-button-danger-emphasis-disabled-bg);
      box-shadow: none;
      border-color: hsl(0 30% 70%);
      border-color: var(--color-button-danger-emphasis-disabled-bg);
    }

button.danger.emphasis:hover {
      background-color: hsl(0 50% 40%);
      background-color: var(--color-button-danger-emphasis-hover-bg);
      box-shadow: 0 2px 3px 0 hsl(0 40% 30% / 15%);
      box-shadow: var(--misc-form-element-shadow-hover) var(--color-button-danger-emphasis-shadow);
      border-color: hsl(0 50% 40%);
      border-color: var(--color-button-danger-emphasis-hover-bg);
    }

button.danger.emphasis:active {
      background-color: hsl(0 50% 35%);
      background-color: var(--color-button-danger-emphasis-active-bg);
      box-shadow: none;
      border-color: hsl(0 50% 35%);
      border-color: var(--color-button-danger-emphasis-active-bg);
    }

button.danger.emphasis:focus-visible {
      background-color: hsl(0 50% 50%);
      background-color: var(--color-button-danger-emphasis-focus-bg);
    }

/* iOS needs a button element for the 'go' button of the virtual keyboard to work.
 * This button is invisible and super-small. */

.hidden-button {
  position: absolute;
  visibility: hidden;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

/* make sure that space between icon and text is consistent for buttons and loading-button-component */

button .icon-component {
    margin-right: 0.2em;
    margin-right: var(--icon-text-spacing); /* small space between icon and text */
  }

/* Input Addons
 * (used for details adjacent to input fields; control buttons or extra data)
 * inspiration: http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/ */

.input-addon-inline,
.input-addon {
  display: inline-flex;
}

.mobile :is(.input-addon-inline,.input-addon) {
    display: flex;
  }

/* avoid setting a border because full width input forms already have a border */

.suppress-border:is(.input-addon-inline,.input-addon) .input-addon-item,.suppress-border:is(.input-addon-inline,.input-addon):focus-within {
      border-radius: 0;
      border: none;
    }

/* disable focus on the input element itself */

:is(.input-addon-inline,.input-addon) .input-addon-holder input:focus {
    outline: none;
  }

/* apply focus outline on the outer element,
   * such that it'll wrap the addon portion too */

:is(.input-addon-inline,.input-addon):focus-within {
    width: auto;
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    outline: 2px solid hsl(210 55% 40%);
    outline: var(--misc-focus-outline);
  }

:is(.input-addon-inline,.input-addon) .input-addon-holder:not(:first-child) input,:is(.input-addon-inline,.input-addon) .input-addon-field:not(:first-child) {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

:is(.input-addon-inline,.input-addon) .input-addon-holder:not(:last-child) input,:is(.input-addon-inline,.input-addon) .input-addon-field:not(:last-child) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

.mobile :is(:is(.input-addon-inline,.input-addon) .input-addon-holder) {
      flex: 1;
    }

:is(:is(.input-addon-inline,.input-addon) .input-addon-holder) input {
      height: 100%;
    }

[disabled]:is(:is(:is(.input-addon-inline,.input-addon) .input-addon-holder) input),:is(:is(:is(.input-addon-inline,.input-addon) .input-addon-holder) input):disabled {
        color: hsl(0 0% 58%);
        color: var(--color-form-overlay-disabled-text);
        border-color: hsl(0 0% 90%);
        border-color: var(--color-form-overlay-disabled-border);
      }

:is(.input-addon-inline,.input-addon) .input-addon-item {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    background-color: hsl(0 0% 90%);
    background-color: var(--color-form-input-addon-item-bg);
    border: 1px solid hsl(0 0% 85%);
    border: 1px solid var(--color-form-border);
    padding: var(--space-inset-square-xs);
    display: flex;
    align-items: center;
  }

.disabled:is(:is(.input-addon-inline,.input-addon) .input-addon-item) {
      background-color: hsl(0 0% 95%);
      background-color: var(--color-form-overlay-disabled-bg);
      color: hsl(0 0% 58%);
      color: var(--color-form-overlay-disabled-text);
      border-color: hsl(0 0% 90%);
      border-color: var(--color-form-overlay-disabled-border);
    }

:is(.input-addon-inline,.input-addon) .input-addon-item:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

:is(.input-addon-inline,.input-addon) .input-addon-item:not(:last-child) {
    border-radius: 0;
    border-right: none;
  }

/* sync styles with .form-heading and .registerable-section-heading */

.linked-items .linked-items-heading {
    margin-bottom: var(--space-stack-s);
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    font-weight: bold;
    font-size: var(--font-size-text);
  }

.linked-items .linked-items-group {
    margin-bottom: var(--space-stack-m);

    /* sync styles with .data-sheet-label and .control-label */
  }

:is(.linked-items .linked-items-group) .label {
      font-size: var(--font-size-form-label);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      display: block;
      margin-bottom: 0.1rem;
      line-height: var(--font-line-height-base);
    }

:is(.linked-items .linked-items-group) .items {
      display: flex;
      flex-direction: column;
      gap: var(--space-stack-xs);
    }

:is(:is(.linked-items .linked-items-group) .items) button {
        width: -moz-fit-content;
        width: fit-content;
      }

.accordion-component {
  --local-padding: var(--space-stack-s) var(--space-inline-m);
  border: 1px solid hsl(28 6% 90%);
  border: 1px solid var(--color-bg-contour);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
}

.accordion-component.collapsed:hover {
    background-color: hsl(28 20% 98%);
    background-color: var(--color-bg-hover);
  }

.accordion-component .wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-inline-s);
    padding: var(--local-padding);
    cursor: pointer;
  }

:is(.accordion-component .wrapper) .expand-icon {
      margin-left: auto;
    }

.accordion-component .content {
    padding: var(--local-padding);
    color: hsl(0 0% 20%);
    color: var(--color-text);
  }

.action-menu-component {
  /* constrain the clickable area to match the size of the trigger element
     to prevent unintended clicks */
  max-width: -moz-fit-content;
  max-width: fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}

.action-menu-component-popover {
  padding: var(--space-inset-square-s);
}

.action-menu-component-popover .action-menu-entry {
    display: flex;
    align-items: center;
    gap: var(--space-inline-s);
    padding: var(--space-inset-squish-m);
    cursor: pointer;
  }

:is(.action-menu-component-popover .action-menu-entry):hover {
      background-color: hsl(28 20% 98%);
      background-color: var(--color-bg-hover);
    }

.danger:is(.action-menu-component-popover .action-menu-entry) {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

.advanced-table-column-selector {
  padding: var(--space-inset-square-m);
}

.advanced-table-column-selector .label {
    margin-bottom: var(--space-stack-xs);
  }

.advanced-table-component {
  --local-shadow-width: 10px;
}

.advanced-table-component .column-selector-toggle {
    margin-bottom: var(--space-stack-xs);
  }

:is(.advanced-table-component .column-selector-toggle) .toggle {
      display: block;
      margin-left: auto; /* align right */
    }

.advanced-table-component .advanced-table-container {
    position: relative;

    /* only show scroll effect at the right border when there are no actions */
  }

.show-scroll-effect:is(.advanced-table-component .advanced-table-container):not(:has(.actions))::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--local-shadow-width);
      height: 100%;
      background-image: linear-gradient(to left, hsl(0 0% 10% / 8%), transparent);
      background-image: linear-gradient(to left, var(--color-table-shadow), transparent);
      z-index: calc(0 + 1);
      z-index: calc(var(--misc-z-index-default) + 1); /* ensure background colors doesn't cover shadow */
    }

:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper {
      position: relative;
      overflow-x: auto;
      white-space: nowrap;
      border: 1px solid hsl(28 6% 90%);
      border: 1px solid var(--color-bg-contour);
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
    }

:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table {
        margin: 0;

        /* cannot truncate fixed and actions since that would hide
           the borders on horizontal scroll */
      }

:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) td:not(.actions,.fixed) {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

.column-expanded:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) td:not(.actions,.fixed)) {
            overflow: visible;
            white-space: normal;
          }

.truncated:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) td:not(.actions,.fixed)) {
            cursor: pointer;
          }

:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .fixed,:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .actions {
          /* The 'position: sticky' property can cause the border between fixed and action cells to
              disappear in Chrome. This happens because the sticky positioning (sometimes) moves down
              the cells for 1px, and as the cells have have a background color, they overlap the border
              below. The bug is specific to certain conditions, such as when a stripe appears above.
              Should be monitored for changes in Chrome before using this table everywhere. Could perhaps
              remove the fixed attribute.
              https://issues.chromium.org/issues/329702833 */
          position: sticky;
          background-color: hsl(0 0% 100%);
          background-color: var(--color-bg);

          /* add shadows when horizontal scroll is active */
        }

.show-scroll-effect:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .fixed,:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .actions)::before {
            content: '';
            position: absolute;
            top: 0;
            width: var(--local-shadow-width);
            height: 100%;
          }

:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .fixed {
          left: 0;
        }

.show-scroll-effect:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .fixed)::before {
            right: calc(var(--local-shadow-width) * -1);
            background: linear-gradient(to right, hsl(0 0% 10% / 8%), transparent);
            background: linear-gradient(to right, var(--color-table-shadow), transparent);
          }

:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .actions {
          right: -1px; /* ensure actions is touching the edge to prevent content from shining through to the right */
        }

.show-scroll-effect:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) .actions)::before {
            left: calc(var(--local-shadow-width) * -1);
            background: linear-gradient(to left, hsl(0 0% 10% / 8%), transparent);
            background: linear-gradient(to left, var(--color-table-shadow), transparent);
          }

/* as fixed and actions need background-color to avoid overlapping content,
          they don't change color on row hover */

:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) tr:hover) td.fixed,:is(:is(:is(:is(.advanced-table-component .advanced-table-container) .advanced-table-wrapper) .advanced-table) tr:hover) td.actions {
            background-color: hsl(28 20% 98%);
            background-color: var(--color-bg-hover);
          }

/* keep in sync with captions in table */

.advanced-table-component .caption {
    margin-top: var(--space-stack-xs);
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

/* ensure that the column width remains constant regardless of the content size */

.advanced-table-component .width-xxs {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
  }

.advanced-table-component .width-xs {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }

.advanced-table-component .width-s {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }

.advanced-table-component .width-m {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }

.advanced-table-component .width-l {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }

.advanced-table-component .width-xl {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
  }

.callout-indicator-component .info {
    color: hsl(210 50% 42%);
    color: var(--color-info-signature);
  }

.callout-indicator-component .warning {
    color: hsl(35 80% 50%);
    color: var(--color-warning-signature);
  }

.callout-indicator-component .danger,.callout-indicator-component .block {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);
  }

.checkbox-component {
  color: hsl(0 0% 41%);
  color: var(--color-text-subtle);
  accent-color: hsl(210 55% 40%);
  accent-color: var(--color-select-signature);
}

.code-example-component {
  background-color: hsl(28 2% 96%);
  background-color: var(--color-bg-container);
  font-family: 'PT Mono', monospace;
  font-family: var(--font-monospace);
  overflow-x: auto; /* enable scrollbar */
  text-align: left; /* override any parent centering */
  padding: var(--space-inset-square-s);
}

.collection-component .collection-item {
    display: flex;
    gap: var(--space-inline-s);
    align-items: center;
    padding: var(--space-stack-s) 0;
  }

.mobile :is(.collection-component .collection-item) {
      padding: var(--space-stack-m) 0;
    }

:is(.collection-component .collection-item):last-child {
      margin-bottom: var(--space-stack-m);
    }

.mobile :is(.collection-component .collection-item):last-child {
        padding-bottom: 0;
      }

:is(.collection-component .collection-item) .collection-primary {
      font-size: var(--font-size-text-large);
    }

:is(.collection-component .collection-item) .collection-secondary,:is(.collection-component .collection-item) .collection-tertiary {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

:is(.collection-component .collection-item) .collection-secondary {
      font-size: var(--font-size-text);
    }

:is(.collection-component .collection-item) .collection-tertiary {
      font-size: var(--font-size-text-small);
    }

:is(.collection-component .collection-item) .collection-actions {
      flex: none;
      margin-left: auto;
    }

.mobile :is(:is(.collection-component .collection-item) .collection-actions) a {
        color: hsl(0 0% 20%);
        color: var(--color-text); /* override link color */
      }

.configuration-controls-component .configuration-controls-entry + .configuration-controls-entry {
    border-top: 1px solid hsl(28 6% 90%);
    border-top: 1px solid var(--color-bg-contour);
  }

.configuration-controls-component .configuration-controls-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-m);
    padding: var(--space-stack-s) 0;
  }

.mobile :is(.configuration-controls-component .configuration-controls-entry) {
      padding: var(--space-stack-m) 0;
    }

.configuration-controls-component .configuration-controls-entry-description {
    max-width: var(--font-readable-line-length);
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-size: var(--font-size-text-small);

    /* This is only relevant for long words, long sentences already wrap well.
     * Force-wrapping them to avoid breaking the layout. */
    overflow-wrap: break-word;
  }

.count-badge-component[data-count='0'] {
  display: none;
}

.count-badge-component {
  display: inline-block;
  border-radius: 50%;
  background-color: hsl(0 0% 87%);
  background-color: var(--color-counter-bg);
  color: hsl(0 0% 20%);
  color: var(--color-counter-text);
  min-width: 1em;
  min-height: 1em;
  line-height: 1;
  font-size: var(--font-size-text-small);
  font-weight: normal;
  padding: var(--space-inset-square-xs);
  text-align: center;
  font-family: 'PT Mono', monospace;
  font-family: var(--font-monospace);
}

.count-badge-component.emphasis {
    background-color: hsl(0 50% 45%);
    background-color: var(--color-counter-emphasis-bg);
    color: hsl(0 0% 100%);
    color: var(--color-counter-emphasis-text);
  }

.count-badge-component.small {
    font-size: var(--font-size-navigation);
  }

.count-badge-component.compact {
    --local-dot-size: 8px;

    min-width: 0;

    min-width: initial;
    min-height: 0;
    min-height: initial;
    width: 8px;
    width: var(--local-dot-size);
    height: 8px;
    height: var(--local-dot-size);
    padding: 0;
    pointer-events: none; /* avoid shadowing the link that this badge is often covers */
  }

/* NOTE: We normally don't override classes within an inherited component (SearchSelect), but
     * as 'primary' & 'secondary' are yielded as named blocks and it's currently not possible to
     * assign additional classes to a named block from the outside, it must be done like this. */

:is(.country-select-component .country-select-list) .list-item-content {
      display: flex;
      align-items: baseline; /* counteract baseline variations between font sizes */
    }

:is(:is(.country-select-component .country-select-list) .list-item-content) .primary {
        flex: 1;
      }

:is(:is(.country-select-component .country-select-list) .list-item-content) .secondary {
        margin-left: var(--space-inline-s);
        font-family: 'PT Mono', monospace;
        font-family: var(--font-monospace); /* make all country codes equal width */
        text-transform: uppercase; /* traditionally shown in upper case, e.g. GB */
      }

.css-variable-component {
  display: inline-flex;
  align-items: center;
}

.css-variable-component .color-preview {
    width: 1.5em;
    height: 1.5em;
    margin-right: var(--space-inline-xs);
  }

/* NOTE: We normally don't override classes within an inherited component (SearchSelect), but
     * as 'primary' & 'secondary' are yielded as named blocks and it's currently not possible to
     * assign additional classes to a named block from the outside, it must be done like this. */

:is(.currency-select-component .currency-select-list) .list-item-content {
      display: flex;
      align-items: baseline; /* counteract baseline variations between font sizes */
    }

:is(:is(.currency-select-component .currency-select-list) .list-item-content) .primary {
        flex: 1;
      }

:is(:is(.currency-select-component .currency-select-list) .list-item-content) .secondary {
        margin-left: var(--space-inline-s);
        font-family: 'PT Mono', monospace;
        font-family: var(--font-monospace); /* make all currency codes equal width */
        text-transform: uppercase; /* traditionally shown in upper case, e.g. SEK */
      }

.divider-component {
  width: 100%;
  border-top: 1px solid hsl(28 6% 90%);
  border-top: 1px solid var(--color-bg-contour);
  margin: var(--space-stack-l) 0;
}

.divider-component.short {
    margin: var(--space-stack-m) 0;
  }

.divider-component.tall {
    margin: var(--space-stack-xl) 0;
  }

.fake-progress-bar-component {
  display: flex;
  justify-content: center;
  width: 100%;
}

.feedback-rating-component {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.feedback-rating-component .heading {
    font-size: var(--font-size-heading4);
    text-align: center;
    margin-bottom: var(--space-stack-s);
  }

.feedback-rating-component .completed {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--space-stack-s);
    margin-bottom: var(--space-stack-l);
  }

:is(.feedback-rating-component .completed) .icon-group {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-inline-xs);
    }

:is(:is(.feedback-rating-component .completed) .icon-group) .star {
        color: hsl(43 80% 49%);
        color: var(--color-golden-star);
        font-size: calc(var(--font-line-height-short) * 0.9em);
      }

.star1:is(:is(:is(.feedback-rating-component .completed) .icon-group) .star) {
          align-self: flex-start;
        }

.star2:is(:is(:is(.feedback-rating-component .completed) .icon-group) .star) {
          align-self: flex-end;
          margin-left: var(--space-inline-xs);
        }

:is(:is(.feedback-rating-component .completed) .icon-group) .party-horn {
        font-size: calc(var(--font-line-height-short) * 2em);
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

:is(.feedback-rating-component .completed) .message {
      font-size: var(--font-size-text-large);
    }

.feedback-rating-component .follow-up {
    width: 100%;
  }

:is(.feedback-rating-component .follow-up) .control-label {
      text-align: left;
    }

:is(.feedback-rating-component .follow-up) textarea {
      width: 100%;
      max-width: 500px;
      min-width: 350px;
      min-height: 3em;
      background-color: hsl(0 0% 100%);
      background-color: var(--color-bg);
      margin-bottom: var(--space-stack-xs);
    }

.mobile .feedback-rating-component {
    width: auto; /* prevent component from being too narrow */
  }

:is(:is(.mobile .feedback-rating-component) .follow-up) textarea {
        min-width: auto; /* prevent textarea from being too wide */
      }

.form-element-range-component {
  --local-track-height: 0.5rem;
  --local-thumb-height: 1rem;

  /* reset appearence */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none; /* remove default border */

  cursor: pointer;
  border-radius: 1rem;
  height: 0.5rem;
  height: var(--local-track-height);

  width: 100%;
  max-width: 20em;

  background: hsl(197 40% 93%);

  background: var(--color-select-bg);
  background-image: linear-gradient(hsl(210 55% 40%), hsl(210 55% 40%));
  background-image: linear-gradient(var(--color-select-signature), var(--color-select-signature));
  background-size: 0% 100%; /* this will be modified by JS, when the range slider is used */
  background-repeat: no-repeat;

  /* track styles */
}

.form-element-range-component::-webkit-slider-runnable-track {
    height: var(--local-track-height);
    border-radius: 1rem;
  }

.form-element-range-component::-moz-range-track {
    height: var(--local-track-height);
    border-radius: 1rem;
  }

/* thumb styles */

.form-element-range-component::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    height: var(--local-thumb-height);
    width: var(--local-thumb-height);

    /* center thumb with (track height / 2) - (thumb height /2) */
    margin-top: calc(calc(var(--local-track-height) / 2) - calc(var(--local-thumb-height) / 2));

    background-color: hsl(210 55% 40%);

    background-color: var(--color-select-signature);
    box-shadow: 0 1px 2px 0 hsla(210 25% 25% / 15%);
    box-shadow: var(--misc-form-element-shadow) var(--color-button-emphasis-shadow);

    border-radius: 50%; /* circular thumb */
  }

.form-element-range-component::-moz-range-thumb {
    border: none;
    border-radius: 1rem;
    background-color: hsl(210 55% 40%);
    background-color: var(--color-select-signature);
    height: var(--local-thumb-height);
    width: var(--local-thumb-height);
  }

.form-element-static-value-component.empty {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
  }

.handbooks-component .segmented-control-component {
    margin-bottom: var(--space-stack-m);
  }

.help-resources-component .section-heading {
    font-size: var(--font-size-text-large);
    font-weight: bold;
  }

.help-resources-component p {
    max-width: var(--font-readable-line-length);
  }

.help-resources-component .support-sections {
    display: flex;
    gap: var(--space-inline-m);
  }

:is(.help-resources-component .support-sections) .section {
      background-color: hsl(0 0% 98%);
      background-color: var(--color-bg-container-discreet);
      border-radius: 8px;
      border-radius: var(--misc-moderate-rounding);
      padding: var(--space-inset-square-m);
    }

:is(:is(.help-resources-component .support-sections) .section) p {
        margin-top: var(--space-stack-m);
      }

:is(:is(.help-resources-component .support-sections) .section) a {
        display: block;
      }

:is(:is(:is(.help-resources-component .support-sections) .section) a) + a {
          margin-top: var(--space-stack-xs);
        }

:is(:is(.help-resources-component .support-sections) .section) .company-name {
        font-weight: bold;
      }

.help-resources-component .article-section {
    margin-bottom: var(--space-stack-xl);
  }

:is(.help-resources-component .article-section) ul {
      margin-top: var(--space-stack-m);
    }

/* TODO (mobile-ui-refresh) remove this block after we removed card class */

:is(.mobile .help-resources-component) p {
      text-align: left;
      padding: 0;
    }

:is(.mobile .help-resources-component) p {
      margin: var(--space-stack-m) 0;
    }

:is(.mobile .help-resources-component) .support-sections {
      flex-direction: column;
    }

/* Using fixed width assumes larger font-sizes aren't used and that overflow is
   * visible, but the way this is currently used (in navigation) this is not an issue,
   * as there's a margin area next to the icon into which it can overflow.
   * If these assumptions don't hold and this breaks down visually we could use 'em' here
   * instead of pixels, but those are harder to get just right. */

.icon-component.fixed {
    width: 16px;
    width: var(--icon-grid-size);

    /* Assuming that any use of fixed size icons will also want
     * them centered, which makes sense for use in navigation.
     * If we findourselves needing left- or right-aligned icons too,
     * this could be introduced via an `@align='left'` component argument. */
    text-align: center;
  }

button.icon-button-component {
  padding: var(--space-inset-square-s);
  text-align: center;
  font-size: 1rem;
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);

  color: hsl(210 55% 40%);

  color: var(--color-link);
  cursor: pointer;

  /* remove initial button styling */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-width: auto;
  height: -moz-fit-content;
  height: fit-content;
  background-color: transparent;
  background-color: initial;
  border: none;
  box-shadow: none;
}

button.icon-button-component:active,.desktop button.icon-button-component:hover {
    /* only allow hover on desktop to avoid stuck hover states in mobile that
       doesn't clear properly on scroll when using ActionMenu */
    background-color: hsl(197 40% 93%);
    background-color: var(--color-select-bg);
    color: hsl(210 55% 40%);
    color: var(--color-select-signature);
    box-shadow: none; /* remove initial button styling */
  }

button.icon-button-component:focus {
    color: hsl(210 55% 40%);
    color: var(--color-select-signature);
  }

button.icon-button-component.danger {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);

    /* remove initial button styling */
    background-color: transparent;
    background-color: initial;
    border: none;
  }

button.icon-button-component.danger:hover {
      background-color: hsl(0 30% 92%);
      background-color: var(--color-danger-bg);
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

button.icon-button-component.subtle {
    font-size: var(--font-size-text);
    padding: var(--space-inset-square-xs); /* reduce padding to make button smaller so it can be used in a table */
  }

button.icon-button-component:disabled {
    background-color: transparent;
  }

button.icon-button-component .icon-component {
    width: 16px;
    width: var(--icon-grid-size);
    margin: 0; /* remove margin from button styles */
  }

.icon-placeholder-component {
  font-size: 6rem;
}

.inline-badge-component {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  display: inline-block;
  padding: 0 0.5em;
  font-size: inherit;
  font-weight: normal;
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular);
  line-height: 1.5;
  height: -moz-fit-content;
  height: fit-content;
  white-space: nowrap;

  /* neutral if no type is chosen */
  background-color: hsl(0 0% 95%);
  background-color: var(--color-neutral-bg);
  color: hsl(0 0% 41%);
  color: var(--color-neutral-text);
}

.inline-badge-component.success {
    background-color: hsl(135 30% 92%);
    background-color: var(--color-success-bg);
    color: hsl(135 100% 15%);
    color: var(--color-success-text);
  }

.inline-badge-component.danger {
    background-color: hsl(0 30% 92%);
    background-color: var(--color-danger-bg);
    color: hsl(0 100% 15%);
    color: var(--color-danger-text);
  }

.inline-badge-component.warning {
    background-color: hsl(35 80% 90%);
    background-color: var(--color-warning-bg);
    color: hsl(36 100% 15%);
    color: var(--color-warning-text);
  }

.inline-badge-component.info {
    background-color: hsl(210 30% 91%);
    background-color: var(--color-info-bg);
    color: hsl(210 100% 15%);
    color: var(--color-info-text);
  }

.inline-badge-component.alpha {
    color: hsl(346 90% 66%);
    color: var(--color-swatch-alpha);
  }

.inline-badge-component.beta {
    color: hsl(210 80% 52%);
    color: var(--color-swatch-beta);
  }

.inline-badge-component.gamma {
    color: hsl(169 50% 41%);
    color: var(--color-swatch-gamma);
  }

.inline-badge-component.delta {
    color: hsl(35 81% 44%);
    color: var(--color-swatch-delta);
  }

.inline-badge-component.epsilon {
    color: hsl(280 80% 56%);
    color: var(--color-swatch-epsilon);
  }

.inline-badge-component.zeta {
    color: hsl(74 75% 34%);
    color: var(--color-swatch-zeta);
  }

/* sizes */

.inline-badge-component.small {
    font-size: var(--font-size-text-small);
  }

.inline-badge-component.medium {
    font-size: var(--font-size-text);
  }

.inline-badge-component.large {
    font-size: var(--font-size-text-large);
  }

/* inverted styles */

.inline-badge-component.inverted {
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.inline-badge-component.inverted.neutral {
      background-color: hsl(0 0% 87%);
      background-color: var(--color-bg-container-evident);
      color: hsl(0 0% 20%);
      color: var(--color-text);
    }

.inline-badge-component.inverted.success {
      background-color: hsl(135 50% 40%);
      background-color: var(--color-success-signature);
    }

.inline-badge-component.inverted.danger {
      background-color: hsl(0 50% 45%);
      background-color: var(--color-danger-signature);
    }

.inline-badge-component.inverted.warning {
      background-color: hsl(35 80% 50%);
      background-color: var(--color-warning-signature);
    }

.inline-badge-component.inverted.info {
      background-color: hsl(210 50% 42%);
      background-color: var(--color-info-signature);
    }

.inline-badge-component.inverted.alpha {
      background-color: hsl(346 90% 66%);
      background-color: var(--color-swatch-alpha);
    }

.inline-badge-component.inverted.beta {
      background-color: hsl(210 80% 52%);
      background-color: var(--color-swatch-beta);
    }

.inline-badge-component.inverted.gamma {
      background-color: hsl(169 50% 41%);
      background-color: var(--color-swatch-gamma);
    }

.inline-badge-component.inverted.delta {
      background-color: hsl(35 81% 44%);
      background-color: var(--color-swatch-delta);
    }

.inline-badge-component.inverted.epsilon {
      background-color: hsl(280 80% 56%);
      background-color: var(--color-swatch-epsilon);
    }

.inline-badge-component.inverted.zeta {
      background-color: hsl(74 75% 34%);
      background-color: var(--color-swatch-zeta);
    }

.inline-separator-component {
  color: hsl(28 6% 90%);
  color: var(--color-bg-contour);
  text-align: center;
  padding: 0 var(--space-inline-xs);
}

.link-item-button-component {
  all: unset; /* reset button styles */
  line-height: 1;
  padding: var(--space-inset-squish-m);
  color: hsl(0 0% 20%);
  color: var(--color-text);
  background-color: hsl(0 0% 98%);
  background-color: var(--color-bg-container-discreet);
  border: 1px solid hsl(28 6% 90%);
  border: 1px solid var(--color-bg-contour);
  border-radius: 16px;
  border-radius: var(--misc-heavy-rounding);
}

.link-item-button-component:focus-visible,.link-item-button-component:hover {
    background-color: hsl(28 20% 98%);
    background-color: var(--color-bg-hover);
    color: hsl(0 0% 0%);
    color: var(--color-text-intense);
    box-shadow: none; /* reset button styles */
  }

.link-item-button-component.disabled {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
  }

.link-item-button-component:focus-visible {
    outline: 2px solid hsl(210 55% 40%);
    outline: var(--misc-focus-outline);
  }

.link-item-button-component .icon-component {
    height: 15px;
    margin-left: 0.2em;
    margin-left: var(--icon-text-spacing);
  }

.mobile .link-item-button-component {
    padding: var(--space-inset-squish-l);
  }

/* TODO ideally we'd use a transition for the width increase, but doesn't work with 'auto' */

.loading-button-component {
  display: inline-flex;
  align-items: center;

  /* same style as in old (pre-SVG) spinner component but mirrored to match colors in button */
}

.loading-button-component .loading-spinner {
    margin-left: var(--space-inline-s);
    box-sizing: border-box;
    opacity: 0%; /* hidden by default */
    height: 1.2em;
    width: 1.2em;
    border-width: 0.18em;
    border-radius: 50%;
    border-style: solid;

    /* spinning animation + delayed fade-in (to avoid flashing the spinner for really short loading times) */
    animation: spinner-rotation 0.7s infinite linear, fade-in 500ms 0ms forwards;

    border-inline-end-color: transparent;
  }

/* due to flex-mode we must add extra space towards an icon
   * (since whitespace is handled slighly different in flex-mode) */

.loading-button-component .icon-component:first-child {
    margin-right: 0.5rem; /* make the appearence match icons in buttons */
  }

/* NOTE: We normally don't override classes within an inherited component (SearchSelect), but
   * as 'primary' & 'secondary' are yielded as named blocks and it's currently not possible to
   * assign additional classes to a named block from the outside, it must be done like this. */

:is(:is(.location-select-component .location-select-list) .list-item-content) .primary {
        display: flex !important; /* override SearchSelect default style */
      }

:is(:is(:is(.location-select-component .location-select-list) .list-item-content) .primary) .hit-text {
          flex: 1;

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

:is(:is(:is(.location-select-component .location-select-list) .list-item-content) .primary) .hit-icon {
          margin-left: var(--space-inline-s);
          color: hsl(0 0% 40%);
          color: var(--color-form-overlay-text-subtle); /* same color as 'secondary' */
        }

.selected:is(:is(.location-select-component .location-select-list) .list-item-content) .primary .hit-icon {
          color: hsl(0 0% 100%);
          color: var(--color-select-text);
        }

/* desktop-only override */

:is(:is(:is(:is(.location-select-component .location-select-list) .list-item-content) .secondary) span + span)::before {
            content: none !important; /* override SearchSelect default style */
          }

:is(.location-select-component .minimized-element,.location-select-component .location-select-list .list-item-content) .secondary {
      display: flex; /* override SearchSelect default style */
    }

:is(:is(.location-select-component .minimized-element,.location-select-component .location-select-list .list-item-content) .secondary) .context {
        box-sizing: border-box;
        flex: 0 0 auto;
        margin: 0 0.15rem; /* make space for ellipsis + keep separators at a distance */

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

:is(:is(:is(.location-select-component .minimized-element,.location-select-component .location-select-list .list-item-content) .secondary) .context):not(:first-of-type,:last-of-type) {
          flex: 0 1 auto; /* compress/shorten intermediate context parts */
        }

:is(:is(:is(.location-select-component .minimized-element,.location-select-component .location-select-list .list-item-content) .secondary) .context):first-of-type {
          margin-left: 0;
        }

:is(:is(:is(.location-select-component .minimized-element,.location-select-component .location-select-list .list-item-content) .secondary) .context):last-of-type {
          margin-right: 0;
        }

.markdown-renderer-component h1,.markdown-renderer-component h2 {
    padding-bottom: var(--space-stack-xs);
    margin-bottom: var(--space-stack-m);
  }

.markdown-renderer-component h3,.markdown-renderer-component h4,.markdown-renderer-component h5,.markdown-renderer-component h6 {
    margin-bottom: var(--space-stack-s);
  }

.markdown-renderer-component ul,.markdown-renderer-component ol {
    margin-left: var(--space-inline-m);
    margin-bottom: var(--space-stack-l);
  }

:is(.markdown-renderer-component ul,.markdown-renderer-component ol)  > li {
      margin-bottom: var(--space-stack-xs);
      margin-top: var(--space-stack-xs);
    }

:is(:is(.markdown-renderer-component ul,.markdown-renderer-component ol) > li)  > ul,:is(:is(.markdown-renderer-component ul,.markdown-renderer-component ol) > li)  > ol {
        margin-bottom: 0;
      }

.markdown-renderer-component ol > li {
    list-style-type: decimal;
  }

.markdown-renderer-component ul > li {
    list-style-type: disc;
  }

:is(.markdown-renderer-component ul > li)  > ul > li {
      list-style-type: circle;
    }

:is(:is(.markdown-renderer-component ul > li) > ul > li)  > ul > li {
        list-style-type: disc;
      }

.markdown-renderer-component blockquote {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    margin: var(--space-stack-m) 0;
    padding-left: var(--space-inset-square-sm);
    border-left: 4px solid hsl(28 6% 90%);
    border-left: 4px solid var(--color-bg-contour);
  }

/* Smaller font-size for headings. Makes it easier to embed
   * a block of markdown into our UI, without causing a confusing
   * page hierarchy with h1 tags in markdown overshadowing other
   * content and structure. */

.markdown-renderer-component.small-headings h1 {
      font-size: calc(var(--font-size-heading1) * 0.7);
    }

.markdown-renderer-component.small-headings h2 {
      font-size: calc(var(--font-size-heading2) * 0.8);
    }

.markdown-renderer-component.small-headings h3 {
      font-size: calc(var(--font-size-heading3) * 0.8);
    }

.markdown-renderer-component.small-headings h4,.markdown-renderer-component.small-headings h5,.markdown-renderer-component.small-headings h6 {
      font-size: calc(var(--font-size-heading4) * 0.8);
    }

.miniature-component {
  line-height: 1;
  cursor: pointer;

  /* TODO (TECH-4605): Move this styling to the Icon component itself.  */
  /* force color for authorization even when unstyled */
}

.miniature-component .authorization-icon {
    color: hsl(43 80% 49%);
    color: var(--color-golden-star);
  }

/* when styled */

.miniature-component.styled {
    display: flex;
    border: 1px solid hsl(28 6% 90%);
    border: 1px solid var(--color-bg-contour);
    border-radius: 16px;
    border-radius: var(--misc-heavy-rounding);
    max-width: -moz-fit-content;
    max-width: fit-content;
    background-color: hsl(0 0% 98%);
    background-color: var(--color-bg-container-discreet);
    overflow: hidden;
  }

.miniature-component.styled .miniature-content {
      display: flex;
      align-items: center;
      gap: var(--space-inline-s);
      padding: var(--space-inset-squish-xs);
      border-radius: 16px;
      border-radius: var(--misc-heavy-rounding);
      overflow: hidden;
    }

:is(.miniature-component.styled .miniature-content) .miniature-icon {
        display: flex;
        align-items: center;
        padding: 0 var(--space-inline-xs); /* extra padding for icon */
        font-size: var(--font-size-text-small);
        text-decoration: none;
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

/* TODO (TECH-4605): Move this styling to the Icon component itself.  */

:is(.miniature-component.styled .miniature-content) .authorization-icon {
        color: hsl(43 80% 49%);
        color: var(--color-golden-star);
      }

:is(.miniature-component.styled .miniature-content) .miniature-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

:is(.miniature-component.styled .miniature-content):hover {
        background-color: hsl(28 2% 96%);
        background-color: var(--color-bg-container);
      }

.miniature-component.styled .miniature-action {
      display: flex;
      align-items: center;
      padding: var(--space-inset-squish-xs);
      border-radius: 0% 16px 16px 0%;
      border-radius: 0% var(--misc-heavy-rounding) var(--misc-heavy-rounding) 0%;
      border-left: 1px solid hsl(28 6% 90%);
      border-left: 1px solid var(--color-bg-contour);

      /* hide action blocks that only contain whitespace or non-visible elements */
    }

:is(.miniature-component.styled .miniature-action):not(:has(*:not(:empty))) {
        display: none;
      }

:is(.miniature-component.styled .miniature-action) .close {
        color: hsl(0 0% 20%);
        color: var(--color-text);
      }

:is(.miniature-component.styled .miniature-action):hover {
        background-color: hsl(28 2% 96%);
        background-color: var(--color-bg-container);
        color: hsl(0 0% 0%);
        color: var(--color-text-intense);
      }

:is(.mobile .miniature-component.styled) .miniature-content {
      padding: var(--space-inset-squish-l); /* larger click area for mobile */
    }

:is(.mobile .miniature-component.styled) .miniature-action {
      padding: var(--space-inset-squish-l);

      /* hide action blocks that only contain whitespace or non-visible elements */
    }

:is(:is(.mobile .miniature-component.styled) .miniature-action):not(:has(*:not(:empty))) {
        display: none;
      }

.miniature-component-info {
  padding: var(--space-inset-square-m);
}

.miniature-component-info .info-heading {
    font-size: var(--font-size-text-large);
    margin-bottom: var(--space-stack-s);
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
  }

:is(.miniature-component-info .info-heading) .icon-component {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      margin-right: 0.2em;
      margin-right: var(--icon-text-spacing);
    }

/* TODO (TECH-4605): Move this styling to the Icon component itself.  */

:is(.miniature-component-info .info-heading) .authorization-icon {
      color: hsl(43 80% 49%);
      color: var(--color-golden-star);
    }

.miniature-component-info .subtle-value {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

.miniature-component-info .info-content {
    display: flex;
    gap: var(--space-inline-m);
  }

.notifications-component .collection-icon {
    margin-bottom: auto;
  }

:is(.notifications-component .collection-icon) .dot {
      --local-dot-size: 8px;
      --local-inline-space: var(--space-inline-s);

      min-width: 8px;

      min-width: var(--local-dot-size);
      height: 8px;
      height: var(--local-dot-size);
      border-radius: 50%;

      /* center the dot in relation to the text */
      margin-top: calc(var(--font-size-text-large) * var(--font-line-height-base) / 2 - 8px / 2);
      margin-top: calc(var(--font-size-text-large) * var(--font-line-height-base) / 2 - var(--local-dot-size) / 2);
    }

.unread:is(:is(.notifications-component .collection-icon) .dot) {
        background-color: hsl(135 50% 40%);
        background-color: var(--color-dot-unread);
      }

.read:is(:is(.notifications-component .collection-icon) .dot) {
        background-color: hsl(210 5% 85%);
        background-color: var(--color-dot-read);
      }

.pagination-panel-component {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid hsl(28 6% 90%);
  border-top: 1px solid var(--color-bg-contour);
}

.mobile .pagination-panel-component {
    /* TODO: See if this color override can be removed when the mobile UI is revised
     *       and there is no mixing between old and new card layouts */
    background-color: hsl(0 0% 100%);
    background-color: var(--color-mobile-card);
  }

/* expand previous/next to keep the page index block horizontally centered */

.pagination-panel-component .pagination-previous,.pagination-panel-component .pagination-next {
    flex: 1;
  }

.pagination-panel-component .pagination-previous {
    text-align: right;
  }

.pagination-panel-component .pagination-indicator {
    text-align: center;
    min-width: 3em; /* for spinner, to avoid jumping UI */
  }

.pagination-panel-component a,.pagination-panel-component span.disabled {
    display: inline-block;
    padding: var(--space-inset-square-m);
  }

.payment-state-component {
  white-space: nowrap;
}

.payment-state-component:not(.plain-text) {
    display: inline-block;
    padding: 0 0.5em;
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
  }

.payment-state-component.fresh:not(.plain-text) {
      background-color: hsl(0 0% 95%);
      background-color: var(--color-neutral-bg);
      color: hsl(0 0% 41%);
      color: var(--color-neutral-text);
    }

.payment-state-component.pending:not(.plain-text) {
      background-color: hsl(210 30% 91%);
      background-color: var(--color-info-bg);
      color: hsl(210 100% 15%);
      color: var(--color-info-text);
    }

.payment-state-component.approved:not(.plain-text) {
      background-color: hsl(135 30% 92%);
      background-color: var(--color-success-bg);
      color: hsl(135 100% 15%);
      color: var(--color-success-text);
    }

.payment-state-component.refused:not(.plain-text) {
      background-color: hsl(0 30% 92%);
      background-color: var(--color-danger-bg);
      color: hsl(0 100% 15%);
      color: var(--color-danger-text);
    }

.plain-text-renderer-component {
  word-break: normal;
  overflow-wrap: anywhere;
  font-size: inherit;
}

.plain-text-renderer-component p {
    margin-bottom: var(--space-stack-s);
  }

:is(.plain-text-renderer-component p):last-child {
      margin-bottom: 0;
    }

/* NOTE positioning of the container is done in JS, via the Popper library */

.popover-window-component {
  /* NOTE no padding set on this element, better left to the outer component, for better control */
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  box-shadow: 0 4px 12px 1px hsl(0 0% 0% / 20%);
  box-shadow: var(--misc-popover-shadow);

  position: absolute;
  z-index: 100;
  z-index: var(--misc-z-index-popup);

  background-color: hsl(0 0% 100%);

  background-color: var(--color-popover-window-bg);

  max-width: 20em;
  min-width: -moz-max-content;
  min-width: max-content;
  margin: var(--space-inset-square-xs);
}

/* Positioning of arrow SVG image
 *
 * - Arrow width and height values correspond to the native size of the SVG arrow
 * - The base of the arrow image is positioned such that it just overlaps the
 *   container's border, allowing the arrow image's own border to 'melt' into it
 * - The value of `left` depends on both the width and height of the arrow
 *   due to the rotation transformation
 * - An arrow wrapper element is used to give the Popper library an element of its
 *   own to set inline 'transform' styles on, without overwriting the rotation
 *   transform values we set here in styles
 * - The arrow border is created as a second clip-path positioned behind the arrow.
 *   It follows Attempt 2 in this page: https://www.freecodecamp.org/news/apply-borders-to-clip-paths-with-css/
 */

.popover-window-component {
  --local-arrow-width: 16px;
  --local-arrow-height: 8px;
}

.popover-window-component .popover-window-arrow {
    position: absolute;
    width: var(--local-arrow-width);
    height: var(--local-arrow-height);
    z-index: calc(100 + 2);
    z-index: calc(var(--misc-z-index-popup) + 2);

    background-color: hsl(0 0% 100%);

    background-color: var(--color-popover-window-bg);
    clip-path: polygon(50% 85%, 0% 0%, 100% 0%);
  }

.popover-window-component .popover-window-arrow-border {
    position: absolute;
    width: var(--local-arrow-width);
    height: var(--local-arrow-height);
    z-index: calc(100 + 1);
    z-index: calc(var(--misc-z-index-popup) + 1);

    background-color: hsl(0 0% 0% / 5%); /* very light to make it look like shadow */
    clip-path: polygon(50% 100%, 0 20%, 100% 20%);
  }

/* The CSS code determing the popper position disappears in the production CSS output when using the
   selectors '&[' together with nesting another class (see previous version below). To avoid having
   it mangled by the CSS pre-processors in production, we skip the '&' for nesting in the beginning.

  PREVIOUS VERSION:

  &[data-popper-placement|='bottom'],
  &[data-popper-placement|='top'] {
    .popover-window-arrow {
      left: ...
    }
  }
 */

:is(.popover-window-component[data-popper-placement|='bottom'],.popover-window-component[data-popper-placement|='top']) .popover-window-arrow {
    left: calc(var(--local-arrow-width) / -2); /* center arrow relative to arrow wrapper */
  }

:is(.popover-window-component[data-popper-placement|='left'],.popover-window-component[data-popper-placement|='right']) .popover-window-arrow {
    top: calc(var(--local-arrow-height) / -2); /* center arrow relative to arrow wrapper */
  }

/* Container is below the anchor -> place arrow above it, pointing up
 * (no need to set `left` property, it is set by Popper library) */

.popover-window-component[data-popper-placement|='bottom'] .popover-window-arrow-wrapper {
  top: calc(var(--local-arrow-height) * -0.85);
}

:is(.popover-window-component[data-popper-placement|='bottom'] .popover-window-arrow-wrapper) .popover-window-arrow {
    transform: rotate(180deg);
  }

/* Container is above the anchor -> place arrow below it, pointing down
 * (no need to set `left` property, it is set by Popper library) */

.popover-window-component[data-popper-placement|='top'] .popover-window-arrow-wrapper {
  top: 100%;
}

/* Container is to the left of the anchor -> place arrow on the right, pointing to the right
 * (no need to set `top` property, it is set by Popper library) */

.popover-window-component[data-popper-placement|='left'] .popover-window-arrow-wrapper {
  left: calc(100% - 0.5 * (var(--local-arrow-width) - var(--local-arrow-height)));
}

:is(.popover-window-component[data-popper-placement|='left'] .popover-window-arrow-wrapper) .popover-window-arrow {
    transform: rotate(-90deg);
  }

/* Container is to the right of the anchor -> place arrow on the left, pointing to the left
 * (no need to set `top` property, it is set by Popper library) */

.popover-window-component[data-popper-placement|='right'] .popover-window-arrow-wrapper {
  left: calc(-0.5 * (var(--local-arrow-width) + var(--local-arrow-height)));
}

:is(.popover-window-component[data-popper-placement|='right'] .popover-window-arrow-wrapper) .popover-window-arrow {
    transform: rotate(90deg);
  }

/* background stripes animation */

@keyframes progress-bar-animate-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

.progress-bar-component {
  --local-border: 10px;
  --local-box-shadow: 0 1px 4px var(--color-route-progress-bar-shadow) inset;

  max-width: 20rem;
  min-width: 8rem;
  height: 0.7rem;
}

.progress-bar-component.full-width {
    width: 100%;
  }

.progress-bar-component progress[value],.progress-bar-component .indeterminate-progress-bar {
    border-radius: var(--local-border);
    height: 100%;
  }

.progress-bar-component progress[value] {
    /* its an inline element by default */
    display: block;
    width: 100%;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;
    border: none;
    box-shadow: var(--local-box-shadow);
  }

.progress-bar-component progress[value]::-webkit-progress-bar {
    background-color: hsl(28 2% 96%);
    background-color: var(--color-bg-container);
    border-radius: var(--local-border);
    box-shadow: var(--local-box-shadow);
  }

.progress-bar-component progress[value]::-moz-progress-bar {
    background-color: hsl(135 50% 40%);
    background-color: var(--color-success-signature);
    border-radius: var(--local-border);
  }

.progress-bar-component progress[value]::-webkit-progress-value {
    box-shadow: var(--local-box-shadow);
    background-color: hsl(135 50% 40%);
    background-color: var(--color-success-signature);
    border-radius: 10px;
  }

/* The indeterminate <progress> (when no value attribute exists) doesn't allow any custom styling since that
   * makes the animation stops working. See these two stackoverflow threads:
   * https://stackoverflow.com/questions/38080861/custom-color-for-a-indeterminate-progress-tag-without-a-value
   * https://stackoverflow.com/questions/67599576/how-to-style-indeterminate-progress-bars */

:is(.progress-bar-component .indeterminate-progress-bar) .indeterminate-progress-bar-value {
      /* width: 100%; */
      height: 100%;
      border-radius: var(--local-border);
      box-shadow: var(--local-box-shadow);
      background-color: hsl(135 50% 40%);
      background-color: var(--color-success-signature);
      background-size: 30px 30px;

      background-image:
        linear-gradient(
          135deg,
          hsl(0 0% 100% / 25%) 25%,
          transparent 25%,
          transparent 50%,
          hsl(0 0% 100% / 25%) 50%,
          hsl(0 0% 100% / 25%) 75%,
          transparent 75%,
          transparent
        );

      animation: progress-bar-animate-stripes 2s infinite linear;
      transform-origin: -100% 100%;
    }

.radio-select-component .radio-select-option {
    /* Flexbox used to indent the label when breaking onto a new line.
     * ```
     * [ ] They shut the road through the woods,
     *     seventy years ago.
     * ``` */
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; /* disable text selection */
    margin: var(--space-stack-xs) 0;
  }

:is(.radio-select-component .radio-select-option) .radio-icon {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

.selected:is(:is(.radio-select-component .radio-select-option) .radio-icon) {
        color: hsl(210 55% 40%);
        color: var(--color-select-signature);
      }

/* this is the same style used in form help-block-component */

:is(.radio-select-component .radio-select-option) .radio-select-description {
      font-size: var(--font-size-text-small);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      line-height: var(--font-line-height-short);
      max-width: var(--font-readable-line-length);
    }

:is(.radio-select-component .radio-select-option) .radio-select-item-box {
      margin-right: var(--space-inline-xs); /* padding towards text */
    }

:is(.radio-select-component .radio-select-option):not(.disabled) {
      cursor: pointer;
    }

.radio-select-component.horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-m);
  }

/* inside a disabled fieldset or disabled itself */

fieldset:disabled .radio-select-component,.radio-select-component.disabled {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
    pointer-events: none; /* make it unclickable */
  }

:is(fieldset:disabled .radio-select-component,.radio-select-component.disabled) .radio-select-item-box .icon-component {
      color: hsl(0 0% 58%);
      color: var(--color-text-disabled);
    }

:is(fieldset:disabled .radio-select-component,.radio-select-component.disabled) .radio-select-description {
      color: hsl(0 0% 58%);
      color: var(--color-text-disabled);
    }

@keyframes receipt-scanning-progress-animation {
  0% {
    /* same as --local-scan-line-height */
    top: -25px;
  }

  100% {
    top: 100%;
  }
}

.receipt-scanning-progress-component {
  --local-scan-line-height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* allow swipe & pinch zoom to work */
  overflow: hidden; /* ensure the animation is restricted to the overlay */
}

.receipt-scanning-progress-component .progress {
    position: relative; /* ensure the progress appear above the scanning line */
    background-color: hsl(0 0% 90% / 90%);
    background-color: var(--color-receipt-toolbar-bg);
    color: hsl(0 0% 10% / 90%);
    color: var(--color-receipt-toolbar-icon);
    padding: var(--space-inset-squish-xs);
    margin: 0 var(--space-inline-s);
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    text-align: center;
  }

:is(.receipt-scanning-progress-component .progress) .beyond-expectation {
      font-size: var(--font-size-text-small);
    }

.receipt-scanning-progress-component .scanning-line {
    position: absolute;
    width: 100%;
    height: var(--local-scan-line-height);
    background-image: linear-gradient(to bottom, transparent, hsl(0 0% 90% / 90%));
    background-image: linear-gradient(to bottom, transparent, var(--color-receipt-toolbar-bg));
    animation: receipt-scanning-progress-animation 5s linear infinite;
  }

.registerable-collection-component .header {
    display: flex;
    padding-bottom: var(--space-stack-xs);

    /* desktop only */
  }

.sticky-heading:is(.registerable-collection-component .header) {
      position: sticky;
      top: 0;
      z-index: calc(0 + 1);
      z-index: calc(var(--misc-z-index-default) + 1); /* ensure the heading is above the content when scrolling */
      background-color: hsl(0 0% 100%);
      background-color: var(--color-bg);
      border-bottom: 1px solid hsl(28 6% 90%);
      border-bottom: 1px solid var(--color-bg-contour);

      /* create space above the sticky-heading without affecting the intended spacing */
      padding-top: var(--space-stack-xs);
      margin-top: calc(-1 * var(--space-stack-s));
      margin-bottom: var(--space-stack-m);
    }

:is(.registerable-collection-component .header) .secondary {
      margin-left: auto; /* right-align */
      text-align: right;
    }

.registerable-count-component {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  padding: var(--space-inset-squish-s);
  color: hsl(0 0% 100%);
  color: var(--color-swatch-text);
  white-space: nowrap;
}

.registerable-count-component.expense {
    background-color: hsl(230 49% 40%);
    background-color: var(--color-expense-pill);
  }

.registerable-count-component.refund {
    background-color: hsl(280 49% 40%);
    background-color: var(--color-refund-pill);
  }

.registerable-count-component.drive {
    background-color: hsl(330 77% 65%);
    background-color: var(--color-drive-pill);
  }

.registerable-count-component.trip {
    background-color: hsl(180 49% 40%);
    background-color: var(--color-trip-pill);
  }

.regulation-tabulation-component .calculation + .calculation {
    margin-top: var(--space-stack-s);
  }

:is(.regulation-tabulation-component .calculation) .label {
      font-size: var(--font-size-text-large); /* slightly larger */
      margin-bottom: var(--space-stack-xs);
    }

:is(.regulation-tabulation-component .calculation) .term {
      display: inline-block;

      border-radius: 0.25em;

      border-radius: var(--misc-subtle-rounding);
      padding: var(--space-inset-squish-xs);
      background-color: hsl(290 100% 96%);
      background-color: var(--color-marker-alt2);
      font-size: var(--font-size-text);

      /* term holder may wrap, adding bottom margin ensures some space between the two lines */
      margin-bottom: var(--space-stack-s);
    }

:is(.regulation-tabulation-component .calculation) .math-sign {
      display: inline-block;

      padding-left: var(--space-inset-square-xs);
      padding-right: var(--space-inset-square-xs);
      font-weight: bold;
    }

:is(.regulation-tabulation-component .calculation) .sum {
      background-color: hsl(179 100% 96%);
      background-color: var(--color-marker-alt1);
    }

:is(.regulation-tabulation-component .calculation) .multiplier {
      background-color: hsl(57 96% 95%);
      background-color: var(--color-marker);
    }

:is(:is(.regulation-tabulation-component .calculation) .parenthesized-branch)::before {
        content: '⟮';
        font-size: var(--font-size-text-xlarge);
      }

:is(:is(.regulation-tabulation-component .calculation) .parenthesized-branch)::after {
        content: '⟯';
        font-size: var(--font-size-text-xlarge);
      }

.report-annotation-component {
  max-width: var(--font-readable-line-length);
  color: hsl(0 0% 41%);
  color: var(--color-text-subtle);
}

.report-annotation-component strong {
    color: hsl(0 0% 20%);
    color: var(--color-text);
  }

.report-annotation-component .annotation-entry-date::before {
    content: '•';
    padding: 0 var(--space-inline-xs);
  }

.report-comment-component .comment-entry-label,.report-comment-component .comment-entry-value {
    max-width: var(--font-readable-line-length);
  }

.report-comment-component .comment-entry-label {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

:is(.report-comment-component .comment-entry-label) strong {
      color: hsl(0 0% 20%);
      color: var(--color-text);
    }

.report-comment-component .restricted {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-size: var(--font-size-text-small);
    width: -moz-fit-content;
    width: fit-content; /* makes the toolbar position correctly */
  }

.report-comment-component .comment-entry-date::before {
    content: '•';
    padding: 0 var(--space-inline-xs);
  }

.report-comment-group-component .comment-entry {
    padding: var(--space-inset-squish-m);
    border: 1px solid hsl(28 6% 90%);
    border: 1px solid var(--color-bg-contour);
    border-top: none;
  }

.parent:is(.report-comment-group-component .comment-entry) {
      border-radius: 0.25em 0.25em 0 0;
      border-radius: var(--misc-subtle-rounding) var(--misc-subtle-rounding) 0 0;
      border-top: 1px solid hsl(28 6% 90%);
      border-top: 1px solid var(--color-bg-contour);
    }

/* report-comment-writer has it's own border and padding to align it properly when focused */

.reply:is(.report-comment-group-component .comment-entry) {
      padding: 0;
      border: none;
    }

/* the last comment can shift between a report-comment-writer and a report-comment */

:is(.report-comment-group-component .comment-entry):last-child {
      border-bottom-right-radius: 0.25em;
      border-bottom-right-radius: var(--misc-subtle-rounding);
      border-bottom-left-radius: 0.25em;
      border-bottom-left-radius: var(--misc-subtle-rounding);
    }

.report-comment-writer-component textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
    font-family: var(--font-regular);
    font-size: inherit;
    border: none;
    background-color: transparent;
    transition: height 0.15s ease-in;
    color: hsl(0 0% 20%);
    color: var(--color-text);
  }

.report-comment-writer-component .comment-entry-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-inline-s);
    justify-content: flex-end;
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);

    /* delay toolbar to allow height transition to almost finish */
    opacity: 0%;
    animation: fade-in 0.1s ease-in 0.1s;
    animation-fill-mode: forwards;
  }

:is(.report-comment-writer-component .comment-entry-toolbar) .restricted {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      font-size: var(--font-size-text-small);
    }

/* only in mobile to prevent text from overflowing */

:is(.report-comment-writer-component .comment-entry-toolbar) .options {
      display: flex;
      align-items: center;
      gap: var(--space-inline-xs);
      font-size: var(--font-size-text-small);
    }

:is(:is(.report-comment-writer-component .comment-entry-toolbar) .options) .option {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 4rem;
      }

.report-comment-writer-component .comment-entry {
    border: 1px solid hsl(28 6% 90%);
    border: 1px solid var(--color-bg-contour);
    padding: var(--space-inset-squish-m);
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);

    /* active state when writing a comment */
  }

:is(.report-comment-writer-component .comment-entry):not(.compact) textarea {
        min-height: 5em; /* allows auto-expanding */
        max-height: 15em; /* prevent textarea from growing too large */
      }

.desktop :is(:is(.report-comment-writer-component .comment-entry):not(.compact) textarea) {
          /* This is an experimental feature that allows for auto-expanding textareas. As of January 2025, it is
            only available in Chrome and Edge, while Safari and Firefox remain unaffected. Currently, we will
            only enable it on desktop since we can easily monitor its behavior there compared to mobile.
            https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
            https://caniuse.com/mdn-css_properties_field-sizing_content */
          field-sizing: content;
        }

/* compact state for replies */

.compact:is(.report-comment-writer-component .comment-entry) {
      display: flex;
      align-items: baseline;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-top: none;
    }

.compact:is(.report-comment-writer-component .comment-entry) textarea {
        height: calc(var(--font-line-height-base) * 1em);
      }

/* all comments get a border around the whole div when focused */

.targeted:is(.report-comment-writer-component .comment-entry) {
      outline: 1px solid hsl(210 55% 40%);
      outline: 1px solid var(--color-link);
      border: 1px solid hsl(210 55% 40%);
      border: 1px solid var(--color-link);
    }

.targeted:is(.report-comment-writer-component .comment-entry) textarea:focus {
        outline: none;
      }

.mobile .report-comment-writer-component textarea {
  height: 6em;
}

/* only desktop */

.modal-seal-history .modal-seal-entry {
    display: flex;
    flex-direction: column;
  }

.modal-seal-history .modal-seal-entry + .modal-seal-entry {
    margin-top: var(--space-stack-m);
  }

.modal-seal-history .modal-seal-date {
    font-size: var(--font-size-text-large);
    margin-bottom: var(--space-stack-xs);
  }

.popover-seal {
  padding: var(--space-inset-square-m);
}

.popover-seal .restricted {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-size: var(--font-size-text-small);
    width: -moz-fit-content;
    width: fit-content; /* makes the toolbar position correctly */
  }

/* all devices */

.report-seal-component {
  background-color: hsl(0 0% 95%);
  background-color: var(--color-neutral-bg);
  padding: var(--space-inset-square-m);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  width: 100%;
  box-sizing: border-box;
}

.report-seal-component .seal-entry-content {
    display: flex;
    justify-content: space-between;
    gap: var(--space-inline-xs);
  }

:is(.report-seal-component .seal-entry-content) .seal-entry-actor {
      font-weight: bold;
      overflow-wrap: anywhere;
    }

:is(.report-seal-component .seal-entry-content) .seal-entry-state {
      display: flex;
      gap: var(--space-inline-s);
      align-items: center;
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

.report-seal-component.replaced {
    box-shadow: 3px 3px 0 color-mix(in hsl, hsl(0 0% 95%), hsl(0 0% 20%) 5%);
  }

@supports (color: color-mix(in lch, red, blue)) {
.report-seal-component.replaced {
    box-shadow: 3px 3px 0 color-mix(in hsl, var(--color-neutral-bg), var(--color-text) 5%);
  }
}

.report-seal-component.approved {
    background-color: hsl(135 30% 92%);
    background-color: var(--color-success-bg);
  }

.report-seal-component.approved .seal-entry-actor {
      color: hsl(135 100% 15%);
      color: var(--color-success-text);
    }

.report-seal-component.approved.replaced {
      box-shadow: 3px 3px 0 color-mix(in hsl, hsl(135 30% 92%), hsl(0 0% 20%) 5%);
    }

@supports (color: color-mix(in lch, red, blue)) {
.report-seal-component.approved.replaced {
      box-shadow: 3px 3px 0 color-mix(in hsl, var(--color-success-bg), var(--color-text) 5%);
    }
}

.report-seal-component.refused {
    background-color: hsl(0 30% 92%);
    background-color: var(--color-danger-bg);
  }

.report-seal-component.refused .seal-entry-actor {
      color: hsl(0 100% 15%);
      color: var(--color-danger-text);
    }

.report-seal-component.refused.replaced {
      box-shadow: 3px 3px 0 color-mix(in hsl, hsl(0 30% 92%), hsl(0 0% 20%) 5%);
    }

@supports (color: color-mix(in lch, red, blue)) {
.report-seal-component.refused.replaced {
      box-shadow: 3px 3px 0 color-mix(in hsl, var(--color-danger-bg), var(--color-text) 5%);
    }
}

.report-seal-component.skipped .seal-entry-actor {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      -webkit-text-decoration: solid line-through;
              text-decoration: solid line-through;
    }

/* only desktop */

.report-seal-component .seal-history-icon {
    cursor: pointer;
  }

:is(.report-seal-component .seal-history-icon):hover {
      color: hsl(0 0% 20%);
      color: var(--color-text);
    }

/* only mobile */

.report-seal-component.expanded .seal-entry-content {
      margin-bottom: var(--space-stack-s);
    }

:is(.report-seal-component .seal-information) .data-sheet-component {
      padding-bottom: var(--space-stack-s);
    }

:is(.report-seal-component .seal-information) .restricted {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      font-size: var(--font-size-text-small);
    }

:is(.report-seal-component .seal-information) .seal-entry-replaced {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      font-size: var(--font-size-text-small);
      margin-top: var(--space-stack-m);
    }

.mobile .report-seal-component {
    padding: var(--space-inset-square-sm);
  }

:is(.mobile .report-seal-component) .seal-entry-state {
      font-size: var(--font-size-text-small);
    }

.report-seals-component {
  --local-indicator-size: 1em; /* the same as the line height */
}

.report-seals-component .seal-entry {
    display: flex;
    align-items: center;
    padding: var(--space-stack-s) 0;
    position: relative;
  }

:is(.report-seals-component .seal-entry) .seal-entry-indicator {
      display: flex;
      justify-content: center;
      color: hsl(0 0% 20%);
      color: var(--color-text);
      background-color: hsl(0 0% 100%);
      background-color: var(--color-bg);
      border: 1px solid hsl(28 6% 90%);
      border: 1px solid var(--color-bg-contour);
      min-width: var(--local-indicator-size);
      min-height: var(--local-indicator-size);
      line-height: 1;
      font-size: var(--font-size-text-small);
      margin-right: var(--space-inline-s);
      padding: var(--space-inset-square-xs);
      border-radius: 50%;
      z-index: calc(0 + 1);
      z-index: calc(var(--misc-z-index-default) + 1); /* ensure the indicator is above the line */
    }

.completed:is(.report-seals-component .seal-entry) .seal-entry-indicator {
      background-color: hsl(0 0% 60%);
      background-color: var(--color-neutral-signature);
      color: hsl(0 0% 100%);
      color: var(--color-bg);
      border-color: hsl(0 0% 60%);
      border-color: var(--color-neutral-signature);
    }

/* the current step gets a slightly darker color for more color contrast */

.current:is(.report-seals-component .seal-entry) .seal-entry-indicator,.refused:is(.report-seals-component .seal-entry) .seal-entry-indicator {
      border-color: hsl(0 0% 41%);
      border-color: var(--color-neutral-text);
    }

/* the step indicator line */

:is(.report-seals-component .seal-entry)::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(var(--local-indicator-size) - 2px); /* 2px is the total border width */
      width: 1px;
      background-color: hsl(28 6% 90%);
      background-color: var(--color-bg-contour);
    }

:is(.report-seals-component .seal-entry):first-child::before {
      top: 50%;
    }

:is(.report-seals-component .seal-entry):last-child::before {
      bottom: 50%;
    }

.completed:is(.report-seals-component .seal-entry)::before {
      background-color: hsl(0 0% 60%);
      background-color: var(--color-neutral-signature);
    }

/* First and last children get 50% height. To avoid miscalculations of the current step,
    first child has no gray and last child is fully green. */

.current:is(.report-seals-component .seal-entry):not(:first-child)::before {
      background: linear-gradient(to top, hsl(28 6% 90%) 50%, hsl(0 0% 60%) 50%);
      background: linear-gradient(to top, var(--color-bg-contour) 50%, var(--color-neutral-signature) 50%);
    }

.current:is(.report-seals-component .seal-entry):last-child::before {
      background: hsl(0 0% 60%);
      background: var(--color-neutral-signature);
    }

.report-timeline-component {
  --local-icon-size: 25px;
}

.report-timeline-component .timeline-entry {
    display: flex;
    align-items: baseline;
    padding: var(--space-stack-s) 0;
    margin-left: var(--space-inline-s);
    border-left: 1px solid hsl(28 6% 90%);
    border-left: 1px solid var(--color-bg-contour);
  }

:is(.report-timeline-component .timeline-entry) .icon-approve {
      color: hsl(135 50% 40%);
      color: var(--color-success-signature);
    }

:is(.report-timeline-component .timeline-entry) .icon-refuse {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

.standard-comment:is(.report-timeline-component .timeline-entry) {
      align-items: flex-start;
    }

:is(.report-timeline-component .timeline-entry):first-child {
      /* only half of the border should be visible at top */
      -o-border-image:
        linear-gradient(
          to bottom,
          transparent var(--local-icon-size),
          hsl(28 6% 90%) var(--local-icon-size)
        )
        1;
         border-image:
        linear-gradient(
          to bottom,
          transparent var(--local-icon-size),
          hsl(28 6% 90%) var(--local-icon-size)
        )
        1;
      -o-border-image:
        linear-gradient(
          to bottom,
          transparent var(--local-icon-size),
          var(--color-bg-contour) var(--local-icon-size)
        )
        1;
         border-image:
        linear-gradient(
          to bottom,
          transparent var(--local-icon-size),
          var(--color-bg-contour) var(--local-icon-size)
        )
        1;
    }

:is(.report-timeline-component .timeline-entry):last-child {
      opacity: 0%;
      animation: fade-in 50ms ease-in 0.3s; /* delay to allow height transition to finish */
      animation-fill-mode: forwards;
      -o-border-image:
        linear-gradient(
          to bottom,
          hsl(28 6% 90%) var(--local-icon-size),
          transparent var(--local-icon-size)
        )
        1;
         border-image:
        linear-gradient(
          to bottom,
          hsl(28 6% 90%) var(--local-icon-size),
          transparent var(--local-icon-size)
        )
        1;
      -o-border-image:
        linear-gradient(
          to bottom,
          var(--color-bg-contour) var(--local-icon-size),
          transparent var(--local-icon-size)
        )
        1;
         border-image:
        linear-gradient(
          to bottom,
          var(--color-bg-contour) var(--local-icon-size),
          transparent var(--local-icon-size)
        )
        1;
    }

:is(.report-timeline-component .timeline-entry):only-child {
      border: none; /* prevent upper border half from showing when there's just one entry */
    }

:is(.report-timeline-component .timeline-entry) .timeline-entry-content {
      width: 100%;
    }

:is(.report-timeline-component .timeline-entry) .timeline-entry-indicator {
      display: flex;
      justify-content: center;
      color: hsl(0 0% 60%);
      color: var(--color-neutral-signature);
      min-width: var(--local-icon-size);
      margin-left: calc(var(--local-icon-size) / 2 * -1);
      margin-right: var(--space-inline-s);
      padding: var(--space-stack-xs) 0;
      background-color: hsl(0 0% 100%);
      background-color: var(--color-bg);
      border-radius: 50%;
      height: auto;
    }

:is(:is(.report-timeline-component .timeline-entry) .timeline-entry-indicator) span {
        display: flex;
        justify-content: center;
        margin-right: 0;
      }

.mobile .report-timeline-component .timeline-entry-indicator {
  background-color: hsl(0 0% 100%);
  background-color: var(--color-mobile-card);
}

/* TODO sync height (via CSS variables etc) with that of other "controls",
 * for example our buttons (since these will stand next to buttons in the layout they
 * should have the same height) */

.segmented-control-component {
  --local-space-outer: 0.2rem;
  --local-space-inner: calc(var(--misc-form-element-vertical) - var(--local-space-outer));

  border-radius: 0.25em;

  border-radius: var(--misc-subtle-rounding);
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  box-sizing: border-box;

  padding: 0.2rem;

  padding: var(--local-space-outer);
  border: 1px solid hsl(0 0% 95%);
  border: var(--misc-form-element-border-width) solid var(--color-control-inactive-bg);
  background-color: hsl(0 0% 95%);
  background-color: var(--color-control-inactive-bg);

  cursor: default; /* no text selection cursor */
}

.mobile .segmented-control-component {
    justify-content: space-between;
    width: 100%;
  }

.segmented-control-component .segmented-control-item {
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    line-height: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.desktop :is(.segmented-control-component .segmented-control-item) {
      padding: var(--local-space-inner) var(--space-inline-s);
    }

.mobile :is(.segmented-control-component .segmented-control-item) {
      padding: var(--space-inset-squish-l);
      width: 100%;
    }

.segmented-control-component .segmented-control-item-active {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    background-color: hsl(0 0% 100%);
    background-color: var(--color-control-active-bg);
    color: hsl(0 0% 20%);
    color: var(--color-control-active-text);
    box-shadow: 0 1px 2px 0 hsl(0 0% 25% / 10%);
    box-shadow: var(--misc-form-element-shadow) var(--color-button-shadow);
  }

.desktop :is(.segmented-control-component .segmented-control-item-active) {
      padding-top: var(--space-stack-xs);
      padding-bottom: var(--space-stack-xs);
      margin-top: 0;
      margin-bottom: 0;
    }

.segmented-control-component .segmented-control-item-inactive {
    color: hsl(0 0% 41%);
    color: var(--color-control-inactive-text);
    cursor: pointer; /* indicate clickable */
    position: relative;
  }

:is(.segmented-control-component .segmented-control-item-inactive):hover {
      color: hsl(0 0% 20%);
      color: var(--color-control-inactive-hover-text);
    }

/* prevent jumping */

:is(.desktop .segmented-control-component) .segmented-control-item + .segmented-control-item {
      margin-left: 1px; /* border-width */
    }

:is(.desktop .segmented-control-component) .segmented-control-item-inactive + .segmented-control-item-inactive::after {
      content: '';
      position: absolute;
      left: 0;
      width: 1px;
      background-color: hsl(0 0% 50% / 20%);
      background-color: var(--color-control-inactive-contour);

      /* ensure the divider between inactive items doesn't get too tall (looks better) */
      top: 20%;
      height: 60%;
    }

.popover-stacked-progress-bar {
  padding: var(--space-inset-square-m) var(--space-inset-square-l);
}

.popover-stacked-progress-bar .popover-label {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

.popover-stacked-progress-bar .popover-segment-list {
    list-style: outside;
    padding-left: var(--space-inset-square-m);
  }

:is(.popover-stacked-progress-bar .popover-segment-list) .popover-segment::marker {
      font-size: var(--font-size-text-large);
    }

:is(.popover-stacked-progress-bar .popover-segment-list) .circle-one::marker {
      /* same color as the bar, but the dot is so small,
         so we make it darker to make it match an area better
         (color in a small area looks "less colorful" than the
         same color over a large area) */
      color: color-mix(in hsl, hsl(28 2% 96%) 70%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
:is(.popover-stacked-progress-bar .popover-segment-list) .circle-one::marker {
      color: color-mix(in hsl, var(--color-stacked-progress-bar-background) 70%, var(--color-text));
    }
}

:is(.popover-stacked-progress-bar .popover-segment-list) .circle-two::marker {
      color: color-mix(in hsl, hsl(210 80% 52%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
:is(.popover-stacked-progress-bar .popover-segment-list) .circle-two::marker {
      color: color-mix(in hsl, var(--color-stacked-progress-bar-two) 95%, var(--color-text));
    }
}

:is(.popover-stacked-progress-bar .popover-segment-list) .circle-three::marker {
      color: color-mix(in hsl, hsl(169 50% 41%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
:is(.popover-stacked-progress-bar .popover-segment-list) .circle-three::marker {
      color: color-mix(in hsl, var(--color-stacked-progress-bar-three) 95%, var(--color-text));
    }
}

:is(.popover-stacked-progress-bar .popover-segment-list) .circle-four::marker {
      color: color-mix(in hsl, hsl(35 81% 44%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
:is(.popover-stacked-progress-bar .popover-segment-list) .circle-four::marker {
      color: color-mix(in hsl, var(--color-stacked-progress-bar-four) 95%, var(--color-text));
    }
}

:is(.popover-stacked-progress-bar .popover-segment-list) .circle-five::marker {
      color: color-mix(in hsl, hsl(74 75% 34%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
:is(.popover-stacked-progress-bar .popover-segment-list) .circle-five::marker {
      color: color-mix(in hsl, var(--color-stacked-progress-bar-five) 95%, var(--color-text));
    }
}

.stacked-progress-bar-component {
  --local-height: 6px;

  display: flex;
  background-color: hsl(28 2% 96%);
  background-color: var(--color-stacked-progress-bar-background);
  border-radius: 6px;
  border-radius: var(--local-height);
}

.stacked-progress-bar-component .stacked-segment {
    width: attr(data-progress px);
    height: var(--local-height);
  }

:is(.stacked-progress-bar-component .stacked-segment):first-child {
      border-top-left-radius: var(--local-height);
      border-bottom-left-radius: var(--local-height);
    }

:is(.stacked-progress-bar-component .stacked-segment):last-child {
      border-top-right-radius: var(--local-height);
      border-bottom-right-radius: var(--local-height);
    }

:is(.stacked-progress-bar-component .stacked-segment):not(:first-child)::after {
      content: '';
      display: block;
      width: 1px;
      height: var(--local-height);
      background-color: hsl(28 2% 96%);
      background-color: var(--color-stacked-progress-bar-background);
    }

.stacked-progress-bar-component .segment-one {
    background-color: transparent;
  }

.stacked-progress-bar-component .segment-two {
    background-color: hsl(210 80% 52%);
    background-color: var(--color-stacked-progress-bar-two);
  }

.stacked-progress-bar-component .segment-three {
    background-color: hsl(169 50% 41%);
    background-color: var(--color-stacked-progress-bar-three);
  }

.stacked-progress-bar-component .segment-four {
    background-color: hsl(35 81% 44%);
    background-color: var(--color-stacked-progress-bar-four);
  }

.stacked-progress-bar-component .segment-five {
    background-color: hsl(74 75% 34%);
    background-color: var(--color-stacked-progress-bar-five);
  }

/* When CSS `attr` support in browsers has improved, we could use something like:
   * `.stacked-segment { flex-grow: attr(data-progress number); }`
   * https://caniuse.com/css3-attr
   * https://developer.mozilla.org/en-US/docs/Web/CSS/attr */

.stacked-progress-bar-component .stacked-segment[data-progress='1'] {
    flex-grow: 1;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='2'] {
    flex-grow: 2;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='3'] {
    flex-grow: 3;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='4'] {
    flex-grow: 4;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='5'] {
    flex-grow: 5;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='6'] {
    flex-grow: 6;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='7'] {
    flex-grow: 7;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='8'] {
    flex-grow: 8;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='9'] {
    flex-grow: 9;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='10'] {
    flex-grow: 10;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='11'] {
    flex-grow: 11;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='12'] {
    flex-grow: 12;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='13'] {
    flex-grow: 13;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='14'] {
    flex-grow: 14;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='15'] {
    flex-grow: 15;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='16'] {
    flex-grow: 16;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='17'] {
    flex-grow: 17;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='18'] {
    flex-grow: 18;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='19'] {
    flex-grow: 19;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='20'] {
    flex-grow: 20;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='21'] {
    flex-grow: 21;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='22'] {
    flex-grow: 22;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='23'] {
    flex-grow: 23;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='24'] {
    flex-grow: 24;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='25'] {
    flex-grow: 25;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='26'] {
    flex-grow: 26;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='27'] {
    flex-grow: 27;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='28'] {
    flex-grow: 28;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='29'] {
    flex-grow: 29;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='30'] {
    flex-grow: 30;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='31'] {
    flex-grow: 31;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='32'] {
    flex-grow: 32;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='33'] {
    flex-grow: 33;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='34'] {
    flex-grow: 34;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='35'] {
    flex-grow: 35;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='36'] {
    flex-grow: 36;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='37'] {
    flex-grow: 37;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='38'] {
    flex-grow: 38;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='39'] {
    flex-grow: 39;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='40'] {
    flex-grow: 40;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='41'] {
    flex-grow: 41;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='42'] {
    flex-grow: 42;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='43'] {
    flex-grow: 43;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='44'] {
    flex-grow: 44;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='45'] {
    flex-grow: 45;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='46'] {
    flex-grow: 46;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='47'] {
    flex-grow: 47;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='48'] {
    flex-grow: 48;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='49'] {
    flex-grow: 49;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='50'] {
    flex-grow: 50;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='51'] {
    flex-grow: 51;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='52'] {
    flex-grow: 52;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='53'] {
    flex-grow: 53;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='54'] {
    flex-grow: 54;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='55'] {
    flex-grow: 55;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='56'] {
    flex-grow: 56;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='57'] {
    flex-grow: 57;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='58'] {
    flex-grow: 58;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='59'] {
    flex-grow: 59;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='60'] {
    flex-grow: 60;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='61'] {
    flex-grow: 61;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='62'] {
    flex-grow: 62;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='63'] {
    flex-grow: 63;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='64'] {
    flex-grow: 64;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='65'] {
    flex-grow: 65;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='66'] {
    flex-grow: 66;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='67'] {
    flex-grow: 67;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='68'] {
    flex-grow: 68;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='69'] {
    flex-grow: 69;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='70'] {
    flex-grow: 70;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='71'] {
    flex-grow: 71;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='72'] {
    flex-grow: 72;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='73'] {
    flex-grow: 73;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='74'] {
    flex-grow: 74;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='75'] {
    flex-grow: 75;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='76'] {
    flex-grow: 76;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='77'] {
    flex-grow: 77;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='78'] {
    flex-grow: 78;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='79'] {
    flex-grow: 79;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='80'] {
    flex-grow: 80;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='81'] {
    flex-grow: 81;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='82'] {
    flex-grow: 82;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='83'] {
    flex-grow: 83;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='84'] {
    flex-grow: 84;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='85'] {
    flex-grow: 85;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='86'] {
    flex-grow: 86;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='87'] {
    flex-grow: 87;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='88'] {
    flex-grow: 88;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='89'] {
    flex-grow: 89;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='90'] {
    flex-grow: 90;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='91'] {
    flex-grow: 91;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='92'] {
    flex-grow: 92;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='93'] {
    flex-grow: 93;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='94'] {
    flex-grow: 94;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='95'] {
    flex-grow: 95;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='96'] {
    flex-grow: 96;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='97'] {
    flex-grow: 97;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='98'] {
    flex-grow: 98;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='99'] {
    flex-grow: 99;
  }

.stacked-progress-bar-component .stacked-segment[data-progress='100'] {
    flex-grow: 100;
  }

/* inspiration: https://www.fffuel.co/svg-spinner/ */

.spinner-component {
  --local-fade-in: 400ms;
}

.spinner-component.spinner-small {
    --local-fade-in: 250ms;
  }

.spinner-component {

  box-sizing: border-box;
  height: 2.5em;
  width: 2.5em;

  opacity: 0%; /* hidden by default */

  /* delayed fade-in, to avoid flashing the spinner for really short loading times */
  animation: fade-in 500ms var(--local-fade-in) forwards;

  /* block mode */
  display: block;

  /* inline mode */
}

.spinner-component.spinner-inline {
    display: inline-block;
  }

.spinner-component.spinner-small {
    height: 1em;
    width: 1em;
  }

.spinner-component.spinner-centered {
    margin: var(--space-stack-m) auto;
  }

.spinner-component.spinner-immediate {
    animation-delay: 0ms;
  }

.spinner-component .background-path {
    stroke: hsl(135 30% 86%);
    stroke: var(--color-spinner-bg);
    stroke-width: 5;
  }

.spinner-component .front-path {
    transform-origin: center;
    animation: spinner-rotation 0.8s linear infinite;

    stroke: hsl(135 50% 30%);

    stroke: var(--color-spinner-top);
    stroke-linecap: round;
    stroke-width: 5;

    stroke-dasharray: 35, 140;
    stroke-dashoffset: 0;
  }

.stars-rating-component {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stars-rating-component .star-rating {
    --local-star-size: 28px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-stack-m);
  }

:is(.stars-rating-component .star-rating) .rating {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      font-size: var(--local-star-size);
      color: hsl(0 0% 87%);
      color: var(--color-bg-container-evident);
      padding: var(--space-inset-square-s);
    }

:is(:is(.stars-rating-component .star-rating) .rating) .value-rating {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
        font-size: var(--font-size-text-small);
      }

:is(:is(.stars-rating-component .star-rating) .rating) .selected-star {
        display: none;
      }

/* hovering or selecting stars highlights every star from current to the first */

:is(:is(.stars-rating-component .star-rating) .rating):hover,:is(:is(.stars-rating-component .star-rating) .rating):has( ~ .rating:hover),.selected:is(:is(.stars-rating-component .star-rating) .rating),:is(:is(.stars-rating-component .star-rating) .rating):has( ~ .selected) {
        color: hsl(43 80% 49%);
        color: var(--color-golden-star);
      }

:is(:is(:is(.stars-rating-component .star-rating) .rating):hover,:is(:is(.stars-rating-component .star-rating) .rating):has( ~ .rating:hover),.selected:is(:is(.stars-rating-component .star-rating) .rating),:is(:is(.stars-rating-component .star-rating) .rating):has( ~ .selected)) .selected-star {
          display: block;
        }

:is(:is(:is(.stars-rating-component .star-rating) .rating):hover,:is(:is(.stars-rating-component .star-rating) .rating):has( ~ .rating:hover),.selected:is(:is(.stars-rating-component .star-rating) .rating),:is(:is(.stars-rating-component .star-rating) .rating):has( ~ .selected)) .unselected-star {
          display: none;
        }

.submit-report-component .registerable-counters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-s);
  }

.unique-identifier-component {
  font-family: 'PT Mono', monospace;
  font-family: var(--font-monospace);
}

.vat-calculator-component {
  padding: var(--space-inset-square-l);
}

:is(.desktop .vat-calculator-component) h4 {
      margin-bottom: 0;
    }

:is(:is(.mobile .vat-calculator-component) .form-actions) button {
        width: 100%;
      }

.vat-calculator-component .vat-rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-inline-s);
    flex: 1;
  }

:is(.vat-calculator-component .summary) .vat {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

/* desktop */

.aspect-entry-value-component {
  display: flex;
}

:is(.aspect-entry-value-component .aspect-entry-value) .aspect-entry-value-primary,:is(.aspect-entry-value-component .aspect-entry-value) .aspect-entry-value-secondary {
      line-height: var(--font-line-height-short);
      overflow-wrap: break-word; /* especially for shiver value, which can be one word */
    }

:is(.aspect-entry-value-component .aspect-entry-value) .aspect-entry-value-secondary {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      font-size: var(--font-size-text-small);
    }

/* add separator after quota if the value is also visible */

:is(:is(.aspect-entry-value-component .aspect-entry-value) .aspect-entry-value-secondary-split-quota:not(:only-child))::after {
        content: '|';
        content: var(--misc-inline-separator);
        padding: 0 var(--space-inline-xs);
        color: hsl(28 6% 90%);
        color: var(--color-bg-contour);
      }

.attendee-bulk-add-component textarea {
    min-height: 15em;
    width: 100%;
  }

.attendee-bulk-add-component .excess {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-style: italic;
  }

.attendee-bulk-add-component .invalid {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);
  }

:is(.attendee-bulk-add-component .invalid) .de-emphasis {
      color: inherit;
    }

.attendee-bulk-add-component .header {
    font-weight: bold;
  }

/* NOTE
 * Usually we'd avoid overriding this much of the base-component (SearchSelect),
 * but we want to make this blend in with the settings navigation, so these overrides
 * are needed. */

.branch-profile-select-component .link-element {
    padding: var(--space-inset-squish-m);
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    background-color: hsl(28 40% 93%);
    background-color: var(--color-nav-secondary-active-bg);
    color: hsl(28 10% 35%);
    color: var(--color-nav-secondary-text);
  }

:is(.branch-profile-select-component .link-element) .link {
      font-size: var(--font-size-text-small);
    }

:is(.branch-profile-select-component .link-element):hover {
      color: hsl(0 0% 20%);
      color: var(--color-nav-secondary-hover-text);
    }

.branch-profile-select-component .overlay {
    width: 10em;
    border-radius: 0.25em !important;
    border-radius: var(--misc-subtle-rounding) !important;
    background-color: hsl(28 35% 98%) !important;
    background-color: var(--color-bg-deep) !important;
    border: none !important;
  }

:is(:is(.branch-profile-select-component .overlay) .profile-search-input) .search-input {
        border-radius: 0.25em 0.25em 0 0;
        border-radius: var(--misc-subtle-rounding) var(--misc-subtle-rounding) 0 0;
        padding-bottom: 0;
      }

:is(:is(:is(.branch-profile-select-component .overlay) .profile-search-input) .search-input) input {
          border-radius: 0.25em;
          border-radius: var(--misc-subtle-rounding);
          border-color: hsl(28 40% 90%);
          border-color: var(--color-nav-secondary-border);
          background-color: hsl(28 35% 98%) !important;
          background-color: var(--color-nav-secondary-search-bg) !important;
        }

:is(:is(:is(:is(.branch-profile-select-component .overlay) .profile-search-input) .search-input) input)::-moz-placeholder {
            color: hsl(28 15% 50%);
            color: var(--color-nav-primary-text-subtle);
          }

:is(:is(:is(:is(.branch-profile-select-component .overlay) .profile-search-input) .search-input) input)::placeholder {
            color: hsl(28 15% 50%);
            color: var(--color-nav-primary-text-subtle);
          }

.selected:is(:is(:is(:is(.branch-profile-select-component .overlay) .profile-search-input) .search-input) input) {
            outline: none;
          }

:is(.branch-profile-select-component .overlay) .list-items.profile-list {
      padding: var(--space-inset-square-xs);
      color: hsl(28 10% 35%);
      color: var(--color-nav-secondary-text);
    }

:is(:is(.branch-profile-select-component .overlay) .list-items.profile-list) .list-item {
        border-top: none !important;
      }

:is(:is(:is(.branch-profile-select-component .overlay) .list-items.profile-list) .list-item):hover,.selected:is(:is(:is(.branch-profile-select-component .overlay) .list-items.profile-list) .list-item) {
          background-color: hsl(28 40% 93%);
          background-color: var(--color-nav-secondary-active-bg);
          color: hsl(0 0% 20%);
          color: var(--color-nav-secondary-hover-text);
          border-radius: 0.25em;
          border-radius: var(--misc-subtle-rounding);
        }

:is(:is(:is(:is(.branch-profile-select-component .overlay) .list-items.profile-list) .list-item):hover,.selected:is(:is(:is(.branch-profile-select-component .overlay) .list-items.profile-list) .list-item)) mark {
            color: hsl(0 0% 20%);
            color: var(--color-nav-secondary-hover-text);
          }

:is(:is(:is(.branch-profile-select-component .overlay) .list-items.profile-list) .list-item) .list-item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: var(--space-inline-xs);
        }

.branch-select-component .branch-values,.branch-select-component .branch-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-inline-xs);
  }

:is(.branch-select-component .branch-values,.branch-select-component .branch-item) .branch-name {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

:is(.branch-select-component .branch-values) .country-code {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

.branch-select-component .segmented-control-component {
    width: auto;
    margin: var(--space-inset-square-s);
    margin-bottom: 0;
  }

:is(.branch-select-component .segmented-control-component) .segmented-control-item {
      flex: 1;
    }

.callout-component {
  display: flex;
  gap: var(--space-inline-s);
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  padding: var(--space-inset-square-m);
  margin-bottom: var(--space-stack-l);
  overflow-wrap: anywhere;

  /* NOTE I'd like to use `width: fit-content` to avoid rendering callout at full length
   * when that's not needed. However, due to the presence of the floating icon the fit-content
   * calculation doesn't work, and apparently we can't use `width: calc(fit-content - 1.5em);`. */
}

.callout-component.callout-component-danger,.callout-component.callout-component-block {
    color: hsl(0 100% 15%);
    color: var(--color-danger-text);
    background-color: hsl(0 30% 92%);
    background-color: var(--color-danger-bg);
  }

:is(.callout-component.callout-component-danger,.callout-component.callout-component-block) .callout-component-icon {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

.callout-component.callout-component-warning {
    color: hsl(36 100% 15%);
    color: var(--color-warning-text);
    background-color: hsl(35 80% 90%);
    background-color: var(--color-warning-bg);
  }

.callout-component.callout-component-warning .callout-component-icon {
      color: hsl(35 80% 50%);
      color: var(--color-warning-signature);
    }

.callout-component.callout-component-info {
    color: hsl(210 100% 15%);
    color: var(--color-info-text);
    background-color: hsl(210 30% 91%);
    background-color: var(--color-info-bg);
  }

.callout-component.callout-component-info .callout-component-icon {
      color: hsl(210 50% 42%);
      color: var(--color-info-signature);
    }

.callout-component.callout-component-success {
    color: hsl(135 100% 15%);
    color: var(--color-success-text);
    background-color: hsl(135 30% 92%);
    background-color: var(--color-success-bg);
  }

.callout-component.callout-component-success .callout-component-icon {
      color: hsl(135 50% 40%);
      color: var(--color-success-signature);
    }

.callout-component .callout-component-icon {
    width: 1.5em; /* icon width */
  }

:is(.callout-component .callout-component-content) p:last-child {
      margin-bottom: 0; /* collapse bottom margin (parent already have margin) */
    }

.category-select-component .list-items.category-list {
    border-radius: 0.25em !important;
    border-radius: var(--misc-subtle-rounding) !important;
  }

.category-select-component .category-instructions {
    overflow: visible;
    white-space: normal;
    text-overflow: initial;
  }

.checkbox-select-component .checkbox-select-option {
    /* Flexbox used to indent the label when breaking onto a new line.
     * ```
     * [ ] They shut the road through the woods,
     *     seventy years ago.
     * ``` */
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; /* disable text selection */
    margin-bottom: var(--space-stack-s);

    /* this is the same style used in form help-block-component */
  }

:is(.checkbox-select-component .checkbox-select-option) .checkbox-select-description {
      font-size: var(--font-size-text-small);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      line-height: var(--font-line-height-short);
      max-width: var(--font-readable-line-length);
    }

:is(.checkbox-select-component .checkbox-select-option) .checkbox-select-item-box {
      margin-right: var(--space-inline-xs); /* padding towards text */
    }

:is(.checkbox-select-component .checkbox-select-option):not(.disabled) {
      cursor: pointer;
    }

.checkbox-select-component.multi-column {
    -moz-columns: 3 15em;
         columns: 3 15em;
    -moz-column-gap: var(--space-inline-m);
         column-gap: var(--space-inline-m);
  }

/* inside a disabled fieldset or disabled itself */

fieldset:disabled .checkbox-select-component,.checkbox-select-component.disabled {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
    pointer-events: none; /* make it unclickable */
  }

:is(fieldset:disabled .checkbox-select-component,.checkbox-select-component.disabled) .checkbox-select-description {
      color: hsl(0 0% 58%);
      color: var(--color-text-disabled);
    }

.clipboard-button-component {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  color: hsl(0 0% 20%);
  color: var(--color-link-discreet);
  font-family: 'PT Sans', sans-serif;
  font-family: var(--font-regular); /* keep regular font when used on elements with monospace font */
  position: relative;
}

.clipboard-button-component .copy-state {
    cursor: pointer;
  }

:is(.clipboard-button-component .copy-state):hover {
      color: hsl(0 0% 0%);
      color: var(--color-link-discreet-hover);
    }

.clipboard-button-component .confirmation-popup {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: var(--space-stack-l);
    left: 0;
    right: 0;
  }

:is(.clipboard-button-component .confirmation-popup) .label {
      font-size: var(--font-size-text); /* keep default font size when used on elements with larger sizes */
      padding: var(--space-inset-squish-s);
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
      background-color: hsl(210 10% 24%);
      background-color: var(--color-tooltip-bg);
      color: hsl(210 10% 85%);
      color: var(--color-tooltip-text);
    }

.clipboard-field-component input {
    padding: var(--space-inset-square-xs);
    font-family: 'PT Mono', monospace;
    font-family: var(--font-monospace);
    min-width: 15em;
  }

.clipboard-textarea-component {
  position: relative;

  height: 15em;
  width: 25em;
}

.clipboard-textarea-component.tall {
    height: 30em;
  }

.clipboard-textarea-component.full-width {
    width: 100%;
  }

.clipboard-textarea-component textarea {
    height: 100%; /* height is decided by container, above */
    width: 100%; /* width is decided by container, above */
  }

.code:is(.clipboard-textarea-component textarea) {
      font-family: 'PT Mono', monospace;
      font-family: var(--font-monospace);
      font-size: var(--font-size-text-small);
    }

.clipboard-textarea-component .copy-button {
    position: absolute;
    top: 0.5em;
    right: 0.5em;

    font-size: 120%;
  }

.custom-field-value-split-component {
  padding: var(--space-inset-square-l);
  min-width: 16rem;
}

:is(.custom-field-value-split-component .split-entry) .split-entry-value {
      display: flex;
      align-items: center;
    }

:is(:is(.custom-field-value-split-component .split-entry) .split-entry-value) .value-delete {
        margin-left: var(--space-inline-m);
        margin-bottom: var(--space-stack-m);
      }

:is(.custom-field-value-split-component .split-entry) .split-entry-quota {
      margin-bottom: var(--space-stack-m);
      display: flex;
      align-items: center;
    }

:is(:is(.custom-field-value-split-component .split-entry) .split-entry-quota) .percentage {
        flex: 1;
      }

:is(:is(.custom-field-value-split-component .split-entry) .split-entry-quota) .range-selector {
        flex: 4;
      }

.custom-field-value-split-component .action-controls {
    margin-bottom: var(--space-stack-m);
    margin-top: var(--space-stack-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-s);
  }

:is(.custom-field-value-split-component .action-controls) .total-percentage-sum {
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
      padding: var(--space-inset-squish-s);
      background-color: hsl(35 80% 90%);
      background-color: var(--color-warning-bg);
      color: hsl(36 100% 15%);
      color: var(--color-warning-text);
    }

.valid-sum:is(:is(.custom-field-value-split-component .action-controls) .total-percentage-sum) {
        background-color: hsl(135 30% 92%);
        background-color: var(--color-success-bg);
        color: hsl(135 100% 15%);
        color: var(--color-success-text);
      }

.custom-field-value-split-component .split-summary {
    margin-bottom: var(--space-stack-m);
    font-size: var(--font-size-text-small);
  }

:is(.custom-field-value-split-component .split-summary) .split-summary-entry {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

:is(:is(.custom-field-value-split-component .split-summary) .split-summary-entry) .split-summary-label {
        flex: 4;
        text-align: right;
      }

:is(:is(.custom-field-value-split-component .split-summary) .split-summary-entry) .split-summary-value {
        flex: 2;
        text-align: right;
      }

.split-summary-total:is(:is(.custom-field-value-split-component .split-summary) .split-summary-entry) {
        font-weight: bold;
      }

/* Data sheet styles are used to show longer lists of key/value properties,
 * for example data about an employee, or some other entry.
 * They are usually single-column, but support multiple columns/sections of data. */

.data-sheet-vertical,
.data-sheet-horizontal {
  margin-bottom: var(--space-stack-m);
}

:is(:is(.data-sheet-vertical,.data-sheet-horizontal) .data-sheet-entry) .data-sheet-label,:is(:is(.data-sheet-vertical,.data-sheet-horizontal) .data-sheet-entry) .data-sheet-value {
      /* This is only relevant for long words, long sentences already wrap well.
       * Long words can occur for e.g. custom field keys and values. Force-wrap
       * them to avoid breaking the data sheet layout. */
      overflow-wrap: break-word;
    }

:is(:is(.data-sheet-vertical,.data-sheet-horizontal) .data-sheet-entry) .data-sheet-label {
      /* label should be slightly lighter than the value */
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

:is(:is(.data-sheet-vertical,.data-sheet-horizontal) .data-sheet-entry) .data-sheet-value {
      font-size: var(--font-size-text-large);
      max-width: var(--font-readable-line-length);
      /* the :blank selector has too little browser support,
       * so we'll use the helper `{{with-fallback}}` instead */
    }

:is(:is(:is(.data-sheet-vertical,.data-sheet-horizontal) .data-sheet-entry) .data-sheet-value):blank {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
        content: '–';
      }

:is(:is(.data-sheet-vertical,.data-sheet-horizontal) .data-sheet-entry) .data-sheet-description {
      font-size: var(--font-size-text-small);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      max-width: var(--font-readable-line-length);
    }

:is(.data-sheet-vertical,.data-sheet-horizontal):not(.skip-colon) .data-sheet-label::after {
    /* NOTE when using a block for label we cannot control whitespace (from inside the component),
     * so there will be a space between the label and colon. This would be fixed by
     * the still unsupported `text-space-collapse: trim-inner`, but until then we'll
     * simply have to use Handlebars whitespace controls (~). */
    content: ':';
  }

.data-sheet-vertical .data-sheet-label {
    margin-bottom: 0.1rem;
  }

.data-sheet-vertical.columns .data-sheet-entries {
      display: grid;
      grid-gap: var(--space-inline-m);
      gap: var(--space-inline-m); /* grid gap */
    }

.data-sheet-vertical.columns.columns-auto .data-sheet-entries {
      grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    }

.data-sheet-vertical.columns.columns-count-1 .data-sheet-entries {
      grid-template-columns: repeat(1, minmax(10em, 1fr));
    }

.data-sheet-vertical.columns.columns-count-2 .data-sheet-entries {
      grid-template-columns: repeat(2, minmax(10em, 1fr));
    }

.data-sheet-vertical.columns.columns-count-3 .data-sheet-entries {
      grid-template-columns: repeat(3, minmax(10em, 1fr));
    }

.data-sheet-vertical.columns.columns-count-4 .data-sheet-entries {
      grid-template-columns: repeat(4, minmax(10em, 1fr));
    }

.data-sheet-vertical.columns.columns-count-5 .data-sheet-entries {
      grid-template-columns: repeat(5, minmax(10em, 1fr));
    }

.data-sheet-vertical:not(.columns) .data-sheet-entry {
      margin-bottom: var(--space-stack-m);
    }

.data-sheet-horizontal .data-sheet-entry {
    display: grid;
    grid-column-gap: var(--space-inline-m);
    -moz-column-gap: var(--space-inline-m);
         column-gap: var(--space-inline-m); /* space between label, value and actions */
    align-items: baseline;

    grid-template-columns: 12em minmax(12em, 30em); /* TODO could add column width for `actions`, if necessary */

    grid-template-areas:
      'label value actions'
      'label description actions';

    margin-bottom: var(--space-stack-s);
  }

:is(.data-sheet-horizontal .data-sheet-entry) .data-sheet-label {
      grid-area: label;
    }

/* TODO add support for actions in vertical data sheet too */

:is(.data-sheet-horizontal .data-sheet-entry) .data-sheet-actions {
      grid-area: actions;
      text-align: right;
    }

:is(.data-sheet-horizontal .data-sheet-entry) .data-sheet-value {
      grid-area: value;
    }

:is(.data-sheet-horizontal .data-sheet-entry) .data-sheet-description {
      grid-area: description;
    }

.date-field-component {
  display: inline-block;
  position: relative;
}

.date-field-component .picker-symbol-container {
    display: flex;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

:is(.date-field-component .picker-symbol-container) .picker-symbol-area {
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      pointer-events: auto;
      margin-left: auto;
      padding: 0 var(--space-inset-square-xs);
      width: 10%;
    }

:is(:is(.date-field-component .picker-symbol-container) .picker-symbol-area) .picker-symbol {
        background-color: hsl(0 0% 20%);
        background-color: var(--color-form-contour);
        clip-path: polygon(50% 80%, 0 20%, 100% 20%);
        clip-path: var(--misc-open-arrow);

        width: 0.7em;
        aspect-ratio: 1 / 1;
      }

.open:is(:is(:is(.date-field-component .picker-symbol-container) .picker-symbol-area) .picker-symbol) {
          clip-path: polygon(50% 20%, 100% 80%, 0% 80%);
          clip-path: var(--misc-close-arrow);
        }

.date-field-component[disabled],.date-field-component:disabled {
    pointer-events: none;
  }

:is(.date-field-component[disabled],.date-field-component:disabled) .canonical-input {
      color: hsl(0 0% 58%);
      color: var(--color-form-overlay-disabled-text);
      background-color: hsl(0 0% 95%);
      background-color: var(--color-form-overlay-disabled-bg);
      border-color: hsl(0 0% 90%);
      border-color: var(--color-form-overlay-disabled-border);
    }

:is(.date-field-component[disabled],.date-field-component:disabled) .picker-symbol-area {
      pointer-events: none;
    }

:is(:is(.date-field-component[disabled],.date-field-component:disabled) .picker-symbol-area) .picker-symbol {
        background-color: hsl(0 0% 90%);
        background-color: var(--color-form-overlay-disabled-border);
      }

.datepicker-container .air-datepicker {
    /* Popover */
    --adp-background-color: var(--color-popover-window-bg);
    --adp-border-radius: var(--misc-subtle-rounding);
    --adp-border-color-inner: var(--adp-background-color); /* remove border by setting it's color to the bg color */

    /* Date cell */
    --adp-day-name-color: var(--color-text-subtle);
    --adp-cell-background-color-selected: var(--color-select-signature);
    --adp-cell-background-color-selected-hover: var(--color-select-signature);
    --adp-color-current-date: var(--color-select-signature);
    --adp-background-color-hover: var(--color-popover-bg-hover);
    --adp-color-other-month: var(--color-text-subtle);
    --adp-background-color-selected-other-month: var(--color-select-signature);
    --adp-background-color-selected-other-month-focused: var(--color-select-signature);

    /* Text */
    --adp-font-family: var(--font-regular);
    --adp-color: var(--color-text);

    /* Overrides */
    border: none;
    padding: var(--space-inset-square-xs);
  }

.seals-modal .seal,.seals-modal .insertion-slot {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    padding: var(--space-inset-square-s);
    cursor: pointer;
  }

:is(.seals-modal .seal,.seals-modal .insertion-slot) + .seal,:is(.seals-modal .seal,.seals-modal .insertion-slot) + .insertion-slot {
      margin-top: var(--space-stack-s);
    }

:is(.seals-modal .seal) .seal-row {
      display: flex;
    }

:is(.seals-modal .seal) .actor,:is(.seals-modal .seal) .sealed-by {
      flex: 1;
    }

:is(.seals-modal .seal) .state,:is(.seals-modal .seal) .timestamp {
      margin-left: var(--space-inline-m);
    }

:is(.seals-modal .seal) .actor {
      font-weight: bold;
    }

.skipped:is(:is(.seals-modal .seal) .actor) {
        -webkit-text-decoration: line-through solid;
                text-decoration: line-through solid;
      }

.pending:is(.seals-modal .seal),.skipped:is(.seals-modal .seal) {
      background-color: hsl(0 0% 95%);
      background-color: var(--color-neutral-bg);
    }

.approved:is(.seals-modal .seal) {
      color: hsl(135 100% 15%);
      color: var(--color-success-text);
    }

.approved:is(.seals-modal .seal) .icon-component {
        color: hsl(135 100% 15%);
        color: var(--color-success-text);
      }

.approved:is(.seals-modal .seal) {
      background-color: hsl(135 30% 92%);
      background-color: var(--color-success-bg);
    }

.selectable:is(.seals-modal .seal) {
      cursor: pointer;
    }

.selected:is(.seals-modal .seal) {
      /* Alter padding to compensate for difference in border width between unselected and selected */
      padding: calc(var(--space-inset-square-s) - 2px);
      border: 2px solid hsl(210 55% 40%);
      border: 2px solid var(--color-select-signature);
    }

.seals-modal .insertion-slot {
    display: flex;
    justify-content: center;
    color: hsl(210 55% 40%);
    color: var(--color-select-signature);
    border: 1px dashed hsl(210 55% 40%);
    border: 1px dashed var(--color-select-signature);
  }

:is(.seals-modal .insertion-slot):hover,.selected:is(.seals-modal .insertion-slot) {
      background-color: hsl(197 40% 93%);
      background-color: var(--color-select-bg);
    }

.selected:is(.seals-modal .insertion-slot) {
      /* Alter padding to compensate for difference in border width between unselected and selected */
      padding: calc(var(--space-inset-square-s) - 1px);
      color: hsl(210 55% 40%);
      color: var(--color-select-signature);
      border: 2px dashed hsl(210 55% 40%);
      border: 2px dashed var(--color-select-signature);
    }

.seals-modal p:not(:first-child) {
    margin-top: var(--space-stack-l);
  }

.seals-modal .comment {
    width: 100%;
    height: 8em; /* about 4 rows of text */
  }

.empty-state-component {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);

  background-color: hsl(0 0% 95%);

  background-color: var(--color-empty-state-bg);
  margin-bottom: var(--space-stack-m);
  padding: var(--space-inset-square-xl);
  box-sizing: border-box;

  /* behave like a block element with `width: auto` if inside flex container */
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-inline-m);

  min-height: 20em;
}

.empty-state-component.empty-state-component-short {
    min-height: 5em;
  }

.empty-state-component .empty-state-component-heading,.empty-state-component .empty-state-component-description {
    text-align: center;
    color: hsl(0 0% 41%);
    color: var(--color-empty-state-text);
  }

.empty-state-component .empty-state-component-heading {
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    font-size: var(--font-size-heading2);
  }

.empty-state-component .empty-state-component-description {
    max-width: var(--font-readable-line-length);
    font-size: var(--font-size-text-large);
  }

.empty-value-component {
  /* padding for cases where we add a tooltip */
  padding: var(--space-inset-square-s);
  margin: calc(-1 * var(--space-inset-square-s));
}

/* see also report.css and outbox.css */

.evaluation-component .evaluation-issue-group {
    margin-bottom: var(--space-stack-m);
  }

.evaluation-component .duplicate-warning {
    margin-top: var(--space-stack-xs);
  }

.evaluation-component .evaluation-summary {
    text-align: center;
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-size: var(--font-size-text-small);
  }

:is(.export-order-table-component .retrieved),:is(.export-order-table-component .retrieved) a {
      color: hsl(0 0% 58%);
      color: var(--color-link-disabled);
    }

.feature-availability-component {
  margin-left: var(--space-stack-xs);
  cursor: pointer;
}

.feature-availability-component :hover {
    text-decoration: underline;
  }

.popover-feature-availability {
  padding: var(--space-inset-square-m);
  font-size: var(--font-size-text-large);
}

.popover-feature-availability .title {
    font-weight: bold;
  }

.popover-feature-availability .title,.popover-feature-availability .description,.popover-feature-availability .link {
    max-width: 30ch;
    margin-bottom: var(--space-stack-s);
  }

/* This is a fix to make overflow-x: auto; work correctly on the preview-table */

.form-analytical-query-component .form-content {
    min-inline-size: 100%;
  }

:is(.form-analytical-query-component .form-content) .pill-container {
      display: flex;
      flex-wrap: wrap;
      margin-top: var(--space-stack-xs);
      margin-bottom: var(--space-stack-s);
      gap: var(--space-inline-s);
    }

:is(:is(.form-analytical-query-component .form-content) .pill-container) .control + .control {
        margin-top: 0; /* override styles for control */
      }

:is(.form-analytical-query-component .form-content) .scheduled-queries-preview {
      margin-bottom: var(--space-stack-s);
      background-color: hsl(0 0% 98%);
      background-color: var(--color-form-bg);
      border: 1px solid hsl(28 6% 90%);
      border: 1px solid var(--color-bg-contour);
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
      padding: var(--space-inset-square-m);
    }

:is(:is(.form-analytical-query-component .form-content) .scheduled-queries-preview) .preview-table {
        width: 100%;
        box-sizing: border-box;

        overflow-x: auto;
        background-color: hsl(28 2% 96%);
        background-color: var(--color-bg-container);
        font-family: 'PT Mono', monospace;
        font-family: var(--font-monospace);
        padding: 0 var(--space-inline-s);
        border: 1px solid hsl(28 6% 90%);
        border: 1px solid var(--color-bg-contour);
        border-radius: 0.25em;
        border-radius: var(--misc-subtle-rounding);
        text-align: left;
      }

.form-custom-script-component .validation {
    margin-bottom: var(--space-stack-l);
  }

:is(.form-custom-script-component .validation) .error {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

:is(.form-custom-script-component .validation) .warning {
      color: hsl(35 80% 50%);
      color: var(--color-warning-signature);
    }

.form-custom-script-component .detail-entries {
    display: flex;
  }

:is(.form-custom-script-component .detail-entries) .detail-entry {
      width: 100%;
    }

:is(:is(.form-custom-script-component .detail-entries) .detail-entry) textarea {
        width: 100%;
      }

.custom-script-sandbox .control-checkbox {
    margin-right: var(--space-inline-xs);
  }

.user-form .previous-branches-form-accordion {
    margin-bottom: var(--space-stack-s);
  }

.geographic-map-component {
  /* maps need a default height to render
   * code using the map component can override the height if needed,
   * e.g. turn them into a flex element or simply changing the height */
  height: 30em;
}

.geographic-map-component,.geographic-map-component .map-container,.geographic-map-component .map-placeholder {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
  }

.geographic-map-component .map-container {
    width: 100%;
    height: 100%;

    /* don't show map zoom button unless hovering map */
  }

:is(.geographic-map-component .map-container) .mapboxgl-ctrl-top-left {
      opacity: 0%;
      transition: opacity 0.3s;
    }

:is(.geographic-map-component .map-container):hover .mapboxgl-ctrl-top-left {
        opacity: 100%;
        transition: opacity 0.3s;
      }

.geographic-map-component .map-placeholder {
    height: 100%;
    padding: var(--space-inset-square-xl);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-inline-m);

    background-color: hsl(0 0% 95%);

    background-color: var(--color-empty-state-bg);
    color: hsl(0 0% 41%);
    color: var(--color-empty-state-text);
  }

:is(.geographic-map-component .map-placeholder) .map-placeholder-description {
      text-align: center;
      font-size: var(--font-size-text-large);
      max-width: var(--font-readable-line-length);
    }

.herald-container-component .herald-message {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    box-shadow: 0 4px 12px 1px hsl(0 0% 0% / 20%);
    box-shadow: var(--misc-popover-shadow);

    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    z-index: var(--misc-z-index-flash);

    width: 20rem;
    margin-left: -12rem; /* (20+2*2) / 2 */
    margin-top: -10rem;
    padding: var(--space-inset-square-xl);
    background-color: hsl(0 0% 0% / 85%);
    background-color: var(--color-notification-bg);
    text-align: center;
    word-wrap: break-word;
  }

:is(.herald-container-component .herald-message)  > p {
      margin-bottom: 0;
      font-size: var(--font-size-herald);
      color: hsl(0 0% 100%);
      color: var(--color-notification-text);
    }

.home-information-component {
  display: flex;
  flex-direction: column;
}

.home-information-component .information-heading {
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    font-weight: bold;
    margin-bottom: var(--space-stack-s);
  }

.home-information-component .information-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: var(--space-inline-l);
    gap: var(--space-inline-l);
  }

:is(.home-information-component .information-blocks) .tall {
      grid-row: auto / span 2;
    }

:is(.home-information-component .information-blocks) .wide {
      grid-column: auto / span 2;
    }

:is(.home-information-component .information-blocks) button + button {
      margin-left: var(--space-inline-s);
    }

.information-box-component {
  border-radius: 8px;
  border-radius: var(--misc-moderate-rounding);
  background-color: hsl(0 0% 98%);
  background-color: var(--color-bg-container-discreet);
  padding: var(--space-stack-xl) var(--space-inline-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-stack-m);
  justify-content: center;
  text-align: center;
}

.information-box-component .heading,.information-box-component .content {
    max-width: 40ch;
  }

.information-box-component.wide .content {
      max-width: var(--font-readable-line-length);
    }

.information-box-component .heading {
    font-size: var(--font-size-heading3);
    font-weight: bold;
  }

.master-checkbox-component {
  cursor: pointer;
}

/* section, for grouping of pages with more content */

.page-section-component {
  margin-bottom: var(--space-stack-l);
}

.page-section-component .page-section-header {
    border-bottom: 1px solid hsl(28 6% 90%);
    border-bottom: 1px solid var(--color-bg-contour);
    padding-bottom: var(--space-stack-xs); /* keep in sync with margin-bottom in page-section */
    margin-bottom: var(--space-stack-s);
    display: flex; /* heading and toolbar on the same line */
    align-items: center;
    gap: var(--space-inline-s);
  }

:is(.page-section-component .page-section-header) .page-section-heading {
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);
      font-size: var(--font-size-heading2);
      font-weight: bold;
    }

:is(.page-section-component .page-section-header) .page-section-toolbar {
      margin-left: auto; /* align right */

      display: flex; /* to ignore whitespace between elements */
      /* if space is lacking, wrap the heading onto two lines instead of
       * shrinking the toolbar, since that causes links to wrap unnaturally */
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--space-inline-s);
    }

.payment-transaction-progress-bar-component {
  --color-stacked-progress-bar-background: var(--color-bg-container);
  --color-stacked-progress-bar-two: hsl(210 80% 75%);
  --color-stacked-progress-bar-three: var(--color-success-signature);
}

.payment-transactions-table-component .center-align {
    display: flex;
    justify-content: center;
  }

.payment-transactions-table-component .receipt-indicator {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
  }

.payment-transactions-table-component td.ignored {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
    text-decoration: line-through;
  }

:is(.payment-transactions-table-component table.default td.actions) a + a {
      position: relative; /* anchoring for the absolutely positioned inline separator */
      margin-left: var(--space-inline-s); /* give space for the inline separator */
    }

:is(:is(.payment-transactions-table-component table.default td.actions) a + a)::before {
        content: '|';
        content: var(--misc-inline-separator);
        position: absolute; /* prevent extension of the link area */
        left: calc(-0.5 * var(--space-inline-s));
        /* The dynamic before-element has spacing between itself and the preceeding element,
         * equal to about half a glyph. To offset this space we use a small negative margin. */
        margin-left: -0.5ch;
        color: hsl(28 6% 90%);
        color: var(--color-bg-contour);
        pointer-events: none; /* prevent tooltip */
      }

.payment-authorizations-table-component .center-align {
    display: flex;
    justify-content: center;
  }

.payment-authorizations-table-component .receipt-indicator {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
  }

.payment-authorizations-table-component td.ignored {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
    text-decoration: line-through;
  }

/* TODO (TECH-4605): Move this styling to the Icon component itself.  */

.payment-authorizations-table-component .authorization-icon {
    color: hsl(43 80% 49%);
    color: var(--color-golden-star);
  }

:is(.payment-authorizations-table-component table.default td.actions) a + a {
      position: relative; /* anchoring for the absolutely positioned inline separator */
      margin-left: var(--space-inline-s); /* give space for the inline separator */
    }

:is(:is(.payment-authorizations-table-component table.default td.actions) a + a)::before {
        content: '|';
        content: var(--misc-inline-separator);
        position: absolute; /* prevent extension of the link area */
        left: calc(-0.5 * var(--space-inline-s));
        /* The dynamic before-element has spacing between itself and the preceeding element,
         * equal to about half a glyph. To offset this space we use a small negative margin. */
        margin-left: -0.5ch;
        color: hsl(28 6% 90%);
        color: var(--color-bg-contour);
        pointer-events: none; /* prevent tooltip */
      }

.pill-component {
  border-radius: 8px;
  border-radius: var(--misc-moderate-rounding);
  display: inline-block;
  padding: var(--space-inset-squish-s);
  font-size: inherit;
  white-space: nowrap;

  /* neutral if no type is chosen */
  background-color: hsl(0 0% 95%);
  background-color: var(--color-neutral-bg);
  color: hsl(0 0% 20%);
  color: var(--color-text);
}

.pill-component.actionable {
    cursor: pointer;
  }

.pill-component.actionable:hover {
      background-color: color-mix(in hsl, hsl(0 0% 95%) 95%, hsl(0 0% 20%)); /* darken */
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.actionable:hover {
      background-color: color-mix(in hsl, var(--color-neutral-bg) 95%, var(--color-text));
    }
}

.pill-component.alpha {
    background-color: hsl(346 90% 66%);
    background-color: var(--color-swatch-alpha);
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.pill-component.alpha.actionable:hover {
      background-color: color-mix(in hsl, hsl(346 90% 66%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.alpha.actionable:hover {
      background-color: color-mix(in hsl, var(--color-swatch-alpha) 95%, var(--color-text));
    }
}

.pill-component.beta {
    background-color: hsl(210 80% 52%);
    background-color: var(--color-swatch-beta);
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.pill-component.beta.actionable:hover {
      background-color: color-mix(in hsl, hsl(210 80% 52%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.beta.actionable:hover {
      background-color: color-mix(in hsl, var(--color-swatch-beta) 95%, var(--color-text));
    }
}

.pill-component.gamma {
    background-color: hsl(169 50% 41%);
    background-color: var(--color-swatch-gamma);
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.pill-component.gamma.actionable:hover {
      background-color: color-mix(in hsl, hsl(169 50% 41%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.gamma.actionable:hover {
      background-color: color-mix(in hsl, var(--color-swatch-gamma) 95%, var(--color-text));
    }
}

.pill-component.delta {
    background-color: hsl(35 81% 44%);
    background-color: var(--color-swatch-delta);
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.pill-component.delta.actionable:hover {
      background-color: color-mix(in hsl, hsl(35 81% 44%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.delta.actionable:hover {
      background-color: color-mix(in hsl, var(--color-swatch-delta) 95%, var(--color-text));
    }
}

.pill-component.epsilon {
    background-color: hsl(280 80% 56%);
    background-color: var(--color-swatch-epsilon);
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.pill-component.epsilon.actionable:hover {
      background-color: color-mix(in hsl, hsl(280 80% 56%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.epsilon.actionable:hover {
      background-color: color-mix(in hsl, var(--color-swatch-epsilon) 95%, var(--color-text));
    }
}

.pill-component.zeta {
    background-color: hsl(74 75% 34%);
    background-color: var(--color-swatch-zeta);
    color: hsl(0 0% 100%);
    color: var(--color-bg);
  }

.pill-component.zeta.actionable:hover {
      background-color: color-mix(in hsl, hsl(74 75% 34%) 95%, hsl(0 0% 20%));
    }

@supports (color: color-mix(in lch, red, blue)) {
.pill-component.zeta.actionable:hover {
      background-color: color-mix(in hsl, var(--color-swatch-zeta) 95%, var(--color-text));
    }
}

.pill-component .info-icon {
    margin-right: var(--space-inline-xs);
  }

.pill-component .action-icon {
    margin-left: var(--space-inline-xs);
  }

.settings-navigation-component {
  --local-item-horizontal-space: var(--space-inline-s);

  max-width: 230px; /* longest word is 'Abwesenheitsassistent' */

  /* prevent settings navigation to get squeezed (allowing some shrinking helps with space on small displays) */
  min-width: 200px;

  box-sizing: border-box; /* otherwise padding ruins the height */
  overflow-y: auto;

  /* no text selection */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;

  background-color: hsl(28 35% 98%);

  background-color: var(--color-nav-secondary-bg);
  border-right: 1px solid hsl(28 40% 90%);
  border-right: 1px solid var(--color-nav-secondary-border);
  font-family: 'PT Sans Caption', sans-serif;
  font-family: var(--font-caption);
  padding-top: var(--space-stack-m);
}

.settings-navigation-component .nav-group {
    margin-bottom: var(--space-stack-s);
  }

.settings-navigation-component .nav-group-label {
    color: hsl(28 10% 70%);
    color: var(--color-nav-secondary-header);
    padding: var(--space-inset-squish-m);
    margin-left: var(--local-item-horizontal-space);
    text-transform: uppercase;
    font-size: var(--font-size-navigation);
  }

.settings-navigation-component .branch-profile-select-component {
    margin: var(--space-stack-xs) var(--space-inline-s);
  }

.settings-navigation-component .nav-item {
    color: hsl(28 10% 35%);
    color: var(--color-nav-secondary-text);
    padding: var(--space-inset-squish-m);
    margin: 0 var(--local-item-horizontal-space);

    display: flex;
    align-items: center;
    gap: var(--space-inline-s);
  }

:is(.settings-navigation-component .nav-item) .icon-component {
      display: inline-block;
      margin-right: var(--space-inline-xs);
    }

:is(.settings-navigation-component .nav-item):hover,.active:is(.settings-navigation-component .nav-item) {
      border-radius: 8px;
      border-radius: var(--misc-moderate-rounding);
      text-decoration: none;
    }

:is(.settings-navigation-component .nav-item):hover {
      color: hsl(0 0% 20%);
      color: var(--color-nav-secondary-hover-text);
      background-color: hsl(28 40% 95%);
      background-color: var(--color-nav-secondary-hover-bg);
    }

/* style as a non-link */

.active:is(.settings-navigation-component .nav-item) {
      cursor: default;
      background-color: hsl(28 40% 93%);
      background-color: var(--color-nav-secondary-active-bg);
      color: hsl(0 0% 20%);
      color: var(--color-nav-secondary-hover-text);
    }

.sidebar-navigation-component {
  /* enforce consistent spacing for all navigation menu sub-elements */
  --local-item-horizontal-space: var(--space-inline-s);

  display: flex;
  flex-direction: column;

  background-color: hsl(28 30% 95%);

  background-color: var(--color-nav-primary-bg);
  font-family: 'PT Sans Caption', sans-serif;
  font-family: var(--font-caption);
  border-right: 1px solid hsl(28 40% 90%);
  border-right: 1px solid var(--color-nav-secondary-border);

  overflow-y: auto; /* scroll, for small displays */
  scrollbar-color: hsl(28 30% 80%) hsl(28 30% 92%);
  scrollbar-color: var(--color-nav-primary-scrollbar) var(--color-nav-primary-scrollbar-thumb);

  /* Due to min-width on the main content the navigation should never overlap. But on very small screens
   * it may nevertheless overlap the main content, which will scroll underneath it. In that rare
   * case a z-index value ensures that the navigation and content doesn't blend into each other. */
  z-index: 10;
  z-index: var(--misc-z-index-overlay);

  /* no text selection */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}

.sidebar-navigation-component a {
    color: hsl(28 15% 35%);
    color: var(--color-nav-primary-text);
  }

:is(.sidebar-navigation-component a):hover {
      text-decoration: none;
    }

.sidebar-navigation-component .nav-group {
    margin-bottom: var(--space-stack-s);
  }

:is(.sidebar-navigation-component .nav-group) .nav-group-label {
      color: hsl(28 10% 70%);
      color: var(--color-nav-primary-header);
      padding: var(--space-inset-squish-m);
      margin-left: var(--local-item-horizontal-space);
      text-transform: uppercase;
      font-size: var(--font-size-navigation);
    }

:is(.sidebar-navigation-component .nav-group) .nav-item {
      padding: var(--space-inset-squish-m);
      display: flex;
      align-items: center;
      gap: var(--space-inline-s);
      margin: 0 var(--local-item-horizontal-space);

      cursor: pointer; /* needed for website links */
    }

.active:is(:is(.sidebar-navigation-component .nav-group) .nav-item) {
        color: hsl(28 30% 20%);
        color: var(--color-nav-primary-select-text);
        background-color: hsl(28 40% 90%);
        background-color: var(--color-nav-primary-select-bg);
      }

/* push to the right */

:is(:is(.sidebar-navigation-component .nav-group) .nav-item) .count-badge-component {
        margin-left: auto;
      }

:is(:is(:is(.sidebar-navigation-component .nav-group) .nav-item) .count-badge-component):not(.emphasis,.compact) {
          background-color: hsl(28 30% 80%);
          background-color: var(--color-nav-primary-counter-bg);
          color: hsl(28 15% 35%);
          color: var(--color-nav-primary-counter-text);
        }

/* position CountBadge compact component */

.sidebar-navigation-component .news-item,.sidebar-navigation-component .nav-item {
    position: relative;
  }

:is(.sidebar-navigation-component .news-item,.sidebar-navigation-component .nav-item) .compact-badge {
      position: absolute;
    }

.sidebar-navigation-component .news-item .compact-badge {
    top: 8px;
    right: 8px;
  }

.sidebar-navigation-component .nav-item .compact-badge {
    top: 8px;
    right: 13px;
  }

:is(.sidebar-navigation-component .nav-item,.sidebar-navigation-component .news-item):hover,.active:is(.sidebar-navigation-component .nav-item,.sidebar-navigation-component .news-item) {
      border-radius: 8px;
      border-radius: var(--misc-moderate-rounding);
      color: hsl(0 0% 20%);
      color: var(--color-nav-primary-hover-text);
      background-color: hsl(28 40% 92%);
      background-color: var(--color-nav-primary-hover-bg);
    }

.sidebar-navigation-component .news-item,.sidebar-navigation-component .collapse-button {
    font-size: var(--font-size-text-large);
    padding: var(--space-inset-squish-s);
  }

.sidebar-navigation-component .top-navigation {
    flex: 1;
  }

:is(.sidebar-navigation-component .top-navigation) header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: var(--space-stack-s) var(--local-item-horizontal-space);
    }

:is(:is(.sidebar-navigation-component .top-navigation) header) .news-group {
        display: flex;
        align-items: center;
      }

:is(:is(.sidebar-navigation-component .top-navigation) header) .logo {
        padding: var(--space-inset-squish-m);
        width: 100px;
      }

.sidebar-navigation-component .bottom-navigation {
    margin-top: auto;
  }

:is(.sidebar-navigation-component .bottom-navigation) .build-info {
      border-radius: 8px;
      border-radius: var(--misc-moderate-rounding);
      padding: var(--space-inset-squish-m);
      margin: 0 var(--local-item-horizontal-space);
      font-size: var(--font-size-navigation);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

.sidebar-navigation-component .end-section {
    background-color: hsl(28 30% 95%);
    background-color: var(--color-nav-primary-bg);
    border-top: 1px solid hsl(28 30% 90%);
    border-top: 1px solid var(--color-nav-primary-border);
    padding: var(--space-stack-s) 0;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-inline-xs);

    position: sticky;
    bottom: 0;
  }

:is(.sidebar-navigation-component .end-section) .collapse-button {
      margin-right: var(--local-item-horizontal-space);
    }

:is(.sidebar-navigation-component .end-section) .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-inline-xs);

      padding: var(--space-inset-squish-xl);
      margin-left: var(--local-item-horizontal-space);
      overflow-wrap: anywhere;
    }

:is(:is(.sidebar-navigation-component .end-section) .user-info):hover {
        border-radius: 8px;
        border-radius: var(--misc-moderate-rounding);
        background-color: hsl(28 40% 92%);
        background-color: var(--color-nav-primary-hover-bg);
      }

:is(:is(.sidebar-navigation-component .end-section) .user-info) .branch-name {
        font-weight: bold;
        font-size: var(--font-size-text-large);
      }

:is(:is(.sidebar-navigation-component .end-section) .user-info) .user-name {
        font-size: var(--font-size-text-small);
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

/* The collapsed sidebar */

.sidebar-navigation-component.collapsed header,.sidebar-navigation-component.collapsed header .news-group,.sidebar-navigation-component.collapsed .bottom-navigation {
    flex-direction: column;
  }

.sidebar-navigation-component.collapsed header {
    margin: var(--space-stack-s) var(--local-item-horizontal-space);
  }

:is(.sidebar-navigation-component.collapsed header) a {
      text-align: center;
    }

:is(.sidebar-navigation-component.collapsed header) .logo {
      width: 40%;
      margin-bottom: var(--space-stack-s);
    }

/* hide some elements */

.sidebar-navigation-component.collapsed .nav-item .label,.sidebar-navigation-component.collapsed .bulletin,.sidebar-navigation-component.collapsed .count-badge-component:not(.compact) {
    display: none;
  }

/* preserve vertical spacing to prevent jumping */

.sidebar-navigation-component.collapsed .nav-group-label {
    overflow: hidden;
    white-space: nowrap; /* prevent more than one line of empty space */
    visibility: hidden;
  }

:is(.sidebar-navigation-component.collapsed .nav-group-label):first-of-type {
      display: none; /* hide first label to remove space */
    }

.sidebar-navigation-component.collapsed .nav-group .nav-item {
    justify-content: center;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto;
  }

.sidebar-navigation-component.collapsed .end-section {
    flex-direction: column;
    gap: 0;
  }

:is(.sidebar-navigation-component.collapsed .end-section) .user-info {
      padding: 0;
      height: 50px;
      width: 50px;
      margin: 0 auto var(--space-stack-s);
      justify-content: center;
      align-items: center;
      letter-spacing: 0.15em;
    }

:is(.sidebar-navigation-component.collapsed .end-section) .collapse-button {
      margin: 0;
    }

.step-indicator-component {
  --step-indicator-line-height: 3px;

  display: flex;
}

.step-indicator-component .step {
    flex: 1;
    color: hsl(0 0% 60%);
    color: var(--color-neutral-signature);
  }

:is(.step-indicator-component .step) .progress {
      display: flex;
      align-items: center;
    }

:is(:is(.step-indicator-component .step) .progress) .line {
        flex: 1;
        height: var(--step-indicator-line-height);
        background-color: hsl(0 0% 60%);
        background-color: var(--color-neutral-signature);
      }

:is(:is(.step-indicator-component .step) .progress) .icon-component {
        font-size: 1.5rem;
      }

/* Ideally step labels shouldn't wrap, and this is controlled
     * by setting a minimum width on the step indicator component (from the outside).
     * However, for some languages/scenarios, text will wrap and in that case we want it
     * to look good. So we've decreased the default line-height for a more coherent label. */

:is(.step-indicator-component .step) .step-label {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      text-align: center;
      padding: var(--space-inset-squish-l);
      line-height: var(--font-line-height-short);
    }

:is(.step-indicator-component .step) .pre-line {
      margin-right: var(--space-inline-m);
      border-top-right-radius: calc(var(--step-indicator-line-height) / 2);
      border-bottom-right-radius: calc(var(--step-indicator-line-height) / 2);
    }

:is(.step-indicator-component .step) .post-line {
      margin-left: var(--space-inline-m);
      border-top-left-radius: calc(var(--step-indicator-line-height) / 2);
      border-bottom-left-radius: calc(var(--step-indicator-line-height) / 2);
    }

.completed:is(.step-indicator-component .step) {
      color: hsl(135 50% 40%);
      color: var(--color-success-signature);
    }

.completed:is(.step-indicator-component .step) .progress .line {
        background-color: hsl(135 50% 40%);
        background-color: var(--color-success-signature);
      }

.completed:is(.step-indicator-component .step) .step-label {
        color: hsl(135 50% 40%);
        color: var(--color-success-signature);
      }

.current:is(.step-indicator-component .step) {
      color: hsl(135 50% 40%);
      color: var(--color-success-signature);
    }

.current:is(.step-indicator-component .step) .step-label {
        color: hsl(135 50% 40%);
        color: var(--color-success-signature);
        font-weight: bold;
      }

.current:is(.step-indicator-component .step) .progress .pre-line {
        background-color: hsl(135 50% 40%);
        background-color: var(--color-success-signature);
      }

:is(.step-indicator-component .step):first-child .pre-line {
        visibility: hidden;
      }

:is(.step-indicator-component .step):last-child .post-line {
        visibility: hidden;
      }

.invalid-proof-of-purchase-popover {
  padding: var(--space-inset-square-m);
  font-size: var(--font-size-text-large);
}

.invalid-proof-of-purchase-popover .title {
    font-weight: bold;
  }

.invalid-proof-of-purchase-popover .title,.invalid-proof-of-purchase-popover .description,.invalid-proof-of-purchase-popover .link {
    max-width: 30ch;
    margin-bottom: var(--space-stack-s);
  }

.receipt-component {
  position: relative;

  /* need border since many receipts have a white background,
   * and we don't want them to visually "float around" */
  border: 1px solid hsl(0 0% 95%);
  border: 1px solid var(--color-img-border);

  /* We want to give both the receipt (with its border and background),
   * as well as the image, a rounded corner. We could have used `overflow: hidden`,
   * but that will mess with our ability to use position: sticky on the button toolbar.
   * So instead we're simply applying the radius to both the component and inner img elements. */
}

.receipt-component,.receipt-component img {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
  }

.receipt-component img {
    display: block;
    margin: 0 auto; /* center tall images horizontally */
  }

/* With elastic mode, the image will shrink to the constraints set by the
   * current width of the receipt component. Useful when the layout
   * need to adapt based on current viewport width. */

.receipt-component.elastic {
    height: -moz-min-content;
    height: min-content; /* prevent overlay to become taller than the image */
  }

.receipt-component.elastic img {
      width: auto;
      height: auto;
      max-width: 100%;
    }

.receipt-component {

  /* Style the background in cases where the receipt image is smaller than our minimum size.
   * NOTE Even better would be to extract a color from the image and use that,
   * but feels like a slight overkill right now.
   * https://github.com/Vibrant-Colors/node-vibrant/tree/master
   * https://jariz.github.io/vibrant.js/
   * https://github.com/woltapp/blurhash
   */
  background-image:
    linear-gradient(
      -45deg,
      hsl(0 0% 98%) 0% 25%,
      hsl(0 0% 95%) 25% 50%,
      hsl(0 0% 98%) 50% 75%,
      hsl(0 0% 95%) 75% 100%
    );

  background-size: 20px 20px;

  /* NOTE
   * Images are sized based on their configured 'size'. We have a handful of
   * predefined max-width/max-height pairs, i.e. each size has a maximum width and maximum height.
   * These maximums are never exceeded, while respecting the intrinsic aspect-ratio of the image.
   *
   * Since most photos are either from a camera (portrait), document (portrait) or email (also portrait),
   * the original photos will mostly be taller than they are wide.
   *
   * Some common aspect ratios are:
   * A4 documents (PDFs): 210mm : 297mm (≈ 0.71 aspect ratio)
   * US standard letter (PDFs): 8.5" : 11" (≈ 0.77 aspect ratio)
   * Mobile cameras: 3:4 (0.75 aspect ratio), 2:3 (≈ 0.66 aspect ratio) and 9:16 (0.5625 aspect ratio)
   * Skovik Rasterizer: 800 : 1200 (≈ 0.66 aspect ratio)
   *
   * Since most images are portraits, they will de-facto be limited by the height constraint,
   * not the width constraint. Furthermore, they'll all be around the same width.
   *
   * When presenting images visually, there are different schools:
   * 1. Let the resized images have different (intrinsic) aspect ratios, under some max-constraint.
   *    This is what e.g. Apple Photos does.
   * 2. All images have the same thumbnail size (width/height), using something like `object-fit: cover`
   *    to cover the entire area of the predefined thumbnail size. Image will be cropped (some information is "lost").
   * 3. Something of a middle-ground, where each box/frame for the images has uniform size, but the image inside
   *    it retains its intrinsic aspect ratio, under the box constraints. The area not covered by the image
   *    gets some background color, e.g. black or stripes. Looks like a neat grid (all images
   *    frames have the same size), but images also retain aspect ratio.
   *
   * In the desktop client we're going with the first approach. When doing so, we do want to avoid two cases that
   * would cause trouble unless handled:
   * A. Image is very small (smaller than size constraints). Not common, but can occur due to bugs or incorrectly
   *    parsed email receipts. Try uploading a 10/10 pixel image. For such as small image there isn't even room for
   *    the delete button. We fix this using a minimum width, that should be enough for the buttons to show.
   * B. For very wide images (panorama-like photos), they get needlessly short which looks bad. To handle this,
   *    we also have an absolute minimum height.
   */

  /* These minimum values should be ~2/3 of the respective constraints for the smallest size,
   * and are needed to make sure that even weirdly small images are big enough that the button toolbar
   * will fit inside. */
  min-width: 16em;
  min-height: 12em;

  /* overlay contains indicators + button toolbar */
}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
.receipt-component {
  background-image:
    linear-gradient(
      -45deg,
      var(--color-img-bg-secondary) 0% 25%,
      var(--color-img-bg-primary) 25% 50%,
      var(--color-img-bg-secondary) 50% 75%,
      var(--color-img-bg-primary) 75% 100%
    );
}
}

.receipt-component .receipt-component-overlay {
    /* Pointer events are disabled, since the magnifier code assumes that "mouse over"
     * will hit the image (not the overlay). Note that we've re-enabled pointer events
     * for the indicators and toolbar. If we ever rewrite the magnifier we should try to write
     * it such that this adjustment isn't needed (unless that's needlessly complicated). */
    pointer-events: none;

    /* overlay should occupy the same space as the component (parent element) */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    padding: var(--space-inset-square-s);

    /* align indicators and toolbar as a column, with toolbar attached to the bottom */
    display: flex;
    flex-direction: column;
  }

:is(.receipt-component .receipt-component-overlay) .receipt-component-indicators {
      display: flex;
      gap: var(--space-inline-s);
      justify-content: space-between;
    }

:is(:is(.receipt-component .receipt-component-overlay) .receipt-component-indicators) .receipt-component-indicators-primary {
        display: flex;
        gap: var(--space-inline-s);
      }

/* styling assume that these indicators will contain a single icon,
       * that is more or less squarely sized */

:is(:is(:is(.receipt-component .receipt-component-overlay) .receipt-component-indicators) .receipt-component-indicator):not(a) {
          cursor: pointer; /* receipt itself is clickable, but the indicators aren't always */
        }

:is(:is(.receipt-component .receipt-component-overlay) .receipt-component-indicators) .receipt-component-indicator {

        pointer-events: auto; /* enable pointer events for all indicators */
        border-radius: 50%; /* circle to make these distinct from the buttons (which are square-like) */
        aspect-ratio: 1; /* needed for a perfect circle (some icons are slightly rectangular) */

        /* center everything */
        display: flex;
        justify-content: center;
        align-items: center;

        min-width: 1em; /* safe to remove when aspect-ratio has better support */
        padding: var(--space-inset-square-xs);
      }

:is(:is(:is(.receipt-component .receipt-component-overlay) .receipt-component-indicators) .receipt-component-indicator):hover {
          text-decoration: none; /* only needed for text (not icons) */
        }

:is(.receipt-component .receipt-component-overlay) .receipt-component-toolbar {
      pointer-events: auto; /* enable pointer events for the toolbar */
      margin-top: auto; /* align at the bottom */

      /* For tall images that flow outside the viewport, the toolbar
       * will float at the bottom, making it easier to use. */
      position: sticky;
      bottom: var(--space-stack-s);

      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-inline-s);
    }

:is(:is(.receipt-component .receipt-component-overlay) .receipt-component-toolbar) a {
        border-radius: 0.25em;
        border-radius: var(--misc-subtle-rounding);
        min-width: 1em;
        line-height: 1; /* make height same as width */
        padding: var(--space-inset-square-xs);
        text-align: center;
      }

:is(:is(:is(.receipt-component .receipt-component-overlay) .receipt-component-toolbar) a):hover {
          text-decoration: none; /* only needed for text (not icons) */
        }

.receipt-select-component {
  display: flex;
  flex-wrap: wrap;

  /* Won't work in Safari below 14.1, but that's acceptable on desktop (very few Safari users),
   * given that it simplifies this code quite a bit (and Apple is good at rolling out updates quickly) */
  gap: var(--space-inline-m);

  /* indicate that it's clickable */
}

.receipt-select-component .receipt-component {
    cursor: pointer;
  }

:is(.receipt-select-component .receipt-component):hover {
      /* highlight, to make it more obvious that they are clickable */
      border-color: hsl(210 55% 40%);
      border-color: var(--color-select-signature);
    }

.receipt-viewer {
  display: flex;
}

.receipt-viewer .receipt-viewer-miniatures {
    background-color: hsl(28 35% 98%);
    background-color: var(--color-bg-deep);
    box-shadow: 0 0 1px 1px hsl(28 40% 90%) inset;
    box-shadow: 0 0 1px 1px var(--color-bg-deep-border) inset;

    overflow-y: auto; /* scroll */
    flex-shrink: 0; /* otherwise large images will overflow into the miniatures */
  }

:is(.receipt-viewer .receipt-viewer-miniatures) img {
      margin: var(--space-inset-square-m);
      display: block;
      box-shadow: 0 0 1px 1px hsl(28 40% 90%);
      box-shadow: 0 0 1px 1px var(--color-bg-deep-border); /* paper-like look */
      cursor: pointer;
    }

:is(.receipt-viewer .receipt-viewer-miniatures) img.current {
      outline: 3px solid hsl(210 55% 40%);
      outline: 3px solid var(--color-select-signature);
    }

.receipt-viewer .receipt-viewer-enlarged {
    overflow-y: auto; /* scroll */
  }

:is(.receipt-viewer .receipt-viewer-enlarged) img {
      display: block;
      max-width: 100%;
    }

/* Visually it would be nicest with 80vh here (matching the modal max-height value),
   * since there would be no scrolling in the receipt viewer (apart from the miniatures).
   * But for readability on most screens (all but the really large ones) we need to make
   * the image larger and it needs to scroll. */

.receipt-viewer .receipt-viewer-miniatures,.receipt-viewer .receipt-viewer-enlarged img {
    /* 1500px feels about right to ensure the image is legible
     * (--space-inset-square-l is the modals padding value) */
    max-height: calc(1500px - var(--space-inset-square-l) * 2);
  }

.receipt-viewer .receipt-viewer-miniatures {
    height: 100%;
  }

.receipt-viewer .receipt-photo-upload-area {
    margin-bottom: var(--space-stack-l);
  }

/* Place receipt photos next to each other (wrapping to multiple rows) */

.receipt-viewer .receipt-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-m);
  }

:is(.receipt-viewer .receipt-photos) .receipt-photo-container,:is(.receipt-viewer .receipt-photos) img {
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
    }

:is(.receipt-viewer .receipt-photos) .receipt-photo-container {
      border: 1px solid hsl(28 40% 90%);
      border: 1px solid var(--color-bg-deep-border);
    }

:is(.receipt-viewer .receipt-photos) img {
      display: block; /* prevent space at the bottom */
    }

/* The 'grabbing' cursor does not display properly throughout the drag, but
     * the below styles make the best of the situation. The reason for the glitch
     * might be that the 'hovering element' being dragged is some sort of copy
     * of the initial element, but the 'hovering element' does not seem to properly
     * mirror the attributes and classes of the initial element.
     * This issue might address this problem:
     * https://github.com/mharris717/ember-drag-drop/issues/24
     */

:is(.receipt-viewer .receipt-photos) .photo-drag-handle {
      cursor: grab;
    }

:is(:is(.receipt-viewer .receipt-photos) .photo-drag-handle):active {
        cursor: grabbing;
      }

:is(.receipt-viewer .receipt-photos) .is-dragging-object .photo-drag-handle {
      cursor: grabbing;
    }

/* Cover the entire image with the button container */

:is(.receipt-viewer .receipt-photos) .receipt-photo-container {
      position: relative;
    }

:is(:is(.receipt-viewer .receipt-photos) .receipt-photo-container) .receipt-photo-button-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

/* Arrange the button container in an even 3x1 grid
     * (the HTML content is only placed in the middle and bottom row, making the top empty) */

:is(.receipt-viewer .receipt-photos) .receipt-photo-button-container {
      display: grid;
      grid-template-areas:
        'top-row'
        'middle-row'
        'bottom-row';
      grid-template-rows: 1fr 1fr 1fr;
      justify-content: center; /* center grid columns horizontally */
      padding: var(--space-inset-square-m);
      box-sizing: border-box;
    }

:is(.receipt-viewer .receipt-photos) .receipt-photo-button-row {
      margin: 0 auto; /* center content horizontally within each row */
    }

:is(:is(.receipt-viewer .receipt-photos) .receipt-photo-button-row):first-child {
        grid-area: middle-row;
        align-self: center; /* vertical center of grid row */
      }

:is(:is(.receipt-viewer .receipt-photos) .receipt-photo-button-row):last-child {
        grid-area: bottom-row;
        align-self: end; /* bottom of grid row */
      }

/* Setting 'width' and 'lineheight' the same to attain even square */

:is(.receipt-viewer .receipt-photos) .receipt-photo-button {
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);

      display: inline-block;
      min-width: 1em;
      line-height: 1; /* make height same as width */
      padding: var(--space-inset-square-xs);
      text-align: center;
    }

:is(:is(.receipt-viewer .receipt-photos) .receipt-photo-button) + .receipt-photo-button {
        margin-left: var(--space-inline-s);
      }

.registerable-collection-summary-component {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: var(--space-stack-m) 0;
  padding-top: var(--space-stack-s);
  border-top: 1px solid hsl(28 6% 90%);
  border-top: 1px solid var(--color-bg-contour);
}

.registerable-collection-summary-component .first-group {
    flex: 1;
  }

.registerable-collection-summary-component .summary-line {
    flex: 1;
    margin-bottom: var(--space-stack-xs);
    text-align: right;

    display: flex;
    justify-content: flex-end;
  }

:is(.registerable-collection-summary-component .summary-line) .selected-count {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      margin-left: var(--space-inline-xs);
      text-align: left;
    }

:is(.registerable-collection-summary-component .summary-line) .guide-holder {
      flex: 1;
      display: flex;
      align-items: center;
      padding: var(--space-inset-squish-m);
    }

:is(:is(.registerable-collection-summary-component .summary-line) .guide-holder) .guide {
        width: 100%;
        border-bottom: 1px dashed hsl(28 6% 90%);
        border-bottom: 1px dashed var(--color-bg-contour);
        height: 1px;
      }

:is(.registerable-collection-summary-component .summary-line) .label {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

/* second guide to the right of the labels,
   * so everything is tied together better visually */

:is(.registerable-collection-summary-component .second-group) .guide-holder {
      min-width: 0.4em;
    }

.registerable-collection-summary-component .total-line {
    font-weight: bold;
  }

@media (min-height: 800px) {
  .registerable-collection-summary-component {
    /* making the summary float */
    position: sticky;
    bottom: 0;
    background-color: hsl(0 0% 100%);
    background-color: var(--color-bg);
  }
}

.reorderable-component .reorderable-entry {
    padding: var(--space-stack-s) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-inline-s);
    align-items: center;
  }

:is(.reorderable-component .reorderable-entry) .reorderable-content {
      flex-grow: 1;
    }

:is(.reorderable-component .reorderable-entry) .reorderable-primary,:is(.reorderable-component .reorderable-entry) .reorderable-secondary {
      display: flex;
      align-items: baseline;
    }

:is(.reorderable-component .reorderable-entry) .reorderable-secondary {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

:is(.reorderable-component .reorderable-entry) .reorderable-actions {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }

:is(:is(.reorderable-component .reorderable-entry) .reorderable-actions) .icon-button-component {
        margin: calc(-1 * var(--space-inset-square-xs)) 0; /* counteract some of the icon-button padding */
      }

:is(.reorderable-component .reorderable-entry) .emphasized {
      font-size: var(--font-size-text-large);
    }

:is(.reorderable-component .reorderable-entry) .reorderable-datum {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
    }

:is(.reorderable-component .reorderable-entry) .reorder-icon {
      padding: var(--space-inset-square-xs); /* increase clickable area */
      margin: calc(var(--space-inset-square-xs) * -1); /* counteract padding (for click area) */
      margin-right: var(--space-inline-s);
    }

:is(.reorderable-component .reorderable-entry) .reorderable-handle {
      cursor: grab;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }

:is(.reorderable-component .reorderable-entry) .is-dragging .reorderable-handle {
      cursor: grabbing;
    }

.reorderable-component .reorderable-item + .reorderable-item {
    border-top: 1px solid hsl(28 6% 90%);
    border-top: 1px solid var(--color-bg-contour);
  }

.reorderable-component .reorderable-datum + .reorderable-datum::before {
    content: '|';
    content: var(--misc-inline-separator);
    padding: 0 var(--space-inline-s);
    color: hsl(28 6% 90%);
    color: var(--color-bg-contour);
  }

/* this style is also used by the VikVoucher component (not scoped by any parent element) */

.report-pill-container {
  margin-bottom: var(--space-stack-s);
}

.report-table-component .seals {
    display: inline-flex;
    align-items: center;
    gap: 3px; /* cannot use small rem value for gap, it will be uneven */
    vertical-align: middle; /* baseline alignment is default, but looks better like this */
  }

:is(.report-table-component .seals) .seal {
      width: 1.5em;
      height: 1.25em;
    }

.approved:is(:is(.report-table-component .seals) .seal) {
        background-color: hsl(135 50% 40%);
        background-color: var(--color-success-signature);
      }

.refused:is(:is(.report-table-component .seals) .seal) {
        background-color: hsl(0 50% 45%);
        background-color: var(--color-danger-signature);
      }

.skipped:is(:is(.report-table-component .seals) .seal) {
        background-color: hsl(35 80% 50%);
        background-color: var(--color-warning-signature);
      }

.pending:is(:is(.report-table-component .seals) .seal) {
        background-color: hsl(0 0% 60%);
        background-color: var(--color-neutral-signature);
      }

:is(.report-table-component .seals) .seal:first-child {
      border-top-left-radius: 0.25em;
      border-top-left-radius: var(--misc-subtle-rounding);
      border-bottom-left-radius: 0.25em;
      border-bottom-left-radius: var(--misc-subtle-rounding);
    }

:is(.report-table-component .seals) .seal:last-child {
      border-top-right-radius: 0.25em;
      border-top-right-radius: var(--misc-subtle-rounding);
      border-bottom-right-radius: 0.25em;
      border-bottom-right-radius: var(--misc-subtle-rounding);
    }

.search-select-component {
  --local-ssc-max-overlay-width: 25em;

  position: relative;
}

.search-select-component .minimized-element,.search-select-component .link-element {
    display: flex;
    gap: var(--space-inline-xs);
  }

:is(.search-select-component .minimized-element,.search-select-component .link-element) .open-indicator {
      background-color: hsl(0 0% 20%);
      background-color: var(--color-form-contour);
      clip-path: polygon(50% 80%, 0 20%, 100% 20%);
      clip-path: var(--misc-open-arrow);

      align-self: center;
      width: 0.7em;
      height: 100%; /* 100% with ratio taken into consideration */
      aspect-ratio: 1 / 1;
    }

.open:is(:is(.search-select-component .minimized-element,.search-select-component .link-element) .open-indicator) {
        clip-path: polygon(50% 20%, 100% 80%, 0% 80%);
        clip-path: var(--misc-close-arrow);
      }

.search-select-component .minimized-element {
    align-items: center;
    cursor: pointer;

    padding: var(--space-inset-square-xs);
    box-sizing: border-box;
    border: 1px solid hsl(0 0% 85%);
    border: 1px solid var(--color-form-border);
  }

:is(.search-select-component .minimized-element) .element-search-icon {
      margin-right: var(--space-inline-s);
    }

:is(.search-select-component .minimized-element) .element-value {
      flex: 1;
    }

.placeholder:is(:is(.search-select-component .minimized-element) .element-value) {
        color: hsl(0 0% 46%);
        color: var(--color-form-placeholder-text);
      }

:is(:is(.search-select-component .minimized-element) .element-value),:is(:is(.search-select-component .minimized-element) .element-value) .primary,:is(:is(.search-select-component .minimized-element) .element-value) .secondary {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

:is(:is(.search-select-component .minimized-element) .element-value) .secondary {
        font-size: var(--font-size-text-small);
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

:is(.search-select-component .minimized-element) .clear {
      min-width: 0.7rem;
      text-align: center;
      padding: 0 var(--space-inset-square-xs); /* increase clickable area */
      margin: 0 calc(-1 * var(--space-inset-square-xs)); /* counteract padding */
      color: inherit; /* override default link color */
      font-size: 150%;
      line-height: 1em; /* counteract increased font size */
    }

:is(:is(.search-select-component .minimized-element) .clear):hover {
        color: hsl(0 0% 0%);
        color: var(--color-link-discreet-hover);
        font-weight: bold;
        text-decoration: none;
      }

.search-select-component .link-element {
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--font-size-text-large);
  }

:is(.search-select-component .link-element) .link {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

:is(fieldset:disabled .search-select-component,.search-select-component.disabled) .minimized-element {
      pointer-events: none; /* make it unclickable */
      border-color: hsl(0 0% 90%);
      border-color: var(--color-form-overlay-disabled-border);
      background-color: hsl(0 0% 95%);
      background-color: var(--color-form-overlay-disabled-bg);
    }

.placeholder:is(:is(:is(fieldset:disabled .search-select-component,.search-select-component.disabled) .minimized-element) .element-value),:is(:is(:is(fieldset:disabled .search-select-component,.search-select-component.disabled) .minimized-element) .element-value) .primary,:is(:is(:is(fieldset:disabled .search-select-component,.search-select-component.disabled) .minimized-element) .element-value) .secondary {
          color: hsl(0 0% 58%);
          color: var(--color-form-overlay-disabled-text);
        }

:is(:is(fieldset:disabled .search-select-component,.search-select-component.disabled) .minimized-element) .open-indicator {
        background-color: hsl(0 0% 90%);
        background-color: var(--color-form-overlay-disabled-border);
      }

:is(fieldset:disabled .search-select-component,.search-select-component.disabled) .link-element {
      pointer-events: none; /* make it unclickable */
    }

.search-select-component .overlay {
    position: absolute;
    z-index: 1000;
    z-index: var(--misc-z-index-interactive);

    box-shadow: 0 4px 12px 1px hsl(0 0% 0% / 20%);

    box-shadow: var(--misc-popover-shadow);
    background-color: hsl(0 0% 100%);
    background-color: var(--color-form-overlay-bg);
    border: 1px solid hsl(0 0% 85%);
    border: 1px solid var(--color-form-border);
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
  }

.dynamic-width:is(.search-select-component .overlay) {
      min-width: 14rem;
      min-width: var(--form-element-width);
      max-width: var(--local-ssc-max-overlay-width);
    }

/* In remote mode we cannot adjust dynamically without
     * flickering, so using a larger static width for now. */

.static-width:is(.search-select-component .overlay) {
      width: var(--local-ssc-max-overlay-width);
    }

:is(.search-select-component .overlay) .search-input {
      display: flex;
      position: relative;

      padding: var(--space-inset-square-s);
      border-radius: 0.25em 0.25em 0 0;
      border-radius: var(--misc-subtle-rounding) var(--misc-subtle-rounding) 0 0;
    }

:is(:is(.search-select-component .overlay) .search-input) input {
        flex: 1;
        max-width: 100%; /* prevent overflow when overlay is narrow */
        outline: none; /* disable blueish focus halo on Chrome */
        border-width: 1px;
        margin: 1px;
      }

.selected:is(:is(:is(.search-select-component .overlay) .search-input) input) {
          outline: solid 2px hsl(210 55% 40%);
          outline: solid 2px var(--color-select-signature);
          transition: outline 0.2s ease-in;
        }

:is(:is(.search-select-component .overlay) .search-input) .spinner-component {
        position: absolute;
        top: 50%;
        right: 1rem;
        margin-top: -0.5rem; /* 0.5rem ≈ half height of spinner */
      }

:is(.search-select-component .overlay) .search-status {
      padding: 0 var(--space-inline-s) var(--space-stack-xs);
    }

.search-unavailable:is(:is(.search-select-component .overlay) .search-status) {
        background-color: hsl(35 80% 90%);
        background-color: var(--color-warning-bg);
        color: hsl(36 100% 15%);
        color: var(--color-warning-text);
        padding: var(--space-inset-square-s);
        margin: var(--space-inset-square-s);
        text-align: center;
        border-radius: 0.25em;
        border-radius: var(--misc-subtle-rounding);
      }

.search-unavailable:is(:is(.search-select-component .overlay) .search-status) .unavailable-heading {
          font-weight: bold;
        }

:is(.search-select-component .overlay) .list-items {
      overflow-y: auto; /* enable scrollbar */
      max-height: 25em;
      border-radius: 0 0 0.25em 0.25em;
      border-radius: 0 0 var(--misc-subtle-rounding) var(--misc-subtle-rounding);
    }

:is(:is(.search-select-component .overlay) .list-items) .list-item {
        display: flex;
        gap: var(--space-inline-xs);
        align-items: center;
        padding: var(--space-inset-square-s);
        cursor: pointer;
        box-sizing: border-box;
        position: relative; /* for unavailable-item-mark */
      }

:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-indicator {
          visibility: hidden; /* needs to take up space to align all text */
          font-size: var(--font-size-text-small);
        }

.visible:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-indicator) {
            visibility: visible;
          }

:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content {
          flex: 1;
        }

:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content),:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content) .primary,:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content) .secondary {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content) .primary {
            display: block;
          }

:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content) .secondary {
            font-size: var(--font-size-text-small);
            color: hsl(0 0% 40%);
            color: var(--color-form-overlay-text-subtle);
          }

:is(:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content) .secondary) span + span {
              margin-left: 0.1em;
            }

:is(:is(:is(:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .list-item-content) .secondary) span + span)::before {
                content: '|';
                content: var(--misc-inline-separator);
                color: hsl(28 6% 90%);
                color: var(--color-bg-contour);
                padding-right: 0.3em;
              }

:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) mark {
          color: hsl(0 0% 0%);
          color: var(--color-form-overlay-text-mark);
          background-color: inherit;
          font-weight: bold;
        }

.unavailable-item:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) {
          cursor: default;
        }

.unavailable-item:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),.unavailable-item:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) * {
            color: hsl(0 0% 58%) !important;
            color: var(--color-form-overlay-disabled-text) !important;
          }

.unavailable-item.selected:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),.unavailable-item:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):hover {
            background-color: hsl(0 0% 95%);
            background-color: var(--color-form-overlay-disabled-bg);
          }

.unavailable-item:is(:is(:is(.search-select-component .overlay) .list-items) .list-item) .unavailable-item-mark {
            position: absolute;
            top: 0.5em;
            right: 0.5em;
            z-index: calc(1000 + 1);
            z-index: calc(var(--misc-z-index-interactive) + 1);
            font-style: italic;
          }

.selected:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):hover {
          color: hsl(0 0% 100%);
          color: var(--color-select-text);
          background-color: hsl(210 55% 40%);
          background-color: var(--color-select-signature);
        }

:is(.selected:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):hover) .secondary,:is(.selected:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):hover) .secondary .error,:is(.selected:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):hover) mark {
            color: hsl(0 0% 100%);
            color: var(--color-select-text);
          }

.unavailable-item:is(.selected:is(:is(:is(.search-select-component .overlay) .list-items) .list-item),:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):hover) {
            background-color: hsl(0 0% 95%);
            background-color: var(--color-form-overlay-disabled-bg);
          }

:is(:is(:is(.search-select-component .overlay) .list-items) .list-item):last-of-type {
          border-radius: 0 0 0.25em 0.25em;
          border-radius: 0 0 var(--misc-subtle-rounding) var(--misc-subtle-rounding);
        }

:is(:is(.search-select-component .overlay) .list-items) .list-item + .list-item {
        border-top: 1px solid hsl(0 0% 0% / 10%);
        border-top: 1px solid var(--color-form-overlay-line);
      }

.select-expense-component .temporary-expense-query-form {
    margin-bottom: var(--space-stack-l);
  }

.select-payment-transaction-component .help-block-component {
    text-align: center;
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    font-size: var(--font-size-text-small);
    line-height: var(--font-line-height-short); /* help blocks don't need default line height (too much) */
  }

/* TODO (TECH-4605): Move this styling to the Icon component itself.  */

.select-payment-transaction-component .authorization-icon {
    color: hsl(43 80% 49%);
    color: var(--color-golden-star);
  }

.simple-select-component {
  position: relative; /* anchoring for absolute positioning of children */
  height: -moz-fit-content;
  height: fit-content;

  /* not enough to set 'pointer' on self, must also specifically target 'select' */
}

.simple-select-component,.simple-select-component select {
    cursor: pointer;
  }

.simple-select-component select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; /* remove 'native select' appearence */
    padding-right: calc(var(--space-inset-square-xs) + 15px); /* make space for 'open indicator' */
    text-overflow: ellipsis; /* truncate long text to not collide with the 'open indicator' */
  }

.simple-select-component .open-indicator {
    position: absolute;
    top: calc(50% - 3px);
    right: 9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 5px 0;
    border-color: hsl(0 0% 20%) transparent transparent transparent;
    border-color: var(--color-form-contour) transparent transparent transparent;
    pointer-events: none; /* make it possible to click through */
  }

.statistic-box-component {
  border-radius: 8px;
  border-radius: var(--misc-moderate-rounding);
  background-color: hsl(28 2% 96%);
  background-color: var(--color-bg-container);
  padding: var(--space-inset-square-m);
  display: grid;
  grid-row-gap: var(--space-stack-xs);
}

.statistic-box-component .value {
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    font-size: var(--font-size-heading2);
    font-weight: bold;
  }

/* This should be reworked, so we wouldn't need to set the style (info, warning, etc) via CSS.
Would be better if it was simply a class in the template. */

.stripe-container-component .stripe-payment-overdue-component,.stripe-container-component .stripe-guide-component,.stripe-container-component .stripe-session-mismatch-component,.stripe-container-component .stripe-offline-component,.stripe-container-component .stripe-assistance-component,.stripe-container-component .stripe-delegation-component,.stripe-container-component .stripe-trial-component,.stripe-container-component .stripe-announcement-component,.stripe-container-component .stripe-back-office-auto-upgrade-component {
    padding: var(--space-inset-square-m);
    text-align: left;
  }

:is(.stripe-container-component .stripe-payment-overdue-component,.stripe-container-component .stripe-guide-component,.stripe-container-component .stripe-session-mismatch-component,.stripe-container-component .stripe-offline-component,.stripe-container-component .stripe-assistance-component,.stripe-container-component .stripe-delegation-component,.stripe-container-component .stripe-trial-component,.stripe-container-component .stripe-announcement-component,.stripe-container-component .stripe-back-office-auto-upgrade-component) .stripe-heading {
      font-weight: bold;
      font-size: var(--font-size-text-large);
      margin-bottom: var(--space-stack-xs);
    }

:is(.stripe-container-component .stripe-payment-overdue-component,.stripe-container-component .stripe-guide-component,.stripe-container-component .stripe-session-mismatch-component,.stripe-container-component .stripe-offline-component,.stripe-container-component .stripe-assistance-component,.stripe-container-component .stripe-delegation-component,.stripe-container-component .stripe-trial-component,.stripe-container-component .stripe-announcement-component,.stripe-container-component .stripe-back-office-auto-upgrade-component) .stripe-body {
      font-size: var(--font-size-text-large);
      max-width: 60em;
    }

/* center */

.stripe-container-component .stripe-session-mismatch-component,.stripe-container-component .stripe-offline-component {
    display: flex;
    align-items: center;
    flex-direction: column;

    text-align: center;
  }

/* danger-style */

.stripe-container-component .stripe-payment-overdue-component {
    background-color: hsl(0 30% 92%);
    background-color: var(--color-danger-bg);
    color: hsl(0 100% 15%);
    color: var(--color-danger-text);
  }

/* warning-style */

.stripe-container-component .stripe-session-mismatch-component,.stripe-container-component .stripe-offline-component,.stripe-container-component .stripe-trial-component {
    background-color: hsl(35 80% 90%);
    background-color: var(--color-warning-bg);
    color: hsl(36 100% 15%);
    color: var(--color-warning-text);
  }

/* success-style */

.stripe-container-component .stripe-assistance-component,.stripe-container-component .stripe-delegation-component {
    background-color: hsl(135 30% 92%);
    background-color: var(--color-success-bg);
    color: hsl(135 100% 15%);
    color: var(--color-success-text);
  }

:is(.stripe-container-component .stripe-assistance-component,.stripe-container-component .stripe-delegation-component) a {
      color: hsl(210 55% 40%);
      color: var(--color-link);
    }

:is(:is(.stripe-container-component .stripe-assistance-component,.stripe-container-component .stripe-delegation-component) a):hover {
        color: hsl(0 0% 0%);
        color: var(--color-link-hover);
      }

/* info-style */

.stripe-container-component .stripe-back-office-auto-upgrade-component,.stripe-container-component .stripe-announcement-component {
    background-color: hsl(210 30% 91%);
    background-color: var(--color-info-bg);
    color: hsl(210 100% 15%);
    color: var(--color-info-text);
  }

/* guide */

.stripe-container-component .stripe-guide-component {
    background-color: hsl(28 35% 98%);
    background-color: var(--color-bg-deep);
    position: relative;
    text-align: center;
  }

.metal-frame :is(.stripe-container-component .stripe-guide-component) {
      border-bottom: 1px solid hsl(28 40% 90%);
      border-bottom: 1px solid var(--color-bg-deep-border);
    }

.hidden:is(.stripe-container-component .stripe-guide-component) {
      display: none;
    }

:is(.stripe-container-component .stripe-guide-component) .hide {
      position: absolute;
      top: var(--space-inset-square-s);
      right: var(--space-inset-square-s);
    }

:is(:is(.stripe-container-component .stripe-guide-component) .hide) a {
        color: hsl(0 0% 20%);
        color: var(--color-link-discreet);
        padding: var(--space-inset-square-s);
        text-decoration: none;
        display: flex; /* align icon at the top of the box */
      }

:is(:is(:is(.stripe-container-component .stripe-guide-component) .hide) a):hover {
          color: hsl(0 0% 0%);
          color: var(--color-link-discreet-hover);
        }

:is(.stripe-container-component .stripe-guide-component) .search-option {
      margin-bottom: var(--space-stack-xl);
    }

:is(.stripe-container-component .stripe-guide-component) .mobile-store-options {
      margin-bottom: var(--space-stack-l);
      display: inline-flex;
    }

:is(:is(.stripe-container-component .stripe-guide-component) .mobile-store-options) .mobile-store-option ~ .mobile-store-option {
        margin-left: var(--space-inline-l);
      }

:is(:is(:is(.stripe-container-component .stripe-guide-component) .mobile-store-options) .mobile-store-option) a {
          font-size: var(--font-size-text-large);
        }

:is(.stripe-container-component .stripe-guide-component) .overview {
      display: flex;
      justify-content: center;
      font-size: var(--font-size-text-small);
      margin-top: var(--space-stack-l);
    }

.qr-code-modal-content {
  text-align: center;
}

.qr-code-modal-content .qr-code {
    margin-bottom: var(--space-stack-m);
  }

.table-component {
  margin-bottom: var(--space-stack-l);
}

.table-component .table-wrapper {
    border: 1px solid hsl(28 6% 90%);
    border: 1px solid var(--color-bg-contour);
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
  }

:is(.table-component .table-wrapper):not(.full-width) {
      width: -moz-fit-content;
      width: fit-content;
    }

/* keep in sync with captions in advanced table */

.table-component .caption {
    margin-top: var(--space-stack-xs);
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

.toggle-component a {
    font-size: 130%;
  }

.toggle-component.disabled a {
    color: hsl(0 0% 58%);
    color: var(--color-link-disabled);
    pointer-events: none;
  }

.upload-area-component {
  min-height: 7em; /* avoid height flickering when the text changes (e.g. to 'drop here') */
  min-width: 30em; /* avoid width flickering when uploading */

  border: 2px dashed hsl(28 6% 90%);

  border: 2px dashed var(--color-bg-contour);
  padding: var(--space-inset-square-m);

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

.upload-area-component.file-drag-over,.upload-area-component.is-uploading {
    border-style: solid;
  }

:is(.upload-area-component.file-drag-over,.upload-area-component.is-uploading)  > div {
      font-size: var(--font-size-text-xlarge);
    }

.upload-area-component.file-drag-over {
    color: hsl(210 55% 40%);
    color: var(--color-select-signature);
    border-color: hsl(210 55% 40%);
    border-color: var(--color-select-signature);
    background-color: hsl(197 40% 93%);
    background-color: var(--color-select-bg);
  }

.upload-area-component .upload-progress-indicator {
    text-align: center;
    width: 50%;
  }

:is(.upload-area-component .upload-progress-indicator) .remaining {
      font-size: var(--font-size-text-small);
      font-style: italic;
    }

:is(.upload-area-component .upload-progress-indicator) .upload-label {
      margin-bottom: var(--space-stack-s);
    }

:is(.upload-area-component .upload-progress-indicator) .progress-bar-component {
      margin: 0 auto var(--space-stack-xs);
    }

/* hide the input (it's triggered using a link) */

.upload-area-component input[type='file'] {
    visibility: hidden;
    position: absolute;
  }

.upload-area-component .instructions {
    text-align: center;
    font-size: var(--font-size-text-large);
  }

:is(.upload-area-component .instructions) .label {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      margin-bottom: var(--space-stack-s);
    }

:is(.upload-area-component .instructions) .methods {
      margin-bottom: var(--space-stack-xs);
    }

:is(:is(.upload-area-component .instructions) .methods) a {
        color: hsl(0 0% 20%);
        color: var(--color-link-discreet);
        text-decoration: underline;
      }

/* separator between methods */

:is(:is(.upload-area-component .instructions) .methods) span + span::before {
        content: '|';
        content: var(--misc-inline-separator);
        padding: 0 var(--space-inline-s);
        /* The dynamic before-element has spacing between itself and the preceeding element,
         * equal to about half a glyph. To offset this space we use a small negative margin. */
        margin-left: -0.5ch;
        color: hsl(28 6% 90%);
        color: var(--color-bg-contour);
      }

.user-tasks-component .tasks-heading {
    font-weight: bold;
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    margin-bottom: var(--space-stack-s);
  }

.user-tasks-component .tasks {
    display: grid;
    grid-gap: var(--space-inline-m);
    gap: var(--space-inline-m);
    grid-template-columns: 1fr 1fr 1fr;
  }

.user-select-component .element-value:not(.placeholder),.user-select-component .list-item-content {
    line-height: var(--font-line-height-short); /* for multiple lines */
  }

.user-select-component .error {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);
  }

.billing-payment-method-component {
  display: flex;
  align-items: center; /* vertical centering */
}

.billing-payment-method-component .visa {
    color: hsl(237 63% 27%);
    color: var(--color-visa);
  }

.billing-payment-method-component .mastercard {
    color: hsl(353 100% 46%);
    color: var(--color-mastercard);
  }

.billing-payment-method-component .amex {
    color: hsl(209 66% 44%);
    color: var(--color-amex);
  }

:is(.billing-payment-method-component .visa,.billing-payment-method-component .mastercard,.billing-payment-method-component .amex,.billing-payment-method-component .unknown-credit-card) .icon-component {
      margin-right: var(--space-inline-m);
      font-size: 4rem;
    }

.billing-payment-method-component .card-number {
    letter-spacing: 0.1em; /* improves readability */
    font-size: var(--font-size-text-large);
    display: block;
  }

.billing-payment-method-component .expiration-date {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

.expired:is(.billing-payment-method-component .expiration-date) {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

/* arrow animation on click */

.context-branch-select-component .indicator {
    display: inline-block; /* otherwise we cannot transform */
    transition: transform 150ms;
  }

.indicator-open:is(.context-branch-select-component .indicator) {
      transform: rotate(180deg);
    }

.context-branch-select-component-window {
  padding: var(--space-inset-square-m);
}

.context-branch-select-component-window .controls {
    max-height: 25em;
    overflow-y: auto;
  }

:is(.context-branch-select-component-window .controls) .entry-branch-name {
      max-width: 25ch;
      word-break: break-word;
    }

.context-branch-select-component-window .heading {
    font-weight: bold;
  }

.context-branch-select-component-window .description {
    border-top: 1px solid hsl(28 6% 90%);
    border-top: 1px solid var(--color-bg-contour);
    padding: var(--space-stack-s) 0;
    max-width: 40ch;
  }

.changelog-component .version-title {
    display: flex;
    align-items: center;
    -moz-column-gap: var(--space-inline-xs);
         column-gap: var(--space-inline-xs);
    margin-bottom: var(--space-stack-xs);
  }

:is(.changelog-component .version-title) h4 {
      display: contents;
      font-size: var(--font-size-text);
    }

.changelog-component .inline-badge-component {
    margin-left: var(--space-inline-xs);
  }

.changelog-component .change-summary {
    font-style: italic;
    margin-bottom: var(--space-stack-xl); /* larger bottom margin than p tags */
  }

.changelog-component .markdown-renderer-component {
    margin-bottom: var(--space-stack-xl); /* larger bottom margin than p tags */
  }

/* specifics */

:is(:is(.accountant-index-route .content-holder) .company) .name {
        font-size: var(--font-size-text-large);
        width: 15em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

:is(:is(.accountant-index-route .content-holder) .company) .open {
        font-weight: bold;
      }

:is(:is(.accountant-index-route .content-holder) .company) .na {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

:is(:is(.accountant-index-route .content-holder) .company) .name,:is(:is(.accountant-index-route .content-holder) .company) .users-count,:is(:is(.accountant-index-route .content-holder) .company) .reports-count,:is(:is(.accountant-index-route .content-holder) .company) .open,:is(:is(.accountant-index-route .content-holder) .company) .na {
        display: inline-block;
        margin-left: var(--space-inline-m);
      }

:is(:is(.accountant-index-route .content-holder) .company) .users-count,:is(:is(.accountant-index-route .content-holder) .company) .reports-count,:is(:is(.accountant-index-route .content-holder) .company) .open,:is(:is(.accountant-index-route .content-holder) .company) .na {
        min-width: 8em;
      }

:is(:is(.accountant-assisted-company-route .content-holder) .user) .name {
        font-size: var(--font-size-text-large);
      }

.settings-absence-intervals-route .terminated,.settings-absence-intervals-route .cancelled,.settings-absence-intervals-route .completed {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

.settings-branch-profiles-branch-profile-approval-steps-route {
  counter-reset: approval-step-counter;
}

:is(.settings-branch-profiles-branch-profile-approval-steps-route .content-holder) .approval-step {
      counter-increment: approval-step-counter;
    }

:is(:is(.settings-branch-profiles-branch-profile-approval-steps-route .content-holder) .approval-step) .human-index::after {
        content: counter(approval-step-counter);
      }

:is(.settings-api-route .content-holder) .name {
      font-size: var(--font-size-text-large);
    }

.settings-api-route .clipboard-field-component input {
    min-width: 22em;
  }

/* add card modal */

/* stylelint-disable-next-line selector-class-pattern */

.modal-window-frame .StripeElement {
    /* NOTE With our normal padding (from .artificial-input) his element still looks too small.
     * I think it's because we're also using line-height to stretch the element, and the
     * Stripe Element doesn't actually contain text so it won't affect it the same way.
     * If we move to `line-height: 1` for input elements we can probably skip this. */
    padding: 0.6em !important;
    width: 24em;
  }

/* NOTE: see additional style overrides (acting inside iframe) in the BillingPaymentMethods component */

/* stylelint-disable-next-line selector-class-pattern */

.modal-window-frame .StripeElement--invalid {
    border-color: hsl(0 50% 45%);
    border-color: var(--color-danger-signature);
  }

.settings-billing-entity-payment-methods-route .payment-method .payment-method-entry {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-inline-s);
    align-items: center;
    padding: var(--space-inset-square-sm);
  }

:is(.settings-billing-entity-payment-methods-route .payment-method .payment-method-entry) .payment-method-datum + .payment-method-datum::before {
      content: '|';
      content: var(--misc-inline-separator);
      padding: 0 var(--space-inline-xs);
      color: hsl(28 6% 90%);
      color: var(--color-bg-contour);
    }

.settings-billing-entity-payment-methods-route .payment-method-entry + .payment-method-entry {
    border-top: 1px solid hsl(28 6% 90%);
    border-top: 1px solid var(--color-bg-contour);
  }

:is(.settings-billing-entity-payment-methods-route .content-holder) .primary-card {
      font-style: italic;
    }

.information-boxes {
  margin-bottom: var(--space-stack-m);

  display: grid;
  grid-gap: var(--space-inline-m);
  grid-template-columns: 1fr 1fr 1fr;
}

.information-boxes .icon-component {
    color: hsl(35 80% 50%);
    color: var(--color-warning-signature);
  }

:is(.settings-branches-route .content-holder) .name {
      font-size: var(--font-size-text-large);
    }

:is(.settings-branches-route .content-holder) .child-branch {
      margin-left: var(--space-inline-m);
    }

:is(.bulletins-route .content-holder) .bulletin-header {
      display: flex;
      align-items: center;
      gap: var(--space-inline-s);
    }

:is(:is(.bulletins-route .content-holder) .bulletin-header) .count-badge-component {
        align-self: flex-start;
      }

:is(.bulletins-route .content-holder) .bulletin {
      font-size: var(--font-size-text-large);
    }

:is(:is(.bulletins-route .content-holder) .bulletin) .header {
        --local-dot-size: 8px;
        --local-inline-space: var(--space-inline-s);

        display: flex;
        gap: var(--local-inline-space);
        margin-left: calc((var(--local-inline-space) + 8px) * -1);
        margin-left: calc((var(--local-inline-space) + var(--local-dot-size)) * -1);
      }

:is(:is(:is(.bulletins-route .content-holder) .bulletin) .header) .dot {
          min-width: var(--local-dot-size);
          height: var(--local-dot-size);
          border-radius: 50%;

          /* center the dot in relation to the text */
          margin-top: calc(var(--font-size-heading1) / 2 - var(--local-dot-size) / 2);
        }

.unread:is(:is(:is(:is(.bulletins-route .content-holder) .bulletin) .header) .dot) {
            background-color: hsl(135 50% 40%);
            background-color: var(--color-dot-unread);
          }

.read:is(:is(:is(:is(.bulletins-route .content-holder) .bulletin) .header) .dot) {
            background-color: hsl(210 5% 85%);
            background-color: var(--color-dot-read);
          }

:is(:is(.bulletins-route .content-holder) .bulletin) .tagline {
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--space-stack-s);
      }

:is(:is(:is(.bulletins-route .content-holder) .bulletin) .tagline) .supplement {
          color: hsl(0 0% 41%);
          color: var(--color-text-subtle);
          text-align: right;
          font-size: var(--font-size-text);
        }

:is(:is(.bulletins-route .content-holder) .bulletin) .content {
        margin-left: var(--space-inline-m);
      }

:is(:is(:is(.bulletins-route .content-holder) .bulletin) .content) p {
          max-width: var(--font-readable-line-length);
        }

:is(:is(:is(.bulletins-route .content-holder) .bulletin) .content) img {
          display: block;
          margin: var(--space-stack-xl) auto;
          border: 2px solid hsl(0 0% 95%);
          border: 2px solid var(--color-img-border);
          border-radius: 0.25em;
          border-radius: var(--misc-subtle-rounding);
          max-width: 100%;
        }

.settings-branch-profiles-branch-profile-categories-mapping-route .draggable-items {
    margin-bottom: var(--space-stack-m);
  }

:is(.settings-branch-profiles-branch-profile-categories-mapping-route .draggable-items) .category {
      display: flex;
      justify-content: space-between;
      gap: var(--space-inline-s);
      padding: var(--space-stack-s) 0;
      align-items: baseline;
    }

:is(:is(.settings-branch-profiles-branch-profile-categories-mapping-route .draggable-items) .category) .draggable-label {
        font-size: var(--font-size-text-large);
      }

:is(:is(.settings-branch-profiles-branch-profile-categories-mapping-route .draggable-items) .category) .draggable-pills {
        max-width: 75%;
        /* Items are added to the back of the collection (array#push), but visually
         * it makes more sense to display this collection in reverse order
         * (i.e. growing from the right side). */
        flex-direction: row-reverse;
        margin: 0 calc(var(--space-inline-xs) * -1); /* reset the alignment with other elements on the page */
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-inline-xs);
      }

:is(.settings-branch-profiles-branch-profile-categories-mapping-route .draggable-items) .category + .category {
      border-top: 1px solid hsl(28 6% 90%);
      border-top: 1px solid var(--color-bg-contour);
    }

.settings-branch-profiles-branch-profile-categories-mapping-route .pill-component {
    cursor: grab;
  }

.settings-branch-profiles-branch-profile-categories-mapping-route .pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-s);
    margin-bottom: var(--space-stack-xl);
  }

.settings-branch-profiles-branch-profile-custom-properties-route .property-name {
    width: 500px; /* fixed width to align tables */
  }

:is(.settings-branch-profiles-branch-profile-custom-properties-route .property-value) .default-value-info-icon {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
    }

.settings-branch-profiles-branch-profile-custom-properties-route .page-section-component {
    margin-bottom: var(--space-stack-xl);
  }

:is(.settings-branch-profiles-branch-profile-custom-properties-route .page-section-component) .property-description {
      margin-bottom: var(--space-stack-s);
    }

.settings-branch-profiles-branch-profile-custom-scripts-index-route .disabled-note {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
  }

:is(.settings-branch-profiles-branch-profile-custom-scripts-new-route,.settings-branch-profiles-branch-profile-custom-scripts-custom-script-route) .custom-script-sandbox {
    max-width: var(--layout-width-boundary);
    padding: var(--space-inline-l);
    background-color: hsl(28 2% 96%);
    background-color: var(--color-bg-container);
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
  }

input.deadline-days {
  width: 50px !important;
}

.deadline-almanac-form {
  display: flex;
  gap: var(--space-stack-m);
  flex-wrap: wrap;
}

.deadline-almanac-form .section-primary,.deadline-almanac-form .section-secondary {
    flex: 1;
    margin: var(--space-inset-square-m);
  }

.deadline-almanac-form .section-secondary {
    display: flex;
    flex-direction: column;
    background-color: hsl(28 2% 96%);
    background-color: var(--color-bg-container);
    padding: var(--space-inset-square-xl);
    border-radius: 8px;
    border-radius: var(--misc-moderate-rounding);
  }

:is(.deadline-almanac-form .section-secondary) .preview-heading {
      font-size: var(--font-size-text-large);
      margin-bottom: var(--space-stack-s);
    }

@keyframes snow {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }

  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

@keyframes santa-claus {
  0% {
    left: -50%;
    bottom: 5%;
    transform: rotateY(0deg);
  }

  25% {
    left: 25%;
    bottom: 10%;
  }

  45% {
    left: 60%;
    bottom: 25%;
    transform: rotateY(0deg);
  }

  50% {
    left: 60%;
    bottom: 25%;
    transform: rotateY(180deg);
  }

  100% {
    left: -70%;
    bottom: 5%;
    transform: rotateY(180deg);
  }
}

#easter-egg-santa {
  --local-url-snowflake-1: url('https://desktop-client-cdn.skovik.net/ancillary-static-public/easter-egg-santa/snow-flakes-1.png');
  --local-url-snowflake-2: url('https://desktop-client-cdn.skovik.net/ancillary-static-public/easter-egg-santa/snow-flakes-2.png');
  --local-url-snowflake-3: url('https://desktop-client-cdn.skovik.net/ancillary-static-public/easter-egg-santa/snow-flakes-3.png');
  --local-url-landscape: url('https://desktop-client-cdn.skovik.net/ancillary-static-public/easter-egg-santa/winter-landscape.png');
}

#easter-egg-santa .snow,#easter-egg-santa .toggle,#easter-egg-santa .winter-landscape,#easter-egg-santa .sleigh {
    position: fixed;
  }

#easter-egg-santa .snow,#easter-egg-santa .winter-landscape,#easter-egg-santa .sleigh {
    pointer-events: none;
  }

#easter-egg-santa .toggle {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    bottom: var(--space-inset-square-m);
    right: var(--space-inset-square-m);
    font-size: var(--font-size-heading1);
    text-align: right;
    padding: var(--space-inset-square-s);
    z-index: 1000;
    color: hsl(0 0% 100%);
    color: var(--color-button-danger-emphasis-text);
    background-color: hsl(0 50% 45%);
    background-color: var(--color-button-danger-emphasis-bg);
  }

:is(#easter-egg-santa .toggle):hover {
      text-decoration: none;
      background-color: hsl(0 50% 40%);
      background-color: var(--color-button-danger-emphasis-hover-bg);
    }

#easter-egg-santa .snow {
    background-image: var(--local-url-snowflake-1), var(--local-url-snowflake-2), var(--local-url-snowflake-3);
    height: 100%;
    width: 100%;
    z-index: 1000;
    animation: snow 20s linear infinite;
  }

#easter-egg-santa .winter-landscape {
    /* ideally we'd use `background-image: attr(data-src url);` but no browser support yet */
    background-image: var(--local-url-landscape);
    -webkit-mask-image: linear-gradient(0deg, hsl(0 0% 0% / 75%), transparent);
            mask-image: linear-gradient(0deg, hsl(0 0% 0% / 75%), transparent);
    bottom: 0;
    height: 25%;
    width: 100%;
    z-index: 1;
  }

#easter-egg-santa .sleigh {
    max-width: 25%;
    left: -1500px;
    bottom: 0;
    z-index: 101;
    opacity: 80%;
    animation: santa-claus 15s infinite ease-out;
  }

.easter-egg-owl {
  width: 512px;

  position: fixed;
  bottom: -30px;
  left: calc(70% - 512px / 2);
  z-index: 1000;
}

.easter-egg-owl img {
    width: 100%;
  }

.easter-egg-owl {

  transition: left 2s ease-in;

  /* used to trigger owl movement */
}

.easter-egg-owl.hidden-outside-viewport {
    left: calc(-1 * 512px); /* must exceed the width */
  }

:is(:is(.soft-limit-error-route,.application-error-route,.error-route) .content-holder) .error-information {
      margin-top: var(--space-stack-m);

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

:is(:is(:is(.soft-limit-error-route,.application-error-route,.error-route) .content-holder) .error-information) p,:is(:is(:is(.soft-limit-error-route,.application-error-route,.error-route) .content-holder) .error-information) img {
        max-width: var(--font-readable-line-length);
      }

:is(:is(:is(.soft-limit-error-route,.application-error-route,.error-route) .content-holder) .error-information) img {
        border-radius: 0.25em;
        border-radius: var(--misc-subtle-rounding);
        display: block;
        max-height: 35em; /* specifically for portrait images */
        margin-bottom: var(--space-stack-m);
      }

:is(:is(:is(.soft-limit-error-route,.application-error-route,.error-route) .content-holder) .error-information) .error-details {
        max-width: 100%; /* keep the stack trace within limits */
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

.exhibit-misc-colors-route .box-swatch-alpha,.exhibit-misc-colors-route .box-swatch-beta,.exhibit-misc-colors-route .box-swatch-gamma,.exhibit-misc-colors-route .box-swatch-delta,.exhibit-misc-colors-route .box-swatch-epsilon,.exhibit-misc-colors-route .box-swatch-zeta {
    padding: 0.5em;
    border-radius: 8px;
    border-radius: var(--misc-moderate-rounding);
    color: hsl(0 0% 100%);
    color: var(--color-swatch-text);
  }

.exhibit-misc-colors-route .box-swatch-alpha {
    background-color: hsl(346 90% 66%);
    background-color: var(--color-swatch-alpha);
  }

.exhibit-misc-colors-route .swatch-alpha {
    color: hsl(346 90% 66%);
    color: var(--color-swatch-alpha);
  }

.exhibit-misc-colors-route .box-swatch-beta {
    background-color: hsl(210 80% 52%);
    background-color: var(--color-swatch-beta);
  }

.exhibit-misc-colors-route .swatch-beta {
    color: hsl(210 80% 52%);
    color: var(--color-swatch-beta);
  }

.exhibit-misc-colors-route .box-swatch-gamma {
    background-color: hsl(169 50% 41%);
    background-color: var(--color-swatch-gamma);
  }

.exhibit-misc-colors-route .swatch-gamma {
    color: hsl(169 50% 41%);
    color: var(--color-swatch-gamma);
  }

.exhibit-misc-colors-route .box-swatch-delta {
    background-color: hsl(35 81% 44%);
    background-color: var(--color-swatch-delta);
  }

.exhibit-misc-colors-route .swatch-delta {
    color: hsl(35 81% 44%);
    color: var(--color-swatch-delta);
  }

.exhibit-misc-colors-route .box-swatch-epsilon {
    background-color: hsl(280 80% 56%);
    background-color: var(--color-swatch-epsilon);
  }

.exhibit-misc-colors-route .swatch-epsilon {
    color: hsl(280 80% 56%);
    color: var(--color-swatch-epsilon);
  }

.exhibit-misc-colors-route .box-swatch-zeta {
    background-color: hsl(74 75% 34%);
    background-color: var(--color-swatch-zeta);
  }

.exhibit-misc-colors-route .swatch-zeta {
    color: hsl(74 75% 34%);
    color: var(--color-swatch-zeta);
  }

.exhibit-misc-shadows-route .shadow-examples {
    display: flex;
    gap: var(--space-inline-m);
    padding: var(--space-inset-square-m);
  }

.exhibit-misc-shadows-route .shadow-box {
    padding: var(--space-inset-square-m);
    border-radius: 8px;
    border-radius: var(--misc-moderate-rounding);
  }

.exhibit-misc-shadows-route .shadow-window {
    box-shadow: 0 4px 24px 4px hsl(0 0% 10% / 30%);
    box-shadow: var(--misc-window-shadow);
  }

.exhibit-misc-shadows-route .shadow-popover {
    box-shadow: 0 4px 12px 1px hsl(0 0% 0% / 20%);
    box-shadow: var(--misc-popover-shadow);
  }

.exhibit-misc-shadows-route .shadow-tooltip {
    box-shadow: 0 4px 16px 4px hsl(0 0% 10% / 10%);
    box-shadow: var(--misc-tooltip-shadow);
  }

/* The full route classes are not specified here to make it easier to move the component to other groups */

[class*='exhibit-components-'][class*='branch-profile-select-route'] .branch-profile-select-component {
    width: 16em;
  }

[class*='exhibit-components-'][class*='stacked-progress-bar-route'] .small-container {
    width: 150px;
  }

[class*='exhibit-components-'][class*='fake-progress-bar-route'] .small-container {
    margin-bottom: var(--space-stack-l);
    width: 250px;
  }

[class*='exhibit-components-'][class*='accordion-route'] .accordion-heading {
    font-size: var(--font-size-text-large);
    font-weight: bold;
  }

[class*='exhibit-components-'][class*='accordion-route'] .accordion-subheading {
    font-size: var(--font-size-text-large);
  }

[class*='exhibit-components-'][class*='receipt-scanning-progress-route'] .small-container {
    position: relative;
    background-color: hsl(28 2% 96%);
    background-color: var(--color-bg-container);
    margin-bottom: var(--space-stack-l);
    width: 250px;
    height: 250px;
  }

[class*='exhibit-components-'][class*='statistic-box-route'] .statistic-box-example {
    display: grid;
    grid-gap: var(--space-inline-m);
    grid-template-columns: 1fr 1fr 1fr;
  }

[class*='exhibit-components-'][class*='information-box-route'] .information-box-example {
    display: grid;
    grid-gap: var(--space-inline-m);
    grid-template-columns: 1fr 1fr;
  }

:is(.settings-branch-profiles-branch-profile-facets-bulk-add-route .content-holder) textarea {
      font-family: 'PT Mono', monospace;
      font-family: var(--font-monospace);
    }

.home-route .user-tasks-component {
    margin-bottom: var(--space-stack-xl);
  }

.settings-billing-entity-invoices-invoice-route .invoice {
    position: relative; /* for stamp */
  }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .stamp {
      top: 1.5em;
      right: 30%;
      font-size: 200%;
    }

.settings-billing-entity-invoices-invoice-route .invoice {

    display: grid;
    grid-template-columns: 50% 50%;
    grid-row-gap: var(--space-stack-m);
    row-gap: var(--space-stack-m);

    grid-template-areas:
      'masthead heading'
      'recipient details'
      'body body'
      'footer footer';
    grid-template-rows:
      max-content
      max-content
      minmax(40vh, max-content)
      max-content;

    padding: var(--space-inset-square-m);
  }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-masthead {
      grid-area: masthead;

      height: 30px;
    }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-heading {
      grid-area: heading;
      text-align: right;
    }

:is(:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-heading) .invoice-number {
        font-size: var(--font-size-text-large);
        margin-bottom: var(--space-stack-m);
      }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-recipient {
      grid-area: recipient;
    }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-details {
      grid-area: details;
      text-align: right;
    }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-body {
      grid-area: body;
    }

:is(.settings-billing-entity-invoices-invoice-route .invoice) .invoice-footer {
      grid-area: footer;

      /* stick content to bottom */
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

:is(:is(.settings-billing-entity-invoices-invoice-route table) tfoot) .subtotal td,:is(:is(.settings-billing-entity-invoices-invoice-route table) tfoot) .vat td {
        font-weight: normal;
      }

.settings-billing-entity-invoices-invoice-route .invoice-footer {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
    text-align: center;
    margin-bottom: var(--space-stack-m);
  }

:is(.settings-billing-entity-invoices-invoice-route .invoice-footer) span {
      display: inline-block;
    }

:is(.settings-billing-entity-invoices-invoice-route .invoice-footer) span + span::before {
      content: '|';
      content: var(--misc-inline-separator);
      color: hsl(28 6% 90%);
      color: var(--color-bg-contour);
      padding: 0 var(--space-inline-s);
      /* The dynamic before-element has spacing between itself and the preceeding element,
       * equal to about half a glyph. To offset this space we use a small negative margin. */
      margin-left: -0.5ch;
    }

:is(.localization-route .content-holder) .language {
      font-size: var(--font-size-text-large);
    }

:is(:is(.localization-route .content-holder) .language) .alt-name {
        font-size: var(--font-size-text);
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
        text-transform: uppercase;
      }

/* scoped inside 'content-holder' to not also target the search select overlay */

:is(.settings-locations-route .content-holder) .location-select-component {
      width: 14em;
    }

:is(:is(.settings-locations-route .content-holder) .location-select-component) .minimized-element {
        width: 100%;
      }

:is(.login-route,.login-catcher-route) .user-identifier.name {
    font-size: var(--font-size-text-large);
    margin-bottom: var(--space-stack-s);
  }

:is(.login-route,.login-catcher-route) .user-identifier.email {
    font-size: var(--font-size-text);
    margin-bottom: var(--space-stack-m);
  }

:is(.login-route,.login-catcher-route) .user-identifier.name ~ .user-identifier.email {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

:is(.login-route,.login-catcher-route) .change-mode {
    display: inline-block;
    margin-top: var(--space-stack-s);
  }

:is(:is(:is(.login-route,.login-catcher-route) .control-group) .controls) .input-addon {
        width: 100%;
      }

:is(.logout-loading-route,.logout-route) .stripe-container-component {
    display: none;
  }

:is(.logout-loading-route,.logout-route) .content-holder {
    max-width: none;
  }

:is(.logout-loading-route,.logout-route) .box {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

:is(:is(.logout-loading-route,.logout-route) .box) p {
      font-size: var(--font-size-text-large);
      margin-bottom: var(--space-stack-xs);
    }

.minute-details-modal dl.basic {
    margin: 0;
  }

.minute-details-modal .minute-modification-key {
    display: inline-block;
  }

.minute-details-modal .minute-modification-old-value {
    color: hsl(0 0% 41%);
    color: var(--color-text-subtle);
  }

:is(.minute-details-modal .minute-modification-new-value)::before {
      content: '→';
      padding: 0 var(--space-inline-xs);
    }

.minute-details-modal .sign {
    font-weight: bold;
  }

:is(.minutes-route .content-holder) .query {
      min-width: 30em;
    }

:is(.minutes-route .content-holder) .predefined-queries {
      margin-bottom: var(--space-stack-m);
    }

:is(:is(.minutes-route .content-holder) .predefined-queries) a:first-child {
        margin-left: var(--space-inline-s);
      }

:is(:is(:is(.minutes-route .content-holder) .predefined-queries) a ~ a)::before {
          display: inline-block;
          color: hsl(28 6% 90%);
          color: var(--color-bg-contour);
          content: '|';
          content: var(--misc-inline-separator);
          padding: 0 var(--space-inline-s);
          /* The dynamic before-element has spacing between itself and the preceeding element,
           * equal to about half a glyph. To offset this space we use a small negative margin. */
          margin-left: -0.5ch;
        }

:is(:is(.minutes-route .content-holder) .minute) .event {
        font-size: var(--font-size-text-large);
      }

/* The purpose of these adjustments is to make the outbox view
  * easier to use (in compact mode) on small displays. Generally we don't make
  * per-view adjustments based on the viewport size. But the outbox and report
  * views are important enough to warrant an exception.
  *
  * The order of these container queries matter.
  *
  * We doesn't use the "wormhole-ancillary" DOM element for outbox since
  * we don't want the content to wrap. Instead, we use the "wormhole-outbox-side"
  * DOM element, which allows the content to be side by side.
  */

:is(.outbox-index-route,.outbox-evaluation-route) .content-holder {
    width: 100% !important;
    box-sizing: border-box;
  }

:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder {
      display: flex;
      gap: var(--space-inline-l);
    }

:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .outbox-main {
        order: 1;
        flex-shrink: 0;
        width: var(--layout-width-boundary);
      }

:is(:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .outbox-main) .actions-icon {
          margin: 0; /* reset icon margin */
        }

/* Since we have a wormhole target for things rendered within the outbox-holder,
       * it needs to be before the main outlet in the DOM hierarchy. However, visually we need
       * this to be to the right of the content-holder. We're solving this by using the CSS `order` property. */

:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) #wormhole-outbox-side {
        order: 2;
        flex-grow: 1;
      }

/* make ancillar holder sticky in compact view */

.compact-view-enabled:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .registerable-highlighted {
          position: sticky;
          top: var(--space-stack-m);

          /* Allow scrolling inside the highlighted registerable,
          * if the screen height is less than the element height (e.g. laptop). */
          max-height: calc(100vh - var(--space-stack-m));
          overflow-y: auto; /* enable scrollbar */
        }

@container inner-main-container (max-width: 1500px) {
          .compact-view-enabled:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .outbox-main {
            width: 650px;
          }
        }

@container inner-main-container (max-width: 1300px) {
          .compact-view-enabled:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .outbox-main {
            width: 500px;
          }

          /* put the registerable auxiliary content below the details in small viewport */
          .compact-view-enabled:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .registerable-full .registerable-section-content {
            flex-direction: column;
          }
        }

@container inner-main-container (max-width: 1000px) {
          .compact-view-enabled:is(:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder) .outbox-main {
            width: 400px;
          }
        }

/* inital width */

@container inner-main-container (max-width: 800px) {

:is(:is(.outbox-index-route,.outbox-evaluation-route) .content-holder) .outbox-holder {
        width: var(--layout-width-boundary);
    }
      }

/* The content navigation */

@container inner-main-container (max-width: 1500px) {
    :is(.outbox-index-route,.outbox-evaluation-route) .content-navigation .content-navigation-inner {
      max-width: 100%;
    }
  }

.payments-transactions-route .context-branch-select-component {
    display: flex;
    align-items: center;

    margin-right: 1em;
  }

.payments-transactions-route .transaction-filter-controls {
    margin-bottom: var(--space-stack-m);
  }

:is(.payments-partial-invoices-index-route,.payments-partial-invoices-partial-invoice-route) .context-branch-select-component {
    display: flex;
    align-items: center;

    margin-right: 1em;
  }

:is(.settings-questionnaire-route .content-holder,.settings-questionnaire-route .modal-window-content) .pill-container {
      display: flex;
      flex-wrap: wrap;
      margin-top: var(--space-stack-xs);
      margin-bottom: var(--space-stack-s);
      gap: var(--space-inline-s);
    }

:is(.settings-questionnaire-route .content-holder,.settings-questionnaire-route .modal-window-content) .control-group:not(:last-child) {
      /* Since most of the control-groups contain several controls, we want to add
       * some extra space between control-groups to make the appearance less cluttered */
      margin-bottom: var(--space-stack-xl);
    }

/* select modal in new expense route (not being wrapped in `.expense-new-route` selector is intentional) */

.modal-window-content .receipts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-m);

    /* indicate that it's clickable */
  }

:is(.modal-window-content .receipts) .receipt img {
      cursor: pointer;
    }

.email-receipt-hint {
  border-radius: 0.25em;
  border-radius: var(--misc-subtle-rounding);
  padding: var(--space-inset-square-m);
  background-color: hsl(0 0% 95%);
  background-color: var(--color-neutral-bg);
  box-sizing: border-box;
  text-align: center;
  width: 15em;
}

.email-receipt-hint .action {
    margin-bottom: var(--space-stack-s);
  }

.primary:is(.email-receipt-hint .action) a {
      font-weight: bold;
    }

/* TODO at some point it may make sense to make this a property
   * configured on the template/route/controller (e.g. <nothing>, wide, full-width),
   * which in turn would set a class on <body> that would propagate down. */

.receipts-index-route .content-navigation-inner {
    max-width: none;
  }

:is(.receipts-index-route .content-holder) .receipts {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-inline-m);

      /* indicate that it's clickable */
    }

:is(:is(.receipts-index-route .content-holder) .receipts) .receipt img {
        cursor: pointer;
      }

.receipts-index-route .content-holder {

    /* maximize width for content-holder */
    width: 100% !important;
    min-width: var(--layout-width-boundary);
    box-sizing: border-box;
    flex-grow: 1;

    /* There isn't a way to detect the click handler attached from
     * outside the component, via `{{on 'click' this.myMethod}}`, so
     * we're using a static class (there is no click handler on archived receipts). */
  }

:is(.receipts-index-route .content-holder) .receipt-component:not(.archived) {
      cursor: pointer;
    }

:is(.receipts-index-route .content-holder) .receipts-view-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-inline-m);
    }

:is(:is(.drives-new-route,.trips-new-route) .content-holder) .toolbar {
      margin-top: var(--space-stack-m);
    }

/* expense, refund */

:is(.expenses-new-route,.refunds-new-route) .content-navigation-inner,:is(.expenses-new-route,.refunds-new-route) .content-holder {
    max-width: var(--layout-width-wide);
  }

:is(.expenses-new-route,.refunds-new-route) .content-holder {
    width: auto !important;
    min-width: var(--layout-width-boundary);
    box-sizing: border-box;
  }

:is(:is(.expenses-new-route,.refunds-new-route) .content-holder) .receipt-placeholder {
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
      margin: 0;
      background-color: hsl(28 2% 96%);
      background-color: var(--color-bg-container);

      min-height: 30em;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
    }

:is(:is(:is(.expenses-new-route,.refunds-new-route) .content-holder) .receipt-placeholder) .receipt-upload-area {
        border-top-left-radius: 0.25em;
        border-top-left-radius: var(--misc-subtle-rounding);
        border-top-right-radius: 0.25em;
        border-top-right-radius: var(--misc-subtle-rounding);

        box-sizing: border-box;
        width: 100%;
        flex: 1;
      }

:is(:is(:is(.expenses-new-route,.refunds-new-route) .content-holder) .receipt-placeholder) .empty-icon {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

:is(:is(:is(.expenses-new-route,.refunds-new-route) .content-holder) .receipt-placeholder) .attach {
        margin: var(--space-stack-m) 0;
      }

/* drive */

.drives-new-route .content-navigation-inner,.drives-new-route .content-holder {
    max-width: var(--layout-width-wide);
  }

.drives-new-route .content-holder {
    width: auto !important;
    min-width: var(--layout-width-boundary);
    box-sizing: border-box;
  }

/* Override default width to better fit the analytics layout */

.relational-analytics-route .content-holder {
    width: var(--layout-width-wide) !important;
    min-width: var(--layout-width-boundary);
    box-sizing: border-box;
  }

.relational-analytics-route .schema-description-detail {
    border-radius: 0.25em;
    border-radius: var(--misc-subtle-rounding);
    box-shadow: 0 4px 24px 4px hsl(0 0% 10% / 30%);
    box-shadow: var(--misc-window-shadow);
    max-height: 16vh; /* Set so that it does not move out of screen */
    max-width: 20em;
    background-color: hsl(0 0% 100%);
    background-color: var(--color-modal-bg);
    padding: var(--space-inset-square-l);
    overflow-y: auto;
    overscroll-behavior: contain; /* Avoid scrolling the entire page when scrolling inside a popover window */
  }

.relational-analytics-route .query-heading-area {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

:is(.relational-analytics-route .query-heading-area) .active-query-heading {
      margin-bottom: 0;
      word-wrap: break-word;
      word-break: break-all;
    }

:is(.relational-analytics-route .query-heading-area) .new-query-button {
      margin-left: auto;
      margin-right: 370px;
    }

.relational-analytics-route .info-text {
    margin-left: auto;
    font-size: var(--font-size-text-small);
  }

.relational-analytics-route .relational-analytics-input-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-inline-m);
    margin-bottom: var(--space-stack-m);
  }

:is(.relational-analytics-route .relational-analytics-input-container) .query-input-area {
      flex: 1;
    }

:is(:is(.relational-analytics-route .relational-analytics-input-container) .query-input-area) .code-size-area {
        height: 500px; /* also update .library-menu => max-height when you change this */
      }

:is(.relational-analytics-route .relational-analytics-input-container) .library-menu {
      background-color: hsl(0 0% 98%);
      background-color: var(--color-bg-container-discreet);
      width: 350px;
      max-height: 498px; /* .code-size-area height minus 2px border (top and bottom) */
      margin-top: calc(14px * 1.5 + 0.1rem); /* Calculation to match margin from form-vertical */
      overflow-y: auto;
      border: 1px solid hsl(28 6% 90%);
      border: 1px solid var(--color-bg-contour);
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
    }

:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .library-header {
        font-family: 'PT Sans Caption', sans-serif;
        font-family: var(--font-caption);
        padding: var(--space-inset-square-m);
        padding-bottom: 0;
        margin-bottom: 0;
      }

/* Override default styling */

/* TODO: This configuration should probably be include in the component */

:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .segmented-control-component {
        width: 100%;

        margin: 0 var(--space-inset-square-m);
      }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .segmented-control-component) .segmented-control-item {
          flex: 1;
        }

:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .library-tab {
        /* Need to set a fixed height for scroll-to offset to work.
          60px approximately represents `padding: var(--space-stack-s) 0;` */
        height: 60px;
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: hsl(0 0% 98%);
        background-color: var(--color-bg-container-discreet);
        border-bottom: 1px solid hsl(28 6% 90%);
        border-bottom: 1px solid var(--color-bg-contour);
      }

:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button {
        padding: var(--space-stack-s) var(--space-inset-square-m);
        text-align: left;
        background-color: hsl(0 0% 98%);
        background-color: var(--color-bg-container-discreet);
      }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button):hover {
          background-color: hsl(28 2% 96%);
          background-color: var(--color-bg-container);
          cursor: pointer;
        }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .template-header {
          margin-bottom: var(--space-stack-xs);
        }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .template-header) span {
            font-family: 'PT Sans Caption', sans-serif;
            font-family: var(--font-caption);
            line-height: var(--font-line-height-base);
          }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .template-header) .exit-analytical-query {
            margin-left: auto;
          }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .template-description {
          font-size: var(--font-size-text-small);
          line-height: var(--font-line-height-short);
          color: hsl(0 0% 41%);
          color: var(--color-text-subtle);
          overflow-wrap: break-word;
          margin-bottom: var(--space-stack-xs);
        }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .analytical-query-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: var(--space-inline-xs);
          line-height: var(--font-line-height-base);
        }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .analytical-query-header) .heading {
            font-family: 'PT Sans Caption', sans-serif;
            font-family: var(--font-caption);

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

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .analytical-query-header) .action-menu {
            margin-left: auto;
          }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button) .analytical-query-date {
          display: flex;
          flex-direction: row;
          gap: var(--space-inline-s);
          align-items: center;
          margin-top: var(--space-stack-xs);
          font-size: var(--font-size-text-small);
          color: hsl(0 0% 41%);
          color: var(--color-text-subtle);
        }

:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .query-button-active {
        background-color: hsl(28 2% 96%);
        background-color: var(--color-bg-container);
      }

:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema {
        font-family: 'PT Mono', monospace;
        font-family: var(--font-monospace);
      }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-table-name {
          line-height: var(--font-line-height-base);
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          gap: var(--space-inline-s);
          padding: var(--space-stack-xs) var(--space-inset-square-m);
        }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-table-name):hover {
            background-color: hsl(28 2% 96%);
            background-color: var(--color-bg-container);
            cursor: pointer;
          }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-table-name) .schema-table-icon {
            font-size: 0.625rem;
            margin-left: auto;
          }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-table-name) .popover-icon {
            color: hsl(0 0% 41%);
            color: var(--color-text-subtle);
            font-size: var(--font-size-text-small);
          }

:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-description {
          margin-bottom: var(--space-stack-s);
        }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-description) .column-description {
            line-height: var(--font-line-height-base);
            font-size: var(--font-size-text-small);
            padding-left: calc(var(--space-inline-s) + var(--space-inset-square-m));
            padding-right: var(--space-inset-square-m);
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            gap: var(--space-inline-s);
            align-items: center;
          }

:is(:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-description) .column-description):hover {
              background-color: hsl(28 2% 96%);
              background-color: var(--color-bg-container);
            }

:is(:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-description) .column-description) .popover-icon {
              color: hsl(0 0% 41%);
              color: var(--color-text-subtle);
              font-size: var(--font-size-text-small);
            }

:is(:is(:is(:is(.relational-analytics-route .relational-analytics-input-container) .library-menu) .schema) .schema-description) .data-type-right-aligned {
            margin-left: auto;
            text-transform: uppercase;
          }

.relational-analytics-route .analytics-table-area {
    /* Available space minus padding added by content holder minus padding over button */
    max-height: calc(100vh - var(--space-inset-square-m) - var(--space-inset-square-s));
    display: flex;
    flex-direction: column;
  }

:is(.relational-analytics-route .analytics-table-area) .analytics-table-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: var(--space-inset-square-s);
      align-items: center;
      margin-bottom: var(--space-stack-s);
    }

:is(:is(.relational-analytics-route .analytics-table-area) .analytics-table-header) .table-header {
        margin-right: auto;
        margin-bottom: 0; /* Override default styling */
      }

:is(:is(.relational-analytics-route .analytics-table-area) .analytics-table-header) .table-caption {
        font-size: var(--font-size-text-small);
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

:is(.relational-analytics-route .analytics-table-area) .analytics-table-sink {
      background-color: hsl(28 2% 96%);
      background-color: var(--color-bg-container);
      font-family: 'PT Mono', monospace;
      font-family: var(--font-monospace);
      padding: 0 var(--space-inset-square-s);
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
      overflow-x: auto;
      overflow-y: auto;
      text-align: left;

      /* Overwrite default styling */
    }

:is(:is(:is(.relational-analytics-route .analytics-table-area) .analytics-table-sink) .analytics-table-sticky) thead {
          position: sticky;
          top: 0;
          background-color: hsl(28 2% 96%);
          background-color: var(--color-bg-container);
          box-shadow: 0 1px 0 hsl(28 6% 90%);
          box-shadow: 0 1px 0 var(--color-bg-contour);
        }

:is(:is(:is(:is(.relational-analytics-route .analytics-table-area) .analytics-table-sink) .analytics-table-sticky) thead) th {
            padding: var(--space-stack-s) var(--space-inset-square-s);
          }

.submitted-modal .feedback {
    display: flex;
    justify-content: center;
  }

.report-index-route .report-header {
    /* whitespace at the top of report,
     * for less visual clutter */
    min-height: 8em;

    position: relative; /* for stamp */
    padding-right: 11rem; /* space for stamp */
    margin-bottom: var(--space-stack-s);
  }

:is(.report-index-route .report-header) .stamp {
      top: 10%;
      right: 0;
    }

:is(.report-index-route .report-content) .approve-refuse {
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
      padding: var(--space-inset-square-m);
    }

:is(:is(.report-index-route .report-content) .approve-refuse) .toolbar {
        /* remove bottom margin, since this toolbar is inside a gray box */
        /* TODO an improvement may be to style the toolbar directly (gray) instead */
        justify-content: center;
        margin-bottom: 0;
      }

/* TODO tried to get `position: sticky` working when refuse is expanded
     * (by setting a 'refuse-expanded' class on .approve-refuse div), and
     * fixing it to the bottom. However, it doesn't work.
     * https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
     * https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work
     * https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox
     * &.refuse-expanded {
     *   position: sticky;
     *   bottom: 18px;
     * }
     */

:is(:is(.report-index-route .report-content) .refuse-block) .refuse-header {
        display: flex;
        margin-bottom: var(--space-stack-l);
      }

:is(:is(:is(.report-index-route .report-content) .refuse-block) .refuse-header)  > h3 {
          margin-bottom: 0;
          margin-bottom: initial; /* override default */
        }

:is(:is(:is(.report-index-route .report-content) .refuse-block) .refuse-header)  > a {
          margin-left: auto;
        }

/* Reduce prominence of popover link (change approval chain) */

:is(:is(.report-index-route .report-content) .popover-link-component) > a {
        border: none;
      }

/* The purpose of these adjustments is to make the report view
  * easier to use (in compact mode) on small displays. Generally we don't make
  * per-view adjustments based on the viewport size. But the outbox and report
  * views are important enough to warrant an exception.
  *
  * The order of these container queries matter.
  *
  * We doesn't use the "wormhole-ancillary" DOM element for report since
  * we don't want the content to wrap. Instead, we use the "wormhole-report-side"
  * DOM element, which allows the content to be side by side.
  */

:is(.report-index-route,.report-evaluation-route) .content-holder {
    width: 100% !important;
    box-sizing: border-box;
  }

:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder {
      display: flex;
      gap: var(--space-inline-l);
    }

:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .report-main {
        order: 1;
        flex-shrink: 0;
        width: var(--layout-width-boundary);
      }

/* Since we have a wormhole target for things rendered within the report-holder,
       * it needs to be before the main outlet in the DOM hierarchy. However, visually we need
       * this to be to the right of the content-holder. We're solving this by using the CSS `order` property. */

:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) #wormhole-report-side {
        order: 2;
        flex-grow: 1;
      }

/* make ancillar holder sticky in compact view */

.compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .registerable-highlighted {
          position: sticky;
          top: var(--space-stack-m);

          /* Allow scrolling inside the highlighted registerable,
          * if the screen height is less than the element height (e.g. laptop). */
          max-height: calc(100vh - var(--space-stack-m));
          overflow-y: auto; /* enable scrollbar */
        }

@container inner-main-container (max-width: 1500px) {
          .compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .report-main {
            width: 650px;
          }
        }

@container inner-main-container (max-width: 1300px) {
          .compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .report-main {
            width: 500px;
          }

          /* put the registerable auxiliary content below the details in small viewport */
          .compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .registerable-full .registerable-section-content {
            flex-direction: column;
          }
        }

@container inner-main-container (max-width: 1000px) {
          .compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .report-main {
            width: 400px;
          }
        }

/* inital width */

@container inner-main-container (max-width: 800px) {

:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder {
        width: var(--layout-width-boundary);
    }
      }

/* The content navigation */

@container inner-main-container (max-width: 1500px) {
    :is(.report-index-route,.report-voucher-route,.report-history-route,.report-evaluation-route) .content-navigation .content-navigation-inner {
      max-width: 100%;
    }
  }

.report-voucher-route .voucher-table {
    min-width: 40em; /* sync width (if possible), this will allow a table to grow if needed */
  }

:is(.report-voucher-route .voucher-table) a {
      margin-right: var(--space-inline-s);
    }

@media print {
      :is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder {
        display: inline; /* make it wrap naturally when required */
      }
          .compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .registerable-highlighted {
            /* We don't want the wormhole-report-side included when printing
               (in compact view we'll only print the compact list). */
            display: none;
          }

          .compact-view-enabled:is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .report-main {
            width: 100%; /* make sure the content is printed in full width instead of the width in compact view */
          }

        /* hide approve/refuse buttons */
        :is(:is(:is(.report-index-route,.report-evaluation-route) .content-holder) .report-holder) .approve-refuse-toolbar {
          display: none;
        }
}

/* TODO if we keep this, at some point it may make sense to make this a property
   * configured on the template/route/controller (e.g. <nothing>, wide, full-width),
   * which in turn would set a class on <body> that would propagate down. */

:is(.reports-route,.review-route,.administer-route) .content-holder,:is(.reports-route,.review-route,.administer-route) .content-navigation-inner {
    max-width: 1000px;
    width: auto !important;
    min-width: var(--layout-width-boundary);
  }

.report-history-route .date-bucket {
    cursor: default; /* don't show text-selection cursor */
  }

:is(.report-history-route .date-bucket)  > .date-heading {
      font-family: 'PT Sans Caption', sans-serif;
      font-family: var(--font-caption);
      font-size: var(--font-size-heading3);
      font-weight: bold;
    }

.report-history-route .date-bucket ~ .date-bucket {
    margin-top: var(--space-stack-l);
  }

.report-history-route .user-entity-bucket {
    /* Colored stripe at the edge, to make it easier to identify different kinds of items
     * within a single collection, for example expenses, drives, and trips in a report. */
    position: relative;
  }

:is(.report-history-route .user-entity-bucket)::before {
      content: '';
      position: absolute;
      height: calc(100% - calc(var(--space-inset-square-m)) * 2);
      top: var(--space-inset-square-m);
      left: 0;
      width: 4px;
      background-color: hsl(57 83% 81%);
      background-color: var(--color-report);
      border-radius: 8px;
      border-radius: var(--misc-moderate-rounding);
    }

.report-history-route .user-entity-bucket {

    padding: var(--space-inset-square-m);
  }

.expense:is(.report-history-route .user-entity-bucket)::before {
      background-color: hsl(230 49% 85%);
      background-color: var(--color-expense);
    }

.drive:is(.report-history-route .user-entity-bucket)::before {
      background-color: hsl(330 49% 85%);
      background-color: var(--color-drive);
    }

.trip:is(.report-history-route .user-entity-bucket)::before {
      background-color: hsl(180 49% 85%);
      background-color: var(--color-trip);
    }

.report:is(.report-history-route .user-entity-bucket)::before {
      background-color: hsl(57 83% 81%);
      background-color: var(--color-report);
    }

:is(.report-history-route .user-entity-bucket)  > .bucket-heading {
      font-size: var(--font-size-text-large);
      margin-bottom: var(--space-stack-xs);
    }

/* minutes link */

:is(.report-history-route .user-entity-bucket) .icon-component.link {
      color: hsl(0 0% 20%);
      color: var(--color-link-discreet);
      opacity: 0%;
    }

:is(:is(.report-history-route .user-entity-bucket) .icon-component.link):hover {
        color: hsl(0 0% 0%);
        color: var(--color-link-discreet-hover);
      }

:is(.report-history-route .user-entity-bucket):hover .icon-component.link {
      transition: opacity 200ms 300ms;
      opacity: 100%;
    }

:is(.report-history-route .user-entity-bucket)  > .actor-subheading {
      font-style: italic;
      margin-bottom: var(--space-stack-s);
    }

:is(:is(.report-history-route .user-entity-bucket) > .secondary-label)::before {
        content: '–';
      }

:is(.report-history-route .user-entity-bucket)  > .secondary-label {

      color: hsl(0 0% 41%);

      color: var(--color-text-subtle);
      display: inline-block;
      font-style: italic;
    }

:is(.report-history-route .user-entity-bucket) .timestamp {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      font-style: italic;
    }

:is(.report-history-route .user-entity-bucket) .minute-modification {
      margin-bottom: var(--space-stack-xs);
    }

:is(:is(.report-history-route .user-entity-bucket) .minute-modification) .minute-modification-key {
        display: inline-block;
        margin-right: var(--space-inline-xs);
      }

:is(:is(.report-history-route .user-entity-bucket) .minute-modification) .minute-modification-old-value {
        color: hsl(0 0% 41%);
        color: var(--color-text-subtle);
      }

:is(:is(:is(.report-history-route .user-entity-bucket) .minute-modification) .minute-modification-new-value)::before {
          content: '→';
          padding: 0 var(--space-inline-xs);
        }

:is(:is(.report-history-route .user-entity-bucket) .minute-modification) .sign {
        font-weight: bold;
      }

.review-feedback-modal .feedback {
    display: flex;
    justify-content: center;
  }

/* style for code input, used in e.g. rules */

.settings-branch-profiles-branch-profile-rules-index-route .disabled-note {
    color: hsl(0 0% 58%);
    color: var(--color-text-disabled);
  }

.settings-branch-profiles-branch-profile-rules-index-route .validation-error {
    color: hsl(0 50% 45%);
    color: var(--color-danger-signature);
  }

.settings-branch-profiles-branch-profile-rules-index-route .validation-warning {
    color: hsl(35 80% 50%);
    color: var(--color-warning-signature);
  }

.alpha:is(.settings-branch-profiles-branch-profile-rules-index-route .halting-set-heading) {
      color: hsl(346 90% 66%);
      color: var(--color-swatch-alpha);
    }

.beta:is(.settings-branch-profiles-branch-profile-rules-index-route .halting-set-heading) {
      color: hsl(210 80% 52%);
      color: var(--color-swatch-beta);
    }

.gamma:is(.settings-branch-profiles-branch-profile-rules-index-route .halting-set-heading) {
      color: hsl(169 50% 41%);
      color: var(--color-swatch-gamma);
    }

.delta:is(.settings-branch-profiles-branch-profile-rules-index-route .halting-set-heading) {
      color: hsl(35 81% 44%);
      color: var(--color-swatch-delta);
    }

.epsilon:is(.settings-branch-profiles-branch-profile-rules-index-route .halting-set-heading) {
      color: hsl(280 80% 56%);
      color: var(--color-swatch-epsilon);
    }

.zeta:is(.settings-branch-profiles-branch-profile-rules-index-route .halting-set-heading) {
      color: hsl(74 75% 34%);
      color: var(--color-swatch-zeta);
    }

/* AND divider */

:is(:is(.settings-branch-profiles-branch-profile-rules-new-route,.settings-branch-profiles-branch-profile-rules-rule-route) .rule-actions) .logical-connective {
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      margin: var(--space-stack-l) 0;
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
    }

:is(.settings-branch-profiles-branch-profile-rules-new-route,.settings-branch-profiles-branch-profile-rules-rule-route,.settings-branch-profiles-branch-profile-rules-bulk-add-route) .validation {
    margin-bottom: var(--space-stack-l);
  }

:is(:is(.settings-branch-profiles-branch-profile-rules-new-route,.settings-branch-profiles-branch-profile-rules-rule-route,.settings-branch-profiles-branch-profile-rules-bulk-add-route) .validation) .description {
      font-weight: bold;
      margin-bottom: var(--space-stack-m);
    }

:is(:is(.settings-branch-profiles-branch-profile-rules-new-route,.settings-branch-profiles-branch-profile-rules-rule-route,.settings-branch-profiles-branch-profile-rules-bulk-add-route) .validation) .error {
      color: hsl(0 50% 45%);
      color: var(--color-danger-signature);
    }

:is(:is(.settings-branch-profiles-branch-profile-rules-new-route,.settings-branch-profiles-branch-profile-rules-rule-route,.settings-branch-profiles-branch-profile-rules-bulk-add-route) .validation) .warning {
      color: hsl(35 80% 50%);
      color: var(--color-warning-signature);
    }

/* settings layout */

/* large cogs */

:is(.settings-index-route .content-holder) div.placeholder {
      text-align: center;
      padding-top: 6rem;
      color: hsl(0 0% 20%);
      color: var(--color-text);
    }

:is(.signup-route .country-field) .country-select-component {
      width: 100%;
      text-align: left;
    }

:is(:is(.signup-route .country-field) .country-select-component) .minimized-element {
        width: 100%;
        padding: var(--space-inset-squish-l); /* mimic padding used for input elements */
      }

:is(.signup-route .country-field) .toggle {
      text-transform: lowercase;
    }

:is(:is(.signup-route .control-group) .controls) .input-addon {
        width: 100%;
      }

.deactivated-trial-expired-route h1 {
    margin-bottom: var(--space-stack-l);
  }

.deactivated-trial-expired-route button {
    margin-bottom: var(--space-stack-m);
  }

.unknown-route .content-holder {
    text-align: center;
  }

:is(.unknown-route .content-holder) p {
      max-width: 35em;
      margin: var(--space-stack-l) auto;
    }

:is(.unknown-route .content-holder) img {
      border-radius: 0.25em;
      border-radius: var(--misc-subtle-rounding);
    }

:is(.settings-users-index-route .content-holder) .users-count {
      margin-left: var(--space-inline-m);
      color: hsl(0 0% 41%);
      color: var(--color-text-subtle);
      font-style: italic;
    }

:is(:is(.settings-users-new-route,.settings-users-user-index-route) .form-content) input[type='text'],:is(:is(.settings-users-new-route,.settings-users-user-index-route) .form-content) input[type='email'] {
      min-width: 15em;
    }

:is(.settings-users-new-route,.settings-users-user-index-route) .previous-branches-header {
    margin-bottom: var(--space-stack-xs);
  }

:is(.settings-users-new-route,.settings-users-user-index-route) .previous-branches-divider {
    margin-top: 0;
  }

:is(.settings-users-new-route,.settings-users-user-index-route) .previous-branches-accordion {
    margin-bottom: var(--space-stack-s);
  }

/* This is to avoid the modal growing too much due to the expansion ratio.
     * If we could control the modal expansion ratio we might not need this. */

.modal-window-frame:is(.settings-users-user-index-route .user-delete-modal) {
      max-width: 50em;
    }

:is(.settings-users-user-index-route .user-delete-modal) .user-name {
      grid-area: user-name;
    }

:is(.settings-users-user-index-route .user-delete-modal) .company-name {
      grid-area: company-name;
    }

:is(.settings-users-user-index-route .user-delete-modal) .user-name,:is(.settings-users-user-index-route .user-delete-modal) .company-name,:is(.settings-users-user-index-route .user-delete-modal) .user-effects,:is(.settings-users-user-index-route .user-delete-modal) .company-effects {
      padding: var(--space-inset-square-m);
    }

:is(.settings-users-user-index-route .user-delete-modal) .company-name,:is(.settings-users-user-index-route .user-delete-modal) .company-effects {
      border-left: 1px solid hsl(28 6% 90%);
      border-left: 1px solid var(--color-bg-contour);
    }

:is(.settings-users-user-index-route .user-delete-modal) .user-effects,:is(.settings-users-user-index-route .user-delete-modal) .company-effects {
      border-top: 1px solid hsl(28 6% 90%);
      border-top: 1px solid var(--color-bg-contour);
    }

:is(.settings-users-user-index-route .user-delete-modal) .user-effects {
      grid-area: user-effects;
    }

:is(.settings-users-user-index-route .user-delete-modal) .company-effects {
      grid-area: company-effects;
    }

:is(.settings-users-user-index-route .user-delete-modal) .delete-explanation {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto;
      grid-template-areas:
        'user-name company-name'
        'user-effects company-effects';
    }

:is(.settings-users-user-index-route .user-change-role-modal) .user-change-role-form {
      display: flex;
    }

:is(:is(.settings-users-user-index-route .user-change-role-modal) .user-change-role-form) .role-selection {
        flex: 1;
        padding: var(--space-inset-square-xl);
      }

:is(:is(.settings-users-user-index-route .user-change-role-modal) .user-change-role-form) .role-description {
        flex: 1;
        padding: var(--space-inset-square-xl);
        border-left: 1px solid hsl(28 6% 90%);
        border-left: 1px solid var(--color-bg-contour);
      }

/* media: print */

/* General Print Stylesheet
 * https://alistapart.com/article/goingtoprint/
 * https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
 */

@media screen {
  /* hide print header on all screens */
  .print-header {
    display: none !important;
  }
}

/* when printing, we'd like to hide a bunch of elements,
 * for example global navigation, various toolbars, etc. */

@media print {
  .print-header {
    font-family: 'PT Sans Caption', sans-serif;
    font-family: var(--font-caption);
    font-weight: bold;
    font-size: 18pt;
    margin-bottom: var(--space-stack-s);
  }

  /* hide buttons and toolbars */
  .toolbar,
  .sort-toolbar,
  .receipt-component-overlay,
  .buttons {
    display: none !important;
  }

  /* hide navigation */
  .sidebar-navigation-component,
  .content-navigation-items,
  .settings-navigation-component {
    display: none !important;
  }

  /* hide stripes */
  .stripe-container-component {
    display: none !important;
  }

  /* Adjustments for print
   * - borders and backgrounds aren't necessary
   * - switch color to pitch black, looks better in print
   * - change the font-size to the print-based .pt scale */
  body {
    background-color: transparent;
    font-size: 10pt;
    color: hsl(0 0% 0%);
    margin-left: var(--space-inline-s); /* some printers have too little default margin */
  }

  /* links should be black, and not look like links
   * (all toolbar links etc. are hidden, but some links are headings too, so we can't just hide them) */
  a {
    color: hsl(0 0% 0%) !important;
    text-decoration: none;
  }

  h1 {
    font-size: 16pt;
  }

  h2 {
    font-size: 12pt;
  }

  /* disable shadows (awful in print) */
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }

    *::before,*::after {
      box-shadow: none !important;
    }

  /* remove background images */
  * {
    background-image: none !important;
  }

  /* layout adjustments */
  .content-holder {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* make viewport continuous (like a normal webpage) */
  html,
  body,
  .metal-frame,
  .mother-frame,
  .primary-frame,
  .main-frame,
  .inner-main-frame,
  .content-frame {
    height: auto !important; /* clear height 100vh */
    min-height: auto !important;
    overflow: visible !important;
    display: block !important; /* clear flex */
  }

  /* since navigation is hidden we don't need margin for navigation */
  .mother-frame.navigation-visible .primary-frame {
    margin-left: 0;
  }

  /* Control paper/print layout */

  /* Avoid breaking up articles */
  /* TODO could probably adjust this to cover more types of content,
   * mainly most components (all with bounded/limited height) */
  article {
    page-break-inside: avoid;
  }
}